Merge branch 'zoom-dropdown' of Arnei/opencast-editor into r/18.x

Pull request #1593

  Add Zoom dropdown

Author: gregorydlogan

src/main/CuttingActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BREAKPOINTS, basicButtonStyle, customIconStyle, undisplay } from "../cssStyles";
+import { BREAKPOINTS, basicButtonStyle, customIconStyle, selectFieldStyle, undisplay } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuScissors, LuChevronLeft, LuChevronRight, LuTrash, LuMoveHorizontal } from "react-icons/lu";
@@ -15,6 +15,8 @@ import {
   mergeAll,
   mergeLeft,
   mergeRight,
+  selectDisplayDuration,
+  selectDurationInSeconds,
   selectIsCurrentSegmentAlive,
   selectTimelineZoom,
   setTimelineZoom,
@@ -30,6 +32,7 @@ import { ThemedTooltip } from "./Tooltip";
 import { Slider } from "@mui/material";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ProtoButton } from "@opencast/appkit";
+import Select, { components } from "react-select";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -179,6 +182,7 @@ const CuttingActions: React.FC = () => {
           hotkeyNameOut: rewriteKeys(KEYMAP.cutting.zoomOut),
         })}
       />
+      <ZoomDropdown />
       {/* <CuttingActionsButton Icon={faQuestion} actionName="Reset changes" action={null}
         tooltip="Not implemented"
         ariaLabelText="Reset changes. Not implemented"
@@ -365,4 +369,75 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({
   );
 };
 
+const ZoomDropdown : React.FC = () => {
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+  const seconds = useAppSelector(selectDisplayDuration);
+  const durationInSeconds = useAppSelector(selectDurationInSeconds);
+
+  const options = [
+    {
+      label: "All",
+      value: "0",
+    },
+  ];
+  if (durationInSeconds > 60) {
+    options.push({
+      label: "10 s",
+      value: "1",
+    });
+  }
+  if (durationInSeconds > 60 * 10) {
+    options.push({
+      label: "1 m",
+      value: (1 - (60 / durationInSeconds)).toString(),
+    });
+  }
+  if (durationInSeconds > 300 * 5) {
+    options.push({
+      label: "5 m",
+      value: (1 - (300 / durationInSeconds)).toString(),
+    });
+  }
+
+  const renderTime = (seconds: number) => {
+    const minutes = seconds / 60;
+    const hours = seconds / 3600;
+
+    if (hours >= 1) {
+      return Math.round(hours) + " h";
+    }
+    if (minutes >= 1) {
+      return Math.round(minutes) + " m";
+    }
+
+    return Math.round(seconds) + " s";
+  };
+
+  // @ts-expect-error No proper type for children available
+  const Control = ({ children, ...props }) => (
+    // @ts-expect-error And therefore this complains as well
+    <components.Control {...props}>
+      <div style={{ paddingLeft: "5px", paddingRight: "5px" }}>
+        ~{renderTime(seconds)}
+      </div>
+      {children[1]}
+    </components.Control>
+  );
+
+  return (
+    <Select
+      name="Zoom Dropdown"
+      styles={selectFieldStyle(theme)}
+      options={options}
+      onChange={option => {
+        if (option) {
+          dispatch(setTimelineZoom(parseFloat(option.value)));
+        }
+      }}
+      components={{ Control }}
+    />
+  );
+};
+
 export default CuttingActions;

src/main/Timeline.tsx

@@ -17,6 +17,7 @@ import {
   selectTimelineZoom,
   moveCut,
   selectDurationInSeconds,
+  selectDisplayDuration,
 } from "../redux/videoSlice";
 
 import { LuMenu } from "react-icons/lu";
@@ -67,13 +68,13 @@ const Timeline: React.FC<{
   const duration = useAppSelector(selectDuration);
   const durationInSeconds = useAppSelector(selectDurationInSeconds);
   const timelineZoom = useAppSelector(selectTimelineZoom);
+  const displayDuration = useAppSelector(selectDisplayDuration);
 
   const scrubberRef = useRef<HTMLDivElement | null>(null);
   const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
   const scrollContainerRef = useRef<HTMLElement>(null);
   const { width: scrollContainerWidth = 1 } = useResizeObserver<HTMLElement>({ ref: scrollContainerRef });
   const topOffset = 20;
-  const minDisplayTime = 10; // in seconds, what is shown at max zoom
 
   const currentlyScrolling = useRef(false);
   const zoomCenter = useRef(0);
@@ -92,15 +93,11 @@ const Timeline: React.FC<{
     zoomCenter.current = (scrubberVisible ? scrubberPosition : centerPosition) / width;
   };
 
-  const getDisplayPercentage = (zoomValue: number) => {
-    const displayDuration = (1 - zoomValue) * (durationInSeconds - minDisplayTime) + minDisplayTime;
-    return (durationInSeconds / displayDuration);
+  const displayPercentage = (durationInSeconds / displayDuration);
+  const getWaveformWidth = (baseWidth: number) => {
+    return baseWidth * displayPercentage;
   };
-  const getWaveformWidth = (baseWidth: number, zoomValue: number) => {
-    return baseWidth * getDisplayPercentage(zoomValue);
-  };
-  const displayPercentage = getDisplayPercentage(timelineZoom);
-  const zoomedWidth = getWaveformWidth(scrollContainerWidth, timelineZoom);
+  const zoomedWidth = getWaveformWidth(scrollContainerWidth);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(updateScroll, [currentlyAt, timelineZoom, width, scrollContainerWidth]);

src/redux/videoSlice.ts

@@ -408,6 +408,12 @@ const videoSlice = createSlice({
       }
       return undefined;
     },
+    selectDisplayDuration: state => {
+      const minDisplayTime = 10; // in seconds, what is shown at max zoom
+      const durationInSeconds = state.duration / 1000;
+      const displayDuration = (1 - state.timelineZoom) * (durationInSeconds - minDisplayTime) + minDisplayTime;
+      return displayDuration;
+    },
   },
 });
 
@@ -592,6 +598,7 @@ export const {
   selectSubtitlesFromOpencast,
   selectSubtitlesFromOpencastById,
   selectVideos,
+  selectDisplayDuration,
 } = videoSlice.selectors;
 
 export default videoSlice.reducer;