@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.2

package/deprecated-app/index.js

@@ -1,614 +0,0 @@
-/* eslint-disable no-console */
-import 'video.js/dist/video-js.css';
-import '../dist/index.css';
-
-// example import for pure js use
-import pkgJson from '../package.json'; // for version codes and other useful info
-import { Player, ExternalControls, SeekBar, TimeCodeDisplay } from '../src/index';
-
-import subtitleTestFile2 from './samples/birds-es.vvt';
-import subtitleTestFile from './samples/birds.vvt';
-// simple smokescreen tests
-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(' ');
-if (bodyClassName.length > 0) document.getElementsByTagName('body')[0].className += bodyClassName;
-
-document.title = `${pkgJson.name} - ${pkgJson.version}`;
-
-// will return random int from min / max
-function getIntInRange(min, max) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-// outputs an html label for demo needs
-function makeLabel(title) {
-  const label = document.createElement('label');
-  label.className = `vdt-label ${title.toLowerCase().replace('.', '-')}`;
-  label.textContent = title;
-  return label;
-}
-
-// outputs a segmented button box
-function makeButtonBox(buttons) {
-  const buttonBox = document.createElement('table');
-  buttonBox.innerHTML = '<tr></tr>';
-  buttonBox.className = 'component-api-test-buttons';
-  buttons.forEach((button) => {
-    const buttonEl = document.createElement('td');
-    buttonEl.textContent = button.title;
-    buttonEl.onclick = button.method;
-    buttonBox.getElementsByTagName('tr')[0].appendChild(buttonEl);
-  });
-
-  return buttonBox;
-}
-
-// test data
-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',
-    subtitles: [
-      {
-        src: subtitleTestFile,
-        lang: 'en',
-        label: 'English',
-      },
-      {
-        src: subtitleTestFile2,
-        lang: 'es',
-        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' },
-        ),
-        lang: 'dk',
-        label: 'Danish',
-      },
-    ],
-    frameRate: 24000 / 1001,
-  },
-  /*
-  { // has multiple in-band audio tracks
-    sources: [
-      { src: 'https://demo-myvidispine-com-media.s3-eu-west-1.amazonaws.com/HDALVN401A.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20200311T095703Z&X-Amz-SignedHeaders=host&X-Amz-Expires=39599&X-Amz-Credential=AKIAJJLDPJZTNRHQLXJQ%2F20200311%2Feu-west-1%2Fs3%2Faws4_request&X-Amz-Signature=0399b32a0af123ded7f02d1b37c7ee5ef116105774c1e7a6cbde0d49bb2a3760', type: 'video/mp4' }
-    ]
-  },
-  {
-    sources: [{
-      src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-      type: 'video/mp4'
-    }],
-    posterUrl: 'https://new.static.tv.nu/31999293?forceFit=0&height=760&quality=50&width=1350'
-  },
-  {
-    sources: [{
-      src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
-      type: 'video/mp4'
-    }],
-    posterUrl: 'https://mango.blender.org/wp-content/uploads/2013/05/01_thom_celia_bridge.jpg?x52477'
-  },
-  {
-    sources: [{
-      src:'//commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-      type: 'video/mp4'
-    }],
-    posterUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg'
-  },
-  {
-    sources: [{
-      src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
-      type: 'video/mp4'
-    }],
-    posterUrl: 'https://ageekandthesea.files.wordpress.com/2016/10/i_love_sintel_by_nash88-d2zkxw5.jpg'
-  },
-
-  // timecode samples
-  {
-    sources: [{
-      src: 'https://www.mediacollege.com/downloads/video/timecode/tc_29.97fps_df_1min.mov',
-      type: 'video/mp4',
-    }],
-    frameRate: (30000 / 1001),
-  },
-  // audio only
-  {
-    sources: [{
-      src: 'https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Dee_Yan-Key/Classical_Lounge/Dee_Yan-Key_-_06_-_Jauntiness.mp3',
-      type: 'audio/mp3'
-    }],
-    posterUrl: 'https://pbs.twimg.com/media/Dp4ShWjX4AAwsyW.jpg'
-  }
-  */
-];
-
-// test the dark theme capabilities of components
-let onDark = true;
-function setupLightSwitch() {
-  function applyBg() {
-    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;
-  }
-
-  applyBg();
-
-  const logoSwitch = document.createElement('div');
-  logoSwitch.className = 'vdt-lightswitch';
-  logoSwitch.onclick = lightSwitch;
-
-  // eslint-disable-next-line no-use-before-define
-  target.appendChild(logoSwitch);
-}
-
-// example player usage (pure js case)
-const target = document.getElementById('demo-content'); // mount-point for component demos
-const randIndex = getIntInRange(0, testData.length - 1);
-
-setupLightSwitch();
-
-const menuItems = [
-  {
-    title: 'Example 1',
-    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;
-        }
-      });
-
-      return activeIndex;
-    },
-    items: [
-      {
-        title: 'Option 1',
-        src: '//vjs.zencdn.net/v/oceans.mp4',
-        onClick: (event, item) => {
-          console.log(event, item);
-        },
-      },
-      {
-        title: 'Option 2',
-        src: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
-        someKey: 'value', // store arbitrary data
-        onClick: (event, item) => {
-          console.log(event, item);
-        },
-      },
-    ],
-  },
-];
-
-// 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',
-    },
-  ],
-  posterUrl: testData[randIndex].posterUrl, // optional
-  subtitles: testData[randIndex].subtitles, // array of external subtitle URLs
-  frameRate: testData[randIndex].frameRate,
-  controls: true, // optional - use false to disable in-frame controls for the player
-  controlsBelowPlayer: true,
-  onDark,
-  timecode: true, // optional, default -> false
-  // color: '#e84393', // optional, default -> YT red
-  onReady: () => {
-    // called after player has been initialized
-    console.log('player ready!');
-  },
-  onScreenshot: (currentTime) => {
-    // optional - will show a screenshot button in control bar
-    console.log(currentTime);
-  },
-  // additional menu items
-  menuItems,
-  seekBar: {
-    onRegionClick: (region) => {
-      console.log(region, 'clicked on a region');
-    },
-    onIn: (seconds) => {
-      console.log(`In point was set - ${seconds}`);
-    },
-    onOut: (seconds) => {
-      console.log(`Out point was set - ${seconds}`);
-    },
-  },
-}));
-target.appendChild(makeLabel('player.js'));
-
-const playerApiTestButtons = [
-  {
-    title: 'mv ctrls',
-    method: () => {
-      player.controlsBelowPlayer = !player.controlsBelowPlayer;
-    },
-  },
-  {
-    title: 'hide ctrls',
-    method: () => {
-      player.toggleControls();
-    },
-  },
-  {
-    title: 'help',
-    method: () => {
-      player.help.toggle();
-    },
-  },
-  {
-    title: 'fs',
-    method: () => {
-      player.toggleFullscreen();
-    },
-  },
-  {
-    title: 'replay',
-    method: () => {
-      player.replay();
-    },
-  },
-  {
-    title: 'subs',
-    method: () => {
-      player.toggleSubs();
-    },
-  },
-  {
-    title: 'timecode',
-    method: () => {
-      console.log(player.timeCode.smpte);
-      log.final(`Current timecode - ${player.timeCode.smpteString}`);
-    },
-  },
-  {
-    title: 'Vol lvl',
-    method: () => {
-      log.final(`${player.volume}`);
-    },
-  },
-  {
-    title: 'menu',
-    method: () => {
-      player.menu.toggle();
-    },
-  },
-  {
-    title: 'in',
-    method: () => {
-      player.seekBar.setInFromCurrent();
-    },
-  },
-  {
-    title: 'out',
-    method: () => {
-      player.seekBar.setOutFromCurrent();
-    },
-  },
-  {
-    title: 'clr io',
-    method: () => {
-      player.seekBar.clearMarkers();
-    },
-  },
-];
-target.appendChild(makeButtonBox(playerApiTestButtons));
-
-// seekbar
-// eslint-disable-next-line no-multi-assign
-const seekbar = (window.seekbar = new SeekBar({
-  target,
-  player,
-  onRegionClick: (region) => {
-    console.log(region, 'clicked on a region');
-  },
-  onDark,
-  // in: 13.00,
-  // out: 33.00,
-}));
-target.appendChild(makeLabel('seekBar.js'));
-
-// buttons for various seekbar api tests
-// target.appendChild(document.createElement('hr'));
-const seekbarApiTestButtons = [
-  {
-    title: 'Set In',
-    method: () => {
-      seekbar.setInFromCurrent();
-    },
-  },
-  {
-    title: 'Set Out',
-    method: () => {
-      seekbar.setOutFromCurrent();
-    },
-  },
-  {
-    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`);
-    },
-  },
-  {
-    title: 'Go to In',
-    method: () => {
-      seekbar.navigateToIn();
-    },
-  },
-  {
-    title: 'Go to Out',
-    method: () => {
-      seekbar.navigateToOut();
-    },
-  },
-  {
-    title: 'Clear',
-    method: () => {
-      seekbar.clearMarkers();
-    },
-  },
-  {
-    title: 'Regions',
-    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.',
-        }),
-        new SeekBar.Region({
-          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.',
-        }),
-        new SeekBar.Region({
-          in: 40,
-          out: 43,
-          title: 'Right aligned',
-          annotation: 'This annotation is right aligned with end of region for fitment. ',
-        }),
-      ];
-    },
-  },
-  {
-    title: 'Log state',
-    method: () => {
-      console.log(seekbar.state);
-      return false;
-    },
-  },
-];
-target.appendChild(makeButtonBox(seekbarApiTestButtons));
-
-// external controls
-window.controls = new ExternalControls({
-  target, // mount node
-  player, // player instance
-  onDark,
-});
-target.appendChild(makeLabel('externalControls.js'));
-
-// timecode
-window.timecode = new TimeCodeDisplay({
-  target,
-  player,
-  onInput: true,
-});
-target.appendChild(makeLabel('timeCodeDisplay.js'));
-player.setupTimeCode(window.timecode);
-
-// description
-const toDoTarget = document.getElementById('demo-todos');
-
-// quick n dirty progress track + goals
-const toDoos = [
-  ['Audio channel selection', 0],
-  ['Thumbnails while hovering over playback progressbar', 0],
-  ['Audio only playback - waveform visualization', 0],
-  ['Refitted videojs built-in SeekBar with the custom SeekBar component', 1],
-  ['Custom in-frame slideout menu with parametric menu items, toolbar button', 1],
-  ['Video source switching', 1],
-  ['External SeekBar - hi speed scrobbing', 1],
-  ['Option for dark / light theme for out-of-frame controls', 1],
-  ['Option to use the built-in controls below frame', 1],
-  ['Regions for custom SeekBar component (seekBar.js)', 1],
-  ['External TimeCodeDisplay support for player', 1],
-  ['In / Out markers for seek-bar', 1],
-  ['External seek-bar component (and react.js wrapper)', 1],
-  ['External controls component (start, end, play/pause, nextframe, prevframe)', 1],
-  ['Overlay with keyboard controls (help)', 1],
-  ['Button for callback with currentTime (for starting thumbnail job)', 1],
-  ['Accept a string as subtitles file (VVT)', 1],
-  ['Display a read-only timecode for duration', 1],
-  ['Timecode input feature', 1],
-  ['React js wrapper', 1],
-  ['Custom timecode implementation', 1],
-  ['Ability to jump by frame forward/backward via < & > keys', 1],
-  ['Subtitle support - using videojs capabilities', 1],
-  ['Persistance for settings (like volume / mute for starters)', 1],
-  ['Visual feedback gizmo on events, i.e. play/pause/jump/volchange like YT osd', 1],
-  ['Color customization - seek bar, ...', 1],
-  ['Sort mp4 at the top of the source list, because of an ancient iPad bug', 1],
-  ['Up / Down arrows should adjust volume', 1],
-  ['Mute toggle via "M" key', 1],
-  ['Fix video.js initial play button ugliness', 1],
-  ['Gradient underneath controls (like YT)', 1],
-  ['Develop similar color scheme / layout / iconography to YT player', 1],
-  ['Hotkeys for jumping 10 seconds forward/backward - shuttle controls JKL', 1],
-  ['Play/Pause with "Space" or "K" keypress (dodge video.js Button issues)', 1],
-  ['Remove unecessary elements that video.js enforces', 1],
-];
-
-const description = document.createElement('p');
-description.innerHTML = `<a href="https://www.npmjs.com/package/@vidispine/vdt-videojs">
-@vidispine/vdt-videojs</a> hosts a customized <a href="https://docs.videojs.com/">video.js</a>
-player with broad format capabilities, built-in subtitle / caption support, scrubbing 
-and other features.
-
-It sets out to mitigate several UI/UX caveats; <br />
-<br />Here's how we're progressing at improvements ( ${toDoos.length} additions ):`;
-
-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>`;
-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 />
-  `;
-
-  toDoTarget.appendChild(checkItem);
-});
-
-// run in-browser tests section
-const runTestsDiv = document.createElement('div');
-runTestsDiv.className = 'tests';
-runTestsDiv.innerHTML = '<center><button>Run in-browser tests</button></center';
-
-runTestsDiv.getElementsByTagName('button')[0].onclick = () => {
-  runTests();
-};
-
-const testLog = document.createElement('div'); // drop in test log directly into player DOM for demo
-testLog.id = 'test-log';
-document.body.appendChild(testLog);
-
-// bind to tests event
-let logStarted = false;
-let logTimeout;
-function doUILog(e) {
-  if (!logStarted) {
-    testLog.classList.add('active');
-    logStarted = true;
-  }
-
-  if (e.output) {
-    testLog.innerHTML += `<pre class="${e.logType}">${e.output}</pre>`;
-    testLog.scrollTop = testLog.scrollHeight;
-
-    if (e.logType === 'final') {
-      if (logTimeout) {
-        clearTimeout(logTimeout);
-      }
-
-      logTimeout = setTimeout(() => {
-        testLog.classList.remove('active');
-        logStarted = false;
-
-        setTimeout(() => {
-          testLog.innerHTML = '';
-        }, 300); // wait for the animation to complete before purging
-      }, 5000); // auto-close after 5 seconds
-    }
-  }
-}
-document.addEventListener('log', (e) => {
-  doUILog(e);
-});
-
-toDoTarget.prepend(runTestsDiv);
-
-// access changelog and wishlist
-window.changelog = () => {
-  Object.keys(pkgJson.changelog).forEach((changelogKey) => {
-    console.log(`${changelogKey}:\n\n`);
-    pkgJson.changelog[changelogKey].forEach((entry) => {
-      console.log(entry);
-    });
-    console.log('\n\n');
-  });
-};
-
-window.wishlist = () => {
-  pkgJson.wishlist.reverse().forEach((wish, index) => {
-    console.log(`${index + 1} - ${wish}`);
-  });
-};
-
-// footer
-const links = [
-  {
-    title: 'Docs',
-    href: 'https://vidispine.github.io/vdt/?path=/story/vdt-videojs-introduction--readme',
-  },
-  {
-    title: 'Use with React',
-    href: 'https://vidispine.github.io/vdt/?path=/story/vdt-videojs-react-videoplayer--basic',
-  },
-  {
-    title: 'Ask a question',
-    href: 'mailto:oto.insa@bertelsmann.de',
-  },
-  {
-    title: 'video.js Docs',
-    href: 'https://docs.videojs.com',
-  },
-  {
-    title: 'npm',
-    href: 'https://www.npmjs.com/package/@vidispine/vdt-videojs',
-  },
-];
-
-const footer = document.createElement('div');
-footer.id = 'footer';
-links.forEach((link) => {
-  const linkEl = document.createElement('a');
-
-  linkEl.href = link.href;
-  linkEl.target = '_BLANK';
-  linkEl.textContent = link.title;
-
-  footer.appendChild(linkEl);
-});
-document.body.appendChild(footer);

package/deprecated-app/samples/birds-es.vvt

@@ -1,53 +0,0 @@
-WEBVTT
-
-
-00:00:00.500 --> 00:00:03.500 line:0%
-Las aves...
-
-00:00:03.800 --> 00:00:05.800 line:0%
-Están volando y buceando en el océano.
-
-00:00:06.000 --> 00:00:07.000 line:0%
-Y ahora...
-
-00:00:07.200 --> 00:00:08.000 position:58% line:0%
-La fiesta de los pájaros.
-
-00:00:08.200 --> 00:00:10.000 line:0%
-Yumm, loveley peces!
-
-00:00:10.100 --> 00:00:12.000 line:0%
-Los peces tienen muchos nutrientes en ellos.
-
-00:00:12.000 --> 00:00:13.200 line:0%
-¿Qué pasa si el pez puede sentir dolor?
-
-00:00:13.200 --> 00:00:14.500 position:61% line:0%
-Es un pensamiento
-
-00:00:14.522 --> 00:00:16.900 line:0%
-¿Los peces hablan inglés?
-
-00:00:16.950 --> 00:00:18.200 line:0%
-Gulp gulp gl gllllp...
-
-00:00:18.300 --> 00:00:20.200 line:0%
-Tenemos que detener al pez canalla.
-
-00:00:20.333 --> 00:00:25.333 line:0%
-Swoosh swooosh; zambullirse o morir
-
-00:00:26.000 --> 00:00:28.240 line:0%
-Esto se ve colosal.
-
-00:00:28.951 --> 00:00:30.785 line:0%
-Los tengo !!!
-
-00:00:30.900 --> 00:00:32.000 line:0%
-O-oh, los grandes peces están llegando.
-
-00:00:33.200 --> 00:00:36.044 line:0%
-"Te vamos a acabar" 
-
-00:00:36.800 --> 00:00:42.547 line:0%
-OK, tengo que rebotar, BALLENA, esto no se ha puesto peor de lo que es; ¡Mira esta larga línea de subtítulos!