import { makeStyles } from '@material-ui/core/styles' ; import { assert } from '@models/utils' ; import React , { useEffect , useRef } from 'react' ; import { ContentProps } from './Content' ; const useStyles = makeStyles ( { video : { width : '100%' , height : '100%' , } , } ) ; export const PlaybackScreenContent = ( props ) => { assert ( props . content . type === 'playbackScreen' || props . content . type === 'playbackCamera' ) ; const classes = useStyles ( ) ; const ref = useRef < HTMLVideoElement > ( null ) ; function setTrack ( ) { if ( ref . current ) { ref . current . src = props . content . url ; ref . current . autoplay = true ; } } useEffect ( ( ) => { setTrack ( ) ; } , [ ref . current ] ) ; return < video className = { classes . video } ref = { ref } / > ; } ;