Merge pull request #17138 from edx/mushtaq/improve-transcript-sorting

Sort transcript languages

cms/djangoapps/contentstore/views/tests/test_videos.py

@@ -239,7 +239,7 @@ class VideosHandlerTestCase(VideoUploadTestMixin, CourseTestCase):
             False,
             ['edx_video_id', 'client_video_id', 'created', 'duration', 'status', 'course_video_image_url'],
             [],
-            {}
+            []
         ),
         (
             True,
@@ -254,9 +254,7 @@ class VideosHandlerTestCase(VideoUploadTestMixin, CourseTestCase):
                     'provider': 'Cielo24'
                 }
             ],
-            {
-                'en': 'English'
-            }
+            ['en']
         ),
         (
             True,
@@ -278,10 +276,7 @@ class VideosHandlerTestCase(VideoUploadTestMixin, CourseTestCase):
                     'provider': 'Cielo24'
                 }
             ],
-            {
-                'en': 'English',
-                'es': 'Spanish'
-            }
+            ['en', 'es']
         )
     )
     @ddt.unpack
@@ -312,7 +307,7 @@ class VideosHandlerTestCase(VideoUploadTestMixin, CourseTestCase):
         for response_video in response_videos:
             self.assertEqual(set(response_video.keys()), set(expected_video_keys))
             if response_video['edx_video_id'] == self.previous_uploads[0]['edx_video_id']:
-                self.assertDictEqual(response_video.get('transcripts', {}), expected_transcripts)
+                self.assertEqual(response_video.get('transcripts', []), expected_transcripts)
 
     def test_get_html(self):
         response = self.client.get(self.url)

cms/djangoapps/contentstore/views/videos.py

@@ -539,11 +539,7 @@ def _get_videos(course):
         video["status"] = convert_video_status(video)
 
         if is_video_transcript_enabled:
-            all_languages = get_all_transcript_languages()
-            video['transcripts'] = {
-                lang_code: all_languages[lang_code]
-                for lang_code in get_available_transcript_languages([video['edx_video_id']])
-            }
+            video['transcripts'] = get_available_transcript_languages([video['edx_video_id']])
 
     return videos
 
@@ -598,8 +594,15 @@ def get_all_transcript_languages():
     third_party_transcription_languages.update(cielo_fidelity['PREMIUM']['languages'])
     third_party_transcription_languages.update(cielo_fidelity['PROFESSIONAL']['languages'])
 
+    all_languages_dict = dict(settings.ALL_LANGUAGES, **third_party_transcription_languages)
     # Return combined system settings and 3rd party transcript languages.
-    return dict(settings.ALL_LANGUAGES, **third_party_transcription_languages)
+    all_languages = []
+    for key, value in sorted(all_languages_dict.iteritems(), key=lambda (k, v): (v, k)):
+        all_languages.append({
+            'language_code': key,
+            'language_text': value
+        })
+    return all_languages
 
 
 def videos_index_html(course):

cms/static/js/spec/views/video_transcripts_spec.js

@@ -10,20 +10,27 @@ define(
                 verifyMessage,
                 verifyDetailedErrorMessage,
                 createFakeTranscriptFile,
-                transcripts = {
-                    en: 'English',
-                    es: 'Spanish',
-                    ur: 'Urdu'
-                },
+                transcripts = ['en', 'es', 'ur'],
                 edxVideoID = 'test-edx-video-id',
                 clientVideoID = 'Video client title name.mp4',
-                transcriptAvailableLanguages = {
-                    en: 'English',
-                    es: 'Spanish',
-                    cn: 'Chinese',
-                    ar: 'Arabic',
-                    ur: 'Urdu'
-                },
+                transcriptAvailableLanguages = [
+                    {
+                        language_code: 'en',
+                        language_text: 'English'
+                    },
+                    {
+                        language_code: 'es',
+                        language_text: 'Spanish'
+                    },
+                    {
+                        language_code: 'ar',
+                        language_text: 'Chinese'
+                    },
+                    {
+                        language_code: 'ur',
+                        language_text: 'Urdu'
+                    }
+                ],
                 TRANSCRIPT_DOWNLOAD_FILE_FORMAT = 'srt',
                 TRANSCRIPT_DOWNLOAD_URL = 'abc.com/transcript_download/course_id',
                 TRANSCRIPT_UPLOAD_URL = 'abc.com/transcript_upload/course_id',
@@ -146,7 +153,7 @@ define(
                     videoTranscriptsView.$el.find('.show-video-transcripts-wrapper').hasClass('hidden')
                 ).toEqual(true);
                 expect(videoTranscriptsView.$el.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
-                    'Show transcripts (' + _.size(transcripts) + ')'
+                    'Show transcripts (' + transcripts.length + ')'
                 );
             });
 
@@ -158,7 +165,7 @@ define(
 
                 // Verify initial button text
                 expect(videoTranscriptsView.$el.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
-                    'Show transcripts (' + _.size(transcripts) + ')'
+                    'Show transcripts (' + transcripts.length + ')'
                 );
                 videoTranscriptsView.$el.find('.toggle-show-transcripts-button').click();
 
@@ -169,7 +176,7 @@ define(
 
                 // Verify button text is changed.
                 expect(videoTranscriptsView.$el.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
-                    'Hide transcripts (' + _.size(transcripts) + ')'
+                    'Hide transcripts (' + transcripts.length + ')'
                 );
             });
 
@@ -179,7 +186,7 @@ define(
 
                 // Verify button text.
                 expect(videoTranscriptsView.$el.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
-                    'Hide transcripts (' + _.size(transcripts) + ')'
+                    'Hide transcripts (' + transcripts.length + ')'
                 );
 
                 // Verify transcript container is not hidden
@@ -191,7 +198,7 @@ define(
 
                 // Verify button text is changed.
                 expect(videoTranscriptsView.$el.find('.toggle-show-transcripts-button-text').html().trim()).toEqual(
-                    'Show transcripts (' + _.size(transcripts) + ')'
+                    'Show transcripts (' + transcripts.length + ')'
                 );
 
                 // Verify transcript container is hidden
@@ -215,10 +222,10 @@ define(
                 // Show transcripts
                 videoTranscriptsView.$el.find('.toggle-show-transcripts-button').click();
                 expect(videoTranscriptsView.$el.find('.show-video-transcript-content').length).toEqual(
-                    _.size(transcripts)
+                    transcripts.length
                 );
 
-                _.each(transcripts, function(langaugeText, languageCode) {
+                _.each(transcripts, function(languageCode) {
                     $transcriptEl = videoTranscriptsView.$el.find('.show-video-transcript-content[data-language-code="' + languageCode + '"]');  // eslint-disable-line max-len
                     // Verify correct transcript title is set.
                     expect($transcriptEl.find('.transcript-title').html()).toEqual(

cms/static/js/views/video_transcripts.js

@@ -59,18 +59,6 @@ define(
                 );
             },
 
-            /*
-            Sorts object by value and returns a sorted array.
-            */
-            sortByValue: function(itemObject) {
-                var sortedArray = [];
-                _.each(itemObject, function(value, key) {
-                    // Push each JSON Object entry in array by [value, key]
-                    sortedArray.push([value, key]);
-                });
-                return sortedArray.sort();
-            },
-
             /*
             Returns transcript title.
             */
@@ -113,7 +101,7 @@ define(
                         gettext('{toggleShowTranscriptText} transcripts ({totalTranscripts})'),
                         {
                             toggleShowTranscriptText: $transcriptsWrapperEl.hasClass('hidden') ? gettext('Show') : gettext('Hide'), // eslint-disable-line max-len
-                            totalTranscripts: _.size(this.transcripts)
+                            totalTranscripts: this.transcripts.length
                         }
                     )
                 );
@@ -275,7 +263,7 @@ define(
                     this.$el,
                     this.template({
                         transcripts: this.transcripts,
-                        transcriptAvailableLanguages: this.sortByValue(this.transcriptAvailableLanguages),
+                        transcriptAvailableLanguages: this.transcriptAvailableLanguages,
                         edxVideoID: this.edxVideoID,
                         transcriptClientTitle: this.getTranscriptClientTitle(),
                         transcriptFileFormat: this.videoTranscriptSettings.trancript_download_file_format,

cms/templates/js/video-transcripts.underscore

 <div class='show-video-transcripts-container'>
-<% if (_.size(transcripts)) { %>
+<% if (transcripts.length) { %>
     <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)})%>
+            <%- StringUtils.interpolate(gettext('Show transcripts ({totalTranscripts})'), {totalTranscripts: transcripts.length})%>
         </span>
         </strong>
     </button>
@@ -12,7 +12,7 @@
     <span class='transcripts-empty-text'><%- gettext('No transcript uploaded.') %></span>
 <% }%>
 <div class='show-video-transcripts-wrapper hidden'>
-<% _.each(transcripts, function(transcriptLanguageText, transcriptLanguageCode){ %>
+<% _.each(transcripts, function(transcriptLanguageCode){ %>
     <% selectedLanguageCodes = _.keys(_.omit(transcripts, transcriptLanguageCode)); %>
     <div class='show-video-transcript-content' data-edx-video-id="<%- edxVideoID %>" data-language-code="<%- transcriptLanguageCode %>">
         <div class='transcript-upload-status-container'></div>
@@ -20,8 +20,8 @@
         <select class='transcript-language-menu'>
             <option value=''>Select Language</option>
             <% _.each(transcriptAvailableLanguages, function(availableLanguage){ %>
-                <% if (!_.contains(selectedLanguageCodes, availableLanguage[1])) { %>
-                    <option value='<%- availableLanguage[1] %>' <%- transcriptLanguageCode === availableLanguage[1] ? 'selected': '' %>><%- availableLanguage[0] %></option>
+                <% if (!_.contains(selectedLanguageCodes, availableLanguage.language_code)) { %>
+                    <option value='<%- availableLanguage.language_code %>' <%- transcriptLanguageCode === availableLanguage.language_code ? 'selected': '' %>><%- availableLanguage.language_text %></option>
                 <% } %>
             <% }) %>
         </select>