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

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

@@ -0,0 +1,371 @@
+@layer videojs.components {
+  @scope (.media-skin-video-minimal) {
+    .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(0% none none / 0.5);
+      position: relative;
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px oklab(100% 0 5.96046e-8 / 0.1),
+        0 1px 3px oklab(0% none none / 0.2),
+        0 1px 2px -1px oklab(0% none none / 0.2);
+    }
+
+    .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 #0003,
+          0 1px 2px -1px #0003;
+      }
+
+      .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 #0003,
+          0 1px 2px -1px #0003;
+      }
+
+      .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 #0003,
+          0 1px 2px -1px #0003;
+      }
+
+      .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/default/__generated__/skins/minimal-video/styles/poster.css

@@ -0,0 +1,47 @@
+@layer videojs.components {
+  @scope (.media-skin-video-minimal) {
+    .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;
+    }
+  }
+}