Interactive video transcript

kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue

@@ -13,6 +13,7 @@
       :class="[
         'wrapper',
         {
+          'keyboard-modality': $inputModality === 'keyboard',
           'video-loading': loading,
           'transcript-visible': transcriptVisible,
           'transcript-wrap': windowIsPortrait || (!isFullscreen && windowIsSmall),
@@ -587,9 +588,13 @@
   }
 
   /* Hide control bar when playing & inactive */
-  /deep/ .vjs-has-started.vjs-playing.vjs-user-inactive {
-    .vjs-control-bar {
-      visibility: hidden;
+  /deep/ .vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
+    visibility: hidden;
+
+    /* Always show control bar in keyboard modality */
+    .keyboard-modality & {
+      visibility: visible;
+      opacity: 1;
     }
   }
 

kolibri/plugins/media_player/assets/src/views/MediaPlayerTranscript/TranscriptCue.vue

@@ -14,6 +14,8 @@
     @click="triggerSeekEvent"
     @keypress.enter="triggerSeekEvent"
     @keypress.space="triggerSeekEvent"
+    @keydown.home.prevent="$emit('goTo', 'beginning')"
+    @keydown.end.prevent="$emit('goTo', 'end')"
   >
     <span
       class="transcript-cue-time"
@@ -117,6 +119,12 @@
       offsetTop() {
         return this.$el.offsetTop;
       },
+      /**
+       * @public
+       */
+      focus() {
+        return this.$el.focus();
+      },
     },
     $trs: {
       title: 'Seek to {startTime}',

kolibri/plugins/media_player/assets/src/views/MediaPlayerTranscript/index.vue

@@ -30,6 +30,7 @@
         :active="activeCueIds.indexOf(cue.id) >= 0"
         :mediaDuration="mediaDuration"
         @seek="handleSeekEvent"
+        @goTo="handleGoTo"
       />
     </template>
     <div
@@ -118,6 +119,28 @@
         // Add 10ms to cueTime to avoid triggering two cues if they overlap on end and start time
         this.player.currentTime(cueTime + 0.01);
       },
+      /**
+       * @param {String} place `beginning` or `end`
+       */
+      handleGoTo(place) {
+        if (!this.cues.length || !Object.keys(this.$refs).length) {
+          return;
+        }
+
+        const cueId = place === 'beginning' ? this.cues[0].id : this.cues[this.cues.length - 1].id;
+        const cue = this.getCue(cueId);
+
+        if (cue) {
+          cue.focus();
+        }
+      },
+      getCue(cueId) {
+        if (!(cueId in this.$refs) || !this.$refs[cueId]) {
+          return null;
+        }
+
+        return this.$refs[cueId][0];
+      },
       scrollTo(offsetTop, offsetBottom, duration) {
         const start = new Date().getTime();
 
@@ -178,12 +201,11 @@
        */
       cueReduce(callback) {
         return (reduced, cueId) => {
-          if (!(cueId in this.$refs) || !this.$refs[cueId]) {
+          const cue = this.getCue(cueId);
+          if (!cue) {
             return reduced;
           }
 
-          const [cue] = this.$refs[cueId];
-
           try {
             return callback(reduced, cue);
           } catch (e) {

packages/kolibri-components/src/KThemePlugin.js

@@ -41,6 +41,9 @@ export default function KThemePlugin(Vue) {
           outline: 'none',
         };
       },
+      $inputModality() {
+        return globalThemeState.inputModality;
+      },
     },
     /* eslint-enable kolibri/vue-no-unused-properties */
   });