CyberAgentHack · ouchikai · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/.github/workflows/create_heroku_review_app.yaml b/.github/workflows/create_heroku_review_app.yaml
@@ -7,7 +7,7 @@ jobs:
   create-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: create
         env:

diff --git a/.github/workflows/destroy_heroku_review_app.yaml b/.github/workflows/destroy_heroku_review_app.yaml
@@ -7,7 +7,7 @@ jobs:
   destroy-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: destroy
         env:

diff --git a/public/images/001.jpeg b/public/images/001.jpeg
diff --git a/public/images/001.webp b/public/images/001.webp
diff --git a/public/images/002.jpeg b/public/images/002.jpeg
diff --git a/public/images/002.webp b/public/images/002.webp
diff --git a/public/images/003.jpeg b/public/images/003.jpeg
diff --git a/public/images/003.webp b/public/images/003.webp
diff --git a/public/images/004.jpeg b/public/images/004.jpeg
diff --git a/public/images/004.webp b/public/images/004.webp
diff --git a/public/images/005.jpeg b/public/images/005.jpeg
diff --git a/public/images/005.webp b/public/images/005.webp
diff --git a/public/images/006.jpeg b/public/images/006.jpeg
diff --git a/public/images/006.webp b/public/images/006.webp
diff --git a/public/images/007.jpeg b/public/images/007.jpeg
diff --git a/public/images/007.webp b/public/images/007.webp
diff --git a/public/images/008.jpeg b/public/images/008.jpeg
diff --git a/public/images/008.webp b/public/images/008.webp
diff --git a/public/images/009.jpeg b/public/images/009.jpeg
diff --git a/public/images/009.webp b/public/images/009.webp
diff --git a/public/images/010.jpeg b/public/images/010.jpeg
diff --git a/public/images/010.webp b/public/images/010.webp
diff --git a/public/images/011.jpeg b/public/images/011.jpeg
diff --git a/public/images/011.webp b/public/images/011.webp
diff --git a/public/images/012.jpeg b/public/images/012.jpeg
diff --git a/public/images/012.webp b/public/images/012.webp
diff --git a/public/images/013.jpeg b/public/images/013.jpeg
diff --git a/public/images/013.webp b/public/images/013.webp
diff --git a/public/images/014.jpeg b/public/images/014.jpeg
diff --git a/public/images/014.webp b/public/images/014.webp
diff --git a/public/images/015.jpeg b/public/images/015.jpeg
diff --git a/public/images/015.webp b/public/images/015.webp
diff --git a/public/images/016.jpeg b/public/images/016.jpeg
diff --git a/public/images/016.webp b/public/images/016.webp
diff --git a/public/images/017.jpeg b/public/images/017.jpeg
diff --git a/public/images/017.webp b/public/images/017.webp
diff --git a/public/images/018.jpeg b/public/images/018.jpeg
diff --git a/public/images/018.webp b/public/images/018.webp
diff --git a/public/images/019.jpeg b/public/images/019.jpeg
diff --git a/public/images/019.webp b/public/images/019.webp
diff --git a/public/images/020.jpeg b/public/images/020.jpeg
diff --git a/public/images/020.webp b/public/images/020.webp
diff --git a/public/images/021.jpeg b/public/images/021.jpeg
diff --git a/public/images/021.webp b/public/images/021.webp
diff --git a/public/images/022.jpeg b/public/images/022.jpeg
diff --git a/public/images/022.webp b/public/images/022.webp
diff --git a/public/images/023.jpeg b/public/images/023.jpeg
diff --git a/public/images/023.webp b/public/images/023.webp
diff --git a/public/images/024.jpeg b/public/images/024.jpeg
diff --git a/public/images/024.webp b/public/images/024.webp
diff --git a/public/images/025.jpeg b/public/images/025.jpeg
diff --git a/public/images/025.webp b/public/images/025.webp
diff --git a/public/images/026.jpeg b/public/images/026.jpeg
diff --git a/public/images/026.webp b/public/images/026.webp
diff --git a/public/images/027.jpeg b/public/images/027.jpeg
diff --git a/public/images/027.webp b/public/images/027.webp
diff --git a/public/images/028.jpeg b/public/images/028.jpeg
diff --git a/public/images/028.webp b/public/images/028.webp
diff --git a/public/images/029.jpeg b/public/images/029.jpeg
diff --git a/public/images/029.webp b/public/images/029.webp
diff --git a/public/images/030.jpeg b/public/images/030.jpeg
diff --git a/public/images/030.webp b/public/images/030.webp
diff --git a/public/images/031.jpeg b/public/images/031.jpeg
diff --git a/public/images/031.webp b/public/images/031.webp
diff --git a/public/images/032.jpeg b/public/images/032.jpeg
diff --git a/public/images/032.webp b/public/images/032.webp
diff --git a/public/images/033.jpeg b/public/images/033.jpeg
diff --git a/public/images/033.webp b/public/images/033.webp
diff --git a/public/images/034.jpeg b/public/images/034.jpeg
diff --git a/public/images/034.webp b/public/images/034.webp
diff --git a/public/images/035.jpeg b/public/images/035.jpeg
diff --git a/public/images/035.webp b/public/images/035.webp
diff --git a/public/images/036.jpeg b/public/images/036.jpeg
diff --git a/public/images/036.webp b/public/images/036.webp
diff --git a/public/images/037.jpeg b/public/images/037.jpeg
diff --git a/public/images/037.webp b/public/images/037.webp
diff --git a/workspaces/client/src/app/createStore.ts b/workspaces/client/src/app/createStore.ts
@@ -1,5 +1,5 @@
 import { withLenses } from '@dhmk/zustand-lens';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 import { createStore as createZustandStore } from 'zustand/vanilla';
 
 import { createAuthStoreSlice } from '@wsh-2025/client/src/features/auth/stores/createAuthStoreSlice';
@@ -39,7 +39,7 @@ export const createStore = ({ hydrationData }: Props) => {
     })),
   );
 
-  store.setState((s) => _.merge(s, hydrationData));
+  store.setState((s) => merge(s, hydrationData));
 
   return store;
 };
diff --git a/workspaces/client/src/features/auth/components/SignInDialog.tsx b/workspaces/client/src/features/auth/components/SignInDialog.tsx
@@ -14,6 +14,17 @@ interface SignInFormValues {
   password: string;
 }
 
+export const ErrorOutlineIcon = () => {
+  return (
+    <svg height={24} viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
 interface Props {
   isOpen: boolean;
   onClose: () => void;
@@ -121,7 +132,7 @@ export const SignInDialog = ({ isOpen, onClose, onOpenSignUp }: Props) => {
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/auth/components/SignOutDialog.tsx b/workspaces/client/src/features/auth/components/SignOutDialog.tsx
@@ -1,6 +1,7 @@
 import { FORM_ERROR } from 'final-form';
 import { Form } from 'react-final-form';
 
+import { ErrorOutlineIcon } from '@wsh-2025/client/src/features/auth/components/SignInDialog';
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { Dialog } from '@wsh-2025/client/src/features/dialog/components/Dialog';
 
@@ -36,14 +37,23 @@ export const SignOutDialog = ({ isOpen, onClose }: Props) => {
         <Form onSubmit={onSubmit}>
           {({ handleSubmit, submitError }) => (
             <form className="mb-[16px]" onSubmit={(ev) => void handleSubmit(ev)}>
-              <div className="mb-[24px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#DDAA00] bg-[#fffcee] p-[8px] text-[14px] font-bold text-[#DDAA00]">
-                <div className="i-material-symbols:warning-outline-rounded m-[4px] size-[20px]" />
+              <div className="mb-[24px] flex w-full items-center rounded-[4px] border-[2px] border-solid border-[#DDAA00] bg-[#fffcee] p-[8px] text-[14px] font-bold text-[#DDAA00]">
+                <svg
+                  className="mr-[4px]"
+                  fill="currentColor"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm1.725-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15m0-2.5" />
+                </svg>
                 <span>プレミアムエピソードが視聴できなくなります。</span>
               </div>
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/auth/components/SignUpDialog.tsx b/workspaces/client/src/features/auth/components/SignUpDialog.tsx
@@ -4,6 +4,7 @@ import { useId } from 'react';
 import { Field, Form } from 'react-final-form';
 import { z } from 'zod';
 
+import { ErrorOutlineIcon } from '@wsh-2025/client/src/features/auth/components/SignInDialog';
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { isValidEmail } from '@wsh-2025/client/src/features/auth/logics/isValidEmail';
 import { isValidPassword } from '@wsh-2025/client/src/features/auth/logics/isValidPassword';
@@ -121,7 +122,7 @@ export const SignUpDialog = ({ isOpen, onClose, onOpenSignIn }: Props) => {
 
               {submitError ? (
                 <div className="mb-[8px] flex w-full flex-row items-center justify-start rounded-[4px] border-[2px] border-solid border-[#F0163A] bg-[#ffeeee] p-[8px] text-[14px] font-bold text-[#F0163A]">
-                  <div className="i-material-symbols:error-outline m-[4px] size-[20px]" />
+                  <ErrorOutlineIcon />
                   <span>{submitError}</span>
                 </div>
               ) : null}

diff --git a/workspaces/client/src/features/layout/components/Layout.tsx b/workspaces/client/src/features/layout/components/Layout.tsx
@@ -63,7 +63,7 @@ export const Layout = ({ children }: Props) => {
               : 'bg-gradient-to-b from-[#171717] to-[#171717]',
           )}
         >
-          <Link className="block flex w-[188px] items-center justify-center px-[8px]" to="/">
+          <Link className="block flex w-[188px] items-center justify-center px-[8px]" rel="preload" to="/">
             <img alt="AREMA" className="object-contain" height={36} src="/public/arema.svg" width={98} />
           </Link>
         </header>
@@ -75,27 +75,69 @@ export const Layout = ({ children }: Props) => {
               type="button"
               onClick={isSignedIn ? authActions.openSignOutDialog : authActions.openSignInDialog}
             >
-              <div
-                className={`i-fa-solid:${isSignedIn ? 'sign-out-alt' : 'user'} m-[4px] size-[20px] shrink-0 grow-0`}
-              />
+              <div className="m-[4px] size-[20px] shrink-0 grow-0">
+                {isSignedIn ? (
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 512 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34M192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12" />
+                  </svg>
+                ) : (
+                  <svg
+                    fill="currentColor"
+                    height="20"
+                    viewBox="0 0 512 512"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M312 48c0-26.5-21.5-48-48-48-26.5 0-48 21.5-48 48 0 17.5 9.5 32.7 23.7 41.7l-112.3 112.3c-11.6-1.9-24.3-3.7-36.1-3.7-70.7 0-128 57.3-128 128 0 70.7 57.3 128 128 128s128-57.3 128-128c0-11.8-2.7-23.1-7.2-33.4l112.2-112.2c9.5 14.2 23.2 24.4 39.2 29.7-4.7 7.6-8.7 15.8-12.4 24.3-8.1 16.3-13.6 34.1-17.2 52.6-6.7 31.6-1.7 64.8 14.7 93.6 16.1 28.3 41.3 49.5 71.1 61.5 9.1 4.4 18.9 6.9 28.8 7.5-7.2 10.6-13.9 22-22.4 31.7-30.9 33.1-77.6 53.2-124.4 53.2-47.1 0-92.6-19.1-126.9-53.5-18.3-17.2-33.7-37.1-46.4-59.1 17.2 15.9 35.3 26.6 56.7 30.4 32.4 5.6 66.5 0.9 96.5-15.4 13.9-7.6 25.7-18.6 34.9-31.5 15.9-18.7 24.8-42.5 24.8-67.5z" />
+                  </svg>
+                )}
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">
                 {isSignedIn ? 'ログアウト' : 'ログイン'}
               </span>
             </button>
 
             <Link
               className="block flex h-[56px] w-[188px] items-center justify-center pb-[8px] pl-[20px] pr-[8px] pt-[8px]"
+              rel="preload"
               to="/"
             >
-              <div className="i-bi:house-fill m-[4px] size-[20px] shrink-0 grow-0" />
+              <div className="i-bi:house-fill m-[4px] size-[20px] shrink-0 grow-0">
+                <svg fill="currentColor" height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg">
+                  <g>
+                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"></path>
+                    <path d="m8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"></path>
+                  </g>
+                </svg>
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">ホーム</span>
             </Link>
 
             <Link
               className="block flex h-[56px] w-[188px] items-center justify-center pb-[8px] pl-[20px] pr-[8px] pt-[8px]"
+              rel="preload"
               to="/timetable"
             >
-              <div className="i-fa-solid:calendar m-[4px] size-[20px] shrink-0 grow-0" />
+              <div className="m-[4px] size-[20px] shrink-0 grow-0">
+                <svg
+                  fill="currentColor"
+                  height="20"
+                  viewBox="0 0 448 512"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12m436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12"></path>
+                </svg>
+              </div>
+
               <span className="grow-1 shrink-1 ml-[16px] text-left text-[14px] font-bold">番組表</span>
             </Link>
           </nav>

diff --git a/workspaces/client/src/features/layout/components/Loading.tsx b/workspaces/client/src/features/layout/components/Loading.tsx
@@ -1,7 +1,44 @@
+import { FC } from 'react';
+
+interface SpinnerProps {
+  className?: string;
+  color?: string;
+  size?: number;
+}
+
+export const Spinner: FC<SpinnerProps> = ({ className = '', color = 'currentColor', size = 48 }) => {
+  return (
+    <svg className={className} height={size} viewBox="0 0 24 24" width={size} xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}>
+        <path d="M12 3c4.97 0 9 4.03 9 9" strokeDasharray={16} strokeDashoffset={16}>
+          <animate attributeName="stroke-dashoffset" dur="0.3s" fill="freeze" values="16;0" />
+          <animateTransform
+            attributeName="transform"
+            dur="1.5s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;360 12 12"
+          />
+        </path>
+        <path
+          d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"
+          strokeDasharray={64}
+          strokeDashoffset={64}
+          strokeOpacity={0.3}
+        >
+          <animate attributeName="stroke-dashoffset" dur="1.2s" fill="freeze" values="64;0" />
+        </path>
+      </g>
+    </svg>
+  );
+};
+
 export const Loading = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full animate-[fade-in_0.5s_ease-in_0.5s_both] items-center justify-center bg-[#000000CC]">
-      <div className="i-line-md:loading-twotone-loop size-[48px]" />
+      <div className="absolute left-0 top-0 flex h-full w-full animate-[fade-in_0.5s_ease-in_0.5s_both] items-center justify-center bg-[#000000CC]">
+        <Spinner color="#FFFFFF" size={48} />
+      </div>
     </div>
   );
 };
diff --git a/workspaces/client/src/features/player/components/Player.tsx b/workspaces/client/src/features/player/components/Player.tsx
@@ -2,6 +2,7 @@ import { Ref, useEffect, useRef } from 'react';
 import invariant from 'tiny-invariant';
 import { assignRef } from 'use-callback-ref';
 
+import { Spinner } from '@wsh-2025/client/src/features/layout/components/Loading';
 import { PlayerType } from '@wsh-2025/client/src/features/player/constants/player_type';
 import { PlayerWrapper } from '@wsh-2025/client/src/features/player/interfaces/player_wrapper';
 
@@ -49,7 +50,7 @@ export const Player = ({ className, loop, playerRef, playerType, playlistUrl }:
         <div ref={mountRef} className="size-full" />
 
         <div className="absolute inset-0 z-[-10] grid place-content-center">
-          <div className="i-line-md:loading-twotone-loop size-[48px] text-[#ffffff]" />
+          <Spinner color="#FFFFFF" size={48} />
         </div>
       </div>
     </div>

diff --git a/workspaces/client/src/features/recommended/components/EpisodeItem.tsx b/workspaces/client/src/features/recommended/components/EpisodeItem.tsx
@@ -25,7 +25,7 @@ export const EpisodeItem = ({ episode }: Props) => {
             <>
               <Flipped stagger flipId={isTransitioning ? `episode-${episode.id}` : 0}>
                 <div className="relative overflow-hidden rounded-[8px] border-[2px] border-solid border-[#FFFFFF1F] before:absolute before:inset-x-0 before:bottom-0 before:block before:h-[64px] before:bg-gradient-to-t before:from-[#212121] before:to-transparent before:content-['']">
-                  <img alt="" className="h-auto w-full" src={episode.thumbnailUrl} />
+                  <img alt="" className="h-auto w-full" loading="lazy" src={episode.thumbnailUrl} />
                   <span className="i-material-symbols:play-arrow-rounded absolute bottom-[4px] left-[4px] m-[4px] block size-[20px] text-[#ffffff]" />
                   {episode.premium ? (
                     <span className="absolute bottom-[8px] right-[4px] inline-flex items-center justify-center rounded-[4px] bg-[#1c43d1] p-[4px] text-[10px] text-[#ffffff]">

diff --git a/workspaces/client/src/features/recommended/components/SeriesItem.tsx b/workspaces/client/src/features/recommended/components/SeriesItem.tsx
@@ -21,7 +21,7 @@ export const SeriesItem = ({ series }: Props) => {
             <>
               <div className="relative overflow-hidden rounded-[8px] border-[2px] border-solid border-[#FFFFFF1F]">
                 <Flipped stagger flipId={isTransitioning ? `series-${series.id}` : 0}>
-                  <img alt="" className="h-auto w-full" src={series.thumbnailUrl} />
+                  <img alt="" className="h-auto w-full" loading="lazy" src={series.thumbnailUrl} />
                 </Flipped>
               </div>
               <div className="p-[8px]">

diff --git a/workspaces/client/src/features/recommended/hooks/useRecommended.ts b/workspaces/client/src/features/recommended/hooks/useRecommended.ts
@@ -1,6 +1,7 @@
 import { useStore } from '@wsh-2025/client/src/app/StoreContext';
 
 interface Params {
+  limit?: number;
   referenceId: string;
 }
 

diff --git a/workspaces/client/src/features/recommended/services/recommendedService.ts b/workspaces/client/src/features/recommended/services/recommendedService.ts
@@ -17,14 +17,15 @@ const $fetch = createFetch({
 
 interface RecommendedService {
   fetchRecommendedModulesByReferenceId: (params: {
+    limit?: number;
     referenceId: string;
   }) => Promise<StandardSchemaV1.InferOutput<typeof schema.getRecommendedModulesResponse>>;
 }
 
 export const recommendedService: RecommendedService = {
-  async fetchRecommendedModulesByReferenceId({ referenceId }) {
+  async fetchRecommendedModulesByReferenceId({ limit, referenceId }) {
     const data = await $fetch('/recommended/:referenceId', {
-      params: { referenceId },
+      params: { limit, referenceId },
     });
     return data;
   },

diff --git a/workspaces/client/src/features/recommended/stores/createRecomendedStoreSlice.ts b/workspaces/client/src/features/recommended/stores/createRecomendedStoreSlice.ts
@@ -19,6 +19,7 @@ interface RecommendedState {
 
 interface RecommendedActions {
   fetchRecommendedModulesByReferenceId: (params: {
+    limit?: number;
     referenceId: ReferenceId;
   }) => Promise<StandardSchemaV1.InferOutput<typeof schema.getRecommendedModulesResponse>>;
 }

diff --git a/workspaces/client/src/pages/episode/components/EpisodePage.tsx b/workspaces/client/src/pages/episode/components/EpisodePage.tsx
@@ -9,6 +9,7 @@ import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuth
 import { useAuthUser } from '@wsh-2025/client/src/features/auth/hooks/useAuthUser';
 import { useEpisodeById } from '@wsh-2025/client/src/features/episode/hooks/useEpisodeById';
 import { AspectRatio } from '@wsh-2025/client/src/features/layout/components/AspectRatio';
+import { Spinner } from '@wsh-2025/client/src/features/layout/components/Loading';
 import { Player } from '@wsh-2025/client/src/features/player/components/Player';
 import { PlayerType } from '@wsh-2025/client/src/features/player/constants/player_type';
 import { RecommendedSection } from '@wsh-2025/client/src/features/recommended/components/RecommendedSection';
@@ -22,7 +23,7 @@ export const prefetch = async (store: ReturnType<typeof createStore>, { episodeI
   const episode = await store.getState().features.episode.fetchEpisodeById({ episodeId });
   const modules = await store
     .getState()
-    .features.recommended.fetchRecommendedModulesByReferenceId({ referenceId: episodeId });
+    .features.recommended.fetchRecommendedModulesByReferenceId({ limit: 1, referenceId: episodeId });
   return { episode, modules };
 };
 
@@ -36,7 +37,7 @@ export const EpisodePage = () => {
   const episode = useEpisodeById({ episodeId });
   invariant(episode);
 
-  const modules = useRecommended({ referenceId: episodeId });
+  const modules = useRecommended({ limit: 1, referenceId: episodeId });
 
   const playerRef = usePlayerRef();
 
@@ -77,7 +78,9 @@ export const EpisodePage = () => {
                         src={episode.thumbnailUrl}
                       />
                       <div className="size-full place-self-stretch bg-[#00000077] [grid-area:1/-1]" />
-                      <div className="i-line-md:loading-twotone-loop size-[48px] place-self-center text-[#ffffff] [grid-area:1/-1]" />
+                      <div className="place-self-center text-[#ffffff] [grid-area:1/-1]">
+                        <Spinner color="#FFFFFF" size={48} />
+                      </div>
                     </div>
                   </AspectRatio>
                 }

diff --git a/workspaces/client/src/pages/episode/hooks/useSeekThumbnail.ts b/workspaces/client/src/pages/episode/hooks/useSeekThumbnail.ts
@@ -21,9 +21,9 @@ async function getSeekThumbnail({ episode }: Params) {
     coreURL: await import('@ffmpeg/core?arraybuffer').then(({ default: b }) => {
       return URL.createObjectURL(new Blob([b], { type: 'text/javascript' }));
     }),
-    wasmURL: await import('@ffmpeg/core/wasm?arraybuffer').then(({ default: b }) => {
-      return URL.createObjectURL(new Blob([b], { type: 'application/wasm' }));
-    }),
+    // wasmURL: await import('@ffmpeg/core/wasm?arraybuffer').then(({ default: b }) => {
+    //   return URL.createObjectURL(new Blob([b], { type: 'application/wasm' }));
+    // }),
   });
 
   // 動画のセグメントファイルを取得

diff --git a/workspaces/client/src/pages/program/components/PlayerController.tsx b/workspaces/client/src/pages/program/components/PlayerController.tsx
@@ -10,8 +10,15 @@ export const PlayerController = () => {
 
       <div className="absolute inset-x-0 bottom-0 px-[12px]">
         <div className="flex w-full flex-row items-center justify-between">
-          <div className="flex flex-row items-center">
-            <span className="i-fluent:live-24-filled m-[14px] block size-[20px] shrink-0 grow-0 text-[#FFFFFF]" />
+          <div className="flex items-center">
+            <svg
+              className="m-[14px] h-[20px] w-[20px] shrink-0 grow-0 text-[#FFFFFF]"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M6.343 4.938a1 1 0 0 1 0 1.415a8.003 8.003 0 0 0 0 11.317a1 1 0 1 1-1.414 1.414c-3.907-3.906-3.907-10.24 0-14.146a1 1 0 0 1 1.414 0m12.732 0c3.906 3.907 3.906 10.24 0 14.146a1 1 0 0 1-1.415-1.414a8.003 8.003 0 0 0 0-11.317a1 1 0 0 1 1.415-1.415M9.31 7.812a1 1 0 0 1 0 1.414a3.92 3.92 0 0 0 0 5.544a1 1 0 1 1-1.415 1.414a5.92 5.92 0 0 1 0-8.372a1 1 0 0 1 1.415 0m6.958 0a5.92 5.92 0 0 1 0 8.372a1 1 0 0 1-1.414-1.414a3.92 3.92 0 0 0 0-5.544a1 1 0 0 1 1.414-1.414m-4.186 2.77a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3" />
+            </svg>
             <span className="ml-[4px] block shrink-0 grow-0 text-[12px] font-bold text-[#FFFFFF]">ライブ配信</span>
           </div>