@vidispine/vdt-videojs 21.3.0 → 22.1.0-pre.1

package/src/{menu.example.md → menu.usage.stories.mdx}

@@ -1,39 +1,52 @@
-# Player Menu API
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="vdt-videojs/Player Menu/Example Usage"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+## Example Usage
 
 It's possible to pass your own menu items to a new Player instance during initialization like so:
 
-```
-new Player({
+```js
+const player = new Player({
   target,
   sources: testData[randIndex].sources,
   menuItems,
-  ...
-})
+  // ...
+});
 ```
 
 The items can be defined as follows:
 
-```
+```js
 const menuItems = [
   {
     title: 'Example 1',
-    getActiveIndex: (subitems)=>{ // predicate method for determining active index
-      let activeIndex = 0
+    // predicate method for determining active index
+    getActiveIndex: (subitems) => {
+      let activeIndex = 0;
 
-      subitems.forEach((item, index)=>{
-        if(item.src === player.src){
-          activeIndex = index
+      subitems.forEach((item, index) => {
+        if (item.src === player.src) {
+          activeIndex = index;
         }
-      })
+      });
 
-      return activeIndex
+      return activeIndex;
     },
     items: [
       {
         title: 'Option 1',
         src: '//vjs.zencdn.net/v/oceans.mp4',
         onClick: (event, item) => {
-          console.log(event, item, player)
+          console.log(event, item, player);
         },
       },
       {
@@ -41,16 +54,13 @@ const menuItems = [
         src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
         someKey: 'value', // store arbitrary data
         onClick: (event, item) => {
-          console.log(event, item, player)
+          console.log(event, item, player);
         },
       },
-    ]
-  }
-]
-
-
+    ],
+  },
+];
 ```
 
 Note the `getActiveIndex` method on top level items - this method is invoked
 during opening of the menu, while navigating up to main level and on the first draw to determine the active (selected) item.
-

package/src/osd.js

@@ -1,8 +1,4 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable no-case-declarations */
-
-import constants from './constants';
+import { osd } from './constants';
 
 export default class OSD {
   constructor(props) {
@@ -26,12 +22,14 @@ export default class OSD {
             </table>
         `;
 
+    // eslint-disable-next-line prefer-destructuring
     this.iconEl = this.container.getElementsByClassName('osd-feedback-icon')[0];
 
-    this.props.target && this.props.target.appendChild(this.container);
+    if (this.props.target) this.props.target.appendChild(this.container);
   }
 
-  feedback(feedbackType, details = null) { // details - {} - can contain additional data
+  feedback(feedbackType, details = null) {
+    // details - {} - can contain additional data
     if (!this.state.enabled) {
       return;
     }
@@ -39,14 +37,16 @@ export default class OSD {
     let className;
 
     switch (feedbackType) {
-      case constants.osd.pause:
+      case osd.pause:
         className = 'pause';
         break;
-      case constants.osd.play:
+      case osd.play:
         className = 'play';
         break;
-      case constants.osd.volchange:
+      case osd.volchange:
+        // eslint-disable-next-line no-case-declarations
         const currentVolumeLevel = details.volume;
+        // eslint-disable-next-line no-case-declarations
         let perceivedVolumeLevel; // 'low' | 'mid' | 'high' string to utilize video js eisting icons
 
         /*
@@ -55,17 +55,23 @@ export default class OSD {
         so... no case switch inside case switch this time :/
         */
 
-        // alues here are a bit of a guess, but they seem to match videojs thresholds
-        if (currentVolumeLevel === 0) { perceivedVolumeLevel = 'null'; } else
-        if (currentVolumeLevel > 0.65) { perceivedVolumeLevel = 'high'; } else
-        if (currentVolumeLevel < 0.35) { perceivedVolumeLevel = 'low'; } else { perceivedVolumeLevel = 'mid'; }
+        // values here are a bit of a guess, but they seem to match videojs thresholds
+        if (currentVolumeLevel === 0) {
+          perceivedVolumeLevel = 'null';
+        } else if (currentVolumeLevel > 0.65) {
+          perceivedVolumeLevel = 'high';
+        } else if (currentVolumeLevel < 0.35) {
+          perceivedVolumeLevel = 'low';
+        } else {
+          perceivedVolumeLevel = 'mid';
+        }
 
         className = `volchange ${perceivedVolumeLevel}`;
         break;
-      case constants.osd.jumpForward:
+      case osd.jumpForward:
         className = 'forward-jump';
         break;
-      case constants.osd.jumpBackward:
+      case osd.jumpBackward:
         className = 'backward-jump';
         break;
       default:
@@ -73,8 +79,8 @@ export default class OSD {
         break;
     }
 
-
-    if (this.osdTimeout) { // should clear previous timeout/classname if in progress
+    if (this.osdTimeout) {
+      // should clear previous timeout/classname if in progress
       this.container.classList.remove('active');
       clearTimeout(this.osdTimeout);
     }

package/src/player.api.stories.mdx

@@ -0,0 +1,120 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="vdt-videojs/Player/Class Methods"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+## Class Methods
+
+<table>
+  <thead>
+    <tr>
+      <th>Method</th>
+      <th>Description</th>
+      <th>Associated hotkey</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>.togglePlayback()</td>
+      <td>toggle Play / Pause</td>
+      <td>Space, K</td>
+    </tr>
+    <tr>
+      <td>.pause()</td>
+      <td>Pause</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.play()</td>
+      <td>Play</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.volumeUp()</td>
+      <td>Increase playback volume</td>
+      <td>Arrow up</td>
+    </tr>
+    <tr>
+      <td>.volumeDown()</td>
+      <td>Decrease playback volume</td>
+      <td>Arrow down</td>
+    </tr>
+    <tr>
+      <td>.toggleMute()</td>
+      <td>Mute / Unmute audio</td>
+      <td>M</td>
+    </tr>
+    <tr>
+      <td>.toggleFullscreen()</td>
+      <td>Toggle fullscreen</td>
+      <td>F</td>
+    </tr>
+    <tr>
+      <td>.jumpForward()</td>
+      <td>Jump 10 seconds forward</td>
+      <td>L</td>
+    </tr>
+    <tr>
+      <td>.jumpBackward()</td>
+      <td>Jump 10 seconds backward</td>
+      <td>J</td>
+    </tr>
+    <tr>
+      <td>.frameForward()</td>
+      <td>Navigate to next frame</td>
+      <td>Arrow right</td>
+    </tr>
+    <tr>
+      <td>.frameBackward()</td>
+      <td>Navigate to previous frame</td>
+      <td>Arrow left</td>
+    </tr>
+    <tr>
+      <td>.toggleSubs()</td>
+      <td>Toggle subtitles on / off if any</td>
+      <td>C</td>
+    </tr>
+    <tr>
+      <td>.disableSubs()</td>
+      <td>Turn subtitles off</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.enableSubs()</td>
+      <td>Turn subtitles on</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.volume</td>
+      <td>Returns current volume level (0-1)</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.volume = 0.345</td>
+      <td>Sets volume level (0-1)</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.toStart()</td>
+      <td>Navigate to start of the video</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.toEnd()</td>
+      <td>Navigate to end of the video</td>
+      <td />
+    </tr>
+    <tr>
+      <td>.destroy()</td>
+      <td>Deconstructor</td>
+      <td />
+    </tr>
+  </tbody>
+</table>