wip

Rodeoclash · Apr 18, 2022 · fe1a5e0 · fe1a5e0
1 parent 90d8e4b
commit fe1a5e0
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 49 deletions.
diff --git a/src/components/Drawing/Drawing.tsx b/src/components/Drawing/Drawing.tsx
@@ -9,22 +9,22 @@ import type { Video } from "../../services/models/Video";
 import type { VideoBookmark } from "../../services/models/VideoBookmark";
 
 type Props = {
-  video: Video;
-  videoBookmark: VideoBookmark | undefined;
   fullscreen: boolean;
+  scale: number;
   showUI: boolean;
+  video: Video;
+  videoBookmark: VideoBookmark | undefined;
 };
 
 export default function Drawing({
   fullscreen,
+  scale,
+  showUI,
   video,
   videoBookmark,
-  showUI,
 }: Props) {
   const tlDrawRef = useRef(null);
   const outerRef = useRef(null);
-  const [originalWidth, setOriginalWidth] = useState(null);
-  const [scale, setScale] = useState(null);
 
   const setVideoBookmarkDrawing = useStore(
     (state) => state.setVideoBookmarkDrawing
@@ -33,12 +33,13 @@ export default function Drawing({
   function handleMount(app: TldrawApp) {
     tlDrawRef.current = app;
 
-    if (videoBookmark.drawing) {
+    if (videoBookmark && videoBookmark.drawing) {
       tlDrawRef.current.loadDocument(
         JSON.parse(JSON.stringify(videoBookmark.drawing)) // we need to load a copy of the document
       );
 
       tlDrawRef.current.selectNone();
+      tlDrawRef.current.setCamera([0, 0], scale, "layout_mounted");
     }
   }
 
@@ -49,32 +50,13 @@ export default function Drawing({
   }
 
   useEffect(() => {
-    if (scale === null || tlDrawRef.current === null) {
+    if (tlDrawRef.current === null) {
       return;
     }
 
     tlDrawRef.current.setCamera([0, 0], scale, "layout_resized");
   }, [scale]);
 
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      // WHY??
-      setOriginalWidth(outerRef.current.offsetWidth);
-    });
-  }, []);
-
-  useLayoutEffect(() => {
-    const handleResize = () => {
-      setScale(outerRef.current.offsetWidth / originalWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [originalWidth]);
-
   return (
     <Box
       position="absolute"

diff --git a/src/components/VideoBookmark/VideoBookmark.tsx b/src/components/VideoBookmark/VideoBookmark.tsx
@@ -11,8 +11,9 @@ import type { Video } from "../../services/models/Video";
 import type { VideoBookmark } from "../../services/models/VideoBookmark";
 
 type Props = {
-  video: Video;
   bookmark: VideoBookmark;
+  scale: number;
+  video: Video;
 };
 
 const dragHandleStyles = css`
@@ -27,7 +28,7 @@ const dragHandleStyles = css`
   );
 `;
 
-export default function VideoBookmark({ video, bookmark }: Props) {
+export default function VideoBookmark({ video, bookmark, scale }: Props) {
   const playing = useStore((state) => state.playing);
   const editingBookmark = useStore((state) => state.editingBookmark);
 
@@ -65,15 +66,17 @@ export default function VideoBookmark({ video, bookmark }: Props) {
   }
 
   function handleDragStop(e: MouseEvent, data: { x: number; y: number }) {
-    setVideoBookmarkCoords(video, bookmark, { x: data.x, y: data.y });
+    setVideoBookmarkCoords(video, bookmark, { x: data.x, y: data.y }, scale);
   }
 
   function handleContentUpdate(content: string) {
     setVideoBookmarkContent(video, bookmark, content);
   }
 
+  const offset = scale / bookmark.scale;
+
   const position = bookmark.position
-    ? { x: bookmark.position.x, y: bookmark.position.y }
+    ? { x: bookmark.position.x * offset, y: bookmark.position.y * offset }
     : null;
 
   const renderedContent = editingBookmark ? (

diff --git a/src/components/VideoBookmarkAdd/VideoBookmarkAdd.tsx b/src/components/VideoBookmarkAdd/VideoBookmarkAdd.tsx
@@ -8,10 +8,11 @@ import { Bookmark as BookmarkIcon } from "tabler-icons-react";
 import type { Video } from "../../services/models/Video";
 
 type Props = {
+  scale: number;
   video: Video;
 };
 
-export default function VideoBookmark({ video }: Props) {
+export default function VideoBookmark({ video, scale }: Props) {
   const createVideoBookmark = useStore((state) => state.createVideoBookmark);
   const stopPlaying = useStore((state) => state.stopPlaying);
   const startEditingBookmark = useStore((state) => state.startEditingBookmark);
@@ -21,7 +22,7 @@ export default function VideoBookmark({ video }: Props) {
 
   function handleCreate() {
     stopPlaying();
-    createVideoBookmark(video, "", currentTime);
+    createVideoBookmark(video, "", currentTime, scale);
     startEditingBookmark();
   }
 

diff --git a/src/pages/ReviewVideos.tsx b/src/pages/ReviewVideos.tsx
@@ -154,6 +154,7 @@ export default function ReviewVideos() {
         activeVideo.displayAspectRatio,
         overlayRef.current
       );
+
       setVideoDimensions(dimensions);
     };
 
@@ -173,6 +174,11 @@ export default function ReviewVideos() {
     });
   }, []);
 
+  const scale =
+    !videoDimensions || !activeVideo
+      ? 1
+      : videoDimensions[0] / activeVideo.codedWidth;
+
   const overlayStyle = css`
     width: ${videoDimensions ? videoDimensions[0] : ""}px;
     height: ${videoDimensions ? videoDimensions[1] : ""}px;
@@ -277,15 +283,20 @@ export default function ReviewVideos() {
           <Box position={"relative"} css={overlayStyle}>
             {activeVideoId !== null && (drawing || activeBookmark) && (
               <Drawing
-                key={activeBookmark ? activeBookmark.id : "adhoc"}
                 fullscreen={fullscreen}
+                key={activeBookmark ? activeBookmark.id : "adhoc"}
+                scale={scale}
+                showUI={editingBookmark || drawing}
                 video={activeVideo}
                 videoBookmark={activeBookmark}
-                showUI={editingBookmark || drawing}
               />
             )}
             {activeVideoId !== null && (
-              <VideoBookmark video={activeVideo} bookmark={activeBookmark} />
+              <VideoBookmark
+                video={activeVideo}
+                bookmark={activeBookmark}
+                scale={scale}
+              />
             )}
             <Box css={videoStyle} ref={videoRef} />
           </Box>
@@ -346,7 +357,7 @@ export default function ReviewVideos() {
           </Box>
 
           <Box mx={"2"}>
-            <VideoBookmarkAdd video={activeVideo} />
+            <VideoBookmarkAdd video={activeVideo} scale={scale} />
           </Box>
 
           <Tooltip label="Go fullscreen">

diff --git a/src/services/models/Video.ts b/src/services/models/Video.ts
@@ -45,6 +45,12 @@ export type Video = {
 
   /** List of bookmarks stored against this video */
   bookmarks: VideoBookmark[];
+
+  /** Width of the video in px, used to calculate scaling */
+  codedWidth: number;
+
+  /* Height of the video in px */
+  codedHeight: number;
 };
 
 type VideoConstructorAttrs = {
@@ -121,6 +127,8 @@ export async function createFromFile(filePath: string): Promise<Video> {
 
   return {
     bookmarks: [],
+    codedHeight: videoStream.coded_height,
+    codedWidth: videoStream.coded_width,
     displayAspectRatio: videoStream.display_aspect_ratio,
     duration: null,
     durationNormalised: null,

diff --git a/src/services/models/VideoBookmark.ts b/src/services/models/VideoBookmark.ts
@@ -16,22 +16,26 @@ export type VideoBookmark = {
   time: number;
 
   /** Position on the screen of the bookmark */
-  position: VideoBookmarkCoordinates | null | undefined;
-
-  /** Zoom associated with the bookmarks position */
-  zoom: number | null | undefined;
+  position: VideoBookmarkCoordinates | null;
 
   /** Drawing associated with the bookmark */
-  drawing: object | null | undefined;
+  drawing: object | null;
+
+  /** The scale the bookmark was created at */
+  scale: number | null;
 };
 
-export function create(content: string, time: number): VideoBookmark {
+export function create(
+  content: string,
+  time: number,
+  scale: number
+): VideoBookmark {
   return {
     content,
     drawing: null,
     id: uuidv4(),
     position: null,
     time,
-    zoom: null,
+    scale,
   };
 }
diff --git a/src/services/store.ts b/src/services/store.ts
@@ -9,7 +9,7 @@ import type { Video } from "./models/Video";
 import type { VideoBookmark } from "./models/VideoBookmark";
 import type { VideoBookmarkCoordinates } from "./models/VideoBookmark";
 
-const PERSIST_VERSION = 0;
+const PERSIST_VERSION = 1;
 
 interface State {
   addVideo: (video: Video) => void;
@@ -31,14 +31,20 @@ interface State {
   togglePlaying: () => void;
 
   // bookmarks
-  createVideoBookmark: (video: Video, content: string, time: number) => void;
+  createVideoBookmark: (
+    video: Video,
+    content: string,
+    time: number,
+    scale: number
+  ) => void;
   deleteVideoBookmark: (video: Video, bookmark: VideoBookmark) => void;
   startEditingBookmark: () => void;
   stopEditingBookmark: () => void;
   setVideoBookmarkCoords: (
     video: Video,
     bookmark: VideoBookmark,
-    coords: VideoBookmarkCoordinates
+    coords: VideoBookmarkCoordinates,
+    scale: number
   ) => void;
   setVideoBookmarkContent: (
     video: Video,
@@ -210,14 +216,19 @@ const useStore = createStore<State>(
           })
         ),
 
-      createVideoBookmark: (video: Video, content: string, time: number) =>
+      createVideoBookmark: (
+        video: Video,
+        content: string,
+        time: number,
+        scale: number
+      ) =>
         set(
           produce((state: State) => {
             const index = state.videos.findIndex((innerVideo) => {
               return innerVideo.id === video.id;
             });
 
-            const bookmark = createVideoBookmark(content, time);
+            const bookmark = createVideoBookmark(content, time, scale);
 
             state.videos[index].bookmarks.push(bookmark);
           })
@@ -254,7 +265,8 @@ const useStore = createStore<State>(
       setVideoBookmarkCoords: (
         video: Video,
         bookmark: VideoBookmark,
-        coords: VideoBookmarkCoordinates
+        coords: VideoBookmarkCoordinates,
+        scale: number
       ) =>
         set(
           produce((state: State) => {
@@ -272,6 +284,8 @@ const useStore = createStore<State>(
               x: coords.x,
               y: coords.y,
             };
+
+            state.videos[videoIndex].bookmarks[bookmarkIndex].scale = scale;
           })
         ),