CyberAgentHack · sagami-ts · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/001.avif b/public/images/001.avif
diff --git a/public/images/002.avif b/public/images/002.avif
diff --git a/public/images/003.avif b/public/images/003.avif
diff --git a/public/images/004.avif b/public/images/004.avif
diff --git a/public/images/005.avif b/public/images/005.avif
diff --git a/public/images/006.avif b/public/images/006.avif
diff --git a/public/images/007.avif b/public/images/007.avif
diff --git a/public/images/008.avif b/public/images/008.avif
diff --git a/public/images/009.avif b/public/images/009.avif
diff --git a/public/images/010.avif b/public/images/010.avif
diff --git a/public/images/011.avif b/public/images/011.avif
diff --git a/public/images/012.avif b/public/images/012.avif
diff --git a/public/images/013.avif b/public/images/013.avif
diff --git a/public/images/014.avif b/public/images/014.avif
diff --git a/public/images/015.avif b/public/images/015.avif
diff --git a/public/images/016.avif b/public/images/016.avif
diff --git a/public/images/017.avif b/public/images/017.avif
diff --git a/public/images/018.avif b/public/images/018.avif
diff --git a/public/images/019.avif b/public/images/019.avif
diff --git a/public/images/020.avif b/public/images/020.avif
diff --git a/public/images/021.avif b/public/images/021.avif
diff --git a/public/images/022.avif b/public/images/022.avif
diff --git a/public/images/023.avif b/public/images/023.avif
diff --git a/public/images/024.avif b/public/images/024.avif
diff --git a/public/images/025.avif b/public/images/025.avif
diff --git a/public/images/026.avif b/public/images/026.avif
diff --git a/public/images/027.avif b/public/images/027.avif
diff --git a/public/images/028.avif b/public/images/028.avif
diff --git a/public/images/029.avif b/public/images/029.avif
diff --git a/public/images/030.avif b/public/images/030.avif
diff --git a/public/images/031.avif b/public/images/031.avif
diff --git a/public/images/032.avif b/public/images/032.avif
diff --git a/public/images/033.avif b/public/images/033.avif
diff --git a/public/images/034.avif b/public/images/034.avif
diff --git a/public/images/035.avif b/public/images/035.avif
diff --git a/public/images/036.avif b/public/images/036.avif
diff --git a/public/images/037.avif b/public/images/037.avif
diff --git a/public/logos/anime.svg b/public/logos/anime.svg
diff --git a/public/logos/documentary.svg b/public/logos/documentary.svg
diff --git a/public/logos/drama.svg b/public/logos/drama.svg
diff --git a/public/logos/fightingsports.svg b/public/logos/fightingsports.svg
diff --git a/public/logos/mahjong.svg b/public/logos/mahjong.svg
diff --git a/public/logos/music.svg b/public/logos/music.svg
diff --git a/public/logos/news.svg b/public/logos/news.svg
diff --git a/public/logos/reality.svg b/public/logos/reality.svg
diff --git a/public/logos/shogi.svg b/public/logos/shogi.svg
diff --git a/public/logos/soccer.svg b/public/logos/soccer.svg
diff --git a/public/logos/sumo.svg b/public/logos/sumo.svg
diff --git a/public/logos/variety.svg b/public/logos/variety.svg
diff --git a/workspaces/client/eslint.config.mjs b/workspaces/client/eslint.config.mjs
@@ -5,4 +5,14 @@ export default [
   {
     ignores: ['dist/*', '.wireit/*'],
   },
+  {
+    files: ['**/*.mjs'],
+    languageOptions: {
+      parser: 'espree',
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+  },
 ];
diff --git a/workspaces/client/package.json b/workspaces/client/package.json
@@ -1,6 +1,11 @@
 {
   "name": "@wsh-2025/client",
   "private": true,
+  "sideEffects": [
+    "*.css",
+    "./src/setups/*.ts",
+    "./src/main.tsx"
+  ],
   "scripts": {
     "build": "wireit",
     "format": "wireit",
@@ -28,7 +33,6 @@
     "p-min-delay": "4.0.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-ellipsis-component": "1.1.11",
     "react-final-form": "6.5.9",
     "react-flip-toolkit": "7.2.4",
     "react-router": "7.0.2",
@@ -63,14 +67,18 @@
     "@unocss/preset-icons": "66.1.0-beta.5",
     "@unocss/preset-wind3": "66.1.0-beta.5",
     "@unocss/reset": "66.1.0-beta.5",
-    "@unocss/runtime": "66.1.0-beta.5",
+    "@unocss/webpack": "66.1.0-beta.6",
     "@wsh-2025/configs": "workspace:*",
     "arraybuffer-loader": "1.0.8",
     "babel-loader": "9.2.1",
     "core-js": "3.41.0",
+    "css-loader": "7.1.2",
     "hls.js": "1.5.17",
     "shaka-player": "4.12.5",
+    "style-loader": "4.0.0",
+    "terser-webpack-plugin": "5.3.14",
     "typescript": "5.7.2",
+    "unocss": "66.1.0-beta.6",
     "video.js": "8.21.0",
     "webpack": "5.96.1",
     "webpack-bundle-analyzer": "4.10.2",

diff --git a/workspaces/client/src/app/Document.tsx b/workspaces/client/src/app/Document.tsx
@@ -15,6 +15,8 @@ export const Document = () => {
       <head>
         <meta charSet="UTF-8" />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        <script src="/public/runtime.js"></script>
+        <script src="/public/vendors.js"></script>
         <script src="/public/main.js"></script>
       </head>
       <body className="size-full bg-[#000000] text-[#ffffff]">

diff --git a/workspaces/client/src/app/createRoutes.tsx b/workspaces/client/src/app/createRoutes.tsx
@@ -1,4 +1,3 @@
-import lazy from 'p-min-delay';
 import { RouteObject } from 'react-router';
 
 import { Document, prefetch } from '@wsh-2025/client/src/app/Document';
@@ -11,10 +10,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         {
           index: true,
           async lazy() {
-            const { HomePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/home/components/HomePage'),
-              1000,
-            );
+            const { HomePage, prefetch } = await import('@wsh-2025/client/src/pages/home/components/HomePage');
             return {
               Component: HomePage,
               async loader() {
@@ -25,10 +21,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { EpisodePage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/episode/components/EpisodePage'),
-              1000,
-            );
+            const { EpisodePage, prefetch } = await import('@wsh-2025/client/src/pages/episode/components/EpisodePage');
             return {
               Component: EpisodePage,
               async loader({ params }) {
@@ -40,10 +33,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, ProgramPage } = await lazy(
-              import('@wsh-2025/client/src/pages/program/components/ProgramPage'),
-              1000,
-            );
+            const { prefetch, ProgramPage } = await import('@wsh-2025/client/src/pages/program/components/ProgramPage');
             return {
               Component: ProgramPage,
               async loader({ params }) {
@@ -55,10 +45,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, SeriesPage } = await lazy(
-              import('@wsh-2025/client/src/pages/series/components/SeriesPage'),
-              1000,
-            );
+            const { prefetch, SeriesPage } = await import('@wsh-2025/client/src/pages/series/components/SeriesPage');
             return {
               Component: SeriesPage,
               async loader({ params }) {
@@ -70,10 +57,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { prefetch, TimetablePage } = await lazy(
-              import('@wsh-2025/client/src/pages/timetable/components/TimetablePage'),
-              1000,
-            );
+            const { prefetch, TimetablePage } = await import('@wsh-2025/client/src/pages/timetable/components/TimetablePage');
             return {
               Component: TimetablePage,
               async loader() {
@@ -85,10 +69,7 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         },
         {
           async lazy() {
-            const { NotFoundPage, prefetch } = await lazy(
-              import('@wsh-2025/client/src/pages/not_found/components/NotFoundPage'),
-              1000,
-            );
+            const { NotFoundPage, prefetch } = await import('@wsh-2025/client/src/pages/not_found/components/NotFoundPage');
             return {
               Component: NotFoundPage,
               async loader() {

diff --git a/workspaces/client/src/features/layout/components/AspectRatio.tsx b/workspaces/client/src/features/layout/components/AspectRatio.tsx
@@ -24,7 +24,7 @@ export const AspectRatio = ({ children, ratioHeight, ratioWidth }: Props) => {
   const height = (width * ratioHeight) / ratioWidth;
 
   return (
-    <div ref={containerRef} className={`h-[${height}px] relative w-full`}>
+    <div ref={containerRef} className="relative w-full" style={{ height: `${height}px` }}>
       {children}
     </div>
   );

diff --git a/workspaces/client/src/features/recommended/components/CarouselSection.tsx b/workspaces/client/src/features/recommended/components/CarouselSection.tsx
@@ -29,7 +29,7 @@ export const CarouselSection = ({ module }: Props) => {
           data-scroll-restore={`carousel-${module.id}`}
         >
           {module.items.map((item) => (
-            <div key={item.id} className={`w-[${itemWidth}px] shrink-0 grow-0`}>
+            <div key={item.id} className="shrink-0 grow-0" style={{ width: `${itemWidth}px` }}>
               {item.series != null ? <SeriesItem series={item.series} /> : null}
               {item.episode != null ? <EpisodeItem episode={item.episode} /> : null}
             </div>

diff --git a/workspaces/client/src/features/recommended/components/EpisodeItem.tsx b/workspaces/client/src/features/recommended/components/EpisodeItem.tsx
@@ -1,4 +1,3 @@
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 
@@ -35,11 +34,11 @@ export const EpisodeItem = ({ episode }: Props) => {
                 </div>
               </Flipped>
               <div className="p-[8px]">
-                <div className="mb-[4px] text-[14px] font-bold text-[#ffffff]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.title} visibleLine={2} />
+                <div className="mb-[4px] text-[14px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.title}
                 </div>
-                <div className="text-[12px] text-[#999999]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.series.title} visibleLine={2} />
+                <div className="text-[12px] text-[#999999] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.series.title}
                 </div>
               </div>
             </>

diff --git a/workspaces/client/src/features/recommended/components/JumbotronSection.tsx b/workspaces/client/src/features/recommended/components/JumbotronSection.tsx
@@ -1,7 +1,6 @@
 import { StandardSchemaV1 } from '@standard-schema/spec';
 import * as schema from '@wsh-2025/schema/src/api/schema';
 import { useRef } from 'react';
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 import invariant from 'tiny-invariant';
@@ -34,11 +33,11 @@ export const JumbotronSection = ({ module }: Props) => {
           return (
             <>
               <div className="grow-1 shrink-1 p-[24px]">
-                <div className="mb-[16px] w-full text-center text-[22px] font-bold text-[#ffffff]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.title} visibleLine={2} />
+                <div className="mb-[16px] w-full text-center text-[22px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.title}
                 </div>
-                <div className="w-full text-center text-[14px] font-bold text-[#ffffff]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={3} text={episode.description} visibleLine={3} />
+                <div className="w-full text-center text-[14px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.description}
                 </div>
               </div>
 

diff --git a/workspaces/client/src/features/recommended/components/SeriesItem.tsx b/workspaces/client/src/features/recommended/components/SeriesItem.tsx
@@ -1,4 +1,3 @@
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 
@@ -25,8 +24,8 @@ export const SeriesItem = ({ series }: Props) => {
                 </Flipped>
               </div>
               <div className="p-[8px]">
-                <div className="text-[14px] font-bold text-[#ffffff]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={series.title} visibleLine={2} />
+                <div className="text-[14px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {series.title}
                 </div>
               </div>
             </>

diff --git a/workspaces/client/src/features/series/components/SeriesEposideItem.tsx b/workspaces/client/src/features/series/components/SeriesEposideItem.tsx
@@ -1,4 +1,3 @@
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { NavLink } from 'react-router';
 
@@ -39,11 +38,11 @@ export const SeriesEpisodeItem = ({ episode, selected }: Props) => {
               </Flipped>
 
               <div className="grow-1 shrink-1">
-                <div className="mb-[8px] text-[18px] font-bold text-[#ffffff]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.title} visibleLine={2} />
+                <div className="mb-[8px] text-[18px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.title}
                 </div>
-                <div className="text-[12px] text-[#999999]">
-                  <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.description} visibleLine={2} />
+                <div className="text-[12px] text-[#999999] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+                  {episode.description}
                 </div>
               </div>
             </>

diff --git a/workspaces/client/src/main.tsx b/workspaces/client/src/main.tsx
@@ -1,6 +1,7 @@
 import '@wsh-2025/client/src/setups/polyfills';
 import '@wsh-2025/client/src/setups/luxon';
-import '@wsh-2025/client/src/setups/unocss';
+import '@unocss/reset/tailwind-compat.css';
+import 'uno.css';
 
 import { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';

diff --git a/workspaces/client/src/pages/episode/components/EpisodePage.tsx b/workspaces/client/src/pages/episode/components/EpisodePage.tsx
@@ -1,5 +1,4 @@
 import { Suspense } from 'react';
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { Params, useParams } from 'react-router';
 import invariant from 'tiny-invariant';
@@ -100,11 +99,11 @@ export const EpisodePage = () => {
         </Flipped>
 
         <div className="mb-[24px]">
-          <div className="text-[16px] text-[#ffffff]">
-            <Ellipsis ellipsis reflowOnResize maxLine={1} text={episode.series.title} visibleLine={1} />
+          <div className="text-[16px] text-[#ffffff] overflow-hidden text-ellipsis whitespace-nowrap">
+            {episode.series.title}
           </div>
-          <h1 className="mt-[8px] text-[22px] font-bold text-[#ffffff]">
-            <Ellipsis ellipsis reflowOnResize maxLine={2} text={episode.title} visibleLine={2} />
+          <h1 className="mt-[8px] text-[22px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+            {episode.title}
           </h1>
           {episode.premium ? (
             <div className="mt-[8px]">
@@ -113,8 +112,8 @@ export const EpisodePage = () => {
               </span>
             </div>
           ) : null}
-          <div className="mt-[16px] text-[16px] text-[#999999]">
-            <Ellipsis ellipsis reflowOnResize maxLine={3} text={episode.description} visibleLine={3} />
+          <div className="mt-[16px] text-[16px] text-[#999999] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+            {episode.description}
           </div>
         </div>
 

diff --git a/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx b/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx
@@ -31,8 +31,10 @@ export const SeekThumbnail = ({ episode }: Props) => {
   return (
     <div
       ref={ref}
-      className={`absolute h-[90px] w-[160px] bg-[size:auto_100%] bg-[url(${seekThumbnail})] bottom-0 translate-x-[-50%]`}
+      className="absolute h-[90px] w-[160px] bg-[size:auto_100%] bottom-0 translate-x-[-50%]"
       style={{
+        backgroundImage: `url(${seekThumbnail})`,
+        backgroundSize: 'auto 100%',
         backgroundPositionX: -1 * SEEK_THUMBNAIL_WIDTH * Math.floor(pointedTime),
         left: Math.max(MIN_LEFT, Math.min(relativeX, MAX_LEFT)),
       }}

diff --git a/workspaces/client/src/pages/episode/hooks/useSeekThumbnail.ts b/workspaces/client/src/pages/episode/hooks/useSeekThumbnail.ts
@@ -1,4 +1,3 @@
-import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { StandardSchemaV1 } from '@standard-schema/spec';
 import * as schema from '@wsh-2025/schema/src/api/schema';
 import { Parser } from 'm3u8-parser';
@@ -8,15 +7,25 @@ interface Params {
   episode: StandardSchemaV1.InferOutput<typeof schema.getEpisodeByIdResponse>;
 }
 
+// FFmpegを動的にインポートする関数
+async function loadFFmpeg() {
+  // 必要になった時点でモジュールをロード
+  const { FFmpeg } = await import('@ffmpeg/ffmpeg');
+  return FFmpeg;
+}
+
 async function getSeekThumbnail({ episode }: Params) {
   // HLS のプレイリストを取得
   const playlistUrl = `/streams/episode/${episode.id}/playlist.m3u8`;
   const parser = new Parser();
   parser.push(await fetch(playlistUrl).then((res) => res.text()));
   parser.end();
 
+  // FFmpegモジュールを動的にロード
+  const FFmpegClass = await loadFFmpeg();
+
   // FFmpeg の初期化
-  const ffmpeg = new FFmpeg();
+  const ffmpeg = new FFmpegClass();
   await ffmpeg.load({
     coreURL: await import('@ffmpeg/core?arraybuffer').then(({ default: b }) => {
       return URL.createObjectURL(new Blob([b], { type: 'text/javascript' }));

diff --git a/workspaces/client/src/pages/program/components/ProgramPage.tsx b/workspaces/client/src/pages/program/components/ProgramPage.tsx
@@ -1,6 +1,5 @@
 import { DateTime } from 'luxon';
 import { useEffect, useRef } from 'react';
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { Link, Params, useNavigate, useParams } from 'react-router';
 import { useUpdate } from 'react-use';
@@ -140,19 +139,19 @@ export const ProgramPage = () => {
         </Flipped>
 
         <div className="mb-[24px]">
-          <div className="text-[16px] text-[#ffffff]">
-            <Ellipsis ellipsis reflowOnResize maxLine={1} text={program.episode.series.title} visibleLine={1} />
+          <div className="text-[16px] text-[#ffffff] overflow-hidden text-ellipsis whitespace-nowrap">
+            {program.episode.series.title}
           </div>
-          <h1 className="mt-[8px] text-[22px] font-bold text-[#ffffff]">
-            <Ellipsis ellipsis reflowOnResize maxLine={2} text={program.title} visibleLine={2} />
+          <h1 className="mt-[8px] text-[22px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+            {program.title}
           </h1>
           <div className="mt-[8px] text-[16px] text-[#999999]">
             {DateTime.fromISO(program.startAt).toFormat('L月d日 H:mm')}
             {' 〜 '}
             {DateTime.fromISO(program.endAt).toFormat('L月d日 H:mm')}
           </div>
-          <div className="mt-[16px] text-[16px] text-[#999999]">
-            <Ellipsis ellipsis reflowOnResize maxLine={3} text={program.description} visibleLine={3} />
+          <div className="mt-[16px] text-[16px] text-[#999999] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+            {program.description}
           </div>
         </div>
 

diff --git a/workspaces/client/src/pages/series/components/SeriesPage.tsx b/workspaces/client/src/pages/series/components/SeriesPage.tsx
@@ -1,4 +1,3 @@
-import Ellipsis from 'react-ellipsis-component';
 import { Flipped } from 'react-flip-toolkit';
 import { Params, useParams } from 'react-router';
 import invariant from 'tiny-invariant';
@@ -41,11 +40,11 @@ export const SeriesPage = () => {
             />
           </Flipped>
           <div className="grow-1 shrink-1 overflow-hidden">
-            <h1 className="mb-[16px] text-[32px] font-bold text-[#ffffff]">
-              <Ellipsis ellipsis reflowOnResize maxLine={2} text={series.title} visibleLine={2} />
+            <h1 className="mb-[16px] text-[32px] font-bold text-[#ffffff] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+              {series.title}
             </h1>
-            <div className="text-[14px] text-[#999999]">
-              <Ellipsis ellipsis reflowOnResize maxLine={3} text={series.description} visibleLine={3} />
+            <div className="text-[14px] text-[#999999] overflow-hidden" style={{ display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', textOverflow: 'ellipsis' }}>
+              {series.description}
             </div>
           </div>
         </header>