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 ( { + 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..23a7ed4 100644 --- a/src/constants/Categories.ts +++ b/src/constants/Categories.ts @@ -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); diff --git a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx index af587bd..e8afbf0 100644 --- a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx +++ b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx @@ -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 = 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"; 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;