From 16f0c4bc51da4c96db2a7ff66827cff971797ecb Mon Sep 17 00:00:00 2001
From: Drilio <Roy-Antoine93@proton.me>
Date: Wed, 18 Dec 2024 09:34:38 +0100
Subject: [PATCH 1/4] wip fix video time change

---
 package-lock.json                       |  4 ++--
 src/components/VideoViewer.js           | 24 +++++++++++-------------
 src/components/ViewerNavigationVideo.js | 10 ++++++++--
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dade50cfae..502bbcd656 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mirador-video",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mirador-video",
-      "version": "1.0.11",
+      "version": "1.0.12",
       "license": "Apache-2.0",
       "dependencies": {
         "@celluloid/react-player": "^2.14.0",
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 11ad5349c1..2d93e7a9ab 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -37,30 +37,25 @@ export class VideoViewer extends Component {
 
   /** */
   componentDidUpdate(prevProps) {
-    console.log('componentDidUpdate in VideoViewer.js');
     const {
-      canvas, currentTime, paused,
-      setCurrentTime, setPaused,
+      canvas, currentTime, paused, setCurrentTime, setPaused,
     } = this.props;
-
+console.log('currentTime',currentTime)
     if (paused !== prevProps.paused) {
-      if (currentTime === 0) {
-        this.timerReset();
-      }
       if (paused) {
         this.timerStop();
       } else {
         this.timerStart();
       }
     }
+
+    // Ensure `currentTime` updates are consistent
     if (currentTime !== prevProps.currentTime) {
       const duration = canvas.getDuration();
-      if (duration && duration < currentTime) {
-        if (!paused) {
-          setPaused(true);
-          setCurrentTime(0);
-          this.timerReset();
-        }
+      if (duration && currentTime > duration) {
+        setPaused(true);
+        setCurrentTime(0);
+        this.timerReset();
       }
     }
   }
@@ -83,6 +78,7 @@ export class VideoViewer extends Component {
 
   /** */
   timerStart() {
+    console.log('timerStart');
     const { currentTime } = this.props;
     this.setState({
       start: Date.now() - currentTime * 1000,
@@ -100,11 +96,13 @@ export class VideoViewer extends Component {
 
   /** */
   timerStop() {
+    console.log('timerStop');
     clearInterval(this.timer);
   }
 
   /** */
   timerReset() {
+    console.log('timerReset');
     this.setState({ time: 0 });
   }
 
diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js
index 1fd5a17ab0..17ef276580 100755
--- a/src/components/ViewerNavigationVideo.js
+++ b/src/components/ViewerNavigationVideo.js
@@ -36,9 +36,15 @@ export class ViewerNavigationVideo extends Component {
 
   /** */
   handleChange = (event, newValue) => {
-    const { paused, setCurrentTime, setSeekTo } = this.props;
+    console.log('on change');
+    console.log('newValue', newValue);
+    const {
+      paused, setCurrentTime, setSeekTo, setPaused,
+    } = this.props;
     if (!paused) {
+      setPaused(true);
       setSeekTo(newValue);
+      setCurrentTime(newValue);
     } else {
       setCurrentTime(newValue);
     }
@@ -59,7 +65,7 @@ export class ViewerNavigationVideo extends Component {
       setTextTrackDisabled,
       textTrackDisabled,
     } = this.props;
-
+    console.log('currentTime', currentTime);
     const start = (duration > 3600 || duration === undefined) ? 11 : 14;
     const len = (duration > 3600 || duration === undefined) ? 8 : 5;
     let durationLabel = new Date(currentTime * 1000).toISOString().substr(start, len);

From 84c62b763e4ac62738ceb6ec338e0c21f4f1bd17 Mon Sep 17 00:00:00 2001
From: Drilio <Roy-Antoine93@proton.me>
Date: Wed, 18 Dec 2024 10:25:04 +0100
Subject: [PATCH 2/4] Fix issue where reactPlayer didn't populate seek to time
 when the time was at 0

---
 src/components/VideoViewer.js | 153 +++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 76 deletions(-)

diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 2d93e7a9ab..4d45af898a 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -40,7 +40,6 @@ export class VideoViewer extends Component {
     const {
       canvas, currentTime, paused, setCurrentTime, setPaused,
     } = this.props;
-console.log('currentTime',currentTime)
     if (paused !== prevProps.paused) {
       if (paused) {
         this.timerStop();
@@ -48,10 +47,13 @@ console.log('currentTime',currentTime)
         this.timerStart();
       }
     }
-
     // Ensure `currentTime` updates are consistent
     if (currentTime !== prevProps.currentTime) {
       const duration = canvas.getDuration();
+      //Fix issue where reactPlayer didn't populate seek to time when the time was at 0
+      if (prevProps.currentTime === 0) {
+        this.playerRef.current.seekTo(currentTime);
+      }
       if (duration && currentTime > duration) {
         setPaused(true);
         setCurrentTime(0);
@@ -78,7 +80,6 @@ console.log('currentTime',currentTime)
 
   /** */
   timerStart() {
-    console.log('timerStart');
     const { currentTime } = this.props;
     this.setState({
       start: Date.now() - currentTime * 1000,
@@ -174,84 +175,84 @@ console.log('currentTime',currentTime)
         }}
       >
         {video && (
-        <>
-          <div style={{
-            alignItems: 'center',
-            backgroundColor: 'black',
-            border: debug ? '6px solid red' : 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            marginBottom: '122px', // TODO Space for navigation controls
-            position: 'relative',
-            width: '100%',
-          }}
-          >
-            <ResizeObserver onResize={this.setContainerRatio} />
+          <>
             <div style={{
-              aspectRatio: playerStyle.aspectRatio,
-              border: debug ? '6px solid green' : 'none',
-              height: playerStyle.height,
-              maxHeight: '100%',
-              maxWidth: '100%',
-              width: playerStyle.width,
+              alignItems: 'center',
+              backgroundColor: 'black',
+              border: debug ? '6px solid red' : 'none',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              marginBottom: '122px', // TODO Space for navigation controls
               position: 'relative',
+              width: '100%',
             }}
             >
-              <ReactPlayer
-                width={videoStyle.width}
-                height={videoStyle.height}
-                ref={this.playerRef}
-                url={video.id}
-                controls={false} // Hide default controls
-                pip={false}
-                playbackRate={1}
-                playing={!paused}
-                muted={muted}
-                loop={false}
-                config={{
-                  peertube: {
-                    controls: 0,
-                    mode: 'p2p-media-loader',
-                  },
-                  youtube: {
-                    controls: 0,
-                    modestbranding: 0,
-                  },
-                }}
-                iiifVideoInfos={video}
-                style={{
-                  aspectRatio: `${videoAspectRatio}`,
-                  border: debug ? '6px solid pink' : 'none', // 'absolute' or 'block
-                  height: (containerRatio < videoAspectRatio ? 'auto' : '100%'),
-                  maxHeight: '100%',
-                  maxWidth: '100%',
-                  position: 'absolute',
-                  width: (containerRatio < videoAspectRatio ? '100%' : 'auto'),
-                }}
-                onPlay={handleVideoEventFunctions.onPlay}
-              />
-              {this.playerRef.current && (
-              <AnnotationsOverlayVideo
-                onFunctionsReady={this.handleVideoEventFunctions}
-                windowId={windowId}
-                playerRef={this.playerRef.current}
-                videoRef={this.playerRef.current.getInternalPlayer()}
-                videoTarget={videoTargetTemporalfragment}
-                key={`${windowId} ${video.id}`}
-                highlightAllAnnotations
-                style={{
-                  border: debug ? '6px solid yellow' : 'none',
-                  height: '100%',
-                  objectFit: 'contain',
-                  width: '100%',
-                }}
-              />
-              )}
+              <ResizeObserver onResize={this.setContainerRatio} />
+              <div style={{
+                aspectRatio: playerStyle.aspectRatio,
+                border: debug ? '6px solid green' : 'none',
+                height: playerStyle.height,
+                maxHeight: '100%',
+                maxWidth: '100%',
+                width: playerStyle.width,
+                position: 'relative',
+              }}
+              >
+                <ReactPlayer
+                  width={videoStyle.width}
+                  height={videoStyle.height}
+                  ref={this.playerRef}
+                  url={video.id}
+                  controls={false} // Hide default controls
+                  pip={false}
+                  playbackRate={1}
+                  playing={!paused}
+                  muted={muted}
+                  loop={false}
+                  config={{
+                    peertube: {
+                      controls: 0,
+                      mode: 'p2p-media-loader',
+                    },
+                    youtube: {
+                      controls: 0,
+                      modestbranding: 0,
+                    },
+                  }}
+                  iiifVideoInfos={video}
+                  style={{
+                    aspectRatio: `${videoAspectRatio}`,
+                    border: debug ? '6px solid pink' : 'none', // 'absolute' or 'block
+                    height: (containerRatio < videoAspectRatio ? 'auto' : '100%'),
+                    maxHeight: '100%',
+                    maxWidth: '100%',
+                    position: 'absolute',
+                    width: (containerRatio < videoAspectRatio ? '100%' : 'auto'),
+                  }}
+                  onPlay={handleVideoEventFunctions.onPlay}
+                />
+                {this.playerRef.current && (
+                <AnnotationsOverlayVideo
+                  onFunctionsReady={this.handleVideoEventFunctions}
+                  windowId={windowId}
+                  playerRef={this.playerRef.current}
+                  videoRef={this.playerRef.current.getInternalPlayer()}
+                  videoTarget={videoTargetTemporalfragment}
+                  key={`${windowId} ${video.id}`}
+                  highlightAllAnnotations
+                  style={{
+                    border: debug ? '6px solid yellow' : 'none',
+                    height: '100%',
+                    objectFit: 'contain',
+                    width: '100%',
+                  }}
+                />
+                )}
+              </div>
             </div>
-          </div>
-          <WindowCanvasNavigationControlsVideo windowId={windowId} />
-        </>
+            <WindowCanvasNavigationControlsVideo windowId={windowId} playerRef={this.playerRef} />
+          </>
         )}
       </div>
     );

From aba32ade2bf994847f5e4123b474edf2b76b41dd Mon Sep 17 00:00:00 2001
From: Drilio <Roy-Antoine93@proton.me>
Date: Wed, 18 Dec 2024 10:27:16 +0100
Subject: [PATCH 3/4]  when seeking and on pause, show current frame

---
 src/components/VideoViewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 4d45af898a..40b8458d3e 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -51,7 +51,7 @@ export class VideoViewer extends Component {
     if (currentTime !== prevProps.currentTime) {
       const duration = canvas.getDuration();
       //Fix issue where reactPlayer didn't populate seek to time when the time was at 0
-      if (prevProps.currentTime === 0) {
+      if (prevProps.currentTime === 0 || paused === true) {
         this.playerRef.current.seekTo(currentTime);
       }
       if (duration && currentTime > duration) {

From f5fdd0b6d2d61f53c0368186e6151641ed32f709 Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Wed, 18 Dec 2024 11:54:11 +0100
Subject: [PATCH 4/4] Remove console.log

---
 src/components/VideoViewer.js                   | 3 ---
 src/components/ViewerNavigationVideo.js         | 2 --
 src/components/WindowSideBarAnnotationsPanel.js | 1 -
 src/lib/CanvasAnnotationDisplay.js              | 2 --
 4 files changed, 8 deletions(-)

diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 40b8458d3e..f93162d2fa 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -19,7 +19,6 @@ export class VideoViewer extends Component {
       containerRatio: 1,
       handleVideoEventFunctions: {
         onPlay: () => {
-          console.log('onPlay');
         },
       },
       start: 0,
@@ -97,13 +96,11 @@ export class VideoViewer extends Component {
 
   /** */
   timerStop() {
-    console.log('timerStop');
     clearInterval(this.timer);
   }
 
   /** */
   timerReset() {
-    console.log('timerReset');
     this.setState({ time: 0 });
   }
 
diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js
index 17ef276580..34ba668ac6 100755
--- a/src/components/ViewerNavigationVideo.js
+++ b/src/components/ViewerNavigationVideo.js
@@ -36,8 +36,6 @@ export class ViewerNavigationVideo extends Component {
 
   /** */
   handleChange = (event, newValue) => {
-    console.log('on change');
-    console.log('newValue', newValue);
     const {
       paused, setCurrentTime, setSeekTo, setPaused,
     } = this.props;
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index cb76453e15..f18f733b39 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -20,7 +20,6 @@ export function WindowSideBarAnnotationsPanel({
   const containerRef = useRef();
 
   useEffect(() => {
-    console.log(`Use effect current ${containerRef.current}`);
   });
 
   return (
diff --git a/src/lib/CanvasAnnotationDisplay.js b/src/lib/CanvasAnnotationDisplay.js
index 0388d3c7f1..673e492f44 100644
--- a/src/lib/CanvasAnnotationDisplay.js
+++ b/src/lib/CanvasAnnotationDisplay.js
@@ -44,8 +44,6 @@ export default class CanvasAnnotationDisplay {
       currentPalette = this.palette.default;
     }
 
-    console.log('currentPalette', currentPalette);
-
     if (currentPalette.globalAlpha === 0) return;
 
     [...this.svgPaths].forEach((element) => {