Merge pull request #6 from SCENE-CE/4-fix-origin-on-video3

4 fix origin on video3
SCENE-CE · Nov 13, 2024 · 8151f95 · 8151f95
2 parents 91a3747 + 4991ae3
commit 8151f95
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 43 deletions.
diff --git a/__tests__/integration/mirador/index.html b/__tests__/integration/mirador/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <title>Mirador</title>
+    <title>Mirador Video</title>
   </head>
   <body>
     <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
@@ -16,14 +16,13 @@
          transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
        },
        catalog: [
-         { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
-         { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
+/*         { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
+         { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },*/
+         { manifestId: "https://files.tetras-libre.fr/dev/vertical_video_with_annot.json"},
          { manifestId: "https://files.tetras-libre.fr/dev/cats_video_with_annot.json"},
-         { manifestId: "https://files.tetras-libre.fr/dev/test-vertical-video-800H.json"},
          { manifestId: "https://files.tetras-libre.fr/dev/Heterogeneous-media-on-several-canvases.json"},
-         { manifestId: "https://files.tetras-libre.fr/dev/vertical_video_with_annot.json"},
-
-
+         { manifestId: "https://dzkimgs.l.u-tokyo.ac.jp/videos/cat2020/manifest.json"},
+         { manifestId: "https://files.tetras-libre.fr/dev/vertical_video_with_annot.json"}
        ]
      });
     </script>

diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
@@ -11,6 +11,7 @@ import CanvasOverlayVideo from '../lib/CanvasOverlayVideo';
 import CanvasWorld from '../lib/CanvasWorld';
 import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
 import { VideosReferences } from '../plugins/VideosReferences';
+import {ORIENTATIONS} from './VideoViewer';
 
 /** AnnotationsOverlayVideo - based on AnnotationsOverlay */
 export class AnnotationsOverlayVideo extends Component {
@@ -83,6 +84,8 @@ export class AnnotationsOverlayVideo extends Component {
     this.imagesLoading = [];
     this.imagesReady = [];
 
+    this.currentOrientation = props.currentOrientation;
+
     const { videoTarget: temporalfragment } = this.props;
     if (temporalfragment && temporalfragment.length > 0) {
       this.temporalOffset = temporalfragment[0] || 0;
@@ -618,15 +621,28 @@ export class AnnotationsOverlayVideo extends Component {
     }
   }
 
+
   /**
    * Renders things
    */
   render() {
     const { showProgress } = this.state;
+    const debugPositionning = false;
     const circularProgress = (<CircularProgress style={{ left: '50%', position: 'absolute', top: '50%' }} />);
     return (
       <>
-        <canvas ref={this.ref} style={{ left: 0, position: 'absolute', top: 0 }} />
+        <canvas
+          ref={this.ref}
+          style={{
+            left: 0,
+            position: 'relative',
+            top: 0,
+            border: debugPositionning ? '6px solid yellow' : 'none',
+            width: (this.currentOrientation === ORIENTATIONS.LANDSCAPE ? '100%' : 'auto'),
+
+            // transform: "translate(50%)",
+          }}
+        />
         <ResizeObserver onResize={this.onCanvasResize} />
         { showProgress && circularProgress }
       </>
@@ -659,6 +675,7 @@ AnnotationsOverlayVideo.propTypes = {
   annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired,
+  currentOrientation: PropTypes.string,
   currentTime: PropTypes.number,
   deselectAnnotation: PropTypes.func,
   drawAnnotations: PropTypes.bool,

diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
@@ -1,29 +1,15 @@
 import flatten from 'lodash/flatten';
 import flattenDeep from 'lodash/flattenDeep';
-import { createRef, Component } from 'react';
+import React, { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import AnnotationItem from '../lib/AnnotationItem';
 import AnnotationsOverlayVideo from '../containers/AnnotationsOverlayVideo';
 import WindowCanvasNavigationControlsVideo from '../containers/WindowCanvasNavigationControlsVideo';
 
-const StyledContainer = styled('div')(() => ({
-  alignItems: 'center',
-  display: 'flex',
-  width: '100%',
-  justifyContent:'center'
-}));
-
-const StyledFlexFill = styled('div')(() => ({
-  height: '100%',
-  position: 'relative',
-  display: 'flex',
-  justifyContent:'center'
-}));
-
-const StyledVideo = styled('video')(() => ({
-  maxHeight: '100%',
-}));
+export const ORIENTATIONS = {
+  LANDSCAPE: 'landscape',
+  PORTRAIT: 'portrait',
+};
 
 /** */
 export class VideoViewer extends Component {
@@ -121,6 +107,8 @@ export class VideoViewer extends Component {
     this.setState({ time: 0 });
   }
 
+
+
   /* eslint-disable jsx-a11y/media-has-caption */
   /** */
   render() {
@@ -158,23 +146,92 @@ export class VideoViewer extends Component {
       ? videoResources[len - 1].body[0] : null;
     const videoTargetTemporalfragment = len > 0
       ? videoResources[len - 1].temporalfragment : [];
+
+    let currentOrientation;
+
+    if (video) {
+      console.log('video', video);
+      currentOrientation = video.getWidth() > video.getHeight() ? ORIENTATIONS.LANDSCAPE : ORIENTATIONS.PORTRAIT;
+    }
+
+    const debugPositionning = false;
+
     return (
-      <StyledContainer>
-        <StyledFlexFill>
-          { video && (
-            <>
-              <StyledVideo key={video.id} ref={this.videoRef} {...videoOptions}>
+      <div
+        className="outerContainer"
+        style={{
+          border: debugPositionning ? '6px solid blue' : 'none',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+      >
+        {video && (
+        <>
+          <div style={{
+            border: debugPositionning ? '6px solid red' : 'none',
+            position: 'relative',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '122px', // TODO Space for navigation controls
+            flexDirection: 'column',
+            // flexDirection: currentOrientation === ORIENTATIONS.LANDSCAPE ? 'row' : 'column',
+            backgroundColor: 'black',
+          }}
+          >
+            <div style={{
+              border: debugPositionning ? '6px solid green' : 'none',
+              width: 'fit-content',
+              maxWidth: '100%',
+            }}
+            >
+              <video
+                style={{
+                  border: debugPositionning ? '6px solid pink' : 'none',
+                  top: 0,
+                  position: 'absolute', // 'absolute' or 'block
+                  width: (currentOrientation === ORIENTATIONS.LANDSCAPE ? '100%' : 'auto'),
+                  height: (currentOrientation === ORIENTATIONS.PORTRAIT ? '100%' : 'auto'),
+                  maxWidth: '100%',
+
+                }}
+                key={video.id}
+                ref={this.videoRef}
+                {...videoOptions}
+              >
+                {' '}
+                {/* pink border */}
                 <source src={video.id} type={video.getFormat()} />
-                { vttContent.map(vttc => (<track key={vttc.id} src={vttc.id} srcLang={vttc.language} />)) }
-              </StyledVideo>
-              <AnnotationsOverlayVideo windowId={windowId} videoRef={this.videoRef} videoTarget={videoTargetTemporalfragment} key={`${windowId} ${video.id}`} />
-            </>
-          )}
+                {vttContent.map(vttc => (
+                  <track key={vttc.id} src={vttc.id} srcLang={vttc.language} />))}
+              </video>
+
+              <AnnotationsOverlayVideo
+                windowId={windowId}
+                videoRef={this.videoRef}
+                videoTarget={videoTargetTemporalfragment}
+                key={`${windowId} ${video.id}`}
+                currentOrientation={currentOrientation}
+                highlightAllAnnotations
+                style={{
+                  height: '100%',
+                  width: '100%',
+                  objectFit: 'contain',
+                  border: debugPositionning ? '6px solid yellow' : 'none',
+                }}
+              />
+            </div>
+          </div>
           <WindowCanvasNavigationControlsVideo windowId={windowId} />
-        </StyledFlexFill>
-      </StyledContainer>
+        </>
+        )}
+      </div>
     );
   }
+
   /* eslint-enable jsx-a11y/media-has-caption */
 }
 
@@ -201,9 +258,12 @@ VideoViewer.defaultProps = {
   currentTime: 0,
   muted: false,
   paused: true,
-  setCurrentTime: () => {},
-  setHasTextTrack: () => {},
-  setPaused: () => {},
+  setCurrentTime: () => {
+  },
+  setHasTextTrack: () => {
+  },
+  setPaused: () => {
+  },
   textTrackDisabled: true,
   videoOptions: {},
 };
diff --git a/src/lib/CanvasAnnotationDisplay.js b/src/lib/CanvasAnnotationDisplay.js
@@ -15,6 +15,8 @@ export default class CanvasAnnotationDisplay {
     this.hovered = hovered;
     this.imageSource = imageSource;
     this.canvasSize = canvasSize;
+
+    this.palette.selected.strokeStyle = 'red'; // TODO remove when finished
   }
 
   /** */
@@ -44,6 +46,9 @@ export default class CanvasAnnotationDisplay {
       currentPalette = this.palette.default;
     }
 
+    console.log('currentPalette', currentPalette);
+
+
     if (currentPalette.globalAlpha === 0) return;
 
     [...this.svgPaths].forEach((element) => {

diff --git a/webpack.config.js b/webpack.config.js
@@ -71,7 +71,7 @@ module.exports = (env, options) => {
     ...config,
     devServer: {
       hot: true,
-      port: 4444,
+      port: 4445,
       static: [
         './__tests__/integration/mirador',
         './__tests__/fixtures',