Update: Transcript Update (fixes: issue/35)

js/adapt-vimeo.js

@@ -3,22 +3,22 @@ import Adapt from 'core/js/adapt';
 import ComponentView from 'core/js/views/componentView';
 import ComponentModel from 'core/js/models/componentModel';
 import VimeoView from './VimeoView';
-import TranscriptView from './TranscriptView';
 import COMPLETION from './completionEnum';
 import components from 'core/js/components';
 
 class Vimeo extends ComponentView {
 
   events() {
     return {
+      'click .js-vimeo-inline-transcript-toggle': 'onToggleInlineTranscript',
+      'click .js-vimeo-external-transcript-click': 'onExternalTranscriptClicked',
       'click .js-skip-to-transcript': 'onSkipToTranscript'
     };
   }
 
   postRender() {
     this.$widget = this.$('.component__widget');
     this.setupPlayer();
-    this.setupTranscript();
     this.setupEventListeners();
   }
 
@@ -31,22 +31,6 @@ class Vimeo extends ComponentView {
     this.listenToOnce(this.vimeoView, 'ready', this.setReadyStatus);
   }
 
-  /**
-   * Render the transcript and setup the completion event if configured
-   */
-  setupTranscript() {
-    const transcriptConfig = this.model.get('_transcript') || {};
-
-    if (!transcriptConfig._inlineTranscript && !transcriptConfig._externalTranscript) {
-      return;
-    }
-
-    this.transcriptView = this.addSubview(TranscriptView, transcriptConfig);
-
-    if (!transcriptConfig._setCompletionOnView) return;
-    this.listenToOnce(this.transcriptView, 'transcript:open', this.setCompletionStatus);
-  }
-
   setupEventListeners() {
     this.listenTo(this.vimeoView, {
       play: this.handleMediaEvent,
@@ -75,10 +59,6 @@ class Vimeo extends ComponentView {
     return view;
   }
 
-  onSkipToTranscript() {
-    a11y.focusFirst(this.$('.vimeo__transcript-btn'));
-  }
-
   /**
    * Filter rapidly firing events so that only meaningful 'media' events are triggered
    * @param {object} event
@@ -121,6 +101,60 @@ class Vimeo extends ComponentView {
     });
   }
 
+  onSkipToTranscript(event) {
+    // need slight delay before focussing button to make it work when JAWS is running
+    // see https://github.com/adaptlearning/adapt_framework/issues/2427
+    _.delay(() => {
+      a11y.focus(this.$('.vimeo__transcript-btn'));
+    }, 250);
+  }
+
+  /**
+   * 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.$('.vimeo__transcript-body-inline');
+    const $button = this.$('.vimeo__transcript-btn-inline');
+    const $buttonText = $button.find('.vimeo__transcript-btn-text');
+
+    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);
+
+    if (!shouldComplete) {
+      return Adapt.trigger('vimeo:transcript', state, this);
+    }
+    this.setCompletionStatus();
+    Adapt.trigger('vimeo:transcript', 'complete', this);
+  }
+
   /**
    * Remove this view and sub views. Destroys the vimeo player instance
    */

less/vimeo.less

@@ -14,6 +14,46 @@
   &__transcript-body-inline {
     display: none;
   }
+
+  // Transcript
+  // --------------------------------------------------
+  // 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;
+    }
+  }
+
+  // Transcript container
+  &__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;
+  }
 }
 
 // --------------------------------------------------

templates/vimeo.hbs

@@ -4,9 +4,55 @@
   {{> component this}}
 
   {{#any _transcript._externalTranscript _transcript._inlineTranscript}}
-  <button class="aria-label js-skip-to-transcript" tabindex="-1" aria-label="{{_globals._components._vimeo.skipToTranscript}}"></button>
+  <button class="btn-text vimeo__skip-to-transcript js-skip-to-transcript">
+    {{_globals._components._vimeo.skipToTranscript}}
+  </button>
   {{/any}}
 
   <div class="component__widget vimeo__widget"></div>
 
+  {{#if _transcript}}
+  <div class="vimeo__transcript-container">
+
+    {{#if _transcript._inlineTranscript}}
+    <button class="vimeo__transcript-btn vimeo__transcript-btn-inline js-vimeo-inline-transcript-toggle" aria-expanded="false">
+      <span class="vimeo__transcript-btn-text">
+        {{#if _transcript.inlineTranscriptButton}}
+        {{_transcript.inlineTranscriptButton}}
+        {{else}}
+        {{_transcript.transcriptLink}}
+        {{/if}}
+      </span>
+      <span class="vimeo__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
+    </button>
+    {{/if}}
+
+    {{#if _transcript._externalTranscript}}
+    <button class="vimeo__transcript-btn vimeo__transcript-btn-external js-vimeo-external-transcript-click" onclick="window.open('{{_transcript.transcriptLink}}')">
+      <span class="vimeo__transcript-btn-text">
+        {{#if _transcript.transcriptLinkButton}}
+        {{_transcript.transcriptLinkButton}}
+        {{else}}
+        {{_transcript.transcriptLink}}
+        {{/if}}
+      </span>
+      <span class="vimeo__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
+    </button>
+    {{/if}}
+
+    {{#if _transcript._inlineTranscript}}
+    <div class="vimeo__transcript-body-inline" role="region" aria-label="{{#if _transcript.inlineTranscriptButton}}{{_transcript.inlineTranscriptButton}}{{else}}{{_transcript.transcriptLink}}{{/if}}">
+      <div class="vimeo__transcript-body-inline-inner">
+        {{{compile _transcript.inlineTranscriptBody}}}
+      </div>
+    </div>
+    {{/if}}
+
+  </div>
+  {{/if}}
+
 </div>