Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
adbb953c
Commit
adbb953c
authored
Dec 13, 2017
by
Mushtaq Ali
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Show transcripts on video uploads page - EDUCATOR-1662
parent
773b622e
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
180 additions
and
20 deletions
+180
-20
cms/djangoapps/contentstore/views/videos.py
+13
-3
cms/static/js/factories/videos_index.js
+6
-3
cms/static/js/views/previous_video_upload.js
+10
-3
cms/static/js/views/previous_video_upload_list.js
+2
-1
cms/static/js/views/video_transcripts.js
+78
-0
cms/static/sass/views/_video-upload.scss
+27
-8
cms/templates/js/previous-video-upload-list.underscore
+1
-0
cms/templates/js/previous-video-upload.underscore
+2
-1
cms/templates/js/video-transcripts.underscore
+39
-0
cms/templates/videos_index.html
+2
-1
No files found.
cms/djangoapps/contentstore/views/videos.py
View file @
adbb953c
...
...
@@ -30,7 +30,8 @@ from edxval.api import (
remove_transcript_preferences
,
remove_video_for_course
,
update_video_image
,
update_video_status
update_video_status
,
get_available_transcript_languages
)
from
opaque_keys.edx.keys
import
CourseKey
...
...
@@ -532,6 +533,12 @@ def _get_videos(course):
for
video
in
videos
:
video
[
"status"
]
=
convert_video_status
(
video
)
transcripts
=
{}
for
lang_code
in
get_available_transcript_languages
([
video
[
'edx_video_id'
]]):
transcripts
.
update
({
lang_code
:
get_all_transcript_languages
()[
lang_code
]})
video
[
'transcripts'
]
=
transcripts
return
videos
...
...
@@ -547,7 +554,7 @@ def _get_index_videos(course):
Returns the information about each video upload required for the video list
"""
course_id
=
unicode
(
course
.
id
)
attrs
=
[
'edx_video_id'
,
'client_video_id'
,
'created'
,
'duration'
,
'status'
,
'courses'
]
attrs
=
[
'edx_video_id'
,
'client_video_id'
,
'created'
,
'duration'
,
'status'
,
'courses'
,
'transcripts'
]
def
_get_values
(
video
):
"""
...
...
@@ -567,6 +574,8 @@ def _get_index_videos(course):
_get_values
(
video
)
for
video
in
_get_videos
(
course
)
]
def
get_all_transcript_languages
():
return
get_3rd_party_transcription_plans
()[
TranscriptProvider
.
THREE_PLAY_MEDIA
][
'languages'
]
def
videos_index_html
(
course
):
"""
...
...
@@ -594,7 +603,8 @@ def videos_index_html(course):
'is_video_transcript_enabled'
:
is_video_transcript_enabled
,
'video_transcript_settings'
:
None
,
'active_transcript_preferences'
:
None
,
'transcript_credentials'
:
None
'transcript_credentials'
:
None
,
'transcript_available_languages'
:
get_all_transcript_languages
()
}
if
is_video_transcript_enabled
:
...
...
cms/static/js/factories/videos_index.js
View file @
adbb953c
...
...
@@ -18,7 +18,8 @@ define([
transcriptOrganizationCredentials
,
videoTranscriptSettings
,
isVideoTranscriptEnabled
,
videoImageSettings
videoImageSettings
,
transcriptAvailableLanguages
)
{
var
activeView
=
new
ActiveVideoUploadListView
({
postUrl
:
videoHandlerUrl
,
...
...
@@ -51,7 +52,8 @@ define([
videoHandlerUrl
:
videoHandlerUrl
,
collection
:
updatedCollection
,
encodingsDownloadUrl
:
encodingsDownloadUrl
,
videoImageSettings
:
videoImageSettings
videoImageSettings
:
videoImageSettings
,
transcriptAvailableLanguages
:
transcriptAvailableLanguages
});
$contentWrapper
.
find
(
'.wrapper-assets'
).
replaceWith
(
updatedView
.
render
().
$el
);
});
...
...
@@ -63,7 +65,8 @@ define([
videoHandlerUrl
:
videoHandlerUrl
,
collection
:
new
Backbone
.
Collection
(
previousUploads
),
encodingsDownloadUrl
:
encodingsDownloadUrl
,
videoImageSettings
:
videoImageSettings
videoImageSettings
:
videoImageSettings
,
transcriptAvailableLanguages
:
transcriptAvailableLanguages
});
$contentWrapper
.
append
(
activeView
.
render
().
$el
);
$contentWrapper
.
append
(
previousView
.
render
().
$el
);
...
...
cms/static/js/views/previous_video_upload.js
View file @
adbb953c
define
(
[
'underscore'
,
'gettext'
,
'js/utils/date_utils'
,
'js/views/baseview'
,
'common/js/components/views/feedback_prompt'
,
'common/js/components/views/feedback_notification'
,
'js/views/video_thumbnail'
,
'common/js/components/views/feedback_notification'
,
'js/views/video_thumbnail'
,
'js/views/video_transcripts'
,
'common/js/components/utils/view_utils'
,
'edx-ui-toolkit/js/utils/html-utils'
,
'text!templates/previous-video-upload.underscore'
],
function
(
_
,
gettext
,
DateUtils
,
BaseView
,
PromptView
,
NotificationView
,
VideoThumbnailView
,
Vi
ewUtils
,
HtmlUtils
,
previousVideoUploadTemplate
)
{
function
(
_
,
gettext
,
DateUtils
,
BaseView
,
PromptView
,
NotificationView
,
VideoThumbnailView
,
Vi
deoTranscriptsView
,
ViewUtils
,
HtmlUtils
,
previousVideoUploadTemplate
)
{
'use strict'
;
var
PreviousVideoUploadView
=
BaseView
.
extend
({
...
...
@@ -29,6 +29,12 @@ define(
videoImageSettings
:
options
.
videoImageSettings
});
}
this
.
videoTranscriptsView
=
new
VideoTranscriptsView
({
transcripts
:
this
.
model
.
get
(
'transcripts'
),
edxVideoID
:
this
.
model
.
get
(
'edx_video_id'
),
clientVideoID
:
this
.
model
.
get
(
'client_video_id'
),
transcriptAvailableLanguages
:
this
.
options
.
transcriptAvailableLanguages
});
},
render
:
function
()
{
...
...
@@ -47,6 +53,7 @@ define(
if
(
this
.
videoImageUploadEnabled
)
{
this
.
videoThumbnailView
.
setElement
(
this
.
$
(
'.thumbnail-col'
)).
render
();
}
this
.
videoTranscriptsView
.
setElement
(
this
.
$
(
'.transcripts-col'
)).
render
();
return
this
;
},
...
...
cms/static/js/views/previous_video_upload_list.js
View file @
adbb953c
...
...
@@ -16,7 +16,8 @@ define(
defaultVideoImageURL
:
options
.
defaultVideoImageURL
,
videoHandlerUrl
:
options
.
videoHandlerUrl
,
videoImageSettings
:
options
.
videoImageSettings
,
model
:
model
model
:
model
,
transcriptAvailableLanguages
:
options
.
transcriptAvailableLanguages
});
});
},
...
...
cms/static/js/views/video_transcripts.js
0 → 100644
View file @
adbb953c
define
(
[
'underscore'
,
'gettext'
,
'js/views/baseview'
,
'edx-ui-toolkit/js/utils/html-utils'
,
'edx-ui-toolkit/js/utils/string-utils'
,
'text!templates/video-transcripts.underscore'
],
function
(
_
,
gettext
,
BaseView
,
HtmlUtils
,
StringUtils
,
videoTranscriptsTemplate
)
{
'use strict'
;
var
TRANSCRIPT_DOWNLOAD_FILE_FORMAT
=
'srt'
,
VideoTranscriptsView
;
VideoTranscriptsView
=
BaseView
.
extend
({
tagName
:
'div'
,
events
:
{
'click .toggle-show-transcripts-button'
:
'toggleShowTranscripts'
},
initialize
:
function
(
options
)
{
this
.
transcripts
=
options
.
transcripts
;
this
.
edxVideoID
=
options
.
edxVideoID
;
this
.
clientVideoID
=
options
.
clientVideoID
;
this
.
transcriptAvailableLanguages
=
options
.
transcriptAvailableLanguages
;
this
.
template
=
HtmlUtils
.
template
(
videoTranscriptsTemplate
);
},
getTranscriptClientTitle
:
function
()
{
// TODO: Use supported video file types.
return
this
.
clientVideoID
.
substring
(
0
,
20
).
replace
(
'.mp4'
,
''
);
},
toggleShowTranscripts
:
function
()
{
var
$transcriptsWrapperEl
=
this
.
$el
.
find
(
'.show-video-transcripts-wrapper'
);
// Toggle show transcript wrapper.
$transcriptsWrapperEl
.
toggleClass
(
'hidden'
);
// Toggle button text.
HtmlUtils
.
setHtml
(
this
.
$el
.
find
(
'.toggle-show-transcripts-button-text'
),
StringUtils
.
interpolate
(
gettext
(
'{toggleShowTranscriptText} transcripts ({totalTranscripts})'
),
{
toggleShowTranscriptText
:
$transcriptsWrapperEl
.
hasClass
(
'hidden'
)
?
gettext
(
'Show'
)
:
gettext
(
'Hide'
),
totalTranscripts
:
_
.
size
(
this
.
transcripts
)
}
)
);
// Toggle icon class.
if
(
$transcriptsWrapperEl
.
hasClass
(
'hidden'
))
{
this
.
$el
.
find
(
'.toggle-show-transcripts-icon'
).
removeClass
(
'fa-caret-down'
);
this
.
$el
.
find
(
'.toggle-show-transcripts-icon'
).
addClass
(
'fa-caret-right'
);
}
else
{
this
.
$el
.
find
(
'.toggle-show-transcripts-icon'
).
removeClass
(
'fa-caret-right'
);
this
.
$el
.
find
(
'.toggle-show-transcripts-icon'
).
addClass
(
'fa-caret-down'
);
}
},
render
:
function
()
{
HtmlUtils
.
setHtml
(
this
.
$el
,
this
.
template
({
transcripts
:
this
.
transcripts
,
transcriptAvailableLanguages
:
this
.
transcriptAvailableLanguages
,
edxVideoID
:
this
.
edxVideoID
,
// Slice last 4 letters so that video filetype is not attached
// eg. eg. Harry-Potter.mp4 would give us eg. Harry-Potter
transcriptClientTitle
:
this
.
getTranscriptClientTitle
(),
transcriptDownloadFileFormat
:
TRANSCRIPT_DOWNLOAD_FILE_FORMAT
})
);
return
this
;
}
});
return
VideoTranscriptsView
;
}
);
cms/static/sass/views/_video-upload.scss
View file @
adbb953c
...
...
@@ -17,6 +17,29 @@
top
:
0
!
important
;
}
.button-link
{
background
:none
;
border
:none
;
padding
:
0
;
color
:
$ui-link-color
;
cursor
:pointer
}
.show-video-transcripts-wrapper
{
display
:
block
;
}
.show-video-transcripts-wrapper.hidden
{
display
:
none
;
}
.show-video-transcript-content
{
margin-top
:
20px
;
.transcript-language-menu
{
display
:
block
;
width
:
200px
;
}
}
.course-video-settings-container
{
position
:
absolute
;
overflow
:
scroll
;
...
...
@@ -30,14 +53,6 @@
-moz-box-shadow
:
-3px
0px
3px
0px
rgba
(
153
,
153
,
153
,
0
.3
);
box-shadow
:
-3px
0px
3px
0px
rgba
(
153
,
153
,
153
,
0
.3
);
.button-link
{
background
:none
;
border
:none
;
padding
:
0
;
color
:
$ui-link-color
;
cursor
:pointer
}
.action-close-wrapper
{
.action-close-course-video-settings
{
width
:
100%
;
...
...
@@ -416,6 +431,10 @@
width
:
25%
;
}
.transcripts-col
{
width
:
17%
;
}
.thumbnail-col
,
.video-id-col
{
width
:
15%
;
}
...
...
cms/templates/js/previous-video-upload-list.underscore
View file @
adbb953c
...
...
@@ -14,6 +14,7 @@
<div class="video-head-col video-col name-col"><%- gettext("Name") %></div>
<div class="video-head-col video-col date-col"><%- gettext("Date Added") %></div>
<div class="video-head-col video-col video-id-col"><%- gettext("Video ID") %></div>
<div class="video-head-col video-col transcripts-col"><%- gettext("Transcripts") %></div>
<div class="video-head-col video-col status-col"><%- gettext("Status") %></div>
<div class="video-head-col video-col actions-col"><%- gettext("Action") %></div>
</div>
...
...
cms/templates/js/previous-video-upload.underscore
View file @
adbb953c
...
...
@@ -5,7 +5,8 @@
<div class="video-col name-col"><%- client_video_id %></div>
<div class="video-col date-col"><%- created %></div>
<div class="video-col video-id-col"><%- edx_video_id %></div>
<div class="video-col status-col"><%- status %></div>
<div class="video-col transcripts-col"></div>
<div class="video-col status-col"><%- status %> </div>
<div class="video-col actions-col">
<ul class="actions-list">
<li class="action-item action-remove">
...
...
cms/templates/js/video-transcripts.underscore
0 → 100644
View file @
adbb953c
<% if (_.size(transcripts)) { %>
<button class="button-link toggle-show-transcripts-button">
<strong>
<span class="icon fa fa-caret-right toggle-show-transcripts-icon" aria-hidden="true"></span>
<span class="toggle-show-transcripts-button-text">
<%- StringUtils.interpolate(gettext('Show transcripts ({totalTranscripts})'), {totalTranscripts: _.size(transcripts)})%>
</span>
</strong>
</button>
<% } else { %>
<span><%- gettext('No transcript available yet.') %></span>
<% }%>
<div class='show-video-transcripts-wrapper hidden'>
<% _.each(transcripts, function(transcriptLanguageText, transcriptLanguageCode){ %>
<div class='show-video-transcript-content'>
<strong><%- StringUtils.interpolate(gettext('{transcriptClientTitle}_{transcriptLanguageCode}.{fileExtension}'), {transcriptClientTitle: transcriptClientTitle, transcriptLanguageCode: transcriptLanguageCode, fileExtension: transcriptDownloadFileFormat}) %></strong>
<select id='transcript-language-<%- transcriptLanguageCode %>' class='transcript-language-menu'>
<option value=''>Select Language</option>
<% _.each(transcriptAvailableLanguages, function(languageText, languageCode){ %>
<option value='<%- languageCode %>' <%- transcriptLanguageCode === languageCode ? 'selected': '' %>><%- languageText %></option>
<% }) %>
</select>
<div class='transcript-actions'>
<button class="button-link download-transcript-button" data-edx-video-id="<%- edxVideoID %>" data-language-code="<%- transcriptLanguageCode %>">
<%- gettext('Download') %>
</button>
<span class='transcript-actions-separator'> | </span>
<button class="button-link upload-transcript-button" data-edx-video-id="<%- edxVideoID %>" data-language-code="<%- transcriptLanguageCode %>">
<%- gettext('Re-upload') %>
</button>
<span class='transcript-actions-separator'> | </span>
<button class="button-link delete-transcript-button" data-edx-video-id="<%- edxVideoID %>" data-language-code="<%- transcriptLanguageCode %>">
<%- gettext('Delete') %>
</button>
</div>
</div>
<% }) %>
</div>
\ No newline at end of file
cms/templates/videos_index.html
View file @
adbb953c
...
...
@@ -42,7 +42,8 @@
${transcript_credentials | n, dump_js_escaped_json},
${video_transcript_settings | n, dump_js_escaped_json},
${is_video_transcript_enabled | n, dump_js_escaped_json},
${video_image_settings | n, dump_js_escaped_json}
${video_image_settings | n, dump_js_escaped_json},
${transcript_available_languages | n, dump_js_escaped_json}
);
});
</
%
block>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment