mirror of
https://github.com/ksyasuda/SubMiner.git
synced 2026-09-08 17:16:18 -07:00
feat(anki): add media timing review before card creation (#203)
This commit is contained in:
@@ -452,6 +452,7 @@ function createKeyboardHandlerHarness() {
|
||||
const testGlobals = installKeyboardTestGlobals();
|
||||
const subtitleRootClassList = createClassList();
|
||||
const subtitleContainerClassList = createClassList();
|
||||
let mediaTimingReviewKeydownCount = 0;
|
||||
let controllerSelectKeydownCount = 0;
|
||||
let openControllerSelectCount = 0;
|
||||
let openControllerDebugCount = 0;
|
||||
@@ -494,6 +495,10 @@ function createKeyboardHandlerHarness() {
|
||||
handleKikuKeydown: () => false,
|
||||
handleJimakuKeydown: () => false,
|
||||
handleTsukihimeKeydown: () => false,
|
||||
handleMediaTimingReviewKeydown: () => {
|
||||
mediaTimingReviewKeydownCount += 1;
|
||||
return false;
|
||||
},
|
||||
handleControllerSelectKeydown: () => {
|
||||
controllerSelectKeydownCount += 1;
|
||||
return true;
|
||||
@@ -523,6 +528,7 @@ function createKeyboardHandlerHarness() {
|
||||
ctx,
|
||||
handlers,
|
||||
testGlobals,
|
||||
mediaTimingReviewKeydownCount: () => mediaTimingReviewKeydownCount,
|
||||
controllerSelectKeydownCount: () => controllerSelectKeydownCount,
|
||||
openControllerSelectCount: () => openControllerSelectCount,
|
||||
openControllerDebugCount: () => openControllerDebugCount,
|
||||
@@ -1367,6 +1373,29 @@ test('keyboard mode: controller select modal handles arrow keys before yomitan p
|
||||
}
|
||||
});
|
||||
|
||||
test('media timing review modal handles keys before later modal handlers', async () => {
|
||||
const {
|
||||
ctx,
|
||||
testGlobals,
|
||||
handlers,
|
||||
mediaTimingReviewKeydownCount,
|
||||
controllerSelectKeydownCount,
|
||||
} = createKeyboardHandlerHarness();
|
||||
|
||||
try {
|
||||
await handlers.setupMpvInputForwarding();
|
||||
ctx.state.mediaTimingReviewModalOpen = true;
|
||||
ctx.state.controllerSelectModalOpen = true;
|
||||
|
||||
testGlobals.dispatchKeydown({ key: 'ArrowDown', code: 'ArrowDown' });
|
||||
|
||||
assert.equal(mediaTimingReviewKeydownCount(), 1);
|
||||
assert.equal(controllerSelectKeydownCount(), 0);
|
||||
} finally {
|
||||
testGlobals.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard mode: playlist browser modal handles arrow keys before yomitan popup', async () => {
|
||||
const { ctx, testGlobals, handlers, playlistBrowserKeydownCount } =
|
||||
createKeyboardHandlerHarness();
|
||||
|
||||
@@ -18,6 +18,7 @@ export function createKeyboardHandlers(
|
||||
handleJimakuKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleTsukihimeKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleYoutubePickerKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleMediaTimingReviewKeydown: (e: KeyboardEvent) => boolean;
|
||||
handlePlaylistBrowserKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleControllerSelectKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleControllerDebugKeydown: (e: KeyboardEvent) => boolean;
|
||||
@@ -1078,6 +1079,11 @@ export function createKeyboardHandlers(
|
||||
);
|
||||
|
||||
document.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (ctx.state.mediaTimingReviewModalOpen) {
|
||||
options.handleMediaTimingReviewKeydown(e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isKeyboardDrivenModeToggle(e) && ctx.platform.isModalLayer) {
|
||||
e.preventDefault();
|
||||
handleKeyboardModeToggleRequested();
|
||||
|
||||
@@ -196,6 +196,300 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="mediaTimingReviewModal"
|
||||
class="modal media-timing-review-modal hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="modal-content media-timing-review-content"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="mediaTimingReviewTitle"
|
||||
>
|
||||
<div class="media-timing-review-header">
|
||||
<div class="media-timing-review-heading">
|
||||
<div id="mediaTimingReviewTitle" class="media-timing-review-title">
|
||||
Review media timing
|
||||
</div>
|
||||
<div id="mediaTimingReviewKind" class="media-timing-review-kind">Sentence card</div>
|
||||
</div>
|
||||
<button
|
||||
id="mediaTimingReviewCancel"
|
||||
class="media-timing-review-quiet-button"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="mediaTimingReviewEditor" class="media-timing-review-editor">
|
||||
<div class="media-timing-review-sentence-header">
|
||||
<div class="media-timing-review-sentence-heading">
|
||||
<span class="media-timing-review-sentence-label">Sentence on card</span>
|
||||
<span id="mediaTimingReviewLineCount" class="media-timing-review-line-count">
|
||||
1 line
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
id="mediaTimingReviewLineControls"
|
||||
class="media-timing-review-line-controls hidden"
|
||||
>
|
||||
<div class="media-timing-review-line-stepper">
|
||||
<span>Prev</span>
|
||||
<button
|
||||
id="mediaTimingReviewPrevRemove"
|
||||
type="button"
|
||||
aria-label="Remove the earliest added previous subtitle line from the card sentence"
|
||||
title="Remove the earliest previous line (Shift+P)"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewPrevAdd"
|
||||
type="button"
|
||||
aria-label="Add the previous subtitle line to the card sentence"
|
||||
title="Add the previous line (P)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div class="media-timing-review-line-stepper">
|
||||
<span>Next</span>
|
||||
<button
|
||||
id="mediaTimingReviewNextRemove"
|
||||
type="button"
|
||||
aria-label="Remove the latest added next subtitle line from the card sentence"
|
||||
title="Remove the latest next line (Shift+N)"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewNextAdd"
|
||||
type="button"
|
||||
aria-label="Add the next subtitle line to the card sentence"
|
||||
title="Add the next line (N)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote id="mediaTimingReviewText" class="media-timing-review-text"></blockquote>
|
||||
|
||||
<div class="media-timing-review-readout" aria-live="polite">
|
||||
<div>
|
||||
<span>Starts</span>
|
||||
<strong id="mediaTimingReviewStartValue">00:00.000</strong>
|
||||
</div>
|
||||
<div class="media-timing-review-duration">
|
||||
<span>Clip length</span>
|
||||
<strong id="mediaTimingReviewDuration">0.00s</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Ends</span>
|
||||
<strong id="mediaTimingReviewEndValue">00:00.000</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-timing-review-timeline-shell">
|
||||
<div class="media-timing-review-timeline-labels">
|
||||
<span id="mediaTimingReviewTimelineStart">00:00</span>
|
||||
<span id="mediaTimingReviewWaveformLabel">speech-weighted waveform</span>
|
||||
<span id="mediaTimingReviewTimelineEnd">00:00</span>
|
||||
</div>
|
||||
<div id="mediaTimingReviewSelectionTrack" class="media-timing-review-track">
|
||||
<svg
|
||||
class="media-timing-review-waveform"
|
||||
viewBox="0 0 1000 100"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="mediaTimingReviewWaveformFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop class="media-timing-review-waveform-edge-stop" offset="0%" />
|
||||
<stop class="media-timing-review-waveform-core-stop" offset="50%" />
|
||||
<stop class="media-timing-review-waveform-edge-stop" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path id="mediaTimingReviewWaveformPath"></path>
|
||||
</svg>
|
||||
<div
|
||||
class="media-timing-review-original-range"
|
||||
title="Mined subtitle timing"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="media-timing-review-original-boundary is-start"></span>
|
||||
<span class="media-timing-review-original-boundary is-end"></span>
|
||||
</div>
|
||||
<span class="media-timing-review-original-label is-start" aria-hidden="true">
|
||||
Line start
|
||||
</span>
|
||||
<span class="media-timing-review-original-label is-end" aria-hidden="true">
|
||||
Line end
|
||||
</span>
|
||||
<div
|
||||
id="mediaTimingReviewSelectedRange"
|
||||
class="media-timing-review-selected-range"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<div class="media-timing-review-playhead" aria-hidden="true"></div>
|
||||
<div
|
||||
id="mediaTimingReviewStartHandle"
|
||||
class="media-timing-review-handle media-timing-review-handle-start"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-label="Clip start"
|
||||
aria-orientation="horizontal"
|
||||
></div>
|
||||
<div
|
||||
id="mediaTimingReviewEndHandle"
|
||||
class="media-timing-review-handle media-timing-review-handle-end"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-label="Clip end"
|
||||
aria-orientation="horizontal"
|
||||
></div>
|
||||
</div>
|
||||
<div class="media-timing-review-expand-row">
|
||||
<button
|
||||
id="mediaTimingReviewShowEarlier"
|
||||
class="media-timing-review-expand-button"
|
||||
type="button"
|
||||
aria-label="Show two more seconds before the visible timeline without moving the selected clip"
|
||||
title="Show 2 more seconds before the visible timeline. The selected clip does not move."
|
||||
>
|
||||
Earlier −2s
|
||||
</button>
|
||||
<span>Drag an edge to trim, or drag the highlighted clip to move it.</span>
|
||||
<button
|
||||
id="mediaTimingReviewShowLater"
|
||||
class="media-timing-review-expand-button"
|
||||
type="button"
|
||||
aria-label="Show two more seconds after the visible timeline without moving the selected clip"
|
||||
title="Show 2 more seconds after the visible timeline. The selected clip does not move."
|
||||
>
|
||||
Later +2s
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-timing-review-fine-grid">
|
||||
<div class="media-timing-review-fine-control">
|
||||
<span>Start</span>
|
||||
<button
|
||||
id="mediaTimingReviewStartBack"
|
||||
type="button"
|
||||
aria-label="Move start backward 100 milliseconds"
|
||||
>
|
||||
−0.1s
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewStartForward"
|
||||
type="button"
|
||||
aria-label="Move start forward 100 milliseconds"
|
||||
>
|
||||
+0.1s
|
||||
</button>
|
||||
</div>
|
||||
<div class="media-timing-review-fine-control">
|
||||
<span>End</span>
|
||||
<button
|
||||
id="mediaTimingReviewEndBack"
|
||||
type="button"
|
||||
aria-label="Move end backward 100 milliseconds"
|
||||
>
|
||||
−0.1s
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewEndForward"
|
||||
type="button"
|
||||
aria-label="Move end forward 100 milliseconds"
|
||||
>
|
||||
+0.1s
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="mediaTimingReviewStatus"
|
||||
class="media-timing-review-status"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
></div>
|
||||
<div class="media-timing-review-footer">
|
||||
<div class="media-timing-review-preview-actions">
|
||||
<button
|
||||
id="mediaTimingReviewPlay"
|
||||
class="media-timing-review-play-button"
|
||||
type="button"
|
||||
>
|
||||
<span class="media-timing-review-play-glyph" aria-hidden="true"></span>
|
||||
<span id="mediaTimingReviewPlayLabel">Play selection</span>
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewReset"
|
||||
class="media-timing-review-quiet-button"
|
||||
type="button"
|
||||
>
|
||||
Reset timing
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="mediaTimingReviewConfirm"
|
||||
class="media-timing-review-confirm-button"
|
||||
type="button"
|
||||
>
|
||||
Use this timing
|
||||
</button>
|
||||
</div>
|
||||
<div class="media-timing-review-hints" aria-hidden="true">
|
||||
<span><kbd>Space</kbd> preview</span>
|
||||
<span><kbd>←</kbd><kbd>→</kbd> nudge focused edge</span>
|
||||
<span><kbd>P</kbd>/<kbd>N</kbd> add prev/next line</span>
|
||||
<span><kbd>Enter</kbd> confirm</span>
|
||||
<span><kbd>Esc</kbd> cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mediaTimingReviewCancelStep" class="media-timing-review-cancel-step hidden">
|
||||
<div class="media-timing-review-cancel-mark" aria-hidden="true">?</div>
|
||||
<h2>Stop reviewing?</h2>
|
||||
<p id="mediaTimingReviewCancelMessage">Choose what should happen to this card.</p>
|
||||
<div class="media-timing-review-cancel-actions">
|
||||
<button
|
||||
id="mediaTimingReviewCancelBack"
|
||||
class="media-timing-review-quiet-button"
|
||||
type="button"
|
||||
>
|
||||
Keep editing
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewUseOriginal"
|
||||
class="media-timing-review-original-button"
|
||||
type="button"
|
||||
>
|
||||
Use original timing
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewSkipMedia"
|
||||
class="media-timing-review-skip-button"
|
||||
type="button"
|
||||
title="Keep this card but do not add audio or an image."
|
||||
>
|
||||
Keep without media
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewDiscard"
|
||||
class="media-timing-review-discard-button"
|
||||
type="button"
|
||||
>
|
||||
Delete card
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="kikuFieldGroupingModal" class="modal hidden" aria-hidden="true">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import {
|
||||
buildMediaTimingLineSelection,
|
||||
buildMediaTimingWaveformPath,
|
||||
constrainMediaTimingSelection,
|
||||
createMediaTimingPreviewRequestGuard,
|
||||
formatMediaTimingTimestamp,
|
||||
mediaTimingTimeFromPointer,
|
||||
slideMediaTimingSelection,
|
||||
trimMediaTimingSelectionEnd,
|
||||
} from './media-timing-review';
|
||||
|
||||
test('waveform path mirrors normalized peaks around its center line', () => {
|
||||
const path = buildMediaTimingWaveformPath([0, 0.5, 1]);
|
||||
|
||||
assert.match(path, /^M 0\.00 50\.00 L 500\.00 28\.00 L 1000\.00 6\.00/);
|
||||
assert.match(path, /1000\.00 94\.00 L 500\.00 72\.00 L 0\.00 50\.00 Z$/);
|
||||
assert.equal(buildMediaTimingWaveformPath([1]), '');
|
||||
});
|
||||
|
||||
test('formatMediaTimingTimestamp renders stable review readouts', () => {
|
||||
assert.equal(formatMediaTimingTimestamp(65.4321), '01:05.432');
|
||||
assert.equal(formatMediaTimingTimestamp(65.4321, false), '01:05');
|
||||
assert.equal(formatMediaTimingTimestamp(-1), '00:00.000');
|
||||
assert.equal(formatMediaTimingTimestamp(119.9999), '02:00.000');
|
||||
assert.equal(formatMediaTimingTimestamp(119.6, false), '02:00');
|
||||
});
|
||||
|
||||
test('selection constraints preserve the handle that did not move', () => {
|
||||
assert.deepEqual(
|
||||
constrainMediaTimingSelection({
|
||||
nextStart: 3,
|
||||
nextEnd: 2,
|
||||
currentStart: 1,
|
||||
timelineStart: 0,
|
||||
timelineEnd: 10,
|
||||
mediaEnd: 10,
|
||||
maxMediaDuration: 30,
|
||||
}),
|
||||
{ start: 1.9, end: 2 },
|
||||
);
|
||||
assert.deepEqual(
|
||||
constrainMediaTimingSelection({
|
||||
nextStart: 1,
|
||||
nextEnd: 0.5,
|
||||
currentStart: 1,
|
||||
timelineStart: 0,
|
||||
timelineEnd: 10,
|
||||
mediaEnd: 10,
|
||||
maxMediaDuration: 30,
|
||||
}),
|
||||
{ start: 1, end: 1.1 },
|
||||
);
|
||||
});
|
||||
|
||||
test('pointer positions map onto the visible timeline and clamp past its edges', () => {
|
||||
const track = { trackLeft: 100, trackWidth: 400, timelineStart: 10, timelineEnd: 20 };
|
||||
|
||||
assert.equal(mediaTimingTimeFromPointer({ clientX: 100, ...track }), 10);
|
||||
assert.equal(mediaTimingTimeFromPointer({ clientX: 300, ...track }), 15);
|
||||
assert.equal(mediaTimingTimeFromPointer({ clientX: -40, ...track }), 10);
|
||||
assert.equal(mediaTimingTimeFromPointer({ clientX: 900, ...track }), 20);
|
||||
assert.equal(mediaTimingTimeFromPointer({ ...track, clientX: 300, trackWidth: 0 }), 10);
|
||||
});
|
||||
|
||||
test('sliding keeps the clip length and stops at the timeline and media bounds', () => {
|
||||
const timeline = { span: 2, timelineStart: 4, timelineEnd: 12, mediaEnd: 10 };
|
||||
|
||||
assert.deepEqual(slideMediaTimingSelection({ nextStart: 6, ...timeline }), { start: 6, end: 8 });
|
||||
assert.deepEqual(slideMediaTimingSelection({ nextStart: 1, ...timeline }), { start: 4, end: 6 });
|
||||
assert.deepEqual(slideMediaTimingSelection({ nextStart: 99, ...timeline }), {
|
||||
start: 8,
|
||||
end: 10,
|
||||
});
|
||||
});
|
||||
|
||||
test('line selection combines adjacent lines around the mined one and tracks their range', () => {
|
||||
const base = {
|
||||
previousLines: [
|
||||
{ text: '一行目', startTime: 0, endTime: 2 },
|
||||
{ text: '二行目', startTime: 2.5, endTime: 4 },
|
||||
],
|
||||
nextLines: [
|
||||
{ text: '四行目', startTime: 7.5, endTime: 9 },
|
||||
{ text: '五行目', startTime: 9.5, endTime: 11 },
|
||||
],
|
||||
text: '採掘行',
|
||||
originalStartTime: 5,
|
||||
originalEndTime: 7,
|
||||
};
|
||||
|
||||
const none = buildMediaTimingLineSelection({ ...base, previousCount: 0, nextCount: 0 });
|
||||
assert.deepEqual(none.lineTexts, ['採掘行']);
|
||||
assert.equal(none.currentLineIndex, 0);
|
||||
assert.equal(none.rangeStart, 5);
|
||||
assert.equal(none.rangeEnd, 7);
|
||||
|
||||
const expanded = buildMediaTimingLineSelection({ ...base, previousCount: 1, nextCount: 2 });
|
||||
assert.deepEqual(expanded.lineTexts, ['二行目', '採掘行', '四行目', '五行目']);
|
||||
assert.equal(expanded.currentLineIndex, 1);
|
||||
assert.equal(expanded.sentence, '二行目 採掘行 四行目 五行目');
|
||||
assert.equal(expanded.rangeStart, 2.5);
|
||||
assert.equal(expanded.rangeEnd, 11);
|
||||
});
|
||||
|
||||
test('preview request guard blocks overlap and invalidates stale responses', () => {
|
||||
const guard = createMediaTimingPreviewRequestGuard();
|
||||
const first = guard.begin();
|
||||
|
||||
assert.equal(typeof first, 'number');
|
||||
assert.equal(guard.begin(), null);
|
||||
assert.equal(guard.isCurrent(first!), true);
|
||||
|
||||
guard.invalidate();
|
||||
assert.equal(guard.isCurrent(first!), false);
|
||||
assert.equal(guard.isInFlight(), false);
|
||||
|
||||
const second = guard.begin();
|
||||
assert.equal(typeof second, 'number');
|
||||
guard.finish(first!);
|
||||
assert.equal(guard.isCurrent(second!), true);
|
||||
guard.finish(second!);
|
||||
assert.equal(guard.isInFlight(), false);
|
||||
});
|
||||
|
||||
test('trailing silence trim follows the last speech slice and keeps cut-off or silent lines', () => {
|
||||
// 10 slices over a 10 s timeline: one slice per second, speech in seconds 2-4 only.
|
||||
const peaks = [0, 0, 0.9, 0.8, 0.7, 0.1, 0.2, 0, 0, 0];
|
||||
const base = { peaks, timelineStart: 0, timelineEnd: 10, lineStart: 2, lineEnd: 8 };
|
||||
|
||||
const trimmed = trimMediaTimingSelectionEnd({ ...base, selectionEnd: 8, endPadSeconds: 0 });
|
||||
assert.ok(trimmed !== null && Math.abs(trimmed - 5.15) < 1e-9);
|
||||
|
||||
const padded = trimMediaTimingSelectionEnd({ ...base, selectionEnd: 8.5, endPadSeconds: 0.5 });
|
||||
assert.ok(padded !== null && Math.abs(padded - 5.65) < 1e-9);
|
||||
|
||||
// Speech running through the line end means the subtitle cuts the audio off; keep it.
|
||||
assert.equal(
|
||||
trimMediaTimingSelectionEnd({ ...base, lineEnd: 5, selectionEnd: 5, endPadSeconds: 0 }),
|
||||
null,
|
||||
);
|
||||
// No speech inside the line at all: keep the subtitle timing rather than guess.
|
||||
assert.equal(
|
||||
trimMediaTimingSelectionEnd({ ...base, lineStart: 6, selectionEnd: 8, endPadSeconds: 0 }),
|
||||
null,
|
||||
);
|
||||
// A saving below the minimum trim is not worth moving the handle for.
|
||||
assert.equal(
|
||||
trimMediaTimingSelectionEnd({ ...base, lineEnd: 5.2, selectionEnd: 5.2, endPadSeconds: 0 }),
|
||||
null,
|
||||
);
|
||||
assert.equal(
|
||||
trimMediaTimingSelectionEnd({ ...base, peaks: [1], selectionEnd: 8, endPadSeconds: 0 }),
|
||||
null,
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,960 @@
|
||||
import type {
|
||||
MediaTimingReviewContextLine,
|
||||
MediaTimingReviewDecision,
|
||||
MediaTimingReviewOpenPayload,
|
||||
} from '../../types/anki';
|
||||
import type { ModalStateReader, RendererContext } from '../context';
|
||||
import { createModalFocusGuard } from './modal-focus-guard';
|
||||
|
||||
const MINIMUM_CLIP_SECONDS = 0.1;
|
||||
const FINE_ADJUST_SECONDS = 0.1;
|
||||
const COARSE_ADJUST_SECONDS = 0.5;
|
||||
const TIMELINE_EXPANSION_SECONDS = 2;
|
||||
const LINE_REVEAL_MARGIN_SECONDS = 1;
|
||||
/**
|
||||
* Subtitles usually linger past the dialogue for readability, so an untouched clip end
|
||||
* follows the last speech-weighted waveform slice above this level (0..1, relative to the
|
||||
* clip's own noise floor) plus a short tail, when that saves at least the minimum trim.
|
||||
*/
|
||||
const SPEECH_LEVEL_THRESHOLD = 0.3;
|
||||
const SPEECH_TAIL_SECONDS = 0.15;
|
||||
const MINIMUM_TRAILING_TRIM_SECONDS = 0.1;
|
||||
/** Slack past the clip length before the UI gives up waiting for mpv's end-of-clip signal. */
|
||||
const PREVIEW_END_GRACE_MS = 2_500;
|
||||
|
||||
function clamp(value: number, minimum: number, maximum: number): number {
|
||||
return Math.min(maximum, Math.max(minimum, value));
|
||||
}
|
||||
|
||||
export function formatMediaTimingTimestamp(seconds: number, includeMilliseconds = true): string {
|
||||
const unitsPerSecond = includeMilliseconds ? 1_000 : 1;
|
||||
const totalUnits = Math.max(0, Math.round(seconds * unitsPerSecond));
|
||||
const unitsPerMinute = 60 * unitsPerSecond;
|
||||
const minutes = Math.floor(totalUnits / unitsPerMinute);
|
||||
const remainingUnits = totalUnits % unitsPerMinute;
|
||||
const remaining = includeMilliseconds
|
||||
? (remainingUnits / unitsPerSecond).toFixed(3)
|
||||
: String(remainingUnits);
|
||||
return `${String(minutes).padStart(2, '0')}:${remaining.padStart(includeMilliseconds ? 6 : 2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves which subtitle lines the card sentence currently includes. The counts say
|
||||
* how many adjacent lines were pulled in on each side; the range covers those lines'
|
||||
* subtitle timings so the clip edges can follow them.
|
||||
*/
|
||||
export function buildMediaTimingLineSelection(options: {
|
||||
previousLines: MediaTimingReviewContextLine[];
|
||||
nextLines: MediaTimingReviewContextLine[];
|
||||
text: string;
|
||||
originalStartTime: number;
|
||||
originalEndTime: number;
|
||||
previousCount: number;
|
||||
nextCount: number;
|
||||
}): {
|
||||
lineTexts: string[];
|
||||
currentLineIndex: number;
|
||||
sentence: string;
|
||||
rangeStart: number;
|
||||
rangeEnd: number;
|
||||
} {
|
||||
const previous =
|
||||
options.previousCount > 0 ? options.previousLines.slice(-options.previousCount) : [];
|
||||
const next = options.nextCount > 0 ? options.nextLines.slice(0, options.nextCount) : [];
|
||||
const lineTexts = [
|
||||
...previous.map((line) => line.text),
|
||||
options.text,
|
||||
...next.map((line) => line.text),
|
||||
];
|
||||
return {
|
||||
lineTexts,
|
||||
currentLineIndex: previous.length,
|
||||
sentence: lineTexts.join(' '),
|
||||
rangeStart: previous[0]?.startTime ?? options.originalStartTime,
|
||||
rangeEnd: next[next.length - 1]?.endTime ?? options.originalEndTime,
|
||||
};
|
||||
}
|
||||
|
||||
export function createMediaTimingPreviewRequestGuard() {
|
||||
let sequence = 0;
|
||||
let activeRequestId: number | null = null;
|
||||
|
||||
return {
|
||||
begin(): number | null {
|
||||
if (activeRequestId !== null) return null;
|
||||
sequence += 1;
|
||||
activeRequestId = sequence;
|
||||
return activeRequestId;
|
||||
},
|
||||
invalidate(): void {
|
||||
sequence += 1;
|
||||
activeRequestId = null;
|
||||
},
|
||||
isCurrent(requestId: number): boolean {
|
||||
return requestId === activeRequestId;
|
||||
},
|
||||
finish(requestId: number): void {
|
||||
if (activeRequestId === requestId) activeRequestId = null;
|
||||
},
|
||||
isInFlight(): boolean {
|
||||
return activeRequestId !== null;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function buildMediaTimingWaveformPath(peaks: number[]): string {
|
||||
if (peaks.length < 2) return '';
|
||||
const points = peaks.map((peak, index) => ({
|
||||
x: (index / (peaks.length - 1)) * 1_000,
|
||||
amplitude: clamp(Number.isFinite(peak) ? peak : 0, 0, 1) * 44,
|
||||
}));
|
||||
const upper = points.map(({ x, amplitude }) => `${x.toFixed(2)} ${(50 - amplitude).toFixed(2)}`);
|
||||
const lower = [...points]
|
||||
.reverse()
|
||||
.map(({ x, amplitude }) => `${x.toFixed(2)} ${(50 + amplitude).toFixed(2)}`);
|
||||
return `M ${upper.join(' L ')} L ${lower.join(' L ')} Z`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Where an untouched clip should end once the waveform is known: just after the line's
|
||||
* last speech slice, plus the configured end padding. Null keeps the subtitle timing when
|
||||
* no speech shows inside the line, when speech runs through the line end (the subtitle is
|
||||
* cutting the audio off, not lingering), or when the saving is too small to matter.
|
||||
*/
|
||||
export function trimMediaTimingSelectionEnd(options: {
|
||||
peaks: readonly number[];
|
||||
timelineStart: number;
|
||||
timelineEnd: number;
|
||||
lineStart: number;
|
||||
lineEnd: number;
|
||||
selectionEnd: number;
|
||||
endPadSeconds: number;
|
||||
}): number | null {
|
||||
const pointCount = options.peaks.length;
|
||||
const span = options.timelineEnd - options.timelineStart;
|
||||
if (pointCount < 2 || span <= 0 || options.lineEnd <= options.lineStart) return null;
|
||||
// Point i covers [i, i + 1) / pointCount of the timeline (see computeWaveformPeaks).
|
||||
const sliceEnd = (index: number): number =>
|
||||
options.timelineStart + ((index + 1) / pointCount) * span;
|
||||
const firstIndex = Math.max(
|
||||
0,
|
||||
Math.floor(((options.lineStart - options.timelineStart) / span) * pointCount),
|
||||
);
|
||||
const lastIndex = Math.min(
|
||||
pointCount - 1,
|
||||
Math.ceil(((options.lineEnd - options.timelineStart) / span) * pointCount) - 1,
|
||||
);
|
||||
let lastSpeechIndex = -1;
|
||||
for (let index = lastIndex; index >= firstIndex; index -= 1) {
|
||||
if ((options.peaks[index] ?? 0) >= SPEECH_LEVEL_THRESHOLD) {
|
||||
lastSpeechIndex = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (lastSpeechIndex === -1 || lastSpeechIndex >= lastIndex) return null;
|
||||
const trimmedEnd = sliceEnd(lastSpeechIndex) + SPEECH_TAIL_SECONDS + options.endPadSeconds;
|
||||
if (options.selectionEnd - trimmedEnd < MINIMUM_TRAILING_TRIM_SECONDS) return null;
|
||||
return trimmedEnd;
|
||||
}
|
||||
|
||||
export function constrainMediaTimingSelection(options: {
|
||||
nextStart: number;
|
||||
nextEnd: number;
|
||||
currentStart: number;
|
||||
timelineStart: number;
|
||||
timelineEnd: number;
|
||||
mediaEnd: number;
|
||||
maxMediaDuration: number;
|
||||
}): { start: number; end: number } {
|
||||
let start = clamp(options.nextStart, options.timelineStart, options.timelineEnd);
|
||||
let end = clamp(options.nextEnd, options.timelineStart, options.timelineEnd);
|
||||
const startMoved = options.nextStart !== options.currentStart;
|
||||
if (end - start < MINIMUM_CLIP_SECONDS) {
|
||||
if (startMoved) start = end - MINIMUM_CLIP_SECONDS;
|
||||
else end = start + MINIMUM_CLIP_SECONDS;
|
||||
}
|
||||
if (options.maxMediaDuration > 0 && end - start > options.maxMediaDuration) {
|
||||
if (startMoved) start = end - options.maxMediaDuration;
|
||||
else end = start + options.maxMediaDuration;
|
||||
}
|
||||
return {
|
||||
start: Math.max(0, start),
|
||||
end: Math.min(options.mediaEnd, end),
|
||||
};
|
||||
}
|
||||
|
||||
/** Maps a pointer position over the timeline track back onto a media timestamp. */
|
||||
export function mediaTimingTimeFromPointer(options: {
|
||||
clientX: number;
|
||||
trackLeft: number;
|
||||
trackWidth: number;
|
||||
timelineStart: number;
|
||||
timelineEnd: number;
|
||||
}): number {
|
||||
if (options.trackWidth <= 0) return options.timelineStart;
|
||||
const ratio = clamp((options.clientX - options.trackLeft) / options.trackWidth, 0, 1);
|
||||
return options.timelineStart + ratio * (options.timelineEnd - options.timelineStart);
|
||||
}
|
||||
|
||||
/** Slides the selection without resizing it, keeping the whole clip inside the visible timeline. */
|
||||
export function slideMediaTimingSelection(options: {
|
||||
nextStart: number;
|
||||
span: number;
|
||||
timelineStart: number;
|
||||
timelineEnd: number;
|
||||
mediaEnd: number;
|
||||
}): { start: number; end: number } {
|
||||
const latestEnd = Math.min(options.timelineEnd, options.mediaEnd);
|
||||
const maxStart = Math.max(options.timelineStart, latestEnd - options.span);
|
||||
const start = clamp(options.nextStart, options.timelineStart, maxStart);
|
||||
return { start, end: start + options.span };
|
||||
}
|
||||
|
||||
export function createMediaTimingReviewModal(
|
||||
ctx: RendererContext,
|
||||
options: {
|
||||
modalStateReader: Pick<ModalStateReader, 'isAnyModalOpen'>;
|
||||
syncSettingsModalSubtitleSuppression: () => void;
|
||||
},
|
||||
) {
|
||||
let payload: MediaTimingReviewOpenPayload | null = null;
|
||||
let selectionStart = 0;
|
||||
let selectionEnd = 0;
|
||||
let timelineStart = 0;
|
||||
let timelineEnd = 0;
|
||||
let previousCount = 0;
|
||||
let nextCount = 0;
|
||||
let startPadSeconds = 0;
|
||||
let endPadSeconds = 0;
|
||||
/** True until the user moves the clip; the first waveform then trims trailing silence. */
|
||||
let trailingTrimPending = false;
|
||||
let resolveInFlight = false;
|
||||
let previewPlaying = false;
|
||||
let previewTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let waveformTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let waveformSequence = 0;
|
||||
let drag: {
|
||||
edge: 'start' | 'end' | 'both';
|
||||
pointerId: number;
|
||||
trackLeft: number;
|
||||
trackWidth: number;
|
||||
grabOffset: number;
|
||||
} | null = null;
|
||||
|
||||
const focus = createModalFocusGuard({
|
||||
isOpen: () => ctx.state.mediaTimingReviewModalOpen,
|
||||
getModalRoot: () => ctx.dom.mediaTimingReviewModal,
|
||||
getPreferredFocusTargets: () => [
|
||||
ctx.dom.mediaTimingReviewStartHandle,
|
||||
ctx.dom.mediaTimingReviewCancelBack,
|
||||
],
|
||||
getFallbackFocusTarget: () => ctx.dom.mediaTimingReviewCancel,
|
||||
isModalLayer: ctx.platform.isModalLayer,
|
||||
});
|
||||
const previewRequest = createMediaTimingPreviewRequestGuard();
|
||||
|
||||
function setStatus(message: string, isError = false): void {
|
||||
ctx.dom.mediaTimingReviewStatus.textContent = message;
|
||||
ctx.dom.mediaTimingReviewStatus.classList.toggle('is-error', isError);
|
||||
}
|
||||
|
||||
function clearPreviewTimer(): void {
|
||||
if (previewTimer !== null) clearTimeout(previewTimer);
|
||||
previewTimer = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Drives the play button label plus the playhead sweep that mirrors the hidden audio player.
|
||||
* mpv reports when the clip actually finishes (see handlePreviewEnded), which accounts for
|
||||
* output latency such as Bluetooth headphones; the timer only covers a player that never does.
|
||||
*/
|
||||
function setPreviewPlaying(playing: boolean): void {
|
||||
previewPlaying = playing;
|
||||
ctx.dom.mediaTimingReviewPlayLabel.textContent = playing ? 'Stop preview' : 'Play selection';
|
||||
ctx.dom.mediaTimingReviewPlay.classList.toggle('is-playing', playing);
|
||||
clearPreviewTimer();
|
||||
const track = ctx.dom.mediaTimingReviewSelectionTrack;
|
||||
track.classList.remove('is-previewing');
|
||||
if (!playing) return;
|
||||
const clipSeconds = Math.max(MINIMUM_CLIP_SECONDS, selectionEnd - selectionStart);
|
||||
track.style.setProperty('--playhead-duration', `${clipSeconds}s`);
|
||||
void track.offsetWidth;
|
||||
track.classList.add('is-previewing');
|
||||
previewTimer = setTimeout(() => stopPreview(), clipSeconds * 1000 + PREVIEW_END_GRACE_MS);
|
||||
}
|
||||
|
||||
/** The hidden player reached the end of the clip and paused itself. */
|
||||
function handlePreviewEnded(reviewId: string): void {
|
||||
if (!payload || payload.reviewId !== reviewId || !previewPlaying) return;
|
||||
setPreviewPlaying(false);
|
||||
setStatus('');
|
||||
}
|
||||
|
||||
/** Callers that need to report a failure set their own status after stopping the preview. */
|
||||
function stopPreview(): void {
|
||||
previewRequest.invalidate();
|
||||
setPreviewPlaying(false);
|
||||
setStatus('');
|
||||
if (payload) {
|
||||
void window.electronAPI.stopMediaTimingReviewPreview(payload.reviewId).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
function renderHandle(handle: HTMLDivElement, value: number): void {
|
||||
handle.setAttribute('aria-valuemin', timelineStart.toFixed(3));
|
||||
handle.setAttribute('aria-valuemax', timelineEnd.toFixed(3));
|
||||
handle.setAttribute('aria-valuenow', value.toFixed(3));
|
||||
handle.setAttribute('aria-valuetext', formatMediaTimingTimestamp(value));
|
||||
}
|
||||
|
||||
function renderSelection(): void {
|
||||
const span = Math.max(MINIMUM_CLIP_SECONDS, timelineEnd - timelineStart);
|
||||
const startPercent = ((selectionStart - timelineStart) / span) * 100;
|
||||
const endPercent = ((selectionEnd - timelineStart) / span) * 100;
|
||||
const lineRange = currentLineSelection();
|
||||
const originalStartPercent = payload
|
||||
? ((lineRange.rangeStart - timelineStart) / span) * 100
|
||||
: 0;
|
||||
const originalEndPercent = payload ? ((lineRange.rangeEnd - timelineStart) / span) * 100 : 0;
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.style.setProperty(
|
||||
'--selection-start',
|
||||
`${clamp(startPercent, 0, 100)}%`,
|
||||
);
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.style.setProperty(
|
||||
'--selection-end',
|
||||
`${clamp(endPercent, 0, 100)}%`,
|
||||
);
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.style.setProperty(
|
||||
'--original-start',
|
||||
`${clamp(originalStartPercent, 0, 100)}%`,
|
||||
);
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.style.setProperty(
|
||||
'--original-end',
|
||||
`${clamp(originalEndPercent, 0, 100)}%`,
|
||||
);
|
||||
renderHandle(ctx.dom.mediaTimingReviewStartHandle, selectionStart);
|
||||
renderHandle(ctx.dom.mediaTimingReviewEndHandle, selectionEnd);
|
||||
ctx.dom.mediaTimingReviewStartValue.textContent = formatMediaTimingTimestamp(selectionStart);
|
||||
ctx.dom.mediaTimingReviewEndValue.textContent = formatMediaTimingTimestamp(selectionEnd);
|
||||
ctx.dom.mediaTimingReviewDuration.textContent = `${(selectionEnd - selectionStart).toFixed(2)}s`;
|
||||
ctx.dom.mediaTimingReviewTimelineStart.textContent = formatMediaTimingTimestamp(
|
||||
timelineStart,
|
||||
false,
|
||||
);
|
||||
ctx.dom.mediaTimingReviewTimelineEnd.textContent = formatMediaTimingTimestamp(
|
||||
timelineEnd,
|
||||
false,
|
||||
);
|
||||
ctx.dom.mediaTimingReviewShowEarlier.disabled = timelineStart <= 0;
|
||||
ctx.dom.mediaTimingReviewShowLater.disabled =
|
||||
payload?.mediaDuration !== undefined && timelineEnd >= payload.mediaDuration;
|
||||
}
|
||||
|
||||
function setWaveformState(state: 'loading' | 'ready' | 'unavailable'): void {
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.classList.toggle('is-loading', state === 'loading');
|
||||
ctx.dom.mediaTimingReviewSelectionTrack.classList.toggle(
|
||||
'is-waveform-unavailable',
|
||||
state === 'unavailable',
|
||||
);
|
||||
ctx.dom.mediaTimingReviewWaveformLabel.textContent =
|
||||
state === 'loading'
|
||||
? 'isolating dialogue...'
|
||||
: state === 'ready'
|
||||
? 'speech-weighted waveform'
|
||||
: 'waveform unavailable';
|
||||
}
|
||||
|
||||
async function loadWaveform(): Promise<void> {
|
||||
if (!payload || !ctx.state.mediaTimingReviewModalOpen) return;
|
||||
waveformSequence += 1;
|
||||
const sequence = waveformSequence;
|
||||
const reviewId = payload.reviewId;
|
||||
const startTime = timelineStart;
|
||||
const endTime = timelineEnd;
|
||||
setWaveformState('loading');
|
||||
ctx.dom.mediaTimingReviewWaveformPath.setAttribute('d', '');
|
||||
try {
|
||||
const result = await window.electronAPI.getMediaTimingReviewWaveform({
|
||||
reviewId,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
if (
|
||||
sequence !== waveformSequence ||
|
||||
payload?.reviewId !== reviewId ||
|
||||
timelineStart !== startTime ||
|
||||
timelineEnd !== endTime
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (!result.ok && result.stale) {
|
||||
closeResolvedReview();
|
||||
return;
|
||||
}
|
||||
const path = result.ok ? buildMediaTimingWaveformPath(result.peaks ?? []) : '';
|
||||
if (!path) {
|
||||
setWaveformState('unavailable');
|
||||
return;
|
||||
}
|
||||
ctx.dom.mediaTimingReviewWaveformPath.setAttribute('d', path);
|
||||
setWaveformState('ready');
|
||||
trimTrailingSilence(result.peaks ?? []);
|
||||
} catch {
|
||||
if (sequence === waveformSequence && payload?.reviewId === reviewId) {
|
||||
setWaveformState('unavailable');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves an untouched clip end back to where the line's dialogue ends. The Line end
|
||||
* rail keeps marking the subtitle timing, and Reset restores it.
|
||||
*/
|
||||
function trimTrailingSilence(peaks: readonly number[]): void {
|
||||
if (!payload || !trailingTrimPending || previewPlaying || previewRequest.isInFlight()) {
|
||||
return;
|
||||
}
|
||||
const lineRange = currentLineSelection();
|
||||
const trimmedEnd = trimMediaTimingSelectionEnd({
|
||||
peaks,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
lineStart: lineRange.rangeStart,
|
||||
lineEnd: lineRange.rangeEnd,
|
||||
selectionEnd,
|
||||
endPadSeconds,
|
||||
});
|
||||
if (trimmedEnd === null) return;
|
||||
updateSelection(selectionStart, trimmedEnd);
|
||||
setStatus('Clip end moved to where the dialogue ends. Reset restores the subtitle timing.');
|
||||
}
|
||||
|
||||
function queueWaveformLoad(delayMs = 0): void {
|
||||
if (waveformTimer !== null) clearTimeout(waveformTimer);
|
||||
waveformSequence += 1;
|
||||
if (payload && ctx.state.mediaTimingReviewModalOpen) {
|
||||
ctx.dom.mediaTimingReviewWaveformPath.setAttribute('d', '');
|
||||
setWaveformState('loading');
|
||||
}
|
||||
waveformTimer = setTimeout(() => {
|
||||
waveformTimer = null;
|
||||
void loadWaveform();
|
||||
}, delayMs);
|
||||
}
|
||||
|
||||
function currentLineSelection(): ReturnType<typeof buildMediaTimingLineSelection> {
|
||||
return buildMediaTimingLineSelection({
|
||||
previousLines: payload?.previousLines ?? [],
|
||||
nextLines: payload?.nextLines ?? [],
|
||||
text: payload?.text ?? '',
|
||||
originalStartTime: payload?.originalStartTime ?? 0,
|
||||
originalEndTime: payload?.originalEndTime ?? 0,
|
||||
previousCount,
|
||||
nextCount,
|
||||
});
|
||||
}
|
||||
|
||||
function renderSentence(): void {
|
||||
if (!payload) return;
|
||||
const selection = currentLineSelection();
|
||||
ctx.dom.mediaTimingReviewText.replaceChildren(
|
||||
...selection.lineTexts.map((text, index) => {
|
||||
const line = document.createElement('span');
|
||||
line.className =
|
||||
index === selection.currentLineIndex
|
||||
? 'media-timing-review-line is-current'
|
||||
: 'media-timing-review-line';
|
||||
line.textContent = text;
|
||||
return line;
|
||||
}),
|
||||
);
|
||||
const total = selection.lineTexts.length;
|
||||
ctx.dom.mediaTimingReviewLineCount.textContent = total === 1 ? '1 line' : `${total} lines`;
|
||||
const hasContext = payload.previousLines.length > 0 || payload.nextLines.length > 0;
|
||||
ctx.dom.mediaTimingReviewLineControls.classList.toggle('hidden', !hasContext);
|
||||
ctx.dom.mediaTimingReviewPrevAdd.disabled = previousCount >= payload.previousLines.length;
|
||||
ctx.dom.mediaTimingReviewPrevRemove.disabled = previousCount <= 0;
|
||||
ctx.dom.mediaTimingReviewNextAdd.disabled = nextCount >= payload.nextLines.length;
|
||||
ctx.dom.mediaTimingReviewNextRemove.disabled = nextCount <= 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds or removes an adjacent subtitle line from the card sentence, then follows the
|
||||
* affected clip edge to the new outermost line while keeping the user's other edge.
|
||||
*/
|
||||
function adjustLines(direction: 'previous' | 'next', delta: number): void {
|
||||
if (!payload || resolveInFlight) return;
|
||||
const available =
|
||||
direction === 'previous' ? payload.previousLines.length : payload.nextLines.length;
|
||||
const current = direction === 'previous' ? previousCount : nextCount;
|
||||
const updated = clamp(current + delta, 0, available);
|
||||
if (updated === current) return;
|
||||
if (direction === 'previous') previousCount = updated;
|
||||
else nextCount = updated;
|
||||
|
||||
const selection = currentLineSelection();
|
||||
const mediaEnd = payload.mediaDuration ?? Number.POSITIVE_INFINITY;
|
||||
let timelineChanged = false;
|
||||
let capped = false;
|
||||
if (direction === 'previous') {
|
||||
const target = Math.max(0, selection.rangeStart - startPadSeconds);
|
||||
if (target < timelineStart) {
|
||||
timelineStart = Math.max(0, target - LINE_REVEAL_MARGIN_SECONDS);
|
||||
timelineChanged = true;
|
||||
}
|
||||
updateSelection(target, selectionEnd);
|
||||
capped = selectionStart > target + 0.001;
|
||||
} else {
|
||||
const target = Math.min(mediaEnd, selection.rangeEnd + endPadSeconds);
|
||||
if (target > timelineEnd) {
|
||||
timelineEnd = Math.min(mediaEnd, target + LINE_REVEAL_MARGIN_SECONDS);
|
||||
timelineChanged = true;
|
||||
}
|
||||
updateSelection(selectionStart, target);
|
||||
capped = selectionEnd < target - 0.001;
|
||||
}
|
||||
renderSentence();
|
||||
if (capped && payload.maxMediaDuration > 0) {
|
||||
setStatus(
|
||||
`Clip length is capped at ${payload.maxMediaDuration}s, so the audio cannot cover every added line.`,
|
||||
);
|
||||
}
|
||||
if (timelineChanged) queueWaveformLoad(120);
|
||||
}
|
||||
|
||||
function updateSelection(nextStart: number, nextEnd: number): void {
|
||||
if (!payload) return;
|
||||
const mediaEnd = payload.mediaDuration ?? Number.POSITIVE_INFINITY;
|
||||
const nextSelection = constrainMediaTimingSelection({
|
||||
nextStart,
|
||||
nextEnd,
|
||||
currentStart: selectionStart,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
mediaEnd,
|
||||
maxMediaDuration: payload.maxMediaDuration,
|
||||
});
|
||||
selectionStart = nextSelection.start;
|
||||
selectionEnd = nextSelection.end;
|
||||
trailingTrimPending = false;
|
||||
if (previewPlaying || previewRequest.isInFlight()) stopPreview();
|
||||
setStatus('');
|
||||
renderSelection();
|
||||
}
|
||||
|
||||
/** Shifts the whole clip without changing its length. */
|
||||
function moveSelection(nextStart: number): void {
|
||||
if (!payload) return;
|
||||
const slid = slideMediaTimingSelection({
|
||||
nextStart,
|
||||
span: selectionEnd - selectionStart,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
mediaEnd: payload.mediaDuration ?? Number.POSITIVE_INFINITY,
|
||||
});
|
||||
updateSelection(slid.start, slid.end);
|
||||
}
|
||||
|
||||
function setEdge(edge: 'start' | 'end', value: number): void {
|
||||
if (edge === 'start') updateSelection(value, selectionEnd);
|
||||
else updateSelection(selectionStart, value);
|
||||
}
|
||||
|
||||
function applyDrag(clientX: number): void {
|
||||
if (!drag) return;
|
||||
const pointerTime = mediaTimingTimeFromPointer({
|
||||
clientX,
|
||||
trackLeft: drag.trackLeft,
|
||||
trackWidth: drag.trackWidth,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
});
|
||||
const time = pointerTime - drag.grabOffset;
|
||||
if (drag.edge === 'both') moveSelection(time);
|
||||
else setEdge(drag.edge, time);
|
||||
}
|
||||
|
||||
/**
|
||||
* Grabbing a handle drags that edge, grabbing the highlighted clip slides the whole selection,
|
||||
* and pressing anywhere else snaps the nearest edge to that point and keeps dragging it.
|
||||
*/
|
||||
function beginDrag(event: PointerEvent): void {
|
||||
if (!payload || resolveInFlight || drag !== null || event.button !== 0) return;
|
||||
const track = ctx.dom.mediaTimingReviewSelectionTrack;
|
||||
const rect = track.getBoundingClientRect();
|
||||
const pointerTime = mediaTimingTimeFromPointer({
|
||||
clientX: event.clientX,
|
||||
trackLeft: rect.left,
|
||||
trackWidth: rect.width,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
});
|
||||
const target = event.target;
|
||||
let edge: 'start' | 'end' | 'both';
|
||||
let grabOffset: number;
|
||||
if (target === ctx.dom.mediaTimingReviewStartHandle) {
|
||||
edge = 'start';
|
||||
grabOffset = pointerTime - selectionStart;
|
||||
} else if (target === ctx.dom.mediaTimingReviewEndHandle) {
|
||||
edge = 'end';
|
||||
grabOffset = pointerTime - selectionEnd;
|
||||
} else if (target === ctx.dom.mediaTimingReviewSelectedRange) {
|
||||
edge = 'both';
|
||||
grabOffset = pointerTime - selectionStart;
|
||||
} else {
|
||||
edge =
|
||||
Math.abs(pointerTime - selectionStart) <= Math.abs(pointerTime - selectionEnd)
|
||||
? 'start'
|
||||
: 'end';
|
||||
grabOffset = 0;
|
||||
}
|
||||
event.preventDefault();
|
||||
drag = {
|
||||
edge,
|
||||
pointerId: event.pointerId,
|
||||
trackLeft: rect.left,
|
||||
trackWidth: rect.width,
|
||||
grabOffset,
|
||||
};
|
||||
track.setPointerCapture(event.pointerId);
|
||||
ctx.dom.mediaTimingReviewModal.classList.add(edge === 'both' ? 'is-sliding' : 'is-scrubbing');
|
||||
if (edge !== 'both') {
|
||||
const handle =
|
||||
edge === 'start'
|
||||
? ctx.dom.mediaTimingReviewStartHandle
|
||||
: ctx.dom.mediaTimingReviewEndHandle;
|
||||
handle.focus();
|
||||
if (grabOffset === 0) applyDrag(event.clientX);
|
||||
}
|
||||
}
|
||||
|
||||
function endDrag(event: PointerEvent): void {
|
||||
if (!drag || drag.pointerId !== event.pointerId) return;
|
||||
const track = ctx.dom.mediaTimingReviewSelectionTrack;
|
||||
if (track.hasPointerCapture(event.pointerId)) track.releasePointerCapture(event.pointerId);
|
||||
drag = null;
|
||||
ctx.dom.mediaTimingReviewModal.classList.remove('is-scrubbing', 'is-sliding');
|
||||
}
|
||||
|
||||
function cancelDrag(): void {
|
||||
drag = null;
|
||||
ctx.dom.mediaTimingReviewModal.classList.remove('is-scrubbing', 'is-sliding');
|
||||
}
|
||||
|
||||
function handleEdgeKeydown(event: KeyboardEvent, edge: 'start' | 'end'): void {
|
||||
const step = event.shiftKey ? COARSE_ADJUST_SECONDS : FINE_ADJUST_SECONDS;
|
||||
const current = edge === 'start' ? selectionStart : selectionEnd;
|
||||
if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') setEdge(edge, current - step);
|
||||
else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') setEdge(edge, current + step);
|
||||
else if (event.key === 'Home') setEdge(edge, timelineStart);
|
||||
else if (event.key === 'End') setEdge(edge, timelineEnd);
|
||||
else return;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function showEditor(): void {
|
||||
ctx.dom.mediaTimingReviewCancelStep.classList.add('hidden');
|
||||
ctx.dom.mediaTimingReviewEditor.classList.remove('hidden');
|
||||
ctx.dom.mediaTimingReviewCancel.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function requestCancel(): void {
|
||||
if (!ctx.state.mediaTimingReviewModalOpen || !payload || resolveInFlight) return;
|
||||
stopPreview();
|
||||
ctx.dom.mediaTimingReviewEditor.classList.add('hidden');
|
||||
ctx.dom.mediaTimingReviewCancel.classList.add('hidden');
|
||||
ctx.dom.mediaTimingReviewCancelStep.classList.remove('hidden');
|
||||
ctx.dom.mediaTimingReviewCancelMessage.textContent =
|
||||
payload.noteId !== undefined
|
||||
? 'Keep editing, keep this card without media, use its original timing, or delete it.'
|
||||
: 'Keep editing, create this card without media, use its original timing, or do not create it.';
|
||||
ctx.dom.mediaTimingReviewSkipMedia.textContent =
|
||||
payload.noteId !== undefined ? 'Keep without media' : 'Create without media';
|
||||
ctx.dom.mediaTimingReviewDiscard.textContent =
|
||||
payload.noteId !== undefined ? 'Delete card' : "Don't create card";
|
||||
ctx.dom.mediaTimingReviewCancelBack.focus();
|
||||
}
|
||||
|
||||
function closeResolvedReview(): void {
|
||||
if (!ctx.state.mediaTimingReviewModalOpen) return;
|
||||
cancelDrag();
|
||||
clearPreviewTimer();
|
||||
if (waveformTimer !== null) clearTimeout(waveformTimer);
|
||||
waveformTimer = null;
|
||||
waveformSequence += 1;
|
||||
previewPlaying = false;
|
||||
ctx.state.mediaTimingReviewModalOpen = false;
|
||||
ctx.dom.mediaTimingReviewModal.classList.add('hidden');
|
||||
ctx.dom.mediaTimingReviewModal.setAttribute('aria-hidden', 'true');
|
||||
focus.detach();
|
||||
window.electronAPI.notifyOverlayModalClosed('media-timing-review');
|
||||
options.syncSettingsModalSubtitleSuppression();
|
||||
payload = null;
|
||||
if (!options.modalStateReader.isAnyModalOpen()) {
|
||||
ctx.dom.overlay.classList.remove('interactive');
|
||||
if (ctx.platform.shouldToggleMouseIgnore) {
|
||||
window.electronAPI.setIgnoreMouseEvents(true, { forward: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveReview(decision: MediaTimingReviewDecision): Promise<void> {
|
||||
if (!payload || resolveInFlight) return;
|
||||
resolveInFlight = true;
|
||||
stopPreview();
|
||||
const controls = ctx.dom.mediaTimingReviewModal.querySelectorAll<HTMLButtonElement>('button');
|
||||
controls.forEach((button) => {
|
||||
button.disabled = true;
|
||||
});
|
||||
try {
|
||||
const result = await window.electronAPI.resolveMediaTimingReview({
|
||||
reviewId: payload.reviewId,
|
||||
decision,
|
||||
});
|
||||
if (!result.ok && !result.stale) {
|
||||
setStatus(result.message ?? 'The timing review could not be resolved.', true);
|
||||
showEditor();
|
||||
return;
|
||||
}
|
||||
// A stale review was already settled by main; keeping the modal up would leave
|
||||
// controls that can never succeed over a live mpv window.
|
||||
closeResolvedReview();
|
||||
} catch (error) {
|
||||
setStatus(error instanceof Error ? error.message : String(error), true);
|
||||
showEditor();
|
||||
} finally {
|
||||
resolveInFlight = false;
|
||||
controls.forEach((button) => {
|
||||
button.disabled = false;
|
||||
});
|
||||
renderSelection();
|
||||
renderSentence();
|
||||
}
|
||||
}
|
||||
|
||||
function confirmSelection(): void {
|
||||
if (!payload) return;
|
||||
const includesAdjacentLines = previousCount > 0 || nextCount > 0;
|
||||
void resolveReview({
|
||||
action: 'confirm',
|
||||
startTime: selectionStart,
|
||||
endTime: selectionEnd,
|
||||
...(includesAdjacentLines ? { text: currentLineSelection().sentence } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
async function togglePreview(): Promise<void> {
|
||||
if (!payload || resolveInFlight) return;
|
||||
if (previewPlaying) {
|
||||
stopPreview();
|
||||
return;
|
||||
}
|
||||
const requestId = previewRequest.begin();
|
||||
if (requestId === null) return;
|
||||
const requestedReviewId = payload.reviewId;
|
||||
setStatus('Starting audio preview...');
|
||||
try {
|
||||
const result = await window.electronAPI.previewMediaTimingReview({
|
||||
reviewId: requestedReviewId,
|
||||
startTime: selectionStart,
|
||||
endTime: selectionEnd,
|
||||
});
|
||||
if (!previewRequest.isCurrent(requestId) || payload?.reviewId !== requestedReviewId) {
|
||||
if (result.ok && !previewRequest.isInFlight() && !previewPlaying) {
|
||||
void window.electronAPI.stopMediaTimingReviewPreview(requestedReviewId).catch(() => {});
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!result.ok && result.stale) {
|
||||
closeResolvedReview();
|
||||
return;
|
||||
}
|
||||
if (!result.ok) {
|
||||
setStatus(result.message ?? 'Audio preview is unavailable.', true);
|
||||
setPreviewPlaying(false);
|
||||
return;
|
||||
}
|
||||
setStatus('Previewing in the hidden audio player.');
|
||||
setPreviewPlaying(true);
|
||||
} catch (error) {
|
||||
if (!previewRequest.isCurrent(requestId) || payload?.reviewId !== requestedReviewId) return;
|
||||
setStatus(
|
||||
`Audio preview unavailable: ${error instanceof Error ? error.message : String(error)}`,
|
||||
true,
|
||||
);
|
||||
setPreviewPlaying(false);
|
||||
} finally {
|
||||
previewRequest.finish(requestId);
|
||||
}
|
||||
}
|
||||
|
||||
function openMediaTimingReviewModal(nextPayload: MediaTimingReviewOpenPayload): void {
|
||||
previewRequest.invalidate();
|
||||
cancelDrag();
|
||||
payload = {
|
||||
...nextPayload,
|
||||
previousLines: nextPayload.previousLines ?? [],
|
||||
nextLines: nextPayload.nextLines ?? [],
|
||||
};
|
||||
selectionStart = nextPayload.selectionStartTime;
|
||||
selectionEnd = nextPayload.selectionEndTime;
|
||||
timelineStart = nextPayload.timelineStartTime;
|
||||
timelineEnd = nextPayload.timelineEndTime;
|
||||
previousCount = 0;
|
||||
nextCount = 0;
|
||||
startPadSeconds = Math.max(0, nextPayload.originalStartTime - nextPayload.selectionStartTime);
|
||||
endPadSeconds = Math.max(0, nextPayload.selectionEndTime - nextPayload.originalEndTime);
|
||||
trailingTrimPending = true;
|
||||
resolveInFlight = false;
|
||||
setPreviewPlaying(false);
|
||||
ctx.dom.mediaTimingReviewKind.textContent =
|
||||
nextPayload.kind === 'word'
|
||||
? 'Word card'
|
||||
: nextPayload.kind === 'audio'
|
||||
? 'Audio card'
|
||||
: 'Sentence card';
|
||||
ctx.dom.mediaTimingReviewKind.dataset.kind = nextPayload.kind;
|
||||
ctx.dom.mediaTimingReviewDiscard.textContent =
|
||||
nextPayload.noteId !== undefined ? 'Delete card' : "Don't create card";
|
||||
setStatus('');
|
||||
showEditor();
|
||||
renderSelection();
|
||||
renderSentence();
|
||||
ctx.state.mediaTimingReviewModalOpen = true;
|
||||
options.syncSettingsModalSubtitleSuppression();
|
||||
ctx.dom.overlay.classList.add('interactive');
|
||||
if (ctx.platform.shouldToggleMouseIgnore) window.electronAPI.setIgnoreMouseEvents(false);
|
||||
ctx.dom.mediaTimingReviewModal.classList.remove('hidden');
|
||||
ctx.dom.mediaTimingReviewModal.setAttribute('aria-hidden', 'false');
|
||||
window.electronAPI.notifyOverlayModalOpened('media-timing-review');
|
||||
focus.attach();
|
||||
focus.requestOverlayFocus();
|
||||
window.focus();
|
||||
focus.enforceModalFocus();
|
||||
queueWaveformLoad();
|
||||
}
|
||||
|
||||
function expandTimeline(direction: 'earlier' | 'later'): void {
|
||||
if (!payload) return;
|
||||
if (direction === 'earlier') {
|
||||
timelineStart = Math.max(0, timelineStart - TIMELINE_EXPANSION_SECONDS);
|
||||
} else {
|
||||
timelineEnd = Math.min(
|
||||
payload.mediaDuration ?? Number.POSITIVE_INFINITY,
|
||||
timelineEnd + TIMELINE_EXPANSION_SECONDS,
|
||||
);
|
||||
}
|
||||
renderSelection();
|
||||
queueWaveformLoad(120);
|
||||
}
|
||||
|
||||
function handleMediaTimingReviewKeydown(event: KeyboardEvent): boolean {
|
||||
if (!ctx.state.mediaTimingReviewModalOpen) return false;
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
if (!ctx.dom.mediaTimingReviewCancelStep.classList.contains('hidden')) showEditor();
|
||||
else requestCancel();
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
event.code === 'Space' &&
|
||||
event.target instanceof Element &&
|
||||
!event.target.closest('button')
|
||||
) {
|
||||
event.preventDefault();
|
||||
void togglePreview();
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
event.key === 'Enter' &&
|
||||
ctx.dom.mediaTimingReviewCancelStep.classList.contains('hidden') &&
|
||||
!(event.target instanceof Element && event.target.closest('button'))
|
||||
) {
|
||||
event.preventDefault();
|
||||
confirmSelection();
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
(event.key === 'p' || event.key === 'P' || event.key === 'n' || event.key === 'N') &&
|
||||
ctx.dom.mediaTimingReviewCancelStep.classList.contains('hidden') &&
|
||||
!event.ctrlKey &&
|
||||
!event.metaKey &&
|
||||
!event.altKey
|
||||
) {
|
||||
event.preventDefault();
|
||||
adjustLines(
|
||||
event.key === 'p' || event.key === 'P' ? 'previous' : 'next',
|
||||
event.shiftKey ? -1 : 1,
|
||||
);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function wireDomEvents(): void {
|
||||
const track = ctx.dom.mediaTimingReviewSelectionTrack;
|
||||
track.addEventListener('pointerdown', beginDrag);
|
||||
track.addEventListener('pointermove', (event) => {
|
||||
if (drag?.pointerId === event.pointerId) applyDrag(event.clientX);
|
||||
});
|
||||
track.addEventListener('pointerup', endDrag);
|
||||
track.addEventListener('pointercancel', endDrag);
|
||||
ctx.dom.mediaTimingReviewStartHandle.addEventListener('keydown', (event) =>
|
||||
handleEdgeKeydown(event, 'start'),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewEndHandle.addEventListener('keydown', (event) =>
|
||||
handleEdgeKeydown(event, 'end'),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewShowEarlier.addEventListener('click', () => expandTimeline('earlier'));
|
||||
ctx.dom.mediaTimingReviewShowLater.addEventListener('click', () => expandTimeline('later'));
|
||||
ctx.dom.mediaTimingReviewStartBack.addEventListener('click', () =>
|
||||
updateSelection(selectionStart - FINE_ADJUST_SECONDS, selectionEnd),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewStartForward.addEventListener('click', () =>
|
||||
updateSelection(selectionStart + FINE_ADJUST_SECONDS, selectionEnd),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewEndBack.addEventListener('click', () =>
|
||||
updateSelection(selectionStart, selectionEnd - FINE_ADJUST_SECONDS),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewEndForward.addEventListener('click', () =>
|
||||
updateSelection(selectionStart, selectionEnd + FINE_ADJUST_SECONDS),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewPlay.addEventListener('click', () => void togglePreview());
|
||||
ctx.dom.mediaTimingReviewReset.addEventListener('click', () => {
|
||||
if (!payload) return;
|
||||
previousCount = 0;
|
||||
nextCount = 0;
|
||||
updateSelection(payload.selectionStartTime, payload.selectionEndTime);
|
||||
renderSentence();
|
||||
});
|
||||
ctx.dom.mediaTimingReviewPrevAdd.addEventListener('click', () => adjustLines('previous', 1));
|
||||
ctx.dom.mediaTimingReviewPrevRemove.addEventListener('click', () =>
|
||||
adjustLines('previous', -1),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewNextAdd.addEventListener('click', () => adjustLines('next', 1));
|
||||
ctx.dom.mediaTimingReviewNextRemove.addEventListener('click', () => adjustLines('next', -1));
|
||||
ctx.dom.mediaTimingReviewCancel.addEventListener('click', requestCancel);
|
||||
ctx.dom.mediaTimingReviewCancelBack.addEventListener('click', showEditor);
|
||||
ctx.dom.mediaTimingReviewUseOriginal.addEventListener(
|
||||
'click',
|
||||
() => void resolveReview({ action: 'use-original' }),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewSkipMedia.addEventListener(
|
||||
'click',
|
||||
() => void resolveReview({ action: 'skip-media' }),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewDiscard.addEventListener(
|
||||
'click',
|
||||
() => void resolveReview({ action: 'discard' }),
|
||||
);
|
||||
ctx.dom.mediaTimingReviewConfirm.addEventListener('click', () => confirmSelection());
|
||||
}
|
||||
|
||||
return {
|
||||
openMediaTimingReviewModal,
|
||||
handlePreviewEnded,
|
||||
requestCancel,
|
||||
handleMediaTimingReviewKeydown,
|
||||
wireDomEvents,
|
||||
};
|
||||
}
|
||||
@@ -45,6 +45,7 @@ import { createCharacterDictionaryModal } from './modals/character-dictionary.js
|
||||
import { createRuntimeOptionsModal } from './modals/runtime-options.js';
|
||||
import { createSubsyncModal } from './modals/subsync.js';
|
||||
import { createYoutubeTrackPickerModal } from './modals/youtube-track-picker.js';
|
||||
import { createMediaTimingReviewModal } from './modals/media-timing-review.js';
|
||||
import { createPositioningController } from './positioning.js';
|
||||
import { createOverlayContentMeasurementReporter } from './overlay-content-measurement.js';
|
||||
import { syncOverlayMouseIgnoreState } from './overlay-mouse-ignore.js';
|
||||
@@ -114,6 +115,12 @@ const modalDescriptors = [
|
||||
close: () => youtubePickerModal.closeYoutubePickerModal(),
|
||||
suppressesSubtitles: true,
|
||||
},
|
||||
{
|
||||
id: 'media-timing-review',
|
||||
isOpen: () => ctx.state.mediaTimingReviewModalOpen,
|
||||
close: () => mediaTimingReviewModal.requestCancel(),
|
||||
suppressesSubtitles: true,
|
||||
},
|
||||
{
|
||||
id: 'playlist-browser',
|
||||
isOpen: () => ctx.state.playlistBrowserModalOpen,
|
||||
@@ -265,6 +272,10 @@ const playlistBrowserModal = createPlaylistBrowserModal(ctx, {
|
||||
modalStateReader: { isAnyModalOpen },
|
||||
syncSettingsModalSubtitleSuppression,
|
||||
});
|
||||
const mediaTimingReviewModal = createMediaTimingReviewModal(ctx, {
|
||||
modalStateReader: { isAnyModalOpen },
|
||||
syncSettingsModalSubtitleSuppression,
|
||||
});
|
||||
const keyboardHandlers = createKeyboardHandlers(ctx, {
|
||||
handleRuntimeOptionsKeydown: runtimeOptionsModal.handleRuntimeOptionsKeydown,
|
||||
handleCharacterDictionaryKeydown: characterDictionaryModal.handleCharacterDictionaryKeydown,
|
||||
@@ -273,6 +284,7 @@ const keyboardHandlers = createKeyboardHandlers(ctx, {
|
||||
handleJimakuKeydown: jimakuModal.handleJimakuKeydown,
|
||||
handleTsukihimeKeydown: tsukihimeModal.handleTsukihimeKeydown,
|
||||
handleYoutubePickerKeydown: youtubePickerModal.handleYoutubePickerKeydown,
|
||||
handleMediaTimingReviewKeydown: mediaTimingReviewModal.handleMediaTimingReviewKeydown,
|
||||
handlePlaylistBrowserKeydown: playlistBrowserModal.handlePlaylistBrowserKeydown,
|
||||
handleControllerSelectKeydown: controllerSelectModal.handleControllerSelectKeydown,
|
||||
handleControllerDebugKeydown: controllerDebugModal.handleControllerDebugKeydown,
|
||||
@@ -574,6 +586,16 @@ function registerModalOpenHandlers(): void {
|
||||
youtubePickerModal.openYoutubePickerModal(payload);
|
||||
});
|
||||
});
|
||||
window.electronAPI.onOpenMediaTimingReview((payload) => {
|
||||
runGuarded('media-timing-review:open', () => {
|
||||
mediaTimingReviewModal.openMediaTimingReviewModal(payload);
|
||||
});
|
||||
});
|
||||
window.electronAPI.onMediaTimingReviewPreviewEnded((reviewId) => {
|
||||
runGuarded('media-timing-review:preview-ended', () => {
|
||||
mediaTimingReviewModal.handlePreviewEnded(reviewId);
|
||||
});
|
||||
});
|
||||
window.electronAPI.onOpenPlaylistBrowser(() => {
|
||||
runGuardedAsync('playlist-browser:open', async () => {
|
||||
await playlistBrowserModal.openPlaylistBrowserModal();
|
||||
@@ -805,6 +827,7 @@ async function init(): Promise<void> {
|
||||
jimakuModal.wireDomEvents();
|
||||
tsukihimeModal.wireDomEvents();
|
||||
youtubePickerModal.wireDomEvents();
|
||||
mediaTimingReviewModal.wireDomEvents();
|
||||
playlistBrowserModal.wireDomEvents();
|
||||
kikuModal.wireDomEvents();
|
||||
runtimeOptionsModal.wireDomEvents();
|
||||
|
||||
@@ -64,6 +64,8 @@ export type RendererState = {
|
||||
youtubePickerSecondaryTrackId: string | null;
|
||||
youtubePickerStatus: string;
|
||||
|
||||
mediaTimingReviewModalOpen: boolean;
|
||||
|
||||
kikuModalOpen: boolean;
|
||||
kikuSelectedCard: 1 | 2;
|
||||
kikuOriginalData: KikuDuplicateCardInfo | null;
|
||||
@@ -194,6 +196,8 @@ export function createRendererState(): RendererState {
|
||||
youtubePickerSecondaryTrackId: null,
|
||||
youtubePickerStatus: '',
|
||||
|
||||
mediaTimingReviewModalOpen: false,
|
||||
|
||||
kikuModalOpen: false,
|
||||
kikuSelectedCard: 1,
|
||||
kikuOriginalData: null,
|
||||
|
||||
@@ -1323,6 +1323,795 @@ body:focus-visible,
|
||||
}
|
||||
}
|
||||
|
||||
/* Media timing review uses the Catppuccin Macchiato palette without opacity-shifted colors. */
|
||||
.media-timing-review-modal {
|
||||
background: rgba(24, 25, 38, 0.76);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Pointer capture keeps events on the track, so the cursor is forced from the modal root. */
|
||||
.media-timing-review-modal.is-scrubbing,
|
||||
.media-timing-review-modal.is-scrubbing * {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.media-timing-review-modal.is-sliding,
|
||||
.media-timing-review-modal.is-sliding * {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.media-timing-review-content {
|
||||
width: min(720px, calc(100vw - 32px));
|
||||
max-height: min(700px, calc(100vh - 32px));
|
||||
overflow: auto;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 16px;
|
||||
background: var(--ctp-base);
|
||||
color: var(--ctp-text);
|
||||
box-shadow:
|
||||
0 30px 90px rgba(24, 25, 38, 0.8),
|
||||
0 0 0 1px rgba(183, 189, 248, 0.07) inset;
|
||||
animation: media-timing-review-enter 180ms cubic-bezier(0.2, 0.9, 0.25, 1);
|
||||
}
|
||||
|
||||
@keyframes media-timing-review-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.media-timing-review-header {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 16px 20px 13px;
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
background: var(--ctp-mantle);
|
||||
}
|
||||
|
||||
.media-timing-review-heading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.media-timing-review-title {
|
||||
color: var(--ctp-text);
|
||||
font-size: 19px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.media-timing-review-kind {
|
||||
--kind-accent: var(--ctp-teal);
|
||||
|
||||
padding: 3px 9px;
|
||||
border: 1px solid color-mix(in srgb, var(--kind-accent) 42%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--kind-accent) 13%, transparent);
|
||||
color: var(--kind-accent);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-kind[data-kind='word'] {
|
||||
--kind-accent: var(--ctp-mauve);
|
||||
}
|
||||
|
||||
.media-timing-review-kind[data-kind='audio'] {
|
||||
--kind-accent: var(--ctp-sky);
|
||||
}
|
||||
|
||||
.media-timing-review-editor {
|
||||
padding: 14px 20px 18px;
|
||||
}
|
||||
|
||||
.media-timing-review-sentence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.media-timing-review-sentence-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.media-timing-review-sentence-label {
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-line-count {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 999px;
|
||||
background: var(--ctp-mantle);
|
||||
color: var(--ctp-subtext0);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.media-timing-review-line-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.media-timing-review-line-stepper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.media-timing-review-line-stepper span {
|
||||
margin-right: 2px;
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-line-stepper button {
|
||||
width: 24px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--ctp-surface2);
|
||||
border-radius: 6px;
|
||||
background: var(--ctp-surface0);
|
||||
color: var(--ctp-text);
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.media-timing-review-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
max-height: 108px;
|
||||
overflow: auto;
|
||||
margin: 0 0 12px;
|
||||
padding: 8px 14px;
|
||||
border-left: 3px solid var(--ctp-mauve);
|
||||
border-radius: 0 10px 10px 0;
|
||||
background: var(--ctp-mantle);
|
||||
color: var(--ctp-subtext1);
|
||||
font-size: 15px;
|
||||
font-weight: 560;
|
||||
line-height: 1.45;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.media-timing-review-line {
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.media-timing-review-line.is-current {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
/* Only dim context lines when some are actually added. */
|
||||
.media-timing-review-text .media-timing-review-line:only-child {
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.media-timing-review-readout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 12px;
|
||||
background: var(--ctp-mantle);
|
||||
}
|
||||
|
||||
.media-timing-review-readout > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.media-timing-review-readout > div + div {
|
||||
border-left: 1px solid var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.media-timing-review-readout span {
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-readout strong {
|
||||
color: var(--ctp-lavender);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 16px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.media-timing-review-readout .media-timing-review-duration {
|
||||
align-items: center;
|
||||
min-width: 128px;
|
||||
background: var(--ctp-surface0);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-timing-review-readout > div:last-child {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.media-timing-review-readout .media-timing-review-duration strong {
|
||||
color: var(--ctp-teal);
|
||||
}
|
||||
|
||||
.media-timing-review-timeline-shell {
|
||||
padding: 10px 12px 8px;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 14px;
|
||||
background: var(--ctp-mantle);
|
||||
}
|
||||
|
||||
.media-timing-review-timeline-labels,
|
||||
.media-timing-review-expand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.media-timing-review-timeline-labels span:first-child,
|
||||
.media-timing-review-timeline-labels span:last-child {
|
||||
color: var(--ctp-subtext0);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.media-timing-review-track {
|
||||
--selection-start: 20%;
|
||||
--selection-end: 80%;
|
||||
--original-start: 25%;
|
||||
--original-end: 75%;
|
||||
--playhead-duration: 1s;
|
||||
|
||||
position: relative;
|
||||
height: 52px;
|
||||
margin: 8px 0 9px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ctp-surface2);
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(var(--ctp-surface1), var(--ctp-surface1)) center / 100% 1px no-repeat,
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0,
|
||||
transparent calc(10% - 1px),
|
||||
color-mix(in srgb, var(--ctp-surface1) 65%, transparent) calc(10% - 1px),
|
||||
color-mix(in srgb, var(--ctp-surface1) 65%, transparent) 10%
|
||||
),
|
||||
linear-gradient(180deg, var(--ctp-crust), var(--ctp-mantle));
|
||||
cursor: ew-resize;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.media-timing-review-waveform {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 4px 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 8px);
|
||||
pointer-events: none;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
#mediaTimingReviewWaveformPath {
|
||||
fill: url('#mediaTimingReviewWaveformFill');
|
||||
}
|
||||
|
||||
.media-timing-review-waveform-edge-stop {
|
||||
stop-color: var(--ctp-sky);
|
||||
}
|
||||
|
||||
.media-timing-review-waveform-core-stop {
|
||||
stop-color: var(--ctp-blue);
|
||||
}
|
||||
|
||||
/* Sits above the selection scrim so adjacent dialogue reads as outside the mined subtitle. */
|
||||
.media-timing-review-original-range {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--original-start);
|
||||
right: calc(100% - var(--original-end));
|
||||
min-width: 1px;
|
||||
background: color-mix(in srgb, var(--ctp-peach) 11%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctp-peach) 28%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.media-timing-review-original-boundary {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--ctp-peach);
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-peach) 45%, transparent);
|
||||
}
|
||||
|
||||
.media-timing-review-original-boundary.is-start {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-timing-review-original-boundary.is-end {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-timing-review-original-label {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
padding: 3px 5px;
|
||||
border: 1px solid color-mix(in srgb, var(--ctp-crust) 35%, transparent);
|
||||
border-radius: 4px;
|
||||
background: var(--ctp-peach);
|
||||
box-shadow: 0 2px 6px color-mix(in srgb, var(--ctp-crust) 55%, transparent);
|
||||
color: var(--ctp-crust);
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-original-label.is-start {
|
||||
top: 5px;
|
||||
left: calc(var(--original-start) + 7px);
|
||||
}
|
||||
|
||||
.media-timing-review-original-label.is-end {
|
||||
right: calc(100% - var(--original-end) + 7px);
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.media-timing-review-track.is-loading::after {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent 20%,
|
||||
rgba(138, 173, 244, 0.16) 44%,
|
||||
rgba(183, 189, 248, 0.22) 50%,
|
||||
transparent 76%
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
animation: media-timing-waveform-loading 1.1s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.media-timing-review-track.is-waveform-unavailable .media-timing-review-waveform {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes media-timing-waveform-loading {
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* The oversized shadow spread dims everything outside the clip; the track clips it. */
|
||||
.media-timing-review-selected-range {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
inset: 0 calc(100% - var(--selection-end)) 0 var(--selection-start);
|
||||
border-inline: 1px solid color-mix(in srgb, var(--ctp-teal) 65%, transparent);
|
||||
background: color-mix(in srgb, var(--ctp-teal) 9%, transparent);
|
||||
box-shadow: 0 0 0 2000px color-mix(in srgb, var(--ctp-crust) 62%, transparent);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.media-timing-review-playhead {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--selection-start);
|
||||
width: 2px;
|
||||
background: var(--ctp-yellow);
|
||||
box-shadow: 0 0 12px color-mix(in srgb, var(--ctp-yellow) 75%, transparent);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.media-timing-review-track.is-previewing .media-timing-review-playhead {
|
||||
opacity: 1;
|
||||
animation: media-timing-review-playhead var(--playhead-duration) linear forwards;
|
||||
}
|
||||
|
||||
@keyframes media-timing-review-playhead {
|
||||
from {
|
||||
left: var(--selection-start);
|
||||
}
|
||||
to {
|
||||
left: var(--selection-end);
|
||||
}
|
||||
}
|
||||
|
||||
.media-timing-review-handle {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 14px;
|
||||
border: 1px solid var(--ctp-teal);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--ctp-teal),
|
||||
color-mix(in srgb, var(--ctp-teal) 74%, var(--ctp-crust))
|
||||
);
|
||||
cursor: ew-resize;
|
||||
touch-action: none;
|
||||
transition: box-shadow 130ms ease;
|
||||
}
|
||||
|
||||
/* Widens the grab area past the visible bracket without moving the clip edge. */
|
||||
.media-timing-review-handle::before {
|
||||
position: absolute;
|
||||
inset: 0 -7px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.media-timing-review-handle::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
content: '';
|
||||
border-inline: 1px solid color-mix(in srgb, var(--ctp-crust) 55%, transparent);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.media-timing-review-handle-start {
|
||||
left: var(--selection-start);
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.media-timing-review-handle-end {
|
||||
left: var(--selection-end);
|
||||
border-radius: 0 5px 5px 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.media-timing-review-handle:hover {
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--ctp-teal) 60%, transparent);
|
||||
}
|
||||
|
||||
.media-timing-review-handle:focus-visible {
|
||||
outline: 2px solid transparent;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px var(--ctp-yellow),
|
||||
0 0 16px color-mix(in srgb, var(--ctp-yellow) 55%, transparent);
|
||||
}
|
||||
|
||||
.media-timing-review-expand-row span {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-timing-review-expand-button,
|
||||
.media-timing-review-quiet-button,
|
||||
.media-timing-review-original-button,
|
||||
.media-timing-review-skip-button,
|
||||
.media-timing-review-discard-button,
|
||||
.media-timing-review-play-button,
|
||||
.media-timing-review-confirm-button,
|
||||
.media-timing-review-fine-control button {
|
||||
border: 1px solid var(--ctp-surface2);
|
||||
border-radius: 9px;
|
||||
background: var(--ctp-surface0);
|
||||
color: var(--ctp-text);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 720;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 130ms ease,
|
||||
border-color 130ms ease,
|
||||
transform 130ms ease;
|
||||
}
|
||||
|
||||
.media-timing-review-expand-button {
|
||||
min-width: 82px;
|
||||
padding: 5px 9px;
|
||||
color: var(--ctp-sky);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.media-timing-review-expand-button:disabled,
|
||||
.media-timing-review-content button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.media-timing-review-content button:not(:disabled):hover {
|
||||
border-color: var(--ctp-lavender);
|
||||
background: var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.media-timing-review-content button:not(:disabled):active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.media-timing-review-content button:focus-visible {
|
||||
outline: 2px solid var(--ctp-yellow);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.media-timing-review-fine-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.media-timing-review-fine-control {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--ctp-surface0);
|
||||
border-radius: 10px;
|
||||
background: var(--ctp-mantle);
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.media-timing-review-fine-control span {
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-timing-review-fine-control button {
|
||||
min-width: 58px;
|
||||
padding: 5px 8px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.media-timing-review-status {
|
||||
min-height: 21px;
|
||||
padding-top: 8px;
|
||||
color: var(--ctp-teal);
|
||||
font-size: 11px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.media-timing-review-status.is-error {
|
||||
color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.media-timing-review-footer,
|
||||
.media-timing-review-preview-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.media-timing-review-footer {
|
||||
justify-content: space-between;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.media-timing-review-play-button,
|
||||
.media-timing-review-confirm-button,
|
||||
.media-timing-review-quiet-button,
|
||||
.media-timing-review-original-button,
|
||||
.media-timing-review-skip-button,
|
||||
.media-timing-review-discard-button {
|
||||
padding: 9px 15px;
|
||||
}
|
||||
|
||||
.media-timing-review-play-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
border-color: var(--ctp-teal);
|
||||
background: var(--ctp-teal);
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.media-timing-review-play-glyph {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-block: 5px solid transparent;
|
||||
border-left: 9px solid currentcolor;
|
||||
}
|
||||
|
||||
.media-timing-review-play-button.is-playing {
|
||||
border-color: var(--ctp-yellow);
|
||||
background: var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.media-timing-review-play-button.is-playing .media-timing-review-play-glyph {
|
||||
width: 9px;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
.media-timing-review-confirm-button {
|
||||
border-color: var(--ctp-blue);
|
||||
background: var(--ctp-blue);
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.media-timing-review-original-button {
|
||||
border-color: var(--ctp-yellow);
|
||||
color: var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.media-timing-review-skip-button {
|
||||
border-color: var(--ctp-sky);
|
||||
color: var(--ctp-sky);
|
||||
}
|
||||
|
||||
.media-timing-review-discard-button {
|
||||
border-color: var(--ctp-red);
|
||||
background: var(--ctp-red);
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.media-timing-review-hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 16px;
|
||||
padding-top: 14px;
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.media-timing-review-hints kbd {
|
||||
display: inline-block;
|
||||
min-width: 15px;
|
||||
margin-right: 3px;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 5px;
|
||||
background: var(--ctp-mantle);
|
||||
color: var(--ctp-subtext0);
|
||||
font-family: inherit;
|
||||
font-size: 9px;
|
||||
font-weight: 750;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-timing-review-cancel-step {
|
||||
min-height: 300px;
|
||||
padding: 44px 38px 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-timing-review-cancel-mark {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin: 0 auto 16px;
|
||||
place-items: center;
|
||||
border: 2px solid var(--ctp-yellow);
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--ctp-yellow) 12%, transparent);
|
||||
color: var(--ctp-yellow);
|
||||
font-size: 26px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.media-timing-review-cancel-step h2 {
|
||||
color: var(--ctp-text);
|
||||
font-size: 21px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.media-timing-review-cancel-step p {
|
||||
max-width: 520px;
|
||||
margin: 8px auto 24px;
|
||||
color: var(--ctp-subtext0);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.media-timing-review-cancel-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.media-timing-review-content {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.media-timing-review-track.is-loading::after,
|
||||
.media-timing-review-track.is-previewing .media-timing-review-playhead {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.media-timing-review-content {
|
||||
width: calc(100vw - 18px);
|
||||
max-height: calc(100vh - 18px);
|
||||
}
|
||||
|
||||
.media-timing-review-header,
|
||||
.media-timing-review-editor {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.media-timing-review-readout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.media-timing-review-readout > div + div {
|
||||
border-top: 1px solid var(--ctp-surface0);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.media-timing-review-fine-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.media-timing-review-footer {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.media-timing-review-preview-actions > *,
|
||||
.media-timing-review-confirm-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
body.subtitle-sidebar-embedded-open #subtitleContainer {
|
||||
max-width: min(80%, calc(100vw - var(--subtitle-sidebar-reserved-width) - 24px));
|
||||
transform: translateX(calc(var(--subtitle-sidebar-reserved-width) * -0.5));
|
||||
|
||||
+112
-2
@@ -44,6 +44,46 @@ export type RendererDom = {
|
||||
youtubePickerStatus: HTMLDivElement;
|
||||
youtubePickerTracks: HTMLUListElement;
|
||||
|
||||
mediaTimingReviewModal: HTMLDivElement;
|
||||
mediaTimingReviewKind: HTMLDivElement;
|
||||
mediaTimingReviewText: HTMLElement;
|
||||
mediaTimingReviewLineCount: HTMLElement;
|
||||
mediaTimingReviewLineControls: HTMLDivElement;
|
||||
mediaTimingReviewPrevAdd: HTMLButtonElement;
|
||||
mediaTimingReviewPrevRemove: HTMLButtonElement;
|
||||
mediaTimingReviewNextAdd: HTMLButtonElement;
|
||||
mediaTimingReviewNextRemove: HTMLButtonElement;
|
||||
mediaTimingReviewStartValue: HTMLElement;
|
||||
mediaTimingReviewEndValue: HTMLElement;
|
||||
mediaTimingReviewDuration: HTMLElement;
|
||||
mediaTimingReviewTimelineStart: HTMLElement;
|
||||
mediaTimingReviewTimelineEnd: HTMLElement;
|
||||
mediaTimingReviewSelectionTrack: HTMLDivElement;
|
||||
mediaTimingReviewWaveformLabel: HTMLElement;
|
||||
mediaTimingReviewWaveformPath: SVGPathElement;
|
||||
mediaTimingReviewSelectedRange: HTMLDivElement;
|
||||
mediaTimingReviewStartHandle: HTMLDivElement;
|
||||
mediaTimingReviewEndHandle: HTMLDivElement;
|
||||
mediaTimingReviewShowEarlier: HTMLButtonElement;
|
||||
mediaTimingReviewShowLater: HTMLButtonElement;
|
||||
mediaTimingReviewStartBack: HTMLButtonElement;
|
||||
mediaTimingReviewStartForward: HTMLButtonElement;
|
||||
mediaTimingReviewEndBack: HTMLButtonElement;
|
||||
mediaTimingReviewEndForward: HTMLButtonElement;
|
||||
mediaTimingReviewPlay: HTMLButtonElement;
|
||||
mediaTimingReviewPlayLabel: HTMLElement;
|
||||
mediaTimingReviewReset: HTMLButtonElement;
|
||||
mediaTimingReviewCancel: HTMLButtonElement;
|
||||
mediaTimingReviewConfirm: HTMLButtonElement;
|
||||
mediaTimingReviewStatus: HTMLDivElement;
|
||||
mediaTimingReviewEditor: HTMLDivElement;
|
||||
mediaTimingReviewCancelStep: HTMLDivElement;
|
||||
mediaTimingReviewCancelMessage: HTMLParagraphElement;
|
||||
mediaTimingReviewCancelBack: HTMLButtonElement;
|
||||
mediaTimingReviewUseOriginal: HTMLButtonElement;
|
||||
mediaTimingReviewSkipMedia: HTMLButtonElement;
|
||||
mediaTimingReviewDiscard: HTMLButtonElement;
|
||||
|
||||
kikuModal: HTMLDivElement;
|
||||
kikuCard1: HTMLDivElement;
|
||||
kikuCard2: HTMLDivElement;
|
||||
@@ -145,8 +185,8 @@ export type RendererDom = {
|
||||
playlistBrowserClose: HTMLButtonElement;
|
||||
};
|
||||
|
||||
function getRequiredElement<T extends HTMLElement>(id: string): T {
|
||||
const element = document.getElementById(id);
|
||||
function getRequiredElement<T extends Element>(id: string): T {
|
||||
const element = document.querySelector(`#${id}`);
|
||||
if (!element) {
|
||||
throw new Error(`Missing required DOM element #${id}`);
|
||||
}
|
||||
@@ -204,6 +244,76 @@ export function resolveRendererDom(): RendererDom {
|
||||
youtubePickerStatus: getRequiredElement<HTMLDivElement>('youtubePickerStatus'),
|
||||
youtubePickerTracks: getRequiredElement<HTMLUListElement>('youtubePickerTracks'),
|
||||
|
||||
mediaTimingReviewModal: getRequiredElement<HTMLDivElement>('mediaTimingReviewModal'),
|
||||
mediaTimingReviewKind: getRequiredElement<HTMLDivElement>('mediaTimingReviewKind'),
|
||||
mediaTimingReviewText: getRequiredElement<HTMLElement>('mediaTimingReviewText'),
|
||||
mediaTimingReviewLineCount: getRequiredElement<HTMLElement>('mediaTimingReviewLineCount'),
|
||||
mediaTimingReviewLineControls: getRequiredElement<HTMLDivElement>(
|
||||
'mediaTimingReviewLineControls',
|
||||
),
|
||||
mediaTimingReviewPrevAdd: getRequiredElement<HTMLButtonElement>('mediaTimingReviewPrevAdd'),
|
||||
mediaTimingReviewPrevRemove: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewPrevRemove',
|
||||
),
|
||||
mediaTimingReviewNextAdd: getRequiredElement<HTMLButtonElement>('mediaTimingReviewNextAdd'),
|
||||
mediaTimingReviewNextRemove: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewNextRemove',
|
||||
),
|
||||
mediaTimingReviewStartValue: getRequiredElement<HTMLElement>('mediaTimingReviewStartValue'),
|
||||
mediaTimingReviewEndValue: getRequiredElement<HTMLElement>('mediaTimingReviewEndValue'),
|
||||
mediaTimingReviewDuration: getRequiredElement<HTMLElement>('mediaTimingReviewDuration'),
|
||||
mediaTimingReviewTimelineStart: getRequiredElement<HTMLElement>(
|
||||
'mediaTimingReviewTimelineStart',
|
||||
),
|
||||
mediaTimingReviewTimelineEnd: getRequiredElement<HTMLElement>('mediaTimingReviewTimelineEnd'),
|
||||
mediaTimingReviewSelectionTrack: getRequiredElement<HTMLDivElement>(
|
||||
'mediaTimingReviewSelectionTrack',
|
||||
),
|
||||
mediaTimingReviewWaveformLabel: getRequiredElement<HTMLElement>(
|
||||
'mediaTimingReviewWaveformLabel',
|
||||
),
|
||||
mediaTimingReviewWaveformPath: getRequiredElement<SVGPathElement>(
|
||||
'mediaTimingReviewWaveformPath',
|
||||
),
|
||||
mediaTimingReviewSelectedRange: getRequiredElement<HTMLDivElement>(
|
||||
'mediaTimingReviewSelectedRange',
|
||||
),
|
||||
mediaTimingReviewStartHandle: getRequiredElement<HTMLDivElement>(
|
||||
'mediaTimingReviewStartHandle',
|
||||
),
|
||||
mediaTimingReviewEndHandle: getRequiredElement<HTMLDivElement>('mediaTimingReviewEndHandle'),
|
||||
mediaTimingReviewShowEarlier: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewShowEarlier',
|
||||
),
|
||||
mediaTimingReviewShowLater: getRequiredElement<HTMLButtonElement>('mediaTimingReviewShowLater'),
|
||||
mediaTimingReviewStartBack: getRequiredElement<HTMLButtonElement>('mediaTimingReviewStartBack'),
|
||||
mediaTimingReviewStartForward: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewStartForward',
|
||||
),
|
||||
mediaTimingReviewEndBack: getRequiredElement<HTMLButtonElement>('mediaTimingReviewEndBack'),
|
||||
mediaTimingReviewEndForward: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewEndForward',
|
||||
),
|
||||
mediaTimingReviewPlay: getRequiredElement<HTMLButtonElement>('mediaTimingReviewPlay'),
|
||||
mediaTimingReviewPlayLabel: getRequiredElement<HTMLElement>('mediaTimingReviewPlayLabel'),
|
||||
mediaTimingReviewReset: getRequiredElement<HTMLButtonElement>('mediaTimingReviewReset'),
|
||||
mediaTimingReviewCancel: getRequiredElement<HTMLButtonElement>('mediaTimingReviewCancel'),
|
||||
mediaTimingReviewConfirm: getRequiredElement<HTMLButtonElement>('mediaTimingReviewConfirm'),
|
||||
mediaTimingReviewStatus: getRequiredElement<HTMLDivElement>('mediaTimingReviewStatus'),
|
||||
mediaTimingReviewEditor: getRequiredElement<HTMLDivElement>('mediaTimingReviewEditor'),
|
||||
mediaTimingReviewCancelStep: getRequiredElement<HTMLDivElement>('mediaTimingReviewCancelStep'),
|
||||
mediaTimingReviewCancelMessage: getRequiredElement<HTMLParagraphElement>(
|
||||
'mediaTimingReviewCancelMessage',
|
||||
),
|
||||
mediaTimingReviewCancelBack: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewCancelBack',
|
||||
),
|
||||
mediaTimingReviewUseOriginal: getRequiredElement<HTMLButtonElement>(
|
||||
'mediaTimingReviewUseOriginal',
|
||||
),
|
||||
mediaTimingReviewSkipMedia: getRequiredElement<HTMLButtonElement>('mediaTimingReviewSkipMedia'),
|
||||
mediaTimingReviewDiscard: getRequiredElement<HTMLButtonElement>('mediaTimingReviewDiscard'),
|
||||
|
||||
kikuModal: getRequiredElement<HTMLDivElement>('kikuFieldGroupingModal'),
|
||||
kikuCard1: getRequiredElement<HTMLDivElement>('kikuCard1'),
|
||||
kikuCard2: getRequiredElement<HTMLDivElement>('kikuCard2'),
|
||||
|
||||
Reference in New Issue
Block a user