2022-04-29 18:19:08 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
|
|
|
import YouTube, { Options } from 'react-youtube';
|
|
|
|
import { YouTubePlayer } from 'youtube-player/dist/types';
|
|
|
|
import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api';
|
|
|
|
import { Grid, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
|
|
|
import { useFurnitureYoutubeWidget } from '../../../../hooks';
|
|
|
|
|
|
|
|
export const FurnitureYoutubeDisplayView: FC<{}> = props =>
|
|
|
|
{
|
|
|
|
const [ player, setPlayer ] = useState<any>(null);
|
2022-07-28 01:08:53 +02:00
|
|
|
const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget();
|
2022-04-29 18:19:08 +02:00
|
|
|
|
|
|
|
const onStateChange = useCallback((event: { target: YouTubePlayer; data: number }) =>
|
|
|
|
{
|
|
|
|
setPlayer(event.target);
|
|
|
|
|
|
|
|
if(objectId === -1) return;
|
|
|
|
|
|
|
|
switch(event.target.getPlayerState())
|
|
|
|
{
|
|
|
|
case -1:
|
|
|
|
case 1:
|
|
|
|
if(currentVideoState === 2)
|
|
|
|
{
|
|
|
|
//event.target.pauseVideo();
|
|
|
|
}
|
|
|
|
|
|
|
|
if(currentVideoState !== 1) play();
|
|
|
|
return;
|
|
|
|
case 2:
|
|
|
|
if(currentVideoState !== 2) pause();
|
|
|
|
}
|
|
|
|
}, [ objectId, currentVideoState, play, pause ]);
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if((currentVideoState === null) || !player) return;
|
|
|
|
|
|
|
|
if((currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PLAYING))
|
|
|
|
{
|
|
|
|
player.playVideo();
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if((currentVideoState === YoutubeVideoPlaybackStateEnum.PAUSED) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PAUSED))
|
|
|
|
{
|
|
|
|
player.pauseVideo();
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, [ currentVideoState, player ]);
|
|
|
|
|
|
|
|
if(objectId === -1) return null;
|
|
|
|
|
|
|
|
const youtubeOptions: Options = {
|
|
|
|
height: '375',
|
|
|
|
width: '500',
|
|
|
|
playerVars: {
|
|
|
|
autoplay: 1,
|
|
|
|
disablekb: 1,
|
|
|
|
controls: 0,
|
|
|
|
origin: window.origin,
|
|
|
|
modestbranding: 1,
|
|
|
|
start: videoStart,
|
|
|
|
end: videoEnd
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<NitroCardView className="youtube-tv-widget">
|
2022-07-28 01:08:53 +02:00
|
|
|
<NitroCardHeaderView headerText={ '' } onCloseClick={ onClose } />
|
2022-04-29 18:19:08 +02:00
|
|
|
<NitroCardContentView>
|
|
|
|
<div className="row w-100 h-100">
|
|
|
|
<div className="youtube-video-container col-9">
|
|
|
|
{ (videoId && videoId.length > 0) &&
|
|
|
|
<YouTube videoId={ videoId } opts={ youtubeOptions } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } containerClassName={ 'youtubeContainer' } />
|
|
|
|
}
|
|
|
|
{ (!videoId || videoId.length === 0) &&
|
|
|
|
<div className="empty-video w-100 h-100 justify-content-center align-items-center d-flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
<div className="playlist-container col-3">
|
|
|
|
<span className="playlist-controls justify-content-center d-flex">
|
|
|
|
<i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
|
|
|
|
<i className="icon icon-youtube-next cursor-pointer" onClick={ next } />
|
|
|
|
</span>
|
|
|
|
<div className="mb-1">{ LocalizeText('widget.furni.video_viewer.playlists') }</div>
|
|
|
|
<Grid columnCount={ 1 } className="playlist-grid">
|
|
|
|
{ playlists && playlists.map((entry, index) =>
|
|
|
|
{
|
|
|
|
return (
|
|
|
|
<LayoutGridItem key={ index } onClick={ event => selectVideo(entry.video) } itemActive={ (entry.video === selectedVideo) }>
|
|
|
|
<b>{ entry.title }</b> - { entry.description }
|
|
|
|
</LayoutGridItem>
|
|
|
|
)
|
|
|
|
}) }
|
|
|
|
</Grid>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</NitroCardContentView>
|
|
|
|
</NitroCardView>
|
|
|
|
)
|
|
|
|
}
|