Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-27 10:31:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

shrink popouts when on horizontal mobile devices

Browse Source
This commit is contained in:
Max Ward 2023-02-19 21:49:52 -08:00
parent 39ede1b042
commit a2e5e08b20
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/video/components/popouts/PopoutProviderAction.tsx
View File

@ -5,6 +5,7 @@ import { SourceSelectionPopout } from "@/video/components/popouts/SourceSelectio
import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelectionPopout"; import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelectionPopout";
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls"; import { useControls } from "@/video/state/logic/controls";
import { useIsMobile } from "@/hooks/useIsMobile";
import { import {
useInterface, useInterface,
VideoInterfaceEvent, VideoInterfaceEvent,
@ -37,6 +38,8 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
const [bottom, setBottom] = useState<number>(0); const [bottom, setBottom] = useState<number>(0);
const [width, setWidth] = useState<number>(0); const [width, setWidth] = useState<number>(0);
const { isMobile } = useIsMobile(true);
const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => { const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => {
const buttonCenter = rect.left + rect.width / 2; const buttonCenter = rect.left + rect.width / 2;
@ -57,7 +60,9 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
return ( return (
<div <div
ref={ref} ref={ref}
className="absolute z-10 grid h-[500px] w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200" className={`absolute z-10 grid w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200 ${
isMobile ? "h-[230px]" : " h-[500px]"
}`}
style={{ style={{
right: `${right}px`, right: `${right}px`,
bottom: `${bottom}px`, bottom: `${bottom}px`,