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
982 B
47 lines
982 B
import YouTube from 'react-youtube'
|
|
|
|
import { PlayerWrapper } from '../../styled'
|
|
import { useVideoPlayer, Props } from '../../hooks'
|
|
|
|
export const YoutubePlayer = (props: Props) => {
|
|
const { profile } = props
|
|
|
|
const {
|
|
onMouseMove,
|
|
onPlayerClick,
|
|
onTouchEnd,
|
|
onTouchStart,
|
|
playing,
|
|
sizeOptions: {
|
|
height,
|
|
width,
|
|
},
|
|
wrapperRef,
|
|
} = useVideoPlayer(props)
|
|
|
|
const youtube_link = profile?.youtube_link || ''
|
|
const key = youtube_link.slice(32, youtube_link.length)
|
|
|
|
return (
|
|
<PlayerWrapper
|
|
ref={wrapperRef}
|
|
playing={playing}
|
|
onClick={onPlayerClick}
|
|
onMouseMove={onMouseMove}
|
|
onTouchStart={onTouchStart}
|
|
onTouchEnd={onTouchEnd}
|
|
>
|
|
<YouTube
|
|
videoId={key}
|
|
opts={{
|
|
height: String(height),
|
|
playerVars: {
|
|
autoplay: 1,
|
|
modestbranding: 1,
|
|
},
|
|
width: String(width),
|
|
}}
|
|
/>
|
|
</PlayerWrapper>
|
|
)
|
|
}
|
|
|