Skip to content

Commit 53728b6

Browse files
zzacharozzacharo
committed
transcriptions: move them side-by-side to player and add hide button
1 parent 365aa87 commit 53728b6

3 files changed

Lines changed: 87 additions & 67 deletions

File tree

‎cds/config.py‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1003,9 +1003,9 @@ def _parse_env_bool(var_name, default=None):
10031003
HOMEPAGE_DYNAMIC_QUERIES = [
10041004
{
10051005
"label": "LATEST LECTURES",
1006-
"query": "/api/records/?size=4&sort=mostrecent&q=collections:Lectures",
1006+
"query": "/api/records/?size=4&sort=mostrecent&q=collections:Lectures",
10071007
"qs": "collections=Lectures",
1008-
"subcategories": [
1008+
"subcategories": [
10091009
{
10101010
"label": "Academic Training Lectures",
10111011
"qs": 'collections="Lectures::Academic Training Lectures"',
@@ -1017,24 +1017,24 @@ def _parse_env_bool(var_name, default=None):
10171017
{
10181018
"label": "E-Learning",
10191019
"qs": 'collections="Lectures::E-learning modules"',
1020-
},
1020+
},
10211021
{
10221022
"label": "Conference records",
10231023
"qs": 'collections="Lectures::Talks, Seminars and Other Events,Conference records"',
1024-
},
1024+
},
10251025
{
10261026
"label": "Scientific Seminars and Workshops",
10271027
"qs": 'collections="Lectures::Talks, Seminars and Other Events::Scientific Seminars and Workshops"',
1028-
},
1028+
},
10291029
{
10301030
"label": "Teacher Programmes",
10311031
"qs": 'collections="Lectures::Talks, Seminars and Other Events::Teacher Programmes"',
10321032
},
10331033
{
10341034
"label": "Student Lectures",
10351035
"qs": 'collections="Lectures::Talks, Seminars and Other Events::Student Lectures"',
1036-
}
1037-
]
1036+
},
1037+
],
10381038
}
10391039
]
10401040

@@ -1295,8 +1295,11 @@ def _parse_env_bool(var_name, default=None):
12951295
# Previewer base template
12961296
PREVIEWER_BASE_TEMPLATE = "cds_previewer/base.html"
12971297
# Licence key and base URL for THEO player
1298-
THEOPLAYER_LIBRARY_LOCATION = None
1299-
THEOPLAYER_LICENSE = None
1298+
THEOPLAYER_LIBRARY_LOCATION = (
1299+
"https://cdn.myth.theoplayer.com/f834759f-0690-4d15-9cf4-9eabc74f174e"
1300+
)
1301+
THEOPLAYER_LICENSE = "sZP7IYe6T6ftTuazISCcC6keIlglFSak3Da-TSU1TmkKTQhrClUl0S36CLf6FOPlUY3zWokgbgjNIOf9flCoISUl3DaZFD0_0la-3u0r0Zz_3SbtFSx1Tueo3SxlIS0iCmfVfK4_bQgZCYxNWoryIQXzImf90Sbt0laz3SCi0u5i0Oi6Io4pIYP1UQgqWgjeCYxgflEc3La_Tubo3L5Z0uhoFOPeWok1dDrLYtA1Ioh6TgV6v6fVfKcqCoXVdQjLUOfVfGxEIDjiWQXrIYfpCoj-fgzVfKxqWDXNWG3ybojkbK3gflNWf6E6FOPVWo31WQ1qbta6FOPzdQ4qbQc1sD4ZFK3qWmPUFOPLIQ-LflNWfK1zWDikfgzVfG3gWKxydDkibK4LbogqW6f9UwPkImi6IK41Uw4ZIY06Tg-Uya"
1302+
13001303
# Wowza server URL for m3u8 playlist generation
13011304
WOWZA_PLAYLIST_URL = (
13021305
"https://wowza.cern.ch/cds/_definist_/smil:" "{filepath}/playlist.m3u8"
@@ -1672,3 +1675,6 @@ def _parse_env_bool(var_name, default=None):
16721675

16731676
# Sets the location to share the video files among the different tasks
16741677
CDS_FILES_TMP_FOLDER = "/tmp/videos"
1678+
1679+
# TODO: needs latest files-rest enabling range requests
1680+
FILES_REST_ALLOW_RANGE_REQUESTS = True

‎cds/modules/records/static/templates/cds_records/video/detail.html‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,74 @@
44
<div class="cds-detail-video cds-detail-video-wrapper bg-n pb-20">
55
<!-- Video Section -->
66
<div ng-if="record.metadata.recid && (record | findMaster).key" class="bg-b">
7-
<div class="cds-video-iframe text-center">
8-
<iframe scrolling="no"
9-
width="100%"
10-
height="100%"
11-
frameborder="0"
12-
ng-src="{{ '' | previewIframeSrc: record.metadata.recid:(record | findMaster).key }}"
13-
allowfullscreen>
14-
</iframe>
7+
<div ng-class="{ 'container-fluid': showTranscript }">
8+
<div ng-class="{ 'row': (record.metadata._files | filter:{context_type:'subtitle', content_type:'vtt'}).length > 0 && showTranscript }">
9+
<div ng-class="{ 'col-md-8': (record.metadata._files | filter:{context_type:'subtitle', content_type:'vtt'}).length > 0 && showTranscript }">
10+
<div class="cds-video-iframe text-center">
11+
<iframe scrolling="no"
12+
width="100%"
13+
height="100%"
14+
frameborder="0"
15+
ng-src="{{ '' | previewIframeSrc: record.metadata.recid:(record | findMaster).key }}"
16+
allowfullscreen>
17+
</iframe>
18+
</div>
19+
</div>
20+
<!-- Section Transcriptions -->
21+
<div ng-show="(record.metadata._files | filter:{context_type:'subtitle', content_type:'vtt'}).length > 0 && showTranscript" class="col-md-4 bg-b">
22+
<div
23+
id="transcriptionsSection"
24+
class="cds-detail cds-detail-video cds-div-shadow bg-w pt-10 px-20 pb-10 mb-30 mt-20 t-b"
25+
>
26+
<div class="pb-20">
27+
<h3 class="bt bw-1 pt-10 mb-0">
28+
<i class="fa fa-align-left"></i> Transcription
29+
<div class="pull-right"><i class="fa fa-close transcription-close" ng-click="toggleTranscript()"></i></div>
30+
</h3>
31+
</div>
32+
<input type="text"
33+
class="form-control mb-10"
34+
placeholder="Search transcript..."
35+
ng-model="transcriptSearch"
36+
ng-change="filterTranscript()">
37+
<div>
38+
<div
39+
class="panel panel-default"
40+
style="max-height: 300px; overflow-y: auto;"
41+
ng-show="filteredTranscript.length > 0">
42+
<div class="panel-body p-0">
43+
<ul class="list-unstyled mb-0">
44+
<li ng-repeat="line in filteredTranscript"
45+
ng-click="seekTo(line.start)"
46+
class="mb-10 transcript-line"
47+
ng-class="{ 'active': currentTranscriptLine === line }"
48+
style="cursor: pointer;">
49+
<a>
50+
<strong>{{ convertToMinutesSeconds(line.start) }} - {{ convertToMinutesSeconds(line.end) }}</strong>
51+
</a>
52+
<div class="cds-deposit-frame-thumbnail-label">
53+
{{ line.text }}
54+
</div>
55+
</li>
56+
</ul>
57+
</div>
58+
</div>
59+
<div class="form-group mb-10">
60+
<label for="languageSelect">Transcript Language:</label>
61+
<select
62+
id="languageSelect"
63+
class="form-control"
64+
ng-model="selectedTranscriptLanguage"
65+
ng-options="lang as (lang | isoToLanguage) for (lang, _) in transcriptsByLanguage"
66+
ng-change="setTranscriptLanguage(selectedTranscriptLanguage)"
67+
></select>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
1572
</div>
1673
</div>
74+
<!-- /Section Transcriptions -->
1775
<!-- /Video Section -->
1876
<!-- Metadata Section -->
1977
<div class="container-fluid">
@@ -181,6 +239,7 @@ <h4>{{translation.title.title}}</h4>
181239
</li>
182240
</ul>
183241
</div>
242+
<!-- License -->
184243
</div>
185244
</div>
186245
<!-- Related links -->
@@ -237,56 +296,6 @@ <h3 class="cds-title-section-decoration bt bw-1 pt-10 mb-20"><i class="fa fa-sha
237296
<!-- /Left Column -->
238297
<!-- Right Column -->
239298
<div class="col-md-4">
240-
<!-- Section Transcriptions -->
241-
<div
242-
id="transcriptionsSection"
243-
class="cds-detail cds-detail-video cds-div-shadow bg-w pt-10 px-20 pb-10 mb-30 mt-20 t-b"
244-
ng-show="(record.metadata._files | filter:{context_type:'subtitle', content_type:'vtt'}).length > 0 && showTranscript" >
245-
<div class="cds-detail-title cds-detail-video-title pb-20">
246-
<h3 class="cds-title-section-decoration bt bw-1 pt-10 mb-0">
247-
<i class="fa fa-align-left"></i> Transcription
248-
</h3>
249-
</div>
250-
<input type="text"
251-
class="form-control mb-10"
252-
placeholder="Search transcript..."
253-
ng-model="transcriptSearch"
254-
ng-change="filterTranscript()">
255-
<div>
256-
<div
257-
class="panel panel-default"
258-
style="max-height: 300px; overflow-y: auto;"
259-
ng-show="filteredTranscript.length > 0">
260-
<div class="panel-body p-0">
261-
<ul class="list-unstyled mb-0">
262-
<li ng-repeat="line in filteredTranscript"
263-
ng-click="seekTo(line.start)"
264-
class="mb-10 transcript-line"
265-
ng-class="{ 'active': currentTranscriptLine === line }"
266-
style="cursor: pointer;">
267-
<a>
268-
<strong>{{ convertToMinutesSeconds(line.start) }} - {{ convertToMinutesSeconds(line.end) }}</strong>
269-
</a>
270-
<div class="cds-deposit-frame-thumbnail-label">
271-
{{ line.text }}
272-
</div>
273-
</li>
274-
</ul>
275-
</div>
276-
</div>
277-
<div class="form-group mb-10">
278-
<label for="languageSelect">Transcript Language:</label>
279-
<select
280-
id="languageSelect"
281-
class="form-control"
282-
ng-model="selectedTranscriptLanguage"
283-
ng-options="lang as (lang | isoToLanguage) for (lang, _) in transcriptsByLanguage"
284-
ng-change="setTranscriptLanguage(selectedTranscriptLanguage)"
285-
></select>
286-
</div>
287-
</div>
288-
</div>
289-
<!-- /Section Transcriptions -->
290299
<!-- Section Download -->
291300
<div class="cds-detail cds-detail-video cds-div-shadow bg-w pt-10 px-20 pb-10 mb-30 mt-20 t-b">
292301
<ng-include src="'/static/templates/cds_records/video/downloads.html'"></ng-include>

‎cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,4 +1131,9 @@ div[cds-search-results] {
11311131
.transcription-button:hover {
11321132
background-color: $cds-primary-color !important;
11331133
color: #fff !important;
1134+
}
1135+
1136+
.transcription-close
1137+
.transcription-close:hover {
1138+
cursor: pointer;
11341139
}

0 commit comments

Comments
 (0)