CyberAgentHack · kimurash · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 23, 2025
diff --git a/package.json b/package.json
@@ -23,9 +23,6 @@
     "overrides": {
       "es-abstract": "~1.23.9",
       "m3u8-parser>@babel/runtime": "-"
-    },
-    "patchedDependencies": {
-      "shaka-player": "patches/shaka-player.patch"
     }
   },
   "wireit": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/animations/001.gif b/public/animations/001.gif
diff --git a/public/animations/001.mp4 b/public/animations/001.mp4
diff --git a/public/images/thumbnails/caminandes2/preview.jpg b/public/images/thumbnails/caminandes2/preview.jpg
diff --git a/public/images/thumbnails/dailydweebs/preview.jpg b/public/images/thumbnails/dailydweebs/preview.jpg
diff --git a/public/images/thumbnails/glasshalf/preview.jpg b/public/images/thumbnails/glasshalf/preview.jpg
diff --git a/public/images/thumbnails/wing-it/preview.jpg b/public/images/thumbnails/wing-it/preview.jpg
diff --git a/workspaces/client/.gitignore b/workspaces/client/.gitignore
@@ -0,0 +1 @@
+stats.json
diff --git a/workspaces/client/analyze_bundle.sh b/workspaces/client/analyze_bundle.sh
@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# デフォルト値の設定
+DEFALT_SIZE="parsed"
+
+# オプションの処理
+while getopts "s:" opt; do
+  case $opt in
+    s)
+      DEFALT_SIZE="$OPTARG"
+      ;;
+    \?)
+      echo "無効なオプション: -$OPTARG" >&2
+      exit 1
+      ;;
+  esac
+done
+
+pnpm run build
+npx webpack --profile --json > stats.json
+npx webpack-bundle-analyzer stats.json dist -s "$DEFALT_SIZE"
diff --git a/workspaces/client/eslint.config.mjs b/workspaces/client/eslint.config.mjs
@@ -4,5 +4,9 @@ export default [
   ...configs,
   {
     ignores: ['dist/*', '.wireit/*'],
+    rules: {
+      "react/jsx-sort-props": "off",
+      "regexp/no-unused-capturing-group": "off",
+    }
   },
 ];
diff --git a/workspaces/client/package.json b/workspaces/client/package.json
@@ -12,7 +12,6 @@
     "@better-fetch/fetch": "1.1.15",
     "@dhmk/zustand-lens": "5.0.0",
     "@epic-web/restore-scroll": "1.1.1",
-    "@ffmpeg/ffmpeg": "0.12.15",
     "@headlessui/react": "2.2.0",
     "@radix-ui/react-slider": "1.2.3",
     "@standard-schema/spec": "1.0.0",
@@ -22,13 +21,9 @@
     "classnames": "2.5.1",
     "final-form": "4.20.10",
     "immer": "10.1.1",
-    "lodash": "4.17.21",
-    "luxon": "3.5.0",
     "m3u8-parser": "7.2.0",
-    "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",
@@ -40,8 +35,6 @@
     "use-callback-ref": "1.3.3",
     "use-sync-external-store": "1.4.0",
     "valibot": "1.0.0-rc.3",
-    "view-transitions-polyfill": "1.0.3",
-    "zod": "3.24.1",
     "zustand": "5.0.3",
     "zustand-di": "0.0.16"
   },
@@ -50,8 +43,6 @@
     "@babel/preset-env": "7.26.0",
     "@babel/preset-react": "7.25.9",
     "@babel/preset-typescript": "7.26.0",
-    "@ffmpeg/core": "0.12.10",
-    "@ffmpeg/util": "0.12.2",
     "@iconify/json": "2.2.317",
     "@iconify/types": "2.0.0",
     "@types/lodash": "4.17.16",
@@ -60,18 +51,19 @@
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.2",
     "@types/wicg-task-scheduling": "2024.1.0",
-    "@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/preset-wind3": "66.1.0-beta.10",
+    "@unocss/reset": "66.1.0-beta.10",
+    "@unocss/webpack": "66.1.0-beta.10",
     "@wsh-2025/configs": "workspace:*",
     "arraybuffer-loader": "1.0.8",
     "babel-loader": "9.2.1",
-    "core-js": "3.41.0",
+    "css-loader": "7.1.2",
+    "dayjs": "1.11.13",
     "hls.js": "1.5.17",
-    "shaka-player": "4.12.5",
+    "mini-css-extract-plugin": "2.9.2",
+    "style-loader": "4.0.0",
     "typescript": "5.7.2",
-    "video.js": "8.21.0",
+    "unocss": "66.1.0-beta.10",
     "webpack": "5.96.1",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",
@@ -85,6 +77,7 @@
         "../../pnpm-lock.yaml",
         "../schema/src/**/*",
         "./src/**/*",
+        "./uno.config.ts",
         "./webpack.config.mjs"
       ],
       "output": [

diff --git a/workspaces/client/src/app/Document.tsx b/workspaces/client/src/app/Document.tsx
@@ -15,6 +15,7 @@ export const Document = () => {
       <head>
         <meta charSet="UTF-8" />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        <link href="/public/main.css" type="text/css" rel="stylesheet" />
         <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,9 +57,8 @@ 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,
@@ -85,9 +71,8 @@ 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,

diff --git a/workspaces/client/src/app/createStore.ts b/workspaces/client/src/app/createStore.ts
@@ -1,5 +1,4 @@
 import { withLenses } from '@dhmk/zustand-lens';
-import _ from 'lodash';
 import { createStore as createZustandStore } from 'zustand/vanilla';
 
 import { createAuthStoreSlice } from '@wsh-2025/client/src/features/auth/stores/createAuthStoreSlice';
@@ -14,11 +13,7 @@ import { createEpisodePageStoreSlice } from '@wsh-2025/client/src/pages/episode/
 import { createProgramPageStoreSlice } from '@wsh-2025/client/src/pages/program/stores/createProgramPageStoreSlice';
 import { createTimetablePageStoreSlice } from '@wsh-2025/client/src/pages/timetable/stores/createTimetablePageStoreSlice';
 
-interface Props {
-  hydrationData?: unknown;
-}
-
-export const createStore = ({ hydrationData }: Props) => {
+export const createStore = () => {
   const store = createZustandStore(
     withLenses(() => ({
       features: {
@@ -38,8 +33,7 @@ export const createStore = ({ hydrationData }: Props) => {
       },
     })),
   );
-
-  store.setState((s) => _.merge(s, hydrationData));
+  store.setState((s) => s);
 
   return store;
 };
diff --git a/workspaces/client/src/features/auth/components/SignInDialog.tsx b/workspaces/client/src/features/auth/components/SignInDialog.tsx
@@ -2,7 +2,7 @@ import { BetterFetchError } from '@better-fetch/fetch';
 import { FORM_ERROR } from 'final-form';
 import { useId } from 'react';
 import { Field, Form } from 'react-final-form';
-import { z } from 'zod';
+import * as v from 'valibot';
 
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { isValidEmail } from '@wsh-2025/client/src/features/auth/logics/isValidEmail';
@@ -54,16 +54,29 @@ export const SignInDialog = ({ isOpen, onClose, onOpenSignUp }: Props) => {
 
         <Form
           validate={(values) => {
-            const schema = z.object({
-              email: z
-                .string({ required_error: 'メールアドレスを入力してください' })
-                .and(z.custom(isValidEmail, { message: 'メールアドレスが正しくありません' })),
-              password: z
-                .string({ required_error: 'パスワードを入力してください' })
-                .and(z.custom(isValidPassword, { message: 'パスワードが正しくありません' })),
+            const schema = v.object({
+              email: v.optional(
+                v.pipe(
+                  v.string('メールアドレスを入力してください'),
+                  v.minLength(1, 'メールアドレスを入力してください'),
+                  v.check(isValidEmail, 'メールアドレスが正しくありません'),
+                ),
+              ),
+              password: v.optional(
+                v.pipe(
+                  v.string('パスワードを入力してください'),
+                  v.minLength(1, 'パスワードを入力してください'),
+                  v.check(isValidPassword, 'パスワードが正しくありません'),
+                ),
+              ),
             });
-            const result = schema.safeParse(values);
-            return result.success ? undefined : result.error.formErrors.fieldErrors;
+            const result = v.safeParse(schema, values);
+            if (result.success) {
+              return undefined;
+            } else {
+              const errors = v.flatten<typeof schema>(result.issues);
+              return errors.nested;
+            }
           }}
           onSubmit={onSubmit}
         >

diff --git a/workspaces/client/src/features/auth/components/SignUpDialog.tsx b/workspaces/client/src/features/auth/components/SignUpDialog.tsx
@@ -2,7 +2,7 @@ import { BetterFetchError } from '@better-fetch/fetch';
 import { FORM_ERROR } from 'final-form';
 import { useId } from 'react';
 import { Field, Form } from 'react-final-form';
-import { z } from 'zod';
+import * as v from 'valibot';
 
 import { useAuthActions } from '@wsh-2025/client/src/features/auth/hooks/useAuthActions';
 import { isValidEmail } from '@wsh-2025/client/src/features/auth/logics/isValidEmail';
@@ -54,16 +54,29 @@ export const SignUpDialog = ({ isOpen, onClose, onOpenSignIn }: Props) => {
 
         <Form
           validate={(values) => {
-            const schema = z.object({
-              email: z
-                .string({ required_error: 'メールアドレスを入力してください' })
-                .and(z.custom(isValidEmail, { message: 'メールアドレスが正しくありません' })),
-              password: z
-                .string({ required_error: 'パスワードを入力してください' })
-                .and(z.custom(isValidPassword, { message: 'パスワードが正しくありません' })),
+            const schema = v.object({
+              email: v.optional(
+                v.pipe(
+                  v.string('メールアドレスを入力してください'),
+                  v.minLength(1, 'メールアドレスを入力してください'),
+                  v.check(isValidEmail, 'メールアドレスが正しくありません'),
+                ),
+              ),
+              password: v.optional(
+                v.pipe(
+                  v.string('パスワードを入力してください'),
+                  v.minLength(1, 'パスワードを入力してください'),
+                  v.check(isValidPassword, 'パスワードが正しくありません'),
+                ),
+              ),
             });
-            const result = schema.safeParse(values);
-            return result.success ? undefined : result.error.formErrors.fieldErrors;
+            const result = v.safeParse(schema, values);
+            if (result.success) {
+              return undefined;
+            } else {
+              const errors = v.flatten<typeof schema>(result.issues);
+              return errors.nested;
+            }
           }}
           onSubmit={onSubmit}
         >

diff --git a/workspaces/client/src/features/auth/logics/isValidEmail.ts b/workspaces/client/src/features/auth/logics/isValidEmail.ts
@@ -1,3 +1,18 @@
 export const isValidEmail = (email: string): boolean => {
-  return /^([A-Z0-9_+-]+\.?)*[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i.test(email);
+  const parts = email.split('@');
+  if (parts.length !== 2) {
+    return false;
+  }
+
+  const localPart = parts[0] as string;
+  const domainPart = parts[1] as string;
+
+  if (!/^[\w+-]+(?:\.[\w+-]+)*$/.test(localPart)) {
+    return false;
+  }
+  if (!/^[A-Z0-9-]+(?:\.[A-Z0-9-]+)*\.[A-Z]{2,}$/i.test(domainPart)) {
+    return false;
+  }
+
+  return true;
 };
diff --git a/workspaces/client/src/features/auth/logics/isValidPassword.ts b/workspaces/client/src/features/auth/logics/isValidPassword.ts
@@ -1,3 +1,3 @@
 export const isValidPassword = (password: string): boolean => {
-  return /^([A-Z0-9_+-]|[A-Z0-9_+-]){3,}$/i.test(password);
+  return /^[\w+-]{3,}$/.test(password);
 };