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

package/README.md

@@ -14,7 +14,7 @@
                                   │┌───────────────────────┐    │       │
   open-source player packages --> ││ vdt-videojs-react     ---> │       │
                                   │└───────────────────────┘    │       │
-┌─────────────┐                   │┌───────────────────────┐    │       │  
+┌─────────────┐                   │┌───────────────────────┐    │       │
 │ vdt-videojs ------------------> ││ vdt-videojs-vue (?)   ---> │       │
 └─────────────┘                   │└───────────────────────┘    └───────┘
    (pure js)                      └ wrapped for frameworks ┘
@@ -30,7 +30,6 @@ use with react / other frameworks within their respective wrappers.
 
 See the [vdt-videojs-react docs](https://vidispine.github.io/vdt/?path=/story/vdt-videojs-react-videoplayer--basic) for use with React.
 
-
 # Get started with development
 
 `cd` into `vdt-videojs` directory and run
@@ -40,16 +39,17 @@ npm i
 npm run start
 
 ```
+
 Edit the code in `./src/` directory and observe changes at [localhost:2222](localhost:2222) (should auto-open)
 
 <br />
 
 # Building for distribution
 
-
 ```
 npm run build
 ```
+
 Outputs CSS and comment stripped ES6 javascript;
 Addittionally outputs CJS, EMS and UMD bundles.
 
@@ -58,6 +58,7 @@ You can also use
 ```
 npm run build:watch
 ```
+
 this will output to `/lib/` directory for development needs while working with other packages on the fly.
 
 <br />
@@ -70,4 +71,3 @@ this will output to `/lib/` directory for development needs while working with o
 - Fast forward / Fast backward functionality
 - Result view improvements
 - Suggested videos after video playback has ended
-

package/deprecated-app/README.md

@@ -0,0 +1,21 @@
+# Demo/Test app for videojs
+
+This folder contain a parcel v1 app used to demo and tests for videojs in the browser
+
+It is disabled due to parcel v1 deprecation and since we're using rollup to build all libraries.
+We should strive to demo in storybook and write tests we can use in an automated test pipeline instead.
+
+## Temporarily enable it by adding this to package.json
+
+```json
+{
+  "devDependency": {
+    "parcel-bundler": "^1.12.5"
+    //...
+  },
+  "script": {
+    "start": "rm -rf ./deprecated-app/build && rm -rf ./.cache && parcel ./deprecated-app/index.html --no-source-maps --no-hmr -p 3002 --open --out-dir ./deprecated-app/build"
+    //...
+  }
+}
+```

package/{demo.html → deprecated-app/index.html}

@@ -293,6 +293,6 @@
 
 	<!-- quick info / links / todos -->
 	<div id="demo-todos"></div>
-	<script type="text/javascript" src="./demo.js"></script>
+	<script type="text/javascript" src="./index.js"></script>
 </body>
 </html>

package/{demo.js → deprecated-app/index.js}

@@ -1,32 +1,22 @@
 /* eslint-disable no-console */
-/* eslint-disable no-multi-assign */
-/* eslint-disable no-alert */
-
 import 'video.js/dist/video-js.css';
-import './src/player.scss';
+import '../dist/index.css';
 
 // example import for pure js use
-import {
-  Player,
-  ExternalControls,
-  SeekBar,
-  TimeCodeDisplay,
-} from './src';
+import pkgJson from '../package.json'; // for version codes and other useful info
+import { Player, ExternalControls, SeekBar, TimeCodeDisplay } from '../src/index';
 
-// subtitles - imports return file urls (hased file output in parcel packager)
-import subtitleTestFile from './samples/birds.vvt';
 import subtitleTestFile2 from './samples/birds-es.vvt';
-
+import subtitleTestFile from './samples/birds.vvt';
 // simple smokescreen tests
-import tests, { log } from './tests';
-import pkgJson from './package.json'; // for version codes and other useful info
+import runTests, { log } from './tests';
+
+// subtitles - imports return file urls (hased file output in parcel packager)
 
 const urlParams = new URLSearchParams(window.location.search);
 const liveDemoMode = urlParams.get('live_demo') === 'true';
 
-const bodyClassName = [
-  (liveDemoMode) ? 'live-demo' : '',
-].join(' ');
+const bodyClassName = [liveDemoMode ? 'live-demo' : ''].join(' ');
 if (bodyClassName.length > 0) document.getElementsByTagName('body')[0].className += bodyClassName;
 
 document.title = `${pkgJson.name} - ${pkgJson.version}`;
@@ -60,12 +50,12 @@ function makeButtonBox(buttons) {
 }
 
 // test data
-const testData = [ // bunch of videos for variety, different aspect ratios and bitrates
+const testData = [
+  // bunch of videos for variety, different aspect ratios and bitrates
   {
-    sources: [
-      { src: '//vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4', label: 'Birds video' },
-    ],
-    posterUrl: 'https://www.nationalgeographic.com/content/dam/news/2016/11/09/birds-plastic/birds-plastic.jpg',
+    sources: [{ src: '//vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4', label: 'Birds video' }],
+    posterUrl:
+      'https://www.nationalgeographic.com/content/dam/news/2016/11/09/birds-plastic/birds-plastic.jpg',
     subtitles: [
       {
         src: subtitleTestFile,
@@ -78,12 +68,17 @@ const testData = [ // bunch of videos for variety, different aspect ratios and b
         label: 'Spanish',
       },
       {
-        src: new Blob(['WEBVTT\n\n\n00:00:00.500 --> 00:00:03.500 line:0%\nFuglene...\n\n00:00:03.800 --> 00:00:05.800 line:0%\nDe flyver og dykker i havet.\n\n00:00:06.000 --> 00:00:07.000 line:0%\nOg nu...\n\n00:00:07.200 --> 00:00:08.000 position:58% line:0%\nFuglene fester.\n\n00:00:08.200 --> 00:00:10.000 line:0%\nYumm, elskede fisk!\n\n00:00:10.100 --> 00:00:12.000 line:0%\nFiskene har masser af næringsstoffer i sig.\n\n00:00:12.000 --> 00:00:13.200 line:0%\nHvad hvis fisken kan føle smerter?\n\n00:00:13.200 --> 00:00:14.500 position:61% line:0%\nDet er en tanke.\n\n00:00:14.522 --> 00:00:16.900 line:0%\nTaler fisk engelsk?\n\n00:00:16.950 --> 00:00:18.200 line:0%\nGulp gulp gl gllllp ...\n\n00:00:18.300 --> 00:00:20.200 line:0%\nVi er nødt til at stoppe den useriøse fisk.\n\n00:00:20.333 --> 00:00:25.333 line:0%\nSwoosh swooosh; dykke eller dø\n\n00:00:26.000 --> 00:00:28.240 line:0%\nDet ser sammen.\n\n00:00:28.951 --> 00:00:30.785 line:0%\nHar du !!!\n\n00:00:30.900 --> 00:00:32.000 line:0%\nO-åh, de store fisker kommer.\n\n00:00:33.200 --> 00:00:36.044 line:0%\n"Vi vil afslutte dig"\n\n00:00:36.800 --> 00:00:42.547 line:0%\nOK, jeg skal hoppe, HVALE dette har ikke gået dårligere end det er; Tjek denne lange undertekstlinie!'], { type: 'text/plain' }),
+        src: new Blob(
+          [
+            'WEBVTT\n\n\n00:00:00.500 --> 00:00:03.500 line:0%\nFuglene...\n\n00:00:03.800 --> 00:00:05.800 line:0%\nDe flyver og dykker i havet.\n\n00:00:06.000 --> 00:00:07.000 line:0%\nOg nu...\n\n00:00:07.200 --> 00:00:08.000 position:58% line:0%\nFuglene fester.\n\n00:00:08.200 --> 00:00:10.000 line:0%\nYumm, elskede fisk!\n\n00:00:10.100 --> 00:00:12.000 line:0%\nFiskene har masser af næringsstoffer i sig.\n\n00:00:12.000 --> 00:00:13.200 line:0%\nHvad hvis fisken kan føle smerter?\n\n00:00:13.200 --> 00:00:14.500 position:61% line:0%\nDet er en tanke.\n\n00:00:14.522 --> 00:00:16.900 line:0%\nTaler fisk engelsk?\n\n00:00:16.950 --> 00:00:18.200 line:0%\nGulp gulp gl gllllp ...\n\n00:00:18.300 --> 00:00:20.200 line:0%\nVi er nødt til at stoppe den useriøse fisk.\n\n00:00:20.333 --> 00:00:25.333 line:0%\nSwoosh swooosh; dykke eller dø\n\n00:00:26.000 --> 00:00:28.240 line:0%\nDet ser sammen.\n\n00:00:28.951 --> 00:00:30.785 line:0%\nHar du !!!\n\n00:00:30.900 --> 00:00:32.000 line:0%\nO-åh, de store fisker kommer.\n\n00:00:33.200 --> 00:00:36.044 line:0%\n"Vi vil afslutte dig"\n\n00:00:36.800 --> 00:00:42.547 line:0%\nOK, jeg skal hoppe, HVALE dette har ikke gået dårligere end det er; Tjek denne lange undertekstlinie!',
+          ],
+          { type: 'text/plain' },
+        ),
         lang: 'dk',
         label: 'Danish',
       },
     ],
-    frameRate: (24000 / 1001),
+    frameRate: 24000 / 1001,
   },
   /*
   { // has multiple in-band audio tracks
@@ -143,15 +138,18 @@ const testData = [ // bunch of videos for variety, different aspect ratios and b
 let onDark = true;
 function setupLightSwitch() {
   function applyBg() {
-    document.getElementsByTagName('html')[0].className = (onDark) ? 'dark' : 'light';
+    document.getElementsByTagName('html')[0].className = onDark ? 'dark' : 'light';
   }
 
   function lightSwitch() {
     onDark = !onDark;
 
     applyBg();
+    // eslint-disable-next-line no-use-before-define
     player.onDark = onDark;
+    // eslint-disable-next-line no-undef
     controls.onDark = onDark;
+    // eslint-disable-next-line no-use-before-define
     seekbar.onDark = onDark;
   }
 
@@ -161,6 +159,7 @@ function setupLightSwitch() {
   logoSwitch.className = 'vdt-lightswitch';
   logoSwitch.onclick = lightSwitch;
 
+  // eslint-disable-next-line no-use-before-define
   target.appendChild(logoSwitch);
 }
 
@@ -173,10 +172,12 @@ setupLightSwitch();
 const menuItems = [
   {
     title: 'Example 1',
-    getActiveIndex: (subitems) => { // predicate method for determining active index
+    getActiveIndex: (subitems) => {
+      // predicate method for determining active index
       let activeIndex = 0;
 
       subitems.forEach((item, index) => {
+        // eslint-disable-next-line no-use-before-define
         if (item.src === player.src) {
           activeIndex = index;
         }
@@ -204,11 +205,16 @@ const menuItems = [
   },
 ];
 
-const player = window.player = new Player({
+// eslint-disable-next-line no-multi-assign
+const player = (window.player = new Player({
   target,
   sources: [
     ...testData[randIndex].sources,
-    { src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4', type: 'video/mp4', label: 'Blender video' },
+    {
+      src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
+      type: 'video/mp4',
+      label: 'Blender video',
+    },
   ],
   posterUrl: testData[randIndex].posterUrl, // optional
   subtitles: testData[randIndex].subtitles, // array of external subtitle URLs
@@ -218,10 +224,12 @@ const player = window.player = new Player({
   onDark,
   timecode: true, // optional, default -> false
   // color: '#e84393', // optional, default -> YT red
-  onReady: () => { // called after player has been initialized
+  onReady: () => {
+    // called after player has been initialized
     console.log('player ready!');
   },
-  onScreenshot: (currentTime) => { // optional - will show a screenshot button in control bar
+  onScreenshot: (currentTime) => {
+    // optional - will show a screenshot button in control bar
     console.log(currentTime);
   },
   // additional menu items
@@ -237,7 +245,7 @@ const player = window.player = new Player({
       console.log(`Out point was set - ${seconds}`);
     },
   },
-});
+}));
 target.appendChild(makeLabel('player.js'));
 
 const playerApiTestButtons = [
@@ -318,7 +326,8 @@ const playerApiTestButtons = [
 target.appendChild(makeButtonBox(playerApiTestButtons));
 
 // seekbar
-const seekbar = window.seekbar = new SeekBar({
+// eslint-disable-next-line no-multi-assign
+const seekbar = (window.seekbar = new SeekBar({
   target,
   player,
   onRegionClick: (region) => {
@@ -327,7 +336,7 @@ const seekbar = window.seekbar = new SeekBar({
   onDark,
   // in: 13.00,
   // out: 33.00,
-});
+}));
 target.appendChild(makeLabel('seekBar.js'));
 
 // buttons for various seekbar api tests
@@ -348,6 +357,7 @@ const seekbarApiTestButtons = [
   {
     title: 'Get In&Out',
     method: () => {
+      // eslint-disable-next-line no-alert
       alert(`In point is set at ${seekbar.in} seconds\nOut point is set at ${seekbar.out} seconds`);
     },
   },
@@ -374,16 +384,30 @@ const seekbarApiTestButtons = [
     method: () => {
       seekbar.regions = [
         new SeekBar.Region({
-          in: 9.7597499, out: 14, title: 'Birds', annotation: 'Birds are a group of feathered theropod dinosaurs, and constitute the only living dinosaurs.',
+          in: 9.7597499,
+          out: 14,
+          title: 'Birds',
+          annotation:
+            'Birds are a group of feathered theropod dinosaurs, and constitute the only living dinosaurs.',
         }),
         new SeekBar.Region({
-          in: 1, out: 2.8, title: 'Cool!', annotation: 'Lorem ipsum sit dolor atmet my friend...',
+          in: 1,
+          out: 2.8,
+          title: 'Cool!',
+          annotation: 'Lorem ipsum sit dolor atmet my friend...',
         }),
         new SeekBar.Region({
-          in: 28, out: 29, title: 'Dinosaurs', annotation: 'Based on fossil and biological evidence, most scientists accept that birds are a specialised subgroup of theropod dinosaurs.',
+          in: 28,
+          out: 29,
+          title: 'Dinosaurs',
+          annotation:
+            'Based on fossil and biological evidence, most scientists accept that birds are a specialised subgroup of theropod dinosaurs.',
         }),
         new SeekBar.Region({
-          in: 40, out: 43, title: 'Right aligned', annotation: 'This annotation is right aligned with end of region for fitment. ',
+          in: 40,
+          out: 43,
+          title: 'Right aligned',
+          annotation: 'This annotation is right aligned with end of region for fitment. ',
         }),
       ];
     },
@@ -471,13 +495,17 @@ toDoTarget.appendChild(description);
 const progressBar = document.createElement('div');
 progressBar.className = 'progress-bar';
 const percent = (toDoos.filter((todo) => todo[1]).length / toDoos.length) * 100;
-progressBar.innerHTML = `<div class="fill" style="width: ${percent}%">${percent.toFixed(2)} %</div>`;
+progressBar.innerHTML = `<div class="fill" style="width: ${percent}%">${percent.toFixed(
+  2,
+)} %</div>`;
 toDoTarget.appendChild(progressBar);
 
 toDoos.forEach((todo, index) => {
   const checkItem = document.createElement('div');
   checkItem.innerHTML = `
-    <span class="to-do"><input type="checkbox" onclick="return false" name="${todo}-${index}" ${todo[1] ? 'checked' : ''}> ${todo[0]}</span><br />
+    <span class="to-do"><input type="checkbox" onclick="return false" name="${todo}-${index}" ${
+    todo[1] ? 'checked' : ''
+  }> ${todo[0]}</span><br />
   `;
 
   toDoTarget.appendChild(checkItem);
@@ -489,7 +517,7 @@ runTestsDiv.className = 'tests';
 runTestsDiv.innerHTML = '<center><button>Run in-browser tests</button></center';
 
 runTestsDiv.getElementsByTagName('button')[0].onclick = () => {
-  tests();
+  runTests();
 };
 
 const testLog = document.createElement('div'); // drop in test log directly into player DOM for demo

package/{tests.js → deprecated-app/tests.js}

@@ -1,13 +1,12 @@
 /* eslint-disable no-undef */
 /* eslint-disable no-console */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable max-len */
-
 import mousetrap from 'mousetrap';
-import constants from './src/constants';
+
+import constants from '../src/constants';
 
 // use this to keep logs sane
-function logMiddleware(output, type = '') { // use log events for extra decoupled needs
+function logMiddleware(output, type = '') {
+  // use log events for extra decoupled needs
   const evt = new Event('log', {
     bubbles: true,
     cancelable: false,
@@ -57,13 +56,15 @@ function getIntInRange(min, max) {
 }
 
 async function pressKeys(keysArr) {
-  return new Promise((resolve) => { // press like a very fast monkey, max 300ms-ish speed
+  return new Promise((resolve) => {
+    // press like a very fast monkey, max 300ms-ish speed
     keysArr.forEach((key, index) => {
       setTimeout(() => {
         // play key
         mousetrap.trigger(key);
 
-        if (index === keysArr.length - 1) { // last keystroke
+        if (index === keysArr.length - 1) {
+          // last keystroke
           resolve();
         }
       }, 100 * index + getIntInRange(150, 250));
@@ -72,7 +73,9 @@ async function pressKeys(keysArr) {
 }
 
 async function sleep(milis = 50) {
-  return new Promise((r) => setTimeout(r, milis));
+  return new Promise((r) => {
+    setTimeout(r, milis);
+  });
 }
 
 async function waitForSeek() {
@@ -84,8 +87,10 @@ async function waitForSeek() {
   }
 
   return new Promise((resolve) => {
-    setTimeout(() => { // wait for 'seeking' to start
-      checkIntervalInstance = setInterval(() => { // check every x ms
+    setTimeout(() => {
+      // wait for 'seeking' to start
+      checkIntervalInstance = setInterval(() => {
+        // check every x ms
         if (!isSeeking()) {
           clearInterval(checkIntervalInstance);
           resolve(true);
@@ -110,23 +115,24 @@ const tests = {
       hours: 1,
     });
 
-    const timeCodeAssertion1 = (
-      (player.timeCode.frame === 21)
-      && (player.timeCode.seconds === 22)
-      && (player.timeCode.minutes === 23)
-      && (player.timeCode.hours === 1)
-    );
+    const timeCodeAssertion1 =
+      player.timeCode.frame === 21 &&
+      player.timeCode.seconds === 22 &&
+      player.timeCode.minutes === 23 &&
+      player.timeCode.hours === 1;
     assert(timeCodeAssertion1, 'Numbers with pure timeCode.update(...) method match');
 
     player.videojs.currentTime(0);
     await waitForSeek();
-    const timeCodeAssertion2 = (
-      (player.timeCode.frame === 0)
-      && (player.timeCode.seconds === 0)
-      && (player.timeCode.minutes === 0)
-      && (player.timeCode.hours === 0)
+    const timeCodeAssertion2 =
+      player.timeCode.frame === 0 &&
+      player.timeCode.seconds === 0 &&
+      player.timeCode.minutes === 0 &&
+      player.timeCode.hours === 0;
+    assert(
+      timeCodeAssertion2,
+      'Timecode reacted to player time update, everything should be zeroed out',
     );
-    assert(timeCodeAssertion2, 'Timecode reacted to player time update, everything should be zeroed out');
 
     let i = 1;
     const times = 22;
@@ -140,12 +146,18 @@ const tests = {
       }
     });
     await waitForSeek();
-    assert((player.timeCode.frame === times), 'Timecode reacted to frameForward, should be 22nd frame');
+    assert(
+      player.timeCode.frame === times,
+      'Timecode reacted to frameForward, should be 22nd frame',
+    );
 
     await sleep(); // sleep
     player.videojs.currentTime(13);
     await waitForSeek();
-    assert(((player.timeCode.seconds === 13) && (player.timeCode.minutes === 0)), 'Timecode reacted to player time update, seconds should be 13');
+    assert(
+      player.timeCode.seconds === 13 && player.timeCode.minutes === 0,
+      'Timecode reacted to player time update, seconds should be 13',
+    );
 
     log.progress('Done with timeCodeDisplay tests');
   },
@@ -156,16 +168,16 @@ const tests = {
     log.title('Testing hotkeys');
 
     await pressKeys(['space']);
-    assert((!player.videojs.paused()), 'Space key starts player');
+    assert(!player.videojs.paused(), 'Space key starts player');
 
     await pressKeys(['space']);
-    assert((player.videojs.paused()), 'Space key pauses player');
+    assert(player.videojs.paused(), 'Space key pauses player');
 
     await pressKeys(['k']);
-    assert((!player.videojs.paused()), 'K key starts player');
+    assert(!player.videojs.paused(), 'K key starts player');
 
     await pressKeys(['k']);
-    assert((player.videojs.paused()), 'K key pauses player');
+    assert(player.videojs.paused(), 'K key pauses player');
 
     await sleep();
 
@@ -173,7 +185,11 @@ const tests = {
     await pressKeys(['l', 'l']);
     await waitForSeek();
     const secAfterJumpForward = Math.round(player.videojs.currentTime());
-    assert((secAfterJumpForward - secBeforeJumpForward >= (constants.defaults.jumpSeconds * 2)), 'Jump forward with L key works');
+    assert(
+      // eslint-disable-next-line import/no-named-as-default-member
+      secAfterJumpForward - secBeforeJumpForward >= constants.defaults.jumpSeconds * 2,
+      'Jump forward with L key works',
+    );
 
     await sleep();
     await pressKeys(['l']);
@@ -183,7 +199,11 @@ const tests = {
     await pressKeys(['j', 'j']);
     await waitForSeek();
     const secAfterJumpBackward = Math.round(player.videojs.currentTime());
-    assert((secBeforeJumpBackward - secAfterJumpBackward >= constants.defaults.jumpSeconds * 2), 'Jump backward with J key works');
+    assert(
+      // eslint-disable-next-line import/no-named-as-default-member
+      secBeforeJumpBackward - secAfterJumpBackward >= constants.defaults.jumpSeconds * 2,
+      'Jump backward with J key works',
+    );
 
     await sleep(100);
 
@@ -191,34 +211,37 @@ const tests = {
     await pressKeys(['right']);
     await waitForSeek();
     const frameAfterFF = player.timeConverter.currentFrame(player.videojs.currentTime());
-    assert((frameAfterFF === frameBeforeFF + 1), '→ Frame forward with right arrow key works');
+    assert(frameAfterFF === frameBeforeFF + 1, '→ Frame forward with right arrow key works');
 
     const frameBeforeFB = player.timeConverter.currentFrame(player.videojs.currentTime());
     await pressKeys(['left']);
     await waitForSeek();
     const frameAfterFB = player.timeConverter.currentFrame(player.videojs.currentTime());
-    assert((frameAfterFB === frameBeforeFB - 1), '← Frame backward with left arrow key works');
+    assert(frameAfterFB === frameBeforeFB - 1, '← Frame backward with left arrow key works');
 
-    player.volume = 1.00;
+    player.volume = 1.0;
     await pressKeys(['down', 'down', 'down', 'down']);
-    assert((player.volume < 0.8), '↓ Volume adjustment with down arrow works');
+    assert(player.volume < 0.8, '↓ Volume adjustment with down arrow works');
 
     player.volume = 0.2;
     await pressKeys(['up', 'up', 'up', 'up', 'up', 'up', 'up', 'up']);
-    assert((player.volume > 0.8), '↑ Volume adjustment with up arrow works');
+    assert(player.volume > 0.8, '↑ Volume adjustment with up arrow works');
 
     await pressKeys(['m']);
-    assert((player.volume === 0), 'Mute with m key works');
+    assert(player.volume === 0, 'Mute with m key works');
 
     await pressKeys(['m']);
-    assert((player.volume > 0), 'Unmute with m key works');
+    assert(player.volume > 0, 'Unmute with m key works');
 
     log.progress('Done with hotkey tests');
   },
   seekBar: () => {
     seekbar.regions = [
       new seekbar.Region({
-        in: 1, out: 2.8, title: 'Cool!', annotation: 'Lorem ipsum sit dolor atmet my friend...',
+        in: 1,
+        out: 2.8,
+        title: 'Cool!',
+        annotation: 'Lorem ipsum sit dolor atmet my friend...',
       }),
       new seekbar.Region({ in: 12, out: 16 }),
       new seekbar.Region({ in: 22, out: 28 }),
@@ -227,13 +250,24 @@ const tests = {
     setTimeout(() => {
       seekbar.regions = [
         new seekbar.Region({
-          in: 9.7597499, out: 14, title: 'Birds', annotation: 'Birds are a group of feathered theropod dinosaurs, and constitute the only living dinosaurs.',
+          in: 9.7597499,
+          out: 14,
+          title: 'Birds',
+          annotation:
+            'Birds are a group of feathered theropod dinosaurs, and constitute the only living dinosaurs.',
         }),
         new seekbar.Region({
-          in: 1, out: 2.8, title: 'Cool!', annotation: 'Lorem ipsum sit dolor atmet my friend...',
+          in: 1,
+          out: 2.8,
+          title: 'Cool!',
+          annotation: 'Lorem ipsum sit dolor atmet my friend...',
         }),
         new seekbar.Region({
-          in: 18, out: 22, title: 'Dinosaurs', annotation: 'Based on fossil and biological evidence, most scientists accept that birds are a specialised subgroup of theropod dinosaurs.',
+          in: 18,
+          out: 22,
+          title: 'Dinosaurs',
+          annotation:
+            'Based on fossil and biological evidence, most scientists accept that birds are a specialised subgroup of theropod dinosaurs.',
         }),
       ];
     }, 1500);
@@ -241,10 +275,7 @@ const tests = {
   testInFrameMenu: async () => {
     // reduces repeat code for assertions
     function isMenuOpen() {
-      return (
-        player.menu.state.opened
-        && player.menu.menuContainer.classList.contains('open')
-      );
+      return player.menu.state.opened && player.menu.menuContainer.classList.contains('open');
     }
 
     log.title('Testing in frame menu');
@@ -256,13 +287,13 @@ const tests = {
 
     await pressKeys(['n']);
     await sleep(400);
-    assert((!isMenuOpen()), 'Menu state is closed upon second N key toggle');
+    assert(!isMenuOpen(), 'Menu state is closed upon second N key toggle');
 
     await pressKeys(['n']);
     await sleep(400);
     await pressKeys(['esc']);
     await sleep(400);
-    assert((!isMenuOpen()), 'Menu state is closed after pressing the ESC key');
+    assert(!isMenuOpen(), 'Menu state is closed after pressing the ESC key');
 
     const menuButtonEl = document.getElementsByClassName('vdt-settings-menu-button')[0];
     menuButtonEl.click();
@@ -271,13 +302,13 @@ const tests = {
 
     menuButtonEl.click();
     await sleep(400);
-    assert((!isMenuOpen()), 'Menu state is closed upon second click event invocation on menu btn');
+    assert(!isMenuOpen(), 'Menu state is closed upon second click event invocation on menu btn');
 
     menuButtonEl.click();
     await sleep(400);
     player.container.click();
     await sleep(400);
-    assert((!isMenuOpen()), 'Menu is being closed upon clicking outside the menu area when open');
+    assert(!isMenuOpen(), 'Menu is being closed upon clicking outside the menu area when open');
 
     log.progress('Testing video source switching and subtitles selection capability');
 
@@ -286,24 +317,26 @@ const tests = {
     await sleep(400);
 
     // find the sources menu item and click it
-    const sourcesMenuItem = player.menu.state.items.find((menuItem) => (menuItem.props.title.toLowerCase().indexOf('sources') > -1));
-    sourcesMenuItem && sourcesMenuItem.container.click();
+    const sourcesMenuItem = player.menu.state.items.find(
+      (menuItem) => menuItem.props.title.toLowerCase().indexOf('sources') > -1,
+    );
+    if (sourcesMenuItem) sourcesMenuItem.container.click();
     await sleep(400);
 
     // find a subitem that's not the selected one currently and click it
-    const altSrcMenuItem = player.menu.state.subItems.find((menuItem) => !(menuItem.props.selected));
+    const altSrcMenuItem = player.menu.state.subItems.find((menuItem) => !menuItem.props.selected);
 
     // avoid sound on playback of the other video src
     const playerVolBefore = player.volume;
     player.volume = 0;
 
-    altSrcMenuItem && altSrcMenuItem.container.click();
+    if (altSrcMenuItem) altSrcMenuItem.container.click();
     await waitForSeek();
     sleep();
     player.pause();
 
     const videoSrcAfterSwitch = player.videojs.src().toString();
-    assert((videoSrcBeforeSwitch !== videoSrcAfterSwitch), 'Video source was changed successfully');
+    assert(videoSrcBeforeSwitch !== videoSrcAfterSwitch, 'Video source was changed successfully');
     player.volume = playerVolBefore;
 
     // TODO - test subtitles selection