feat: add download transcript button

The "download transcripts" button already exists, though it actually
downloads the captions not transcripts. Hence that button -- and the
related code -- is renamed to use the term "captions". Because the
original intention was to add a download transcripts button in appsembler#6, this
commit adds the originally required button and functionality as well.

Besides that, it worth mentioning the transcripts are different in a way
compared to captions in a way that it is not bind to any language.

wistiavideo/static/html/wistiavideo.html

@@ -6,7 +6,8 @@
       <div id="wistia_{{ media_id }}" data-media-id="{{ media_id }}" class="wistia_embed wistia_async_{{ media_id }} videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
     </div>
   </div>
-  <p class="wistia_responsive_transcripts">
-    <a href="#" style="display: none;" class="wistia_transcripts_download" data-api-enabled="{{ has_access_token }}">{{ download_transcripts_text }}</a>
+  <p class="wistia_responsive_download_buttons">
+    <a href="#" style="display: none;" class="wistia_captions_download" data-api-enabled="{{ has_access_token }}">{{ download_captions_text }}</a>
+    <a href="#" style="" class="wistia_transcripts_download" data-api-enabled="{{ has_access_token }}">{{ download_transcripts_text }}</a>
   </p>
 </div>

wistiavideo/static/js/wistiavideo.js

@@ -1,26 +1,34 @@
 function WistiaVideoXBlock(runtime, element) {
     "use strict";
 
-    const downloadBtnSelector = '.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download';
+    const captionsDownloadBtnSelector = '.wistiavideo_block .wistia_responsive_download_buttons .wistia_captions_download';
+    const transcriptsDownloadBtnSelector = '.wistiavideo_block .wistia_responsive_download_buttons ww .wistia_transcripts_download';
+
     const wistiaEmbeddedSelector = ".wistiavideo_block .wistia_responsive_padding .wistia_responsive_wrapper .wistia_embed";
 
     const mediaId = $(wistiaEmbeddedSelector).data("mediaId");
-    const apiEnabled = $(downloadBtnSelector).data("apiEnabled") === 'True';
+    const apiEnabled = $(captionsDownloadBtnSelector).data("apiEnabled") === 'True';
+
+    const downloadCaptionsHandlerUrl = runtime.handlerUrl(element, 'download_captions');
 
-    const downloadHandlerUrl = runtime.handlerUrl(element, 'download_captions');
-    const captionUrlBase = `http://fast.wistia.net/embed/captions/${mediaId}.vtt`;
+    const transcriptsUrl = `http://fast.wistia.net/embed/transcripts/${mediaId}`;
+    const captionsUrlBase = `http://fast.wistia.net/embed/captions/${mediaId}.vtt`;
 
     let embeddedVideo = undefined;
     let currentCaptionLanguage = '';
 
-    $(downloadBtnSelector, element).click(function (e) {
+    $(captionsDownloadBtnSelector, element).click(function (e) {
         e.preventDefault();
 
-        const targetUrl = apiEnabled ? downloadHandlerUrl : `${captionUrlBase}?lang=${currentCaptionLanguage}`;
-
+        const targetUrl = apiEnabled ? downloadCaptionsHandlerUrl : `${captionsUrlBase}?lang=${currentCaptionLanguage}`;
         window.open(targetUrl, '_blank', 'noopener');
     });
 
+    $(transcriptsDownloadBtnSelector, element).click(function (e) {
+        e.preventDefault();
+        window.open(transcriptsUrl, '_blank', 'noopener');
+    });
+
     window._wq = window._wq || [];
 
     window._wq.push({ id: mediaId, onReady: function(video) {
@@ -39,7 +47,7 @@ function WistiaVideoXBlock(runtime, element) {
                 currentCaptionLanguage = captions.options.language;
 
                 // Show the download button
-                $(downloadBtnSelector).show();
+                $(captionsDownloadBtnSelector).show();
             }
         });
     }});

wistiavideo/tests/test_xblock.py

@@ -41,9 +41,10 @@ def __render_html(self):
         return xblock.student_view().body_html()
 
     def test_transcripts_block_exists(self):
-        self.assertIn("wistia_responsive_transcripts", self.__render_html())
+        self.assertIn("wistia_responsive_download_buttons", self.__render_html())
 
-    def test_download_button_exists(self):
+    def test_download_buttons_exist(self):
+        self.assertIn("wistia_captions_download", self.__render_html())
         self.assertIn("wistia_transcripts_download", self.__render_html())
 
     def test_access_token_not_set(self):
@@ -54,6 +55,8 @@ def test_access_token_not_set(self):
         rendered_html = xblock.student_view().body_html()
 
         self.assertFalse(xblock.has_access_token)
+        self.assertIn("wistia_captions_download", rendered_html)
+        self.assertIn('data-api-enabled="False"', rendered_html)
         self.assertIn("wistia_transcripts_download", rendered_html)
         self.assertIn('data-api-enabled="False"', rendered_html)
 
@@ -65,6 +68,8 @@ def test_access_token_set(self):
         rendered_html = xblock.student_view().body_html()
 
         self.assertTrue(xblock.has_access_token)
+        self.assertIn("wistia_captions_download", rendered_html)
+        self.assertIn('data-api-enabled="True"', rendered_html)
         self.assertIn("wistia_transcripts_download", rendered_html)
         self.assertIn('data-api-enabled="True"', rendered_html)
 

wistiavideo/wistiavideo.py

@@ -173,7 +173,8 @@ def student_view(self, context=None):
         """
 
         context = {
-            "download_transcripts_text": _("Download transcripts"),
+            "download_captions_text": _("Download captions"),
+            "download_transcript_text": _("Download transcript"),
             "media_id": self.media_id,
             "has_access_token": self.has_access_token,
         }