Make scrubber head show again

Wrapping with `ScrollContainer` caused the playhead to get cut off, because `ScrollContainer` sets CSS `overflow`. Elevating the relative parent for the playhead above `ScrollContainer` fixes this issue.
opencast · Dec 11, 2023 · bb8f42f · bb8f42f
1 parent 564980a
commit bb8f42f
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
@@ -60,7 +60,7 @@ const Timeline: React.FC<{
   const scrollContainerRef = useRef(null);
 
   const timelineStyle = css({
-    position: 'relative',     // Need to set position for Draggable bounds to work
+    // position: 'relative',     // Need to set position for Draggable bounds to work
     height: timelineHeight + 'px',
     width: (timelineZoom) * 100 + '%',    // Width modified by zoom
   });
@@ -74,29 +74,31 @@ const Timeline: React.FC<{
   }
 
   return (
-    <ScrollContainer innerRef={scrollContainerRef} css={{overflowY: 'hidden', width: '100%', height: `${timelineHeight}px`}}
-      vertical={false}
-      horizontal={true}
-      ignoreElements={"#no-scrolling"}  // dom elements with this id in the container will not trigger scrolling when dragged
-      hideScrollbars={false}            // ScrollContainer hides scrollbars per default
-    >
-      <div ref={ref} css={timelineStyle} onMouseUp={e => setCurrentlyAtToClick(e)}>
-        <Scrubber
-          timelineWidth={width}
-          timelineHeight={timelineHeight}
-          selectCurrentlyAt={selectCurrentlyAt}
-          selectIsPlaying={selectIsPlaying}
-          setCurrentlyAt={setCurrentlyAt}
-          setIsPlaying={setIsPlaying}
-        />
-
-        <div css={{position: 'relative', height: timelineHeight + 'px'}} >
-          <Waveforms timelineHeight={timelineHeight}/>
-          <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
-        </div>
+    <div css={{position: 'relative'}}> {/* Relative top level container for absolute scrubber to attach to. Otherwise, the out-of-frame parts won't render, due to the "overflow" in the scroll container. */}
+      <ScrollContainer innerRef={scrollContainerRef} css={{overflowY: 'hidden', width: '100%', height: `${timelineHeight}px`}}
+        vertical={false}
+        horizontal={true}
+        ignoreElements={"#no-scrolling"}  // dom elements with this id in the container will not trigger scrolling when dragged
+        hideScrollbars={false}            // ScrollContainer hides scrollbars per default
+      >
+        <div ref={ref} css={timelineStyle} onMouseUp={e => setCurrentlyAtToClick(e)}>
+          <Scrubber
+            timelineWidth={width}
+            timelineHeight={timelineHeight}
+            selectCurrentlyAt={selectCurrentlyAt}
+            selectIsPlaying={selectIsPlaying}
+            setCurrentlyAt={setCurrentlyAt}
+            setIsPlaying={setIsPlaying}
+          />
+
+          <div css={{position: 'relative', height: timelineHeight + 'px'}} >
+            <Waveforms timelineHeight={timelineHeight}/>
+            <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
+          </div>
 
-      </div>
-    </ScrollContainer>
+        </div>
+      </ScrollContainer>
+    </div>
   );
 };
 
@@ -258,7 +260,7 @@ export const Scrubber: React.FC<{
       position={controlledPosition}
       nodeRef={nodeRef}
     >
-      <div ref={nodeRef} css={scrubberStyle}>
+      <div ref={nodeRef} css={scrubberStyle} id="no-scrolling">
         <div css={scrubberDragHandleStyle} aria-grabbed={isGrabbed}
           aria-label={t("timeline.scrubber-text-aria",
             {currentTime: convertMsToReadableString(currentlyAt), segment: activeSegmentIndex,