From d99701084c380730d410f94ea5de091d9391df52 Mon Sep 17 00:00:00 2001 From: IrohDW Date: Wed, 8 Jan 2025 10:34:35 -0700 Subject: [PATCH 1/3] Mouse cursor doesn't show when video is fullscreen and the mouse is idle for more than 5 seconds. Added hotkey "c" that toggles always showing controls when fullscreen, even if idle. Removed duplicate Other category, added Paranormal and Spirituality categories due to community requests for it. --- .../VideoPlayer/Components/VideoControls-State.ts | 8 +++++++- src/components/common/VideoPlayer/VideoPlayer-State.ts | 8 ++++++++ src/components/common/VideoPlayer/VideoPlayer.tsx | 10 ++++++++-- src/constants/Categories.ts | 3 ++- src/state/features/persistSlice.ts | 6 ++++++ 5 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts index 14c280c..838c079 100644 --- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts +++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts @@ -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 ) => { @@ -228,7 +232,9 @@ export const useVideoControlsState = ( case "o": toggleObjectFit(); break; - + case "c": + toggleAlwaysShowControls(); + break; case Key.Add: increaseSpeed(false); break; diff --git a/src/components/common/VideoPlayer/VideoPlayer-State.ts b/src/components/common/VideoPlayer/VideoPlayer-State.ts index a41a87d..4d4a762 100644 --- a/src/components/common/VideoPlayer/VideoPlayer-State.ts +++ b/src/components/common/VideoPlayer/VideoPlayer-State.ts @@ -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( persistSelector.stretchVideoSetting ); + const alwaysShowControls = useSignal( + 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, }; }; diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx index 9e25487..d104d7c 100644 --- a/src/components/common/VideoPlayer/VideoPlayer.tsx +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -56,11 +56,13 @@ export const VideoPlayer = forwardRef( 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( 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( ...videoStyles?.video, objectFit: videoObjectFit.value, height: - isFullscreen.value && showControlsFullScreen.value + isFullscreen.value && showControls ? "calc(100vh - 40px)" : "100%", }} diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts index 63ac90e..0c76bc3 100644 --- a/src/constants/Categories.ts +++ b/src/constants/Categories.ts @@ -34,11 +34,12 @@ export const categories = [ { id: 19, name: "Nature & Environment" }, { id: 20, name: "Business & Finance" }, { id: 21, name: "Personal Development" }, - { id: 22, name: "Other" }, { 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); diff --git a/src/state/features/persistSlice.ts b/src/state/features/persistSlice.ts index c2e2c6f..9fb89e4 100644 --- a/src/state/features/persistSlice.ts +++ b/src/state/features/persistSlice.ts @@ -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) => { state.isMuted = action.payload; }, + setAlwaysShowControls: (state, action: PayloadAction) => { + state.alwaysShowControls = action.payload; + }, }, }); @@ -101,6 +106,7 @@ export const { setVolumeSetting, setMutedVolumeSetting, setIsMuted, + setAlwaysShowControls, } = persistSlice.actions; export default persistSlice.reducer; From 4ef05dc47887db84984bfc25a9f1f6e262361aef Mon Sep 17 00:00:00 2001 From: IrohDW Date: Wed, 8 Jan 2025 10:56:23 -0700 Subject: [PATCH 2/3] Mouse cursor doesn't show when video is fullscreen and the mouse is idle for more than 5 seconds. Added hotkey "c" that toggles always showing controls when fullscreen, even if idle. Removed duplicate Other category, added Paranormal, Religion and Spirituality categories due to community requests for it. --- src/constants/Categories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts index 0c76bc3..23a7ed4 100644 --- a/src/constants/Categories.ts +++ b/src/constants/Categories.ts @@ -34,6 +34,7 @@ export const categories = [ { id: 19, name: "Nature & Environment" }, { id: 20, name: "Business & Finance" }, { id: 21, name: "Personal Development" }, + { id: 22, name: "Religion" }, { id: 23, name: "History" }, { id: 24, name: "Anime" }, { id: 25, name: "Cartoons" }, From 71151e166b14ebd6b2dd2ea0e8f629bef6a306bb Mon Sep 17 00:00:00 2001 From: IrohDW Date: Tue, 14 Jan 2025 16:40:32 -0700 Subject: [PATCH 3/3] Bugfixes on PlaylistContent.tsx VideoPlayer.tsx progress bar now loads properly on PlaylistContent.tsx Video duration on PlaylistContent.tsx now loads properly Time until deleted video thumbnail is shown has been doubled from 30 seconds to 60 --- src/components/Playlists/Playlists.tsx | 33 +++++---- src/components/ResponsiveImage.tsx | 2 +- .../PlaylistContent/PlaylistContent.tsx | 67 +++++++++---------- .../VideoContent/VideoContent.tsx | 4 -- src/pages/Home/Components/VideoList.tsx | 2 +- 5 files changed, 54 insertions(+), 54 deletions(-) diff --git a/src/components/Playlists/Playlists.tsx b/src/components/Playlists/Playlists.tsx index d514927..853abab 100644 --- a/src/components/Playlists/Playlists.tsx +++ b/src/components/Playlists/Playlists.tsx @@ -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; +} 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 ( = ({ }, endTimeMilliSeconds); }; - useEffect(() => endLoading(30), [endLoading]); + useEffect(() => endLoading(60), [endLoading]); return ( { loadingSuperLikes, } = usePlaylistContentState(); - const isScreenSmall = !useMediaQuery(`(min-width:700px)`); + const isScreenSmall = !useMediaQuery(`(min-width:950px)`); + + const playlistsSX: SxProps = isScreenSmall + ? { width: "100%", marginTop: "10px" } + : { width: "35%", position: "absolute", right: "20px" }; return videoData && videoData?.videos?.length === 0 ? ( { > {videoReference && ( - - - + duration={videoData?.duration} + /> )} {playlistData && ( )} @@ -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", }} > diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx index 626e43a..2562bc2 100644 --- a/src/pages/ContentPages/VideoContent/VideoContent.tsx +++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx @@ -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 { diff --git a/src/pages/Home/Components/VideoList.tsx b/src/pages/Home/Components/VideoList.tsx index 5e34386..131d530 100644 --- a/src/pages/Home/Components/VideoList.tsx +++ b/src/pages/Home/Components/VideoList.tsx @@ -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";