[SE-4475] Add transcripts download and refactor captions download

wistiavideo/static/css/wistiavideo.css

@@ -1,24 +1,24 @@
 /* CSS for WistiaVideoXBlock */
 
-.wistiavideo_block .wistia_responsive_transcripts {
-    margin: 1rem 0;
+.wistiavideo_block .wistia_responsive_download_buttons {
+    margin: 1rem 1rem 0 0;
 }
 
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download {
+.wistiavideo_block .wistia_responsive_download_buttons .download_button {
     background: rgba(30, 123, 237, 0.9);
     border-radius: 0.1875rem;
     padding: 11px 18px 11px 16px;
 }
 
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download,
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:hover,
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:active,
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:visited {
+.wistiavideo_block .wistia_responsive_download_buttons .download_button,
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:hover,
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:active,
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:visited {
     color: white;
 }
 
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:hover,
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:active,
-.wistiavideo_block .wistia_responsive_transcripts .wistia_transcripts_download:visited {
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:hover,
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:active,
+.wistiavideo_block .wistia_responsive_download_buttons .download_button:visited {
     background: rgba(30, 123, 237, 1);
 }

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="download_button wistia_captions_download" data-api-enabled="{{ has_access_token }}">{{ download_captions_text }}</a>
+    <a href="#" style="display: none;" class="download_button 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 wistiaEmbeddedSelector = ".wistiavideo_block .wistia_responsive_padding .wistia_responsive_wrapper .wistia_embed";
+    const captionsDownloadBtnSelector = $(element).find(".wistia_captions_download");
+    const transcriptsDownloadBtnSelector = $(element).find(".wistia_transcripts_download");
+    const wistiaEmbeddedSelector = $(element).find(".wistia_embed");
 
     const mediaId = $(wistiaEmbeddedSelector).data("mediaId");
-    const apiEnabled = $(downloadBtnSelector).data("apiEnabled") === 'True';
+    const apiEnabled = $(captionsDownloadBtnSelector).data("apiEnabled") === 'True';
 
-    const downloadHandlerUrl = runtime.handlerUrl(element, 'download_captions');
-    const captionUrlBase = `http://fast.wistia.net/embed/captions/${mediaId}.vtt`;
+    const downloadCaptionsHandlerUrl = runtime.handlerUrl(element, 'download_captions');
+
+    const noTranscriptsMessage = "This media does not have a transcript."
+    const transcriptsUrl = `https://fast.wistia.net/embed/transcripts/${mediaId}`;
+    const captionsUrlBase = `https://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,19 @@ function WistiaVideoXBlock(runtime, element) {
                 currentCaptionLanguage = captions.options.language;
 
                 // Show the download button
-                $(downloadBtnSelector).show();
+                $(captionsDownloadBtnSelector).show();
+            }
+        });
+
+        fetch(transcriptsUrl).then(function(response) {
+            if (response.ok) {
+                response.text().then(function(body) {
+                    if (!body.includes(noTranscriptsMessage)) {
+                        $(transcriptsDownloadBtnSelector).show();
+                    }
+                }).catch(function(error) {
+                    console.log(error)
+                });
             }
         });
     }});

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_transcripts_text": _("Download transcript"),
             "media_id": self.media_id,
             "has_access_token": self.has_access_token,
         }