Merge pull request #359 from npocccties/feat-video-style

feat: 閲覧時の動画は40vhを最大高さに&Vimeoの表示領域を確保するように

components/molecules/TopicViewerContent.tsx

@@ -8,6 +8,7 @@ import Video from "$organisms/Video";
 import Item from "$atoms/Item";
 import useStickyProps from "$utils/useStickyProps";
 import languages from "$utils/languages";
+import { gray } from "$theme/colors";
 
 function formatInterval(start: Date | number, end: Date | number) {
   const duration = intervalToDuration({ start, end });
@@ -19,6 +20,14 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(-3),
     marginBottom: theme.spacing(2),
     marginLeft: theme.spacing(-3),
+    backgroundColor: gray[800],
+    "& > *": {
+      /* NOTE: 各動画プレイヤーのレスポンシブ対応により、高さはpaddingTopによってwidthのpercentage分
+       * 確保されるため、heightによる制限ではなくwidthによる制限をおこなう必要がある */
+      // NOTE: 4:3前提なので、16:9では40vhよりも狭い高さになる
+      maxWidth: "calc(40vh * 4 / 3)",
+      margin: "0 auto",
+    },
   },
   title: {
     marginBottom: theme.spacing(0.5),

components/organisms/Video/Vimeo.tsx

@@ -2,6 +2,16 @@ import { useEffect, useRef } from "react";
 import Player, { Options } from "@vimeo/player";
 import { usePlayerTrackingAtom } from "$store/playerTracker";
 import volumePersister from "$utils/volumePersister";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  player: {
+    "&:empty": {
+      // NOTE: @vimeo/player によって iframe がぶら下がる前の高さを確保する
+      paddingTop: "56.25%",
+    },
+  },
+});
 
 type VimeoProps = {
   options: Options;
@@ -14,8 +24,10 @@ const defaultOptions: Options = {
 export function Vimeo({ options }: VimeoProps) {
   const ref = useRef(document.createElement("div"));
   const tracking = usePlayerTrackingAtom();
+  const classes = useStyles();
   useEffect(() => {
     const element = document.createElement("div");
+    element.classList.add(classes.player);
     ref.current.appendChild(element);
     const player = new Player(element, {
       ...defaultOptions,
@@ -29,6 +41,6 @@ export function Vimeo({ options }: VimeoProps) {
       player.pause();
       element.style.display = "none";
     };
-  }, [options, tracking]);
+  }, [options, tracking, classes]);
   return <div ref={ref} />;
 }