@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/dist/dev/__generated__/skins/default-video/styles/menus.css

@@ -1,254 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-back {
-      margin-bottom: calc(var(--media-spacing) * 0.5);
-      width: 100%;
-    }
-
-    .media-badge {
-      border-radius: var(--media-control-radius);
-      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
-      padding-inline: calc(var(--media-spacing) * 1.5);
-      font-size: 0.7em;
-      font-weight: 600;
-    }
-
-    .media-chevron {
-      width: calc(var(--media-spacing) * 3.5);
-      height: calc(var(--media-spacing) * 3.5);
-    }
-
-    .media-chevron-flipped {
-      rotate: 180deg;
-    }
-
-    .media-hint {
-      min-width: calc(var(--media-spacing) * 0);
-      align-items: center;
-      gap: calc(var(--media-spacing) * 1);
-      padding-left: calc(var(--media-spacing) * 2);
-      opacity: 0.7;
-      margin-left: auto;
-      display: inline-flex;
-    }
-
-    .media-hint-label {
-      max-width: calc(var(--media-spacing) * 24);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .media-icon {
-      width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
-      height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
-      opacity: 0.7;
-      filter: drop-shadow(0 1px #00000026);
-      flex-shrink: 0;
-    }
-
-    @media (hover: hover) {
-      @scope (.media-menu-item) {
-        &:hover .media-icon {
-          opacity: 1;
-        }
-      }
-
-      .media-menu-item:hover {
-        background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
-        color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
-      }
-    }
-
-    .media-indicator {
-      margin-right: calc(var(--media-spacing) * -1);
-      opacity: 0;
-      flex-shrink: 0;
-      margin-left: auto;
-    }
-
-    @scope (.media-menu-item) {
-      &[aria-checked='true'] .media-indicator {
-        opacity: 1;
-      }
-    }
-
-    .media-item {
-      color: inherit;
-      font-variant-numeric: tabular-nums;
-      justify-content: space-between;
-    }
-
-    .media-item[aria-disabled='true'] {
-      pointer-events: none;
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .media-item[data-availability='unavailable'],
-    .media-item[data-availability='unsupported'] {
-      display: none;
-    }
-
-    .media-menu-group {
-      gap: calc(var(--media-spacing) * 0.5);
-      anchor-scope: --media-menu-item-highlight-anchor;
-      flex-direction: column;
-      display: flex;
-      position: relative;
-    }
-
-    .media-menu-item {
-      cursor: pointer;
-      align-items: center;
-      gap: calc(var(--media-spacing) * 1.5);
-      border-radius: var(--media-surface-radius);
-      padding-inline: calc(var(--media-spacing) * 2);
-      padding-block: calc(var(--media-spacing) * 1.5);
-      text-align: left;
-      outline-offset: -2px;
-      -webkit-user-select: none;
-      user-select: none;
-      outline: 2px solid #0000;
-      transition-property: color, background-color;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      display: flex;
-      position: relative;
-    }
-
-    .media-menu-item:focus-visible {
-      outline-offset: 2px;
-      outline-color: currentColor;
-    }
-
-    .media-menu-item[data-highlighted] {
-      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
-      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .media-menu-item {
-        transition-duration: 50ms;
-      }
-
-      .media-settings {
-        transition-duration: 0s, 0s, 0s, 0s, 0.25s, 0.25s;
-      }
-
-      .media-settings-icon {
-        transition-duration: 0s;
-      }
-    }
-
-    .media-radio-group {
-      gap: calc(var(--media-spacing) * 0.5);
-      anchor-scope: --media-menu-item-highlight-anchor;
-      flex-direction: column;
-      display: flex;
-      position: relative;
-    }
-
-    .media-separator {
-      margin-block: calc(var(--media-spacing) * 1);
-      border-color: oklab(100% 0 5.96046e-8 / 0.1);
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-    }
-
-    @media (prefers-contrast: more) {
-      .media-separator {
-        border-color: oklab(100% 0 5.96046e-8 / 0.25);
-      }
-    }
-
-    @media (forced-colors: active) {
-      .media-separator {
-        border-color: canvastext;
-      }
-    }
-
-    @media (prefers-reduced-transparency: reduce) {
-      .media-separator {
-        border-color: oklab(100% 0 5.96046e-8 / 0.25);
-      }
-    }
-
-    .media-settings {
-      margin: calc(var(--media-spacing) * 0);
-      height: var(--media-menu-height);
-      max-height: min(var(--media-popover-available-height, 14rem), 14rem);
-      width: var(--media-menu-width);
-      max-width: var(--media-popover-available-width);
-      min-width: calc(var(--media-spacing) * 48);
-      overscroll-behavior: none;
-      padding: calc(var(--media-spacing) * 1);
-      border-style: solid;
-      border-width: 0;
-      border-radius: 0.75rem;
-      transition-property: opacity, filter, transform, scale, width, height;
-      transition-duration: 0.1s, 0.1s, 0.1s, 0.1s, 0.25s, 0.25s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      overflow: hidden;
-    }
-
-    .media-settings[data-submenu-expanded='true'] > :not([data-submenu]) {
-      filter: blur(8px);
-      translate: -100%;
-    }
-
-    .media-settings-icon {
-      transition-property: transform, translate, scale, rotate;
-      transition-duration: 0.15s;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    @scope (.media-settings-trigger) {
-      &[aria-expanded='true'] .media-settings-icon {
-        rotate: 90deg;
-      }
-    }
-
-    .media-sr-only {
-      clip-path: inset(50%);
-      white-space: nowrap;
-      border-width: 0;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      position: absolute;
-      overflow: hidden;
-    }
-
-    .media-submenu-panel {
-      inset-inline: calc(var(--media-spacing) * 0);
-      top: calc(var(--media-spacing) * 0);
-      z-index: 10;
-      max-height: inherit;
-      overscroll-behavior: none;
-      padding: calc(var(--media-spacing) * 1);
-      outline-style: none;
-      transition-property: translate, filter;
-      transition-duration: 0.25s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      position: absolute;
-      overflow: auto;
-    }
-
-    .media-submenu-panel[data-ending-style],
-    .media-submenu-panel[data-starting-style] {
-      pointer-events: none;
-      filter: blur(8px);
-      translate: 100%;
-    }
-
-    .media-tier {
-      padding-left: calc(var(--media-spacing) * 0.5);
-      opacity: 0.7;
-      font-size: 0.7em;
-      font-weight: 600;
-      line-height: 1;
-    }
-  }
-}

package/dist/dev/__generated__/skins/default-video/styles/overlays.css

@@ -1,35 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-overlay {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      border-radius: inherit;
-      opacity: 0;
-      transition-property: opacity, backdrop-filter;
-      transition-duration: var(--media-controls-transition-duration);
-      background-image: linear-gradient(
-        to top,
-        oklab(0% none none / 0.5) 0%,
-        oklab(0% none none / 0.3) 25%,
-        #0000 100%
-      );
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      position: absolute;
-    }
-
-    .media-overlay:is(:where(.media-error-dialog)[data-open] ~ *) {
-      opacity: 1;
-      backdrop-filter: blur(16px) saturate(150%);
-    }
-
-    .media-overlay:is(:where(.media-buffering-indicator)[data-visible] ~ *) {
-      opacity: 1;
-      backdrop-filter: blur(4px);
-      background-color: oklab(0% none none / 0.35);
-    }
-
-    .media-overlay:is(:where(.media-controls-root)[data-visible] ~ *) {
-      opacity: 1;
-    }
-  }
-}

package/dist/dev/__generated__/skins/default-video/styles/popups.css

@@ -1,371 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-popover {
-      margin: calc(var(--media-spacing) * 0);
-      color: inherit;
-      border-style: solid;
-      border-width: 0;
-      transition-property: opacity, filter, transform, scale;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      overflow: visible;
-    }
-
-    .media-popover:before {
-      pointer-events: auto;
-      content: '';
-      position: absolute;
-    }
-
-    .media-popover[data-ending-style],
-    .media-popover[data-starting-style] {
-      opacity: 0;
-      filter: blur(4px);
-      scale: 0.95;
-    }
-
-    .media-popover[data-side='bottom'] {
-      transform-origin: top;
-    }
-
-    .media-popover[data-side='bottom']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-popover-side-offset);
-      bottom: 100%;
-    }
-
-    .media-popover[data-side='left'] {
-      transform-origin: 100%;
-    }
-
-    .media-popover[data-side='left']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-popover-side-offset);
-      left: 100%;
-    }
-
-    .media-popover[data-side='right'] {
-      transform-origin: 0;
-    }
-
-    .media-popover[data-side='right']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-popover-side-offset);
-      right: 100%;
-    }
-
-    .media-popover[data-side='top'] {
-      transform-origin: bottom;
-    }
-
-    .media-popover[data-side='top']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-popover-side-offset);
-      top: 100%;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .media-popover,
-      .media-tooltip,
-      .media-volume-popover {
-        transition-duration: 0s;
-      }
-    }
-
-    .media-surface {
-      color: #fff;
-      backdrop-filter: blur(16px) saturate(150%);
-      background-color: oklab(100% 0 5.96046e-8 / 0.1);
-      position: relative;
-      box-shadow:
-        0 0 #0000,
-        0 0 #0000,
-        0 0 #0000,
-        0 0 0 1px oklab(0% none none / 0.1),
-        0 1px 3px oklab(0% none none / 0.15),
-        0 1px 2px -1px oklab(0% none none / 0.15);
-    }
-
-    .media-surface:after {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      z-index: 10;
-      border-radius: inherit;
-      content: '';
-      position: absolute;
-      box-shadow:
-        0 0 #0000,
-        0 0 #0000,
-        0 0 #0000,
-        0 0 #0000,
-        inset 0 1px #ffffff1a,
-        inset 0 0 0 1px #ffffff0d;
-    }
-
-    @media (prefers-contrast: more) {
-      .media-surface {
-        backdrop-filter: none;
-        background-color: #000;
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 0 1px #0000,
-          0 1px 3px #00000026,
-          0 1px 2px -1px #00000026;
-      }
-
-      .media-surface:after {
-        content: '';
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          inset 0 1px #ffffff40,
-          inset 0 0 0 1px #ffffff20;
-      }
-    }
-
-    @media (forced-colors: active) {
-      .media-surface {
-        background-color: canvas;
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 0 1px canvastext,
-          0 1px 3px #00000026,
-          0 1px 2px -1px #00000026;
-      }
-
-      .media-surface:after {
-        content: '';
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          inset 0 1px canvastext,
-          inset 0 0 0 1px canvastext;
-      }
-    }
-
-    @media (prefers-reduced-transparency: reduce) {
-      .media-surface {
-        backdrop-filter: none;
-        background-color: #000;
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 0 1px #0000,
-          0 1px 3px #00000026,
-          0 1px 2px -1px #00000026;
-      }
-
-      .media-surface:after {
-        content: '';
-        box-shadow:
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          0 0 #0000,
-          inset 0 1px #ffffff40,
-          inset 0 0 0 1px #ffffff20;
-      }
-    }
-
-    .media-tooltip {
-      margin: calc(var(--media-spacing) * 0);
-      border-radius: var(--media-control-radius);
-      padding-inline: calc(var(--media-spacing) * 2.5);
-      white-space: nowrap;
-      color: inherit;
-      border-style: solid;
-      border-width: 0;
-      padding-block: 0.35rem;
-      transition-property: opacity, filter, transform, scale;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      overflow: visible;
-    }
-
-    .media-tooltip:before {
-      pointer-events: auto;
-      content: '';
-      position: absolute;
-    }
-
-    .media-tooltip[data-ending-style] {
-      opacity: 0;
-      filter: blur(4px);
-      scale: 0.95;
-    }
-
-    .media-tooltip[data-open] {
-      align-items: center;
-      gap: calc(var(--media-spacing) * 1);
-      display: flex;
-    }
-
-    .media-tooltip[data-starting-style] {
-      opacity: 0;
-      filter: blur(4px);
-      scale: 0.95;
-    }
-
-    .media-tooltip[data-side='bottom'] {
-      transform-origin: top;
-    }
-
-    .media-tooltip[data-side='bottom']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-tooltip-side-offset);
-      bottom: 100%;
-    }
-
-    .media-tooltip[data-side='left'] {
-      transform-origin: 100%;
-    }
-
-    .media-tooltip[data-side='left']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-tooltip-side-offset);
-      left: 100%;
-    }
-
-    .media-tooltip[data-side='right'] {
-      transform-origin: 0;
-    }
-
-    .media-tooltip[data-side='right']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-tooltip-side-offset);
-      right: 100%;
-    }
-
-    .media-tooltip[data-side='top'] {
-      transform-origin: bottom;
-    }
-
-    .media-tooltip[data-side='top']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-tooltip-side-offset);
-      top: 100%;
-    }
-
-    .media-tooltip-shortcut {
-      min-width: calc(var(--media-spacing) * 6);
-      text-align: center;
-      background-color: currentColor;
-      border-radius: 0.25rem;
-      padding: 0.1em;
-      font-size: 0.75em;
-      font-weight: 600;
-      line-height: 1.25;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .media-tooltip-shortcut {
-        background-color: color-mix(in oklab, currentcolor 30%, transparent);
-      }
-    }
-
-    .media-volume-popover {
-      margin: calc(var(--media-spacing) * 0);
-      border-radius: var(--media-control-radius);
-      padding-block: calc(var(--media-spacing) * 3);
-      color: inherit;
-      border-style: solid;
-      border-width: 0;
-      transition-property: opacity, filter, transform, scale;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      overflow: visible;
-    }
-
-    .media-volume-popover:before {
-      pointer-events: auto;
-      content: '';
-      position: absolute;
-    }
-
-    .media-volume-popover:has(:is(media-volume-slider[data-hidden])) {
-      display: none;
-    }
-
-    .media-volume-popover[data-ending-style],
-    .media-volume-popover[data-starting-style] {
-      opacity: 0;
-      filter: blur(4px);
-      scale: 0.95;
-    }
-
-    .media-volume-popover[data-side='bottom'] {
-      transform-origin: top;
-    }
-
-    .media-volume-popover[data-side='bottom']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-popover-side-offset);
-      bottom: 100%;
-    }
-
-    .media-volume-popover[data-side='left'] {
-      transform-origin: 100%;
-    }
-
-    .media-volume-popover[data-side='left']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-popover-side-offset);
-      left: 100%;
-    }
-
-    .media-volume-popover[data-side='right'] {
-      transform-origin: 0;
-      padding: calc(var(--media-spacing) * 0);
-      backdrop-filter: none;
-      background-color: #0000;
-      box-shadow:
-        0 0 #0000,
-        0 0 #0000,
-        0 0 #0000,
-        0 0,
-        0 0 #0000;
-    }
-
-    .media-volume-popover[data-side='right']:before {
-      inset-block: calc(var(--media-spacing) * 0);
-      content: '';
-      width: var(--media-popover-side-offset);
-      right: 100%;
-    }
-
-    .media-volume-popover[data-side='right']:after {
-      content: '';
-      display: none;
-    }
-
-    .media-volume-popover[data-side='top'] {
-      transform-origin: bottom;
-    }
-
-    .media-volume-popover[data-side='top']:before {
-      inset-inline: calc(var(--media-spacing) * 0);
-      content: '';
-      height: var(--media-popover-side-offset);
-      top: 100%;
-    }
-  }
-}

package/dist/dev/__generated__/skins/default-video/styles/poster.css

@@ -1,47 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-poster {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
-      width: 100%;
-      height: 100%;
-      transition-property: opacity;
-      transition-duration: 0.25s;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      position: absolute;
-    }
-
-    .media-poster:not([data-visible]) {
-      opacity: 0;
-    }
-
-    .media-poster:before {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      background-image: var(--media-poster-placeholder, none);
-      background-size: var(--media-object-fit, contain);
-      background-position: var(--media-object-position, center);
-      content: '';
-      filter: blur(var(--media-poster-placeholder-blur, 20px));
-      background-repeat: no-repeat;
-      position: absolute;
-    }
-
-    .media-poster ::slotted(img) {
-      inset: calc(var(--media-spacing) * 0);
-      border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-
-    .media-poster[data-visible][src]:not([data-loaded]) {
-      opacity: 0;
-    }
-  }
-}