mirror of
https://github.com/ksyasuda/SubMiner.git
synced 2026-08-30 12:15:26 -07:00
feat(anki): add waveform-guided timing controls
- Add speech-weighted waveform analysis and playback playhead - Support dragging, sliding, and keyboard nudging for clip timing
This commit is contained in:
+60
-26
@@ -208,13 +208,11 @@
|
||||
aria-labelledby="mediaTimingReviewTitle"
|
||||
>
|
||||
<div class="media-timing-review-header">
|
||||
<div>
|
||||
<div id="mediaTimingReviewKind" class="media-timing-review-eyebrow">
|
||||
Sentence card
|
||||
</div>
|
||||
<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"
|
||||
@@ -246,41 +244,70 @@
|
||||
<div class="media-timing-review-timeline-shell">
|
||||
<div class="media-timing-review-timeline-labels">
|
||||
<span id="mediaTimingReviewTimelineStart">00:00</span>
|
||||
<span>available media</span>
|
||||
<span id="mediaTimingReviewWaveformLabel">speech-weighted waveform</span>
|
||||
<span id="mediaTimingReviewTimelineEnd">00:00</span>
|
||||
</div>
|
||||
<div id="mediaTimingReviewSelectionTrack" class="media-timing-review-track">
|
||||
<div class="media-timing-review-selected-range"></div>
|
||||
<input
|
||||
id="mediaTimingReviewStartRange"
|
||||
class="media-timing-review-range media-timing-review-range-start"
|
||||
type="range"
|
||||
step="0.01"
|
||||
<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="Original subtitle timing"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
<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"
|
||||
/>
|
||||
<input
|
||||
id="mediaTimingReviewEndRange"
|
||||
class="media-timing-review-range media-timing-review-range-end"
|
||||
type="range"
|
||||
step="0.01"
|
||||
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="Reveal five more seconds before the timeline"
|
||||
>
|
||||
Show earlier
|
||||
−5s
|
||||
</button>
|
||||
<span>Drag either edge to set the exact clip.</span>
|
||||
<span>Drag an edge to trim, or drag the middle to slide the clip.</span>
|
||||
<button
|
||||
id="mediaTimingReviewShowLater"
|
||||
class="media-timing-review-expand-button"
|
||||
type="button"
|
||||
aria-label="Reveal five more seconds after the timeline"
|
||||
>
|
||||
Show later
|
||||
+5s
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,14 +320,14 @@
|
||||
type="button"
|
||||
aria-label="Move start backward 100 milliseconds"
|
||||
>
|
||||
− 0.1s
|
||||
−0.1s
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewStartForward"
|
||||
type="button"
|
||||
aria-label="Move start forward 100 milliseconds"
|
||||
>
|
||||
+ 0.1s
|
||||
+0.1s
|
||||
</button>
|
||||
</div>
|
||||
<div class="media-timing-review-fine-control">
|
||||
@@ -310,14 +337,14 @@
|
||||
type="button"
|
||||
aria-label="Move end backward 100 milliseconds"
|
||||
>
|
||||
− 0.1s
|
||||
−0.1s
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewEndForward"
|
||||
type="button"
|
||||
aria-label="Move end forward 100 milliseconds"
|
||||
>
|
||||
+ 0.1s
|
||||
+0.1s
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -335,7 +362,8 @@
|
||||
class="media-timing-review-play-button"
|
||||
type="button"
|
||||
>
|
||||
Play selection
|
||||
<span class="media-timing-review-play-glyph" aria-hidden="true"></span>
|
||||
<span id="mediaTimingReviewPlayLabel">Play selection</span>
|
||||
</button>
|
||||
<button
|
||||
id="mediaTimingReviewReset"
|
||||
@@ -353,6 +381,12 @@
|
||||
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>Enter</kbd> confirm</span>
|
||||
<span><kbd>Esc</kbd> cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mediaTimingReviewCancelStep" class="media-timing-review-cancel-step hidden">
|
||||
|
||||
Reference in New Issue
Block a user