Skip to content

E
edx-platform
Commit adbb953c by Mushtaq Ali
Options

Show transcripts on video uploads page - EDUCATOR-1662

parent 773b622e
Showing with 180 additions and 20 deletions
cms/djangoapps/contentstore/views/videos.py
......@@ -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
......@@ -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
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, ViewUtils, HtmlUtils,
previousVideoUploadTemplate) {
function(_, gettext, DateUtils, BaseView, PromptView, NotificationView, VideoThumbnailView, VideoTranscriptsView,
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
......@@ -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
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
......@@ -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
......@@ -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
......@@ -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
<% 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
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment