From fcc79d0eb236a35732248c22a0417c0e26d26e9b Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Thu, 13 Apr 2023 16:30:20 +0200
Subject: [PATCH 01/13] Basic zoom functionality for the cutting view

Based off of the subtitle view. Implements a very basic
zoom functionality, hoping that it's better than nothing.
Includes:
- A Slider to control the zoom level
- A horizontal scrollbar to move the timeline
- Drag n' Drop to move the timeline

Known issues:
- The scrubber/playhead is cut off if placed either at 0 or at
the maximum duration. I might have css'd myself into a
corner here.
---
 src/i18n/locales/en-US.json |  3 +-
 src/main/CuttingActions.tsx | 92 +++++++++++++++++++++++++++++--------
 src/main/Timeline.tsx       | 44 +++++++++++-------
 src/redux/videoSlice.ts     | 11 ++++-
 4 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 4514a5dd6..50e0fcae4 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -23,7 +23,8 @@
       "mergeLeft-tooltip-aria": "Merge Left. Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}.",
       "mergeRight-button": "Merge Right",
       "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
-      "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}."
+      "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+      "zoomSlider-aria": "Zoom"
     },
 
     "video": {
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index c314392a6..8dd69dd3e 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -16,16 +16,17 @@ import { css } from '@emotion/react'
 
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight
+  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, setTimelineZoom
 } from '../redux/videoSlice'
 import { GlobalHotKeys, KeySequence, KeyMapOptions } from "react-hotkeys";
 import { cuttingKeyMap } from "../globalKeys";
-import { ActionCreatorWithoutPayload } from "@reduxjs/toolkit";
+import { ActionCreatorWithoutPayload, ActionCreatorWithPayload } from "@reduxjs/toolkit";
 
 import './../i18n/config';
 import { useTranslation } from 'react-i18next';
 import { selectTheme, Theme } from "../redux/themeSlice";
 import { ThemedTooltip } from "./Tooltip";
+import { Slider } from "@mui/material";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -36,6 +37,7 @@ const CuttingActions: React.FC<{}> = () => {
 
   // Init redux variables
   const dispatch = useDispatch();
+  const theme = useSelector(selectTheme);
 
   /**
    * General action callback for cutting actions
@@ -43,10 +45,22 @@ const CuttingActions: React.FC<{}> = () => {
    * @param action redux event to dispatch
    * @param ref Pass a reference if the clicked element should lose focus
    */
-  const dispatchAction = (event: KeyboardEvent | SyntheticEvent, action: ActionCreatorWithoutPayload<string>, ref: React.RefObject<HTMLDivElement> | undefined) => {
+  const dispatchAction = (
+    event: KeyboardEvent | SyntheticEvent | Event,
+    action: ActionCreatorWithoutPayload<string> | undefined,
+    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    payload: any,
+    ref: React.RefObject<HTMLDivElement> | undefined
+  ) => {
     event.preventDefault()                      // Prevent page scrolling due to Space bar press
     event.stopPropagation()                     // Prevent video playback due to Space bar press
-    dispatch(action())
+
+    if (action) {
+      dispatch(action())
+    }
+    if (actionWithPayload) {
+      dispatch(actionWithPayload(payload))
+    }
 
     // Lose focus if clicked by mouse
     if (ref) {
@@ -56,10 +70,15 @@ const CuttingActions: React.FC<{}> = () => {
 
   // Maps functions to hotkeys
   const handlers = {
-    cut: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, cut, undefined) } },
-    delete: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, markAsDeletedOrAlive, undefined) } },
-    mergeLeft: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeLeft, undefined) } },
-    mergeRight: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeRight, undefined) } },
+    cut: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, cut, undefined, undefined, undefined) } },
+    delete: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, markAsDeletedOrAlive, undefined, undefined, undefined) } },
+    mergeLeft: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeLeft, undefined, undefined, undefined) } },
+    mergeRight: (keyEvent?: KeyboardEvent | SyntheticEvent) => { if(keyEvent) { dispatchAction(keyEvent, mergeRight, undefined, undefined, undefined) } },
+  }
+
+  // Callback for the zoom slider
+  const zoomSliderOnChange = (event: Event, newValue: number | number[]) => {
+    dispatchAction(event, undefined, setTimelineZoom, newValue, undefined)
   }
 
   const cuttingStyle =  css({
@@ -75,12 +94,25 @@ const CuttingActions: React.FC<{}> = () => {
     ...(flexGapReplacementStyle(30, true)),
   })
 
+  const sliderStyle = css({
+    width: '100px',
+    "& .MuiSlider-thumb": {
+      color: `${theme.text}`,
+    },
+    "& .MuiSlider-rail": {
+      color: `${theme.text}`,
+    },
+    "& .MuiSlider-track": {
+      color: `${theme.text}`,
+    },
+  })
+
   return (
     <GlobalHotKeys keyMap={cuttingKeyMap} handlers={handlers} allowChanges={true} >
       <div css={cuttingStyle}>
           <div css={blockStyle}>
             <CuttingActionsButton iconName={faCut}
-              actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut}
+              actionName={t("cuttingActions.cut-button")} actionHandler={dispatchAction} action={cut} actionWithPayload={undefined} payload={undefined}
               tooltip={t('cuttingActions.cut-tooltip', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
               ariaLabelText={t('cuttingActions.cut-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.cut.name] as KeyMapOptions).sequence })}
             />
@@ -88,17 +120,27 @@ const CuttingActions: React.FC<{}> = () => {
               hotKeyName={(cuttingKeyMap[handlers.delete.name] as KeyMapOptions).sequence}
             />
             <CuttingActionsButton iconName={faStepBackward}
-              actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
+              actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft} actionWithPayload={undefined} payload={undefined}
               tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
               ariaLabelText={t('cuttingActions.mergeLeft-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
             />
             <CuttingActionsButton iconName={faStepForward}
-              actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight}
+              actionName={t("cuttingActions.mergeRight-button")} actionHandler={dispatchAction} action={mergeRight} actionWithPayload={undefined} payload={undefined}
               tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
               ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
             />
           </div>
           <div css={blockStyle}>
+            <Slider
+              css={sliderStyle}
+              min={1}
+              max={10}
+              step={0.1}
+              defaultValue={1}
+              onChange={zoomSliderOnChange}
+              aria-label={t("zoomSlider-aria")}
+              valueLabelDisplay="off"
+            />
             {/* <CuttingActionsButton iconName={faQuestion} actionName="Reset changes" action={null}
               tooltip="Not implemented"
               ariaLabelText="Reset changes. Not implemented"
@@ -125,8 +167,15 @@ const cuttingActionButtonStyle = (theme: Theme) => css({
 interface cuttingActionsButtonInterface {
   iconName: IconProp,
   actionName: string,
-  actionHandler: (event: KeyboardEvent | SyntheticEvent, action: ActionCreatorWithoutPayload<string>, ref: React.RefObject<HTMLDivElement> | undefined) => void,
-  action: ActionCreatorWithoutPayload<string>,
+  actionHandler: (
+    event: KeyboardEvent | SyntheticEvent,
+    action: ActionCreatorWithoutPayload<string> | undefined,
+    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    payload: any,
+    ref: React.RefObject<HTMLDivElement> | undefined) => void,
+    action: ActionCreatorWithoutPayload<string> | undefined,
+    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    payload: any,
   tooltip: string,
   ariaLabelText: string,
 }
@@ -135,7 +184,7 @@ interface cuttingActionsButtonInterface {
  * A button representing a single action a user can take while cutting
  * @param param0
  */
-const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName, actionName, actionHandler, action, tooltip, ariaLabelText}) => {
+const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName, actionName, actionHandler, action, actionWithPayload, payload, tooltip, ariaLabelText}) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const theme = useSelector(selectTheme);
 
@@ -144,9 +193,9 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName
       <div css={[basicButtonStyle(theme), cuttingActionButtonStyle(theme)]}
         ref={ref}
         role="button" tabIndex={0} aria-label={ariaLabelText}
-        onClick={ (event: SyntheticEvent) => actionHandler(event, action, ref) }
+        onClick={ (event: SyntheticEvent) => actionHandler(event, action, actionWithPayload, payload, ref) }
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
-          actionHandler(event, action, undefined)
+          actionHandler(event, action, actionWithPayload, payload, undefined)
         }}}
         >
         <FontAwesomeIcon icon={iconName} size="1x" />
@@ -157,7 +206,12 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({iconName
 };
 
 interface markAsDeleteButtonInterface {
-  actionHandler: (event: KeyboardEvent | SyntheticEvent, action: ActionCreatorWithoutPayload<string>, ref: React.RefObject<HTMLDivElement> | undefined) => void,
+  actionHandler: (
+    event: KeyboardEvent | SyntheticEvent,
+    action: ActionCreatorWithoutPayload<string> | undefined,
+    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    payload: any,
+    ref: React.RefObject<HTMLDivElement> | undefined) => void,
   action: ActionCreatorWithoutPayload<string>,
   hotKeyName: KeySequence,
 }
@@ -178,9 +232,9 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
         ref={ref}
         role="button" tabIndex={0}
         aria-label={t('cuttingActions.delete-restore-tooltip-aria', { hotkeyName: hotKeyName })}
-        onClick={(event: SyntheticEvent) => actionHandler(event, action, ref)}
+        onClick={(event: SyntheticEvent) => actionHandler(event, action, undefined, undefined, ref)}
         onKeyDown={(event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") {
-          actionHandler(event, action, undefined)
+          actionHandler(event, action, undefined, undefined, undefined)
         }}}
         >
         <FontAwesomeIcon icon={isCurrentSegmentAlive ? faTrash : faTrashRestore} size="1x" />
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 72af50132..8d1139b55 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -7,7 +7,7 @@ import { css } from '@emotion/react'
 import { useSelector, useDispatch } from 'react-redux';
 import { Segment, httpRequestState } from '../types'
 import {
-  selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL,  selectWaveformImages, setWaveformImages
+  selectSegments, selectActiveSegmentIndex, selectDuration, selectVideoURL,  selectWaveformImages, setWaveformImages, selectTimelineZoom
 } from '../redux/videoSlice'
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -26,6 +26,7 @@ import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 import { RootState } from '../redux/store';
 import { selectTheme } from '../redux/themeSlice';
 import { ThemedTooltip } from './Tooltip';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 /**
  * A container for visualizing the cutting of the video, as well as for controlling
@@ -54,13 +55,15 @@ const Timeline: React.FC<{
   // Init redux variables
   const dispatch = useDispatch();
   const duration = useSelector(selectDuration)
+  const timelineZoom = useSelector(selectTimelineZoom)
 
   const { ref, width = 1, } = useResizeObserver<HTMLDivElement>();
+  const scrollContainerRef = useRef<ScrollContainer>(null);
 
   const timelineStyle = css({
     position: 'relative',     // Need to set position for Draggable bounds to work
     height: timelineHeight + 'px',
-    width: '100%',
+    width: (timelineZoom) * 100 + '%',    // Width modified by zoom
   });
 
   // Update the current time based on the position clicked on the timeline
@@ -72,20 +75,29 @@ const Timeline: React.FC<{
   }
 
   return (
-  <div ref={ref} css={timelineStyle} onMouseDown={e => setCurrentlyAtToClick(e)}>
-    <Scrubber
-      timelineWidth={width}
-      timelineHeight={timelineHeight}
-      selectCurrentlyAt={selectCurrentlyAt}
-      selectIsPlaying={selectIsPlaying}
-      setCurrentlyAt={setCurrentlyAt}
-      setIsPlaying={setIsPlaying}
-    />
-    <div css={{position: 'relative', height: timelineHeight - 20 + 'px'}} >
-      <Waveforms timelineHeight={timelineHeight}/>
-      <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
+  <ScrollContainer ref={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 - 20 + 'px'}} >
+          <Waveforms timelineHeight={timelineHeight}/>
+          <SegmentsList timelineWidth={width} timelineHeight={timelineHeight} styleByActiveSegment={styleByActiveSegment} tabable={true}/>
+        </div>
+
     </div>
-  </div>
+  </ScrollContainer>
   );
 };
 
@@ -260,7 +272,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",
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 5c0027010..ec07330d7 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -19,6 +19,7 @@ export interface video {
   selectedWorkflowId: string,     // Id of the currently selected workflow
   aspectRatios: {width: number, height: number}[],  // Aspect ratios of every video
   hasChanges: boolean,             // Did user make changes in cutting view since last save
+  timelineZoom: number,           // Zoom multiplicator for the timeline,
   waveformImages: string[]
   originalThumbnails: {id: Track["id"], uri: Track["thumbnailUri"]}[]
 
@@ -43,6 +44,7 @@ export const initialState: video & httpRequestState = {
   clickTriggered: false,
   aspectRatios: [],
   hasChanges: false,
+  timelineZoom: 1,
   waveformImages: [],
   originalThumbnails: [],
 
@@ -127,6 +129,9 @@ const videoSlice = createSlice({
     setHasChanges: (state, action: PayloadAction<video["hasChanges"]>) => {
       state.hasChanges = action.payload
     },
+    setTimelineZoom: (state, action: PayloadAction<video["timelineZoom"]>) => {
+      state.timelineZoom = action.payload
+    },
     setWaveformImages: (state, action: PayloadAction<video["waveformImages"]>) => {
       state.waveformImages = action.payload
     },
@@ -336,8 +341,8 @@ const setThumbnailHelper = (state:  WritableDraft<video>, id: Track["id"], uri:
 }
 
 export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setCurrentlyAt, setCurrentlyAtInSeconds,
-  addSegment, setAspectRatio, setHasChanges, setWaveformImages, setThumbnails, setThumbnail, removeThumbnail,
-  cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, setPreviewTriggered,
+  addSegment, setAspectRatio, setHasChanges, setTimelineZoom, setWaveformImages, setThumbnails, setThumbnail,
+  removeThumbnail, cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, setPreviewTriggered,
   setClickTriggered } = videoSlice.actions
 
 // Export selectors
@@ -366,6 +371,8 @@ export const selectSelectedWorkflowId = (state: { videoState:
     state.videoState.selectedWorkflowId
 export const selectHasChanges = (state: { videoState: { hasChanges: video["hasChanges"]; }; }) =>
   state.videoState.hasChanges
+export const selectTimelineZoom = (state: { videoState: { timelineZoom: video["timelineZoom"]; }; }) =>
+  state.videoState.timelineZoom
 export const selectWaveformImages = (state: { videoState: { waveformImages: video["waveformImages"]; }; }) =>
   state.videoState.waveformImages
 export const selectOriginalThumbnails = (state: { videoState: { originalThumbnails: video["originalThumbnails"]; }; }) =>

From 564980a7e5ecb0fe36cfa7bb4bdb968015e601a2 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Mon, 11 Dec 2023 12:45:42 +0100
Subject: [PATCH 02/13] Fit zoom to redesign

---
 src/i18n/locales/en-US.json |  1 +
 src/main/CuttingActions.tsx | 96 +++++++++++++++++++++++++------------
 2 files changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index ecd797a07..35775160c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -27,6 +27,7 @@
       "mergeRight-button": "Merge Right",
       "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
       "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
+      "zoom": "Zoom",
       "zoomSlider-aria": "Zoom"
     },
 
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index d1a245f30..c117d8c83 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -30,7 +30,6 @@ const CuttingActions: React.FC = () => {
 
   // Init redux variables
   const dispatch = useDispatch();
-  const theme = useTheme();
 
   /**
    * General action callback for cutting actions
@@ -63,11 +62,6 @@ const CuttingActions: React.FC = () => {
   useHotkeys(KEYMAP.cutting.mergeLeft.key, () => dispatchAction(mergeLeft, undefined, undefined), {preventDefault: true}, [mergeLeft]);
   useHotkeys(KEYMAP.cutting.mergeRight.key, () => dispatchAction(mergeRight, undefined, undefined), {preventDefault: true}, [mergeRight]);
 
-  // Callback for the zoom slider
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const zoomSliderOnChange = (event: Event, newValue: number | number[]) => {
-    dispatchAction(undefined, setTimelineZoom, newValue, undefined)
-  }
 
   const cuttingStyle = css({
     display: 'flex',
@@ -81,19 +75,6 @@ const CuttingActions: React.FC = () => {
     height: '32px',
   })
 
-  const sliderStyle = css({
-    width: '100px',
-    "& .MuiSlider-thumb": {
-      color: `${theme.text}`,
-    },
-    "& .MuiSlider-rail": {
-      color: `${theme.text}`,
-    },
-    "& .MuiSlider-track": {
-      color: `${theme.text}`,
-    },
-  })
-
   return (
     <div css={cuttingStyle}>
       <CuttingActionsButton Icon={LuScissors}
@@ -120,20 +101,11 @@ const CuttingActions: React.FC = () => {
       <div css={verticalLineStyle} />
       <CuttingActionsButton Icon={LuMoveHorizontal}
         actionName={t("cuttingActions.merge-all-button")} actionHandler={dispatchAction} action={mergeAll} actionWithPayload={undefined} payload={undefined}
-        tooltip={t('cuttingActions.merge-all-tooltip')} z
+        tooltip={t('cuttingActions.merge-all-tooltip')}
         ariaLabelText={t('cuttingActions.merge-all-tooltip-aria')}
       />
       <div css={verticalLineStyle} />
-      <Slider
-        css={sliderStyle}
-        min={1}
-        max={10}
-        step={0.1}
-        defaultValue={1}
-        onChange={zoomSliderOnChange}
-        aria-label={t("cuttingActions.zoomSlider-aria")}
-        valueLabelDisplay="off"
-      />
+      <ZoomSlider actionHandler={dispatchAction}/>
       {/* <CuttingActionsButton Icon={faQuestion} actionName="Reset changes" action={null}
         tooltip="Not implemented"
         ariaLabelText="Reset changes. Not implemented"
@@ -235,4 +207,68 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({actionHand
   );
 }
 
+interface ZoomSliderInterface {
+  actionHandler: (
+    action: ActionCreatorWithoutPayload<string> | undefined,
+    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    payload: any,
+    ref?: React.RefObject<HTMLDivElement>,
+  ) => void,
+}
+
+const ZoomSlider : React.FC<ZoomSliderInterface> = ({actionHandler}) => {
+
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  // Callback for the zoom slider
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const zoomSliderOnChange = (event: Event, newValue: number | number[]) => {
+    actionHandler(undefined, setTimelineZoom, newValue, undefined)
+  }
+
+  const zoomStyle = css({
+    display: 'flex',
+    flexDirection: 'row',
+    paddingLeft: '16px',
+    paddingRight: '16px',
+    gap: '15px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  })
+
+
+  const sliderStyle = css({
+    width: '100px',
+    "& .MuiSlider-thumb": {
+      color: `${theme.slider_thumb_color}`,
+      "&:hover, &.Mui-focusVisible, &.Mui-active": {
+        boxShadow: `${theme.slider_thumb_shadow}`,
+      },
+    },
+    "& .MuiSlider-rail": {
+      color: `${theme.slider_track_color}`,
+    },
+    "& .MuiSlider-track": {
+      color: `${theme.slider_track_color}`,
+    },
+  })
+
+  return (
+    <div css={zoomStyle}>
+      <span>{t("cuttingActions.zoom")}</span>
+      <Slider
+        css={sliderStyle}
+        min={1}
+        max={10}
+        step={0.1}
+        defaultValue={1}
+        onChange={zoomSliderOnChange}
+        aria-label={t("cuttingActions.zoomSlider-aria")}
+        valueLabelDisplay="off"
+      />
+    </div>
+  );
+}
+
 export default CuttingActions;

From bb8f42fbb5525b2d7e6786ca73598ad6681fc2e0 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Mon, 11 Dec 2023 15:56:17 +0100
Subject: [PATCH 03/13] 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.
---
 src/main/Timeline.tsx | 50 ++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 42d4f31b7..fe2d33c7d 100644
--- 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,

From dd6aea36ad335770cf248676e51848d5bf596716 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Tue, 12 Dec 2023 11:56:05 +0100
Subject: [PATCH 04/13] Undo outer container and instead move scroll container
 contents

The previous fix for showing the head of scrubber/playhead again
caused a number of issues with the position of the scrubber.
This undoes the previous change, so that the scrubber binds to the
correct parent again, which should undo all the issues.

This also includes a stylistic change in moving the timeline a little
lower inside its scroll container, to make the top of the scrubber show
again.
---
 src/main/Timeline.tsx | 50 +++++++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index fe2d33c7d..1e8586587 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -58,11 +58,13 @@ const Timeline: React.FC<{
 
   const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
   const scrollContainerRef = useRef(null);
+  const topOffset = 20
 
   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
+    top: `${topOffset}px`,
   });
 
   // Update the current time based on the position clicked on the timeline
@@ -74,31 +76,29 @@ const Timeline: React.FC<{
   }
 
   return (
-    <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>
-
+    <ScrollContainer innerRef={scrollContainerRef} css={{overflowY: 'hidden', width: '100%', height: `${timelineHeight + topOffset}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>
-      </ScrollContainer>
-    </div>
+
+      </div>
+    </ScrollContainer>
   );
 };
 

From b8deb11c3c03d593964d0dce9a5304ba49b75b06 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Wed, 13 Dec 2023 10:02:20 +0100
Subject: [PATCH 05/13] Add timeline zoom hotkeys

Adds hotkeys for zooming in out of the timeline
---
 src/globalKeys.ts             | 10 ++++++++++
 src/i18n/locales/en-US.json   |  4 +++-
 src/main/CuttingActions.tsx   |  5 ++++-
 src/main/KeyboardControls.tsx |  3 ++-
 src/redux/videoSlice.ts       | 10 ++++++++--
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index 0476d48ff..cdc39af0f 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -49,6 +49,7 @@ export interface IKeyGroup {
 export interface IKey {
   name: string
   key: string
+  combinationKey?: string
 }
 
 export const KEYMAP: IKeyMap = {
@@ -79,6 +80,15 @@ export const KEYMAP: IKeyMap = {
       name: "cuttingActions.mergeRight-button",
       key: "Shift+Alt+m",
     },
+    zoomIn: {
+      name: "cuttingActions.zoomIn",
+      key: "Shift;Alt;z, +",
+      combinationKey: ';',
+    },
+    zoomOut: {
+      name: "cuttingActions.zoomOut",
+      key: "Shift+Alt+t, -",
+    },
   },
   timeline: {
     left: {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 35775160c..42022164d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -28,7 +28,9 @@
       "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
       "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
       "zoom": "Zoom",
-      "zoomSlider-aria": "Zoom"
+      "zoomSlider-aria": "Zoom",
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out"
     },
 
     "video": {
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index c117d8c83..c98831dbd 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -10,7 +10,8 @@ import { css } from '@emotion/react'
 
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll, setTimelineZoom
+  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll, setTimelineZoom,
+  timelineZoomIn, timelineZoomOut
 } from '../redux/videoSlice'
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload, ActionCreatorWithPayload } from "@reduxjs/toolkit";
@@ -61,6 +62,8 @@ const CuttingActions: React.FC = () => {
   useHotkeys(KEYMAP.cutting.delete.key, () => dispatchAction(markAsDeletedOrAlive, undefined, undefined), {preventDefault: true}, [markAsDeletedOrAlive]);
   useHotkeys(KEYMAP.cutting.mergeLeft.key, () => dispatchAction(mergeLeft, undefined, undefined), {preventDefault: true}, [mergeLeft]);
   useHotkeys(KEYMAP.cutting.mergeRight.key, () => dispatchAction(mergeRight, undefined, undefined), {preventDefault: true}, [mergeRight]);
+  useHotkeys(KEYMAP.cutting.zoomIn.key, () => dispatchAction(timelineZoomIn, undefined, undefined), {preventDefault: true, combinationKey: KEYMAP.cutting.zoomIn.combinationKey}, [timelineZoomIn]);
+  useHotkeys(KEYMAP.cutting.zoomOut.key, () => dispatchAction(timelineZoomOut, undefined, undefined), {preventDefault: true}, [timelineZoomOut]);
 
 
   const cuttingStyle = css({
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index f861df1be..42f0267c9 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -126,8 +126,9 @@ const KeyboardControls: React.FC = () => {
         const entries : { [groupName: string]: string[][] } = {}
         Object.entries(group).forEach(([, action]) => {
           const sequences = action.key.split(",").map(item => item.trim())
+          const sequenceCombinationkey = action.combinationKey ? action.combinationKey : "+"
           entries[action.name] = Object.entries(sequences).map(([, sequence]) => {
-            return sequence.split("+").map(item => rewriteKeys(item.trim()))
+            return sequence.split(sequenceCombinationkey).map(item => rewriteKeys(item.trim()))
           })
         })
         groups.push(<Group name={getGroupName(groupName)} entries={entries} key={index}/>)
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 3cf782209..ba500d544 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -154,7 +154,7 @@ const videoSlice = createSlice({
       state.hasChanges = action.payload
     },
     setTimelineZoom: (state, action: PayloadAction<video["timelineZoom"]>) => {
-      state.timelineZoom = action.payload
+      state.timelineZoom = action.payload > 1 ? action.payload : 1
     },
     setWaveformImages: (state, action: PayloadAction<video["waveformImages"]>) => {
       state.waveformImages = action.payload
@@ -216,6 +216,12 @@ const videoSlice = createSlice({
       mergeSegments(state, state.activeSegmentIndex, state.segments.length - 1)
       state.hasChanges = true
     },
+    timelineZoomIn: state => {
+      state.timelineZoom = state.timelineZoom + 1 <= 10 ? state.timelineZoom + 1 : state.timelineZoom
+    },
+    timelineZoomOut: state => {
+      state.timelineZoom = state.timelineZoom - 1 >= 1 ? state.timelineZoom - 1 : state.timelineZoom
+    },
   },
   // For Async Requests
   extraReducers: builder => {
@@ -386,7 +392,7 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
 export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setIsMuted, setVolume, setCurrentlyAt, setCurrentlyAtInSeconds,
   addSegment, setAspectRatio, setHasChanges, setTimelineZoom, setWaveformImages, setThumbnails, setThumbnail, removeThumbnail,
   setLock, cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, mergeAll, setPreviewTriggered,
-  setClickTriggered } = videoSlice.actions
+  setClickTriggered, timelineZoomIn, timelineZoomOut } = videoSlice.actions
 
 // Export selectors
 // Selectors mainly pertaining to the video state

From d22379a5c3e96ff47f8caa42d263cc9384051aed Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Fri, 17 May 2024 06:35:08 +0200
Subject: [PATCH 06/13] Fix zoom center.

If the scrubber is visible before zooming, zoom to the scrubber.
Otherwise scroll to the center of the currently visible timeline.

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/main/CuttingActions.tsx |  5 +++--
 src/main/Timeline.tsx       | 42 +++++++++++++++++++++++++++++++++++++
 src/redux/videoSlice.ts     |  9 ++++----
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 77058eae3..b4c602c29 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -11,7 +11,7 @@ import { css } from "@emotion/react";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll, setTimelineZoom,
-  timelineZoomIn, timelineZoomOut,
+  selectTimelineZoom, timelineZoomIn, timelineZoomOut,
 } from "../redux/videoSlice";
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload, ActionCreatorWithPayload } from "@reduxjs/toolkit";
@@ -289,6 +289,7 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({ actionHandler }) => {
 
   const { t } = useTranslation();
   const theme = useTheme();
+  const timelineZoom = useAppSelector(selectTimelineZoom);
 
   // Callback for the zoom slider
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -331,7 +332,7 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({ actionHandler }) => {
         min={1}
         max={10}
         step={0.1}
-        defaultValue={1}
+        value={timelineZoom}
         onChange={zoomSliderOnChange}
         aria-label={t("cuttingActions.zoomSlider-aria")}
         valueLabelDisplay="off"
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index c8698d0ec..cd1be4eb0 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -33,6 +33,14 @@ import ScrollContainer from "react-indiana-drag-scroll";
 import { useHotkeys } from "react-hotkeys-hook";
 import { spinningStyle } from "../cssStyles";
 
+const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 /**
  * A container for visualizing the cutting of the video, as well as for controlling
  * the current position in the video
@@ -58,6 +66,7 @@ const Timeline: React.FC<{
 }) => {
 
   // Init redux variables
+  const currentlyAt = useAppSelector(selectCurrentlyAt);
   const dispatch = useAppDispatch();
   const duration = useAppSelector(selectDuration);
   const timelineZoom = useAppSelector(selectTimelineZoom);
@@ -66,6 +75,38 @@ const Timeline: React.FC<{
   const scrollContainerRef = useRef(null);
   const topOffset = 20;
 
+  const currentlyScrolling = useRef(false);
+  const previous = usePrevious({ timelineZoom });
+  const zoomCenter = useRef(0);
+
+  const updateScroll = () => {
+    if (currentlyScrolling.current) {
+      currentlyScrolling.current = false;
+      return;
+    }
+    const scrollLeft = scrollContainerRef.current?.scrollLeft ?? 0;
+    const clientWidth = scrollContainerRef.current?.clientWidth ?? 0;
+    const centerPosition = scrollLeft + 0.5 * clientWidth;
+    const scrubberPosition = duration ? (currentlyAt / duration) * width : 0;
+    const scrubberVisible = scrollLeft <= scrubberPosition && scrubberPosition <= scrollLeft + clientWidth;
+
+    zoomCenter.current = (scrubberVisible ? scrubberPosition : centerPosition) / width;
+  };
+
+  useEffect(updateScroll, [currentlyAt, timelineZoom, width]);
+
+  useEffect(() => {
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    const clientWidth = scrollContainerRef.current.clientWidth ?? 0;
+    const newWidth = (width / (previous?.timelineZoom ?? 1)) * timelineZoom;
+    const left = zoomCenter.current * newWidth - 0.5 * clientWidth;
+
+    currentlyScrolling.current = true;
+    scrollContainerRef.current.scrollLeft = left;
+  }, [timelineZoom]);
+
   const timelineStyle = css({
     position: "relative",     // Need to set position for Draggable bounds to work
     height: timelineHeight + "px",
@@ -90,6 +131,7 @@ const Timeline: React.FC<{
       // dom elements with this id in the container will not trigger scrolling when dragged
       ignoreElements={"#no-scrolling"}
       hideScrollbars={false}            // ScrollContainer hides scrollbars per default
+      onEndScroll={updateScroll}
     >
       <div ref={ref} css={timelineStyle} onMouseUp={e => setCurrentlyAtToClick(e)}>
         <Scrubber
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index 757770491..93e566111 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -1,3 +1,4 @@
+import { clamp } from "lodash";
 import { createSlice, nanoid, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
 import { client } from "../util/client";
 
@@ -19,7 +20,7 @@ export interface video {
   activeSegmentIndex: number,     // Index of the segment that is currenlty hovered
   selectedWorkflowId: string,     // Id of the currently selected workflow
   aspectRatios: { width: number, height: number; }[],  // Aspect ratios of every video
-  hasChanges: boolean,             // Did user make changes in cutting view since last save
+  hasChanges: boolean,            // Did user make changes in cutting view since last save
   timelineZoom: number,           // Zoom multiplicator for the timeline,
   waveformImages: string[];
   originalThumbnails: { id: Track["id"], uri: Track["thumbnailUri"]; }[];
@@ -154,7 +155,7 @@ const videoSlice = createSlice({
       state.hasChanges = action.payload;
     },
     setTimelineZoom: (state, action: PayloadAction<video["timelineZoom"]>) => {
-      state.timelineZoom = action.payload > 1 ? action.payload : 1;
+      state.timelineZoom = clamp(action.payload, 1, 10);
     },
     setWaveformImages: (state, action: PayloadAction<video["waveformImages"]>) => {
       state.waveformImages = action.payload;
@@ -221,10 +222,10 @@ const videoSlice = createSlice({
       state.hasChanges = true;
     },
     timelineZoomIn: state => {
-      state.timelineZoom = state.timelineZoom + 1 <= 10 ? state.timelineZoom + 1 : state.timelineZoom;
+      state.timelineZoom = clamp(state.timelineZoom + 1, 1, 10);
     },
     timelineZoomOut: state => {
-      state.timelineZoom = state.timelineZoom - 1 >= 1 ? state.timelineZoom - 1 : state.timelineZoom;
+      state.timelineZoom = clamp(state.timelineZoom - 1, 1, 10);
     },
   },
   // For Async Requests

From e9acb14947496f2e9430c702bca1cd3f80e94bd2 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Fri, 17 May 2024 11:08:23 +0200
Subject: [PATCH 07/13] Fix type issues

Merging the latest state of main caused
some type issues, this fixes them.
---
 src/main/CuttingActions.tsx | 21 +++++++++++++--------
 src/main/Timeline.tsx       |  6 +++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 8a201f610..50471c21d 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -40,8 +40,9 @@ const CuttingActions: React.FC = () => {
    */
   const dispatchAction = (
     action: ActionCreatorWithoutPayload<string> | undefined,
-    actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
-    payload: any,
+    actionWithPayload?: ActionCreatorWithPayload<number, string> | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any,
     ref?: React.RefObject<HTMLDivElement>
   ) => {
     if (action) {
@@ -60,37 +61,37 @@ const CuttingActions: React.FC = () => {
   // Maps functions to hotkeys
   useHotkeys(
     KEYMAP.cutting.cut.key,
-    () => dispatchAction(cut, undefined, undefined),
+    () => dispatchAction(cut),
     { preventDefault: true },
     [cut]
   );
   useHotkeys(
     KEYMAP.cutting.delete.key,
-    () => dispatchAction(markAsDeletedOrAlive, undefined, undefined),
+    () => dispatchAction(markAsDeletedOrAlive),
     { preventDefault: true },
     [markAsDeletedOrAlive]
   );
   useHotkeys(
     KEYMAP.cutting.mergeLeft.key,
-    () => dispatchAction(mergeLeft, undefined, undefined),
+    () => dispatchAction(mergeLeft),
     { preventDefault: true },
     [mergeLeft]
   );
   useHotkeys(
     KEYMAP.cutting.mergeRight.key,
-    () => dispatchAction(mergeRight, undefined, undefined),
+    () => dispatchAction(mergeRight),
     { preventDefault: true },
     [mergeRight]
   );
   useHotkeys(
     KEYMAP.cutting.zoomIn.key,
-    () => dispatchAction(timelineZoomIn, undefined, undefined),
+    () => dispatchAction(timelineZoomIn),
     { preventDefault: true, combinationKey: KEYMAP.cutting.zoomIn.combinationKey },
     [timelineZoomIn]
   );
   useHotkeys(
     KEYMAP.cutting.zoomOut.key,
-    () => dispatchAction(timelineZoomOut, undefined, undefined),
+    () => dispatchAction(timelineZoomOut, undefined),
     { preventDefault: true },
     [timelineZoomOut]
   );
@@ -185,11 +186,13 @@ interface cuttingActionsButtonInterface {
   actionHandler: (
     action: ActionCreatorWithoutPayload<string>,
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
     ref?: React.RefObject<HTMLDivElement>,
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any,
   tooltip: string,
   ariaLabelText: string,
@@ -235,6 +238,7 @@ interface markAsDeleteButtonInterface {
   actionHandler: (
     action: ActionCreatorWithoutPayload<string> | undefined,
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
     ref?: React.RefObject<HTMLDivElement>
   ) => void,
@@ -280,6 +284,7 @@ interface ZoomSliderInterface {
   actionHandler: (
     action: ActionCreatorWithoutPayload<string> | undefined,
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
     ref?: React.RefObject<HTMLDivElement>,
   ) => void,
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index bdfdf113e..5e90981ff 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -35,8 +35,8 @@ import CuttingActionsContextMenu from "./CuttingActionsContextMenu";
 import { useHotkeys } from "react-hotkeys-hook";
 import { spinningStyle } from "../cssStyles";
 
-const usePrevious = (value) => {
-  const ref = useRef();
+const usePrevious = (value: { timelineZoom: number; } | undefined) => {
+  const ref = useRef<{ timelineZoom: number; } | undefined>();
   useEffect(() => {
     ref.current = value;
   });
@@ -74,7 +74,7 @@ const Timeline: React.FC<{
   const timelineZoom = useAppSelector(selectTimelineZoom);
 
   const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
-  const scrollContainerRef = useRef(null);
+  const scrollContainerRef = useRef<HTMLElement>(null);
   const topOffset = 20;
 
   const currentlyScrolling = useRef(false);

From 17c3d35de954c6e3365ef82acd4af97c4f879e89 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Wed, 22 May 2024 09:37:32 +0200
Subject: [PATCH 08/13] Apply various minor patches...

0001-Add-zoom-tooltip.patch.txt
0002-Debounce-drag-handler-of-the-scrubber.patch.txt
0003-Fix-fast-zooming-bug.patch.txt
0004-Increase-the-width-of-the-zoom-slider.patch.txt
---
 src/globalKeys.ts           | 10 +++-----
 src/i18n/locales/en-US.json |  3 ++-
 src/main/CuttingActions.tsx | 49 +++++++++++++++++++++++++------------
 src/main/Timeline.tsx       | 19 ++++----------
 4 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/globalKeys.ts b/src/globalKeys.ts
index 6bee4eb40..720245df5 100644
--- a/src/globalKeys.ts
+++ b/src/globalKeys.ts
@@ -8,6 +8,7 @@
  * If you add a new keyMap, be sure to add it to the getAllHotkeys function
  */
 import { match } from "@opencast/appkit";
+import { isString } from "lodash";
 import { ParseKeys } from "i18next";
 import { isMacOs } from "react-device-detect";
 
@@ -20,13 +21,10 @@ const groupSubtitleList = "keyboardControls.groupSubtitleList";
 /**
  * Helper function that rewrites keys based on the OS
  */
-export const rewriteKeys = (key: string) => {
-  let newKey = key;
-  if (isMacOs) {
-    newKey = newKey.replace("Alt", "Option");
-  }
+export const rewriteKeys = (key: string | IKey) => {
+  const newKey = isString(key) ? key : key.key.replaceAll(key.combinationKey, "+");
 
-  return newKey;
+  return isMacOs ? newKey.replace("Alt", "Option") : newKey;
 };
 
 export const getGroupName = (groupName: string): ParseKeys => {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index eb969cdb9..4f12b1d6c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -28,7 +28,8 @@
       "mergeRight-tooltip": "Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}",
       "mergeRight-tooltip-aria": "Merge Right. Combine the currently active segment with the segment to its right. Hotkey: {{hotkeyName}}.",
       "zoom": "Zoom",
-      "zoomSlider-aria": "Zoom",
+      "zoomSlider-aria": "Zoom. Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
+      "zoomSlider-tooltip": "Zoom in or out of the timeline. Hotkey for Zoom in: {{hotkeyNameIn}}. Hotkey for Zoom out: {{hotkeyNameOut}}.",
       "zoomIn": "Zoom in",
       "zoomOut": "Zoom out"
     },
diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index 50471c21d..ee7ae31d2 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -158,7 +158,16 @@ const CuttingActions: React.FC = () => {
         ariaLabelText={t("cuttingActions.merge-all-tooltip-aria")}
       />
       <div css={verticalLineStyle} />
-      <ZoomSlider actionHandler={dispatchAction}/>
+      <ZoomSlider actionHandler={dispatchAction}
+        tooltip={t("cuttingActions.zoomSlider-tooltip", {
+          hotkeyNameIn: rewriteKeys(KEYMAP.cutting.zoomIn),
+          hotkeyNameOut: rewriteKeys(KEYMAP.cutting.zoomOut),
+        })}
+        ariaLabelText={t("cuttingActions.zoomSlider-aria", {
+          hotkeyNameIn: rewriteKeys(KEYMAP.cutting.zoomIn),
+          hotkeyNameOut: rewriteKeys(KEYMAP.cutting.zoomOut),
+        })}
+      />
       {/* <CuttingActionsButton Icon={faQuestion} actionName="Reset changes" action={null}
         tooltip="Not implemented"
         ariaLabelText="Reset changes. Not implemented"
@@ -288,9 +297,15 @@ interface ZoomSliderInterface {
     payload: any,
     ref?: React.RefObject<HTMLDivElement>,
   ) => void,
+  tooltip: string,
+  ariaLabelText: string,
 }
 
-const ZoomSlider : React.FC<ZoomSliderInterface> = ({ actionHandler }) => {
+const ZoomSlider : React.FC<ZoomSliderInterface> = ({
+  actionHandler,
+  tooltip,
+  ariaLabelText,
+}) => {
 
   const { t } = useTranslation();
   const theme = useTheme();
@@ -314,7 +329,7 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({ actionHandler }) => {
 
 
   const sliderStyle = css({
-    width: "100px",
+    width: "150px",
     "& .MuiSlider-thumb": {
       color: `${theme.slider_thumb_color}`,
       "&:hover, &.Mui-focusVisible, &.Mui-active": {
@@ -330,19 +345,21 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({ actionHandler }) => {
   });
 
   return (
-    <div css={zoomStyle}>
-      <span>{t("cuttingActions.zoom")}</span>
-      <Slider
-        css={sliderStyle}
-        min={1}
-        max={10}
-        step={0.1}
-        value={timelineZoom}
-        onChange={zoomSliderOnChange}
-        aria-label={t("cuttingActions.zoomSlider-aria")}
-        valueLabelDisplay="off"
-      />
-    </div>
+    <ThemedTooltip title={tooltip}>
+      <div css={zoomStyle}>
+        <span>{t("cuttingActions.zoom")}</span>
+        <Slider
+          css={sliderStyle}
+          min={1}
+          max={10}
+          step={0.1}
+          value={timelineZoom}
+          onChange={zoomSliderOnChange}
+          aria-label={ariaLabelText}
+          valueLabelDisplay="off"
+        />
+      </div>
+    </ThemedTooltip>
   );
 };
 
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 5e90981ff..ba88bdf8d 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -1,3 +1,4 @@
+import { debounce } from "lodash";
 import React, { useState, useRef, useEffect } from "react";
 
 import Draggable, { DraggableEventHandler } from "react-draggable";
@@ -35,14 +36,6 @@ import CuttingActionsContextMenu from "./CuttingActionsContextMenu";
 import { useHotkeys } from "react-hotkeys-hook";
 import { spinningStyle } from "../cssStyles";
 
-const usePrevious = (value: { timelineZoom: number; } | undefined) => {
-  const ref = useRef<{ timelineZoom: number; } | undefined>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
 /**
  * A container for visualizing the cutting of the video, as well as for controlling
  * the current position in the video
@@ -78,7 +71,6 @@ const Timeline: React.FC<{
   const topOffset = 20;
 
   const currentlyScrolling = useRef(false);
-  const previous = usePrevious({ timelineZoom });
   const zoomCenter = useRef(0);
 
   const updateScroll = () => {
@@ -102,8 +94,7 @@ const Timeline: React.FC<{
       return;
     }
     const clientWidth = scrollContainerRef.current.clientWidth ?? 0;
-    const newWidth = (width / (previous?.timelineZoom ?? 1)) * timelineZoom;
-    const left = zoomCenter.current * newWidth - 0.5 * clientWidth;
+    const left = zoomCenter.current * timelineZoom * clientWidth - 0.5 * clientWidth;
 
     currentlyScrolling.current = true;
     scrollContainerRef.current.scrollLeft = left;
@@ -210,17 +201,17 @@ export const Scrubber: React.FC<{
   // Reposition scrubber when the timeline width changes
   useEffect(() => {
     if (currentlyAt && duration) {
-      setControlledPosition({ x: (currentlyAt / duration) * (timelineWidth), y: 0 });
+      updateXPos();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timelineWidth]);
 
   // Callback for when the scrubber gets dragged by the user
-  const onControlledDrag: DraggableEventHandler = (_e, position) => {
+  const onControlledDrag: DraggableEventHandler = debounce((_e, position) => {
     // Update position
     const { x } = position;
     dispatch(setCurrentlyAt((x / timelineWidth) * (duration)));
-  };
+  }, 200);
 
   // Callback for when the position changes by something other than dragging
   const updateXPos = () => {

From 0285c391e54b77040addbed4194e59c0ae63c279 Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Mon, 10 Jun 2024 09:23:40 +0200
Subject: [PATCH 09/13] Compute maximum zoom factor depending on the length of
 the event.

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/main/CuttingActions.tsx | 16 +++++++++++++---
 src/redux/videoSlice.ts     | 17 ++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
index ee7ae31d2..b2612d70b 100644
--- a/src/main/CuttingActions.tsx
+++ b/src/main/CuttingActions.tsx
@@ -10,8 +10,17 @@ import { css } from "@emotion/react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
-  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll, setTimelineZoom,
-  selectTimelineZoom, timelineZoomIn, timelineZoomOut,
+  cut,
+  markAsDeletedOrAlive,
+  mergeAll,
+  mergeLeft,
+  mergeRight,
+  selectIsCurrentSegmentAlive,
+  selectTimelineZoom,
+  selectTimelineZoomMax,
+  setTimelineZoom,
+  timelineZoomIn,
+  timelineZoomOut,
 } from "../redux/videoSlice";
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { ActionCreatorWithoutPayload, ActionCreatorWithPayload } from "@reduxjs/toolkit";
@@ -310,6 +319,7 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({
   const { t } = useTranslation();
   const theme = useTheme();
   const timelineZoom = useAppSelector(selectTimelineZoom);
+  const timelineZoomMax = useAppSelector(selectTimelineZoomMax);
 
   // Callback for the zoom slider
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -351,7 +361,7 @@ const ZoomSlider : React.FC<ZoomSliderInterface> = ({
         <Slider
           css={sliderStyle}
           min={1}
-          max={10}
+          max={timelineZoomMax}
           step={0.1}
           value={timelineZoom}
           onChange={zoomSliderOnChange}
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index fb8459012..ddbf0e2be 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -191,7 +191,7 @@ const videoSlice = createSlice({
       state.hasChanges = action.payload;
     },
     setTimelineZoom: (state, action: PayloadAction<video["timelineZoom"]>) => {
-      state.timelineZoom = clamp(action.payload, 1, 10);
+      state.timelineZoom = clamp(action.payload, 1, timelineZoomMax(state));
     },
     setWaveformImages: (state, action: PayloadAction<video["waveformImages"]>) => {
       state.waveformImages = action.payload;
@@ -289,10 +289,10 @@ const videoSlice = createSlice({
       state.hasChanges = true;
     },
     timelineZoomIn: state => {
-      state.timelineZoom = clamp(state.timelineZoom + 1, 1, 10);
+      state.timelineZoom = clamp(state.timelineZoom + 1, 1, timelineZoomMax(state));
     },
     timelineZoomOut: state => {
-      state.timelineZoom = clamp(state.timelineZoom - 1, 1, 10);
+      state.timelineZoom = clamp(state.timelineZoom - 1, 1, timelineZoomMax(state));
     },
   },
   // For Async Requests
@@ -364,6 +364,7 @@ const videoSlice = createSlice({
     selectSelectedWorkflowId: state => state.selectedWorkflowId,
     selectHasChanges: state => state.hasChanges,
     selectTimelineZoom: state => state.timelineZoom,
+    selectTimelineZoomMax: timelineZoomMax,
     selectWaveformImages: state => state.waveformImages,
     selectOriginalThumbnails: state => state.originalThumbnails,
     // Selectors mainly pertaining to the information fetched from Opencast
@@ -502,6 +503,15 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
   }
 };
 
+const ZOOM_SECONDS_VISIBLE = 20 * 1000;
+
+function timelineZoomMax(state) {
+  const maxZoom = state.duration / ZOOM_SECONDS_VISIBLE;
+
+  // now round it up to the nearest multiple of 5
+  return Math.max(1, Math.ceil(maxZoom / 5) * 5);
+}
+
 export const {
   setTrackEnabled,
   setIsPlaying,
@@ -557,6 +567,7 @@ export const {
   selectSelectedWorkflowId,
   selectHasChanges,
   selectTimelineZoom,
+  selectTimelineZoomMax,
   selectWaveformImages,
   selectOriginalThumbnails,
   selectVideoURL,

From 61b0974a06a11d78aaf37e960f49dad96a13244b Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Mon, 10 Jun 2024 11:06:18 +0200
Subject: [PATCH 10/13] Enable drag and drop of cut markers when zoomed in.

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/main/SubtitleTimeline.tsx | 4 ++--
 src/main/Timeline.tsx         | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/main/SubtitleTimeline.tsx b/src/main/SubtitleTimeline.tsx
index c7846a3f5..c3e3e352c 100644
--- a/src/main/SubtitleTimeline.tsx
+++ b/src/main/SubtitleTimeline.tsx
@@ -125,7 +125,7 @@ const SubtitleTimeline: React.FC = () => {
         horizontal={true}
         onEndScroll={onEndScroll}
         // dom elements with this id in the container will not trigger scrolling when dragged
-        ignoreElements={"#no-scrolling"}
+        ignoreElements={".prevent-drag-scroll"}
       >
         {/* Container. Overflows. Width based on parent times zoom level*/}
         <div ref={ref} css={timelineStyle}>
@@ -413,7 +413,7 @@ const TimelineSubtitleSegment: React.FC<{
         //  Fix most likely requires changes in one of those modules
         resizeHandles={["w"]}
       >
-        <div css={segmentStyle} ref={nodeRef} onClick={onClick} id="no-scrolling">
+        <div css={segmentStyle} ref={nodeRef} onClick={onClick} className="prevent-drag-scroll">
           <span css={textStyle}>{props.cue.text}</span>
         </div>
       </Resizable>
diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index ba88bdf8d..5a82bcb34 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -122,7 +122,7 @@ const Timeline: React.FC<{
       vertical={false}
       horizontal={true}
       // dom elements with this id in the container will not trigger scrolling when dragged
-      ignoreElements={"#no-scrolling"}
+      ignoreElements={".prevent-drag-scroll"}
       hideScrollbars={false}            // ScrollContainer hides scrollbars per default
       onEndScroll={updateScroll}
     >
@@ -329,7 +329,7 @@ export const Scrubber: React.FC<{
       position={controlledPosition}
       nodeRef={nodeRef}
     >
-      <div ref={nodeRef} css={scrubberStyle} id="no-scrolling">
+      <div ref={nodeRef} css={scrubberStyle} className="prevent-drag-scroll">
         <div css={scrubberDragHandleStyle} aria-grabbed={isGrabbed}
           aria-label={t("timeline.scrubber-text-aria",
             {
@@ -477,9 +477,9 @@ export const CutMark: React.FC<{
 
   const { t } = useTranslation();
 
-  const updateCurrentTime = (x: number) => {
+  const updateCurrentTime = debounce((x: number) => {
     setCurrentTime(rightSegment.start + (x * duration) / timelineWidth);
-  };
+  }, 100);
 
   // Callback for when the cut gets dragged by the user
   const onControlledDrag: DraggableEventHandler = (_e, position) => {
@@ -547,6 +547,7 @@ export const CutMark: React.FC<{
       nodeRef={nodeRef}
     >
       <div
+        className="prevent-drag-scroll"
         ref={nodeRef}
         css={cutStyle}
         aria-label={t("timeline.cut-text-aria",

From e28319a9f83125c10d6f5db6e411e7ad4858593c Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Tue, 11 Jun 2024 05:27:28 +0200
Subject: [PATCH 11/13] Remove the rounding up to the nearest multiple of 5

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/redux/videoSlice.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index ddbf0e2be..af775bf7a 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -508,8 +508,7 @@ const ZOOM_SECONDS_VISIBLE = 20 * 1000;
 function timelineZoomMax(state) {
   const maxZoom = state.duration / ZOOM_SECONDS_VISIBLE;
 
-  // now round it up to the nearest multiple of 5
-  return Math.max(1, Math.ceil(maxZoom / 5) * 5);
+  return Math.max(1, Math.ceil(maxZoom));
 }
 
 export const {

From ef1e696361d0395915c706ded88783aef7a38568 Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Tue, 11 Jun 2024 05:38:55 +0200
Subject: [PATCH 12/13] Remove debouncing of dragging the cut marks.

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/main/Timeline.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/Timeline.tsx b/src/main/Timeline.tsx
index 5a82bcb34..5061e2925 100644
--- a/src/main/Timeline.tsx
+++ b/src/main/Timeline.tsx
@@ -477,9 +477,9 @@ export const CutMark: React.FC<{
 
   const { t } = useTranslation();
 
-  const updateCurrentTime = debounce((x: number) => {
+  const updateCurrentTime = (x: number) => {
     setCurrentTime(rightSegment.start + (x * duration) / timelineWidth);
-  }, 100);
+  };
 
   // Callback for when the cut gets dragged by the user
   const onControlledDrag: DraggableEventHandler = (_e, position) => {

From ed6fda8952ea9418dbad73785163d98f8c47d5d3 Mon Sep 17 00:00:00 2001
From: Marcus <lunzenauer@elan-ev.de>
Date: Tue, 18 Jun 2024 12:13:41 +0200
Subject: [PATCH 13/13] Update the minimal `maxZoom` from 1 to 2.

This way there is always something to zoom into even with very small videos.

Signed-off-by: Arnei <arnewilken@yahoo.de>
---
 src/redux/videoSlice.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index af775bf7a..e8884c8eb 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -508,7 +508,7 @@ const ZOOM_SECONDS_VISIBLE = 20 * 1000;
 function timelineZoomMax(state) {
   const maxZoom = state.duration / ZOOM_SECONDS_VISIBLE;
 
-  return Math.max(1, Math.ceil(maxZoom));
+  return Math.max(2, Math.ceil(maxZoom));
 }
 
 export const {