[Update/Refactor] Move files to main container.
This commit is contained in:
Sakamoto Shiina
@@ -2,19 +2,20 @@ import { useTranslation } from "react-i18next";
|
||||
import styles from "./MainSection.module.scss";
|
||||
|
||||
import { TopBar } from "./top_bar/TopBar";
|
||||
import { MessageContainer } from "./message_container/MessageContainer";
|
||||
// import { MessageContainer } from "./message_container/MessageContainer";
|
||||
import { LanguageSelector } from "./language_selector/LanguageSelector";
|
||||
|
||||
import { useStore_IsOpenedLanguageSelector } from "@store";
|
||||
import { useLanguageSettings } from "@logics_main";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { SubtitleSystemContainer } from "./subtitle_system_container/SubtitleSystemContainer";
|
||||
export const MainSection = () => {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<TopBar />
|
||||
<MessageContainer />
|
||||
<SubtitleSystemContainer />
|
||||
{/* <MessageContainer /> */}
|
||||
<HandleLanguageSelector />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,410 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import styles from "./SubtitleSystemContainer.module.scss";
|
||||
import { useSendTextToOverlay } from "@logics_configs";
|
||||
|
||||
export const SubtitleSystemContainer = () => {
|
||||
const { sendTextToOverlay } = useSendTextToOverlay();
|
||||
const [srtContent, setSrtContent] = useState("");
|
||||
const [cues, setCues] = useState([]);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
// 再生モード ("relative": ボタン押下から、"absolute": 指定時刻から)
|
||||
const [playbackMode, setPlaybackMode] = useState("relative");
|
||||
// 絶対モード用の再生開始時刻（ドロップダウンで選択、HH:MM）
|
||||
const [targetHour, setTargetHour] = useState("19");
|
||||
const [targetMinute, setTargetMinute] = useState("00");
|
||||
|
||||
// カウントダウン状態
|
||||
// initialCountdown: 再生開始ボタン押下時に算出される元の残り秒数
|
||||
const [initialCountdown, setInitialCountdown] = useState(null);
|
||||
// countdownAdjustment: ユーザーが上下ボタンで調整する値（秒単位）
|
||||
const [countdownAdjustment, setCountdownAdjustment] = useState(0);
|
||||
// effectiveCountdown: (initialCountdown + countdownAdjustment) から経過秒数を差し引いた表示用の値
|
||||
const [effectiveCountdown, setEffectiveCountdown] = useState(null);
|
||||
// cuesScheduled: 字幕タイマーが一度スケジュールされたか
|
||||
const [cuesScheduled, setCuesScheduled] = useState(false);
|
||||
|
||||
// タイマー（setTimeout/setInterval）のID管理用
|
||||
const timersRef = useRef([]);
|
||||
// ファイル入力リセット用の ref
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
// ファイルアップロード時の処理
|
||||
const handleFileUpload = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target.result;
|
||||
setSrtContent(content);
|
||||
let parsedCues = [];
|
||||
// 拡張子により ASS と SRT を判定
|
||||
if (file.name.toLowerCase().endsWith(".ass")) {
|
||||
parsedCues = parseASS(content);
|
||||
} else {
|
||||
parsedCues = parseSRT(content);
|
||||
}
|
||||
setCues(parsedCues);
|
||||
console.log("Parsed cues:", parsedCues);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
// 字幕開始時の処理
|
||||
const startFunction = (cue) => {
|
||||
let send_text = "";
|
||||
if (cue.actor !== "") {
|
||||
send_text = `[${cue.actor}] ${cue.text}`;
|
||||
} else {
|
||||
send_text = `${cue.text}`;
|
||||
}
|
||||
console.log(`字幕開始 (index: ${cue.index}) send_text:${send_text}`);
|
||||
sendTextToOverlay(send_text);
|
||||
};
|
||||
|
||||
// 字幕終了時の処理
|
||||
const endFunction = (cue) => {
|
||||
console.log(`字幕終了 (index: ${cue.index}): ${cue.text}`);
|
||||
// 必要に応じた終了処理（例：テキストクリア）を実装可能
|
||||
// sendTextToOverlay("");
|
||||
};
|
||||
|
||||
// すべてのタイマーを停止し、各状態を初期化する
|
||||
const handleStop = () => {
|
||||
timersRef.current.forEach((timerId) => {
|
||||
clearTimeout(timerId);
|
||||
clearInterval(timerId);
|
||||
});
|
||||
timersRef.current = [];
|
||||
console.log("再生を停止しました。");
|
||||
setIsPlaying(false);
|
||||
setInitialCountdown(null);
|
||||
setEffectiveCountdown(null);
|
||||
setCountdownAdjustment(0);
|
||||
setCuesScheduled(false);
|
||||
};
|
||||
|
||||
// cues のスケジュールを行う（字幕開始時のオフセットは countdownAdjustment * 1000）
|
||||
const scheduleCues = (offset) => {
|
||||
cues.forEach((cue) => {
|
||||
const startDelay = cue.startTime * 1000 + offset;
|
||||
const endDelay = cue.endTime * 1000 + offset;
|
||||
if (startDelay >= 0) {
|
||||
const timerId = setTimeout(() => startFunction(cue), startDelay);
|
||||
timersRef.current.push(timerId);
|
||||
}
|
||||
if (endDelay >= 0) {
|
||||
const timerId = setTimeout(() => endFunction(cue), endDelay);
|
||||
timersRef.current.push(timerId);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// カウントダウンタイマーの開始
|
||||
const startCountdownInterval = (initialValue) => {
|
||||
setEffectiveCountdown(initialValue + countdownAdjustment);
|
||||
const countdownInterval = setInterval(() => {
|
||||
setEffectiveCountdown((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(countdownInterval);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
timersRef.current.push(countdownInterval);
|
||||
};
|
||||
|
||||
// 「再生開始」ボタン押下時の処理
|
||||
const handleStart = () => {
|
||||
handleStop();
|
||||
setIsPlaying(true);
|
||||
setCuesScheduled(false);
|
||||
|
||||
let computedCountdown = 0;
|
||||
if (playbackMode === "absolute") {
|
||||
const now = new Date();
|
||||
const hour = parseInt(targetHour, 10);
|
||||
const minute = parseInt(targetMinute, 10);
|
||||
let targetDate = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth(),
|
||||
now.getDate(),
|
||||
hour,
|
||||
minute,
|
||||
0,
|
||||
0
|
||||
);
|
||||
if (targetDate.getTime() < now.getTime()) {
|
||||
targetDate.setDate(targetDate.getDate() + 1);
|
||||
}
|
||||
computedCountdown = Math.ceil((targetDate.getTime() - now.getTime()) / 1000);
|
||||
} else {
|
||||
computedCountdown = 10; // relative モードの場合は固定値
|
||||
}
|
||||
setInitialCountdown(computedCountdown);
|
||||
setEffectiveCountdown(computedCountdown + countdownAdjustment);
|
||||
sendTextToOverlay((computedCountdown + countdownAdjustment).toString());
|
||||
startCountdownInterval(computedCountdown);
|
||||
};
|
||||
|
||||
// effectiveCountdown が 0 になったとき、字幕開始
|
||||
useEffect(() => {
|
||||
if (
|
||||
isPlaying &&
|
||||
effectiveCountdown !== null &&
|
||||
effectiveCountdown <= 0 &&
|
||||
!cuesScheduled
|
||||
) {
|
||||
sendTextToOverlay("Start.");
|
||||
console.log("Start.");
|
||||
// オフセットは countdownAdjustment × 1000 を字幕に反映
|
||||
scheduleCues(countdownAdjustment * 1000);
|
||||
setCuesScheduled(true);
|
||||
}
|
||||
}, [effectiveCountdown, isPlaying, cuesScheduled, countdownAdjustment]);
|
||||
|
||||
// テーブル内の字幕行をクリック（relative モードのみ）でジャンプ
|
||||
const handleJump = (jumpCue) => {
|
||||
if (playbackMode !== "relative") return;
|
||||
handleStop();
|
||||
const offset = -jumpCue.startTime * 1000;
|
||||
scheduleCues(offset);
|
||||
setIsPlaying(true);
|
||||
};
|
||||
|
||||
// HH:MM:SS 形式に変換する補助関数
|
||||
const formatTime = (timeInSeconds) => {
|
||||
const hours = Math.floor(timeInSeconds / 3600);
|
||||
const minutes = Math.floor((timeInSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(timeInSeconds % 60);
|
||||
return (
|
||||
String(hours).padStart(2, "0") +
|
||||
":" +
|
||||
String(minutes).padStart(2, "0") +
|
||||
":" +
|
||||
String(seconds).padStart(2, "0")
|
||||
);
|
||||
};
|
||||
|
||||
// ファイルクリア
|
||||
const handleClearFile = () => {
|
||||
handleStop();
|
||||
setSrtContent("");
|
||||
setCues([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<h1>字幕プレイヤー</h1>
|
||||
<div className={styles.fileSection}>
|
||||
<label className={styles.label}>
|
||||
SRT/ASSファイルを選択:
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".srt,.ass"
|
||||
onChange={handleFileUpload}
|
||||
className={styles.input}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={handleClearFile} className={styles.fileClear}>
|
||||
ファイルクリア
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.modeSection}>
|
||||
<label className={styles.label}>
|
||||
再生モード:
|
||||
<select
|
||||
value={playbackMode}
|
||||
onChange={(e) => setPlaybackMode(e.target.value)}
|
||||
className={styles.select}
|
||||
>
|
||||
<option value="relative">相対（ボタン押下から）</option>
|
||||
<option value="absolute">絶対（指定時刻から）</option>
|
||||
</select>
|
||||
</label>
|
||||
{playbackMode === "absolute" && (
|
||||
<div className={styles.timeSection}>
|
||||
<label className={styles.label}>再生開始時刻 (HH:MM):</label>
|
||||
<div className={styles.timeSelects}>
|
||||
<select
|
||||
value={targetHour}
|
||||
onChange={(e) => setTargetHour(e.target.value)}
|
||||
className={styles.select}
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => {
|
||||
const hour = i.toString().padStart(2, "0");
|
||||
return (
|
||||
<option key={i} value={hour}>
|
||||
{hour}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
<span>:</span>
|
||||
<select
|
||||
value={targetMinute}
|
||||
onChange={(e) => setTargetMinute(e.target.value)}
|
||||
className={styles.select}
|
||||
>
|
||||
{Array.from({ length: 60 }, (_, i) => {
|
||||
const minute = i.toString().padStart(2, "0");
|
||||
return (
|
||||
<option key={i} value={minute}>
|
||||
{minute}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.controlSection}>
|
||||
<button
|
||||
onClick={handleStart}
|
||||
className={isPlaying ? styles.is_playing : styles.primary}
|
||||
>
|
||||
{isPlaying ? "再生中" : "再生開始"}
|
||||
</button>
|
||||
<button onClick={handleStop} className={styles.secondary}>
|
||||
停止
|
||||
</button>
|
||||
</div>
|
||||
{/* カウントダウン表示：字幕開始前は常に表示 */}
|
||||
{effectiveCountdown !== null && !cuesScheduled && (
|
||||
<div className={styles.countdown}>
|
||||
<span>カウントダウン: {effectiveCountdown} 秒</span>
|
||||
<button
|
||||
onClick={() =>
|
||||
setEffectiveCountdown((prev) => prev + 1)
|
||||
}
|
||||
className={styles.adjustButton}
|
||||
>
|
||||
▲
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
setEffectiveCountdown((prev) => prev - 1)
|
||||
}
|
||||
className={styles.adjustButton}
|
||||
>
|
||||
▼
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* 字幕一覧の表示（relative モードの場合、クリックでジャンプ） */}
|
||||
{cues.length > 0 && (
|
||||
<div className={styles.subtitleSection}>
|
||||
<h2>字幕一覧</h2>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>番号</th>
|
||||
<th>開始</th>
|
||||
<th>終了</th>
|
||||
<th>Actor</th>
|
||||
<th>テキスト</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className={styles.subtitle_lists}>
|
||||
{cues.map((cue) => (
|
||||
<tr
|
||||
key={cue.index}
|
||||
onClick={() => handleJump(cue)}
|
||||
className={styles.tableRow}
|
||||
>
|
||||
<td>{cue.index}</td>
|
||||
<td>{formatTime(cue.startTime)}</td>
|
||||
<td>{formatTime(cue.endTime)}</td>
|
||||
<td>{cue.actor}</td>
|
||||
<td>{cue.text}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className={styles.note}>
|
||||
※ 行をクリックすると、その字幕の位置にジャンプします。（相対モードのみ）
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* SRT形式の文字列を解析する関数
|
||||
* 改行コードを正規化し、空行で分割して解析する
|
||||
* （actor は存在しないため、空文字列をセット）
|
||||
*/
|
||||
const parseSRT = (data) => {
|
||||
const cues = [];
|
||||
const normalizedData = data.replace(/\r\n/g, "\n").trim();
|
||||
const blocks = normalizedData.split(/\n\s*\n/);
|
||||
blocks.forEach((block) => {
|
||||
const lines = block.split("\n").filter((line) => line.trim() !== "");
|
||||
if (lines.length >= 3) {
|
||||
const index = parseInt(lines[0], 10);
|
||||
const timeMatch = lines[1].match(/([\d:,]+)\s+-->\s+([\d:,]+)/);
|
||||
if (!timeMatch) return;
|
||||
const start = parseTime(timeMatch[1]);
|
||||
const end = parseTime(timeMatch[2]);
|
||||
const text = lines.slice(2).join("\n");
|
||||
cues.push({ index, startTime: start, endTime: end, actor: "", text });
|
||||
}
|
||||
});
|
||||
return cues;
|
||||
};
|
||||
|
||||
/**
|
||||
* ASS形式の文字列を解析する関数
|
||||
* [Events] セクション内の "Dialogue:" 行から、
|
||||
* フォーマット "Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text"
|
||||
* に沿って分割する。
|
||||
* ここでは Name を actor、Text を text として抽出する。
|
||||
*/
|
||||
const parseASS = (data) => {
|
||||
const cues = [];
|
||||
const lines = data.split(/\r?\n/);
|
||||
let index = 1;
|
||||
lines.forEach((line) => {
|
||||
if (line.startsWith("Dialogue:")) {
|
||||
const dialogueLine = line.substring("Dialogue:".length).trim();
|
||||
const parts = dialogueLine.split(",");
|
||||
// parts[0]: Layer, parts[1]: Start, parts[2]: End, parts[3]: Style, parts[4]: Name, parts[5]: MarginL, parts[6]: MarginR, parts[7]: MarginV, parts[8]: Effect, parts[9]～: Text
|
||||
if (parts.length < 10) return;
|
||||
const startTime = parseASSTime(parts[1].trim());
|
||||
const endTime = parseASSTime(parts[2].trim());
|
||||
const actor = parts[4].trim();
|
||||
const text = parts.slice(9).join(",").trim();
|
||||
cues.push({ index: index++, startTime, endTime, actor, text });
|
||||
}
|
||||
});
|
||||
return cues;
|
||||
};
|
||||
|
||||
/**
|
||||
* "H:MM:SS.cc" 形式の ASS 時刻文字列を秒数に変換する関数
|
||||
* 例: "0:00:10.52" → 10.52 秒
|
||||
*/
|
||||
const parseASSTime = (timeString) => {
|
||||
const parts = timeString.split(":");
|
||||
if (parts.length !== 3) return 0;
|
||||
const hours = parseFloat(parts[0]);
|
||||
const minutes = parseFloat(parts[1]);
|
||||
const seconds = parseFloat(parts[2]);
|
||||
return hours * 3600 + minutes * 60 + seconds;
|
||||
};
|
||||
|
||||
/**
|
||||
* "HH:MM:SS,mmm" 形式の SRT 時刻文字列を秒数に変換する関数
|
||||
*/
|
||||
const parseTime = (timeString) => {
|
||||
const [hms, ms] = timeString.split(",");
|
||||
const [hours, minutes, seconds] = hms.split(":").map(Number);
|
||||
return hours * 3600 + minutes * 60 + seconds + Number(ms) / 1000;
|
||||
};
|
||||
@@ -0,0 +1,157 @@
|
||||
.container {
|
||||
padding: 4rem;
|
||||
background: #1e1e1e;
|
||||
color: #ffffff;
|
||||
border-radius: 1rem;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
font-size: 1.6rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 0.1rem solid #ccc;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
// ボタンの基本スタイル
|
||||
button {
|
||||
font-size: 1.8rem;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// 再生開始用ボタン（通常時）
|
||||
.primary {
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
// 再生停止用ボタン
|
||||
.secondary {
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #a71d2a;
|
||||
}
|
||||
}
|
||||
|
||||
// ファイルクリア用ボタン
|
||||
.file-clear {
|
||||
background: #6c757d;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
}
|
||||
|
||||
// 「再生中」状態（クリック不可）用のスタイル
|
||||
.is_playing {
|
||||
background: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// カウントダウン表示用エリア
|
||||
.countdown {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.6rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.4rem;
|
||||
background: #28a745;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #218838;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 再生モードや時刻指定の select 関連（横並びの場合などに調整）
|
||||
.time-selects {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
// 字幕一覧のテーブル
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 2rem;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 1rem;
|
||||
border: 0.1rem solid #444;
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle_lists {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user