Skip to content

Commit d342a50

Browse files
jfdev001jfdev001
authored
feat: shortcut for looping to start of transcription segment (#42)
1 parent 4249645 commit d342a50

2 files changed

Lines changed: 67 additions & 63 deletions

File tree

‎src/lingua_loop/static/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,12 @@ window.addEventListener("DOMContentLoaded", async () => {
713713

714714
state.player.seekTo(nextTime, true);
715715
}
716+
717+
// shortcut to jump to start of transcription time
718+
if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() == "l") {
719+
state.player.seekTo(state.startTranscriptionTime, true);
720+
state.player.playVideo();
721+
}
716722
});
717723

718724
document

‎src/lingua_loop/templates/index.html‎

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>LinguaLoop</title>
88
<link rel="icon" href="/static/favicon.ico">
9-
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
9+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap"
10+
rel="stylesheet" />
1011
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
1112
<link rel="stylesheet" href="/static/style.css">
1213
</head>
@@ -19,7 +20,8 @@ <h1>LinguaLoop</h1>
1920
<label>Language to Transcribe:</label><br>
2021
{% for language, language_code in language_to_language_code.items() %}
2122
<label>
22-
<input type="radio" name="language" value="{{ language_code }}" {% if language_code == 'en' %}checked{% endif %} >
23+
<input type="radio" name="language" value="{{ language_code }}" {% if language_code=='en' %}checked{%
24+
endif %}>
2325
{{ language }}
2426
</label><br>
2527
{% endfor %}
@@ -31,7 +33,7 @@ <h1>LinguaLoop</h1>
3133
<div>
3234
<label for="videoUrl">Enter YouTube Video URL:</label><br>
3335

34-
<input class="myVideoUrlInput" type="text" id="videoUrlInput" placeholder="Paste YouTube link here..."/>
36+
<input class="myVideoUrlInput" type="text" id="videoUrlInput" placeholder="Paste YouTube link here..." />
3537

3638
<button id="loadVideoBtn">
3739
Load Video
@@ -40,64 +42,60 @@ <h1>LinguaLoop</h1>
4042

4143
<!-- Video -->
4244
<div class="player-card">
43-
<div class="video-wrapper">
44-
<div id="player"></div>
45-
<div class="overlay-play" id="overlayPlay">
46-
<i class="fas fa-play"></i>
47-
</div>
48-
49-
<!-- Controls -->
50-
<div class="controls-bar">
51-
52-
<button id="playPauseBtn" class="btn" title="Play / Pause (Space)">
53-
<i class="fas fa-play"></i>
54-
</button>
55-
56-
<div class="ctrl-sep"></div>
57-
58-
<div class="volume-container">
59-
<button id="muteBtn" class="btn" title="Mute (M)">
60-
<i class="fas fa-volume-high"></i>
61-
</button>
62-
<input type="range" id="volumeSlider" class="slider" min="0" max="100" value="100" />
63-
</div>
64-
65-
<div class="ctrl-sep"></div>
66-
67-
<div class="seek-container">
68-
<input type="range" id="seekBar" class="slider" min="0" max="100" value="0" />
69-
</div>
70-
71-
<span class="time">
72-
<span id="currentTime">0:00</span>
73-
<span>/</span>
74-
<span id="duration">0:00</span>
75-
</span>
76-
77-
<div class="ctrl-sep"></div>
78-
79-
<select id="playbackSpeed" class="control-select" title="Playback speed">
80-
<option value="0.5">0.5×</option>
81-
<option value="1" selected>1×</option>
82-
<option value="1.5">1.5×</option>
83-
<option value="2">2×</option>
84-
</select>
85-
86-
</div> <!-- controls bar -->
87-
</div> <!-- video wrapper -->
45+
<div class="video-wrapper">
46+
<div id="player"></div>
47+
<div class="overlay-play" id="overlayPlay">
48+
<i class="fas fa-play"></i>
49+
</div>
50+
51+
<!-- Controls -->
52+
<div class="controls-bar">
53+
54+
<button id="playPauseBtn" class="btn" title="Play / Pause (Space)">
55+
<i class="fas fa-play"></i>
56+
</button>
57+
58+
<div class="ctrl-sep"></div>
59+
60+
<div class="volume-container">
61+
<button id="muteBtn" class="btn" title="Mute (M)">
62+
<i class="fas fa-volume-high"></i>
63+
</button>
64+
<input type="range" id="volumeSlider" class="slider" min="0" max="100" value="100" />
65+
</div>
66+
67+
<div class="ctrl-sep"></div>
68+
69+
<div class="seek-container">
70+
<input type="range" id="seekBar" class="slider" min="0" max="100" value="0" />
71+
</div>
72+
73+
<span class="time">
74+
<span id="currentTime">0:00</span>
75+
<span>/</span>
76+
<span id="duration">0:00</span>
77+
</span>
78+
79+
<div class="ctrl-sep"></div>
80+
81+
<select id="playbackSpeed" class="control-select" title="Playback speed">
82+
<option value="0.5">0.5×</option>
83+
<option value="1" selected>1×</option>
84+
<option value="1.5">1.5×</option>
85+
<option value="2">2×</option>
86+
</select>
87+
88+
</div> <!-- controls bar -->
89+
</div> <!-- video wrapper -->
8890
</div> <!-- player card -->
8991

9092
<!-- n seconds -->
9193
<div style="margin-top: 20px;">
92-
<label for="numSecondsOfVideoToTranscribe">From the current time in the video, how many seconds of content do you want to transcribe?</label><br><br>
93-
94-
<input
95-
type="number"
96-
id="numSecondsOfVideoToTranscribe"
97-
min="5"
98-
value="5"
99-
style="width: 80px; padding: 6px;"
100-
/>
94+
<label for="numSecondsOfVideoToTranscribe">From the current time in the video, how many seconds of content
95+
do you want to transcribe?</label><br><br>
96+
97+
<input type="number" id="numSecondsOfVideoToTranscribe" min="5" value="5"
98+
style="width: 80px; padding: 6px;" />
10199
</div>
102100

103101
<!-- Snap to earliest possible transcription segment in video -->
@@ -117,13 +115,12 @@ <h1>LinguaLoop</h1>
117115

118116
<!-- User transcription area -->
119117
<div>
120-
<textarea
121-
id="userTextArea"
122-
placeholder="Type what you hear..."
123-
rows="5"
124-
cols="60"></textarea>
125-
118+
<textarea id="userTextArea" placeholder="Type what you hear..." rows="5" cols="60"></textarea>
126119
<button id="scoreBtn">Score</button>
120+
<div id="hintBox" style="margin-top: 8px; color: #666; font-size: 0.8em;">
121+
Press <strong>Ctrl + Shift + L</strong> to automatically snap to restart video<br>at the beginning of
122+
the segment
123+
</div>
127124
</div>
128125

129126
<!-- Reference -->
@@ -140,4 +137,5 @@ <h1>LinguaLoop</h1>
140137
</script>
141138
<script src="/static/app.js"></script>
142139
</body>
140+
143141
</html>

0 commit comments

Comments
 (0)