Qortal/q-tube
3
0
Fork 1
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-14 11:15:52 +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", display: "flex",
flexDirection: "column", flexDirection: "column",
width: "100%", width: "100%",
maxWidth: "25vw", maxHeight: "30.94vw",
}} }}
> >
<CardContentContainerComment <CardContentContainerComment

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

@ -447,12 +447,17 @@ 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 && (
<Box
sx={{
aspectRatio: "16/9",
}}
>
<VideoPlayer <VideoPlayer
name={videoReference?.name} name={videoReference?.name}
service={videoReference?.service} service={videoReference?.service}
@ -464,7 +469,12 @@ export const PlaylistContent = () => {
onEnd={onEndVideo} onEnd={onEndVideo}
autoPlay={doAutoPlay} autoPlay={doAutoPlay}
ref={containerRef} ref={containerRef}
videoStyles={{
videoContainer: { aspectRatio: "16 / 9" },
video: { aspectRatio: "16 / 9" },
}}
/> />
</Box>
)} )}
{playlistData && ( {playlistData && (
<Playlists <Playlists

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

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