@vidispine/vdt-videojs 23.2.0-pre.1 → 23.2.0

package/src/player.scss

@@ -1,667 +0,0 @@
-@import '~video.js/dist/video-js.css';
-
-$red: #f00;
-$dark-translucent: rgba(28, 28, 28, 0.9);
-$dark-gray: #333;
-$light-translucent: rgba(255, 255, 255, 0.2);
-$large-icon-size: 90px;
-$controls-height: 50px;
-$mid-opacity: 0.6;
-$mid-radius: 7px;
-
-//remove safari's and other webkit browser's blue glow on tab selection
-textarea,
-select,
-input,
-button,
-video {
-  outline: none;
-}
-button:focus,
-.video-js .vjs-menu-item {
-  outline: initial;
-}
-
-.video-js {
-  max-width: 100%;
-  overflow: hidden;
-
-  &.init {
-    height: 0px !important;
-    display: none;
-  }
-
-  video {
-    transform: translate3d(0px, 0px, 0px);
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    display: block;
-  }
-
-  .vjs-poster {
-    background-size: cover;
-  }
-
-  .vjs-control-bar {
-    height: $controls-height;
-    padding-top: 6px;
-    display: flex;
-    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
-    background: -moz-linear-gradient(
-      top,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 15%,
-      rgba(0, 0, 0, 0.3) 100%
-    ); /* FF3.6-15 */
-    background: -webkit-linear-gradient(
-      top,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 15%,
-      rgba(0, 0, 0, 0.3) 100%
-    ); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 15%,
-      rgba(0, 0, 0, 0.3) 100%
-    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 ); /* IE6-9 */
-
-    transform: translate3d(0px, 0px, 0px);
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    z-index: 2;
-
-    .vdt-seekbar-wrapper {
-      top: 0px;
-      left: 0px;
-      height: 10px;
-      width: 100%;
-      position: absolute;
-      margin: 0 auto;
-    }
-  }
-
-  .vjs-big-play-button {
-    font-size: $large-icon-size;
-    border: 0px;
-    background-color: transparent;
-    text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.4);
-    z-index: 2;
-
-    .vjs-icon-placeholder:before {
-      padding-top: 5px; // play  button offset correction
-    }
-  }
-
-  &:hover {
-    .vjs-big-play-button,
-    .vjs-big-play-button:focus {
-      background-color: transparent;
-    }
-  }
-
-  //control bar
-  .vjs-progress-control {
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 10px;
-
-    .vjs-load-progress {
-      background: $light-translucent;
-    }
-
-    &:hover .vjs-play-progress .vjs-time-tooltip,
-    .vjs-play-progress .vjs-time-tooltip {
-      display: none;
-    }
-  }
-
-  // push everything after time display to the right side
-  .vjs-time-control {
-    &.duration,
-    &.vjs-duration {
-      margin-right: auto;
-    }
-  }
-
-  .vjs-subs-caps-button,
-  .vdt-screenshot-button {
-    .vjs-icon-placeholder {
-      opacity: 0.6;
-    }
-  }
-
-  &.has-vdt-menu .vjs-subs-caps-button {
-    display: none;
-  }
-
-  &.subtitles-active {
-    .vjs-subs-caps-button .vjs-icon-placeholder {
-      opacity: 1;
-    }
-  }
-
-  .vjs-control {
-    font-size: 14px;
-  }
-
-  .vjs-play-progress.vjs-slider-bar {
-    background-color: $red;
-  }
-
-  .vjs-current-time,
-  .vjs-time-control,
-  .vjs-no-flex .vjs-current-time {
-    display: block;
-  }
-
-  .vjs-time-control {
-    font-size: 14px;
-    padding: 0px;
-    min-width: 14px;
-    text-align: center;
-  }
-
-  .vjs-volume-panel {
-    // margin-right: 20px;
-    width: 3em;
-    .vjs-mute-control {
-      width: 3em;
-    }
-  }
-
-  .vjs-menu-button-popup .vjs-menu {
-    bottom: 20px;
-    .vjs-menu-content {
-      background-color: $dark-translucent;
-      border-radius: $mid-radius;
-    }
-
-    li.vjs-menu-item:focus:not(.vjs-selected) {
-      background-color: transparent;
-    }
-
-    li.vjs-menu-item:hover:not(.vjs-selected) {
-      background-color: $light-translucent;
-    }
-
-    .vjs-menu-item-text {
-      color: white;
-    }
-
-    .vjs-menu-item.vjs-selected .vjs-menu-item-text {
-      color: #333;
-    }
-  }
-
-  //our special osd (hosts custom play button and other features in the future, has css vertical centering)
-  .vdt-player-osd {
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    z-index: 4;
-    -webkit-transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 0.5);
-    transition: 200ms ease-out all;
-    // animation-fill-mode: backwards;
-
-    &.active {
-      opacity: 1;
-      -webkit-transform: scale3d(1, 1, 1);
-      transform: scale3d(1, 1, 1);
-    }
-
-    table {
-      width: 100%;
-      height: 100%;
-      td {
-        vertical-align: middle;
-        text-align: center;
-        .osd-feedback-icon {
-          &:before {
-            font-family: VideoJS;
-            content: '\f101';
-            font-size: 50px;
-            padding: 15px;
-            display: inline-block;
-            height: 80px; //20 + 20 + 60
-            width: 80px;
-            text-align: center;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 100%;
-          }
-        }
-        .pause:before {
-          content: '\f103';
-        }
-
-        .volchange.high:before {
-          content: '\f107';
-        }
-
-        .volchange.mid:before {
-          content: '\f106';
-        }
-
-        .volchange.low:before {
-          content: '\f105';
-        }
-
-        .mute:before,
-        .volchange.null:before {
-          content: '\f104';
-        }
-
-        .unmute:before {
-          content: '\f107';
-        }
-
-        .forward-jump:before,
-        .backward-jump:before {
-          content: '\f101\f101';
-          letter-spacing: -38px;
-          padding-left: 0px;
-          padding-right: 34px;
-        }
-
-        .backward-jump:before {
-          -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
-        }
-      }
-    }
-  }
-
-  //spinner / loader customizations
-  @keyframes vjs-spinner-fade {
-    0% {
-      border-top-color: rgba(255, 255, 255, 0.6);
-    }
-    35% {
-      border-top-color: white;
-    }
-    100% {
-      border-top-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  .vjs-loading-spinner {
-    &:after,
-    &:before {
-      margin: -5px;
-    }
-
-    margin: -40px 0 0 -40px;
-    opacity: 0.85;
-    border: 5px solid rgba(255, 255, 255, 0.7);
-    width: 80px;
-    height: 80px;
-    border-radius: 100px;
-    z-index: 5;
-  }
-
-  //css relating to subtitles
-  .vjs-text-track-display,
-  &.vjs-user-inactive.vjs-playing .vjs-text-track-display {
-    bottom: 0px;
-    transition: transform 300ms ease-out;
-    -webkit-transform: translate3d(0px, 0px, 0px);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    > div {
-      display: table;
-      width: 100%;
-      height: 100%;
-      margin: 0px !important;
-    }
-
-    .vjs-text-track-cue {
-      //needs !important to override video.js inline styles
-      width: 100% !important;
-      bottom: 0px !important;
-      top: initial !important;
-      left: initial !important;
-      right: initial !important;
-      font-size: 18px !important;
-      height: auto !important;
-      padding-bottom: 1.5%;
-      display: table-cell;
-
-      > div {
-        padding: 2px 4px 2px 4px;
-        line-height: 1.25;
-        border-radius: 2px;
-      }
-    }
-  }
-
-  // applies to fullscreen
-  &.vjs-fullscreen,
-  &.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;
-    }
-  }
-
-  // control bar animation
-  &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen), // prevent controls staying shown in fs
-	&div,
-	&.vjs-controls-enabled.vjs-user-active,
-	&.vjs-has-started.vjs-user-inactive.vjs-paused {
-    .vjs-control-bar {
-      opacity: 1;
-    }
-  }
-
-  &.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,
-  &:not(.controls-below-player) .vjs-control-bar {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translate3d(0px, $controls-height, 0px);
-    transition: transform 300ms ease-in-out;
-  }
-
-  &.vjs-controls-enabled.vjs-user-active:not(.controls-below-player),
-  &.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player) {
-    .vjs-control-bar {
-      transform: translate3d(0px, 0px, 0px);
-      -webkit-transform: translate3d(0px, 0px, 0px);
-    }
-
-    &:not(.vjs-controls-disabled) .vjs-text-track-display {
-      transform: translate3d(0px, -$controls-height, 0px);
-    }
-  }
-
-  //timecode
-  .vdt-timecode {
-    display: inline;
-    font-family: 'monospace', sans-serif;
-    margin-left: 20px;
-
-    input,
-    span {
-      font-size: 16px;
-    }
-
-    span {
-      text-align: center;
-      display: inline-block;
-    }
-
-    input {
-      display: inline-block;
-      width: auto;
-      border: 0px;
-      background: transparent;
-      color: inherit;
-      width: 21px;
-    }
-
-    @media all and (max-width: 640px) {
-      flex-grow: 3;
-    }
-  }
-
-  .vdt-timecode.duration {
-    // read-only duration display timecode
-    margin-left: 0px;
-    margin-right: auto;
-    span {
-      cursor: default;
-    }
-    &:before {
-      content: '/';
-      display: inline-block;
-      margin: 0px 5px;
-      font-size: 16px;
-    }
-
-    @media all and (max-width: 640px) {
-      // gets too cramped on mobile devices
-      display: none;
-    }
-  }
-
-  // buttons
-  .vdt-cinema-button,
-  .vdt-settings-menu-button,
-  .vdt-screenshot-button {
-    cursor: pointer;
-    &:after {
-      content: '\f10b';
-      font-family: VideoJS;
-      font-size: 22px;
-    }
-
-    &:active,
-    &:focus {
-      opacity: $mid-opacity;
-    }
-  }
-
-  .vdt-cinema-button:after {
-    content: '\f10a';
-  }
-
-  .vdt-settings-menu-button:after {
-    content: '\f110';
-  }
-
-  // waveform visualisation
-  .vdt-waveform-visual,
-  .vdt-help-overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    background: #888;
-    height: 100%;
-    width: 100%;
-    display: none;
-
-    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
-    background: rgb(136, 191, 232); /* Old browsers */
-    background: -moz-linear-gradient(
-      top,
-      rgba(136, 191, 232, 1) 0%,
-      rgba(113, 161, 196, 1) 100%
-    ); /* FF3.6-15 */
-    background: -webkit-linear-gradient(
-      top,
-      rgba(136, 191, 232, 1) 0%,
-      rgba(113, 161, 196, 1) 100%
-    ); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(
-      to bottom,
-      rgba(136, 191, 232, 1) 0%,
-      rgba(113, 161, 196, 1) 100%
-    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#71a1c4',GradientType=0 ); /* IE6-9 */
-
-    canvas {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  &.vjs-has-started .vdt-waveform-visual {
-    display: block;
-  }
-
-  // help overlay
-  .vdt-help-overlay {
-    // cascade unwanted css
-    font-size: 15px;
-    background: transparent;
-    z-index: 2;
-    transition: opacity 1s ease-in-out;
-    opacity: 0;
-    padding-bottom: 12px;
-    > table {
-      height: 100%;
-      margin: 0 auto;
-
-      td.vdt-help-contents {
-        table {
-          border-radius: $mid-radius;
-          max-height: 400px;
-          -webkit-backdrop-filter: blur(10px);
-          background: rgba(0, 0, 0, $mid-opacity);
-
-          td {
-            padding: 6px 6px;
-          } // inside table
-
-          td:nth-child(2),
-          td td:nth-child(4) {
-            padding: 4px 9px;
-          }
-
-          td:nth-child(2) {
-            padding-right: 32px;
-          }
-
-          td:first-child,
-          td:nth-child(3) {
-            div {
-              // key icon
-              text-align: center;
-              padding: 3px;
-              border: 1px solid white;
-              border-radius: 2px;
-              background: rgba(255, 255, 255, 0.1);
-              font-size: 13px;
-              min-width: 21px;
-            }
-          }
-
-          // a way to do padding for table sides
-          td:first-child {
-            padding-left: 16px;
-          }
-          td:last-child {
-            padding-right: 16px;
-          }
-          tr:first-child td {
-            padding-top: 16px;
-          }
-          tr:last-child td {
-            padding-bottom: 16px;
-          }
-        }
-      }
-
-      td {
-        vertical-align: middle;
-      }
-    }
-
-    &.active {
-      display: block;
-      opacity: 1;
-    }
-  }
-
-  &.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen {
-    &.vjs-user-inactive.vjs-playing .vjs-text-track-display,
-    .vjs-text-track-display {
-      bottom: $controls-height + 10px;
-    }
-  }
-
-  &.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled) {
-    overflow: visible;
-    // position: relative;
-    width: auto;
-    height: auto;
-    background-color: transparent;
-    margin-bottom: $controls-height + 20px;
-
-    video {
-      position: relative;
-    }
-
-    // .vjs-big-play-button, .vdt-help-overlay{
-    // 	transform: translateY(- $controls-height / 2);
-    // }
-
-    // .vjs-loading-spinner{
-    // 	transform: translateY(-$controls-height / 2);
-    // }
-
-    // .vjs-menu-button-popup .vjs-menu{
-    // 	bottom: 30px;
-    // }
-
-    .vjs-control-bar {
-      transform: translate3d(0px, $controls-height + 10px, 0px);
-      transition: all 300ms ease-in-out;
-      background: transparent;
-
-      .vjs-button,
-      .vdt-timecode {
-        &:not(.vjs-menu-item-text) {
-          color: #333;
-        }
-      }
-    }
-
-    // when on dark bg
-    &.on-dark .vjs-control-bar {
-      .vjs-button,
-      .vdt-timecode {
-        &:not(.vjs-menu-item-text) {
-          color: #efefef;
-        }
-      }
-    }
-
-    .vjs-progress-holder {
-      margin: 0 auto;
-    }
-
-    .vjs-menu {
-      bottom: 35px;
-    }
-
-    .vjs-poster {
-      height: initial;
-    }
-    // .vjs-poster{
-    // 	bottom: $controls-height + 10px;
-    // }
-
-    // .vdt-player-osd{
-    // 	top: initial;
-    // 	bottom: ($controls-height + 10px) / 2;
-    // }
-
-    // .vjs-text-track-display{
-    // 	bottom: $controls-height + 10px;
-    // }
-
-    // &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
-    // 	bottom: $controls-height + 10px;
-    // }
-  }
-
-  //remove these from display, best to find options that prevent inserting them in them first place
-  .vjs-play-progress:before,
-  .vjs-remaining-time,
-  .vjs-picture-in-picture-control,
-  .vjs-progress-control:hover .vjs-time-tooltips,
-  .vjs-play-progress .vjs-time-tooltip,
-  .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
-    display: none;
-  }
-}

package/src/player.usage.stories.mdx

@@ -1,62 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-<Meta title="vdt-videojs/Player/Example usage" parameters={docsParameters} />
-
-## Example Usage
-
-Here's an example how to use the Player class in a pure js way in your project:
-
-```js
-import { Player } from '@vidispine/vdt-videojs';
-
-const playerReference = new Player({
-  target: document.getElementById('player-node'), // HTML mount point
-
-  sources: [
-    { src: 'https://some.domain/video-file.mp4', type: 'video/mp4' },
-    { src: 'https://some.domain/video-file.webm', type: 'video/webm' },
-  ],
-
-  posterUrl: 'https://some.domain/poster-image.jpg', // optional
-  color: '#e84393', // optional - replaces primary color
-
-  subtitles: [
-    // optional
-    {
-      src: 'https://some.domain/video-subtitles.vvt',
-      lang: 'en',
-      label: 'English',
-    },
-    {
-      src: 'https://some.domain/video-subtitles-es.vvt',
-      lang: 'es',
-      label: 'Spanish',
-    },
-    {
-      // or use the Blob constructor with file string contents
-      src: new Blob(['WEBVTT\n\n\n00:00:00.500(...)'], 'text/plain'),
-      lang: 'dk',
-      label: 'Danish',
-    },
-  ],
-
-  timecode: false, // optional - replaces time display with SMPTE timecode
-  frameRate: 24000 / 1001, // optional - use together with timecode option
-
-  onReady: () => {
-    // optional
-    // invoke methods after player has done initializing
-  },
-
-  /*
-	optional - will add a screenshot button to player
-	control bar and invoke method callback on click with player's
-	current time in seconds as an argument (from start)
-	*/
-  onScreenshot: (currentTime) => {
-    console.log(currentTime); // -> 0.1280 (current position in s)
-  },
-});
-```