Qortal/q-tube
3
0
Fork 1
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-15 19:55:52 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #33 from QortalSeth/main

Browse Source 
Layout of VideoContent.tsx and PlaylistContent.tsx changed to maximize Video Player size while maintaining aspect ratio.
This commit is contained in:
Qortal Dev 2024-07-31 14:45:27 -06:00 committed by GitHub
commit 95e132f641
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Playlists/Playlists.tsx
View File

@ -21,7 +21,7 @@ export const Playlists = ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
width: "100%", width: "100%",
maxWidth: "25vw", maxHeight: "30.94vw",
}} }}
> >
<CardContentContainerComment <CardContentContainerComment

38
src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
View File

@ -447,24 +447,34 @@ export const PlaylistContent = () => {
<Box <Box
sx={{ sx={{
display: "grid", display: "grid",
gridTemplateColumns: "55vw 30vw", gridTemplateColumns: "55vw 35vw",
width: "100vw", width: "100vw",
gap: "5vw", gap: "3vw",
}} }}
> >
{videoReference && ( {videoReference && (
<VideoPlayer <Box
name={videoReference?.name} sx={{
service={videoReference?.service} aspectRatio: "16/9",
identifier={videoReference?.identifier} }}
user={channelName} >
jsonId={id} <VideoPlayer
poster={videoCover || ""} name={videoReference?.name}
nextVideo={nextVideo} service={videoReference?.service}
onEnd={onEndVideo} identifier={videoReference?.identifier}
autoPlay={doAutoPlay} user={channelName}
ref={containerRef} jsonId={id}
/> poster={videoCover || ""}
nextVideo={nextVideo}
onEnd={onEndVideo}
autoPlay={doAutoPlay}
ref={containerRef}
videoStyles={{
videoContainer: { aspectRatio: "16 / 9" },
video: { aspectRatio: "16 / 9" },
}}
/>
</Box>
)} )}
{playlistData && ( {playlistData && (
<Playlists <Playlists

29
src/pages/ContentPages/VideoContent/VideoContent.tsx
View File

@ -402,18 +402,29 @@ export const VideoContent = () => {
<VideoPlayerContainer <VideoPlayerContainer
sx={{ sx={{
width: "55vw", width: "55vw",
aspectRatio: "16/9",
}} }}
> >
{videoReference ? ( {videoReference ? (
<VideoPlayer <Box
name={videoReference?.name} sx={{
service={videoReference?.service} aspectRatio: "16/9",
identifier={videoReference?.identifier} }}
user={channelName} >
jsonId={id} <VideoPlayer
poster={videoCover || ""} name={videoReference?.name}
ref={containerRef} service={videoReference?.service}
/> identifier={videoReference?.identifier}
user={channelName}
jsonId={id}
poster={videoCover || ""}
ref={containerRef}
videoStyles={{
videoContainer: { aspectRatio: "16 / 9" },
video: { aspectRatio: "16 / 9" },
}}
/>
</Box>
) : ( ) : (
<img src={DeletedVideo} width={"100%"} height={"100%"} /> <img src={DeletedVideo} width={"100%"} height={"100%"} />
)} )}