New: Completion icon added to transcript button (issue/33)

adaptlearning · Oct 2, 2024 · 2dfcb47 · 2dfcb47
2 parents 8901501 + a6dbf6d
commit 2dfcb47
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 24 deletions.
diff --git a/js/YouTubeView.js b/js/YouTubeView.js
@@ -139,31 +139,50 @@ export default class YouTubeView extends ComponentView {
     }, 250);
   }
 
-  onToggleInlineTranscript(e) {
-    if (e && e.preventDefault) e.preventDefault();
-
+  /**
+   * Handles toggling the inline transcript open/closed
+   * and updating the label on the inline transcript button
+   */
+  onToggleInlineTranscript(event) {
+    if (event) event.preventDefault();
     const $transcriptBodyContainer = this.$('.youtube__transcript-body-inline');
     const $button = this.$('.youtube__transcript-btn-inline');
     const $buttonText = $button.find('.youtube__transcript-btn-text');
-    const config = this.model.get('_transcript');
-    const shouldOpen = !$transcriptBodyContainer.hasClass('inline-transcript-open');
-    const buttonText = shouldOpen ?
-      config.inlineTranscriptCloseButton :
-      config.inlineTranscriptButton;
-
-    $transcriptBodyContainer
-      .stop(true).slideToggle(() => $(window).resize())
-      .toggleClass('inline-transcript-open', shouldOpen);
-    $button.attr('aria-expanded', shouldOpen);
-    $buttonText.html(buttonText);
-
-    if (!shouldOpen || config._setCompletionOnView === false) return;
-    this.setCompletionStatus();
+
+    if ($transcriptBodyContainer.hasClass('inline-transcript-open')) {
+      $transcriptBodyContainer.stop(true, true).slideUp(() => {
+        $(window).resize();
+      }).removeClass('inline-transcript-open');
+      $button.attr('aria-expanded', false);
+      $buttonText.html(this.model.get('_transcript').inlineTranscriptButton);
+      this.transcriptTriggers('closed');
+
+      return;
+    }
+
+    $transcriptBodyContainer.stop(true, true).slideDown(() => {
+      $(window).resize();
+    }).addClass('inline-transcript-open');
+
+    $button.attr('aria-expanded', true);
+    $buttonText.html(this.model.get('_transcript').inlineTranscriptCloseButton);
+    this.transcriptTriggers('opened');
   }
+
+  onExternalTranscriptClicked(event) {
+    this.transcriptTriggers('external');
+  }
+
+  transcriptTriggers(state) {
+    const setCompletionOnView = this.model.get('_transcript')._setCompletionOnView;
+    const isComplete = this.model.get('_isComplete');
+    const shouldComplete = (setCompletionOnView && !isComplete);
 
-  onExternalTranscriptClicked() {
-    if (this.model.get('_transcript')._setCompletionOnView === false) return;
+    if (!shouldComplete) {
+      return Adapt.trigger('youtube:transcript', state, this);
+    }
     this.setCompletionStatus();
+    Adapt.trigger('youtube:transcript', 'complete', this);
   }
 
   triggerGlobalEvent(eventType) {

diff --git a/less/youtube.less b/less/youtube.less
@@ -35,4 +35,41 @@
   &__transcript-body-inline a {
     .link-text;
   }
+
+  &__transcript-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__transcript-btn-icon {
+    margin-inline-start: @icon-padding / 2;
+  }
+
+  &.is-complete &__transcript-btn-icon .icon {
+    .icon-tick;
+  }
+
+  &__transcript-btn-inline .icon {
+    .icon-plus;
+  }
+
+  &__transcript-body-inline {
+    display: none;
+  }
+
+  // Skip to transcript button
+  &__skip-to-transcript {
+
+    html:not(.has-accessibility) & {
+      .u-display-none;
+    }
+
+    &:not(:focus-visible) {
+      height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
 }
diff --git a/templates/youtube.hbs b/templates/youtube.hbs
@@ -4,7 +4,9 @@
   {{> component this}}
 
   {{#any _transcript._externalTranscript _transcript._inlineTranscript}}
-  <button class="aria-label js-skip-to-transcript" tabindex="-1" aria-label="{{_globals._components._youtube.skipToTranscript}}"></button>
+  <button class="btn-text youtube__skip-to-transcript js-skip-to-transcript">
+    {{_globals._components._youtube.skipToTranscript}}
+  </button>
   {{/any}}
 
   <div class="component__widget youtube__widget">
@@ -34,7 +36,14 @@
     {{#if _transcript._inlineTranscript}}
     <button class="youtube__transcript-btn youtube__transcript-btn-inline js-youtube-inline-transcript-toggle" aria-expanded="false">
       <span class="youtube__transcript-btn-text">
-        {{_transcript.inlineTranscriptButton}}
+        {{#if _transcript.inlineTranscriptButton}}
+          {{_transcript.inlineTranscriptButton}}
+        {{else}}
+          {{_transcript.transcriptLink}}
+        {{/if}}
+      </span>
+      <span class="youtube__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
       </span>
     </button>
     {{/if}}
@@ -43,16 +52,19 @@
     <button class="youtube__transcript-btn youtube__transcript-btn-external js-youtube-external-transcript-click" onclick="top.window.open('{{_transcript.transcriptLink}}')">
       <span class="youtube__transcript-btn-text">
         {{#if _transcript.transcriptLinkButton}}
-        {{_transcript.transcriptLinkButton}}
+          {{_transcript.transcriptLinkButton}}
         {{else}}
-        {{_transcript.transcriptLink}}
+          {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="youtube__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}
 
     {{#if _transcript._inlineTranscript}}
-    <div class="youtube__transcript-body-inline" role="region"{{#if _transcript.inlineTranscriptButton}} aria-label="{{_transcript.inlineTranscriptButton}}"{{/if}}>
+    <div class="youtube__transcript-body-inline" role="region" aria-label="{{#if _transcript.inlineTranscriptButton}}{{_transcript.inlineTranscriptButton}}{{else}}{{_transcript.transcriptLink}}{{/if}}">
       <div class="youtube__transcript-body-inline-inner">
         {{{compile _transcript.inlineTranscriptBody}}}
       </div>