Merge branch 'master' into issue/294

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-media",
-  "version": "6.4.6",
+  "version": "6.6.0",
   "framework": ">=5.19.1",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-media",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-media/issues",

js/mediaView.js

@@ -491,6 +491,7 @@ class MediaView extends ComponentView {
       }).removeClass('inline-transcript-open');
       $button.attr('aria-expanded', false);
       $buttonText.html(this.model.get('_transcript').inlineTranscriptButton);
+      this.transcriptTriggers('closed');
 
       return;
     }
@@ -501,17 +502,23 @@ class MediaView extends ComponentView {
 
     $button.attr('aria-expanded', true);
     $buttonText.html(this.model.get('_transcript').inlineTranscriptCloseButton);
+    this.transcriptTriggers('opened');
+  }
 
-    if (this.model.get('_transcript')._setCompletionOnView !== false) {
-      Adapt.trigger('media:transcriptComplete', this);
-      this.setCompletionStatus();
-    }
+  onExternalTranscriptClicked() {
+    this.transcriptTriggers('external');
   }
 
-  onExternalTranscriptClicked(event) {
-    if (this.model.get('_transcript')._setCompletionOnView === false) return;
-    Adapt.trigger('media:transcriptComplete', this);
+  transcriptTriggers(state) {
+    const setCompletionOnView = this.model.get('_transcript')._setCompletionOnView;
+    const isComplete = this.model.get('_isComplete');
+    const shouldComplete = (setCompletionOnView && !isComplete);
+
+    if (!shouldComplete) {
+      return Adapt.trigger('media:transcript', state, this);
+    }
     this.setCompletionStatus();
+    Adapt.trigger('media:transcript', 'complete', this);
   }
 
   /**

less/media.less

@@ -7,10 +7,6 @@
 
   // Transcript
   // --------------------------------------------------
-  &__transcript-body-inline {
-    display: none;
-  }
-
   // Skip to transcript button
   &__skip-to-transcript {
 
@@ -26,6 +22,26 @@
     }
   }
 
+  // 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-body-inline {
+    display: none;
+  }
+
+
   // Cross browser bug fixes
   // --------------------------------------------------
   .me-plugin {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-media",
-  "version": "6.4.6",
+  "version": "6.6.0",
   "framework": ">=5.19.1",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-media",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-media/issues",

templates/media.hbs

@@ -61,6 +61,9 @@
         {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="media__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}
 
@@ -73,6 +76,9 @@
         {{_transcript.transcriptLink}}
         {{/if}}
       </span>
+      <span class="media__transcript-btn-icon">
+        <span class="icon" aria-hidden="true"></span>
+      </span>
     </button>
     {{/if}}