Mirador video annotation playback, wrong origin

[daxid]

Manifest URLs: https://files.tetras-libre.fr/dev/vertical_video_with_annot.json

Open the above manifest URL in Mirador Video. It is a vertical video with an annotation targeted at #xywh=0,0,400,400&t=0,12

You can see the origin 0,0 used in the target correspond to the upper-left corner of the PLAYER when it should be the corner of the VIDEO.

I think that this problem can have caused issues in the following : https://github.com/SCENE-CE/mirador-annotation-editor/issues/90****

[geourjoa]

@daxid

I dont see the annotation in Mirador (in the side list or on the video). But I see the annotation on the manifest file Did you have tested the manifest ? And if working, where ?

[geourjoa]

I have tested on Mirador Video alone, Mirador 4 with MAE and on Arvest Dev (MMU so MV with MAEV))

[daxid]

Well, the annotation is not appearing in the side panel probably because the motivation is off. I thought that painting was the one to have it displayed in the side panel. I must have been mistaken. You can always change it in https://filebrowser.tetras-libre.fr/.

The annotation still appears on mouse over :

[geourjoa]

Ok on mouse over I See it

[geourjoa]

SOme progress !

[daxid]

Quick progress indeed !! :-)

[geourjoa]

Do you have landscape video manifest with annotation ?

[daxid]

There you go :

https://files.tetras-libre.fr/dev/cats_video_with_annot.json

Same as before, the annotation only appears on mouseover

[geourjoa]

Additional inputs

--> Start from the branch 4-fix-orign-on-video/

The most important file is src/components/VideoViewer.js

This file hold the component displaying the video.

VideoViewer.js

<StyledContainer>
    {video && (
        <>
            <StyledVideoContent>
                <StyledVideo key={video.id} ref={this.videoRef} {...videoOptions}>
                    <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}`} style={{height: '100%', border: '3px solid orange'}}/>
            </StyledVideoContent>
            <WindowCanvasNavigationControlsVideo windowId={windowId}/>
        </>
    )}
</StyledContainer>

• styledContainer : Contains video and his controller. Blue border
• StyledVideoContent Contains video and the annotations layer (AnnotationsOverlayVideo).. Red border
• StyledVideo Only the video. Pink border
• AnnotationsOverlayVideo Layer of annotation. Orange border
• WindowCanvasNavigationControlsVideo Controls of the video

CSS stuff of styledContainer, styleVideoContent and styledVideo are on top of VideoViewer

The other interesting file is src/components/AnnotationsOverlayVideo.js, which contains the annotation layer

[geourjoa]

Case 1

[geourjoa]

Case 2

[geourjoa]

The annotation (on left top corner) is only displayed on mouse over and with annotation panel opened

[geourjoa]

https://github.com/SCENE-CE/mirador-video/pull/6

[geourjoa]

I have problem to use MV in MAEV

WIP is in MAEV/UpdateToLatestMiradorVideo

• [ ] Fix use of Konva
• [ ] Find right origin on vertical video for Konva.
• [ ]

[geourjoa]

Minimal React component showing a video and an overlay div @daxid

import React from 'react';
import ReactPlayer from 'react-player';

const App = () => {

  const paused = true;

  const playerRef = React.useRef(null);

  const video = {
    id: 'https://youtu.be/dbX5Is_M4CE'
  };

  return (
    <div
    className="outerContainer"
    style={{
      display: 'flex',
      height: '100%',
      justifyContent: 'center',
      overflow: 'auto',
      position: 'relative',
      width: '100%',
    }}
  >
    {video && (
    <>
      <div style={{
        alignItems: 'center',
        backgroundColor: 'black',
        display: 'flex',
        flexDirection: 'column',
        marginBottom: '122px', // TODO Space for navigation controls
        position: 'relative',
        width: '100%',
      }}
      >
        <div style={{
          height: '100%',
          position: 'relative',
          display: 'flex',
          width: '100%',
          alignItems: 'center',
          flexDirection: 'column',
        }}
        >
          <ReactPlayer
            ref={playerRef}
            url={video.id}
            controls={false} // Hide default controls
            pip={false}
            playbackRate={1}
            playing={!paused}
            config={{
              peertube: {
                controls: 0,
                mode: 'p2p-media-loader',
              },
            }}
            style={{
              position: 'relative', // 'absolute' or 'block
              maxWidth: '100%',
              height: '100%',
              textAlign: 'center',
            }}
          />

          {/* AnnotationOverlayVideo */}
          <div style={{height: "100%", width: "100%"}}>
            <div style={{backgroundColor: 'red', 
              opacity : '0.3', 
              height: "100%", 
              width: "100%", 
              zIndex: 100, 
              position: "absolute", 
              top:0, left:0}}>

            </div>
          </div>
        </div>
      </div>
      {/* <WindowCanvasNavigationControlsVideo windowId={windowId} /> */}
    </>
    )}
  </div>
  );
};

export default App;