video-react-player 0.1.0

package/styles/scss/layout.scss

@@ -0,0 +1,115 @@
+/**
+
+ * Copyright (c) 2016 Video-React contributors
+ * Copyright (c) 2025 ZingMe.Vn
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+.video-react-player {
+  display: block;
+  vertical-align: top;
+  box-sizing: border-box;
+  color: $video-react-player-primary-foreground-color;
+  background-color: #000;
+  position: relative;
+  font-size: 10px;
+  line-height: 1;
+  font-family: $video-react-player-text-font-family;
+
+  @include user-select(none);
+
+  &:-moz-full-screen {
+    position: absolute;
+  }
+
+  &:-webkit-full-screen {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+
+  // All elements inherit border-box sizing
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  ul {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    list-style-position: outside;
+
+    // Important to specify each
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &.video-react-player-fluid,
+  &.video-react-player-16-9,
+  &.video-react-player-4-3 {
+    width: 100%;
+    max-width: 100%;
+    height: 0;
+  }
+
+
+  &.video-react-player-16-9 {
+    @include apply-aspect-ratio(16, 9);
+  }
+
+  &.video-react-player-4-3 {
+    @include apply-aspect-ratio(4, 3);
+  }
+
+  &.video-react-player-fill {
+    width: 100%;
+    height: 100%;
+  }
+
+
+  // Playback technology elements expand to the width/height of the containing div
+  // <video> or <object>
+  .video-react-player-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.video-react-player-fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+    // Undo any aspect ratio padding for fluid layouts
+    padding-top: 0 !important;
+
+    &.video-react-player-user-inactive {
+      cursor: none;
+    }
+
+  }
+}
+
+body.video-react-player-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  // Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html
+  overflow-y: auto;
+
+  .video-react-player-fullscreen {
+    position: fixed;
+    overflow: hidden;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+

package/styles/scss/mixins.scss

@@ -0,0 +1,117 @@
+
+@mixin hide-visually {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+@mixin animation($string: spin 1s infinite linear) {
+  -webkit-animation: $string;
+  -moz-animation: $string;
+  -o-animation: $string;
+  animation: $string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+@mixin user-select($string: none) {
+  -webkit-user-select: $string;
+  -moz-user-select: $string;
+  -ms-user-select: $string;
+  user-select: $string;
+}
+
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin background-color-with-alpha($color, $alpha) {
+  background-color: $color;
+  background-color: rgba($color, $alpha);
+}
+
+
+@mixin transform($transform) {
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+  -webkit-transform: $transform;
+  transform: $transform;
+}
+
+@mixin transition($string: $transition--default) {
+  -webkit-transition: $string;
+  -moz-transition: $string;
+  -o-transition: $string;
+  transition: $string;
+}
+
+@mixin display-flex($alignment: '', $justification: '') {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+
+  @if $alignment != '' {
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;
+    align-items: $alignment;
+  }
+
+  @if $justification != '' {
+    -webkit-box-pack: $justification;
+    -webkit-justify-content: $justification;
+    -ms-flex-pack: $justification;
+    justify-content: $justification;
+  }
+}
+
+@mixin flex($value) {
+  -webkit-box-flex: $value;
+  -moz-box-flex: $value;
+  -webkit-flex: $value;
+  -ms-flex: $value;
+  flex: $value;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+@mixin box-shadow ($string: 0 0 1em rgba(0, 0, 0, 0.25)) {
+  -webkit-box-shadow: $string;
+  -moz-box-shadow: $string;
+  box-shadow: $string;
+}
+
+@mixin order($value) {
+  -webkit-box-ordinal-group: $value;
+  -moz-box-ordinal-group: $value;
+  -ms-flex-order: $value;
+  -webkit-order: $value;
+  order: $value;
+}
+
+// Fill the width of the containing element and use padding to create the
+// desired aspect ratio. Default to 16x9 unless another ratio is given.
+@mixin apply-aspect-ratio($width, $height) {
+  padding-top: 100% * ($height/$width);
+}
+
+%video-react-player-fill-parent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%video-react-player-icon-default {
+  @extend %video-react-player-fill-parent;
+  text-align: center;
+}

package/styles/scss/variables.scss

@@ -0,0 +1,16 @@
+// Text, icons, hover states
+$video-react-player-primary-foreground-color: #fff !default;
+
+// Control backgrounds (control bar, big play, menus)
+$video-react-player-primary-background-color: #2B333F !default;
+$video-react-player-primary-background-transparency: 0.7 !default;
+
+// Hover states, slider backgrounds
+$video-react-player-secondary-background-color: lighten($video-react-player-primary-background-color, 33%) !default;
+$video-react-player-secondary-background-transparency: 0.5 !default;
+
+$video-react-player-text-font-family: serif, Times, "Times New Roman" !default;
+
+$video-react-player-big-play-button-width: 3em !default;
+$video-react-player-big-play-button-height: 1.5em !default;
+$video-react-player-big-play-button-transparency: 0.8 !default;

package/styles/scss/video-react-player.scss

@@ -0,0 +1,34 @@
+// most of the css styles came from
+// https://github.com/videojs/video.js/tree/master/src/css
+/**
+
+ * Copyright (c) 2016 Video-React contributors
+ * Copyright (c) 2025 ZingMe.Vn
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import "variables";
+@import "mixins";
+@import "icons";
+@import "layout";
+@import "components/button";
+@import "components/loading-spinner";
+@import "components/big-play-button";
+@import "components/menu/menu";
+@import "components/menu/menu-popup";
+@import "components/menu/menu-inline";
+@import "components/poster";
+@import "components/slider";
+@import "components/control";
+@import "components/control-bar";
+@import "components/progress";
+@import "components/play-pause";
+@import "components/fullscreen";
+@import "components/time";
+@import "components/volume";
+@import "components/playback-rate";
+@import "components/bezel";
+@import "components/closed-caption";
+@import "components/new-controls";