refactor(videoPlayer): simplify video player visiblity

src/components/ButtonToggleVideoIframeVisibility.module.css

@@ -1,20 +1,9 @@
 .button {
-    position: absolute;
-    right: 0;
-    top: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    z-index: 5;
-    transition: 0.2s;    
-}
-
-@media (min-width: em(2140px)) {
-    .button {
-        top: auto;
-        right: calc(50% - rem(20px));
-        bottom: 0;
-        border-top-right-radius: var(--mantine-radius-md);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
+  position: absolute;
+  left: rem(-44px);
+  top: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 5;
+  transition: 0.2s;
 }

src/components/VideoIframe.module.css

@@ -34,10 +34,6 @@
   left: rem(44px);
 }
 
-.buttonMove {
-  right: rem(8px);
-}
-
 .buttonInfo {
-  right: rem(44px);
+  right: rem(8px);
 }

src/components/VideoIframe.tsx

@@ -1,8 +1,7 @@
 import { ActionIcon, Box, CloseButton, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
-  IconChevronDown,
-  IconHandMove,
+  IconChevronRight,
   IconInfoCircle,
 } from "@tabler/icons-react";
 import { type FC, memo, useCallback, useEffect, useMemo, useRef } from "react";
@@ -21,12 +20,7 @@ import { useSetVideoIframeVisibility } from "../providers/VideoIframeVisibility"
 import { ModalVideoIframeInformation } from "./ModalVideoIframeInformation";
 import classes from "./VideoIframe.module.css";
 
-interface VideoIframeProps {
-  width: number;
-  height: number;
-}
-
-export const VideoIframe: FC<VideoIframeProps> = memo(({ width, height }) => {
+export const VideoIframe = memo(() => {
   const { video } = usePlayerVideo();
   const playerState = usePlayerState();
 
@@ -36,7 +30,6 @@ export const VideoIframe: FC<VideoIframeProps> = memo(({ width, height }) => {
 
   return (
     <Box className={classes.box}>
-      <ButtonMove />
       <ButtonHide />
       <ButtonInformation />
       <ButtonClose />
@@ -156,7 +149,7 @@ const ButtonHide = memo(() => {
       title="Hide"
       onClick={() => setVideoIframeVisibility(false)}
     >
-      <IconChevronDown />
+      <IconChevronRight />
     </ActionIcon>
   );
 });
@@ -178,14 +171,3 @@ const ButtonInformation = memo(() => {
     </>
   );
 });
-
-const ButtonMove = memo(() => {
-  return (
-    <ActionIcon
-      className={`${classes.buttonMove} ${classes.button}`}
-      title="Drag"
-    >
-      <IconHandMove />
-    </ActionIcon>
-  );
-});

src/components/VideoPlayer.module.css

@@ -0,0 +1,37 @@
+.container {
+  position: absolute;
+  bottom: rem(160px);
+  right: rem(20px);
+  width: rem(300px);
+  height: rem(150px);
+  z-index: 4;
+  pointer-events: all;
+  transition: .2s;
+
+  &[data-visible="false"] {
+    transform: translate3d(320px, 0, 0);
+  }
+
+  @media (min-width: $mantine-breakpoint-md) {
+    bottom: rem(130px);
+    right: rem(40px);
+    width: rem(400px);
+    height: rem(200px);
+
+    &[data-visible="false"] {
+      transform: translate3d(440px, 0, 0);
+    }
+  }
+
+  @media (min-width: $mantine-breakpoint-lg) {
+    bottom: rem(180px);
+  }
+
+  @media (min-width: em(2140)) {
+    bottom: rem(70px);
+    right: rem(550px);
+  }
+
+  /* &[data-visible="true"] {
+  } */
+}

src/components/VideoPlayer.tsx

@@ -1,79 +1,17 @@
-import { useMantineTheme } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
-import { type MotionStyle, motion } from "framer-motion";
-import { memo, useMemo, useRef } from "react";
+import { memo } from "react";
+import classes from './VideoPlayer.module.css';
 
 import { useVideoIframeVisibility } from "../providers/VideoIframeVisibility";
 import { ButtonToggleVideoIframeVisibility } from "./ButtonToggleVideoIframeVisibility";
 import { VideoIframe } from "./VideoIframe";
 
 export const VideoPlayer = memo(() => {
-  const theme = useMantineTheme();
-  const constraintsRef = useRef(null);
-  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
-  const visible = useVideoIframeVisibility();
-
-  const iframeSize = useMemo(
-    () => ({
-      width: isMobile ? 300 : 400,
-      height: isMobile ? 150 : 200,
-    }),
-    [isMobile],
-  );
-
-  const containerStyles: MotionStyle = useMemo(
-    () => ({
-      position: "absolute",
-      bottom: 0,
-      right: 0,
-      transition: "0.2s",
-      maxWidth: "100vw",
-      pointerEvents: "none",
-      overflow: "hidden",
-      top: isMobile ? "20vh" : "60vh",
-      left: 0,
-    }),
-    [isMobile],
-  );
-
-  const commonStyles: MotionStyle = useMemo(
-    () => ({
-      zIndex: 4,
-      pointerEvents: "all",
-      position: "absolute",
-      backgroundColor: theme.colors.blue[7],
-      borderRadius: theme.radius.md,
-      transition: "0.2s",
-      opacity: 1,
-      visibility: "visible",
-      ...iframeSize,
-    }),
-    [theme, iframeSize],
-  );
-
-  const visibleStyles: MotionStyle = {
-    ...commonStyles,
-  };
-
-  const hiddenStyles: MotionStyle = {
-    ...commonStyles,
-    opacity: 0,
-    visibility: "hidden",
-  };
-
-  const iframeContainerStyles = visible ? visibleStyles : hiddenStyles;
+  const videoIframeVisibility = useVideoIframeVisibility();
 
   return (
-    <motion.div ref={constraintsRef} style={containerStyles}>
+    <div className={classes.container} data-visible={videoIframeVisibility}>
       <ButtonToggleVideoIframeVisibility />
-      <motion.div
-        drag
-        dragConstraints={constraintsRef}
-        dragMomentum={false}
-        style={iframeContainerStyles}
-      >
-        <VideoIframe {...iframeSize} />
-      </motion.div>
-    </motion.div>
+      <VideoIframe />
+    </div>
   );
 });