cloudinary-video-player 1.6.2-edge.13

package/src/assets/styles/icons.scss

@@ -0,0 +1,257 @@
+@font-face {
+  font-family: VideoJS;
+  src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
+  font-weight: normal;
+  font-style: normal; }
+
+.vjs-icon-play {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-play:before {
+    content: "\f101"; }
+
+.vjs-icon-play-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-play-circle:before {
+    content: "\f102"; }
+
+.vjs-icon-pause {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-pause:before {
+    content: "\f103"; }
+
+.vjs-icon-volume-mute {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-volume-mute:before {
+    content: "\f104"; }
+
+.vjs-icon-volume-low {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-volume-low:before {
+    content: "\f105"; }
+
+.vjs-icon-volume-mid {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-volume-mid:before {
+    content: "\f106"; }
+
+.vjs-icon-volume-high {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-volume-high:before {
+    content: "\f107"; }
+
+.vjs-icon-fullscreen-enter {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-fullscreen-enter:before {
+    content: "\f108"; }
+
+.vjs-icon-fullscreen-exit {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-fullscreen-exit:before {
+    content: "\f109"; }
+
+.vjs-icon-square {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-square:before {
+    content: "\f10a"; }
+
+.vjs-icon-spinner {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-spinner:before {
+    content: "\f10b"; }
+
+.vjs-icon-subtitles {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-subtitles:before {
+    content: "\f10c"; }
+
+.vjs-icon-captions {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-captions:before {
+    content: "\f10d"; }
+
+.vjs-icon-chapters {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-chapters:before {
+    content: "\f10e"; }
+
+.vjs-icon-share {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-share:before {
+    content: "\f10f"; }
+
+.vjs-icon-cog {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-cog:before {
+    content: "\f110"; }
+
+.vjs-icon-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-circle:before {
+    content: "\f111"; }
+
+.vjs-icon-circle-outline {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-circle-outline:before {
+    content: "\f112"; }
+
+.vjs-icon-circle-inner-circle {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-circle-inner-circle:before {
+    content: "\f113"; }
+
+.vjs-icon-hd {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-hd:before {
+    content: "\f114"; }
+
+.vjs-icon-cancel {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-cancel:before {
+    content: "\f115"; }
+
+.vjs-icon-replay {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-replay:before {
+    content: "\f116"; }
+
+.vjs-icon-play-previous {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-play-previous:before {
+    content: "\f117"; }
+
+.vjs-icon-play-next {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-play-next:before {
+    content: "\f118"; }
+
+.vjs-icon-close {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-close:before {
+    content: "\f119"; }
+
+.vjs-icon-skip-10-min {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-skip-10-min:before {
+    content: "\f11a"; }
+
+.vjs-icon-skip-10-plus {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-skip-10-plus:before {
+    content: "\f11b"; }
+
+.vjs-icon-facebook {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-facebook:before {
+    content: "\f11c"; }
+
+.vjs-icon-gplus {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-gplus:before {
+    content: "\f11d"; }
+
+.vjs-icon-linkedin {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-linkedin:before {
+    content: "\f11e"; }
+
+.vjs-icon-twitter {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-twitter:before {
+    content: "\f11f"; }
+
+.vjs-icon-tumblr {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-tumblr:before {
+    content: "\f120"; }
+
+.vjs-icon-pinterest {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-pinterest:before {
+    content: "\f121"; }
+
+.vjs-icon-audio-description {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-audio-description:before {
+    content: "\f122"; }
+
+.vjs-icon-audio {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-audio:before {
+    content: "\f123"; }
+
+.vjs-icon-cart {
+  font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal; }
+  .vjs-icon-cart:before {
+    content: "\f124"; }

package/src/assets/styles/main.scss

@@ -0,0 +1,324 @@
+// Dependencies
+$icon-font-path: '../fonts' !default;
+
+// Video.js overrides
+@import 'variables';
+
+// Import Video.js style
+@import '~video.root.js/dist/video-js.min.css';
+@import 'mixins/skin';
+@import 'icons';
+@import 'ads-label';
+@import 'videojs-ima';
+@import 'components/interaction-areas.scss';
+@import 'components/themedButton';
+
+
+// control bar control size
+.video-js .vjs-control:before {
+  font-size: 2.0em;
+  line-height: 1.5em;
+}
+.video-js .vjs-control {
+  width: 3em;
+}
+
+
+.video-js {
+  overflow: hidden;
+}
+
+.video-js .vjs-control,
+.vjs-icon-close,
+.vjs-volume-bar{
+  z-index: 1;
+}
+
+// focus and hover states
+.video-js .vjs-control,
+.vjs-big-play-button,
+.vjs-icon-close,
+.vjs-volume-bar {
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    opacity: 0.95;
+  }
+}
+
+.vjs-cloudinary-button:focus {
+  opacity: 0.8;
+}
+
+.vjs-big-play-button:focus {
+  .cld-video-player.cld-video-player-skin-dark & {
+    background-color: rgba(40, 40, 40, 0.8);
+  }
+
+  .cld-video-player.cld-video-player-skin-light & {
+    background-color: rgba(223, 234, 252, 0.8);
+  }
+}
+
+// light skin focus glow effect
+.cld-video-player-skin-light {
+  .vjs-control:focus {
+    text-shadow: 0 0 1em #0E2F5A;
+  }
+}
+
+.cld-video-player {
+  font-family: $text-font-family;
+
+
+  &:focus {
+    outline: none;
+  }
+
+  &.cld-fluid {
+    width: 100%;
+    max-width: 100%;
+
+    .vjs-poster {
+      // Work-around for poster having slightly wrong proportions in fluid players.
+      background: #000;
+      background-size: cover;
+    }
+  }
+
+  // The base font size controls the size of everything, not just text.
+  // All dimensions use em-based sizes so that the scale along with the font size.
+  // Try increasing it to 15px and see what happens.
+  font-size: 12px;
+  font-weight: 300;
+
+  .vjs-time-control {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .vjs-time-divider {
+    min-width: 1em;
+    display: block;
+  }
+
+  .vjs-current-time {
+    display: block;
+  }
+
+  .vjs-remaining-time {
+    display: none;
+  }
+
+  .vjs-duration {
+    display: block;
+  }
+
+  .vjs-big-play-button {
+
+    // The font size is what makes the big play button...big.
+    // All width/height values use ems, which are a multiple of the font size.
+    // If the .video-js font-size is 10px, then 3em equals 30px.*/
+    font-size: 5em;
+    width: 1.5em;
+    height: auto;
+    border: 0;
+    border-radius: 50%;
+
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      width: 100%;
+      padding-bottom: 100%;
+    }
+
+    .vjs-icon-placeholder {
+      display: block;
+      position: absolute;
+      // position and clip the play button triangle, responsively
+      top: 30%;
+      left: 40%;
+      height: 40%;
+      width: 30%;
+      overflow: hidden;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 100%;
+
+        display: block;
+        width: 0;
+        height: 0;
+
+        // currentColor sets the triangle color to the text-color.
+        // text-color is defined by the active color skin.
+        border-left: 300px solid currentColor;
+        border-top: 200px solid transparent;
+        border-bottom: 200px solid transparent;
+        margin-left: -300px;
+        margin-top:-200px;
+      }
+    }
+  }
+
+  // Fluid big-play-button
+  &.cld-fluid .vjs-big-play-button {
+    max-width: 15%;
+  }
+
+  // Init-only big-play-button
+  &.vjs-big-play-button-init-only.vjs-has-started .vjs-big-play-button {
+    display: none;
+  }
+
+  &.vjs-paused .vjs-big-play-button,
+  &.vjs-paused.vjs-has-started .vjs-big-play-button {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.vjs-error .vjs-error-display {
+    background: #90A0B3;
+
+    &:before {
+      display: none;
+    }
+
+    .vjs-modal-dialog-content {
+        font-size: 20px;
+        font-weight: 500;
+        text-align: left;
+        padding: 0 10%;
+        display: flex;
+        align-items: center;
+
+      &:before {
+        content: "";
+        width: 34px;
+        height: 34px;
+        margin-right: 10px;
+        background: url("../icons/info-circle.svg");
+        transform: translateY(-1px);
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  &.vjs-controls-disabled .vjs-big-play-button,
+  &.vjs-has-started .vjs-big-play-button,
+  &.vjs-using-native-controls .vjs-big-play-button,
+  &.vjs-error .vjs-big-play-button {
+    transition: visibility 0.2s, opacity 0.2s;
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .vjs-control-bar {
+    z-index: 2;
+
+    .vjs-volume-panel {
+      margin-right: 1em;
+    }
+
+   .vjs-menu-button-inline:hover,
+   .vjs-menu-button-inline:focus,
+   .vjs-menu-button-inline.vjs-slider-active,
+   .vjs-no-flex .vjs-menu-button-inline {
+      // This width is currently specific to the inline volume bar.
+      width: 10em;
+    }
+
+    .vjs-menu-button-inline:before {
+      width: 1.6em;
+    }
+
+    .vjs-menu-button-inline .vjs-menu {
+      left: 3em;
+    }
+
+    .vjs-progress-control {
+      position: absolute;
+      left: 0px;
+      width: 100%;
+      background-color: inherit;
+      height: 1.0em;
+      padding: 0.7em 0.2em 0 0.2em;
+      bottom: 3.0em;
+    }
+
+    .vjs-progress-holder {
+      height: 0.25em;
+    }
+    .vjs-progress-control:hover {
+      .vjs-progress-holder {
+        font-size: 1.2em;
+        transition: none;
+      }
+      .vjs-time-tooltip {
+        font-size: 0.8em;
+      }
+    }
+
+    .vjs-play-progress {
+      &::before {
+        top: -0.25em;
+      }
+    }
+
+
+    .vjs-progress-control-events-blocker {
+      background-color: transparent;
+      @extend .vjs-progress-control
+    }
+  }
+
+  .vjs-subs-caps-button {
+    .vjs-texttrack-settings {
+      display: none;
+    }
+    .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+      vertical-align: top;
+      display: inline-block;
+      margin-bottom: -0.3em;
+    }
+  }
+
+  .vjs-menu {
+    .vjs-menu-content {
+      min-width: 10em;
+      width: auto;
+      overflow: visible;
+      padding: 0.2em 0;
+    }
+    .vjs-menu-item {
+      text-align: left;
+      white-space: nowrap;
+      text-transform: capitalize;
+      font-size: 1em;
+      padding: 0 1em;
+      line-height: 2em;
+      &.vjs-selected {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .vjs-spacer {
+    flex: auto;
+  }
+
+  .vjs-modal-dialog {
+    background: none;
+  }
+}

package/src/assets/styles/mixins/aspect-ratio.scss

@@ -0,0 +1,16 @@
+@mixin aspect-ratio($width, $height) {
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+  }
+
+  > .aspect-ratio-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

package/src/assets/styles/mixins/disable-transition.scss

@@ -0,0 +1,3 @@
+  &.disable-transition {
+    transition: visibility 0s;
+  }

package/src/assets/styles/mixins/mixins.scss

@@ -0,0 +1,5 @@
+@mixin ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/assets/styles/mixins/skin.scss

@@ -0,0 +1,64 @@
+.cld-video-player {
+
+  .vjs-time-tooltip,
+  .vjs-mouse-display:after,
+  .vjs-play-progress:after {
+    font-weight: 300;
+    padding: 0.4em 0.6em;
+    top: -2.6em;
+  }
+
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-item:active:after,
+  .vjs-recommendations-overlay .vjs-recommendations-overlay-item:hover:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item {
+    text-align: left;
+  }
+
+  &.vjs-ad-playing .vjs-play-control.vjs-paused,
+  &.vjs-ad-playing .vjs-volume-level {
+    background-color: transparent !important;
+  }
+
+  &.vjs-ad-playing .vjs-play-progress:before {
+    display: none;
+  }
+
+}
+
+.cld-video-player.cld-video-player-skin-light {
+
+  .video-js button:hover,
+  .vjs-volume-menu-button:hover {
+    opacity: 0.9;
+  }
+
+  .vjs-title-bar .vjs-title-bar-title:not(:empty) +
+  .vjs-title-bar-subtitle:not(:empty):before {
+    content: "\2022";
+    padding: 0 0.45em;
+    font-size: 1.4em;
+    font-weight: 500;
+  }
+
+  .vjs-title-bar {
+    flex-direction: row;
+    justify-content: left;
+    height: 3.6em;
+
+    > div {
+      width: auto;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+}

package/src/assets/styles/variables.scss

@@ -0,0 +1,2 @@
+$text-font-family: Arial, Helvetica, sans-serif;
+$center-big-play-button: true;