@cloudnest/redxplyr 1.0.0

package/src/sass/lib/mixins.scss

@@ -0,0 +1,82 @@
+// ==========================================================================
+// Mixins
+// ==========================================================================
+
+// Nicer focus styles
+// ---------------------------------------
+@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {
+  outline: 2px dashed $color;
+  outline-offset: 2px;
+}
+
+// Font smoothing
+// ---------------------------------------
+@mixin plyr-font-smoothing($mode: true) {
+  @if $mode {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+// <input type="range"> styling
+// ---------------------------------------
+@mixin plyr-range-track() {
+  background: transparent;
+  border: 0;
+  border-radius: calc(#{$plyr-range-track-height} / 2);
+  height: $plyr-range-track-height;
+  transition: box-shadow 0.3s ease;
+  user-select: none;
+}
+
+@mixin plyr-range-thumb() {
+  background: $plyr-range-thumb-background;
+  border: 0;
+  border-radius: 100%;
+  box-shadow: $plyr-range-thumb-shadow;
+  height: $plyr-range-thumb-height;
+  position: relative;
+  transition: all 0.2s ease;
+  width: $plyr-range-thumb-height;
+}
+
+@mixin plyr-range-thumb-active($color) {
+  box-shadow:
+    $plyr-range-thumb-shadow,
+    0 0 0 $plyr-range-thumb-active-shadow-width $color;
+}
+
+// Fullscreen styles
+// ---------------------------------------
+@mixin plyr-fullscreen-active() {
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
+
+  video {
+    height: 100%;
+  }
+
+  // Display correct icon
+  .plyr__control .icon--exit-fullscreen {
+    display: block;
+
+    + svg {
+      display: none;
+    }
+  }
+
+  // Hide cursor in fullscreen when controls hidden
+  &.plyr--hide-controls {
+    cursor: none;
+  }
+
+  // Large captions in full screen on larger screens
+  @media (min-width: $plyr-bp-lg) {
+    .plyr__captions {
+      font-size: $plyr-font-size-captions-large;
+    }
+  }
+}

package/src/sass/plugins/ads.scss

@@ -0,0 +1,53 @@
+// ==========================================================================
+// Advertisements
+// ==========================================================================
+
+.plyr__ads {
+  border-radius: inherit;
+  cursor: pointer;
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1; // Hide it by default
+
+  // Make sure the inner container is big enough for the ad creative.
+  > div,
+  > div iframe {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+
+  // The countdown label
+  &::after {
+    background: $plyr-color-gray-900;
+    border-radius: 2px;
+    bottom: $plyr-control-spacing;
+    color: #fff;
+    content: attr(data-badge-text);
+    font-size: 11px;
+    padding: 2px 6px;
+    pointer-events: none;
+    position: absolute;
+    right: $plyr-control-spacing;
+    z-index: 3;
+  }
+
+  &:empty::after {
+    display: none;
+  }
+}
+
+// Advertisement cue's for the progress bar
+.plyr__cues {
+  background: currentColor;
+  display: block;
+  height: $plyr-range-track-height;
+  left: 0;
+  opacity: 0.8;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  z-index: 3; // Between progress and thumb
+}

package/src/sass/plugins/preview-thumbnails/index.scss

@@ -0,0 +1,121 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings';
+
+.plyr__preview-thumb {
+  background-color: $plyr-preview-background;
+  border-radius: $plyr-preview-radius;
+  bottom: 100%;
+  box-shadow: $plyr-preview-shadow;
+  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  opacity: 0;
+  padding: 3px;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition:
+    transform 0.2s 0.1s ease,
+    opacity 0.2s 0.1s ease;
+  z-index: 2;
+
+  &--is-shown {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-preview-arrow-size solid transparent;
+    border-right: $plyr-preview-arrow-size solid transparent;
+    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
+    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: calc(50% + var(--preview-arrow-offset));
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+
+  &__image-container {
+    background: $plyr-preview-image-background;
+    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+
+    img,
+    &::after {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    &::after {
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px rgba(#000, 15%);
+      content: '';
+      pointer-events: none;
+    }
+
+    img {
+      // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      max-height: none;
+      max-width: none;
+    }
+  }
+
+  // Seek time text
+  &__time-container {
+    background: $plyr-preview-time-container-background;
+    border-bottom-left-radius: calc(#{$plyr-preview-radius} - 1px);
+    border-bottom-right-radius: calc(#{$plyr-preview-radius} - 1px);
+    bottom: 0;
+    left: 0;
+    line-height: 1.1;
+    padding: $plyr-preview-time-container-padding;
+    position: absolute;
+    right: 0;
+    z-index: 3;
+
+    span {
+      color: $plyr-preview-time-color;
+      font-size: $plyr-preview-time-font-size;
+    }
+  }
+}
+
+.plyr__preview-scrubbing {
+  filter: blur(1px);
+  height: 100%;
+  inset: 0;
+  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
+
+  &--is-shown {
+    opacity: 1;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

package/src/sass/plugins/preview-thumbnails/settings.scss

@@ -0,0 +1,17 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
+$plyr-preview-radius: $plyr-menu-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-container-background: var(
+  --plyr-video-controls-background,
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
+) !default;
+$plyr-preview-time-container-padding: 20px 6px 6px !default;
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;

package/src/sass/plyr.scss

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+// ==========================================================================
+// redxplyr styles
+// https://github.com/xgauravyaduvanshii/redxplyr
+// TODO: Review use of BEM classnames
+// ==========================================================================
+
+@import 'lib/css-vars';
+
+$css-vars-use-native: true;
+
+@import 'settings/breakpoints';
+@import 'settings/colors';
+@import 'settings/cosmetics';
+@import 'settings/type';
+@import 'settings/badges';
+@import 'settings/captions';
+@import 'settings/controls';
+@import 'settings/helpers';
+@import 'settings/menus';
+@import 'settings/progress';
+@import 'settings/sliders';
+@import 'settings/tooltips';
+@import 'lib/animation';
+@import 'lib/functions';
+@import 'lib/mixins';
+@import 'base';
+@import 'components/badges';
+@import 'components/captions';
+@import 'components/control';
+@import 'components/controls';
+@import 'components/menus';
+@import 'components/sliders';
+@import 'components/poster';
+@import 'components/times';
+@import 'components/tooltips';
+@import 'components/progress';
+@import 'components/volume';
+@import 'types/audio';
+@import 'types/video';
+@import 'states/fullscreen';
+@import 'plugins/ads';
+@import 'plugins/preview-thumbnails/index';
+@import 'utils/animation';
+@import 'utils/hidden';

package/src/sass/settings/badges.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// Badges
+// ==========================================================================
+
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

package/src/sass/settings/breakpoints.scss

@@ -0,0 +1,9 @@
+// ==========================================================================
+// Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
+// ==========================================================================
+
+$plyr-bp-sm: 480px !default;
+$plyr-bp-md: 768px !default;
+$plyr-bp-lg: 1024px !default;

package/src/sass/settings/captions.scss

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Captions
+// ==========================================================================
+
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
+$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
+$plyr-font-size-captions-base: $plyr-font-size-base !default;
+$plyr-font-size-captions-small: $plyr-font-size-small !default;
+$plyr-font-size-captions-medium: $plyr-font-size-large !default;
+$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;

package/src/sass/settings/colors.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;
+
+// Grayscale
+$plyr-color-gray-900: hsl(216deg 15% 16%) !default;
+$plyr-color-gray-800: hsl(216deg 15% 25%) !default;
+$plyr-color-gray-700: hsl(216deg 15% 34%) !default;
+$plyr-color-gray-600: hsl(216deg 15% 43%) !default;
+$plyr-color-gray-500: hsl(216deg 15% 52%) !default;
+$plyr-color-gray-400: hsl(216deg 15% 61%) !default;
+$plyr-color-gray-300: hsl(216deg 15% 70%) !default;
+$plyr-color-gray-200: hsl(216deg 15% 79%) !default;
+$plyr-color-gray-100: hsl(216deg 15% 88%) !default;
+$plyr-color-gray-50: hsl(216deg 15% 97%) !default;

package/src/sass/settings/controls.scss

@@ -0,0 +1,30 @@
+// ==========================================================================
+// Controls
+// ==========================================================================
+
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
+$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
+$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
+$plyr-control-radius: var(--plyr-control-radius, 4px) !default;
+$plyr-control-toggle-checked-background: var(
+  --plyr-control-toggle-checked-background,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+$plyr-video-controls-background: var(
+  --plyr-video-controls-background,
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
+) !default;
+$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: var(
+  --plyr-video-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: var(
+  --plyr-audio-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;

package/src/sass/settings/cosmetics.scss

@@ -0,0 +1,5 @@
+// ==========================================================================
+// Cosmetic
+// ==========================================================================
+
+$plyr-focus-visible-color: var(--plyr-focus-visible-color, var(--plyr-color-main, $plyr-color-main)) !default;

package/src/sass/settings/helpers.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// Enable helpers
+// ==========================================================================
+
+$plyr-border-box: true !default;
+$plyr-touch-action: true !default;
+$plyr-sr-only-important: true !default;

package/src/sass/settings/menus.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Menus
+// ==========================================================================
+
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 8px) !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

package/src/sass/settings/progress.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Progress
+// ==========================================================================
+
+// Loading
+$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
+$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
+
+// Markers
+$plyr-progress-marker-background: var(--plyr-progress-marker-background, #fff) !default;
+$plyr-progress-marker-width: var(--plyr-progress-marker-width, 3px) !default;
+
+// Buffered
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
+$plyr-audio-progress-buffered-background: var(
+  --plyr-audio-progress-buffered-background,
+  rgba($plyr-color-gray-200, 0.6)
+) !default;

package/src/sass/settings/sliders.scss

@@ -0,0 +1,39 @@
+// ==========================================================================
+// Sliders
+// ==========================================================================
+
+// Thumb
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
+$plyr-range-thumb-shadow: var(
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
+
+// Track
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
+
+// Fill
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
+
+// Type specific
+$plyr-video-range-track-background: var(
+  --plyr-video-range-track-background,
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;

package/src/sass/settings/tooltips.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Tooltips
+// ==========================================================================
+
+$plyr-tooltip-background: var(--plyr-tooltip-background, #fff) !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
+$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 5px) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

package/src/sass/settings/type.scss

@@ -0,0 +1,16 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
+$plyr-line-height: var(--plyr-line-height, 1.7) !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

package/src/sass/states/fullscreen.scss

@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Fullscreen
+// --------------------------------------------------------------
+
+.plyr:fullscreen {
+  @include plyr-fullscreen-active;
+}
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback {
+  @include plyr-fullscreen-active;
+  position: fixed;
+  inset: 0;
+  z-index: 10000000;
+}

package/src/sass/types/audio.scss

@@ -0,0 +1,61 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+  display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+  background: $plyr-audio-controls-background;
+  border-radius: inherit;
+  color: $plyr-audio-control-color;
+  padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+  &:focus-visible,
+  &:hover,
+  &[aria-expanded='true'] {
+    background: $plyr-audio-control-background-hover;
+    color: $plyr-audio-control-color-hover;
+  }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+  &::-webkit-slider-runnable-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  &::-moz-range-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  &::-ms-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  // Pressed styles
+  &:active {
+    &::-webkit-slider-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+    }
+
+    &::-moz-range-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+    }
+
+    &::-ms-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
+    }
+  }
+}
+
+// Progress
+.plyr--audio .plyr__progress__buffer {
+  color: $plyr-audio-progress-buffered-background;
+}