@@ -69,24 +66,25 @@ export const EpisodePage = () => {
) : (
+
}
>
@@ -100,12 +98,8 @@ export const EpisodePage = () => {
-
-
-
-
-
-
+
{episode.series.title}
+
{episode.title}
{episode.premium ? (
@@ -113,9 +107,7 @@ export const EpisodePage = () => {
) : null}
-
-
-
+
{episode.description}
{modules[0] != null ? (
diff --git a/workspaces/client/src/pages/episode/components/PlayerController.tsx b/workspaces/client/src/pages/episode/components/PlayerController.tsx
index f090a17a9..f55d61174 100644
--- a/workspaces/client/src/pages/episode/components/PlayerController.tsx
+++ b/workspaces/client/src/pages/episode/components/PlayerController.tsx
@@ -1,10 +1,10 @@
import * as Slider from '@radix-ui/react-slider';
import { StandardSchemaV1 } from '@standard-schema/spec';
-import * as schema from '@wsh-2025/schema/src/api/schema';
-import { Duration } from 'luxon';
+import type * as schema from '@wsh-2025/schema/src/openapi/schema';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
import invariant from 'tiny-invariant';
-import { Hoverable } from '@wsh-2025/client/src/features/layout/components/Hoverable';
import { SeekThumbnail } from '@wsh-2025/client/src/pages/episode/components/SeekThumbnail';
import { useCurrentTime } from '@wsh-2025/client/src/pages/episode/hooks/useCurrentTime';
import { useDuration } from '@wsh-2025/client/src/pages/episode/hooks/useDuration';
@@ -52,44 +52,46 @@ export const PlayerController = ({ episode }: Props) => {
-
-
-
+
- {Duration.fromObject({ seconds: currentTime }).toFormat('mm:ss')}
+ {dayjs.duration(currentTime, 'seconds').format('mm:ss')}
{' / '}
- {Duration.fromObject({ seconds: duration }).toFormat('mm:ss')}
+ {dayjs.duration(duration, 'seconds').format('mm:ss')}
-
-
-
+
diff --git a/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx b/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx
index b706a379b..e3878793c 100644
--- a/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx
+++ b/workspaces/client/src/pages/episode/components/SeekThumbnail.tsx
@@ -1,8 +1,7 @@
import { StandardSchemaV1 } from '@standard-schema/spec';
-import * as schema from '@wsh-2025/schema/src/api/schema';
-import { useRef } from 'react';
+import type * as schema from '@wsh-2025/schema/src/openapi/schema';
+import { useEffect, useRef, useState } from 'react';
-import { usePointer } from '@wsh-2025/client/src/features/layout/hooks/usePointer';
import { useDuration } from '@wsh-2025/client/src/pages/episode/hooks/useDuration';
import { useSeekThumbnail } from '@wsh-2025/client/src/pages/episode/hooks/useSeekThumbnail';
@@ -14,14 +13,26 @@ interface Props {
export const SeekThumbnail = ({ episode }: Props) => {
const ref = useRef(null);
- const seekThumbnail = useSeekThumbnail({ episode });
- const pointer = usePointer();
+ const seekThumbnailUrl = useSeekThumbnail({ episode });
const duration = useDuration();
+ const [pointer, setPointer] = useState({ x: 0, y: 0 });
+
+ useEffect(() => {
+ const handlePointerMove = (ev: MouseEvent) => {
+ setPointer({ x: ev.clientX, y: ev.clientY });
+ };
+ window.addEventListener('pointermove', handlePointerMove);
+
+ return () => {
+ window.removeEventListener('pointermove', handlePointerMove);
+ };
+ }, [ref]);
+
const elementRect = ref.current?.parentElement?.getBoundingClientRect() ?? { left: 0, width: 0 };
const relativeX = pointer.x - elementRect.left;
- const percentage = Math.max(0, Math.min(relativeX / elementRect.width, 1));
+ const percentage = Math.max(0, Math.min(0 < elementRect.width ? relativeX / elementRect.width : 0, 1));
const pointedTime = duration * percentage;
// サムネイルが画面からはみ出ないようにサムネイル中央を基準として left を計算する
@@ -31,8 +42,9 @@ export const SeekThumbnail = ({ episode }: Props) => {
return (
;
}
-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 ffmpeg = new FFmpeg();
- await ffmpeg.load({
- 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' }));
- }),
- });
-
- // 動画のセグメントファイルを取得
- const segmentFiles = await Promise.all(
- parser.manifest.segments.map((s) => {
- return fetch(s.uri).then(async (res) => {
- const binary = await res.arrayBuffer();
- return { binary, id: Math.random().toString(36).slice(2) };
- });
- }),
- );
- // FFmpeg にセグメントファイルを追加
- for (const file of segmentFiles) {
- await ffmpeg.writeFile(file.id, new Uint8Array(file.binary));
- }
-
- // セグメントファイルをひとつの mp4 動画に結合
- await ffmpeg.exec(
- [
- ['-i', `concat:${segmentFiles.map((f) => f.id).join('|')}`],
- ['-c:v', 'copy'],
- ['-map', '0:v:0'],
- ['-f', 'mp4'],
- 'concat.mp4',
- ].flat(),
- );
-
- // fps=30 とみなして、30 フレームごと（1 秒ごと）にサムネイルを生成
- await ffmpeg.exec(
- [
- ['-i', 'concat.mp4'],
- ['-vf', "fps=30,select='not(mod(n\\,30))',scale=160:90,tile=250x1"],
- ['-frames:v', '1'],
- 'preview.jpg',
- ].flat(),
- );
-
- const output = await ffmpeg.readFile('preview.jpg');
- ffmpeg.terminate();
-
- return URL.createObjectURL(new Blob([output], { type: 'image/jpeg' }));
-}
-
-const weakMap = new WeakMap
>();
-
export const useSeekThumbnail = ({ episode }: Params): string => {
- const promise = weakMap.get(episode) ?? getSeekThumbnail({ episode });
- weakMap.set(episode, promise);
- return use(promise);
+ return `/public/images/thumbnails/${episode.streamId}/preview.jpg`;
};
diff --git a/workspaces/client/src/pages/not_found/components/NotFoundPage.tsx b/workspaces/client/src/pages/not_found/components/NotFoundPage.tsx
index 66c861769..c446b68d5 100644
--- a/workspaces/client/src/pages/not_found/components/NotFoundPage.tsx
+++ b/workspaces/client/src/pages/not_found/components/NotFoundPage.tsx
@@ -21,7 +21,10 @@ export const NotFoundPage = () => {
ページが見つかりませんでした
あなたが見ようとしたページは、残念ながら見つけられませんでした。
- 
+
{module != null ? : null}