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

Layout of VideoContent.tsx and PlaylistContent.tsx changed to maximize Video Player size while maintaining aspect ratio.

Browse Source 
Forced aspect ratio of videos to 16 / 9
This commit is contained in:
Qortal Dev 2024-07-31 14:18:26 -06:00
parent 2b6613349a
commit a0e8ce6cbf
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",
flexDirection: "column",
width: "100%",
maxWidth: "25vw",
maxHeight: "30.94vw",
}}
>
<CardContentContainerComment

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

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

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

@ -402,18 +402,29 @@ export const VideoContent = () => {
<VideoPlayerContainer
sx={{
width: "55vw",
aspectRatio: "16/9",
}}
>
{videoReference ? (
<VideoPlayer
name={videoReference?.name}
service={videoReference?.service}
identifier={videoReference?.identifier}
user={channelName}
jsonId={id}
poster={videoCover || ""}
ref={containerRef}
/>
<Box
sx={{
aspectRatio: "16/9",
}}
>
<VideoPlayer
name={videoReference?.name}
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%"} />
)}