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

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

@@ -1,169 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-error-dialog {
-      z-index: 20;
-      width: calc(100% - 1.5rem);
-      max-width: calc(var(--media-spacing) * 72);
-      gap: calc(var(--media-spacing) * 3);
-      padding: calc(var(--media-spacing) * 3);
-      color: #fff;
-      backdrop-filter: blur(16px) saturate(150%);
-      background-color: oklab(100% 0 5.96046e-8 / 0.1);
-      border-radius: 1.75rem;
-      outline-style: none;
-      flex-direction: column;
-      transition:
-        opacity 0.35s cubic-bezier(0, 0, 0.2, 1) 0.1s,
-        scale 0.35s cubic-bezier(0, 0, 0.2, 1) 0.1s,
-        transform 0.35s cubic-bezier(0, 0, 0.2, 1) 0.1s;
-      display: flex;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      translate: -50% -50%;
-      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-error-dialog:not([data-open]) {
-      display: none;
-    }
-
-    .media-error-dialog: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-error-dialog[data-ending-style] {
-      opacity: 0;
-      transition-delay: 0s;
-      scale: 0.5;
-    }
-
-    .media-error-dialog[data-starting-style] {
-      opacity: 0;
-      scale: 0.5;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .media-error-dialog {
-        transition-duration: 50ms;
-        transition-delay: 0s;
-      }
-    }
-
-    @media (prefers-contrast: more) {
-      .media-error-dialog {
-        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-error-dialog: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-error-dialog {
-        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-error-dialog: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-error-dialog {
-        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-error-dialog: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-error-dialog-close {
-      height: calc(var(--media-spacing) * 9);
-      background-color: var(--media-accent-color, oklch(100% 0 0));
-      width: 100%;
-      padding-inline: calc(var(--media-spacing) * 4);
-      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
-      font-weight: 500;
-    }
-
-    .media-error-dialog-description {
-      padding-inline: calc(var(--media-spacing) * 2);
-      padding-bottom: calc(var(--media-spacing) * 1.5);
-      overflow-wrap: anywhere;
-      opacity: 0.7;
-    }
-
-    .media-error-dialog-title {
-      padding-inline: calc(var(--media-spacing) * 2);
-      padding-top: calc(var(--media-spacing) * 2);
-      font-size: calc(var(--media-spacing) * 3.25);
-      font-weight: 600;
-      line-height: 1.25;
-    }
-  }
-}

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

@@ -1,459 +0,0 @@
-@layer videojs.components {
-  @scope (.media-skin-video) {
-    .media-buffering-indicator {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      z-index: 10;
-      color: #fff;
-      place-content: center;
-      display: none;
-      position: absolute;
-    }
-
-    .media-buffering-indicator:not([data-visible]) {
-      --media-spinner-animation: none;
-    }
-
-    .media-buffering-indicator[data-visible] {
-      display: grid;
-    }
-
-    .media-buffering-spinner-icon {
-      width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
-      height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
-      filter: drop-shadow(0 1px #00000026);
-    }
-
-    .media-playback-status-icon {
-      width: calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5);
-      height: calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5);
-      display: none;
-    }
-
-    .media-playback-status-indicator {
-      border-radius: var(--media-control-radius);
-      padding: calc(var(--media-spacing) * 4);
-      text-align: center;
-      backdrop-filter: blur(8px);
-      background-color: oklab(0% none none / 0.35);
-      grid-row-start: 1;
-      grid-column-start: 2;
-      place-content: center;
-      transition-property: opacity, scale;
-      transition-duration: 0.2s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      display: grid;
-    }
-
-    .media-playback-status-indicator[data-ending-style] {
-      opacity: 0;
-      transition-duration: 0.1s;
-      scale: 0.85;
-    }
-
-    .media-playback-status-indicator[data-starting-style] {
-      opacity: 0;
-      scale: 0.85;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .media-playback-status-indicator,
-      .media-playback-status-indicator[data-ending-style],
-      .media-seek-indicator-icon,
-      .media-status-indicator,
-      .media-volume-indicator,
-      .media-volume-indicator-fill {
-        transition-duration: 50ms;
-      }
-    }
-
-    .media-seek-indicator {
-      place-content: center;
-      gap: calc(var(--media-spacing) * 1);
-      padding: calc(var(--media-spacing) * 4);
-      text-align: center;
-      grid-row-start: 1;
-      grid-column-start: 2;
-      display: grid;
-    }
-
-    .media-seek-indicator[data-direction='backward'] {
-      grid-column-start: 1;
-      justify-self: flex-start;
-    }
-
-    .media-seek-indicator[data-direction='forward'] {
-      grid-column-start: 3;
-      justify-self: flex-end;
-    }
-
-    .media-seek-indicator-icon {
-      width: calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5);
-      height: calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5);
-      transition-property: translate, opacity;
-      transition-duration: 0.2s;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      display: none;
-    }
-
-    @scope (.media-seek-indicator) {
-      &[data-direction] .media-seek-indicator-icon {
-        display: block;
-      }
-    }
-
-    @scope (.media-seek-indicator) {
-      &[data-ending-style] .media-seek-indicator-icon,
-      &[data-starting-style] .media-seek-indicator-icon {
-        opacity: 0;
-      }
-    }
-
-    @scope (.media-seek-indicator) {
-      &[data-direction='backward'] .media-seek-indicator-icon {
-        scale: -1 1;
-      }
-    }
-
-    .media-seek-indicator-value {
-      font-variant-numeric: tabular-nums;
-    }
-
-    .media-status-announcer {
-      clip-path: inset(50%);
-      white-space: nowrap;
-      border-width: 0;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      position: absolute;
-      overflow: hidden;
-    }
-
-    @scope (.media-status-indicator) {
-      &[data-status='captions-off'] .media-status-captions-off-icon,
-      &[data-status='captions-on'] .media-status-captions-on-icon,
-      &[data-status='fullscreen'] .media-status-fullscreen-enter-icon,
-      &[data-status='exit-fullscreen'] .media-status-fullscreen-exit-icon {
-        display: block;
-      }
-    }
-
-    .media-status-indicator {
-      pointer-events: none;
-      top: calc(var(--media-spacing) * 3);
-      align-items: center;
-      gap: calc(var(--media-spacing) * 2);
-      border-radius: var(--media-control-radius);
-      padding-inline: calc(var(--media-spacing) * 2.5);
-      padding-block: calc(var(--media-spacing) * 1);
-      color: #fff;
-      backdrop-filter: blur(16px) saturate(150%);
-      background-color: oklab(0% none none / 0.25);
-      font-weight: 500;
-      transition-property: opacity, scale, translate;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      display: flex;
-      position: absolute;
-      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-status-indicator: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-status-indicator[data-ending-style] {
-      opacity: 0;
-      translate: 0 -25%;
-      scale: 0.9;
-    }
-
-    .media-status-indicator[data-starting-style] {
-      opacity: 0;
-      scale: 0.9;
-    }
-
-    @media (prefers-contrast: more) {
-      .media-status-indicator {
-        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-status-indicator: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-volume-indicator {
-        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-volume-indicator: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-status-indicator {
-        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-status-indicator: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-volume-indicator {
-        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-volume-indicator: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-status-indicator {
-        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-status-indicator: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-volume-indicator {
-        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-volume-indicator: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-status-indicator-icon {
-      flex-shrink: 0;
-      display: none;
-    }
-
-    .media-status-indicator-overlay {
-      pointer-events: none;
-      inset: calc(var(--media-spacing) * 0);
-      color: #fff;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      place-items: center;
-      display: grid;
-      position: absolute;
-    }
-
-    .media-status-indicator-value {
-      margin-left: auto;
-    }
-
-    :where(.media-playback-status-indicator)[data-status='pause'] .media-status-pause-icon,
-    :where(.media-status-indicator)[data-status='pip'] .media-status-pip-enter-icon,
-    :where(.media-status-indicator)[data-status='exit-pip'] .media-status-pip-exit-icon {
-      display: block;
-    }
-
-    @scope (.media-playback-status-indicator) {
-      &[data-status='play'] .media-status-play-icon {
-        display: block;
-        translate: 1px;
-      }
-    }
-
-    @scope (.media-volume-indicator) {
-      &[data-level='high'] .media-volume-high-indicator-icon {
-        display: block;
-      }
-    }
-
-    .media-volume-indicator {
-      pointer-events: none;
-      top: calc(var(--media-spacing) * 3);
-      border-radius: var(--media-control-radius);
-      color: #fff;
-      backdrop-filter: blur(16px) saturate(150%);
-      background-color: oklab(0% none none / 0.25);
-      width: min(80%, 12rem);
-      font-weight: 500;
-      transition-property: opacity, scale, translate;
-      transition-duration: 0.1s;
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      position: absolute;
-      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-volume-indicator: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-volume-indicator[data-ending-style] {
-      opacity: 0;
-      translate: 0 -25%;
-      scale: 0.9;
-    }
-
-    .media-volume-indicator[data-starting-style] {
-      opacity: 0;
-      scale: 0.9;
-    }
-
-    .media-volume-indicator-fill {
-      justify-content: space-between;
-      align-items: center;
-      gap: calc(var(--media-spacing) * 2);
-      border-radius: inherit;
-      background-image: linear-gradient(var(--media-accent-color, white), var(--media-accent-color, white));
-      background-size: var(--media-volume-fill, 0%) 100%;
-      width: 100%;
-      padding-inline: calc(var(--media-spacing) * 2.5);
-      padding-block: calc(var(--media-spacing) * 1);
-      background-position: 0;
-      background-repeat: no-repeat;
-      transition-property: background-size;
-      transition-duration: 0.2s;
-      transition-timing-function: linear;
-      display: flex;
-    }
-
-    .media-volume-indicator-icon {
-      flex-shrink: 0;
-      display: none;
-    }
-
-    .media-volume-indicator-value {
-      margin-left: auto;
-    }
-
-    @scope (.media-volume-indicator) {
-      &[data-level='low'] .media-volume-low-indicator-icon,
-      &[data-level='off'] .media-volume-off-indicator-icon {
-        display: block;
-      }
-    }
-  }
-}