video-react-player 0.1.0

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

@@ -0,0 +1,45 @@
+.video-react-player {
+  .video-react-player-big-play-button {
+    font-size: 3em;
+    line-height: $video-react-player-big-play-button-height;
+    height: $video-react-player-big-play-button-height;
+    width: $video-react-player-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-player-primary-foreground-color;
+    // Need a slightly gray bg so it can be seen on black backgrounds
+    @include background-color-with-alpha($video-react-player-primary-background-color, $video-react-player-primary-background-transparency);
+    @include border-radius(0.3em);
+    @include transition(all 0.4s);
+    @extend .video-react-player-icon;
+    @extend .video-react-player-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-player-icon-default;
+    }
+    // Allow people that hate their poster image to center the big play button.
+    &.video-react-player-big-play-button-center {
+      top: 50%;
+      left: 50%;
+      margin-top: 0;
+      margin-left: 0;
+      transform: translate(-50%, -50%);
+    }
+    &.big-play-button-hide {
+      display: none;
+    }
+  }
+  &:hover .video-react-player-big-play-button,
+  .video-react-player-big-play-button:focus {
+    outline: 0;
+    border-color: $video-react-player-primary-foreground-color;
+    @include background-color-with-alpha($video-react-player-secondary-background-color, $video-react-player-secondary-background-transparency);
+    @include transition(all 0s);
+  }
+}

package/styles/scss/components/button.scss

@@ -0,0 +1,18 @@
+.video-react-player .video-react-player-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-player {
+  .video-react-player-closed-caption {
+    cursor: pointer;
+    @include flex(none);
+    @extend .video-react-player-icon;
+    @extend .video-react-player-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-player .video-react-player-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3.0em;
+
+  @include background-color-with-alpha($video-react-player-primary-background-color, $video-react-player-primary-background-transparency);
+}
+
+// Video has started playing
+.video-react-player-has-started .video-react-player-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-player-has-started.video-react-player-user-inactive.video-react-player-playing {
+  .video-react-player-control-bar.video-react-player-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-player-controls-disabled .video-react-player-control-bar,
+.video-react-player-using-native-controls .video-react-player-control-bar,
+.video-react-player-error .video-react-player-control-bar {
+  // !important is ok in this context.
+  display: none !important;
+}
+
+// Don't hide the control bar if it's audio
+.video-react-player-audio.video-react-player-has-started.video-react-player-user-inactive.video-react-player-playing .video-react-player-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+// IE 8 + 9 Support
+.video-react-player-has-started.video-react-player-no-flex .video-react-player-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-player .video-react-player-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-player-icon-default;
+  }
+
+  // Replacement for focus outline
+  &:focus:before,
+  &:hover:before,
+  &:focus {
+    text-shadow: 0em 0em 1em $video-react-player-primary-foreground-color,
+      0em 0em 0.5em $video-react-player-primary-foreground-color;
+  }
+
+}
+
+
+
+// Hide control text visually, but have it available for screenreaders
+.video-react-player .video-react-player-control-text {
+  @include hide-visually;
+}
+
+// IE 8 + 9 Support
+.video-react-player-no-flex .video-react-player-control {
+  display: table-cell;
+  vertical-align: middle;
+}

package/styles/scss/components/fullscreen.scss

@@ -0,0 +1,13 @@
+.video-react-player .video-react-player-fullscreen-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+.video-react-player.video-react-player-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-player .video-react-player-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-player-primary-background-color, $video-react-player-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-player-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-player-spinner-fade 1.1s linear infinite;
+    animation: video-react-player-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-player-spinner-fade 1.1s linear infinite;
+  }
+}
+
+.video-react-player-seeking .video-react-player-loading-spinner,
+.video-react-player-waiting .video-react-player-loading-spinner {
+  display: block;
+}
+
+.video-react-player-seeking .video-react-player-loading-spinner:before,
+.video-react-player-waiting .video-react-player-loading-spinner:before {
+  border-top-color: rgb(255,255,255);
+}
+
+.video-react-player-seeking .video-react-player-loading-spinner:after,
+.video-react-player-waiting .video-react-player-loading-spinner:after {
+  border-top-color: rgb(255,255,255);
+  -webkit-animation-delay: 0.44s;
+  animation-delay: 0.44s;
+}
+
+@keyframes video-react-player-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes video-react-player-spinner-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes video-react-player-spinner-fade {
+  0% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  20% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  100% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+}
+
+@-webkit-keyframes video-react-player-spinner-fade {
+  0% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  20% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+  100% {
+    border-top-color: $video-react-player-secondary-background-color;
+  }
+}
+
+

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

@@ -0,0 +1,67 @@
+.video-react-player {
+  .video-react-player-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-player-slider-active {
+      width: 12em;
+
+      .video-react-player-menu {
+        display: block;
+        opacity: 1;
+      }
+
+    }
+
+    &.video-react-player-slider-active {
+      @include transition(none);
+    }
+
+    .video-react-player-menu {
+      opacity: 0;
+      height: 100%;
+      width: auto;
+
+      position: absolute;
+      left: 4em;
+      top: 0;
+
+      padding: 0;
+      margin: 0;
+
+      @include transition(all 0.4s);
+    }
+
+    .video-react-player-menu-content {
+      width: auto;
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+
+.video-react-player-no-flex .video-react-player-menu-button-inline {
+  .video-react-player-menu {
+    display: block;
+    opacity: 1;
+    position: relative;
+    width: auto;
+  }
+
+  &:hover,
+  &:focus,
+  &.video-react-player-slider-active {
+    width: auto;
+  }
+}

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

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

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

@@ -0,0 +1,59 @@
+.video-react-player-menu-button {
+  cursor: pointer;
+
+  // Change cursor back to default if the menu button is disabled
+  &.video-react-player-disabled {
+    cursor: default;
+  }
+}
+
+
+.video-react-player-menu {
+  .video-react-player-menu-content {
+    display: block;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+    font-family: $video-react-player-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-player-secondary-background-color, $video-react-player-secondary-background-transparency);
+    }
+
+
+    &.video-react-player-selected,
+    &.video-react-player-selected:focus,
+    &.video-react-player-selected:hover {
+      background-color: $video-react-player-primary-foreground-color;
+      color: $video-react-player-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-player-scrubbing .vjs-menu-button:hover .video-react-player-menu {
+  display: none;
+}

package/styles/scss/components/new-controls.scss

@@ -0,0 +1,42 @@
+// Picture-in-Picture Control
+.video-react-player .video-react-player-picture-in-picture-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+// Loop Control
+.video-react-player .video-react-player-loop-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+.video-react-player .video-react-player-loop-control.video-react-player-icon-loop-active {
+  opacity: 0.7;
+}
+
+// Theater Mode Control
+.video-react-player .video-react-player-theater-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+// Download Button
+.video-react-player .video-react-player-download-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+// Screenshot Button
+.video-react-player .video-react-player-screenshot-control {
+  cursor: pointer;
+  @include flex(none);
+}
+
+// Quality Menu
+.video-react-player .video-react-player-quality-menu {
+  .video-react-player-quality-value {
+    font-size: 1em;
+    line-height: 3em;
+    text-align: center;
+  }
+}

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

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

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

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

package/styles/scss/components/poster.scss

@@ -0,0 +1,27 @@
+.video-react-player .video-react-player-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%;
+  }
+
+}