Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
{{!
2
    This file is part of Moodle - http://moodle.org/
3
 
4
    Moodle is free software: you can redistribute it and/or modify
5
    it under the terms of the GNU General Public License as published by
6
    the Free Software Foundation, either version 3 of the License, or
7
    (at your option) any later version.
8
 
9
    Moodle is distributed in the hope that it will be useful,
10
    but WITHOUT ANY WARRANTY; without even the implied warranty of
11
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
    GNU General Public License for more details.
13
 
14
    You should have received a copy of the GNU General Public License
15
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16
}}
17
{{!
18
    @template tiny_media/embed_media_modal_video
19
 
20
    Embed media video modal template.
21
 
22
    Example context (json):
23
    {
24
 
25
    }
26
}}
27
{{#video.sources}}
28
    <div class="tiny_media_source tiny_media_media_source">
29
        <div class="mb-1">
30
            <label for="video-video-url-input">
31
                {{#str}} videosourcelabel, tiny_media {{/str}}
32
            </label>
33
            <div class="input-group input-append w-100">
34
                <input id="video-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{.}}"/>
35
                {{#showfilepicker}}
36
                <span class="input-group-append">
37
                    <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
38
                </span>
39
                {{/showfilepicker}}
40
            </div>
41
        </div>
42
        <div class="addcomponent-wrapper">
43
            <a href="#" class="addcomponent">
44
                {{#str}} addsource, tiny_media {{/str}}
45
            </a>
46
            {{#addsourcehelpicon}}
47
                {{> core/help_icon }}
48
            {{/addsourcehelpicon}}
49
        </div>
50
        <div class="removecomponent-wrapper hidden">
51
            <a href="#" class="removecomponent">
52
                {{#str}} remove, tiny_media {{/str}}
53
            </a>
54
        </div>
55
    </div>
56
{{/video.sources}}
57
{{^video}}
58
    <div class="tiny_media_source tiny_media_media_source">
59
        <div class="mb-1">
60
            <label for="video-video-url-input">
61
                {{#str}} videosourcelabel, tiny_media {{/str}}
62
            </label>
63
            <div class="input-group input-append w-100">
64
                <input id="video-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
65
                {{#showfilepicker}}
66
                <span class="input-group-append">
67
                    <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
68
                </span>
69
                {{/showfilepicker}}
70
            </div>
71
        </div>
72
        <div class="addcomponent-wrapper">
73
            <a href="#" class="addcomponent">
74
                {{#str}} addsource, tiny_media {{/str}}
75
            </a>
76
            {{#addsourcehelpicon}}
77
                {{> core/help_icon }}
78
            {{/addsourcehelpicon}}
79
        </div>
80
        <div class="removecomponent-wrapper hidden">
81
            <a href="#" class="removecomponent">
82
                {{#str}} remove, tiny_media {{/str}}
83
            </a>
84
        </div>
85
    </div>
86
{{/video}}
87
<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options">
88
    <input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">
89
    <legend class="d-flex align-items-center px-1">
90
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
91
            <a role="button" data-toggle="collapse" href="#vdisplayoptions" aria-expanded="false"
92
               aria-controls="vdisplayoptions"
93
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
94
                <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
95
                            <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
96
                </span>
97
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
98
                    <span class="dir-rtl-hide">
99
                        <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
100
                    </span>
101
                    <span class="dir-ltr-hide">
102
                        <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
103
                    </span>
104
                </span>
105
                <span class="sr-only">{{#str}} displayoptions, tiny_media {{/str}}</span>
106
            </a>
107
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
108
                {{#str}} displayoptions, tiny_media {{/str}}
109
            </h3>
110
        </div>
111
    </legend>
112
    <div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">
113
        <div class="tiny_media_display_options">
114
            <div class="mb-1">
115
                <label for="vdisplayoptions_media-title-entry">{{#str}} entertitle, tiny_media {{/str}}</label>
116
                <input class="form-control fullwidth tiny_media_title_entry" type="text" id="vdisplayoptions_media-title-entry"
117
                       size="32" value="{{video.title}}"/>
118
            </div>
119
            <div class="clearfix"></div>
120
            <div class="mb-1">
121
                <label>{{#str}} size, tiny_media {{/str}}</label>
122
                <div class="d-flex flex-wrap align-items-center tiny_media_poster_size">
123
                    <label for="vdisplayoptions_media-width-entry" class="accesshide">{{#str}} videowidth, tiny_media {{/str}}</label>
124
                    <input id="vdisplayoptions_media-width-entry" type="text" class="form-control w-auto mr-1 tiny_media_width_entry input-mini"
125
                           size="4" value="{{video.width}}"/>
126
                    x
127
                    <label for="vdisplayoptions_media-height-entry" class="accesshide">{{#str}} videoheight, tiny_media {{/str}}</label>
128
                    <input id="vdisplayoptions_media-height-entry" type="text" class="form-control w-auto ml-1 tiny_media_height_entry input-mini"
129
                           size="4" value="{{video.height}}"/>
130
                </div>
131
            </div>
132
            <div class="clearfix"></div>
133
            <div class="tiny_media_source tiny_media_poster_source">
134
                <div class="mb-1">
135
                    <label for="display-video-url-input">
136
                        {{#str}} entersource, tiny_media {{/str}}
137
                    </label>
138
                    <div class="input-group input-append w-100">
139
                        <input id="display-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{video.poster}}"/>
140
                        {{#showfilepickerposter}}
141
                        <span class="input-group-append">
142
                            <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
143
                        </span>
144
                        {{/showfilepickerposter}}
145
                    </div>
146
                </div>
147
            </div>
148
        </div>
149
    </div>
150
</fieldset>
151
<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">
152
    <input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">
153
    {{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}
154
    <legend class="d-flex align-items-center px-1">
155
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
156
            <a role="button" data-toggle="collapse" href="#vadvancedsettings" aria-expanded="false"
157
               aria-controls="vadvancedsettings"
158
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
159
            <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
160
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
161
                            </span>
162
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
163
                                <span class="dir-rtl-hide">
164
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
165
                                </span>
166
                                <span class="dir-ltr-hide">
167
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
168
                                </span>
169
                            </span>
170
                <span class="sr-only">{{#str}} advancedsettings, tiny_media {{/str}}</span>
171
            </a>
172
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
173
                {{#str}} advancedsettings, tiny_media {{/str}}
174
            </h3>
175
        </div>
176
    </legend>
177
    <div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">
178
        <div class="tiny_media_advancedsettings">
179
            <div class="form-check">
180
                <input type="checkbox" checked="true" class="form-check-input tiny_media_controls"
181
                       id="vadvancedsettings_media-controls-toggle" {{# video.controls }}checked{{/ video.controls }}/>
182
                <label class="form-check-label" for="vadvancedsettings_media-controls-toggle">
183
                    {{#str}} controls, tiny_media {{/str}}
184
                </label>
185
            </div>
186
            <div class="form-check">
187
                <input type="checkbox" class="form-check-input tiny_media_autoplay"
188
                       id="vadvancedsettings_media-autoplay-toggle" {{# video.autoplay }}checked{{/ video.autoplay }}/>
189
                <label class="form-check-label" for="vadvancedsettings_media-autoplay-toggle">
190
                    {{#str}} autoplay, tiny_media {{/str}}
191
                </label>
192
            </div>
193
            <div class="form-check">
194
                <input type="checkbox" class="form-check-input tiny_media_mute"
195
                       id="vadvancedsettings_media-mute-toggle" {{# video.muted }}checked{{/ video.muted }}/>
196
                <label class="form-check-label" for="vadvancedsettings_media-mute-toggle">
197
                    {{#str}} mute, tiny_media {{/str}}
198
                </label>
199
            </div>
200
            <div class="form-check">
201
                <input type="checkbox" class="form-check-input tiny_media_loop"
202
                       id="vadvancedsettings_media-loop-toggle" {{# video.loop }}checked{{/ video.loop }}/>
203
                <label class="form-check-label" for="vadvancedsettings_media-loop-toggle">
204
                    {{#str}} loop, tiny_media {{/str}}
205
                </label>
206
            </div>
207
        </div>
208
    </div>
209
</fieldset>
210
<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">
211
    <input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">
212
    <legend class="d-flex align-items-center px-1">
213
        <div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">
214
            <a role="button" data-toggle="collapse" href="#vtracks" aria-expanded="false"
215
               aria-controls="vtracks"
216
               class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">
217
            <span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, moodle {{/str}}">
218
                                <i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>
219
                            </span>
220
                <span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, moodle {{/str}}">
221
                                <span class="dir-rtl-hide">
222
                                    <i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>
223
                                </span>
224
                                <span class="dir-ltr-hide">
225
                                    <i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>
226
                                </span>
227
                            </span>
228
                <span class="sr-only">{{#str}} tracks, tiny_media {{/str}}</span>
229
            </a>
230
            <h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">
231
                {{#str}} tracks, tiny_media {{/str}}
232
            </h3>
233
        </div>
234
        {{#trackshelpicon}}
235
            {{> core/help_icon }}
236
        {{/trackshelpicon}}
237
    </legend>
238
    <div id="vtracks" class="fcontainer collapseable collapse px-1">
239
        <ul class="nav nav-tabs mb-3">
240
            <li data-track-kind="subtitles" class="nav-item">
241
                <a class="nav-link active" href="#{{elementid}}_vtracks_subtitles"
242
                   role="tab" data-toggle="tab">
243
                    {{#str}} subtitles, tiny_media {{/str}}
244
                </a>
245
            </li>
246
            <li data-track-kind="captions" class="nav-item">
247
                <a class="nav-link" href="#{{elementid}}_vtracks_captions" role="tab" data-toggle="tab">
248
                    {{#str}} captions, tiny_media {{/str}}
249
                </a>
250
            </li>
251
            <li data-track-kind="descriptions" class="nav-item">
252
                <a class="nav-link" href="#{{elementid}}_vtracks_descriptions"
253
                   role="tab" data-toggle="tab">
254
                    {{#str}} descriptions, tiny_media {{/str}}
255
                </a>
256
            </li>
257
            <li data-track-kind="chapters" class="nav-item">
258
                <a class="nav-link" href="#{{elementid}}_vtracks_chapters" role="tab" data-toggle="tab">
259
                    {{#str}} chapters, tiny_media {{/str}}
260
                </a>
261
            </li>
262
            <li data-track-kind="metadata" class="nav-item">
263
                <a class="nav-link" href="#{{elementid}}_vtracks_metadata" role="tab" data-toggle="tab">
264
                    {{#str}} metadata, tiny_media {{/str}}
265
                </a>
266
            </li>
267
        </ul>
268
        <div class="tab-content">
269
            <div data-track-kind="subtitles" class="tab-pane active"
270
                 id="{{elementid}}_vtracks_subtitles">
271
                <div class="trackhelp">
272
                    {{#subtitleshelpicon}}
273
                        {{> core/help_icon }}
274
                    {{/subtitleshelpicon}}
275
                </div>
276
                {{#video.tracks.subtitles}}
277
                    <div class="mb-1 tiny_media_track">
278
                        <div class="tiny_media_source tiny_media_track_source">
279
                            <div class="mb-1">
280
                                <label for="subtitle-video-url-input">
281
                                    {{#str}} subtitlessourcelabel, tiny_media {{/str}}
282
                                </label>
283
                                <div class="input-group input-append w-100">
284
                                    <input id="subtitle-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
285
                                    {{#showfilepickertrack}}
286
                                    <span class="input-group-append">
287
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
288
                                    </span>
289
                                    {{/showfilepickertrack}}
290
                                </div>
291
                            </div>
292
                        </div>
293
                        <div class="mb-3">
294
                            <label class="w-100" for="subtitle-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
295
                            <select id="subtitle-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
296
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
297
                                    {{#langsinstalled}}
298
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
299
                                    {{/langsinstalled}}
300
                                </optgroup>
301
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
302
                                    {{#langsavailable}}
303
                                        <option value="{{code}}">{{lang}}</option>
304
                                    {{/langsavailable}}
305
                                </optgroup>
306
                            </select>
307
                        </div>
308
                        <div class="mb-3">
309
                            <label class="w-100" for="subtitle-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
310
                            <input id="subtitle-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
311
                        </div>
312
                        <div class="form-check">
313
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
314
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
315
                        </div>
316
                        <div class="addcomponent-wrapper">
317
                            <a href="#" class="addcomponent">
318
                                {{#str}} addsubtitlestrack, tiny_media {{/str}}
319
                            </a>
320
                        </div>
321
                        <div class="removecomponent-wrapper hidden">
322
                            <a href="#" class="removecomponent">
323
                                {{#str}} remove, tiny_media {{/str}}
324
                            </a>
325
                        </div>
326
                    </div>
327
                {{/video.tracks.subtitles}}
328
                {{^video.tracks.subtitles}}
329
                    <div class="mb-1 tiny_media_track">
330
                        <div class="tiny_media_source tiny_media_track_source">
331
                            <div class="mb-1">
332
                                <label for="subtitle-video-url-input">
333
                                    {{#str}} subtitlessourcelabel, tiny_media {{/str}}
334
                                </label>
335
                                <div class="input-group input-append w-100">
336
                                    <input id="subtitle-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
337
                                    {{#showfilepickertrack}}
338
                                    <span class="input-group-append">
339
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
340
                                    </span>
341
                                    {{/showfilepickertrack}}
342
                                </div>
343
                            </div>
344
                        </div>
345
                        <div class="mb-3">
346
                            <label class="w-100" for="subtitle-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
347
                            <select id="subtitle-video-lang-input" class="custom-select tiny_media_track_lang_entry">
348
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
349
                                    {{#langsinstalled}}
350
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
351
                                    {{/langsinstalled}}
352
                                </optgroup>
353
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
354
                                    {{#langsavailable}}
355
                                        <option value="{{code}}">{{lang}}</option>
356
                                    {{/langsavailable}}
357
                                </optgroup>
358
                            </select>
359
                        </div>
360
                        <div class="mb-3">
361
                            <label class="w-100" for="subtitle-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
362
                            <input id="subtitle-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
363
                        </div>
364
                        <div class="form-check">
365
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
366
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
367
                        </div>
368
                        <div class="addcomponent-wrapper">
369
                            <a href="#" class="addcomponent">
370
                                {{#str}} addsubtitlestrack, tiny_media {{/str}}
371
                            </a>
372
                        </div>
373
                        <div class="removecomponent-wrapper hidden">
374
                            <a href="#" class="removecomponent">
375
                                {{#str}} remove, tiny_media {{/str}}
376
                            </a>
377
                        </div>
378
                    </div>
379
                {{/video.tracks.subtitles}}
380
            </div>
381
            <div data-track-kind="captions" class="tab-pane"
382
                 id="{{elementid}}_vtracks_captions">
383
                <div class="trackhelp">
384
                    {{#captionshelpicon}}
385
                        {{> core/help_icon }}
386
                    {{/captionshelpicon}}
387
                </div>
388
                {{#video.tracks.captions}}
389
                    <div class="mb-1 tiny_media_track">
390
                        <div class="tiny_media_source tiny_media_track_source">
391
                            <div class="mb-1">
392
                                <label for="caption-video-url-input">
393
                                    {{#str}} captionssourcelabel, tiny_media {{/str}}
394
                                </label>
395
                                <div class="input-group input-append w-100">
396
                                    <input id="caption-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
397
                                    {{#showfilepickertrack}}
398
                                    <span class="input-group-append">
399
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
400
                                    </span>
401
                                    {{/showfilepickertrack}}
402
                                </div>
403
                            </div>
404
                        </div>
405
                        <div class="mb-3">
406
                            <label class="w-100" for="caption-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
407
                            <select id="caption-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
408
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
409
                                    {{#langsinstalled}}
410
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
411
                                    {{/langsinstalled}}
412
                                </optgroup>
413
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
414
                                    {{#langsavailable}}
415
                                        <option value="{{code}}">{{lang}}</option>
416
                                    {{/langsavailable}}
417
                                </optgroup>
418
                            </select>
419
                        </div>
420
                        <div class="mb-3">
421
                            <label class="w-100" for="caption-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
422
                            <input id="caption-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
423
                        </div>
424
                        <div class="form-check">
425
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
426
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
427
                        </div>
428
                        <div class="addcomponent-wrapper">
429
                            <a href="#" class="addcomponent">
430
                                {{#str}} addcaptionstrack, tiny_media {{/str}}
431
                            </a>
432
                        </div>
433
                        <div class="removecomponent-wrapper hidden">
434
                            <a href="#" class="removecomponent">
435
                                {{#str}} remove, tiny_media {{/str}}
436
                            </a>
437
                        </div>
438
                    </div>
439
                {{/video.tracks.captions}}
440
                {{^video.tracks.captions}}
441
                    <div class="mb-1 tiny_media_track">
442
                        <div class="tiny_media_source tiny_media_track_source">
443
                            <div class="mb-1">
444
                                <label for="caption-video-url-input">
445
                                    {{#str}} captionssourcelabel, tiny_media {{/str}}
446
                                </label>
447
                                <div class="input-group input-append w-100">
448
                                    <input id="caption-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
449
                                    {{#showfilepickertrack}}
450
                                    <span class="input-group-append">
451
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
452
                                    </span>
453
                                    {{/showfilepickertrack}}
454
                                </div>
455
                            </div>
456
                        </div>
457
                        <div class="mb-3">
458
                            <label class="w-100" for="caption-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
459
                            <select id="caption-video-lang-input" class="custom-select tiny_media_track_lang_entry">
460
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
461
                                    {{#langsinstalled}}
462
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
463
                                    {{/langsinstalled}}
464
                                </optgroup>
465
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
466
                                    {{#langsavailable}}
467
                                        <option value="{{code}}">{{lang}}</option>
468
                                    {{/langsavailable}}
469
                                </optgroup>
470
                            </select>
471
                        </div>
472
                        <div class="mb-3">
473
                            <label class="w-100" for="caption-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
474
                            <input id="caption-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
475
                        </div>
476
                        <div class="form-check">
477
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
478
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
479
                        </div>
480
                        <div class="addcomponent-wrapper">
481
                            <a href="#" class="addcomponent">
482
                                {{#str}} addcaptionstrack, tiny_media {{/str}}
483
                            </a>
484
                        </div>
485
                        <div class="removecomponent-wrapper hidden">
486
                            <a href="#" class="removecomponent">
487
                                {{#str}} remove, tiny_media {{/str}}
488
                            </a>
489
                        </div>
490
                    </div>
491
                {{/video.tracks.captions}}
492
            </div>
493
            <div data-track-kind="descriptions" class="tab-pane"
494
                 id="{{elementid}}_vtracks_descriptions">
495
                <div class="trackhelp">
496
                    {{#descriptionshelpicon}}
497
                        {{> core/help_icon }}
498
                    {{/descriptionshelpicon}}
499
                </div>
500
                {{#video.tracks.descriptions}}
501
                    <div class="mb-1 tiny_media_track">
502
                        <div class="tiny_media_source tiny_media_track_source">
503
                            <div class="mb-1">
504
                                <label for="description-video-url-input">
505
                                    {{#str}} descriptionssourcelabel, tiny_media {{/str}}
506
                                </label>
507
                                <div class="input-group input-append w-100">
508
                                    <input id="description-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
509
                                    {{#showfilepickertrack}}
510
                                    <span class="input-group-append">
511
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
512
                                    </span>
513
                                    {{/showfilepickertrack}}
514
                                </div>
515
                            </div>
516
                        </div>
517
                        <div class="mb-3">
518
                            <label class="w-100" for="description-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
519
                            <select id="description-video-ang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
520
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
521
                                    {{#langsinstalled}}
522
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
523
                                    {{/langsinstalled}}
524
                                </optgroup>
525
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
526
                                    {{#langsavailable}}
527
                                        <option value="{{code}}">{{lang}}</option>
528
                                    {{/langsavailable}}
529
                                </optgroup>
530
                            </select>
531
                        </div>
532
                        <div class="mb-3">
533
                            <label class="w-100" for="description-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
534
                            <input id="description-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
535
                        </div>
536
                        <div class="form-check">
537
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
538
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
539
                        </div>
540
                        <div class="addcomponent-wrapper">
541
                            <a href="#" class="addcomponent">
542
                                {{#str}} adddescriptionstrack, tiny_media {{/str}}
543
                            </a>
544
                        </div>
545
                        <div class="removecomponent-wrapper hidden">
546
                            <a href="#" class="removecomponent">
547
                                {{#str}} remove, tiny_media {{/str}}
548
                            </a>
549
                        </div>
550
                    </div>
551
                {{/video.tracks.descriptions}}
552
                {{^video.tracks.descriptions}}
553
                    <div class="mb-1 tiny_media_track">
554
                        <div class="tiny_media_source tiny_media_track_source">
555
                            <div class="mb-1">
556
                                <label for="description-video-url-input">
557
                                    {{#str}} descriptionssourcelabel, tiny_media {{/str}}
558
                                </label>
559
                                <div class="input-group input-append w-100">
560
                                    <input id="description-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
561
                                    {{#showfilepickertrack}}
562
                                    <span class="input-group-append">
563
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
564
                                    </span>
565
                                    {{/showfilepickertrack}}
566
                                </div>
567
                            </div>
568
                        </div>
569
                        <div class="mb-3">
570
                            <label class="w-100" for="description-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
571
                            <select id="description-video-lang-input" class="custom-select tiny_media_track_lang_entry">
572
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
573
                                    {{#langsinstalled}}
574
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
575
                                    {{/langsinstalled}}
576
                                </optgroup>
577
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
578
                                    {{#langsavailable}}
579
                                        <option value="{{code}}">{{lang}}</option>
580
                                    {{/langsavailable}}
581
                                </optgroup>
582
                            </select>
583
                        </div>
584
                        <div class="mb-3">
585
                            <label class="w-100" for="description-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
586
                            <input id="description-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
587
                        </div>
588
                        <div class="form-check">
589
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
590
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
591
                        </div>
592
                        <div class="addcomponent-wrapper">
593
                            <a href="#" class="addcomponent">
594
                                {{#str}} adddescriptionstrack, tiny_media {{/str}}
595
                            </a>
596
                        </div>
597
                        <div class="removecomponent-wrapper hidden">
598
                            <a href="#" class="removecomponent">
599
                                {{#str}} remove, tiny_media {{/str}}
600
                            </a>
601
                        </div>
602
                    </div>
603
                {{/video.tracks.descriptions}}
604
            </div>
605
            <div data-track-kind="chapters" class="tab-pane"
606
                 id="{{elementid}}_vtracks_chapters">
607
                <div class="trackhelp">
608
                    {{#chaptershelpicon}}
609
                        {{> core/help_icon }}
610
                    {{/chaptershelpicon}}
611
                </div>
612
                {{#video.tracks.chapters}}
613
                    <div class="mb-1 tiny_media_track">
614
                        <div class="tiny_media_source tiny_media_track_source">
615
                            <div class="mb-1">
616
                                <label for="chapter-video-url-input">
617
                                    {{#str}} chapterssourcelabel, tiny_media {{/str}}
618
                                </label>
619
                                <div class="input-group input-append w-100">
620
                                    <input id="chapter-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
621
                                    {{#showfilepickertrack}}
622
                                    <span class="input-group-append">
623
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
624
                                    </span>
625
                                    {{/showfilepickertrack}}
626
                                </div>
627
                            </div>
628
                        </div>
629
                        <div class="mb-3">
630
                            <label class="w-100" for="chapter-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
631
                            <select id="chapter-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
632
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
633
                                    {{#langsinstalled}}
634
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
635
                                    {{/langsinstalled}}
636
                                </optgroup>
637
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
638
                                    {{#langsavailable}}
639
                                        <option value="{{code}}">{{lang}}</option>
640
                                    {{/langsavailable}}
641
                                </optgroup>
642
                            </select>
643
                        </div>
644
                        <div class="mb-3">
645
                            <label class="w-100" for="chapter-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
646
                            <input id="chapter-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
647
                        </div>
648
                        <div class="form-check">
649
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
650
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
651
                        </div>
652
                        <div class="addcomponent-wrapper">
653
                            <a href="#" class="addcomponent">
654
                                {{#str}} addchapterstrack, tiny_media {{/str}}
655
                            </a>
656
                        </div>
657
                        <div class="removecomponent-wrapper hidden">
658
                            <a href="#" class="removecomponent">
659
                                {{#str}} remove, tiny_media {{/str}}
660
                            </a>
661
                        </div>
662
                    </div>
663
                {{/video.tracks.chapters}}
664
                {{^video.tracks.chapters}}
665
                    <div class="mb-1 tiny_media_track">
666
                        <div class="tiny_media_source tiny_media_track_source">
667
                            <div class="mb-1">
668
                                <label for="chapter-video-url-input">
669
                                    {{#str}} chapterssourcelabel, tiny_media {{/str}}
670
                                </label>
671
                                <div class="input-group input-append w-100">
672
                                    <input id="chapter-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
673
                                    {{#showfilepickertrack}}
674
                                    <span class="input-group-append">
675
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
676
                                    </span>
677
                                    {{/showfilepickertrack}}
678
                                </div>
679
                            </div>
680
                        </div>
681
                        <div class="mb-3">
682
                            <label class="w-100" for="chapter-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
683
                            <select id="chapter-video-lang-input" class="custom-select tiny_media_track_lang_entry">
684
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
685
                                    {{#langsinstalled}}
686
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
687
                                    {{/langsinstalled}}
688
                                </optgroup>
689
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
690
                                    {{#langsavailable}}
691
                                        <option value="{{code}}">{{lang}}</option>
692
                                    {{/langsavailable}}
693
                                </optgroup>
694
                            </select>
695
                        </div>
696
                        <div class="mb-3">
697
                            <label class="w-100" for="chapter-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
698
                            <input id="chapter-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
699
                        </div>
700
                        <div class="form-check">
701
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
702
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
703
                        </div>
704
                        <div class="addcomponent-wrapper">
705
                            <a href="#" class="addcomponent">
706
                                {{#str}} addchapterstrack, tiny_media {{/str}}
707
                            </a>
708
                        </div>
709
                        <div class="removecomponent-wrapper hidden">
710
                            <a href="#" class="removecomponent">
711
                                {{#str}} remove, tiny_media {{/str}}
712
                            </a>
713
                        </div>
714
                    </div>
715
                {{/video.tracks.chapters}}
716
            </div>
717
            <div data-track-kind="metadata" class="tab-pane"
718
                 id="{{elementid}}_vtracks_metadata">
719
                <div class="trackhelp">{{{helpStrings.metadata}}}</div>
720
                <div class="trackhelp">
721
                    {{#metadatahelpicon}}
722
                        {{> core/help_icon }}
723
                    {{/metadatahelpicon}}
724
                </div>
725
                {{#video.tracks.metadata}}
726
                    <div class="mb-1 tiny_media_track">
727
                        <div class="tiny_media_source tiny_media_track_source">
728
                            <div class="mb-1">
729
                                <label for="metadata-video-url-input">
730
                                    {{#str}} metadatasourcelabel, tiny_media {{/str}}
731
                                </label>
732
                                <div class="input-group input-append w-100">
733
                                    <input id="metadata-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32" value="{{src}}"/>
734
                                    {{#showfilepickertrack}}
735
                                    <span class="input-group-append">
736
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
737
                                    </span>
738
                                    {{/showfilepickertrack}}
739
                                </div>
740
                            </div>
741
                        </div>
742
                        <div class="mb-3">
743
                            <label class="w-100" for="metadata-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
744
                            <select id="metadata-video-lang-input" class="custom-select tiny_media_track_lang_entry" data-value="{{srclang}}">
745
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
746
                                    {{#langsinstalled}}
747
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
748
                                    {{/langsinstalled}}
749
                                </optgroup>
750
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
751
                                    {{#langsavailable}}
752
                                        <option value="{{code}}">{{lang}}</option>
753
                                    {{/langsavailable}}
754
                                </optgroup>
755
                            </select>
756
                        </div>
757
                        <div class="mb-3">
758
                            <label class="w-100" for="metadata-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
759
                            <input id="metadata-video-track-input" class="form-control tiny_media_track_label_entry" type="text" value="{{label}}"/>
760
                        </div>
761
                        <div class="form-check">
762
                            <input type="checkbox" class="form-check-input tiny_media_track_default" {{# defaultTrack }}checked{{/ defaultTrack }}/>
763
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
764
                        </div>
765
                        <div class="addcomponent-wrapper">
766
                            <a href="#" class="addcomponent">
767
                                {{#str}} addmetadatatrack, tiny_media {{/str}}
768
                            </a>
769
                        </div>
770
                        <div class="removecomponent-wrapper hidden">
771
                            <a href="#" class="removecomponent">
772
                                {{#str}} remove, tiny_media {{/str}}
773
                            </a>
774
                        </div>
775
                    </div>
776
                {{/video.tracks.metadata}}
777
                {{^video.tracks.metadata}}
778
                    <div class="mb-1 tiny_media_track">
779
                        <div class="tiny_media_source tiny_media_track_source">
780
                            <div class="mb-1">
781
                                <label for="metadata-video-url-input">
782
                                    {{#str}} metadatasourcelabel, tiny_media {{/str}}
783
                                </label>
784
                                <div class="input-group input-append w-100">
785
                                    <input id="metadata-video-url-input" class="form-control tiny_media_url_entry" type="url" size="32"/>
786
                                    {{#showfilepickertrack}}
787
                                    <span class="input-group-append">
788
                                        <button class="btn btn-secondary openmediabrowser" type="button">{{#str}} browserepositories, tiny_media {{/str}}</button>
789
                                    </span>
790
                                    {{/showfilepickertrack}}
791
                                </div>
792
                            </div>
793
                        </div>
794
                        <div class="mb-3">
795
                            <label class="w-100" for="metadata-video-lang-input">{{#str}} srclang, tiny_media {{/str}}</label>
796
                            <select id="metadata-video-lang-input" class="custom-select tiny_media_track_lang_entry">
797
                                <optgroup label="{{#str}} languagesinstalled, tiny_media {{/str}}">
798
                                    {{#langsinstalled}}
799
                                        <option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>
800
                                    {{/langsinstalled}}
801
                                </optgroup>
802
                                <optgroup label="{{#str}} languagesavailable, tiny_media {{/str}} ">
803
                                    {{#langsavailable}}
804
                                        <option value="{{code}}">{{lang}}</option>
805
                                    {{/langsavailable}}
806
                                </optgroup>
807
                            </select>
808
                        </div>
809
                        <div class="mb-3">
810
                            <label class="w-100" for="metadata-video-track-input">{{#str}} label, tiny_media {{/str}}</label>
811
                            <input id="metadata-video-track-input" class="form-control tiny_media_track_label_entry" type="text"/>
812
                        </div>
813
                        <div class="form-check">
814
                            <input type="checkbox" class="form-check-input tiny_media_track_default"/>
815
                            <label class="form-check-label">{{#str}} default, tiny_media {{/str}}</label>
816
                        </div>
817
                        <div class="addcomponent-wrapper">
818
                            <a href="#" class="addcomponent">
819
                                {{#str}} addmetadatatrack, tiny_media {{/str}}
820
                            </a>
821
                        </div>
822
                        <div class="removecomponent-wrapper hidden">
823
                            <a href="#" class="removecomponent">
824
                                {{#str}} remove, tiny_media {{/str}}
825
                            </a>
826
                        </div>
827
                    </div>
828
                {{/video.tracks.metadata}}
829
            </div>
830
        </div>
831
    </div>
832
</fieldset>