From 216f5d1cfce399ca61b827daea69bfdd42eff92a Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Tue, 30 Mar 2021 18:20:56 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E5=8B=95=E7=94=BB=E3=83=97?= =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=83=A4=E3=83=BC=E3=81=AE=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index a12996ca0..cbb821f78 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/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,7 @@ const useStyles = makeStyles((theme) => ({ marginRight: theme.spacing(-3), marginBottom: theme.spacing(2), marginLeft: theme.spacing(-3), + backgroundColor: gray[800], }, title: { marginBottom: theme.spacing(0.5), From 1c64675748bba5c2164a2b53fe9b8f31dd753068 Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Tue, 30 Mar 2021 18:21:25 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E5=8B=95=E7=94=BB=E3=81=AF?= =?UTF-8?q?=E6=9C=80=E5=A4=A740vh=E3=81=A7=E8=A7=A3=E8=AA=AC=E9=A0=98?= =?UTF-8?q?=E5=9F=9F=E3=82=92=E7=A2=BA=E4=BF=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index cbb821f78..ae7508f77 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/components/molecules/TopicViewerContent.tsx @@ -21,6 +21,10 @@ const useStyles = makeStyles((theme) => ({ marginBottom: theme.spacing(2), marginLeft: theme.spacing(-3), backgroundColor: gray[800], + "& > *": { + maxWidth: "calc(40vh * 16 / 9)", + margin: "0 auto", + }, }, title: { marginBottom: theme.spacing(0.5), From 8bfbd46d0d3d1a5a5ce41407919fb26a66d3ddc2 Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Tue, 30 Mar 2021 18:22:23 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20Vimeo=E3=81=A7=E5=8B=95=E7=94=BB?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E5=89=8D=E3=81=AB=E9=AB=98=E3=81=95=E3=81=8C?= =?UTF-8?q?=E7=A2=BA=E4=BF=9D=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index ae7508f77..3d9d092a1 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/components/molecules/TopicViewerContent.tsx @@ -25,6 +25,10 @@ const useStyles = makeStyles((theme) => ({ maxWidth: "calc(40vh * 16 / 9)", margin: "0 auto", }, + "& div:empty": { + // NOTE: Viemoでiframeがぶら下がる前の高さを確保する + paddingTop: "56.25%", + }, }, title: { marginBottom: theme.spacing(0.5), From 2488cde9d53eb1cb6e3236269e0f5e0f7a7ae2c6 Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Tue, 30 Mar 2021 20:03:48 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20Vimeo=E3=83=97=E3=83=AC?= =?UTF-8?q?=E3=82=A4=E3=83=A4=E3=83=BC=E3=81=AB=E5=AF=BE=E3=81=99=E3=82=8B?= =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=81=AFVimeo=E3=82=B3?= =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=A7?= =?UTF-8?q?=E5=BD=93=E3=81=A6=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 4 ---- components/organisms/Video/Vimeo.tsx | 13 ++++++++++++- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index 3d9d092a1..ae7508f77 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/components/molecules/TopicViewerContent.tsx @@ -25,10 +25,6 @@ const useStyles = makeStyles((theme) => ({ maxWidth: "calc(40vh * 16 / 9)", margin: "0 auto", }, - "& div:empty": { - // NOTE: Viemoでiframeがぶら下がる前の高さを確保する - paddingTop: "56.25%", - }, }, title: { marginBottom: theme.spacing(0.5), diff --git a/components/organisms/Video/Vimeo.tsx b/components/organisms/Video/Vimeo.tsx index 71cd9470e..d49f583de 100644 --- a/components/organisms/Video/Vimeo.tsx +++ b/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({ + root: { + "& div:empty": { + // NOTE: @vimeo/player によって iframe がぶら下がる前の高さを確保する + paddingTop: "56.25%", + }, + }, +}); type VimeoProps = { options: Options; @@ -14,6 +24,7 @@ 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"); ref.current.appendChild(element); @@ -30,5 +41,5 @@ export function Vimeo({ options }: VimeoProps) { element.style.display = "none"; }; }, [options, tracking]); - return
; + return
; } From b01773e320c4faec77a5b00be919e0b44516ef6c Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Wed, 31 Mar 2021 11:02:51 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20&:empty=E3=81=AE=E3=82=B9?= =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E3=82=92createElement('div?= =?UTF-8?q?')=E3=81=AB=E5=AF=BE=E3=81=97=E3=81=A6=E4=BB=98=E4=B8=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/organisms/Video/Vimeo.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/organisms/Video/Vimeo.tsx b/components/organisms/Video/Vimeo.tsx index d49f583de..af76136b5 100644 --- a/components/organisms/Video/Vimeo.tsx +++ b/components/organisms/Video/Vimeo.tsx @@ -5,8 +5,8 @@ import volumePersister from "$utils/volumePersister"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles({ - root: { - "& div:empty": { + player: { + "&:empty": { // NOTE: @vimeo/player によって iframe がぶら下がる前の高さを確保する paddingTop: "56.25%", }, @@ -27,6 +27,7 @@ export function Vimeo({ options }: VimeoProps) { const classes = useStyles(); useEffect(() => { const element = document.createElement("div"); + element.classList.add(classes.player); ref.current.appendChild(element); const player = new Player(element, { ...defaultOptions, @@ -40,6 +41,6 @@ export function Vimeo({ options }: VimeoProps) { player.pause(); element.style.display = "none"; }; - }, [options, tracking]); - return
; + }, [options, tracking, classes]); + return
; } From 57921e455d77269ed9cf3bfee752995f958bba58 Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Wed, 31 Mar 2021 11:33:12 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20maxHeight=E3=81=8C=E4=BD=BF?= =?UTF-8?q?=E3=81=88=E3=81=AA=E3=81=84=E3=81=93=E3=81=A8=E3=81=B8=E3=81=AE?= =?UTF-8?q?=E6=B3=A8=E8=A8=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index ae7508f77..1ecf87b98 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/components/molecules/TopicViewerContent.tsx @@ -22,7 +22,9 @@ const useStyles = makeStyles((theme) => ({ marginLeft: theme.spacing(-3), backgroundColor: gray[800], "& > *": { - maxWidth: "calc(40vh * 16 / 9)", + // NOTE: 各動画プレイヤーのレスポンシブ対応により、高さはpaddingTopによってwidthのpercentage分 + // 確保されるため、heightによる制限ではなくwidthによる制限をおこなう必要がある + maxWidth: "calc(40vh * 4 / 3)", margin: "0 auto", }, }, From 6aba81d3ef022fc5662a6bde7994d928b32d51bb Mon Sep 17 00:00:00 2001 From: Kimiaki Kuno Date: Wed, 31 Mar 2021 11:37:42 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=204:3=E5=89=8D=E6=8F=90=E3=81=A7?= =?UTF-8?q?=E3=81=82=E3=82=8B=E3=81=93=E3=81=A8=E3=81=B8=E3=81=AE=E3=82=B3?= =?UTF-8?q?=E3=83=A1=E3=83=B3=E3=83=88=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/TopicViewerContent.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/molecules/TopicViewerContent.tsx b/components/molecules/TopicViewerContent.tsx index 1ecf87b98..60e71687c 100644 --- a/components/molecules/TopicViewerContent.tsx +++ b/components/molecules/TopicViewerContent.tsx @@ -22,8 +22,9 @@ const useStyles = makeStyles((theme) => ({ marginLeft: theme.spacing(-3), backgroundColor: gray[800], "& > *": { - // NOTE: 各動画プレイヤーのレスポンシブ対応により、高さはpaddingTopによってwidthのpercentage分 - // 確保されるため、heightによる制限ではなくwidthによる制限をおこなう必要がある + /* NOTE: 各動画プレイヤーのレスポンシブ対応により、高さはpaddingTopによってwidthのpercentage分 + * 確保されるため、heightによる制限ではなくwidthによる制限をおこなう必要がある */ + // NOTE: 4:3前提なので、16:9では40vhよりも狭い高さになる maxWidth: "calc(40vh * 4 / 3)", margin: "0 auto", },