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

Merge pull request #32 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 13:41:38 -06:00 committed by GitHub
commit a3a115674e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 72 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,6 @@ export const Playlists = ({
flexDirection: "column",
width: "100%",
maxWidth: "25vw",
maxHeight: "70vh",
}}
>
<CardContentContainerComment

13
src/components/common/VideoPlayer/VideoPlayer-styles.ts
View File

@ -11,16 +11,15 @@ export const VideoContainer = styled(Box)(({ theme }) => ({
height: "100%",
margin: 0,
padding: 0,
maxHeight: "70vh",
"&:focus": { outline: "none" },
}));
export const VideoElement = styled("video")`
width: 100%;
background: rgb(33, 33, 33);
max-height: 70vh;
`;
export const VideoElement = styled("video")(({ theme }) => ({
width: "100%",
background: "rgb(33, 33, 33)",
}));
//1075 x 604
export const ControlsContainer = styled(Box)`
position: absolute;
display: flex;

17
src/components/common/VideoPlayer/VideoPlayer.tsx
View File

@ -36,6 +36,11 @@ import {
import CSS from "csstype";
import { setReduxPlaybackRate } from "../../../state/features/persistSlice.ts";
export interface VideoStyles {
videoContainer?: CSS.Properties;
video?: CSS.Properties;
controls?: CSS.Properties;
}
interface VideoPlayerProps {
src?: string;
poster?: string;
@ -44,7 +49,7 @@ interface VideoPlayerProps {
service?: string;
autoplay?: boolean;
from?: string | null;
customStyle?: any;
videoStyles?: VideoStyles;
user?: string;
jsonId?: string;
nextVideo?: any;
@ -66,7 +71,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
service,
autoplay = true,
from = null,
customStyle = {},
videoStyles = {},
user = "",
jsonId = "",
nextVideo,
@ -701,7 +706,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
onKeyDown={keyboardShortcutsDown}
style={{
padding: from === "create" ? "8px" : 0,
...customStyle,
...videoStyles?.videoContainer,
}}
ref={containerRef}
>
@ -721,6 +726,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
display: "flex",
flexDirection: "column",
gap: "10px",
height: "100%",
}}
>
<CircularProgress color="secondary" />
@ -818,11 +824,10 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
style={
startPlay
? {
...customStyle,
...videoStyles?.video,
objectFit: persistSelector.stretchVideoSetting,
height: "calc(100% - 80px)",
}
: { ...customStyle, height: "100%" }
: { height: "100%", ...videoStyles }
}
/>

46
src/components/layout/Navbar/Navbar-styles.tsx
View File

@ -14,26 +14,22 @@ export const CustomAppBar = styled(AppBar)(({ theme }) => ({
borderBottom: `1px solid ${theme.palette.primary.light}`,
backgroundColor: theme.palette.background.default,
[theme.breakpoints.only("xs")]: {
gap: "15px"
gap: "15px",
},
height: '55px'
height: "40px",
}));
export const LogoContainer = styled("div")({
cursor: 'pointer',
height: '100%',
display: 'flex',
alignItems: 'center'
cursor: "pointer",
height: "100%",
display: "flex",
alignItems: "center",
});
export const CustomTitle = styled(Typography)({
fontWeight: 600,
color: "#000000"
color: "#000000",
});
export const AuthenticateButton = styled(Button)(({ theme }) => ({
display: "flex",
flexDirection: "row",
@ -50,8 +46,8 @@ export const AuthenticateButton = styled(Button)(({ theme }) => ({
cursor: "pointer",
boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
backgroundColor: theme.palette.secondary.dark,
filter: "brightness(1.1)"
}
filter: "brightness(1.1)",
},
}));
export const AvatarContainer = styled(Box)({
@ -61,9 +57,9 @@ export const AvatarContainer = styled(Box)({
cursor: "pointer",
"& #expand-icon": {
transition: "all 0.3s ease-in-out",
filter: "brightness(0.7)"
}
}
filter: "brightness(0.7)",
},
},
});
export const DropdownContainer = styled(Box)(({ theme }) => ({
@ -76,22 +72,22 @@ export const DropdownContainer = styled(Box)(({ theme }) => ({
"&:hover": {
cursor: "pointer",
filter:
theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)"
}
theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)",
},
}));
export const DropdownText = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
color: theme.palette.text.primary,
userSelect: "none"
userSelect: "none",
}));
export const NavbarName = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "18px",
color: theme.palette.text.primary,
margin: "0 10px"
margin: "0 10px",
}));
export const ThemeSelectRow = styled(Box)({
@ -99,7 +95,7 @@ export const ThemeSelectRow = styled(Box)({
alignItems: "center",
gap: "5px",
flexBasis: 0,
height: '100%'
height: "100%",
});
export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
@ -109,8 +105,8 @@ export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
filter:
theme.palette.mode === "dark"
? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
}
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
},
}));
export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
@ -120,6 +116,6 @@ export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
filter:
theme.palette.mode === "dark"
? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
}
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
},
}));

42
src/components/layout/Navbar/Navbar.tsx
View File

@ -65,7 +65,7 @@ const NavBar: React.FC<Props> = ({
const [openUserDropdown, setOpenUserDropdown] = useState<boolean>(false);
const [isOpenBlockedNamesModal, setIsOpenBlockedNamesModal] =
useState<boolean>(false);
const [anchorElNotification, setAnchorElNotification] =
React.useState<HTMLButtonElement | null>(null);
const filterValue = useSelector(
@ -374,15 +374,15 @@ const NavBar: React.FC<Props> = ({
{!userAvatar ? (
<AccountCircleSVG
color={theme.palette.text.primary}
width="32"
height="32"
width="30"
height="30"
/>
) : (
<img
src={userAvatar}
alt="User Avatar"
width="32"
height="32"
width="30"
height="30"
style={{
borderRadius: "50%",
}}
@ -426,22 +426,22 @@ const NavBar: React.FC<Props> = ({
}}
>
{!userAvatar ? (
<AccountCircleSVG
color={theme.palette.text.primary}
width="32"
height="32"
/>
) : (
<img
src={userAvatar}
alt="User Avatar"
width="32"
height="32"
style={{
borderRadius: "50%",
}}
/>
)}
<AccountCircleSVG
color={theme.palette.text.primary}
width="28"
height="28"
/>
) : (
<img
src={userAvatar}
alt="User Avatar"
width="28"
height="28"
style={{
borderRadius: "50%",
}}
/>
)}
<DropdownText>My Channel</DropdownText>
</DropdownContainer>
<DropdownContainer

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

@ -12,6 +12,7 @@ import { Avatar, Box, Typography, useTheme } from "@mui/material";
import {
refType,
VideoPlayer,
VideoStyles,
} from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
import { RootState } from "../../../state/store.ts";
import { addToHashMap } from "../../../state/features/videoSlice.ts";
@ -199,6 +200,7 @@ export const PlaylistContent = () => {
}
}
} catch (error) {
console.log(error);
} finally {
dispatch(setIsLoadingGlobal(false));
}
@ -261,7 +263,7 @@ export const PlaylistContent = () => {
const responseDataSearchVid = await response.json();
if (responseDataSearchVid?.length > 0) {
let resourceData2 = responseDataSearchVid[0];
const resourceData2 = responseDataSearchVid[0];
videos.push(resourceData2);
}
}
@ -282,6 +284,7 @@ export const PlaylistContent = () => {
}
}
} catch (error) {
console.log(error);
} finally {
dispatch(setIsLoadingGlobal(false));
}
@ -387,7 +390,9 @@ export const PlaylistContent = () => {
},
];
}
} catch (error) {}
} catch (error) {
console.log(error);
}
}
}
setSuperlikelist(comments);
@ -417,7 +422,7 @@ export const PlaylistContent = () => {
display: "flex",
alignItems: "center",
flexDirection: "column",
padding: "20px 10px",
padding: "0px 10px",
}}
onClick={focusVideo}
>
@ -442,8 +447,9 @@ export const PlaylistContent = () => {
<Box
sx={{
display: "grid",
gridTemplateColumns: "70vw 30vw",
gridTemplateColumns: "55vw 30vw",
width: "100vw",
gap: "5vw",
}}
>
{videoReference && (
@ -457,7 +463,6 @@ export const PlaylistContent = () => {
nextVideo={nextVideo}
onEnd={onEndVideo}
autoPlay={doAutoPlay}
customStyle={{ aspectRatio: "16/9" }}
ref={containerRef}
/>
)}
@ -584,7 +589,7 @@ export const PlaylistContent = () => {
justifyContent: "space-between",
alignItems: "center",
width: "100%",
marginTop: "20px",
marginTop: "10px",
gap: "10px",
}}
>

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

@ -395,14 +395,13 @@ export const VideoContent = () => {
display: "flex",
alignItems: "center",
flexDirection: "column",
padding: "20px 10px",
padding: "0px 10px",
}}
onClick={focusVideo}
>
<VideoPlayerContainer
sx={{
marginBottom: "30px",
width: "70vw",
width: "55vw",
}}
>
{videoReference ? (
@ -413,7 +412,6 @@ export const VideoContent = () => {
user={channelName}
jsonId={id}
poster={videoCover || ""}
customStyle={{ aspectRatio: "16/9" }}
ref={containerRef}
/>
) : (