feat(AU-2042): Show Google disclaimer on VideoBlock bottom section (o…

…penedx#35040) * feat(AU-2042): Show Google disclaimer on VideoBlock bottom section * feat(AU-2042): Remove unnecessary classname prop
eduNEXT · Jun 28, 2024 · 032bf04 · 032bf04
1 parent 98dfb12
commit 032bf04
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/lms/templates/video.html b/lms/templates/video.html
@@ -170,6 +170,18 @@ <h4 class="hd hd-5">${_('How is the transcript quality ?')}</h4>
             </div>
         </div>
         % endif
+        <div class="google-disclaimer">
+            <span className="text-dark-300 x-small">Powered by
+                <a href="https://translate.google.com/" target="_blank">
+                    <img
+                        width="100"
+                        id="google-translate-logo"
+                        src="https://learning.edx.org/d4ab1b25143ecad62d69d855b00e7313.png"
+                        alt="Translated by Google logo"
+                    >
+                </a>
+            </span>
+        </div>
     </div>
 </div>
 

diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss
@@ -91,6 +91,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
 
   .wrapper-video-bottom-section {
     display: flex;
+    justify-content: space-between;
 
     .wrapper-download-video,
     .wrapper-download-transcripts,
@@ -177,6 +178,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
   }
 
+  .google-disclaimer {
+    display: none;
+    margin-top: $baseline;
+    @include padding-right($baseline);
+    vertical-align: top;
+  }
+
   .video-wrapper {
     @include float(left);
     @include margin-right(flex-gutter(9));

diff --git a/xmodule/js/src/video/09_video_caption.js b/xmodule/js/src/video/09_video_caption.js
@@ -37,7 +37,8 @@
                 'previousLanguageMenuItem', 'nextLanguageMenuItem', 'handleCaptionToggle',
                 'showClosedCaptions', 'hideClosedCaptions', 'toggleClosedCaptions',
                 'updateCaptioningCookie', 'handleCaptioningCookie', 'handleTranscriptToggle',
-                'listenForDragDrop', 'setTranscriptVisibility', 'updateTranscriptCookie'
+                'listenForDragDrop', 'setTranscriptVisibility', 'updateTranscriptCookie',
+                'toggleGoogleDisclaimer'
             );
 
             this.state = state;
@@ -492,6 +493,31 @@
                 };
             },
 
+            /**
+            * @desc Shows/Hides Google disclaimer based on captions being AI generated and
+            * if ClosedCaptions are being shown.
+            *
+            * @param {array} captions List of captions for the video.
+            *
+            * @returns {boolean}
+            */
+            toggleGoogleDisclaimer: function(captions) {
+                var self = this,
+                    state = this.state,
+                    aIGeneratedSpan = '<span id="captions-ai-generated"></span>',
+                    captionsAIGenerated = captions.some(caption => caption.includes(aIGeneratedSpan));
+
+                if (!self.hideCaptionsOnLoad && !state.captionsHidden) {
+                    if (captionsAIGenerated) {
+                        state.el.find('.google-disclaimer').show();
+                        self.shouldShowGoogleDisclaimer = true;
+                    } else {
+                        state.el.find('.google-disclaimer').hide();
+                        self.shouldShowGoogleDisclaimer = false;
+                    }
+                }
+            },
+
             /**
             * @desc Fetch the caption file specified by the user. Upon successful
             *     receipt of the file, the captions will be rendered.
@@ -547,6 +573,8 @@
                         start = results.start;
                         captions = results.captions;
 
+                        self.toggleGoogleDisclaimer(captions);
+
                         if (self.loaded) {
                             if (self.rendered) {
                                 self.renderCaption(start, captions);
@@ -1299,6 +1327,7 @@
             */
             hideCaptions: function(hideCaptions, triggerEvent) {
                 var transcriptControlEl = this.transcriptControlEl,
+                    self = this,
                     state = this.state,
                     text;
 
@@ -1310,6 +1339,8 @@
                         this.state.el.trigger('transcript:hide');
                     }
 
+                    state.el.find('.google-disclaimer').hide();
+
                     transcriptControlEl
                         .removeClass('is-active')
                         .attr('title', gettext(text))
@@ -1323,6 +1354,10 @@
                         this.state.el.trigger('transcript:show');
                     }
 
+                    if (self.shouldShowGoogleDisclaimer) {
+                        state.el.find('.google-disclaimer').show();
+                      }
+
                     transcriptControlEl
                         .addClass('is-active')
                         .attr('title', gettext(text))