@cloudnest/redxplyr 1.0.0

package/src/sass/components/menus.scss

@@ -0,0 +1,205 @@
+// --------------------------------------------------------------
+// Menus
+// --------------------------------------------------------------
+
+.plyr__menu {
+  display: flex; // Edge fix
+  position: relative;
+
+  // Animate the icon
+  .plyr__control svg {
+    transition: transform 0.3s ease;
+  }
+
+  .plyr__control[aria-expanded='true'] {
+    svg {
+      transform: rotate(90deg);
+    }
+
+    // Hide tooltip
+    .plyr__tooltip {
+      display: none;
+    }
+  }
+
+  // The actual menu container
+  &__container {
+    animation: plyr-popup 0.2s ease;
+    background: $plyr-menu-background;
+    border-radius: $plyr-menu-radius;
+    bottom: 100%;
+    box-shadow: $plyr-menu-shadow;
+    color: $plyr-menu-color;
+    font-size: $plyr-font-size-base;
+    margin-bottom: 10px;
+    position: absolute;
+    right: -3px;
+    text-align: left;
+    white-space: nowrap;
+    z-index: 3;
+
+    > div {
+      overflow: hidden;
+      transition:
+        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+        width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    // Arrow
+    &::after {
+      border: $plyr-menu-arrow-size solid transparent;
+      border-top-color: $plyr-menu-background;
+      content: '';
+      height: 0;
+      position: absolute;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
+      top: 100%;
+      width: 0;
+    }
+
+    [role='menu'] {
+      padding: $plyr-control-padding;
+    }
+
+    [role='menuitem'],
+    [role='menuitemradio'] {
+      margin-top: 2px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    // Options
+    .plyr__control {
+      align-items: center;
+      color: $plyr-menu-color;
+      display: flex;
+      font-size: $plyr-font-size-menu;
+      padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
+      user-select: none;
+      width: 100%;
+
+      > span {
+        align-items: inherit;
+        display: flex;
+        width: 100%;
+      }
+
+      &::after {
+        border: $plyr-menu-item-arrow-size solid transparent;
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &--forward {
+        padding-right: calc(#{$plyr-control-padding} * 4);
+
+        &::after {
+          border-left-color: $plyr-menu-item-arrow-color;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
+        }
+
+        &:focus-visible::after,
+        &:hover::after {
+          border-left-color: currentColor;
+        }
+      }
+
+      &--back {
+        font-weight: $plyr-font-weight-regular;
+        margin: $plyr-control-padding;
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
+        padding-left: calc(#{$plyr-control-padding} * 4);
+        position: relative;
+        width: calc(100% - (#{$plyr-control-padding} * 2));
+
+        &::after {
+          border-right-color: $plyr-menu-item-arrow-color;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
+        }
+
+        &::before {
+          background: $plyr-menu-back-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
+          content: '';
+          height: 1px;
+          left: 0;
+          margin-top: calc(#{$plyr-control-padding} / 2);
+          overflow: hidden;
+          position: absolute;
+          right: 0;
+          top: 100%;
+        }
+
+        &:focus-visible::after,
+        &:hover::after {
+          border-right-color: currentColor;
+        }
+      }
+    }
+
+    .plyr__control[role='menuitemradio'] {
+      padding-left: $plyr-control-padding;
+
+      &::before,
+      &::after {
+        border-radius: 100%;
+      }
+
+      &::before {
+        background: rgba(#000, 0.1);
+        content: '';
+        display: block;
+        flex-shrink: 0;
+        height: 16px;
+        margin-right: $plyr-control-spacing;
+        transition: all 0.3s ease;
+        width: 16px;
+      }
+
+      &::after {
+        background: #fff;
+        border: 0;
+        height: 6px;
+        left: 12px;
+        opacity: 0;
+        top: 50%;
+        transform: translateY(-50%) scale(0);
+        transition:
+          transform 0.3s ease,
+          opacity 0.3s ease;
+        width: 6px;
+      }
+
+      &[aria-checked='true'] {
+        &::before {
+          background: $plyr-control-toggle-checked-background;
+        }
+
+        &::after {
+          opacity: 1;
+          transform: translateY(-50%) scale(1);
+        }
+      }
+
+      &:focus-visible::before,
+      &:hover::before {
+        background: rgba($plyr-color-gray-900, 0.1);
+      }
+    }
+
+    // Option value
+    .plyr__menu__value {
+      align-items: center;
+      display: flex;
+      margin-left: auto;
+      margin-right: calc((#{$plyr-control-padding} - 2px) * -1);
+      overflow: hidden;
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
+      pointer-events: none;
+    }
+  }
+}

package/src/sass/components/poster.scss

@@ -0,0 +1,27 @@
+// --------------------------------------------------------------
+// Faux poster overlay
+// --------------------------------------------------------------
+
+.plyr__poster {
+  background-color: var(--plyr-video-background, $plyr-video-background);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 0.2s ease;
+  width: 100%;
+  z-index: 1;
+}
+
+.plyr--stopped.plyr__poster-enabled .plyr__poster {
+  opacity: 1;
+}
+
+// Allow interaction with YouTube controls while paused
+.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
+  display: none;
+}

package/src/sass/components/progress.scss

@@ -0,0 +1,107 @@
+// --------------------------------------------------------------
+// Playback progress
+// --------------------------------------------------------------
+
+// Offset the range thumb in order to be able to calculate the relative progress (#954)
+$plyr-progress-offset: $plyr-range-thumb-height;
+
+.plyr__progress {
+  left: calc(#{$plyr-progress-offset} * 0.5);
+  margin-right: $plyr-progress-offset;
+  position: relative;
+
+  input[type='range'],
+  &__buffer {
+    margin-left: calc(#{$plyr-progress-offset} * -0.5);
+    margin-right: calc(#{$plyr-progress-offset} * -0.5);
+    width: calc(100% + #{$plyr-progress-offset});
+  }
+
+  input[type='range'] {
+    position: relative;
+    z-index: 2;
+  }
+
+  // Seek tooltip to show time
+  .plyr__tooltip {
+    left: 0;
+    max-width: 120px;
+    overflow-wrap: break-word;
+  }
+}
+
+.plyr__progress__buffer {
+  -webkit-appearance: none; /* stylelint-disable-line */
+  background: transparent;
+  border: 0;
+  border-radius: 100px;
+  height: $plyr-range-track-height;
+  left: 0;
+  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
+  padding: 0;
+  position: absolute;
+  top: 50%;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background: currentColor;
+    border-radius: 100px;
+    min-width: $plyr-range-track-height;
+    transition: width 0.2s ease;
+  }
+
+  // Mozilla
+  &::-moz-progress-bar {
+    background: currentColor;
+    border-radius: 100px;
+    min-width: $plyr-range-track-height;
+    transition: width 0.2s ease;
+  }
+
+  // Microsoft
+  &::-ms-fill {
+    border-radius: 100px;
+    transition: width 0.2s ease;
+  }
+}
+
+// Loading state
+.plyr--loading .plyr__progress__buffer {
+  animation: plyr-progress 1s linear infinite;
+  background-image: linear-gradient(
+    -45deg,
+    $plyr-progress-loading-background 25%,
+    transparent 25%,
+    transparent 50%,
+    $plyr-progress-loading-background 50%,
+    $plyr-progress-loading-background 75%,
+    transparent 75%,
+    transparent
+  );
+  background-repeat: repeat-x;
+  background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+  color: transparent;
+}
+
+.plyr--video.plyr--loading .plyr__progress__buffer {
+  background-color: $plyr-video-progress-buffered-background;
+}
+
+.plyr--audio.plyr--loading .plyr__progress__buffer {
+  background-color: $plyr-audio-progress-buffered-background;
+}
+
+// Markers
+.plyr__progress__marker {
+  background-color: $plyr-progress-marker-background;
+  border-radius: 1px;
+  height: $plyr-range-track-height;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: $plyr-progress-marker-width;
+  z-index: 3;
+}

package/src/sass/components/sliders.scss

@@ -0,0 +1,99 @@
+// --------------------------------------------------------------
+// Slider inputs - <input type="range">
+// --------------------------------------------------------------
+
+.plyr--full-ui input[type='range'] {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
+
+  // `color` property is used in JS to populate lower fill for WebKit
+  color: $plyr-range-fill-background;
+  display: block;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  transition: box-shadow 0.3s ease;
+  width: 100%;
+
+  &::-webkit-slider-runnable-track {
+    @include plyr-range-track;
+
+    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+  }
+
+  &::-webkit-slider-thumb {
+    @include plyr-range-thumb;
+
+    appearance: none;
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
+  }
+
+  // Mozilla
+  &::-moz-range-track {
+    @include plyr-range-track;
+  }
+
+  &::-moz-range-thumb {
+    @include plyr-range-thumb;
+  }
+
+  &::-moz-range-progress {
+    background: currentColor;
+    border-radius: calc(#{$plyr-range-track-height} / 2);
+    height: $plyr-range-track-height;
+  }
+
+  // Microsoft
+  &::-ms-track {
+    @include plyr-range-track;
+
+    color: transparent;
+  }
+
+  &::-ms-fill-upper {
+    @include plyr-range-track;
+  }
+
+  &::-ms-fill-lower {
+    @include plyr-range-track;
+
+    background: currentColor;
+  }
+
+  &::-ms-thumb {
+    @include plyr-range-thumb;
+
+    // For some reason, Edge uses the -webkit margin above
+    margin-top: 0;
+  }
+
+  &::-ms-tooltip {
+    display: none;
+  }
+
+  // Focus styles
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    &::-webkit-slider-runnable-track {
+      @include plyr-focus-visible;
+    }
+
+    &::-moz-range-track {
+      @include plyr-focus-visible;
+    }
+
+    &::-ms-track {
+      @include plyr-focus-visible;
+    }
+  }
+}

package/src/sass/components/times.scss

@@ -0,0 +1,20 @@
+// --------------------------------------------------------------
+// Time
+// --------------------------------------------------------------
+
+.plyr__time {
+  font-size: $plyr-font-size-time;
+}
+
+// Media duration hidden on small screens
+.plyr__time + .plyr__time {
+  // Add a slash in before
+  &::before {
+    content: '\2044';
+    margin-right: $plyr-control-spacing;
+  }
+
+  @media (max-width: ($plyr-bp-md - 1px)) {
+    display: none;
+  }
+}

package/src/sass/components/tooltips.scss

@@ -0,0 +1,91 @@
+/* stylelint-disable selector-max-compound-selectors */
+// --------------------------------------------------------------
+// Tooltips
+// --------------------------------------------------------------
+
+.plyr__tooltip {
+  background: $plyr-tooltip-background;
+  border-radius: $plyr-tooltip-radius;
+  bottom: 100%;
+  box-shadow: $plyr-tooltip-shadow;
+  color: $plyr-tooltip-color;
+  font-size: $plyr-font-size-small;
+  font-weight: $plyr-font-weight-regular;
+  left: 50%;
+  line-height: 1.3;
+  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
+  opacity: 0;
+  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition:
+    transform 0.2s 0.1s ease,
+    opacity 0.2s 0.1s ease;
+  white-space: nowrap;
+  z-index: 2;
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-tooltip-arrow-size solid transparent;
+    border-right: $plyr-tooltip-arrow-size solid transparent;
+    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
+    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+}
+
+// Displaying
+.plyr .plyr__control:hover .plyr__tooltip,
+.plyr .plyr__control:focus-visible .plyr__tooltip,
+.plyr__tooltip--visible {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+.plyr .plyr__control:hover .plyr__tooltip {
+  z-index: 3;
+}
+
+// First tooltip
+.plyr__controls > .plyr__control:first-child .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
+  left: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 0 100%;
+
+  &::before {
+    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+  }
+}
+
+// Last tooltip
+.plyr__controls > .plyr__control:last-child .plyr__tooltip {
+  left: auto;
+  right: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 100% 100%;
+
+  &::before {
+    left: auto;
+    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+    transform: translateX(50%);
+  }
+}
+
+.plyr__controls > .plyr__control:first-child,
+.plyr__controls > .plyr__control:first-child + .plyr__control,
+.plyr__controls > .plyr__control:last-child {
+  &:hover .plyr__tooltip,
+  &:focus-visible .plyr__tooltip,
+  .plyr__tooltip--visible {
+    transform: translate(0, 0) scale(1);
+  }
+}

package/src/sass/components/volume.scss

@@ -0,0 +1,18 @@
+// --------------------------------------------------------------
+// Volume
+// --------------------------------------------------------------
+
+.plyr__volume {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  input[type='range'] {
+    margin-left: calc(#{$plyr-control-spacing} / 2);
+    margin-right: calc(#{$plyr-control-spacing} / 2);
+    max-width: 90px;
+    min-width: 60px;
+    position: relative;
+    z-index: 2;
+  }
+}

package/src/sass/lib/animation.scss

@@ -0,0 +1,31 @@
+// --------------------------------------------------------------
+// Animations
+// --------------------------------------------------------------
+
+@keyframes plyr-progress {
+  to {
+    background-position: $plyr-progress-loading-size 0;
+  }
+}
+
+@keyframes plyr-popup {
+  0% {
+    opacity: 0.5;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes plyr-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/sass/lib/css-vars.scss

@@ -0,0 +1,103 @@
+// Downloaded from https://github.com/malyw/css-vars (and modified)
+
+@use 'sass:list';
+@use 'sass:map';
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+///
+// Assigns a variable to the global map
+///
+@function css-var-assign($varName: null, $varValue: null) {
+  @return map-merge(
+    $css-vars,
+    (
+      $varName: $varValue,
+    )
+  );
+}
+
+///
+// Emulates var() CSS native function behavior
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-background, green);
+///
+@function var($args...) {
+  // CHECK PARAMS
+  @if length($args) == 0 {
+    @error 'Variable name is expected to be passed to the var() function';
+  }
+
+  @if str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--' {
+    @error "Variable name is expected to start from '--'";
+  }
+
+  // PROCESS
+  $var-name: list.nth($args, 1);
+  $var-value: map.get($css-vars, $var-name);
+
+  @if $css-vars-use-native {
+    // CSS variables
+    // Native CSS: don't process function in case of native
+    @return unquote('var(' + $args + ')');
+  } @else {
+    @if not $var-value {
+      // variable is not provided so far
+      @if length($args) == 2 {
+        $var-value: list.nth($args, 2);
+      }
+    }
+
+    // Sass: return value from the map
+    @return $var-value;
+  }
+}
+
+///
+// Sass mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($var-map: null) {
+  // CHECK PARAMS
+  @if not $var-map {
+    @error 'Map of variables is expected, instead got: null';
+  }
+
+  @if type_of($var-map) != map {
+    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  }
+
+  // PROCESS
+  @if $css-vars-use-native {
+    // CSS variables
+    // Native CSS: assign CSS custom properties to the global scope
+    @at-root :root {
+      @each $var-name, $var-value in $var-map {
+        @if type_of($var-value) == string {
+          #{$var-name}: $var-value; // to prevent quotes interpolation
+        } @else {
+          #{$var-name}: #{$var-value};
+        }
+      }
+    }
+  } @else {
+    // Sass or debug
+    // merge variables and values to the global map (provides no output)
+    @each $var-name, $var-value in $var-map {
+      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+    }
+  }
+}

package/src/sass/lib/functions.scss

@@ -0,0 +1,3 @@
+@function to-percentage($input) {
+  @return $input * 1%;
+}