Show transcripts on video uploads page - EDUCATOR-1662

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

+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

+<% 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>