-
-
-
- -
- Get started by editing{" "}
-
- src/app/page.tsx
-
- .
-
- -
- Save and see your changes instantly.
-
-
-
-
-
-
+
+
+
);
}
diff --git a/src/app/srt-player/components/AppCard.tsx b/src/app/srt-player/components/AppCard.tsx
new file mode 100644
index 0000000..5e58f72
--- /dev/null
+++ b/src/app/srt-player/components/AppCard.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useRef, useState } from "react";
+import UploadArea from "./UploadArea";
+import VideoPanel from "./VideoPlayer/VideoPanel";
+
+export default function AppCard() {
+ const videoRef = useRef
(null);
+
+ const [videoUrl, setVideoUrl] = useState(null);
+ const [srtUrl, setSrtUrl] = useState(null);
+
+ return (
+
+ );
+}
diff --git a/src/app/srt-player/components/Button.tsx b/src/app/srt-player/components/Button.tsx
new file mode 100644
index 0000000..74f88fb
--- /dev/null
+++ b/src/app/srt-player/components/Button.tsx
@@ -0,0 +1,7 @@
+export default function Button({ label, onClick }: { label: string, onClick?: () => void }) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/srt-player/components/UploadArea.tsx b/src/app/srt-player/components/UploadArea.tsx
new file mode 100644
index 0000000..530f299
--- /dev/null
+++ b/src/app/srt-player/components/UploadArea.tsx
@@ -0,0 +1,75 @@
+import { useRef, useState } from "react";
+import Button from "./Button";
+
+export default function UploadArea(
+ {
+ setVideoUrl,
+ setSrtUrl
+ }: {
+ setVideoUrl: (url: string | null) => void;
+ setSrtUrl: (url: string | null) => void;
+ }
+) {
+ const inputRef = useRef(null);
+
+ const [videoFile, setVideoFile] = useState(null);
+ const [SrtFile, setSrtFile] = useState(null);
+
+ const uploadVideo = () => {
+ const input = inputRef.current;
+ if (input) {
+ input.setAttribute('accept', 'video/*');
+ input.click();
+ input.onchange = () => {
+ const file = input.files?.[0];
+ if (file) {
+ setVideoFile(file);
+ setVideoUrl(URL.createObjectURL(file));
+ }
+ };
+ }
+ }
+ const uploadSRT = () => {
+ const input = inputRef.current;
+ if (input) {
+ input.setAttribute('accept', '.srt');
+ input.click();
+ input.onchange = () => {
+ const file = input.files?.[0];
+ if (file) {
+ setSrtFile(file);
+ setSrtUrl(URL.createObjectURL(file));
+ }
+ };
+ }
+ }
+ return (
+
+
+
+
+ | File Name |
+ Type |
+ Size |
+ Actions |
+
+
+
+
+ | {videoFile?.name} |
+ Video |
+ {videoFile ? (videoFile.size / 1024 / 1024).toFixed(2) + 'MB' : null} |
+ |
+
+
+ | {SrtFile?.name} |
+ SRT |
+ {SrtFile ? (SrtFile.size / 1024 / 1024).toFixed(2) + 'MB' : null} |
+ |
+
+
+
+
+
+ {
+ words.map((v) => (
+
+ {v + ' '}
+
+ ))
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx b/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx
new file mode 100644
index 0000000..712b5b9
--- /dev/null
+++ b/src/app/srt-player/components/VideoPlayer/VideoPanel.tsx
@@ -0,0 +1,177 @@
+import { useState, useRef, forwardRef, useEffect, KeyboardEvent, useCallback } from "react";
+import Button from "../Button";
+import { getIndex, getNearistIndex, parseSrt } from "../../subtitle";
+import SubtitleDisplay from "./SubtitleDisplay";
+
+type VideoPanelProps = {
+ videoUrl: string | null;
+ srtUrl: string | null;
+};
+
+const VideoPanel = forwardRef((
+ { videoUrl, srtUrl }, videoRef
+) => {
+ videoRef = videoRef as React.RefObject;
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [srtLength, setSrtLength] = useState(0);
+ const [progress, setProgress] = useState(-1);
+ const [autoPause, setAutoPause] = useState(true);
+ const [spanText, setSpanText] = useState('');
+ const [subtitle, setSubtitle] = useState('');
+ const parsedSrtRef = useRef<{ start: number; end: number; text: string; }[] | null>(null);
+ const rafldRef = useRef(0);
+ const ready = useRef({
+ 'vid': false,
+ 'sub': false,
+ 'all': function () { return this.vid && this.sub }
+ });
+
+ const togglePlayPause = useCallback(() => {
+ if (!videoUrl) return;
+
+ const video = videoRef.current;
+ if (!video) return;
+ if (video.paused || video.currentTime === 0) {
+ video.play();
+ } else {
+ video.pause();
+ }
+ setIsPlaying(!video.paused);
+ }, [videoRef, videoUrl]);
+
+ useEffect(() => {
+ const cb = () => {
+ if (ready.current.all()) {
+ if (!parsedSrtRef.current) {
+ ;
+ } else if (isPlaying) {
+ // 这里负责显示当前时间的字幕与自动暂停
+ const srt = parsedSrtRef.current;
+ const ct = videoRef.current?.currentTime as number;
+ const index = getIndex(srt, ct);
+ if (index !== null) {
+ setSubtitle(srt[index].text)
+ if (autoPause && ct >= (srt[index].end - 0.05) && ct < srt[index].end) {
+ videoRef.current!.currentTime = srt[index].start;
+ togglePlayPause();
+ }
+ } else {
+ setSubtitle('');
+ }
+ } else {
+ ;
+ }
+ }
+ rafldRef.current = requestAnimationFrame(cb);
+ }
+ rafldRef.current = requestAnimationFrame(cb);
+ return () => {
+ cancelAnimationFrame(rafldRef.current);
+ }
+ }, [autoPause, isPlaying, togglePlayPause, videoRef]);
+
+ useEffect(() => {
+ if (videoUrl && videoRef.current) {
+ videoRef.current.src = videoUrl;
+ videoRef.current.load();
+ setIsPlaying(false);
+ ready.current['vid'] = true;
+ }
+ }, [videoRef, videoUrl]);
+ useEffect(() => {
+ if (srtUrl) {
+ fetch(srtUrl)
+ .then(response => response.text())
+ .then(data => {
+ parsedSrtRef.current = parseSrt(data);
+ setSrtLength(parsedSrtRef.current.length);
+ ready.current['sub'] = true;
+ });
+ }
+ }, [srtUrl]);
+
+ const timeUpdate = () => {
+ if (!parsedSrtRef.current || !videoRef.current) return;
+ const index = getIndex(parsedSrtRef.current, videoRef.current.currentTime);
+ if (!index) return;
+ setSpanText(`${index + 1}/${parsedSrtRef.current.length}`)
+ }
+
+ const handleSeek = (e: React.ChangeEvent) => {
+ if (videoRef.current && parsedSrtRef.current) {
+ const newProgress = parseInt(e.target.value);
+ videoRef.current.currentTime = parsedSrtRef.current[newProgress]?.start || 0;
+ setProgress(newProgress);
+ }
+ };
+
+ const handleAutoPauseToggle = () => {
+ setAutoPause(!autoPause);
+ };
+
+ const next = () => {
+ if (!parsedSrtRef.current || !videoRef.current) return;
+ const i = getNearistIndex(parsedSrtRef.current, videoRef.current.currentTime);
+ if (i != null && i + 1 < parsedSrtRef.current.length) {
+ videoRef.current.currentTime = parsedSrtRef.current[i + 1].start;
+ videoRef.current.play();
+ setIsPlaying(true);
+ }
+ }
+
+ const previous = () => {
+ if (!parsedSrtRef.current || !videoRef.current) return;
+ const i = getNearistIndex(parsedSrtRef.current, videoRef.current.currentTime);
+ if (i != null && i - 1 >= 0) {
+ videoRef.current.currentTime = parsedSrtRef.current[i - 1].start;
+ videoRef.current.play();
+ setIsPlaying(true);
+ }
+ }
+
+ const restart = () => {
+ if (!parsedSrtRef.current || !videoRef.current) return;
+ const i = getNearistIndex(parsedSrtRef.current, videoRef.current.currentTime);
+ if (i != null && i >= 0) {
+ videoRef.current.currentTime = parsedSrtRef.current[i].start;
+ videoRef.current.play();
+ setIsPlaying(true);
+ }
+ }
+
+ const handleKeyDownEvent = (e: KeyboardEvent) => {
+ if (e.key === 'n') {
+ next();
+ } else if (e.key === 'p') {
+ previous();
+ } else if (e.key === ' ') {
+ togglePlayPause();
+ } else if (e.key === 'r') {
+ restart();
+ } else if (e.key === 'a') {
+ ; handleAutoPauseToggle();
+ }
+ }
+
+ return (
+
+ );
+});
+
+VideoPanel.displayName = 'VideoPanel';
+
+export default VideoPanel;
\ No newline at end of file
diff --git a/src/app/srt-player/layout.tsx b/src/app/srt-player/layout.tsx
new file mode 100644
index 0000000..81acea9
--- /dev/null
+++ b/src/app/srt-player/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../globals.css";
+
+const geistSans = Geist({
+ variable: "--font-geist-sans",
+ subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+ title: "SRT Video Player",
+ description: "Practice spoken English",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/srt-player/page.tsx b/src/app/srt-player/page.tsx
new file mode 100644
index 0000000..34bca58
--- /dev/null
+++ b/src/app/srt-player/page.tsx
@@ -0,0 +1,9 @@
+import AppCard from "./components/AppCard";
+
+export default function Home() {
+ return (
+
+ );
+}
diff --git a/src/app/srt-player/subtitle.ts b/src/app/srt-player/subtitle.ts
new file mode 100644
index 0000000..00f3f25
--- /dev/null
+++ b/src/app/srt-player/subtitle.ts
@@ -0,0 +1,52 @@
+export function parseSrt(data: string) {
+ const lines = data.split(/\r?\n/);
+ const result = [];
+ const re = new RegExp('(\\d{2}:\\d{2}:\\d{2},\\d{3})\\s*-->\\s*(\\d{2}:\\d{2}:\\d{2},\\d{3})');
+ let i = 0;
+ while (i < lines.length) {
+ if (!lines[i].trim()) { i++; continue; }
+ i++;
+ if (i >= lines.length) break;
+ const timeMatch = lines[i].match(re);
+ if (!timeMatch) { i++; continue; }
+ const start = toSeconds(timeMatch[1]);
+ const end = toSeconds(timeMatch[2]);
+ i++;
+ let text = '';
+ while (i < lines.length && lines[i].trim()) {
+ text += lines[i] + '\n';
+ i++;
+ }
+ result.push({ start, end, text: text.trim() });
+ i++;
+ }
+ return result;
+}
+
+export function getNearistIndex(srt: { start: number; end: number; text: string; }[], ct: number) {
+ for (let i = 0; i < srt.length; i++) {
+ const s = srt[i];
+ const l = ct - s.start >= 0;
+ const r = ct - s.end >= 0;
+ if (!(l || r)) return i - 1;
+ if (l && (!r)) return i;
+ }
+}
+
+export function getIndex(srt: { start: number; end: number; text: string; }[], ct: number) {
+ for (let i = 0; i < srt.length; i++) {
+ if (ct >= srt[i].start && ct <= srt[i].end) {
+ return i;
+ }
+ }
+ return null;
+}
+
+export function getSubtitle(srt: { start: number; end: number; text: string; }[], currentTime: number) {
+ return srt.find(sub => currentTime >= sub.start && currentTime <= sub.end) || null;
+}
+
+function toSeconds(timeStr: string): number {
+ const [h, m, s] = timeStr.replace(',', '.').split(':');
+ return parseFloat((parseInt(h) * 3600 + parseInt(m) * 60 + parseFloat(s)).toFixed(3));
+}
diff --git a/src/app/word-board/Button.tsx b/src/app/word-board/Button.tsx
new file mode 100644
index 0000000..74f88fb
--- /dev/null
+++ b/src/app/word-board/Button.tsx
@@ -0,0 +1,7 @@
+export default function Button({ label, onClick }: { label: string, onClick?: () => void }) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/word-board/WordBoard.tsx b/src/app/word-board/WordBoard.tsx
new file mode 100644
index 0000000..252558f
--- /dev/null
+++ b/src/app/word-board/WordBoard.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+export default function WordBoard(
+ { words }: {
+ words: [
+ {
+ word: string,
+ x: number,
+ y: number
+ }
+ ]
+ }
+) {
+ const inspect = (word: string) => {
+ const goto = (url: string) => {
+ window.open(url, '_blank');
+ }
+ return () => {
+ word = word.toLowerCase();
+ goto(`https://www.youdao.com/result?word=${word}&lang=en`);
+ }
+ }
+ return (
+
+ {words.map(
+ (v: {
+ word: string,
+ x: number,
+ y: number
+ }, i: number) => {
+ return ({v.word})
+ })}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/word-board/layout.tsx b/src/app/word-board/layout.tsx
new file mode 100644
index 0000000..76225f4
--- /dev/null
+++ b/src/app/word-board/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../globals.css";
+
+const geistSans = Geist({
+ variable: "--font-geist-sans",
+ subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+ title: "Word Board",
+ description: "Word board page",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/word-board/page.tsx b/src/app/word-board/page.tsx
new file mode 100644
index 0000000..c0773a8
--- /dev/null
+++ b/src/app/word-board/page.tsx
@@ -0,0 +1,94 @@
+'use client';
+import WordBoard from "@/app/word-board/WordBoard";
+import Button from "./Button";
+import { useRef, useState } from "react";
+
+interface Word {
+ word: string,
+ x: number,
+ y: number
+}
+
+export default function Home() {
+ const inputRef = useRef(null);
+ const inputFileRef = useRef(null);
+ const initialWords =
+ [
+ // 'apple',
+ // 'banana',
+ // 'cannon',
+ // 'desktop',
+ // 'kernel',
+ // 'system',
+ // 'programming',
+ // 'owe'
+ ] as Array;
+ const [words, setWords] = useState(
+ initialWords.map((v: string) => ({
+ 'word': v,
+ 'x': Math.random(),
+ 'y': Math.random()
+ }))
+ );
+ const generateNewWord = (word: string) => {
+ return {
+ word: word,
+ x: Math.random(),
+ y: Math.random()
+ } as Word;
+ }
+ const insertWord = () => {
+ if (!inputRef.current) return;
+ const word = inputRef.current.value.trim();
+ if (word === '') return;
+ setWords([...words, generateNewWord(word)]);
+ inputRef.current.value = '';
+ }
+ const deleteWord = () => {
+ if (!inputRef.current) return;
+ const word = inputRef.current.value.trim();
+ if (word === '') return;
+ setWords(words.filter((v) => v.word !== word));
+ inputRef.current.value = '';
+ };
+ const importWords = () => {
+ inputFileRef.current?.click();
+ }
+ const exportWords = () => {
+ const blob = new Blob([JSON.stringify(words)], {
+ type: 'application/json'
+ });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${Date.now()}.json`;
+ a.style.display = 'none';
+ a.click();
+ URL.revokeObjectURL(url);
+ }
+ const handleFileChange = () => {
+ const files = inputFileRef.current?.files;
+ if (files && files.length > 0) {
+ const reader = new FileReader();
+ reader.onload = () => {
+ if (reader.result && typeof reader.result === 'string')
+ setWords(JSON.parse(reader.result) as [Word]);
+ }
+ reader.readAsText(files[0]);
+ }
+ }
+ return (
+
+ );
+}