feat: kareoke style subtitles

src/assets/styles/components/text-tracks.scss

@@ -7,6 +7,10 @@
     > div {
       margin: 3% !important;
     }
+    // Word highlight
+    &.cld-paced-text-tracks b {
+      color: var(--color-accent);
+    }
   }
   .vjs-text-track-cue {
     top: auto !important;
@@ -27,7 +31,7 @@
   .vjs-text-track-display:not(.cld-styled-text-tracks-theme-videojs-default) {
     .vjs-text-track-cue {
       font-family: inherit !important;
-      & > div {
+      > div {
         font-weight: 700;
         background-color: transparent !important;
         text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8);

src/plugins/paced-transcript/index.js

@@ -13,9 +13,13 @@ function pacedTranscript(config) {
       source.publicId(),
       extendCloudinaryConfig(player.cloudinary.cloudinaryConfig(), { resource_type: 'raw' }),
     ) + '.transcript',
-    maxWords: config.maxWords || 5 // Number of words per caption
+    maxWords: config.maxWords || 5, // Number of words per caption
+    wordHighlight: config.wordHighlight
   };
 
+  const classNames = player.textTrackDisplay.el().classList;
+  classNames.add('cld-paced-text-tracks');
+
   // Load the transcription file
   const initTranscript = async () => {
     try {
@@ -46,26 +50,57 @@ function pacedTranscript(config) {
 
   // Generate captions from the transcription data
   const parseTranscript = transcriptionData => {
-    const maxWords = options.maxWords;
     const captions = [];
 
     transcriptionData.forEach(segment => {
       const words = segment.words;
+      const maxWords = options.maxWords || words.length;
 
       for (let i = 0; i < words.length; i += maxWords) {
-        const startTime = words[i].start_time;
-        const endTime = words[Math.min(i + maxWords - 1, words.length - 1)].end_time;
-
-        const captionText = words
-          .slice(i, i + maxWords)
-          .map(word => word.word)
-          .join(' ');
-
-        captions.push({
-          startTime: startTime,
-          endTime: endTime,
-          text: captionText
-        });
+        if (options.wordHighlight) {
+          // Create a caption for every word, in which the current word is highlighted
+          const slicedWords = words.slice(i, Math.min(i + maxWords, words.length));
+          slicedWords.forEach((word, idx) => {
+            const captionText = words
+              .slice(i, i + maxWords)
+              .map(w => (w === word ? `<b>${w.word}</b>` : w.word))
+              .join(' ');
+
+            captions.push({
+              startTime: word.start_time,
+              endTime: word.end_time,
+              text: captionText
+            });
+
+            // if we haven't reached the end of the words array, and there's a gap between the current word end_time and the next word start_time, add a non-highlighted caption to fill the gap
+            if (words[idx + 1] && word.end_time < words[idx + 1].start_time) {
+              const captionText = words
+                .slice(i, i + maxWords)
+                .map(word => word.word)
+                .join(' ');
+
+              captions.push({
+                startTime: word.end_time,
+                endTime: words[idx + 1].start_time,
+                text: captionText
+              });
+            }
+          });
+        } else {
+          const startTime = words[i].start_time;
+          const endTime = words[Math.min(i + maxWords - 1, words.length - 1)].end_time;
+
+          const captionText = words
+            .slice(i, i + maxWords)
+            .map(word => word.word)
+            .join(' ');
+
+          captions.push({
+            startTime: startTime,
+            endTime: endTime,
+            text: captionText
+          });
+        }
       }
     });
 

src/plugins/styled-text-tracks/styled-text-tracks.js

@@ -10,7 +10,8 @@ const styledTextTracks = (config, player) => {
     fontSize: config.fontSize,
     gravity: config.gravity || 'bottom',
     box: config.box,
-    style: config.style
+    style: config.style,
+    wordHighlightStyle: config.wordHighlightStyle
   };
 
   // Class Names - Theme/Gravity
@@ -75,6 +76,14 @@ const styledTextTracks = (config, player) => {
       '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue > div'
     );
   }
+
+  // Custom styles
+  if (options.wordHighlightStyle) {
+    applyImportantStyle(
+      options.wordHighlightStyle,
+      '.vjs-text-track-display.cld-styled-text-tracks .vjs-text-track-cue b'
+    );
+  }
 };
 
 export default styledTextTracks;

src/plugins/styled-text-tracks/styled-text-tracks.scss

@@ -31,7 +31,7 @@
   .vjs-text-track-display {
 
     &.cld-styled-text-tracks-theme-yellow-outlined {
-      .vjs-text-track-cue {
+      div.vjs-text-track-cue {
         & > div {
           color: #FEF94A !important;
           text-shadow:
@@ -44,7 +44,7 @@
     }
 
     &.cld-styled-text-tracks-theme-3d {
-      .vjs-text-track-cue {
+      div.vjs-text-track-cue {
         & > div {
           $base-size: 0.03em;
           $base-color: #ff76ad;
@@ -59,7 +59,7 @@
     }
 
     &.cld-styled-text-tracks-theme-player-colors {
-      .vjs-text-track-cue {
+      div.vjs-text-track-cue {
         & > div {
           color: var(--color-text) !important;
           background-color: var(--color-accent) !important;

src/utils/cloudinary.js

@@ -133,7 +133,7 @@ const isKeyInTransformation = (transformation, key) => {
 
 const addTextTracks = (tracks, videojs) => {
   tracks.forEach(track => {
-    if (track.maxWords && videojs.pacedTranscript) {
+    if ((track.maxWords || track.wordHighlight) && videojs.pacedTranscript) {
       videojs.pacedTranscript(track);
     } else if (track.src) {
       fetch(track.src, GET_ERROR_DEFAULT_REQUEST).then(r => {

src/utils/get-analytics-player-options.js

@@ -31,13 +31,15 @@ const getSourceOptions = (sourceOptions = {}) => ({
   ...(sourceOptions.textTracks ? {
     textTracks: hasConfig(sourceOptions.textTracks),
     pacedTextTracks: hasConfig(sourceOptions.textTracks) && JSON.stringify(sourceOptions.textTracks || {}).includes('"maxWords":'),
+    wordHighlight: hasConfig(sourceOptions.textTracks) && JSON.stringify(sourceOptions.textTracks || {}).includes('"wordHighlight":'),
     ...(sourceOptions.textTracks.options ? {
       styledTextTracksTheme: sourceOptions.textTracks.options.theme,
       styledTextTracksFont: sourceOptions.textTracks.options.fontFace,
       styledTextTracksFontSize: sourceOptions.textTracks.options.fontSize,
       styledTextTracksGravity: sourceOptions.textTracks.options.gravity,
       styledTextTracksBox: hasConfig(sourceOptions.textTracks.options.box),
-      styledTextTracksStyle: hasConfig(sourceOptions.textTracks.options.style)
+      styledTextTracksStyle: hasConfig(sourceOptions.textTracks.options.style),
+      styledTextTracksWordHighlightStyle: hasConfig(sourceOptions.textTracks.options.wordHighlightStyle)
     } : {})
   } : {})
 });

src/validators/validators.js

@@ -98,21 +98,24 @@ export const sourceValidators = {
       fontSize: validator.isString,
       gravity: validator.isString,
       box: validator.isPlainObject,
-      style: validator.isPlainObject
+      style: validator.isPlainObject,
+      wordHighlightStyle: validator.isPlainObject
     },
     captions: {
       label: validator.isString,
       language: validator.isString,
       default: validator.isBoolean,
       url: validator.isString,
-      maxWords: validator.isNumber
+      maxWords: validator.isNumber,
+      wordHighlight: validator.isBoolean
     },
     subtitles: validator.isArrayOfObjects({
       label: validator.isString,
       language: validator.isString,
       default: validator.isBoolean,
       url: validator.isString,
-      maxWords: validator.isNumber
+      maxWords: validator.isNumber,
+      wordHighlight: validator.isBoolean
     })
   },
   info: {