From d4f5c7a8ee1abe346b323894d2683ee79e5fcb4f Mon Sep 17 00:00:00 2001 From: IrohDW Date: Thu, 2 Jan 2025 16:11:45 -0700 Subject: [PATCH] VideoPlayer Bugfixes Videoplayer doesn't set fill ObjectFit when fullscreen. Added ObjectFit button Volume slider doesn't clip into video time label Volume and Progress sliders have a smaller click range so they don't override other video buttons. Usernames in the videolist component now show ellipses when they overflow Hyperlink color throughout the app changed so they are easier to see --- .../Components/MobileControlsBar.tsx | 6 +- .../Components/VideoControls-State.ts | 9 +- .../VideoPlayer/Components/VideoControls.tsx | 31 +++++- .../Components/VideoControlsBar.tsx | 4 +- .../common/VideoPlayer/VideoPlayer.tsx | 2 +- src/index.css | 2 +- .../VideoContent/VideoContent.tsx | 13 ++- .../Home/Components/VideoList-styles.tsx | 1 + src/styles/theme.tsx | 99 ++++++++++--------- 9 files changed, 98 insertions(+), 69 deletions(-) diff --git a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx index 6376afc..7a733b2 100644 --- a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx +++ b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx @@ -3,6 +3,7 @@ import { Box, IconButton, Menu, MenuItem } from "@mui/material"; import { useVideoContext } from "./VideoContext.ts"; import { FullscreenButton, + ObjectFitButton, PictureInPictureButton, PlaybackRate, PlayButton, @@ -55,7 +56,10 @@ export const MobileControlsBar = () => { > - + + + + diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts index a81d637..14c280c 100644 --- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts +++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts @@ -209,11 +209,11 @@ export const useVideoControlsState = ( } }; - const setStretchVideoSetting = (value: "contain" | "fill") => { + const setObjectFit = (value: "contain" | "fill") => { videoObjectFit.value = value; }; - const toggleStretchVideoSetting = () => { + const toggleObjectFit = () => { videoObjectFit.value = videoObjectFit.value === "contain" ? "fill" : "contain"; }; @@ -226,7 +226,7 @@ export const useVideoControlsState = ( switch (e.key) { case "o": - toggleStretchVideoSetting(); + toggleObjectFit(); break; case Key.Add: @@ -364,6 +364,7 @@ export const useVideoControlsState = ( showControlsFullScreen, setPlaying, isFullscreen, - setStretchVideoSetting, + toggleObjectFit, + setObjectFit, }; }; diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/src/components/common/VideoPlayer/Components/VideoControls.tsx index 9702a1f..32d1f83 100644 --- a/src/components/common/VideoPlayer/Components/VideoControls.tsx +++ b/src/components/common/VideoPlayer/Components/VideoControls.tsx @@ -3,6 +3,7 @@ import { fontSizeExSmall, fontSizeSmall } from "../../../../constants/Misc.ts"; import { CustomFontTooltip } from "../../../../utils/CustomFontTooltip.tsx"; import { formatTime } from "../../../../utils/numberFunctions.ts"; import { useVideoContext } from "./VideoContext.ts"; +import AspectRatioIcon from "@mui/icons-material/AspectRatio"; import { Fullscreen, Pause, @@ -48,7 +49,6 @@ export const ReloadButton = () => { export const ProgressSlider = () => { const { progress, onProgressChange, videoRef } = useVideoContext(); - const sliderThumbSize = "16px"; return ( { "& .MuiSlider-thumb": { backgroundColor: "#fff", - width: sliderThumbSize, - height: sliderThumbSize, + width: "16px", + height: "16px", }, + "& .MuiSlider-thumb::after": { width: "20px", height: "20px" }, "& .MuiSlider-rail": { opacity: 0.5 }, }} /> @@ -112,6 +113,7 @@ export const VolumeButton = () => { @@ -121,7 +123,7 @@ export const VolumeButton = () => { ); }; -export const VolumeSlider = () => { +export const VolumeSlider = ({ width }: { width: string }) => { const { volume, onVolumeChange } = useVideoContext(); return ( { max={1} step={0.01} sx={{ - width: "100px", + width, + marginRight: "10px", + "& .MuiSlider-thumb::after": { width: "25px", height: "25px" }, }} /> ); @@ -183,6 +187,23 @@ export const PictureInPictureButton = () => { ); }; +export const ObjectFitButton = () => { + const { toggleObjectFit } = useVideoContext(); + return ( + + toggleObjectFit()} + > + + + + ); +}; + export const FullscreenButton = () => { const { toggleFullscreen } = useVideoContext(); return ( diff --git a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx index c0d7f2d..48f1362 100644 --- a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx +++ b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx @@ -4,6 +4,7 @@ import { MobileControlsBar } from "./MobileControlsBar.tsx"; import { useVideoContext } from "./VideoContext.ts"; import { FullscreenButton, + ObjectFitButton, PictureInPictureButton, PlaybackRate, PlayButton, @@ -46,12 +47,13 @@ export const VideoControlsBar = () => { - + + diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx index f2642f7..9e25487 100644 --- a/src/components/common/VideoPlayer/VideoPlayer.tsx +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -103,7 +103,7 @@ export const VideoPlayer = forwardRef( preload="metadata" style={{ ...videoStyles?.video, - objectFit: isFullscreen ? "fill" : videoObjectFit.value, + objectFit: videoObjectFit.value, height: isFullscreen.value && showControlsFullScreen.value ? "calc(100vh - 40px)" diff --git a/src/index.css b/src/index.css index 2dd2e4a..d2953a3 100644 --- a/src/index.css +++ b/src/index.css @@ -67,7 +67,7 @@ height: 100%; } - +a:link { color: #8AB4F8} .test-grid { display: grid; diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx index 9cd4cf2..1671614 100644 --- a/src/pages/ContentPages/VideoContent/VideoContent.tsx +++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx @@ -174,18 +174,17 @@ export const VideoContent = () => { cursor: !descriptionHeight ? "default" : isExpandedDescription - ? "default" - : "pointer", + ? "default" + : "pointer", position: "relative", - marginBottom: "30px", }} className={ !descriptionHeight ? "" : isExpandedDescription - ? "" - : "hover-click" + ? "" + : "hover-click" } > {descriptionHeight && !isExpandedDescription && ( @@ -210,8 +209,8 @@ export const VideoContent = () => { height: !descriptionHeight ? "auto" : isExpandedDescription - ? "auto" - : "200px", + ? "auto" + : "200px", overflow: "hidden", }} > diff --git a/src/pages/Home/Components/VideoList-styles.tsx b/src/pages/Home/Components/VideoList-styles.tsx index eb82aa2..ca1c43d 100644 --- a/src/pages/Home/Components/VideoList-styles.tsx +++ b/src/pages/Home/Components/VideoList-styles.tsx @@ -110,6 +110,7 @@ export const NameContainer = styled(Box)(({ theme }) => ({ alignItems: "center", gap: "10px", marginBottom: "2px", + width: "100%", })); export const VideoManagerRow = styled(Box)(({ theme }) => ({ diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx index df07bff..3418913 100644 --- a/src/styles/theme.tsx +++ b/src/styles/theme.tsx @@ -11,38 +11,38 @@ const commonThemeOptions = { "Oxygen", "Catamaran", "Cairo", - "Arial" + "Arial", ].join(","), h1: { fontSize: "2rem", - fontWeight: 600 + fontWeight: 600, }, h2: { fontSize: "1.75rem", - fontWeight: 500 + fontWeight: 500, }, h3: { fontSize: "1.5rem", - fontWeight: 500 + fontWeight: 500, }, h4: { fontSize: "1.25rem", - fontWeight: 500 + fontWeight: 500, }, h5: { fontSize: "1rem", - fontWeight: 500 + fontWeight: 500, }, h6: { fontSize: "0.875rem", - fontWeight: 500 + fontWeight: 500, }, body1: { fontSize: "23px", fontFamily: "Raleway", fontWeight: 400, lineHeight: 1.5, - letterSpacing: "0.5px" + letterSpacing: "0.5px", }, body2: { @@ -50,12 +50,12 @@ const commonThemeOptions = { fontFamily: "Raleway, Arial", fontWeight: 400, lineHeight: 1.4, - letterSpacing: "0.2px" - } + letterSpacing: "0.2px", + }, }, spacing: 8, shape: { - borderRadius: 4 + borderRadius: 4, }, breakpoints: { values: { @@ -63,8 +63,8 @@ const commonThemeOptions = { sm: 600, md: 900, lg: 1200, - xl: 1536 - } + xl: 1536, + }, }, components: { MuiButton: { @@ -73,16 +73,16 @@ const commonThemeOptions = { backgroundColor: "inherit", transition: "filter 0.3s ease-in-out", "&:hover": { - filter: "brightness(1.1)" - } - } + filter: "brightness(1.1)", + }, + }, }, defaultProps: { disableElevation: true, - disableRipple: true - } - } - } + disableRipple: true, + }, + }, + }, }; const lightTheme = createTheme({ @@ -92,21 +92,22 @@ const lightTheme = createTheme({ primary: { main: "#ffffff", dark: "#F5F5F5", - light: "#FCFCFC" + light: "#FCFCFC", }, secondary: { main: "#417Ed4", - dark: "#3e74c1" + dark: "#3e74c1", }, background: { default: "#fcfcfc", - paper: "#F5F5F5" + paper: "#F5F5F5", }, text: { primary: "#000000", - secondary: "#525252" - } + secondary: "#525252", + }, }, + components: { MuiCard: { styleOverrides: { @@ -118,19 +119,19 @@ const lightTheme = createTheme({ "&:hover": { cursor: "pointer", boxShadow: - "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;" - } - } - } + "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", + }, + }, + }, }, MuiIcon: { defaultProps: { style: { - color: "#000000" - } - } - } - } + color: "#000000", + }, + }, + }, + }, }); const darkTheme = createTheme({ @@ -140,22 +141,22 @@ const darkTheme = createTheme({ primary: { main: "#2e3d60", dark: "#1a2744", - light: "#353535" + light: "#353535", }, secondary: { main: "#417Ed4", - dark: "#3e74c1" + dark: "#3e74c1", }, - background: { default: "#111111", - paper: "#1A1C1E" + paper: "#1A1C1E", }, text: { primary: "#ffffff", - secondary: "#b3b3b3" - } + secondary: "#b3b3b3", + }, }, + components: { MuiCard: { styleOverrides: { @@ -166,19 +167,19 @@ const darkTheme = createTheme({ "&:hover": { cursor: "pointer", boxShadow: - " 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);" - } - } - } + " 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);", + }, + }, + }, }, MuiIcon: { defaultProps: { style: { - color: "#ffffff" - } - } - } - } + color: "#ffffff", + }, + }, + }, + }, }); export { lightTheme, darkTheme };