-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
337 lines (319 loc) · 20.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<!-- RadioTimer, Copyright 2016 François Revol -->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Radio Timer</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/desktop.css" rel="alternate stylesheet" title="System Desktop Colors" />
<link href="css/black.css" rel="alternate stylesheet" title="Black Background" />
</head>
<body>
<div id="wrapper">
<header>
<span id="live_timer"><div id="main"> <span id="status"></span> <span id="running">00:00</span><span id="remaining">00:00</span> </div><div id="item"><span id="notifs"><span id="syncpeers"></span><span id="syncstatus"></span> <span id="lspstatus"></span></span> <span id="running">00:00</span> <span id="remaining">00:00</span> </div></div></span>
</header>
<div id="top">
<br />
</div>
<div id="debugDiv"></div>
<section id="manual_text">
<div style="text-align: center; font-size: 5em;">📻⏳</div>
<h1 lang="en">Welcome to RadioTimer.</h1>
<h1 lang="fr">Bienvenue dans RadioTimer.</h1>
<p lang="en">This allows you to track time when recording a radio session prepared from an etherpad or any other text document with proper H1 and H2 formating.</p>
<p lang="fr">Il permet de suivre le temps d'un enregistrement radio préparé depuis un etherpad ou n'importe-quel document texte formaté avec les H1 et H2 prévu.</p>
<p lang="en">You can prepare several sessions to record separately, each with any number of items you want to track time on. RadioTimer will automatically sum up the expected times for each session.</p>
<p lang="fr">Il est possible de préparer plusieurs sessions à enregistrer séparément. RadioTimer additionnera automatiquement les temps assignés à chaque item pour chaque session.</p>
<p lang="en">Source code is <a href="https://github.com/mmuman/RadioTimer">available on GitHub</a>, under GPLv3.</p>
<p lang="fr">Le code source est <a href="https://github.com/mmuman/RadioTimer">disponible sur GitHub</a>, sous GPLv3.</p>
<br/>
<h2 lang="en">Expected content formatting</h2>
<div lang="en">
<p>In order for RadioTimer to extract the needed informations, content must be formated as such:
<ul>
<li><code>H1</code> (Heading 1) tag mentions the title of each separate session to record.</li>
<li><code>H2</code> (Heading 2) tag mentions the title of each item in the session .</li>
<li>H2 tags shall have a <code>[MM:SS]</code> mark in the text to indicate the expected run time of the item.</li>
<li>H2 tags can also contain several codes (the <code>?</code> is replaces by a value):
<ul>
<li><code>[P:?]</code>: activate (<code>1</code>) or deactivates (<code>0</code>) the pause mode starting from this item.</li>
<li><code>[LSP:?]</code>: Starts a cue in Linux-Show-Player. The parameter is the cue number.</li>
<li><code>[LOI:?]</code>: Sends a command to LibreOffice Impress. The parameter is the slide number or a command letter (<code>s</code>tart, s<code>t</code>top, <code>n</code>ext, <code>p</code>revious, <code>b</code>lank, <code>r</code>esume).</li>
<li><code>ZIK</code> / <code>MUSIC</code> / <code>AUDIO</code>: Indicates that this item is a music, and that the reading time is added to the indicated time in the H2 for the estimation.</li>
</ul>
</li>
</ul>
RadioTimer will automatically calculate the total time per session and mention it in the session titles.
</p>
</div>
<h2 lang="fr">Formatage attendu du contenu</h2>
<div lang="fr">
<p>Pour que RadioTimer puisse extraire les informations pertinentes, le contenu doit être formaté ainsi :
<ul>
<li>Un tag <code>H1</code> (Titre 1) mentionne le titre de chaque session à enregistrer.</li>
<li>Un tag <code>H2</code> (Titre 2) mentionne le nom de chaque item dans la session.</li>
<li>Les tags H2 doivent contenir une marque <code>[MM:SS]</code> indiquant la durée estimée de l'item.</li>
<li>Les tags H2 peuvent également contenir plusieurs marques (le <code>?</code> étant remplacé par une valeur) :
<ul>
<li><code>[P:?]</code> : active (<code>1</code>) ou désactive (<code>0</code>) le mode pause à partir de cet item.</li>
<li><code>[LSP:?]</code> : Lance un son dans Linux-Show-Player. Le paramètre est le numéro du son.</li>
<li><code>[LOI:?]</code> : Envoie une commande à LibreOffice Impress. Le paramètre est le numéro de la diapo ou une lettre de commande (<code>s</code>tart, s<code>t</code>top, <code>n</code>ext, <code>p</code>revious, <code>b</code>lank, <code>r</code>esume).</li>
<li><code>ZIK</code> / <code>MUSIC</code> / <code>AUDIO</code> : Indique que l'item courant est une musique, et qu'il faut ajouter le temps de lecture du texte au temps indiqué dans le H2 dans l'estimation.</li>
</ul>
</li>
</ul>
RadioTimer calculera automatiquement le temps total par session et le mentionnera dans les titres de session.
</p>
</div>
<h2 lang="en">Pad Controls</h2>
<div lang="en">
<ul>
<li><b><span class="glyph_btn_eject">⏏</span> (Eject)</b>: Unload the current content and go back to the welcome page.</li>
<li><b>URL field</b>: URL of the pad to load from. It must support HTML export and allow cross-site loading.</li>
<li><b>Load</b>: Load content from the current pad URL (it will use the HTML export from it).</li>
</ul>
</div>
<h2 lang="fr">Contrôles du pad</h2>
<div lang="fr">
<ul>
<li><b><span class="glyph_btn_eject">⏏</span> (Ejecter)</b>: Décharger le contenu actuel et revenir à la page d'accueil.</li>
<li><b>Champ URL</b>: URL du pad où récupérer le contenu. Il doit supporter l'export HTML et le chargement depuis un autre domaine (cross-site).</li>
<li><b>Charger</b>: Charger le contenu depuis l'URL spécifiée (l'export HTML sera utilisé).</li>
</ul>
</div>
<div lang="en">You can also copy from an etherpad, or from LibreOffice and paste as HTML in the input field below:<br/></div>
<div lang="fr">Vous pouvez également copier depuis un etherpad ou depuis LibreOffice et coller en HTML dans le champ texte ci-dessous :<br/></div>
<form id="pasteform">
<input type="text" id="pastetarget" placeholder="paste something here…" value=""/>
</form>
<br />
<br />
<div lang="en">And you can add this bookmarklet to your browser (by dragging it or right-click, bookmark), and click it while on the etherpad:<br/></div>
<div lang="fr">Et vous pouvez ajouter ce bookmarklet à votre navigateur (par drag-n-drop ou clic droit, marque-page) et cliquer dessus en étant sur l'etherpad :<br/></div>
<a id="bookmarklet" href="javascript:">RadioTimer</a>
<br />
<br />
<h2 lang="en">Session Controls</h2>
<div lang="en">
<ul>
<li><b><span class="glyph_btn_session_prev">⏮</span> (Previous session)</b>: Go to the previous session. Disabled when playing.</li>
<li><b><span class="glyph_btn_item_prev">⏪</span> (Previous item)</b>: Forcibly go to previous item in the current session. Session timer keeps running, but item time starts again.</li>
<li><b><span class="glyph_btn_item_stop">⏹</span> (Stop)</b>: Stop playback.</li>
<li><b><span class="glyph_btn_item_play">⏵</span> (Play)</b>: Start playing the text (recording the session).</li>
<li><b><span class="glyph_btn_item_pause">⏸</span> / <span class="glyph_btn_item_pauseplay">⏯</span> (Pause)</b>: Do not go to the next item automatically, but stay on the current one even if late.</li>
<li><b><span class="glyph_btn_item_next">⏩</span> (Next item)</b>: Forcibly go to next item in the session. Session timer keeps running, but item time starts again.</li>
<li><b><span class="glyph_btn_session_next">⏭</span> (Next session)</b>: Go to next session. Disabled when playing.</li>
</ul>
</div>
<h2 lang="fr">Contrôles de session</h2>
<div lang="fr">
<ul>
<li><b><span class="glyph_btn_session_prev">⏮</span> (Session précédente)</b>: Aller à la session précédente. Désactivé lors de la lecture.</li>
<li><b><span class="glyph_btn_item_prev">⏪</span> (Item précédent)</b>: Aller à l'item précédent. Le timer continue, mais le temps de l'item repart à zéro.</li>
<li><b><span class="glyph_btn_item_stop">⏹</span> (Arrêt)</b>: Arrêter la lecture.</li>
<li><b><span class="glyph_btn_item_play">⏵</span> (Lecture)</b>: Commencer la lecture du texte (l'enregistrement de la session).</li>
<li><b><span class="glyph_btn_item_pause">⏸</span> / <span class="glyph_btn_item_pauseplay">⏯</span> (Pause)</b>: Désactiver le passage automatique à l'item suivant, et rester sur l'item actuel même en cas de retard sur l'horaire.</li>
<li><b><span class="glyph_btn_item_next">⏩</span> (Item suivant)</b>: Aller à l'item suivant. Le timer continue, mais le temps de l'item repart à zéro.</li>
<li><b><span class="glyph_btn_session_next">⏭</span> (Session suivante)</b>: Aller à la session suivante. Désactivé lors de la lecture.</li>
</ul>
</div>
<br />
<h2 lang="en">Extra buttons</h2>
<div lang="en">
<ul>
<li><b><span class="glyph_btn_show_titles">🗏</span> (Show Titles)</b>: Toggle showing only (H1/H2/H3...) titles to see the summary.</li>
<li><b><span class="glyph_btn_do_print">🖶</span> (Print)</b>: Print the contents.</li>
<li><b><span class="glyph_btn_show_exports">💾</span> (Exports)</b>: Show / hide the exports.</li>
<li><b><span class="glyph_btn_show_settings">🔧</span> (Settings)</b>: Show / hide the settings.</li>
</ul>
</div>
<h2 lang="fr">Autres boutons</h2>
<div lang="fr">
<ul>
<li><b><span class="glyph_btn_show_titles">🗏</span> (Montrer les titres)</b>: Montrer les titres seulement (H1/H2/H3...) ou aussi le contenu pour visualiser le sommaire.</li>
<li><b><span class="glyph_btn_do_print">🖶</span> (Imprimer)</b>: Imprimer le contenu.</li>
<li><b><span class="glyph_btn_show_exports">💾</span> (Paramètres)</b>: Cacher / montrer les exports.</li>
<li><b><span class="glyph_btn_show_settings">🔧</span> (Paramètres)</b>: Cacher / montrer les paramètres.</li>
</ul>
</div>
<br />
</section>
<section id="settings">
<h2 lang="en">Settings</h2>
<h2 lang="fr">Paramètres</h2>
<form id="settingsform">
<h3 lang="en">Text Settings</h3>
<h3 lang="fr">Paramètres de texte</h3>
<div>
<label for="settings_wpm"><span lang="en">Words per minute: </span><span lang="fr">Mots par minute : </span></label>
<input id="settings_wpm" type="number" value="150" min="50" max="500" step="10" onchange="saveSettings();">
</div>
<p lang="en"><i>Specifies the number of <a href="https://en.wikipedia.org/wiki/Words_per_minute">words per minute</a> to account for to calculate reading time. A normal conversation is around 200 words per minute, but for an audio recording it is advised not to speak more than 160.</i></p>
<p lang="fr"><i>Spécifie le nombre de <a href="https://fr.wikipedia.org/wiki/Mot_par_minute">mots par minute</a> en moyenne à prendre en compte pour le temps de lecture. Une conversation normale est autour de 200 mots par minute, mais pour un enregistrement il est recommandé de ne pas dépasser 160.</i></p>
<p lang="en"><b>⚠</b> <i>Changes take effect on pad reload.</i></p>
<p lang="fr"><b>⚠</b> <i>Les changements prennent effet au rechargement du pad.</i></p>
<br />
<h3 lang="en">Interface Settings</h3>
<h3 lang="fr">Paramètres de l'Interface</h3>
<div>
<input id="settings_autostop" type="checkbox" onchange="saveSettings();">
<label for="settings_autostop"><span lang="en">Autostop at end of session</span><span lang="fr">Arrêt automatique en fin de session</span></label>
</div>
<p lang="en"><i>Stop when the end of the last item is reached.</i></p>
<p lang="fr"><i>Arrêt lorsque le dernier item se termine.</i></p>
<div>
<input id="settings_smooth" type="checkbox" onchange="saveSettings();">
<label for="settings_smooth"><span lang="en">Smooth Scrolling</span><span lang="fr">Scrolling progressif</span></label>
</div>
<p lang="en"><i>Smooth or immediate scrolling to items.</i></p>
<p lang="fr"><i>Déplacement graduel ou immédiat d'un item à l'autre.</i></p>
<div>
<label for="settings_css"><span lang="en">Style: </span><span lang="fr">Style : </span></label>
<select id="settings_css" size="1" onchange="saveSettings();">
<option value="default">Default</option>
</select>
</div>
<p lang="en"><i>The CSS Page Style to use.</i></p>
<p lang="fr"><i>Le style de page CSS à utiliser.</i></p>
<br />
<h3 lang="en">Synchronization Settings</h3>
<h3 lang="fr">Paramètres de synchronisation</h3>
<div>
<label for="settings_sync_startstop"><span lang="en">recording start/stop URL: </span><span lang="fr">URL pour commande start/stop enregistrement : </span></label>
<input type="text" id="settings_sync_startstop" size="30" placeholder="http://foo/{startcmd,stopcmd}" onchange="saveSettings();" />
</div>
<p lang="en"><i>The URL(s) to connect to for starting/stopping recording. You can specify start/stop URL differences with <tt>{}</tt>, like: <tt>http://example.com/{start,stop}</tt>. Make sure you only have this set once in all your open tabs or you will end up triggering twice (starting then stopping right away if both commands are the same).</i></p>
<p lang="fr"><i>L'(les) URL où se connecter pour démarrer/arrêter l'enregistrement. Vous pouvez spécifier une différence entre les deux URLs avec <tt>{}</tt>, comme : <tt>http://example.com/{start,stop}</tt>. Assurez-vous de n'avoir ce champ remplis qu'une seule fois dans les onglets ouverts ou vous risquez de déclancher plusieurs fois de suite (démarrer et arrêter tout de suite si les deux commandes sont indifférenciées).</i></p>
<br />
<br />
<div>
<label for="settings_sync_lsp_ip"><span lang="en">Linux-Show-Player host[:port]: </span><span lang="fr">Hôte[:port] Linux-Show-Player : </span></label>
<input type="text" id="settings_sync_lsp_ip" size="20" placeholder="192.168.xxx.xxx:8070" onchange="saveSettings();" />
</div>
<p lang="en"><i>The host (and port if not 8070) to connect to Linux-Show-Player. Make sure you only have this set once in all your open tabs or you will end up triggering twice (starting then stopping right away).</i></p>
<p lang="fr"><i>L'hôte (et le port si différent de 8070) pour se connecter à Linux-Show-Player. Assurez-vous de n'avoir ce champ remplis qu'une seule fois dans les onglets ouverts ou vous risquez de déclancher plusieurs fois de suite (démarrer et arrêter tout de suite).</i></p>
<br />
<br />
<div>
<label for="settings_sync_loi_ip"><span lang="en">LibreOffice Impress sync host[:port]: </span><span lang="fr">Hôte[:port] synchro LibreOffice Impress : </span></label>
<input type="text" id="settings_sync_loi_ip" size="20" placeholder="192.168.xxx.xxx:8060" onchange="saveSettings();" />
</div>
<p lang="en"><i>The host (and port if not 8060) to connect to the LibreOffice Impress remote sync script (loimpress-sync.sh). Make sure you only have this set once in all your open tabs or you will end up triggering twice (like advancing two slides instead of one).</i></p>
<p lang="fr"><i>L'hôte (et le port si différent de 8060) pour se connecter au script de synchronisation de la télécommande LibreOffice Impress (loimpress-sync.sh). Assurez-vous de n'avoir ce champ remplis qu'une seule fois dans les onglets ouverts ou vous risquez de déclancher plusieurs fois de suite (comme avancer de deux diapos au lieu d'une).</i></p>
<br />
<br />
<div>
<label for="settings_sync_ws_ip"><span lang="en">web-slideshow-sync-server host[:port]: </span><span lang="fr">Hôte[:port] web-slideshow-sync-server : </span></label>
<input type="text" id="settings_sync_ws_ip" size="20" placeholder="192.168.xxx.xxx:8102" onchange="wsAPI.connectWS(); saveSettings();" />
</div>
<p lang="en"><i>The host (and port if not 8102) to connect to <a href="https://git.legeox.net/capslock/web-slideshow-sync">web-slideshow-sync-server</a>.</i></p>
<p lang="fr"><i>L'hôte (et le port si différent de 8102) pour se connecter à <a href="https://git.legeox.net/capslock/web-slideshow-sync">web-slideshow-sync-server</a>.</i></p>
<br />
<div>
<label for="settings_sync_ws_code"><span lang="en">web-slideshow-sync-server code: </span><span lang="fr">Code web-slideshow-sync-server : </span></label>
<input type="text" id="settings_sync_ws_code" size="20" onchange="wsAPI.connectWS(); saveSettings();" />
</div>
<p lang="en"><i>The control code for web-slideshow-sync-server.</i></p>
<p lang="fr"><i>Le code de contrôle pour web-slideshow-sync-server.</i></p>
<br />
<h3 lang="en">Export Settings</h3>
<h3 lang="fr">Paramètres d'export</h3>
<div>
<label for="settings_export_format"><span lang="en">Bookmark export format: </span><span lang="fr">Format d'export des signets : </span></label>
<select id="settings_export_format" size="1" onchange="saveSettings();">
</select>
</div>
<p lang="en"><i>The format used to export bookmarks.</i></p>
<p lang="fr"><i>Le format à utiliser pour l'export de signets.</i></p>
<br />
<div>
<label for="settings_export_which"><span lang="en">Exported time: </span><span lang="fr">Temps à exporter : </span></label>
<select id="settings_export_which" size="1" onchange="saveSettings();">
<option value="recorded" selected>Recorded</option>
<option value="expected">Expected</option>
<option value="estimated">Estimated</option>
</select>
</div>
<p lang="en"><i>Which time source to use for export.</i></p>
<p lang="fr"><i>Les temps à exporter.</i></p>
<br />
<div>
<input id="settings_export_auto" type="checkbox" onchange="saveSettings();">
<label for="settings_export_auto"><span lang="en">Auto export on stop</span><span lang="fr">Export auto au stop</span></label>
</div>
<p lang="en"><i>If we automatically export the times when recording stopped.</i></p>
<p lang="fr"><i>Si on exporte automatiquement les temps après l'enregistrement.</i></p>
<br />
</form>
<hr />
</section>
<section id="exports">
<h2 lang="en">Exports</h2>
<h2 lang="fr">Exports</h2>
<form id="exportsform">
<div>
<label for="export_chapters_text"><span lang="en">Chapters (see <a href="#settings_export_format">format settings</a>): </span><span lang="fr">Chapitres (cf. <a href="#settings_export_format">réglages du format</a>) : </span></label>
<textarea rows="10" cols="80" id="export_chapters_text"></textarea>
<a id="export_chapters_download">💾 <span lang="en">Download</span><span lang="fr">Télécharger</span></a>
</div>
</form>
<br />
<hr />
<br />
<br />
<br />
</section>
<section id="contents">
<div lang="en"><i>This will be replaced by the pad content.</i><br/></div>
<div lang="fr"><i>Ceci sera remplacé par le contenu du pad.</i><br/></div>
<br />
<br />
<br />
<br />
<br />
<br />
</section>
</div>
<br />
<br />
<br />
<br />
<footer>
<div id="toolbar">
<div id="allbuttons">
<form id="padform">
<input type="button" id="btn_eject" value="⏏" title="Eject" />
<input type="text" id="url" placeholder="URL to an etherpad…" value=""/>
<span id="progress" style="display:none"><span>Loading…</span></span>
<input type="submit" id="btn_load" value="Load" />
</form>
<form id="controls">
<input type="button" id="btn_session_prev" value="⏮" title="Previous session"/>
<input type="button" id="btn_item_prev" value="⏪" title="Previous item"/>
<input type="button" id="btn_item_stop" value="⏹" title="Stop" />
<input type="button" id="btn_item_play" value="⏵" title="Play" />
<input type="button" id="btn_item_pause" value="⏸" title="Pause" />
<input type="button" id="btn_item_next" value="⏩" title="Next item" />
<input type="button" id="btn_session_next" value="⏭" title="Next session" />
</form>
<form id="tools">
<span id="extra_btns">
<input type="button" id="btn_show_titles" value="🗏" title="Show titles only" />
<!--<input type="button" id="btn_do_print" value="🖶" title="Print current content" />-->
<!--<input type="button" id="btn_export_bookmarks" value="🔖" title="Export session bookmarks" />-->
<input type="button" id="btn_show_exports" value="💾" title="Show exports" />
<input type="button" id="btn_show_settings" value="🔧" title="Show settings" />
</span>
</form>
</div>
<div id="progress_h1_h2">
<div id="progress_h1"><span id="current_h1">(Session)</span><div id="bar"></div></div> <div id="progress_h2"><span id="current_h2">(Item)</span><div id="bar"></div></div>
</div>
</div>
</footer>
<script src="js/zepto.js" type="application/javascript"></script>
<script src="js/slimdown.js" type="application/javascript"></script>
<script src="js/script.js" type="application/javascript"></script>
</body>
</html>