Qortal
/
q-tube
mirror of https://github.com/Qortal/q-tube
3
0
Fork 1
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #32 from QortalSeth/main 

Layout of VideoContent.tsx and PlaylistContent.tsx changed to maximize Video Player size while maintaining aspect ratio.
pull/33/head^2
Qortal Dev 2 months ago committed by GitHub
parent
ba515dc920 2b6613349a
commit
a3a115674e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 72 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/Playlists/Playlists.tsx
  2. 13
      src/components/common/VideoPlayer/VideoPlayer-styles.ts
  3. 17
      src/components/common/VideoPlayer/VideoPlayer.tsx
  4. 46
      src/components/layout/Navbar/Navbar-styles.tsx
  5. 42
      src/components/layout/Navbar/Navbar.tsx
  6. 17
      src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
  7. 6
      src/pages/ContentPages/VideoContent/VideoContent.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save