Merge pull request #363 from npocccties/feat-customize-video-max-height

feat: 動画の最大高さを環境変数で設定できるように

INSTALL-en.md

@@ -9,11 +9,12 @@ When changing the information of the connection destination of API, .env must be
 
 .env:
 
-| Environment variable                 | Explanation                                          |
-| ------------------------------------ | ---------------------------------------------------- |
-| `NEXT_PUBLIC_API_BASE_PATH`          | Base path for API URLs (デフォルト: 同一オリジン "") |
-| `NEXT_PUBLIC_BASE_PATH`              | Base path for static content URLs (デフォルト: "")   |
-| `NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL` | 学習活動の送信間隔 (秒) (デフォルト: `10`)           |
+| Environment variable                 | Explanation                                                       |
+| ------------------------------------ | ----------------------------------------------------------------- |
+| `NEXT_PUBLIC_API_BASE_PATH`          | Base path for API URLs (デフォルト: 同一オリジン "")              |
+| `NEXT_PUBLIC_BASE_PATH`              | Base path for static content URLs (デフォルト: "")                |
+| `NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL` | 学習活動の送信間隔 (秒) (デフォルト: `10`)                        |
+| `NEXT_PUBLIC_VIDEO_MAX_HEIGHT`       | max-height for scroll-following video player (デフォルト: "40vh") |
 
 ## Build front-ends
 
@@ -47,3 +48,11 @@ yarn storybook
 Customize the logo image which layout in AppBar be able by overwrite the `./public/logo.png` .
 
 Consider the logo image will be resized in a range of width 100px / height 48px with keeping aspect ratio.
+
+### Video player
+
+Some video player has scroll-follow and has been applied height limitation by css.
+
+To change value of the height limitation, Set value of [<length> Data Type](https://developer.mozilla.org/en-US/docs/Web/CSS/Length) to `NEXT_PUBLIC_VIDEO_MAX_HEGIHT`.
+
+To disable the height limitation, Set "unset" to `NEXT_PUBLIC_VIDEO_MAX_HEIGHT`.

INSTALL-ja.md

@@ -19,11 +19,12 @@ API の接続先の情報を変更する場合 .env を適宜書き換える必
 
 .env:
 
-| 環境変数                             | 説明                                                        |
-| ------------------------------------ | ----------------------------------------------------------- |
-| `NEXT_PUBLIC_API_BASE_PATH`          | API の URL のベースとなるパス (デフォルト: 同一オリジン "") |
-| `NEXT_PUBLIC_BASE_PATH`              | 静的コンテンツの URL のベースとなるパス (デフォルト: "")    |
-| `NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL` | 学習活動の送信間隔 (秒) (デフォルト:`10`)                   |
+| 環境変数                             | 説明                                                               |
+| ------------------------------------ | ------------------------------------------------------------------ |
+| `NEXT_PUBLIC_API_BASE_PATH`          | API の URL のベースとなるパス (デフォルト: 同一オリジン "")        |
+| `NEXT_PUBLIC_BASE_PATH`              | 静的コンテンツの URL のベースとなるパス (デフォルト: "")           |
+| `NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL` | 学習活動の送信間隔 (秒) (デフォルト:`10`)                          |
+| `NEXT_PUBLIC_VIDEO_MAX_HEIGHT`       | スクロール追従する動画プレイヤーの max-height (デフォルト: "40vh") |
 
 ## フロントエンド周りのビルド
 
@@ -76,6 +77,14 @@ yarn build:license
 
 ロゴ画像は最大幅 100px、最大高さ 48px の範囲でアスペクト比を維持してリサイズされます。
 
+### 動画プレイヤー
+
+スクロール追従する動画プレイヤーに高さ制限のスタイルを付与しています。
+
+高さ制限の値を変更するには `NEXT_PUBLIC_VIDEO_MAX_HEIGHT` に [<length> データ型](https://developer.mozilla.org/ja/docs/Web/CSS/Length)を設定します。
+
+高さ制限を解除するには `NEXT_PUBLIC_VIDEO_MAX_HEIGHT` に "unset" を設定します。
+
 ### Storybook
 
 いくつかの UI をブラウザで確認するには `yarn` 実行後、以下のコマンドを実行します。

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 { NEXT_PUBLIC_VIDEO_MAX_HEIGHT } from "$utils/env";
 import { gray } from "$theme/colors";
 
 function formatInterval(start: Date | number, end: Date | number) {
@@ -25,7 +26,10 @@ const useStyles = makeStyles((theme) => ({
       /* NOTE: 各動画プレイヤーのレスポンシブ対応により、高さはpaddingTopによってwidthのpercentage分
        * 確保されるため、heightによる制限ではなくwidthによる制限をおこなう必要がある */
       // NOTE: 16:9前提になっているが本当はアスペクト比に応じて最大高さを変えたい
-      maxWidth: "calc(40vh * 16 / 9)",
+      maxWidth:
+        NEXT_PUBLIC_VIDEO_MAX_HEIGHT === "unset"
+          ? "unset"
+          : `calc(${NEXT_PUBLIC_VIDEO_MAX_HEIGHT} * 16 / 9)`,
       margin: "0 auto",
     },
   },

utils/env.ts

@@ -3,9 +3,12 @@ const NEXT_PUBLIC_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
 const NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL = Number(
   process.env.NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL ?? 10
 );
+const NEXT_PUBLIC_VIDEO_MAX_HEIGHT =
+  process.env.NEXT_PUBLIC_VIDEO_MAX_HEIGHT ?? "40vh";
 
 export {
   NEXT_PUBLIC_API_BASE_PATH,
   NEXT_PUBLIC_BASE_PATH,
   NEXT_PUBLIC_ACTIVITY_SEND_INTERVAL,
+  NEXT_PUBLIC_VIDEO_MAX_HEIGHT,
 };