fix(frontend): timeline dnd layer types + remove redundant

frontend/app/components/Session_/Player/Controls/Timeline.tsx

@@ -5,14 +5,13 @@ import TimeTracker from './TimeTracker';
 import stl from './timeline.module.css';
 import { setTimelinePointer, setTimelineHoverTime } from 'Duck/sessions';
 import DraggableCircle from './components/DraggableCircle';
-import CustomDragLayer from './components/CustomDragLayer';
+import CustomDragLayer, { OnDragCallback } from './components/CustomDragLayer';
 import { debounce } from 'App/utils';
 import TooltipContainer from './components/TooltipContainer';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 
-const BOUNDRY = 0;
 
 function getTimelinePosition(value: number, scale: number) {
   const pos = value * scale;
@@ -38,8 +37,8 @@ function Timeline(props) {
   } = store.get()
   const notes = notesStore.sessionNotes
 
-  const progressRef = useRef()
-  const timelineRef = useRef()
+  const progressRef = useRef<HTMLDivElement>()
+  const timelineRef = useRef<HTMLDivElement>()
 
 
   const scale = 100 / endTime;
@@ -64,10 +63,10 @@ function Timeline(props) {
     }
   };
 
-  const onDrag = (offset) => {
+  const onDrag: OnDragCallback = (offset) => {
     if (live && !liveTimeTravel) return;
 
-    const p = (offset.x - BOUNDRY) / progressRef.current.offsetWidth;
+    const p = (offset.x) / progressRef.current.offsetWidth;
     const time = Math.max(Math.round(p * endTime), 0);
     debouncedJump(time);
     hideTimeTooltip();
@@ -154,7 +153,6 @@ function Timeline(props) {
         style={{
           top: '-4px',
           zIndex: 100,
-          padding: `0 ${BOUNDRY}px`,
           maxWidth: 'calc(100% - 1rem)',
           left: '0.5rem',
         }}
@@ -177,8 +175,8 @@ function Timeline(props) {
           />
           <CustomDragLayer
             onDrag={onDrag}
-            minX={BOUNDRY}
-            maxX={progressRef.current && progressRef.current.offsetWidth + BOUNDRY}
+            minX={0}
+            maxX={progressRef.current ? progressRef.current.offsetWidth : 0}
           />
           <TimeTracker scale={scale} live={live} left={time * scale} />
 

frontend/app/components/Session_/Player/Controls/components/CustomDragLayer.tsx

@@ -1,98 +1,85 @@
-import React, { memo } from 'react';
-import { useDragLayer } from "react-dnd";
-import Circle from './Circle'
+import React, { memo, useEffect } from 'react';
 import type { CSSProperties, FC } from 'react'
+import { useDragLayer, XYCoord } from "react-dnd";
+import Circle from './Circle'
 
 const layerStyles: CSSProperties = {
-    position: "fixed",
-    pointerEvents: "none",
-    zIndex: 100,
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%"
-  };
-
-const ItemTypes = {
-    BOX: 'box',
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: "100%",
+  height: "100%"
 }
 
-function getItemStyles(initialOffset, currentOffset, maxX, minX) {
-    if (!initialOffset || !currentOffset) {
-      return {
-        display: "none"
-      };
-    }
-    let { x, y } = currentOffset;
-    // if (isSnapToGrid) {
-    //   x -= initialOffset.x;
-    //   y -= initialOffset.y;
-    //   [x, y] = [x, y];
-    //   x += initialOffset.x;
-    //   y += initialOffset.y;
-    // }
-    if (x > maxX) {
-      x = maxX;
-    }
 
-    if (x < minX) {
-      x = minX;
-    }
-    const transform = `translate(${x}px, ${initialOffset.y}px)`;
+function getItemStyles(
+  initialOffset: XYCoord | null,
+  currentOffset: XYCoord | null,
+  maxX: number,
+  minX: number,
+) {
+  if (!initialOffset || !currentOffset) {
     return {
-      transition: 'transform 0.1s ease-out',
-      transform,
-      WebkitTransform: transform
-    };
+      display: "none"
+    }
+  }
+  let { x, y } = currentOffset;
+  if (x > maxX) {
+    x = maxX;
+  }
+
+  if (x < minX) {
+    x = minX;
+  }
+  const transform = `translate(${x}px, ${initialOffset.y}px)`;
+  return {
+    transition: 'transform 0.1s ease-out',
+    transform,
+    WebkitTransform: transform
+  }
 }
 
+export type OnDragCallback = (offset: XYCoord) => void
+
 interface Props {
-  onDrag: (offset: { x: number, y: number } | null) => void;
-  maxX: number;
-  minX: number;
+  onDrag: OnDragCallback
+  maxX: number
+  minX: number
 }
 
-const  CustomDragLayer: FC<Props> = memo(function CustomDragLayer(props) {
-    const {
-        itemType,
-        isDragging,
-        item,
-        initialOffset,
-        currentOffset,
-      } = useDragLayer((monitor) => ({
-        item: monitor.getItem(),
-        itemType: monitor.getItemType(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentOffset: monitor.getSourceClientOffset(),
-        isDragging: monitor.isDragging(),
-    }));
+const CustomDragLayer: FC<Props> = memo(function CustomDragLayer({ maxX, minX, onDrag }) {
+  const {
+      isDragging,
+      initialOffset,
+      currentOffset, // might be null (why is it not captured by types?)
+    } = useDragLayer((monitor) => ({
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+  }))
 
-    function renderItem() {
-        switch (itemType) {
-          case ItemTypes.BOX:
-            return <Circle />;
-          default:
-            return null;
-        }
-      }
-
-    if (!isDragging) {
-        return null;
+  useEffect(() => {
+    if (!isDragging || !currentOffset) {
+      return
     }
+    onDrag(currentOffset)
+  }, [isDragging, currentOffset])
 
-    if (isDragging) {
-      props.onDrag(currentOffset)
-    }
+  if (!isDragging || !currentOffset) {
+      return null;
+  }
 
-    return (
-        <div style={layerStyles}>
-          <div
-            style={getItemStyles(initialOffset, currentOffset, props.maxX, props.minX)}
-          >
-            {renderItem()}
-          </div>
+  return (
+      <div style={layerStyles}>
+        <div
+          style={getItemStyles(initialOffset, currentOffset, maxX, minX)}
+        >
+          <Circle />
         </div>
-    );
+      </div>
+  )
 })
 
 export default CustomDragLayer;