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 #64 from QortalSeth/main

Browse Source 
Bugfixes on PlaylistContent.tsx
This commit is contained in:
Qortal Dev 2025-01-14 16:41:11 -07:00 committed by GitHub
commit d9f04030d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 86 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,38 @@
import React from "react";
import { smallScreenSizeString } from "../../constants/Misc.ts";
import { CardContentContainerComment } from "../common/Comments/Comments-styles";
import {
CrowdfundSubTitle,
CrowdfundSubTitleRow,
} from "../Publish/PublishVideo/PublishVideo-styles.tsx";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useNavigate } from "react-router-dom";
Box,
SxProps,
Theme,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import React from "react";
import { CardContentContainerComment } from "../common/Comments/Comments-styles";
interface PlaylistsProps {
playlistData;
currentVideoIdentifier;
onClick;
sx?: SxProps<Theme>;
}
export const Playlists = ({
playlistData,
currentVideoIdentifier,
onClick,
}) => {
sx,
}: PlaylistsProps) => {
const theme = useTheme();
const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
const videoPlayerHeight = "33.75vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
const PlaylistsHeight = "36vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
return (
<Box
sx={{
width: "100%",
height: isScreenSmall ? "200px" : PlaylistsHeight,
...sx,
display: "flex",
flexDirection: "column",
width: "100%",
height: isScreenSmall ? "200px" : videoPlayerHeight,
}}
>
<CardContentContainerComment

2
src/components/ResponsiveImage.tsx
View File

@ -28,7 +28,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
}, endTimeMilliSeconds);
};
useEffect(() => endLoading(30), [endLoading]);
useEffect(() => endLoading(60), [endLoading]);
return (
<Box

8
src/components/common/VideoPlayer/Components/VideoControls-State.ts
View File

@ -30,6 +30,7 @@ export const useVideoControlsState = (
videoObjectFit,
canPlay,
containerRef,
alwaysShowControls,
} = videoPlayerState;
const { identifier, autoPlay } = props;
@ -218,6 +219,9 @@ export const useVideoControlsState = (
videoObjectFit.value === "contain" ? "fill" : "contain";
};
const toggleAlwaysShowControls = () => {
alwaysShowControls.value = !alwaysShowControls.value;
};
const keyboardShortcuts = (
e: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>
) => {
@ -228,7 +232,9 @@ export const useVideoControlsState = (
case "o":
toggleObjectFit();
break;
case "c":
toggleAlwaysShowControls();
break;
case Key.Add:
increaseSpeed(false);
break;

8
src/components/common/VideoPlayer/VideoPlayer-State.ts
View File

@ -16,6 +16,7 @@ import { useDispatch, useSelector } from "react-redux";
import { smallVideoSize } from "../../../constants/Misc.ts";
import { setVideoPlaying } from "../../../state/features/globalSlice.ts";
import {
setAlwaysShowControls,
setIsMuted,
setMutedVolumeSetting,
setReduxPlaybackRate,
@ -44,6 +45,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
const videoObjectFit = useSignal<StretchVideoType>(
persistSelector.stretchVideoSetting
);
const alwaysShowControls = useSignal<boolean>(
persistSelector.alwaysShowControls
);
useSignalEffect(() => {
dispatch(setIsMuted(isMuted.value));
@ -63,6 +67,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
useSignalEffect(() => {
dispatch(setStretchVideoSetting(videoObjectFit.value));
});
useSignalEffect(() => {
dispatch(setAlwaysShowControls(alwaysShowControls.value));
});
const anchorEl = useSignal(null);
@ -312,5 +319,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
anchorEl,
videoObjectFit,
isScreenSmall,
alwaysShowControls,
};
};

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

@ -56,11 +56,13 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
videoObjectFit,
showControlsFullScreen,
isFullscreen,
alwaysShowControls,
} = contextData;
const showControls =
!isFullscreen.value ||
(isFullscreen.value && showControlsFullScreen.value);
(isFullscreen.value && showControlsFullScreen.value) ||
alwaysShowControls.value;
const idleTime = 5000; // Time in milliseconds
useIdleTimeout({
@ -76,6 +78,10 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
onKeyDown={keyboardShortcuts}
style={{
padding: from === "create" ? "8px" : 0,
cursor:
!showControlsFullScreen.value && isFullscreen.value
? "none"
: "auto",
...videoStyles?.videoContainer,
}}
onMouseEnter={e => {
@ -105,7 +111,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
...videoStyles?.video,
objectFit: videoObjectFit.value,
height:
isFullscreen.value && showControlsFullScreen.value
isFullscreen.value && showControls
? "calc(100vh - 40px)"
: "100%",
}}

4
src/constants/Categories.ts
View File

@ -34,11 +34,13 @@ export const categories = [
{ id: 19, name: "Nature & Environment" },
{ id: 20, name: "Business & Finance" },
{ id: 21, name: "Personal Development" },
{ id: 22, name: "Other" },
{ id: 22, name: "Religion" },
{ id: 23, name: "History" },
{ id: 24, name: "Anime" },
{ id: 25, name: "Cartoons" },
{ id: 26, name: "Qortal" },
{ id: 27, name: "Paranormal" },
{ id: 28, name: "Spirituality" },
{ id: 99, name: "Other" },
].sort(sortCategory);

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

@ -1,15 +1,11 @@
import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
import { Box, SxProps, Theme, Typography, useMediaQuery } from "@mui/material";
import React from "react";
import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx";
import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx";
import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx";
import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
import { Playlists } from "../../../components/Playlists/Playlists.tsx";
import {
fontSizeSmall,
minFileSize,
smallScreenSizeString,
} from "../../../constants/Misc.ts";
import { fontSizeSmall, minFileSize } from "../../../constants/Misc.ts";
import { formatBytes } from "../../../utils/numberFunctions.ts";
import { formatDate } from "../../../utils/time.ts";
import { VideoActionsBar } from "../VideoContent/VideoActionsBar.tsx";
@ -46,7 +42,11 @@ export const PlaylistContent = () => {
loadingSuperLikes,
} = usePlaylistContentState();
const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
const isScreenSmall = !useMediaQuery(`(min-width:950px)`);
const playlistsSX: SxProps<Theme> = isScreenSmall
? { width: "100%", marginTop: "10px" }
: { width: "35%", position: "absolute", right: "20px" };
return videoData && videoData?.videos?.length === 0 ? (
<Box
@ -70,41 +70,36 @@ export const PlaylistContent = () => {
>
<VideoPlayerContainer
sx={{
width: "100%",
display: "grid",
gridTemplateColumns: isScreenSmall ? "1fr" : "60vw auto",
gap: "20px",
width: isScreenSmall ? "100%" : "60%",
alignSelf: "start",
paddingRight: isScreenSmall ? "10px" : "0px",
marginBottom: "20px",
}}
>
{videoReference && (
<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={{
video: { 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>
duration={videoData?.duration}
/>
)}
{playlistData && (
<Playlists
playlistData={playlistData}
currentVideoIdentifier={videoData?.id}
onClick={getVideoData}
sx={playlistsSX}
/>
)}
</VideoPlayerContainer>
@ -179,8 +174,8 @@ export const PlaylistContent = () => {
cursor: !descriptionHeight
? "default"
: isExpandedDescription
? "default"
: "pointer",
? "default"
: "pointer",
}}
className={
!descriptionHeight ? "" : isExpandedDescription ? "" : "hover-click"
@ -208,8 +203,8 @@ export const PlaylistContent = () => {
height: !descriptionHeight
? "auto"
: isExpandedDescription
? "auto"
: `${descriptionHeight}px`,
? "auto"
: `${descriptionHeight}px`,
overflow: "hidden",
}}
>

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

@ -8,12 +8,9 @@ import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.t
import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
import {
fontSizeSmall,
largeScreenSizeString,
minFileSize,
smallScreenSizeString,
smallVideoSize,
} from "../../../constants/Misc.ts";
import { useIsMobile } from "../../../hooks/useIsMobile.ts";
import { formatBytes } from "../../../utils/numberFunctions.ts";
import { formatDate } from "../../../utils/time.ts";
import { VideoActionsBar } from "./VideoActionsBar.tsx";
@ -25,7 +22,6 @@ import {
VideoPlayerContainer,
VideoTitle,
} from "./VideoContent-styles.tsx";
import { useSignal } from "@preact/signals-react";
export const VideoContent = () => {
const {

2
src/pages/Home/Components/VideoList.tsx
View File

@ -1,7 +1,7 @@
import BlockIcon from "@mui/icons-material/Block";
import EditIcon from "@mui/icons-material/Edit";
import { Avatar, Box, Tooltip, Typography, useTheme } from "@mui/material";
import React, { useMemo, useState } from "react";
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx";

6
src/state/features/persistSlice.ts
View File

@ -21,6 +21,7 @@ interface settingsState {
volume: number;
mutedVolume: number;
isMuted: boolean;
alwaysShowControls: boolean;
}
const initialState: settingsState = {
@ -34,6 +35,7 @@ const initialState: settingsState = {
volume: 0.5,
mutedVolume: 0,
isMuted: false,
alwaysShowControls: false,
};
export const persistSlice = createSlice({
@ -87,6 +89,9 @@ export const persistSlice = createSlice({
setIsMuted: (state, action: PayloadAction<boolean>) => {
state.isMuted = action.payload;
},
setAlwaysShowControls: (state, action: PayloadAction<boolean>) => {
state.alwaysShowControls = action.payload;
},
},
});
@ -101,6 +106,7 @@ export const {
setVolumeSetting,
setMutedVolumeSetting,
setIsMuted,
setAlwaysShowControls,
} = persistSlice.actions;
export default persistSlice.reducer;