@videojs/html 10.0.0-beta.4 → 10.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/video-minimal.css +1 -1
- package/cdn/video-minimal.dev.js +1 -1
- package/cdn/video-minimal.dev.js.map +1 -1
- package/cdn/video-minimal.js +1 -1
- package/cdn/video-minimal.js.map +1 -1
- package/cdn/video.css +1 -1
- package/cdn/video.dev.js +1 -1
- package/cdn/video.dev.js.map +1 -1
- package/cdn/video.js +1 -1
- package/cdn/video.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/skin.js +1 -1
- package/dist/default/_virtual/inline-css_src/define/video/skin.js.map +1 -1
- package/dist/default/define/video/minimal-skin.css +35 -23
- package/dist/default/define/video/skin.css +33 -17
- package/dist/default/skins/dist/default/default/tailwind/components/overlay.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
- package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +1 -1
- package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/skin.js +1 -1
- package/dist/dev/_virtual/inline-css_src/define/video/skin.js.map +1 -1
- package/dist/dev/define/video/minimal-skin.css +35 -23
- package/dist/dev/define/video/skin.css +33 -17
- package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js.map +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
- package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/components/overlay.js.map +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js +1 -1
- package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
- package/package.json +8 -8
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
|
|
217
217
|
.media-default-skin:fullscreen video,
|
|
218
218
|
.media-default-skin:fullscreen ::slotted(video),
|
|
219
|
-
.media-default-skin > img {
|
|
219
|
+
.media-default-skin:fullscreen > img {
|
|
220
220
|
object-fit: contain;
|
|
221
221
|
}
|
|
222
222
|
.media-default-skin:fullscreen ::slotted(video) {
|
|
@@ -234,22 +234,28 @@
|
|
|
234
234
|
background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
|
|
235
235
|
backdrop-filter: blur(0) saturate(1.5);
|
|
236
236
|
opacity: 0;
|
|
237
|
-
transition-property: opacity, backdrop-filter;
|
|
238
|
-
transition-duration: 300ms;
|
|
239
|
-
transition-delay: 500ms;
|
|
240
|
-
transition-timing-function: ease-out;
|
|
241
237
|
pointer-events: none;
|
|
242
238
|
|
|
243
|
-
@media (
|
|
244
|
-
transition-
|
|
239
|
+
@media (pointer: fine) {
|
|
240
|
+
transition-property: opacity, backdrop-filter;
|
|
241
|
+
transition-duration: 300ms;
|
|
242
|
+
transition-delay: 500ms;
|
|
243
|
+
transition-timing-function: ease-out;
|
|
244
|
+
|
|
245
|
+
@media (prefers-reduced-motion: reduce) {
|
|
246
|
+
transition-duration: 100ms;
|
|
247
|
+
}
|
|
245
248
|
}
|
|
246
249
|
}
|
|
247
250
|
|
|
248
251
|
.media-default-skin .media-controls[data-visible] ~ .media-overlay,
|
|
249
252
|
.media-default-skin .media-error[data-open] ~ .media-overlay {
|
|
250
253
|
opacity: 1;
|
|
251
|
-
|
|
252
|
-
|
|
254
|
+
|
|
255
|
+
@media (pointer: fine) {
|
|
256
|
+
transition-duration: 150ms;
|
|
257
|
+
transition-delay: 0ms;
|
|
258
|
+
}
|
|
253
259
|
}
|
|
254
260
|
|
|
255
261
|
.media-default-skin .media-error[data-open] ~ .media-overlay {
|
|
@@ -800,26 +806,36 @@
|
|
|
800
806
|
bottom: 0.75rem;
|
|
801
807
|
inset-inline: 0.75rem;
|
|
802
808
|
z-index: 10;
|
|
809
|
+
color: oklch(1 0 0);
|
|
810
|
+
|
|
803
811
|
will-change: scale, transform, filter, opacity;
|
|
804
|
-
transition-property: scale, transform, filter, opacity;
|
|
805
|
-
transition-duration: 100ms;
|
|
806
|
-
transition-delay: 0ms;
|
|
807
812
|
transition-timing-function: ease-out;
|
|
808
813
|
transform-origin: bottom;
|
|
809
|
-
|
|
814
|
+
|
|
815
|
+
@media (pointer: fine) {
|
|
816
|
+
transition-property: scale, transform, filter, opacity;
|
|
817
|
+
transition-duration: 100ms;
|
|
818
|
+
transition-delay: 0ms;
|
|
819
|
+
}
|
|
810
820
|
|
|
811
821
|
&:not([data-visible]) {
|
|
812
822
|
opacity: 0;
|
|
823
|
+
pointer-events: none;
|
|
813
824
|
scale: 0.9;
|
|
814
825
|
filter: blur(8px);
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
826
|
+
|
|
827
|
+
@media (pointer: fine) {
|
|
828
|
+
transition-duration: 300ms;
|
|
829
|
+
transition-delay: 500ms;
|
|
830
|
+
|
|
831
|
+
@media (prefers-reduced-motion: reduce) {
|
|
832
|
+
transition-duration: 100ms;
|
|
833
|
+
}
|
|
834
|
+
}
|
|
818
835
|
|
|
819
836
|
@media (prefers-reduced-motion: reduce) {
|
|
820
837
|
scale: 1;
|
|
821
838
|
filter: blur(0);
|
|
822
|
-
transition-duration: 100ms;
|
|
823
839
|
}
|
|
824
840
|
}
|
|
825
841
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@videojs/utils/style";
|
|
2
2
|
|
|
3
3
|
//#region ../skins/dist/default/default/tailwind/components/overlay.js
|
|
4
|
-
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
|
|
4
|
+
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-150", "[@media(pointer:fine)]:transition-[opacity,backdrop-filter]", "[@media(pointer:fine)]:ease-out", "[@media(pointer:fine)]:duration-300 [@media(pointer:fine)]:delay-500", "peer-data-visible/controls:opacity-100", "[@media(pointer:fine)]:peer-data-visible/controls:duration-150", "[@media(pointer:fine)]:peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "[@media(pointer:fine)]:peer-data-open/error:duration-150", "[@media(pointer:fine)]:peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "[@media(pointer:fine)]:motion-reduce:duration-100");
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
export { overlay };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,4CAA4C,
|
|
1
|
+
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"[@media(pointer:fine)]:transition-[opacity,backdrop-filter]\", \"[@media(pointer:fine)]:ease-out\", \"[@media(pointer:fine)]:duration-300 [@media(pointer:fine)]:delay-500\", \"peer-data-visible/controls:opacity-100\", \"[@media(pointer:fine)]:peer-data-visible/controls:duration-150\", \"[@media(pointer:fine)]:peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"[@media(pointer:fine)]:peer-data-open/error:duration-150\", \"[@media(pointer:fine)]:peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"[@media(pointer:fine)]:motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,4CAA4C,+DAA+D,mCAAmC,wEAAwE,0CAA0C,kEAAkE,6DAA6D,oCAAoC,4DAA4D,uDAAuD,yCAAyC,oDAAoD"}
|
|
@@ -34,7 +34,7 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
|
|
|
34
34
|
"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
|
|
35
35
|
}, "[&:fullscreen>img]:object-contain");
|
|
36
36
|
const surface = cn(surface$1, "bg-white/10", "backdrop-saturate-150 backdrop-blur-lg", "ring-white/5 shadow-black/10", "after:ring-black/15", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-black/90");
|
|
37
|
-
const controls = cn(controls$1, surface, "absolute bottom-3 inset-x-3", "text-white z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100
|
|
37
|
+
const controls = cn(controls$1, surface, "absolute bottom-3 inset-x-3", "text-white z-10", "will-change-[scale,transform,filter,opacity]", "[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]", "ease-out origin-bottom", "[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-100", "not-data-visible:pointer-events-none not-data-visible:opacity-0", "not-data-visible:blur-sm not-data-visible:scale-90", "[@media(pointer:fine)]:not-data-visible:delay-500", "[@media(pointer:fine)]:not-data-visible:duration-300", "[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100");
|
|
38
38
|
const slider = {
|
|
39
39
|
...slider$1,
|
|
40
40
|
track: cn(slider$1.track, "bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-white/5 shadow-black/10\", \"after:ring-black/15\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"absolute bottom-3 inset-x-3\", \"text-white z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100
|
|
1
|
+
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-white/5 shadow-black/10\", \"after:ring-black/15\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"absolute bottom-3 inset-x-3\", \"text-white z-10\", \"will-change-[scale,transform,filter,opacity]\", \"[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]\", \"ease-out origin-bottom\", \"[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-100\", \"not-data-visible:pointer-events-none not-data-visible:opacity-0\", \"not-data-visible:blur-sm not-data-visible:scale-90\", \"[@media(pointer:fine)]:not-data-visible:delay-500\", \"[@media(pointer:fine)]:not-data-visible:duration-300\", \"[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,gJAAgJ;CAChJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,UAAU,GAAG,WAAW,eAAe,0CAA0C,gCAAgC,uBAAuB,6DAA6D,4BAA4B;AACvO,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,mBAAmB,gDAAgD,sEAAsE,0BAA0B,sEAAsE,mEAAmE,sDAAsD,qDAAqD,wDAAwD,sEAAsE,4CAA4C,2CAA2C;AACprB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,mDAAmD;CAC7E;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@videojs/utils/style";
|
|
2
2
|
|
|
3
3
|
//#region ../skins/dist/default/minimal/tailwind/components/overlay.js
|
|
4
|
-
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
|
|
4
|
+
const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-150", "[@media(pointer:fine)]:transition-[opacity,backdrop-filter]", "[@media(pointer:fine)]:ease-out", "[@media(pointer:fine)]:duration-500 [@media(pointer:fine)]:delay-500", "peer-data-visible/controls:opacity-100", "[@media(pointer:fine)]:peer-data-visible/controls:duration-150", "[@media(pointer:fine)]:peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "[@media(pointer:fine)]:peer-data-open/error:duration-150", "[@media(pointer:fine)]:peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "[@media(pointer:fine)]:motion-reduce:duration-100");
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
export { overlay };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,
|
|
1
|
+
{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"[@media(pointer:fine)]:transition-[opacity,backdrop-filter]\", \"[@media(pointer:fine)]:ease-out\", \"[@media(pointer:fine)]:duration-500 [@media(pointer:fine)]:delay-500\", \"peer-data-visible/controls:opacity-100\", \"[@media(pointer:fine)]:peer-data-visible/controls:duration-150\", \"[@media(pointer:fine)]:peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"[@media(pointer:fine)]:peer-data-open/error:duration-150\", \"[@media(pointer:fine)]:peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"[@media(pointer:fine)]:motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,+DAA+D,mCAAmC,wEAAwE,0CAA0C,kEAAkE,6DAA6D,oCAAoC,4DAA4D,uDAAuD,yCAAyC,oDAAoD"}
|
|
@@ -31,7 +31,7 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
|
|
|
31
31
|
"[&:fullscreen_video]:object-contain": !isShadowDOM,
|
|
32
32
|
"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
|
|
33
33
|
}, "[&:fullscreen>img]:object-contain");
|
|
34
|
-
const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:
|
|
34
|
+
const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "ease-out", "[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "not-data-visible:translate-y-full not-data-visible:blur-sm", "[@media(pointer:fine)]:not-data-visible:delay-500", "[@media(pointer:fine)]:not-data-visible:duration-500", "[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none", "motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
|
|
35
35
|
const slider = {
|
|
36
36
|
...slider$1,
|
|
37
37
|
track: cn(slider$1.track, "shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:
|
|
1
|
+
{"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"ease-out\", \"[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"not-data-visible:translate-y-full not-data-visible:blur-sm\", \"[@media(pointer:fine)]:not-data-visible:delay-500\", \"[@media(pointer:fine)]:not-data-visible:duration-500\", \"[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,gEAAgE,YAAY,qEAAqE,mEAAmE,8DAA8D,qDAAqD,wDAAwD,sEAAsE,gDAAgD,4CAA4C,4CAA4C,gEAAgE,yBAAyB;AAC9zB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@videojs/html",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "10.0.0-beta.
|
|
4
|
+
"version": "10.0.0-beta.5",
|
|
5
5
|
"description": "HTML library for building media players",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -81,11 +81,11 @@
|
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
"dependencies": {
|
|
84
|
-
"@videojs/
|
|
85
|
-
"@videojs/
|
|
86
|
-
"@videojs/
|
|
87
|
-
"@videojs/
|
|
88
|
-
"@videojs/
|
|
84
|
+
"@videojs/spf": "10.0.0-beta.5",
|
|
85
|
+
"@videojs/store": "10.0.0-beta.5",
|
|
86
|
+
"@videojs/utils": "10.0.0-beta.5",
|
|
87
|
+
"@videojs/element": "10.0.0-beta.5",
|
|
88
|
+
"@videojs/core": "10.0.0-beta.5"
|
|
89
89
|
},
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@testing-library/dom": "^10.4.0",
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"tsdown": "^0.20.3",
|
|
94
94
|
"typescript": "^5.9.3",
|
|
95
95
|
"vitest": "^3.2.4",
|
|
96
|
-
"@videojs/icons": "10.0.0-beta.
|
|
97
|
-
"@videojs/skins": "10.0.0-
|
|
96
|
+
"@videojs/icons": "10.0.0-beta.5",
|
|
97
|
+
"@videojs/skins": "10.0.0-beta.5"
|
|
98
98
|
},
|
|
99
99
|
"publishConfig": {
|
|
100
100
|
"access": "public"
|