You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.3 KiB
47 lines
1.3 KiB
import { useRef } from 'react'
|
|
|
|
import { VideoPlayer } from 'features/VideoPlayer'
|
|
import { Icon } from 'features/Icon'
|
|
|
|
import { readToken } from 'helpers'
|
|
|
|
import { isProduction } from 'config/env'
|
|
|
|
import { ScModal, ScCloseButton } from './styled'
|
|
|
|
interface VideoPropsType {
|
|
isOpenPopupVideo: boolean,
|
|
setIsOpenPopupVideo: (open: boolean) => void,
|
|
}
|
|
|
|
const urls = {
|
|
production: 'https://instat-stream-production.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
|
|
stage: 'https://instat-stream-staging.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
|
|
}
|
|
|
|
export const VideoHighlight = ({
|
|
isOpenPopupVideo,
|
|
setIsOpenPopupVideo,
|
|
} :VideoPropsType) => {
|
|
const videoRef = useRef<HTMLVideoElement>(null)
|
|
|
|
return (
|
|
<ScModal
|
|
isOpen={isOpenPopupVideo}
|
|
close={() => setIsOpenPopupVideo(false)}
|
|
withCloseButton={false}
|
|
>
|
|
<VideoPlayer
|
|
src={`${isProduction ? urls.production : urls.stage}?access_token=${readToken()}`}
|
|
ref={videoRef}
|
|
playing={Boolean(false)}
|
|
muted={false}
|
|
isFullscreen={false}
|
|
controls={Boolean(true)}
|
|
/>
|
|
<ScCloseButton onClick={() => setIsOpenPopupVideo(false)}>
|
|
<Icon refIcon='Close' styles={{ marginTop: '3px' }} />
|
|
</ScCloseButton>
|
|
</ScModal>
|
|
)
|
|
}
|
|
|