From cacae8699461da180f263259843f0a52a1051d31 Mon Sep 17 00:00:00 2001
From: Lemmy Adams <lemmy.adams@learningpool.com>
Date: Thu, 12 Sep 2024 12:07:05 +0100
Subject: [PATCH 1/3] Add check on completed transcript

---
 less/youtube.less     | 18 ++++++++++++++++++
 templates/youtube.hbs |  6 ++++++
 2 files changed, 24 insertions(+)

diff --git a/less/youtube.less b/less/youtube.less
index ea08bed..f27a1d9 100644
--- a/less/youtube.less
+++ b/less/youtube.less
@@ -35,4 +35,22 @@
   &__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-body-inline {
+    display: none;
+  }
 }
diff --git a/templates/youtube.hbs b/templates/youtube.hbs
index 9aba031..d285767 100644
--- a/templates/youtube.hbs
+++ b/templates/youtube.hbs
@@ -36,6 +36,9 @@
       <span class="youtube__transcript-btn-text">
         {{_transcript.inlineTranscriptButton}}
       </span>
+      <span class="youtube__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}
 
@@ -48,6 +51,9 @@
         {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="youtube__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}
 

From b37620c66e661b59f92bba9283194915d8763ae5 Mon Sep 17 00:00:00 2001
From: Lemmy Adams <lemmy.adams@learningpool.com>
Date: Tue, 1 Oct 2024 17:21:23 +0100
Subject: [PATCH 2/3] Improved transcript and css to match vimeo & media

---
 less/youtube.less     | 19 +++++++++++++++++++
 templates/youtube.hbs | 16 +++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/less/youtube.less b/less/youtube.less
index f27a1d9..c727671 100644
--- a/less/youtube.less
+++ b/less/youtube.less
@@ -50,7 +50,26 @@
     .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
index d285767..9d7f70e 100644
--- 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,11 @@
     {{#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>
@@ -46,9 +52,9 @@
     <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">
@@ -58,7 +64,7 @@
     {{/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>

From a6dbf6d1d990ec53b421956b580506aae4ab4123 Mon Sep 17 00:00:00 2001
From: Lemmy Adams <lemmy.adams@learningpool.com>
Date: Wed, 2 Oct 2024 12:02:05 +0100
Subject: [PATCH 3/3] Update view functions

---
 js/YouTubeView.js | 57 +++++++++++++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/js/YouTubeView.js b/js/YouTubeView.js
index 03f9ba7..e3f61b4 100644
--- 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) {