nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix the Youtube playlist layout

Browse Source
This commit is contained in:
duckietm 2022-11-03 10:33:10 +00:00
parent 726e7d9ede
commit b9d39912bf
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
View File

@ -2,10 +2,15 @@ import { FC, useEffect, useState } from 'react';
import YouTube, { Options } from 'react-youtube'; import YouTube, { Options } from 'react-youtube';
import { YouTubePlayer } from 'youtube-player/dist/types'; import { YouTubePlayer } from 'youtube-player/dist/types';
import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api'; import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api';
import { Grid, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; import { AutoGrid, AutoGridProps, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { useFurnitureYoutubeWidget } from '../../../../hooks'; import { useFurnitureYoutubeWidget } from '../../../../hooks';
export const FurnitureYoutubeDisplayView: FC<{}> = props => interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
{
}
export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewProps =>
{ {
const [ player, setPlayer ] = useState<any>(null); const [ player, setPlayer ] = useState<any>(null);
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(); 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();
@ -86,16 +91,16 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
<i className="icon icon-youtube-next cursor-pointer" onClick={ next } /> <i className="icon icon-youtube-next cursor-pointer" onClick={ next } />
</span> </span>
<div className="mb-1">{ LocalizeText('widget.furni.video_viewer.playlists') }</div> <div className="mb-1">{ LocalizeText('widget.furni.video_viewer.playlists') }</div>
<Grid columnCount={ 1 } className="playlist-grid"> <AutoGrid columnCount={ 1 } columnMinWidth={ 80 } columnMinHeight={ 150 }>
{ playlists && playlists.map((entry, index) => { playlists && playlists.map((entry, index) =>
{ {
return ( return (
<LayoutGridItem key={ index } onClick={ event => selectVideo(entry.video) } itemActive={ (entry.video === selectedVideo) }> <LayoutGridItem key={ index } onClick={ event => selectVideo(entry.video) } itemActive={ (entry.video === selectedVideo) }>
<b>{ entry.title }</b> - { entry.description } <b>{ entry.title }</b>
</LayoutGridItem> </LayoutGridItem>
) )
}) } }) }
</Grid> </AutoGrid>
</div> </div>
</div> </div>
</NitroCardContentView> </NitroCardContentView>