import React from 'react'
import { MobilePlayerContext, IOSPlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
import { mapIphoneModel } from "Player/mobile/utils";
interface Props {
videoURL: string;
userDevice: string;
}
const appleIcon = ``
function ReplayWindow({ videoURL, userDevice }: Props) {
const playerContext = React.useContext(MobilePlayerContext);
const videoRef = React.useRef();
const time = playerContext.store.get().time
React.useEffect(() => {
if (videoRef.current) {
const timeSecs = time / 1000
if (videoRef.current.duration >= timeSecs) {
videoRef.current.currentTime = timeSecs
}
}
}, [time])
React.useEffect(() => {
if (playerContext.player.screen.document && videoURL) {
playerContext.player.pause()
const { svg, styles } = mapIphoneModel(userDevice)
const host = document.createElement('div')
const videoEl = document.createElement('video')
const sourceEl = document.createElement('source')
const shell = document.createElement('div')
const icon = document.createElement('div')
const videoContainer = document.createElement('div')
videoContainer.style.borderRadius = '10px'
videoContainer.style.overflow = 'hidden'
videoContainer.style.margin = styles.margin
videoContainer.style.display = 'none'
videoContainer.style.width = styles.screen.width + 'px'
videoContainer.style.height = styles.screen.height + 'px'
videoContainer.appendChild(videoEl)
shell.innerHTML = svg
videoEl.width = styles.screen.width
videoEl.height = styles.screen.height
videoEl.style.backgroundColor = '#333'
Object.assign(icon.style, {
backgroundColor: '#333',
borderRadius: '10px',
width: styles.screen.width + 'px',
height: styles.screen.height + 'px',
margin: styles.margin,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
})
const spacer = document.createElement('div')
spacer.style.width = '60px'
spacer.style.height = '60px'
const loadingBar = document.createElement('div')
Object.assign(loadingBar.style, {
width: styles.screen.width/2 + 'px',
height: '6px',
borderRadius: '3px',
backgroundColor: 'white',
})
icon.innerHTML = appleIcon
icon.appendChild(spacer)
icon.appendChild(loadingBar)
shell.style.position = 'absolute'
shell.style.top = '0'
sourceEl.setAttribute('src', videoURL)
sourceEl.setAttribute('type', 'video/mp4')
host.appendChild(videoContainer)
host.appendChild(shell)
host.appendChild(icon)
videoEl.appendChild(sourceEl)
videoEl.addEventListener("loadeddata", () => {
videoContainer.style.display = 'block'
icon.style.display = 'none'
host.removeChild(icon)
console.log('loaded')
playerContext.player.play()
})
videoRef.current = videoEl
playerContext.player.injectPlayer(host)
playerContext.player.customScale(styles.shell.width, styles.shell.height)
playerContext.player.updateDimensions({
width: styles.screen.width,
height: styles.screen.height,
})
playerContext.player.updateOverlayStyle({
margin: styles.margin,
width: styles.screen.width + 'px',
height: styles.screen.height + 'px',
})
}
}, [videoURL, playerContext.player.screen.document])
return (
)
}
export default observer(ReplayWindow);