Karoke-style captions

README.md

@@ -247,6 +247,7 @@ Here's a list of the properties and what they are used for:
 | `--plyr-font-weight-bold`                      | The bold font weight.                                                                                   | `600`                                                                 |
 | `--plyr-line-height`                           | The line height used within the player.                                                                 | `1.7`                                                                 |
 | `--plyr-font-smoothing`                        | Whether to enable font antialiasing within the player.                                                  | `false`                                                               |
+| `--plyr-pending-caption-opacity`                        | The opacity of WebVTT "future text" for karaoke style captions                                                  | `30%`                                                               |
 
 You can set them in your CSS for all players:
 

src/js/captions.js

@@ -25,6 +25,15 @@ import { parseUrl } from './utils/urls';
 const captions = {
   // Setup captions
   setup() {
+    window.show = [];
+    const media = this.media;
+    media.ontimeupdate = function () {
+      while (window.show[0] && media.currentTime > window.show[0].time) {
+        const caption = window.show.shift();
+        document.getElementById(caption.id).className = '';
+      }
+    };
+
     // Requires UI support
     if (!this.supported.ui) {
       return;
@@ -383,7 +392,36 @@ const captions = {
       const track = captions.getCurrentTrack.call(this);
 
       cues = Array.from((track || {}).activeCues || [])
-        .map((cue) => cue.getCueAsHTML())
+        .map((cue) => {
+          const cueFragment = cue.getCueAsHTML();
+          const newFragment = document.createDocumentFragment();
+
+          const array = Array.prototype.slice.call(cueFragment.childNodes);
+          let currentSegment = 0;
+          window.show = [];
+          for (let child of array) {
+            if (child.nodeType === 7) {
+              let id = 'captionSegment' + (currentSegment + 1);
+              window.show.push({
+                time: Number(new Date('1970-01-01T' + child.data + 'Z')) / 1000,
+                id: id,
+              });
+              /* setTimeout(() => {
+                console.log(id)
+                document.getElementById(id).className = ''
+              }, Number(new Date('1970-01-01T' + child.data + 'Z')) - (this.media.currentTime * 1000)) */
+              currentSegment += 1;
+              continue;
+            }
+            if (currentSegment !== 0) {
+              child.id = 'captionSegment' + currentSegment;
+              child.className = 'pendingCaption';
+            }
+            newFragment.append(child);
+          }
+
+          return newFragment;
+        })
         .map(getHTML);
     }
 

src/sass/components/captions.scss

@@ -56,3 +56,7 @@
     display: inline;
   }
 }
+
+.plyr__caption span.pendingCaption {
+  opacity: $plyr-pending-caption-opacity;
+}

src/sass/settings/captions.scss

@@ -9,3 +9,5 @@ $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;
 $plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
+
+$plyr-pending-caption-opacity: var(--plyr-pending-caption-opacity, 30%) !default;