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

package/lib/src/timeCodeDisplay.js

@@ -1,253 +0,0 @@
-
-const timeCodeNodeNames = [
-  'hours',
-  'minutes',
-  'seconds',
-  'frame',
-];
-
-export default class TimeCodeDisplay {
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      selectedNode: null, 
-    };
-
-    const classNames = [
-      'vdt-timecode',
-      'vjs-time-control', 
-      (!(this.props.onInput)) ? 'duration' : '', // if no input capability, assume it's a duration timecode
-    ];
-    this.container = document.createElement('div');
-    this.container.className = classNames.join(' ');
-
-    this.nodeNames = [].concat(timeCodeNodeNames); 
-    this.nodes = {}; 
-
-    this.nodeNames.forEach((nodeName, index) => {
-      const node = document.createElement('input');
-      node.className = nodeName;
-      node.tabIndex = -1; 
-
-      if (this.props.onInput) { 
-        node.maxLength = 2;
-
-        node.onfocus = (e) => {
-          this.handleInputFocus(e, nodeName);
-        };
-
-        node.onblur = (e) => {
-          this.handleInputBlur(e, nodeName);
-        };
-
-        node.onmouseup = (e) => {
-          e.preventDefault();
-          e.currentTarget.select();
-        };
-
-        node.onkeydown = (e) => {
-          this.handleTimeCodeInput(e, nodeName);
-        };
-
-        node.onkeyup = (e) => {
-          this.handleTimeCodeInputOnKeyUp(e, nodeName);
-        };
-      } else {
-        node.readOnly = true; 
-      }
-
-      this.nodes[nodeName] = node;
-
-
-      const colon = document.createElement('span');
-      colon.innerHTML = ':';
-
-
-      this.container.appendChild(node);
-      (index !== this.nodeNames.length - 1) && this.container.appendChild(colon);
-    });
-
-    if (this.props.target) {
-      if (this.props.appendAfter) { 
-        this.props.target.parentNode.insertBefore(this.container, this.props.target.nextSibling);
-      } else {
-        this.props.target.appendChild(this.container);
-      }
-
-      
-      this.reset();
-    } else {
-      
-      console.error(`Unable to instantiate a new ${this.constructor.name} without target DOM node`); 
-    }
-  }
-
-  update(valuesObj) { 
-    const startCount = this.nodeNames.length - 1;
-    let i;
-    for (i = startCount; i > -1; i--) { 
-      const key = this.nodeNames[i];
-
-      if (typeof valuesObj[key] !== 'undefined' && (valuesObj[key] !== parseInt(this.nodes[key].value, 10)) && key !== this.state.selectedNode) { 
-        const str = valuesObj[key].toString();
-        this.nodes[key].value = this.toDigitPairStr(str);
-      }
-    }
-  }
-
-  reset() {
-    this.update({
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-      frame: 0,
-    });
-  }
-
-  handleInputFocus(e, nodeName) {
-    this.state.selectedNode = nodeName; 
-    this.nodes[nodeName].select();
-    this.props.onInputFocus && this.props.onInputFocus(nodeName);
-  }
-
-  handleInputBlur(e, nodeName) {
-    this.state.selectedNode = null; 
-    this.props.onInputBlur && this.props.onInputBlur(nodeName);
-  }
-
-  sanitize(input) {
-    const output = input.replace(/[^0-9]/g, '');
-    return output;
-  }
-
-  toDigitPairStr(strValue) {
-    return (strValue.length < 2) ? `0${strValue}` : strValue;
-  }
-
-  handleTimeCodeInput(e, nodeName) {
-    const nodeIndex = this.nodeNames.indexOf(nodeName);
-
-    switch (e.code) {
-      case 'Enter': 
-        this.checkAndNormalizeAllInputs();
-
-        this.props.onInput && this.props.onInput(e, nodeName, {
-          hours: this.hours,
-          minutes: this.minutes,
-          seconds: this.seconds,
-          frame: this.frame,
-        });
-
-        this[nodeName] = e.currentTarget.value;
-        e.currentTarget.blur(); 
-        break;
-      case 'Tab': 
-        e.preventDefault();
-
-        
-        if (!e.shiftKey) {
-          if ((nodeIndex + 1) <= (this.nodeNames.length - 1)) {
-            this.nodes[this.nodeNames[nodeIndex + 1]].focus(); 
-          } else {
-            this.nodes[this.nodeNames[0]].focus(); 
-          }
-        } else if ((nodeIndex - 1) >= 0) {
-          this.nodes[this.nodeNames[nodeIndex - 1]].focus(); 
-        } else {
-          this.nodes[this.nodeNames[this.nodeNames.length - 1]].focus(); 
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleTimeCodeInputOnKeyUp(e, nodeName) {
-        if (this.nodes[nodeName].value.length === 2 && !isNaN(e.key)) {
-      const nodeIndex = this.nodeNames.indexOf(nodeName); 
-
-      if ((nodeIndex + 1) <= (this.nodeNames.length - 1)) { 
-        this.nodes[this.nodeNames[nodeIndex + 1]].focus(); 
-      }
-    }
-  }
-
-  checkAndNormalizeAllInputs() {
-    this.nodeNames.forEach((nodeName) => {
-      if (this.nodes[nodeName].value.length < 1) { 
-        this.nodes[nodeName].value = '00';
-      }
-
-      
-      this.nodes[nodeName].value = this.toDigitPairStr(this.sanitize(this.nodes[nodeName].value));
-    });
-  }
-
-  
-
-  set frame(val) {
-    this.nodes.frame.value = this.toDigitPairStr(val);
-  }
-
-  get frame() {
-    return parseInt(this.nodes.frame.value, 10);
-  }
-
-  set seconds(val) {
-    this.nodes.seconds.value = this.toDigitPairStr(val);
-  }
-
-  get seconds() {
-    return parseInt(this.nodes.seconds.value, 10);
-  }
-
-  set minutes(val) {
-    this.nodes.minutes.value = this.toDigitPairStr(val);
-  }
-
-  get minutes() {
-    return parseInt(this.nodes.minutes.value, 10);
-  }
-
-  set hours(val) {
-    this.nodes.hours.value = this.toDigitPairStr(val);
-  }
-
-  get hours() {
-    return parseInt(this.nodes.hours.value, 10);
-  }
-
-  getFormatted(key) {
-    return this.toDigitPairStr(this[key].toString());
-  }
-
-  get smpte() {
-    return {
-      hours: this.hours,
-      minutes: this.minutes,
-      seconds: this.seconds,
-      frame: this.frame,
-    };
-  }
-
-  set spmte(o) {
-    this.update(o);
-  }
-
-  get smpteString() {
-    return `${this.getFormatted('hours')}:${this.getFormatted('minutes')}:${this.getFormatted('seconds')}:${this.getFormatted('frame')}`;
-  }
-
-  set external(bool) {
-    if (bool) {
-      this.container.classList.add('external');
-    } else {
-      this.container.classList.remove('external');
-    }
-  }
-
-  get external() {
-    return (this.container.classList.contains('external'));
-  }
-}

package/lib/src/videoTime.js

@@ -1,66 +0,0 @@
-
-
-class VideoTime {
-  constructor(props) {
-    if (props.frameRate === undefined) {
-      delete this;
-      throw new Error('No "frameRate" option provided, refer to docs.');
-    } else {
-      this.props = props;
-    }
-  }
-
-  secondsToFramesFromStart(seconds) {
-    let frame = seconds * this.props.frameRate;
-    frame = Math.round(frame);
-    return frame; 
-  }
-
-  currentTimeToFramesFromStart(currentTime) {
-    return this.secondsToFramesFromStart(currentTime);
-  }
-
-  secondsToFrame(seconds) {
-    let frame = this.secondsToFramesFromStart(seconds) % this.props.frameRate;
-    frame = Math.round(frame);
-    return frame;
-  }
-
-  currentFrame(currentTime) {
-    return Math.round(this.secondsToFrame(currentTime));
-  }
-
-  frameToCurrentTimeFromStart(frame) {
-    return frame / this.props.frameRate; 
-  }
-
-  smpteToCurrentTimeFromStart(values) {
-    return (
-      values.hours * 3600
-      + values.minutes * 60
-      + values.seconds
-      + values.frame / this.props.frameRate
-    );
-  }
-
-  secondsFromStartToSMPTE(secondsFromStart) {
-    let secondsFS = secondsFromStart;
-    const hours = Math.floor(secondsFS / 3600);
-    const minutesWithoutHours = secondsFS / 60 - 60 * hours;
-    
-    secondsFS %= 3600;
-
-    const minutes = Math.floor(minutesWithoutHours);
-    const seconds = Math.floor(secondsFS % 60);
-    const frame = this.secondsToFrame(secondsFS);
-
-    return {
-      hours,
-      minutes,
-      seconds,
-      frame,
-    };
-  }
-}
-
-export default VideoTime;

package/log.js

@@ -1,24 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable no-console */
-require('colors');
-
-const log = {
-  progress: (str) => {
-    console.log(`[ OK ] - ${str}`.yellow);
-  },
-  change: (str) => {
-    console.log(`[ OH ] - ${str}`.cyan);
-  },
-  success: (str) => {
-    console.log(`[ OK ] - ${str}`.green);
-  },
-  fail: (str) => {
-    console.log(`[ FAIL ] - ${str}`.red);
-    process.exit(); // steps are inder-dependent, so fail gracefully
-  },
-  clear: () => {
-    process.stdout.write('\x1BC'); // clear console
-  },
-};
-
-module.exports = log;

package/src/_index.stories.js

@@ -1,24 +0,0 @@
-/* eslint import/no-extraneous-dependencies: "off" */
-import { packageInfo } from './constants';
-import pkgJson from '../package.json';
-import playerReadme from '../README.md';
-
-export const readme = () => playerReadme;
-
-export const liveDemo = () => ({ src: 'https://vdt-js-player.netlify.app/?live_demo=true' });
-
-export const changelog = () => {
-  let mdChangeLog = '# Changelog\n';
-  Object.keys(pkgJson.changelog).reverse().forEach((changelogKey) => {
-    mdChangeLog += `## ${changelogKey}:\n\n`;
-    pkgJson.changelog[changelogKey].forEach((entry) => {
-      mdChangeLog += `- ${entry}\n`;
-    });
-  });
-
-  return mdChangeLog;
-};
-
-export default {
-  title: `${packageInfo.name}/Introduction`,
-};

package/src/externalControls.stories.js

@@ -1,6 +0,0 @@
-/* eslint import/no-extraneous-dependencies: "off" */
-import { packageInfo } from './constants';
-
-export default {
-  title: `${packageInfo.name}/ExternalControls`,
-};

package/src/helpOverlay.stories.js

@@ -1,6 +0,0 @@
-/* eslint import/no-extraneous-dependencies: "off" */
-import { packageInfo } from './constants';
-
-export default {
-  title: `${packageInfo.name}/HelpOverlay`,
-};

package/src/menu.classMethods.md

@@ -1,47 +0,0 @@
-## Menu Class Methods
-
-Menu is initialized at `player.menu`, so you can access
-the Menu class instance methods via `player.menu.methodName()`.
-
-<br />
-<table>
-	<thead>
-		<tr>
-			<th>Method</th>
-			<th>Description</th>
-			<th>Associated hotkey</th>
-		</tr>
-	</thead>
-	<tbody>
-        <tr>
-			<td>.open()</td>
-			<td>Open menu</td>
-			<td>N</td>
-		</tr>
-        <tr>
-			<td>.close()</td>
-			<td>Close menu</td>
-			<td>ESC, N</td>
-		</tr>
-		<tr>
-			<td>.toggle()</td>
-			<td>Toggle open / close</td>
-			<td>N</td>
-		</tr>
-        <tr>
-			<td>.up()</td>
-			<td>Go up to main level</td>
-			<td></td>
-		</tr>
-        <tr>
-			<td>.render()</td>
-			<td>Update selected items in main level</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.opened</td>
-			<td>Getter property (bool) - use this to get the state of menu</td>
-			<td></td>
-		</tr>
-	</tbody>
-</table>

package/src/player.classMethods.md

@@ -1,108 +0,0 @@
-# Player 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></td>
-		</tr>
-		<tr>
-			<td>.play()</td>
-			<td>Play</td>
-			<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></td>
-		</tr>
-		<tr>
-			<td>.enableSubs()</td>
-			<td>Turn subtitles on</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.volume</td>
-			<td>Returns current volume level (0-1)</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.volume = 0.345</td>
-			<td>Sets volume level (0-1)</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.toStart()</td>
-			<td>Navigate to start of the video</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.toEnd()</td>
-			<td>Navigate to end of the video</td>
-			<td></td>
-		</tr>
-		<tr>
-			<td>.destroy()</td>
-			<td>Deconstructor</td>
-			<td></td>
-		</tr>
-	</tbody>
-</table>

package/src/player.stories.js

@@ -1,14 +0,0 @@
-/* eslint import/no-extraneous-dependencies: "off" */
-import { packageInfo } from './constants';
-import exampleMd from './player.example.md';
-import menuExampleMd from './menu.example.md';
-import menuClassMethodsMd from './menu.classMethods.md';
-import methodsMd from './player.classMethods.md';
-
-export default {
-  title: `${packageInfo.name}/Player`,
-};
-
-export const exampleUsage = () => exampleMd;
-export const classMethods = () => methodsMd;
-export const menuAPI = ()=> menuExampleMd+menuClassMethodsMd;

package/src/seekBar.stories.js

@@ -1,8 +0,0 @@
-/* eslint import/no-extraneous-dependencies: "off" */
-import { packageInfo } from './constants';
-import exampleMd from './player.example.md';
-import methodsMd from './player.classMethods.md';
-
-export default {
-  title: `${packageInfo.name}/SeekBar`,
-};

package/tmp/player.css

@@ -1 +0,0 @@
-button,input,select,textarea,video{outline:none}.video-js .vjs-menu-item,button:focus{outline:initial}.video-js{max-width:100%;overflow:hidden}.video-js.init{height:0!important;display:none}.video-js video{transform:translateZ(0);-webkit-transform:translateZ(0);display:block}.video-js .vjs-poster{background-size:cover}.video-js .vjs-control-bar{height:50px;padding-top:6px;display:flex;background:-moz-linear-gradient(top,transparent 0,transparent 15%,rgba(0,0,0,.3) 100%);background:-webkit-linear-gradient(top,transparent,transparent 15%,rgba(0,0,0,.3));background:linear-gradient(180deg,transparent 0,transparent 15%,rgba(0,0,0,.3));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#4d000000",GradientType=0);transform:translateZ(0);-webkit-transform:translateZ(0);z-index:2}.video-js .vjs-control-bar .vdt-seekbar-wrapper{top:0;left:0;height:10px;width:100%;position:absolute;margin:0 auto}.video-js .vjs-big-play-button{font-size:90px;border:0;background-color:transparent;text-shadow:1px 2px 40px rgba(0,0,0,.4);z-index:2}.video-js .vjs-big-play-button .vjs-icon-placeholder:before{padding-top:5px}.video-js:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button:focus{background-color:transparent}.video-js .vjs-progress-control{top:0;left:0;position:absolute;display:block;width:100%;height:10px}.video-js .vjs-progress-control .vjs-load-progress{background:hsla(0,0%,100%,.2)}.video-js .vjs-progress-control .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip{display:none}.video-js .vjs-time-control.duration,.video-js .vjs-time-control.vjs-duration{margin-right:auto}.video-js .vdt-screenshot-button .vjs-icon-placeholder,.video-js .vjs-subs-caps-button .vjs-icon-placeholder{opacity:.6}.video-js.has-vdt-menu .vjs-subs-caps-button{display:none}.video-js.subtitles-active .vjs-subs-caps-button .vjs-icon-placeholder{opacity:1}.video-js .vjs-control{font-size:14px}.video-js .vjs-play-progress.vjs-slider-bar{background-color:red}.video-js .vjs-current-time,.video-js .vjs-no-flex .vjs-current-time,.video-js .vjs-time-control{display:block}.video-js .vjs-time-control{font-size:14px;padding:0;min-width:14px;text-align:center}.video-js .vjs-volume-panel,.video-js .vjs-volume-panel .vjs-mute-control{width:3em}.video-js .vjs-menu-button-popup .vjs-menu{bottom:20px}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:rgba(28,28,28,.9);border-radius:7px}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:focus:not(.vjs-selected){background-color:transparent}.video-js .vjs-menu-button-popup .vjs-menu li.vjs-menu-item:hover:not(.vjs-selected){background-color:hsla(0,0%,100%,.2)}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item-text{color:#fff}.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected .vjs-menu-item-text{color:#333}.video-js .vdt-player-osd{pointer-events:none;position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:4;-webkit-transform:translateZ(0) scale3d(.5,.5,.5);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0) scale3d(.5,.5,.5);transition:all .2s ease-out}.video-js .vdt-player-osd.active{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.video-js .vdt-player-osd table{width:100%;height:100%}.video-js .vdt-player-osd table td{vertical-align:middle;text-align:center}.video-js .vdt-player-osd table td .osd-feedback-icon:before{font-family:VideoJS;content:"\f101";font-size:50px;padding:15px;display:inline-block;height:80px;width:80px;text-align:center;background:rgba(0,0,0,.2);border-radius:100%}.video-js .vdt-player-osd table td .pause:before{content:"\f103"}.video-js .vdt-player-osd table td .volchange.high:before{content:"\f107"}.video-js .vdt-player-osd table td .volchange.mid:before{content:"\f106"}.video-js .vdt-player-osd table td .volchange.low:before{content:"\f105"}.video-js .vdt-player-osd table td .mute:before,.video-js .vdt-player-osd table td .volchange.null:before{content:"\f104"}.video-js .vdt-player-osd table td .unmute:before{content:"\f107"}.video-js .vdt-player-osd table td .backward-jump:before,.video-js .vdt-player-osd table td .forward-jump:before{content:"\f101\f101";letter-spacing:-38px;padding-left:0;padding-right:34px}.video-js .vdt-player-osd table td .backward-jump:before{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@keyframes vjs-spinner-fade{0%{border-top-color:hsla(0,0%,100%,.6)}35%{border-top-color:#fff}to{border-top-color:hsla(0,0%,100%,.6)}}.video-js .vjs-loading-spinner{margin:-40px 0 0 -40px;opacity:.85;border:5px solid hsla(0,0%,100%,.7);width:80px;height:80px;border-radius:100px;z-index:5}.video-js .vjs-loading-spinner:after,.video-js .vjs-loading-spinner:before{margin:-5px}.video-js .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:0;transition:transform .3s ease-out;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.video-js .vjs-text-track-display>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display>div{display:table;width:100%;height:100%;margin:0!important}.video-js .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue{width:100%!important;bottom:0!important;top:auto!important;left:auto!important;right:auto!important;font-size:18px!important;height:auto!important;padding-bottom:1.5%;display:table-cell}.video-js .vjs-text-track-display .vjs-text-track-cue>div,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display .vjs-text-track-cue>div{padding:2px 4px;line-height:1.25;border-radius:2px}.video-js.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue,.video-js.vjs-user-inactive.vjs-playing.vjs-fullscreen .vjs-text-track-display .vjs-text-track-cue{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:24px!important}.video-js.vjs-controls-enabled.vjs-user-active .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen) .vjs-control-bar,.video-jsdiv .vjs-control-bar{opacity:1}.video-js.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,.video-js:not(.controls-below-player) .vjs-control-bar{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate3d(0,50px,0);transition:transform .3s ease-in-out}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player) .vjs-control-bar,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) .vjs-control-bar{transform:translateZ(0);-webkit-transform:translateZ(0)}.video-js.vjs-controls-enabled.vjs-user-active:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display,.video-js.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player):not(.vjs-controls-disabled) .vjs-text-track-display{transform:translate3d(0,-50px,0)}.video-js .vdt-timecode{display:inline;font-family:"monospace",sans-serif;margin-left:20px}.video-js .vdt-timecode input,.video-js .vdt-timecode span{font-size:16px}.video-js .vdt-timecode span{text-align:center;display:inline-block}.video-js .vdt-timecode input{display:inline-block;width:auto;border:0;background:transparent;color:inherit;width:21px}@media (max-width:640px){.video-js .vdt-timecode{flex-grow:3}}.video-js .vdt-timecode.duration{margin-left:0;margin-right:auto}.video-js .vdt-timecode.duration span{cursor:default}.video-js .vdt-timecode.duration:before{content:"/";display:inline-block;margin:0 5px;font-size:16px}@media (max-width:640px){.video-js .vdt-timecode.duration{display:none}}.video-js .vdt-cinema-button,.video-js .vdt-screenshot-button,.video-js .vdt-settings-menu-button{cursor:pointer}.video-js .vdt-cinema-button:after,.video-js .vdt-screenshot-button:after,.video-js .vdt-settings-menu-button:after{content:"\f10b";font-family:VideoJS;font-size:22px}.video-js .vdt-cinema-button:active,.video-js .vdt-cinema-button:focus,.video-js .vdt-screenshot-button:active,.video-js .vdt-screenshot-button:focus,.video-js .vdt-settings-menu-button:active,.video-js .vdt-settings-menu-button:focus{opacity:.6}.video-js .vdt-cinema-button:after{content:"\f10a"}.video-js .vdt-settings-menu-button:after{content:"\f110"}.video-js .vdt-help-overlay,.video-js .vdt-waveform-visual{position:absolute;top:0;left:0;background:#888;height:100%;width:100%;display:none;background:#88bfe8;background:-moz-linear-gradient(top,#88bfe8 0,#71a1c4 100%);background:-webkit-linear-gradient(top,#88bfe8,#71a1c4);background:linear-gradient(180deg,#88bfe8 0,#71a1c4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#88bfe8",endColorstr="#71a1c4",GradientType=0)}.video-js .vdt-help-overlay canvas,.video-js .vdt-waveform-visual canvas{height:100%;width:100%}.video-js.vjs-has-started .vdt-waveform-visual{display:block}.video-js .vdt-help-overlay{font-size:15px;background:transparent;z-index:2;transition:opacity 1s ease-in-out;opacity:0;padding-bottom:12px}.video-js .vdt-help-overlay>table{height:100%;margin:0 auto}.video-js .vdt-help-overlay>table td.vdt-help-contents table{border-radius:7px;max-height:400px;-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.6)}.video-js .vdt-help-overlay>table td.vdt-help-contents table td{padding:6px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2),.video-js .vdt-help-overlay>table td.vdt-help-contents table td td:nth-child(4){padding:4px 9px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(2){padding-right:32px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child div,.video-js .vdt-help-overlay>table td.vdt-help-contents table td:nth-child(3) div{text-align:center;padding:3px;border:1px solid #fff;border-radius:2px;background:hsla(0,0%,100%,.1);font-size:13px;min-width:21px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:first-child{padding-left:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table td:last-child{padding-right:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:first-child td{padding-top:16px}.video-js .vdt-help-overlay>table td.vdt-help-contents table tr:last-child td{padding-bottom:16px}.video-js .vdt-help-overlay>table td{vertical-align:middle}.video-js .vdt-help-overlay.active{display:block;opacity:1}.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen .vjs-text-track-display,.video-js.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:60px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled){overflow:visible;width:auto;height:auto;background-color:transparent;margin-bottom:70px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) video{position:relative}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar{transform:translate3d(0,60px,0);transition:all .3s ease-in-out;background:transparent}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#333}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vdt-timecode:not(.vjs-menu-item-text),.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled).on-dark .vjs-control-bar .vjs-button:not(.vjs-menu-item-text){color:#efefef}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-progress-holder{margin:0 auto}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-menu{bottom:35px}.video-js.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) .vjs-poster{height:auto}.video-js .vjs-picture-in-picture-control,.video-js .vjs-play-progress .vjs-time-tooltip,.video-js .vjs-play-progress:before,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltips,.video-js .vjs-remaining-time{display:none}