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 };