@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

package/dist/default/__generated__/skins/default-video/styles/base.css

@@ -0,0 +1,25 @@
+@layer videojs.base {
+  @scope (.media-skin) {
+    :scope,
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button {
+      font: inherit;
+      color: inherit;
+      letter-spacing: inherit;
+    }
+
+    svg {
+      display: block;
+    }
+
+    [hidden] {
+      /* Hidden must override component display styles. */
+      display: none !important;
+    }
+  }
+}

package/dist/default/__generated__/skins/default-video/styles/buttons.css

@@ -0,0 +1,152 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-button {
+      width: var(--media-control-size);
+      height: var(--media-control-size);
+      cursor: pointer;
+      border-radius: var(--media-radius-pill);
+      color: inherit;
+      outline-offset: -2px;
+      background-color: #0000;
+      border-style: solid;
+      border-width: 0;
+      outline: 2px solid #0000;
+      flex-shrink: 0;
+      place-items: center;
+      padding: 0;
+      display: grid;
+    }
+
+    @media (hover: hover) {
+      .media-button:hover {
+        background-color: var(--media-control-hover-background);
+      }
+    }
+
+    .media-button:focus-visible {
+      background-color: var(--media-control-hover-background);
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+
+    .media-button[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .media-button[aria-expanded='true'] {
+      background-color: var(--media-control-hover-background);
+    }
+
+    .media-button-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-fullscreen-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &:not([data-fullscreen]) .media-fullscreen-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-fullscreen-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &[data-fullscreen] .media-fullscreen-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pause-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-started]:not([data-paused]):not([data-ended]) .media-pause-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-play-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &:not([data-ended]):not([data-started]) .media-play-icon,
+      &:not([data-ended])[data-paused] .media-play-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-restart-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-ended] .media-restart-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-seek-backward-icon {
+      scale: -1 1;
+    }
+
+    .media-seek-button-label {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-volume-high-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted]):not([data-volume-level='low']) .media-volume-high-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-low-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted])[data-volume-level='low'] .media-volume-low-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &[data-muted] .media-volume-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+  }
+}

package/dist/default/__generated__/skins/default-video/styles/container.css

@@ -0,0 +1,45 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-container {
+      isolation: isolate;
+      border-radius: var(--media-radius-surface);
+      background-color: #000;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+      overflow: hidden;
+      container: media-container / inline-size;
+    }
+
+    .media-container:before {
+      pointer-events: none;
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      opacity: 0;
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      content: '';
+      background-repeat: no-repeat;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
+      content: '';
+      opacity: 1;
+    }
+
+    .media-container video {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}

package/dist/default/__generated__/skins/default-video/styles/controls.css

@@ -0,0 +1,45 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-controls {
+      inset-inline: var(--media-controls-gap);
+      bottom: var(--media-controls-gap);
+      z-index: 10;
+      align-items: center;
+      gap: var(--media-controls-gap);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-surface-background);
+      padding: var(--media-controls-padding);
+      font-family: var(--media-font-family);
+      font-size: var(--media-font-size);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+      line-height: 1;
+      display: flex;
+      position: absolute;
+    }
+
+    .media-controls-group-primary {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      display: flex;
+    }
+
+    .media-controls-group-time {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      flex: 1;
+      display: flex;
+    }
+
+    .media-time {
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-overlay {
+      pointer-events: none;
+      border-radius: inherit;
+      background-image: linear-gradient(to top, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.3) 25%, #0000);
+      position: absolute;
+      inset: 0;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-surface {
+      background-color: var(--media-surface-background);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+    }
+
+    .media-tooltip {
+      border-radius: var(--media-radius-pill);
+      white-space: nowrap;
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.35rem;
+      padding-inline: 0.625rem;
+    }
+
+    .media-tooltip[data-open] {
+      align-items: center;
+      gap: 0.25rem;
+      display: flex;
+    }
+
+    .media-tooltip-shortcut {
+      font-size: 0.75em;
+      font-weight: 600;
+    }
+
+    .media-volume-popover {
+      border-radius: var(--media-radius-pill);
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.75rem;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-poster {
+      pointer-events: none;
+      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;
+      inset: 0;
+    }
+
+    .media-poster:not([data-visible]) {
+      opacity: 0;
+    }
+
+    .media-poster:before {
+      pointer-events: none;
+      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;
+      inset: 0;
+    }
+
+    .media-poster ::slotted(img) {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster[data-visible]:not([data-loaded]) {
+      opacity: 0;
+    }
+  }
+}

package/dist/default/__generated__/skins/default-video/styles/sliders.css

@@ -0,0 +1,112 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-slider {
+      min-height: var(--media-control-size);
+      cursor: pointer;
+      outline-style: none;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      min-width: 5rem;
+      display: flex;
+      position: relative;
+    }
+
+    .media-slider[data-orientation='vertical'] {
+      height: 5rem;
+      width: var(--media-control-size);
+      min-width: 0;
+    }
+
+    .media-slider-buffer {
+      width: var(--media-slider-buffer);
+      border-radius: inherit;
+      background-color: var(--media-slider-buffer-background);
+      inset-block: 0;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-buffer[data-orientation='vertical'] {
+      height: var(--media-slider-buffer);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-fill {
+      width: var(--media-slider-fill);
+      border-radius: inherit;
+      inset-block: 0;
+      background-color: currentColor;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-fill[data-orientation='vertical'] {
+      height: var(--media-slider-fill);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-preview {
+      position: relative;
+    }
+
+    .media-slider-thumb {
+      top: 50%;
+      left: var(--media-slider-fill);
+      width: var(--media-slider-thumb-size);
+      height: var(--media-slider-thumb-size);
+      border-radius: var(--media-radius-pill);
+      background-color: currentColor;
+      position: absolute;
+      translate: -50% -50%;
+    }
+
+    .media-slider-thumb[data-orientation='vertical'] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
+    }
+
+    .media-slider-track {
+      height: var(--media-slider-track-size);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-slider-track-background);
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .media-slider-track[data-orientation='vertical'] {
+      height: 100%;
+      width: var(--media-slider-track-size);
+    }
+
+    .media-slider-value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-spinner-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-thumbnail {
+      border-radius: var(--media-radius-surface);
+      position: absolute;
+      bottom: calc(100% + 0.75rem);
+      overflow: hidden;
+    }
+
+    .media-thumbnail-image {
+      max-width: 12rem;
+      max-height: 7rem;
+      display: block;
+    }
+  }
+}