diff --git a/package.json b/package.json index 0777ec595d66d19d09c387c8d6ef075c43f6dc4a..7922421927b19899397a95bdbd87b8980690ca6b 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "test:watch": "jest -c jest.json --watch", "build": "NODE_ENV=production webpack --mode=production", "build:dev": "webpack --mode=development", + "build:esonly": + "mkdir -p .tmp/dist/es && cp -r src .tmp/dist/es && NODE_ENV=production MODULE_FORMAT=es babel .tmp/dist/es -d .tmp/dist/es && rm -rf dist/es && cp -r .tmp/dist/es dist/", "build:es": "mkdir -p dist/es && cp -r src dist/es && NODE_ENV=production MODULE_FORMAT=es babel dist/es -d dist/es", "build:cjs": "mkdir -p dist/cjs && cp -r src dist/cjs && NODE_ENV=production MODULE_FORMAT=cjs babel dist/cjs -d dist/cjs", "build:watch": "webpack --watch --mode=development", diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js index 7bb90697e6938cf665faf2801c1094c2f323604c..096e1f6d5efb66e113801130fe531d0908fdfef4 100644 --- a/src/components/AnnotationSettings.js +++ b/src/components/AnnotationSettings.js @@ -5,7 +5,7 @@ import SyncDisabledIcon from '@material-ui/icons/SyncDisabled'; import VisibilityIcon from '@material-ui/icons/VisibilitySharp'; import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp'; import MiradorMenuButton from '../containers/MiradorMenuButton'; -import { VideoViewersReferences } from '../plugins/VideoViewersReferences'; +import { VideosReferences } from '../plugins/VideosReferences'; /** * AnnotationSettings is a component to handle various annotation @@ -21,7 +21,7 @@ export class AnnotationSettings extends Component { displayAll, displayAllDisabled, t, toggleAnnotationAutoScroll, toggleAnnotationDisplay, } = this.props; - const mediaIsVideo = typeof VideoViewersReferences.get(windowId) !== 'undefined'; + const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined'; return ( <> diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js index 7e1a5f436a7bb739f2454c372593380c7204b030..bc4562cfcf609a475fa6823556286994f6edb571 100755 --- a/src/components/AnnotationsOverlayVideo.js +++ b/src/components/AnnotationsOverlayVideo.js @@ -10,6 +10,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import CanvasOverlayVideo from '../lib/CanvasOverlayVideo'; import CanvasWorld from '../lib/CanvasWorld'; import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay'; +import { VideosReferences } from '../plugins/VideosReferences'; /** AnnotationsOverlayVideo - based on AnnotationsOverlay */ export class AnnotationsOverlayVideo extends Component { @@ -64,6 +65,7 @@ export class AnnotationsOverlayVideo extends Component { super(props); this.ref = React.createRef(); + VideosReferences.set(props.windowId, this); this.canvasOverlay = null; // An initial value for the updateCanvas method this.updateCanvas = () => {}; @@ -621,12 +623,8 @@ export class AnnotationsOverlayVideo extends Component { * Renders things */ render() { - const { annotations, searchAnnotations } = this.props; const { showProgress } = this.state; const circularProgress = (<CircularProgress style={{ left: '50%', position: 'absolute', top: '50%' }} />); - if (annotations.length === 0 && searchAnnotations.length === 0) { - return (<>{ showProgress && circularProgress }</>); - } return ( <> <canvas ref={this.ref} style={{ left: 0, position: 'absolute', top: 0 }} /> diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js index 6dd39e8be039efda095846e22dc77d4dd44b9125..d13ebbdafd40db0370f8fd8b840960ce6e03cdaf 100644 --- a/src/components/VideoViewer.js +++ b/src/components/VideoViewer.js @@ -5,7 +5,6 @@ import PropTypes from 'prop-types'; import AnnotationItem from '../lib/AnnotationItem'; import AnnotationsOverlayVideo from '../containers/AnnotationsOverlayVideo'; import WindowCanvasNavigationControlsVideo from '../containers/WindowCanvasNavigationControlsVideo'; -import { VideoViewersReferences } from '../plugins/VideoViewersReferences'; /** */ export class VideoViewer extends Component { @@ -13,8 +12,6 @@ export class VideoViewer extends Component { constructor(props) { super(props); this.videoRef = React.createRef(); - this.apiRef = React.createRef(); - VideoViewersReferences.set(props.windowId, this); this.state = { start: 0, @@ -159,7 +156,7 @@ export class VideoViewer extends Component { }; } return ( - <div className={classes.flexContainer} ref={this.apiRef}> + <div className={classes.flexContainer}> <div className={classes.flexFill}> { video && ( <> diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js index 07919ecc188d0f7173863d4b867b0fb508d3fea6..fa8fa33e19b679c59c13c1add43485de1135b761 100644 --- a/src/containers/VideoViewer.js +++ b/src/containers/VideoViewer.js @@ -48,12 +48,12 @@ const styles = () => ({ width: '100%', }, video: { - height: '100%', + height: 'fit-content', maxHeight: '100%', maxWidth: '100%', 'object-fit': 'contain', // 'scale-down', - 'object-position': 'left top', - width: '100%', + 'object-position': 'center', + width: 'fit-content', }, }); diff --git a/src/lib/CanvasOverlayVideo.js b/src/lib/CanvasOverlayVideo.js index 5c4e1af5860a4470c458e8804d1529f611b9c187..8d899d03eb9f40fba377cbe172d81807bf66c178 100755 --- a/src/lib/CanvasOverlayVideo.js +++ b/src/lib/CanvasOverlayVideo.js @@ -66,7 +66,6 @@ export default class CanvasOverlayVideo { ratio = 1; } } - return ratio; } diff --git a/src/plugins/VideoViewersReferences.js b/src/plugins/VideosReferences.js similarity index 78% rename from src/plugins/VideoViewersReferences.js rename to src/plugins/VideosReferences.js index 1d6c0cf3a33440898a6cf8a699f39c14a30839b7..db859ee35c7e3985d8570bcb7bf888c92381b512 100644 --- a/src/plugins/VideoViewersReferences.js +++ b/src/plugins/VideosReferences.js @@ -1,4 +1,4 @@ -export const VideoViewersReferences = { +export const VideosReferences = { /** */ get(windowId) { return this.refs[windowId];