video-react-new-new 0.18.0

package/styles/scss/components/big-play-button.scss

@@ -0,0 +1,44 @@
+.video-react-new {
+  .video-react-new-big-play-button {
+    font-size: 3em;
+    line-height: $video-react-new-big-play-button-height;
+    height: $video-react-new-big-play-button-height;
+    width: $video-react-new-big-play-button-width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
+    display: block;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 0;
+    cursor: pointer;
+    opacity: 1;
+    border: 0.06666em solid $video-react-new-primary-foreground-color;
+    // Need a slightly gray bg so it can be seen on black backgrounds
+    @include background-color-with-alpha($video-react-new-primary-background-color, $video-react-new-primary-background-transparency);
+    @include border-radius(0.3em);
+    @include transition(all 0.4s);
+    @extend .video-react-new-icon;
+    @extend .video-react-new-icon-play-arrow;
+    // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
+    // other buttons for the icon.
+    &:before {
+      @extend %video-react-new-icon-default;
+    }
+    // Allow people that hate their poster image to center the big play button.
+    &.video-react-new-big-play-button-center {
+      top: 50%;
+      left: 50%;
+      margin-top: -calc($video-react-new-big-play-button-height / 2);
+      margin-left: -calc($video-react-new-big-play-button-width / 2);
+    }
+    &.big-play-button-hide {
+      display: none;
+    }
+  }
+  &:hover .video-react-new-big-play-button,
+  .video-react-new-big-play-button:focus {
+    outline: 0;
+    border-color: $video-react-new-primary-foreground-color;
+    @include background-color-with-alpha($video-react-new-secondary-background-color, $video-react-new-secondary-background-transparency);
+    @include transition(all 0s);
+  }
+}

package/styles/scss/components/button.scss

@@ -0,0 +1,18 @@
+.video-react-new .video-react-new-button {
+  background: none;
+  border: none;
+  color: inherit;
+  display: inline-block;
+  cursor: pointer;
+
+  overflow: visible; // IE8
+  font-size: inherit; // IE in general. WTF.
+  line-height: inherit;
+  text-transform: none;
+  text-decoration: none;
+  transition: none;
+
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+}

package/styles/scss/components/closed-caption.scss

@@ -0,0 +1,13 @@
+.video-react-new {
+  .video-react-new-closed-caption {
+    cursor: pointer;
+    @include flex(none);
+    @extend .video-react-new-icon;
+    @extend .video-react-new-icon-closed-caption;
+  }
+
+  video::-webkit-media-text-track-container {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+}

package/styles/scss/components/control-bar.scss

@@ -0,0 +1,51 @@
+.video-react-new .video-react-new-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3.0em;
+
+  @include background-color-with-alpha($video-react-new-primary-background-color, $video-react-new-primary-background-transparency);
+}
+
+// Video has started playing
+.video-react-new-has-started .video-react-new-control-bar {
+  @include display-flex;
+  visibility: visible;
+  opacity: 1;
+
+  $trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
+  @include transition($trans);
+}
+
+// Video has started playing AND user is inactive
+.video-react-new-has-started.video-react-new-user-inactive.video-react-new-playing {
+  .video-react-new-control-bar.video-react-new-control-bar-auto-hide {
+    // Remain visible for screen reader and keyboard users
+    visibility: visible;
+    opacity: 0;
+
+    $trans: visibility 1.0s, opacity 1.0s;
+    @include transition($trans);
+  }
+}
+
+.video-react-new-controls-disabled .video-react-new-control-bar,
+.video-react-new-using-native-controls .video-react-new-control-bar,
+.video-react-new-error .video-react-new-control-bar {
+  // !important is ok in this context.
+  display: none !important;
+}
+
+// Don't hide the control bar if it's audio
+.video-react-new-audio.video-react-new-has-started.video-react-new-user-inactive.video-react-new-playing .video-react-new-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+// IE 8 + 9 Support
+.video-react-new-has-started.video-react-new-no-flex .video-react-new-control-bar {
+  display: table;
+}

package/styles/scss/components/control.scss

@@ -0,0 +1,42 @@
+// control might be better named button now.
+// It's used on both real buttons (play button)
+// and div buttons (menu buttons)
+.video-react-new .video-react-new-control {
+  outline: none;
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 4em;
+  @include flex(none);
+
+  &:before {
+    font-size: 1.8em;
+    line-height: 1.67;
+
+    @extend %video-react-new-icon-default;
+  }
+
+  // Replacement for focus outline
+  &:focus:before,
+  &:hover:before,
+  &:focus {
+    text-shadow: 0em 0em 1em $video-react-new-primary-foreground-color,
+      0em 0em 0.5em $video-react-new-primary-foreground-color;
+  }
+
+}
+
+
+
+// Hide control text visually, but have it available for screenreaders
+.video-react-new .video-react-new-control-text {
+  @include hide-visually;
+}
+
+// IE 8 + 9 Support
+.video-react-new-no-flex .video-react-new-control {
+  display: table-cell;
+  vertical-align: middle;
+}

package/styles/scss/components/fullscreen.scss

@@ -0,0 +1,13 @@
+.video-react-new .video-react-new-fullscreen-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+.video-react-new.video-react-new-fullscreen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+}

package/styles/scss/components/loading-spinner.scss

@@ -0,0 +1,105 @@
+// loading-spinner css style
+.video-react-new .video-react-new-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  opacity: 0.85;
+
+  // Need to fix centered page layouts
+  text-align: left;
+
+  border: 6px solid rgba($video-react-new-primary-background-color, $video-react-new-primary-background-transparency);
+  // border: 6px solid rgba(43, 51, 63, 0.5);
+
+  box-sizing: border-box;
+  background-clip: padding-box;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: -6px;
+    box-sizing: inherit;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    opacity: 1;
+    border: inherit;
+    border-color: transparent;
+    border-top-color: white;
+    -webkit-animation: video-react-new-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-new-spinner-fade 1.1s linear infinite;
+    animation: video-react-new-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-new-spinner-fade 1.1s linear infinite;
+  }
+}
+
+.video-react-new-seeking .video-react-new-loading-spinner,
+.video-react-new-waiting .video-react-new-loading-spinner {
+  display: block;
+}
+
+.video-react-new-seeking .video-react-new-loading-spinner:before,
+.video-react-new-waiting .video-react-new-loading-spinner:before {
+  border-top-color: rgb(255,255,255);
+}
+
+.video-react-new-seeking .video-react-new-loading-spinner:after,
+.video-react-new-waiting .video-react-new-loading-spinner:after {
+  border-top-color: rgb(255,255,255);
+  -webkit-animation-delay: 0.44s;
+  animation-delay: 0.44s;
+}
+
+@keyframes video-react-new-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes video-react-new-spinner-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes video-react-new-spinner-fade {
+  0% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  20% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  100% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+}
+
+@-webkit-keyframes video-react-new-spinner-fade {
+  0% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  20% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+  100% {
+    border-top-color: $video-react-new-secondary-background-color;
+  }
+}
+
+

package/styles/scss/components/menu/menu-inline.scss

@@ -0,0 +1,67 @@
+.video-react-new {
+  .video-react-new-menu-button-inline {
+    @include transition(all 0.4s);
+    overflow: hidden;
+
+    &:before {
+      // Icon pseudoelement has a different base font size (1.8em), so we need to
+      // account for that in the width. 4em (standard button width) divided by 1.8
+      // to get the same button width as normal.
+      width: 2.222222222em;
+    }
+
+    &:hover,
+    &:focus,
+    &.video-react-new-slider-active {
+      width: 12em;
+
+      .video-react-new-menu {
+        display: block;
+        opacity: 1;
+      }
+
+    }
+
+    &.video-react-new-slider-active {
+      @include transition(none);
+    }
+
+    .video-react-new-menu {
+      opacity: 0;
+      height: 100%;
+      width: auto;
+
+      position: absolute;
+      left: 4em;
+      top: 0;
+
+      padding: 0;
+      margin: 0;
+
+      @include transition(all 0.4s);
+    }
+
+    .video-react-new-menu-content {
+      width: auto;
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+
+.video-react-new-no-flex .video-react-new-menu-button-inline {
+  .video-react-new-menu {
+    display: block;
+    opacity: 1;
+    position: relative;
+    width: auto;
+  }
+
+  &:hover,
+  &:focus,
+  &.video-react-new-slider-active {
+    width: auto;
+  }
+}

package/styles/scss/components/menu/menu-popup.scss

@@ -0,0 +1,27 @@
+.video-react-new {
+  .video-react-new-menu-button-popup .video-react-new-menu {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    width: 10em;
+    left: -3em; // (Width of video-react-new-menu - width of button) / 2
+    height: 0em;
+    margin-bottom: 1.5em;
+    border-top-color: rgba($video-react-new-primary-background-color, $video-react-new-primary-background-transparency); // Same as ul background
+
+    .video-react-new-menu-content {
+      @include background-color-with-alpha($video-react-new-primary-background-color, $video-react-new-primary-background-transparency);
+
+      position: absolute;
+      width: 100%;
+      bottom: 1.5em; // Same bottom as video-react-new-menu border-top
+      max-height: 15em;
+    }
+  }
+
+}
+
+// .video-react-new-workinghover .video-react-new-menu-button-popup:hover .video-react-new-menu,
+.video-react-new-menu-button-popup .video-react-new-menu.video-react-new-lock-showing {
+  display: block;
+}

package/styles/scss/components/menu/menu.scss

@@ -0,0 +1,59 @@
+.video-react-new-menu-button {
+  cursor: pointer;
+
+  // Change cursor back to default if the menu button is disabled
+  &.video-react-new-disabled {
+    cursor: default;
+  }
+}
+
+
+.video-react-new-menu {
+  .video-react-new-menu-content {
+    display: block;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+    font-family: $video-react-new-text-font-family;
+  }
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0.2em 0;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    text-align: center;
+
+    &:focus,
+    &:hover {
+      outline: 0;
+      @include background-color-with-alpha($video-react-new-secondary-background-color, $video-react-new-secondary-background-transparency);
+    }
+
+
+    &.video-react-new-selected,
+    &.video-react-new-selected:focus,
+    &.video-react-new-selected:hover {
+      background-color: $video-react-new-primary-foreground-color;
+      color: $video-react-new-primary-background-color;
+    }
+
+    &.vjs-menu-title {
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 1em;
+      line-height: 2em;
+      padding: 0;
+      margin: 0 0 0.3em 0;
+      font-weight: bold;
+      cursor: default;
+    }
+
+  }
+}
+
+// prevent menus from opening while scrubbing (FF, IE)
+.video-react-new-scrubbing .vjs-menu-button:hover .video-react-new-menu {
+  display: none;
+}

package/styles/scss/components/play-pause.scss

@@ -0,0 +1,11 @@
+.video-react-new .video-react-new-play-control {
+  cursor: pointer;
+  @include flex(none);
+  @extend .video-react-new-icon;
+  @extend .video-react-new-icon-play-arrow;
+
+  &.video-react-new-playing {
+    @extend .video-react-new-icon-pause;
+  }
+}
+

package/styles/scss/components/playback-rate.scss

@@ -0,0 +1,13 @@
+.video-react-new {
+  .video-react-new-playback-rate {
+    .video-react-new-playback-rate-value {
+      line-height: 3em;
+      text-align: center;
+    }
+
+    .video-react-new-menu {
+      width: 4em;
+      left: 0em;
+    }
+  }
+}

package/styles/scss/components/poster.scss

@@ -0,0 +1,27 @@
+.video-react-new .video-react-new-poster {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  background-color: #000000;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+
+  img {
+    display: block;
+    vertical-align: middle;
+    margin: 0 auto;
+    max-height: 100%;
+    padding: 0;
+    width: 100%;
+  }
+
+}

package/styles/scss/components/progress.scss

@@ -0,0 +1,156 @@
+
+.video-react-new .video-react-new-progress-control {
+  @include flex(auto);
+  @include display-flex(center);
+  min-width: 4em;
+}
+
+.video-react-new-live .video-react-new-progress-control {
+  display: none;
+}
+
+// Box containing play and load progresses. Also acts as seek scrubber.
+.video-react-new .video-react-new-progress-holder {
+  @include flex(auto);
+  @include transition(all 0.2s);
+  height: 0.3em;
+}
+
+// We need an increased hit area on hover
+.video-react-new .video-react-new-progress-control:hover .video-react-new-progress-holder {
+  font-size: 1.666666666666666666em;
+}
+
+/* If we let the font size grow as much as everything else, the current time tooltip ends up
+ ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
+ to avoid a weird hitch when you roll off the hover. */
+
+// Also show the current time tooltip
+.video-react-new .video-react-new-progress-control:hover .video-react-new-time-tooltip,
+.video-react-new .video-react-new-progress-control:hover .video-react-new-mouse-display:after,
+.video-react-new .video-react-new-progress-control:hover .video-react-new-play-progress:after {
+  visibility: visible;
+  font-size: 0.6em;
+}
+
+// Progress Bars
+.video-react-new .video-react-new-progress-holder .video-react-new-play-progress,
+.video-react-new .video-react-new-progress-holder .video-react-new-load-progress,
+.video-react-new .video-react-new-progress-holder .video-react-new-tooltip-progress-bar,
+.video-react-new .video-react-new-progress-holder .video-react-new-load-progress div {
+  position: absolute;
+  display: block;
+  height: 0.3em;
+  margin: 0;
+  padding: 0;
+  // updated by javascript during playback
+  width: 0;
+  // Needed for IE6
+  left: 0;
+  top: 0;
+}
+
+.video-react-new .video-react-new-play-progress {
+  background-color: $video-react-new-primary-foreground-color;
+  @extend .video-react-new-icon;
+  @extend .video-react-new-icon-circle;
+
+  // Progress handle
+  &:before {
+    position: absolute;
+    top: -0.333333333333333em;
+    right: -0.5em;
+    font-size: 0.9em;
+  }
+}
+
+// Current Time "tooltip"
+// By default this is hidden and only shown when hovering over the progress control
+.video-react-new .video-react-new-time-tooltip,
+.video-react-new .video-react-new-mouse-display:after,
+.video-react-new .video-react-new-play-progress:after {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  right: -1.9em;
+  font-size: 0.9em;
+  color: #000;
+  content: attr(data-current-time);
+  padding: 6px 8px 8px 8px;
+  @include background-color-with-alpha(#fff, 0.8);
+  @include border-radius(0.3em);
+}
+
+.video-react-new .video-react-new-time-tooltip,
+.video-react-new .video-react-new-play-progress:before,
+.video-react-new .video-react-new-play-progress:after {
+  z-index: 1;
+}
+
+.video-react-new .video-react-new-progress-control .video-react-new-keep-tooltips-inside:after {
+  display: none;
+}
+
+.video-react-new .video-react-new-load-progress {
+  // For IE8 we'll lighten the color
+  background: lighten($video-react-new-secondary-background-color, 25%);
+  // Otherwise we'll rely on stacked opacities
+  background: rgba($video-react-new-secondary-background-color, $video-react-new-secondary-background-transparency);
+}
+
+// there are child elements of the load progress bar that represent the
+// specific time ranges that have been buffered
+.video-react-new .video-react-new-load-progress div {
+  // For IE8 we'll lighten the color
+  background: lighten($video-react-new-secondary-background-color, 50%);
+  // Otherwise we'll rely on stacked opacities
+  background: rgba($video-react-new-secondary-background-color, 0.75);
+}
+
+.video-react-new.video-react-new-no-flex .video-react-new-progress-control {
+  width: auto;
+}
+
+.video-react-new .video-react-new-time-tooltip {
+  display: inline-block;
+  height: 2.4em;
+  position: relative;
+  float: right;
+  right: -1.9em;
+}
+
+.video-react-new .video-react-new-tooltip-progress-bar {
+  visibility: hidden;
+}
+
+.video-react-new .video-react-new-progress-control .video-react-new-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+.video-react-new-no-flex .video-react-new-progress-control .video-react-new-mouse-display {
+  z-index: 0;
+}
+.video-react-new .video-react-new-progress-control:hover .video-react-new-mouse-display {
+  display: block;
+}
+.video-react-new.video-react-new-user-inactive .video-react-new-progress-control .video-react-new-mouse-display,
+.video-react-new.video-react-new-user-inactive .video-react-new-progress-control .video-react-new-mouse-display:after {
+  visibility: hidden;
+  opacity: 0;
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+.video-react-new.video-react-new-user-inactive.video-react-new-no-flex .video-react-new-progress-control .video-react-new-mouse-display,
+.video-react-new.video-react-new-user-inactive.video-react-new-no-flex .video-react-new-progress-control .video-react-new-mouse-display:after {
+  display: none;
+}
+.video-react-new .video-react-new-mouse-display .video-react-new-time-tooltip,
+.video-react-new .video-react-new-progress-control .video-react-new-mouse-display:after {
+  color: #fff;
+  @include background-color-with-alpha(#000, 0.8);
+}

package/styles/scss/components/slider.scss

@@ -0,0 +1,13 @@
+.video-react-new .video-react-new-slider {
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0.45em 0 0.45em;
+
+  @include background-color-with-alpha($video-react-new-secondary-background-color, $video-react-new-secondary-background-transparency);
+
+  &:focus {
+    @include box-shadow(0 0 1em $video-react-new-primary-foreground-color);
+  }
+}

package/styles/scss/components/time.scss

@@ -0,0 +1,18 @@
+.video-react-new {
+
+  .video-react-new-time-control {
+    @include flex(none);
+    font-size: 1em;
+    line-height: 3em;
+    min-width: 2em;
+    width: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .video-react-new-time-divider {
+    line-height: 3em;
+    min-width: initial;
+    padding: 0;
+  }
+}