@videojs/html 0.1.0-preview.4 → 0.1.0-preview.6

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.
Files changed (43) hide show
  1. package/README.md +1 -1
  2. package/dist/define/index.d.ts +1 -1
  3. package/dist/define/index.js +6 -6
  4. package/dist/define/media-popover.js +2 -2
  5. package/dist/define/media-tooltip.js +2 -2
  6. package/dist/define/video-provider.d.ts +1 -0
  7. package/dist/define/video-provider.js +3 -0
  8. package/dist/index.d.ts +5 -32
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +5 -5
  11. package/dist/{media-popover-F4M4Tq4z.js → media-popover-DVCIlSBX.js} +2 -2
  12. package/dist/{media-popover-F4M4Tq4z.js.map → media-popover-DVCIlSBX.js.map} +1 -1
  13. package/dist/{media-skin-mHWwUPg3.js → media-skin-CxnuHwhu.js} +1 -1
  14. package/dist/{media-skin-mHWwUPg3.js.map → media-skin-CxnuHwhu.js.map} +1 -1
  15. package/dist/media-tooltip-C4jOtQ8a.js +8 -0
  16. package/dist/media-tooltip-C4jOtQ8a.js.map +1 -0
  17. package/dist/{popover-Dc0hyhwB.js → popover-ty9dFDNE.js} +4 -2
  18. package/dist/popover-ty9dFDNE.js.map +1 -0
  19. package/dist/skins/frosted.d.ts +1 -1
  20. package/dist/skins/frosted.d.ts.map +1 -1
  21. package/dist/skins/frosted.js +61 -60
  22. package/dist/skins/frosted.js.map +1 -1
  23. package/dist/skins/minimal.d.ts +1 -1
  24. package/dist/skins/minimal.d.ts.map +1 -1
  25. package/dist/skins/minimal.js +60 -59
  26. package/dist/skins/minimal.js.map +1 -1
  27. package/dist/tooltip-CJpujx2f.js +219 -0
  28. package/dist/tooltip-CJpujx2f.js.map +1 -0
  29. package/dist/video-provider-BCGedOLm.js +8 -0
  30. package/dist/video-provider-BCGedOLm.js.map +1 -0
  31. package/dist/{media-provider-CyoL0bCx.js → video-provider-BKDqoKFf.js} +4 -4
  32. package/dist/{media-provider-CyoL0bCx.js.map → video-provider-BKDqoKFf.js.map} +1 -1
  33. package/package.json +4 -4
  34. package/dist/define/media-provider.d.ts +0 -1
  35. package/dist/define/media-provider.js +0 -3
  36. package/dist/media-provider-D_GL2_DN.js +0 -8
  37. package/dist/media-provider-D_GL2_DN.js.map +0 -1
  38. package/dist/media-tooltip-ClcVafMb.js +0 -14
  39. package/dist/media-tooltip-ClcVafMb.js.map +0 -1
  40. package/dist/popover-Dc0hyhwB.js.map +0 -1
  41. package/dist/tooltip-54fBUUpb.js +0 -296
  42. package/dist/tooltip-54fBUUpb.js.map +0 -1
  43. /package/dist/{media-provider-D7P2TLXG.d.ts → video-provider-BcBuWpx6.d.ts} +0 -0
package/dist/skins/minimal.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import "../media-container-DPnFjmtK.js";
2
- import "../media-provider-D7P2TLXG.js";
2
+ import "../video-provider-BcBuWpx6.js";
3
3
  import "../media-play-button-oq8yDlxe.js";
4
4
  import "../media-mute-button-NVJF2EEW.js";
5
5
  import "../media-volume-slider-DP47VLVi.js";
package/dist/skins/minimal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cAyGH,uBAAA,SAAgC,gBAAA;EAzG7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AAyGhB"}
1
+ {"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,eAAA,CAAA;cA0GH,uBAAA,SAAgC,gBAAA;EA1G7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AA0GhB"}
package/dist/skins/minimal.js CHANGED
@@ -5,18 +5,18 @@ import "../button-D1DWjsQu.js";
5
5
  import "../fullscreen-button-CGO2UJjs.js";
6
6
  import "../mute-button-vW2sLqqY.js";
7
7
  import "../play-button-aVb0g10G.js";
8
- import "../popover-Dc0hyhwB.js";
8
+ import "../popover-ty9dFDNE.js";
9
9
  import "../preview-time-display-Dax0FQ2X.js";
10
10
  import "../time-slider-CA1GMs6A.js";
11
- import "../tooltip-54fBUUpb.js";
11
+ import "../tooltip-CJpujx2f.js";
12
12
  import "../volume-slider-guD8gqpi.js";
13
13
  import "../media-container-C0MUzkJ_.js";
14
- import "../media-provider-CyoL0bCx.js";
15
- import { t as MediaSkinElement } from "../media-skin-mHWwUPg3.js";
14
+ import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
15
+ import "../video-provider-BKDqoKFf.js";
16
16
  import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
17
17
  import "../icons-CuxuONCk.js";
18
18
  import "../media-container-BGEXSi9g.js";
19
- import "../media-provider-D_GL2_DN.js";
19
+ import "../video-provider-BCGedOLm.js";
20
20
  import "../media-play-button-CLj-hkwn.js";
21
21
  import "../media-mute-button-BOVhZ3aP.js";
22
22
  import "../media-volume-slider-CKSxmdQv.js";
@@ -25,11 +25,11 @@ import "../media-fullscreen-button-Dcflbt54.js";
25
25
  import "../media-duration-display-BLMr7VHo.js";
26
26
  import "../media-current-time-display-B-4Cp845.js";
27
27
  import "../media-preview-time-display-DAiMgLPX.js";
28
- import "../media-popover-F4M4Tq4z.js";
29
- import "../media-tooltip-ClcVafMb.js";
28
+ import "../media-popover-DVCIlSBX.js";
29
+ import "../media-tooltip-C4jOtQ8a.js";
30
30
 
31
31
  //#region src/skins/minimal/styles.css
32
- var styles_default = "media-container * {\n box-sizing: border-box;\n}\n\nmedia-container {\n position: relative;\n isolation: isolate;\n container: root / inline-size;\n overflow: clip;\n font-size: 0.8125rem;\n line-height: 1.5;\n border-radius: inherit;\n background: oklab(0 0 0);\n}\nmedia-container::after {\n content: '';\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n z-index: 10;\n inset: 0;\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\n}\n@media (prefers-color-scheme: dark) {\n media-container::after {\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\n }\n}\n\n/* Fullscreen */\nmedia-container:fullscreen {\n border-radius: 0;\n}\n\nmedia-container > ::slotted([slot='media']) {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Media Container UI Overlay Styling */\nmedia-container > .overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-flow: column nowrap;\n align-items: start;\n pointer-events: none;\n border-radius: inherit;\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\n transform: translateY(100%);\n transition-property: transform, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n transition-delay: 500ms;\n opacity: 0;\n}\nmedia-container:hover > .overlay,\nmedia-container:has([data-paused]) > .overlay,\nmedia-container:has([aria-expanded='true']) > .overlay {\n opacity: 1;\n transform: translateY(0);\n transition-duration: 100ms;\n transition-delay: 0ms;\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.875rem;\n will-change: transform, filter, opacity;\n transform: translateY(100%);\n opacity: 0;\n filter: blur(8px);\n transition-property: transform, filter, opacity;\n transition-delay: 500ms;\n transition-duration: 300ms;\n transition-timing-function: ease-out;\n color: oklab(1 0 0);\n}\nmedia-container:hover > .control-bar,\nmedia-container:has([data-paused]) > .control-bar,\nmedia-container:has([aria-expanded='true']) > .control-bar {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0px);\n transition-delay: 0ms;\n transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-display-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.duration-display {\n display: contents;\n color: oklab(1 0 0 / 0.5);\n}\nmedia-current-time-display,\nmedia-duration-display {\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\n font-variant-numeric: tabular-nums;\n}\n\n.button-group {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n/* Generic Media Button Styling */\n.button {\n display: grid;\n flex-shrink: 0;\n padding: 0.625rem;\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: 0.375rem;\n color: oklab(1 0 0);\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n transition-property: background-color, color, outline-offset;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n}\n.button:hover,\n.button:focus-visible,\n.button[aria-expanded='true'] {\n color: oklab(1 0 0 / 0.8);\n text-decoration: none;\n}\n.button:focus-visible {\n outline-color: oklab(1 0 0);\n outline-offset: 2px;\n}\n.button[disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n filter: grayscale(1);\n}\n\n.button .icon {\n grid-area: 1 / 1;\n width: 18px;\n height: 18px;\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\n}\n\n/* Media Play Button UI/Styles */\nmedia-play-button .icon {\n opacity: 0;\n transition: opacity 150ms linear;\n}\n\nmedia-play-button:not([data-paused]) .pause-icon,\nmedia-play-button[data-paused] .play-icon {\n opacity: 1;\n}\n\n/* Media Fullscreen Button UI/Styles */\nmedia-fullscreen-button .icon {\n display: none;\n}\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n display: inline;\n}\n\n/* One way to define the \"default visible\" icon (CJP) */\nmedia-mute-button .icon {\n display: none;\n}\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\n display: inline;\n}\n\n/* TimeSlider Component Styles */\n.slider {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: calc(infinity * 1px);\n outline: none;\n}\n\n/* Horizontal orientation styles */\n.slider[data-orientation='horizontal'] {\n min-width: 5rem;\n width: 100%;\n height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider[data-orientation='vertical'] {\n height: 4.5rem;\n width: 1.25rem;\n}\n\n.slider-track {\n position: relative;\n isolation: isolate;\n background-color: oklab(1 0 0 / 0.2);\n border-radius: inherit;\n overflow: hidden;\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n transition: outline-offset 150ms ease-out;\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\n}\n\n/* Horizontal track styles */\n.slider-track[data-orientation='horizontal'] {\n width: 100%;\n height: 0.1875rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n width: 0.1875rem;\n height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n outline-color: oklab(1 0 0);\n outline-offset: 6px;\n}\n\n.slider-thumb {\n width: 0.75rem;\n height: 0.75rem;\n background-color: oklab(1 0 0);\n border-radius: calc(infinity * 1px);\n user-select: none;\n z-index: 10;\n box-shadow:\n 0 0 0 1px oklab(0 0 0 / 0.1),\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\n opacity: 0;\n scale: 0.7;\n transform-origin: center;\n transition-property: opacity, scale;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n opacity: 1;\n scale: 1;\n}\n.slider-track[data-orientation='horizontal'] .slider-thumb {\n cursor: ew-resize;\n}\n.slider-track[data-orientation='vertical'] .slider-thumb {\n cursor: ns-resize;\n}\n\n.slider-pointer {\n display: none;\n}\n\n.slider-progress {\n background-color: oklab(1 0 0);\n border-radius: inherit;\n}\n\nmedia-preview-time-display {\n font-variant-numeric: tabular-nums;\n}\n\n.popup-animation {\n transition-property: transform, scale, opacity, filter;\n transition-duration: 200ms;\n transform: scale(1);\n transform-origin: bottom;\n opacity: 1;\n filter: blur(0px);\n}\n.popup-animation[data-starting-style],\n.popup-animation[data-ending-style] {\n transform: scale(0);\n opacity: 0;\n filter: blur(8px);\n}\n.popup-animation[data-instant] {\n transition-duration: 0ms;\n}\n\nmedia-popover {\n margin: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n padding: 0.75rem 0.25rem;\n border-radius: calc(infinity * 1px);\n}\n\n/* Tooltip Component Styles */\nmedia-tooltip-popup {\n color: oklab(1 0 0);\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n font-size: 0.75rem;\n background-color: oklab(1 0 0 / 0.1);\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n box-shadow:\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\n}\n@media (prefers-reduced-transparency: reduce) {\n media-tooltip-popup {\n background-color: oklab(0 0 0 / 0.7);\n }\n}\n@media (prefers-contrast: more) {\n media-tooltip-popup {\n background-color: oklab(0 0 0 / 0.9);\n }\n}\n\n.tooltip {\n display: none;\n white-space: nowrap;\n}\n\nmedia-tooltip-popup[data-paused] .play-tooltip,\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\n display: block;\n}\n\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\n display: block;\n}\n";
32
+ var styles_default = "media-container * {\n box-sizing: border-box;\n}\n\nmedia-container {\n position: relative;\n isolation: isolate;\n container: root / inline-size;\n overflow: clip;\n font-size: 0.8125rem;\n line-height: 1.5;\n border-radius: inherit;\n background: oklab(0 0 0);\n}\nmedia-container::after {\n content: '';\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n z-index: 10;\n inset: 0;\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\n}\n@media (prefers-color-scheme: dark) {\n media-container::after {\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\n }\n}\n\n/* Fullscreen */\nmedia-container:fullscreen {\n border-radius: 0;\n}\n\nmedia-container > ::slotted([slot='media']) {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Media Container UI Overlay Styling */\nmedia-container > .overlay {\n position: absolute;\n inset: 0;\n display: flex;\n flex-flow: column nowrap;\n align-items: start;\n pointer-events: none;\n border-radius: inherit;\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\n transform: translateY(100%);\n transition-property: transform, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n transition-delay: 500ms;\n opacity: 0;\n}\nmedia-container:hover > .overlay,\nmedia-container:has([data-paused]) > .overlay,\nmedia-container:has([aria-expanded='true']) > .overlay {\n opacity: 1;\n transform: translateY(0);\n transition-duration: 100ms;\n transition-delay: 0ms;\n}\n\n/* Media Control Bar UI/Styles */\n.control-bar {\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.875rem;\n will-change: transform, filter, opacity;\n transform: translateY(100%);\n opacity: 0;\n filter: blur(8px);\n transition-property: transform, filter, opacity;\n transition-delay: 500ms;\n transition-duration: 300ms;\n transition-timing-function: ease-out;\n color: oklab(1 0 0);\n}\nmedia-container:hover > .control-bar,\nmedia-container:has([data-paused]) > .control-bar,\nmedia-container:has([aria-expanded='true']) > .control-bar {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0px);\n transition-delay: 0ms;\n transition-duration: 100ms;\n}\n\n/* Time Display Styling */\n.time-display-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.duration-display {\n display: contents;\n color: oklab(1 0 0 / 0.5);\n}\nmedia-current-time-display,\nmedia-duration-display {\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\n font-variant-numeric: tabular-nums;\n}\n\n.button-group {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n/* Generic Media Button Styling */\n.button {\n display: grid;\n flex-shrink: 0;\n padding: 0.625rem;\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: 0.375rem;\n color: oklab(1 0 0);\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n transition-property: background-color, color, outline-offset;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n}\n.button:hover,\n.button:focus-visible,\n.button[aria-expanded='true'] {\n color: oklab(1 0 0 / 0.8);\n text-decoration: none;\n}\n.button:focus-visible {\n outline-color: oklab(1 0 0);\n outline-offset: 2px;\n}\n.button[disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n filter: grayscale(1);\n}\n\n.button .icon {\n grid-area: 1 / 1;\n width: 18px;\n height: 18px;\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\n}\n\n/* Media Play Button UI/Styles */\nmedia-play-button .icon {\n opacity: 0;\n transition: opacity 150ms linear;\n}\n\nmedia-play-button:not([data-paused]) .pause-icon,\nmedia-play-button[data-paused] .play-icon {\n opacity: 1;\n}\n\n/* Media Fullscreen Button UI/Styles */\nmedia-fullscreen-button .icon {\n display: none;\n}\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n display: inline;\n}\n\n/* One way to define the \"default visible\" icon (CJP) */\nmedia-mute-button .icon {\n display: none;\n}\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\n display: inline;\n}\n\n/* TimeSlider Component Styles */\n.slider {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: calc(infinity * 1px);\n outline: none;\n}\n\n/* Horizontal orientation styles */\n.slider[data-orientation='horizontal'] {\n min-width: 5rem;\n width: 100%;\n height: 1.25rem;\n}\n\n/* Vertical orientation styles */\n.slider[data-orientation='vertical'] {\n height: 4.5rem;\n width: 1.25rem;\n}\n\n.slider-track {\n position: relative;\n isolation: isolate;\n background-color: oklab(1 0 0 / 0.2);\n border-radius: inherit;\n overflow: hidden;\n user-select: none;\n outline: 2px solid transparent;\n outline-offset: -2px;\n transition: outline-offset 150ms ease-out;\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\n}\n\n/* Horizontal track styles */\n.slider-track[data-orientation='horizontal'] {\n width: 100%;\n height: 0.1875rem;\n}\n\n/* Vertical track styles */\n.slider-track[data-orientation='vertical'] {\n width: 0.1875rem;\n height: 100%;\n}\n\n.slider:focus-visible .slider-track {\n outline-color: oklab(1 0 0);\n outline-offset: 6px;\n}\n\n.slider-thumb {\n width: 0.75rem;\n height: 0.75rem;\n background-color: oklab(1 0 0);\n border-radius: calc(infinity * 1px);\n user-select: none;\n z-index: 10;\n box-shadow:\n 0 0 0 1px oklab(0 0 0 / 0.1),\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\n opacity: 0;\n scale: 0.7;\n transform-origin: center;\n transition-property: opacity, scale;\n transition-duration: 150ms;\n transition-timing-function: ease-out;\n}\n.slider:hover .slider-thumb,\n.slider:focus-within .slider-thumb {\n opacity: 1;\n scale: 1;\n}\n.slider-track[data-orientation='horizontal'] .slider-thumb {\n cursor: ew-resize;\n}\n.slider-track[data-orientation='vertical'] .slider-thumb {\n cursor: ns-resize;\n}\n\n.slider-pointer {\n display: none;\n}\n\n.slider-progress {\n background-color: oklab(1 0 0);\n border-radius: inherit;\n}\n\nmedia-preview-time-display {\n font-variant-numeric: tabular-nums;\n}\n\n.popup-animation {\n transition-property: transform, scale, opacity, filter;\n transition-duration: 200ms;\n transform: scale(1);\n transform-origin: bottom;\n opacity: 1;\n filter: blur(0px);\n}\n.popup-animation[data-starting-style],\n.popup-animation[data-ending-style] {\n transform: scale(0);\n opacity: 0;\n filter: blur(8px);\n}\n.popup-animation[data-instant] {\n transition-duration: 0ms;\n}\n\nmedia-popover {\n margin: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n padding: 0.75rem 0.25rem;\n border-radius: calc(infinity * 1px);\n}\n\n/* Tooltip Component Styles */\nmedia-tooltip {\n margin: 0;\n border: none;\n box-shadow: none;\n background: transparent;\n color: oklab(1 0 0);\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n font-size: 0.75rem;\n background-color: oklab(1 0 0 / 0.1);\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n box-shadow:\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\n}\n@media (prefers-reduced-transparency: reduce) {\n media-tooltip {\n background-color: oklab(0 0 0 / 0.7);\n }\n}\n@media (prefers-contrast: more) {\n media-tooltip {\n background-color: oklab(0 0 0 / 0.9);\n }\n}\n\n.tooltip {\n display: none;\n white-space: nowrap;\n}\n\n[data-paused] + media-tooltip .play-tooltip,\n:not([data-paused]) + media-tooltip .pause-tooltip {\n display: block;\n}\n\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\n display: block;\n}\n";
33
33
 
34
34
  //#endregion
35
35
  //#region src/skins/minimal/index.ts
@@ -45,21 +45,22 @@ function getTemplateHTML() {
45
45
 
46
46
  <div class="control-bar">
47
47
  <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
48
- <media-tooltip delay="500" close-delay="0">
49
- <media-tooltip-trigger>
50
- <media-play-button class="button">
51
- <media-play-icon class="icon play-icon"></media-play-icon>
52
- <media-pause-icon class="icon pause-icon"></media-pause-icon>
53
- </media-play-button>
54
- </media-tooltip-trigger>
55
- <media-tooltip-portal>
56
- <media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
57
- <media-tooltip-popup class="popup-animation">
58
- <span class="tooltip play-tooltip">Play</span>
59
- <span class="tooltip pause-tooltip">Pause</span>
60
- </media-tooltip-popup>
61
- </media-tooltip-positioner>
62
- </media-tooltip-portal>
48
+
49
+ <media-play-button commandfor="play-tooltip" class="button">
50
+ <media-play-icon class="icon play-icon"></media-play-icon>
51
+ <media-pause-icon class="icon pause-icon"></media-pause-icon>
52
+ </media-play-button>
53
+ <media-tooltip
54
+ id="play-tooltip"
55
+ class="popup-animation"
56
+ popover="manual"
57
+ delay="500"
58
+ side="top"
59
+ side-offset="6"
60
+ collision-padding="12"
61
+ >
62
+ <span class="tooltip play-tooltip">Play</span>
63
+ <span class="tooltip pause-tooltip">Pause</span>
63
64
  </media-tooltip>
64
65
 
65
66
  <div class="time-display-group">
@@ -72,35 +73,35 @@ function getTemplateHTML() {
72
73
  </span>
73
74
  </div>
74
75
 
75
- <media-tooltip track-cursor-axis="x">
76
- <media-tooltip-trigger>
77
- <media-time-slider class="slider">
78
- <media-time-slider-track class="slider-track">
79
- <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
80
- <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
81
- </media-time-slider-track>
82
- <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
83
- </media-time-slider>
84
- </media-tooltip-trigger>
85
- <media-tooltip-portal>
86
- <media-tooltip-positioner side="top" side-offset="12" collision-padding="12">
87
- <media-tooltip-popup class="popup-animation">
88
- <media-preview-time-display></media-preview-time-display>
89
- </media-tooltip-popup>
90
- </media-tooltip-positioner>
91
- </media-tooltip-portal>
76
+ <media-time-slider commandfor="time-slider-tooltip" class="slider">
77
+ <media-time-slider-track class="slider-track">
78
+ <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
79
+ <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
80
+ </media-time-slider-track>
81
+ <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
82
+ </media-time-slider>
83
+ <media-tooltip
84
+ id="time-slider-tooltip"
85
+ class="popup-animation"
86
+ popover="manual"
87
+ track-cursor-axis="x"
88
+ side="top"
89
+ side-offset="12"
90
+ collision-padding="12"
91
+ >
92
+ <media-preview-time-display></media-preview-time-display>
92
93
  </media-tooltip>
93
94
 
94
95
  <div class="button-group">
95
- <media-mute-button popovertarget="volume-slider-popover" class="button">
96
+ <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
96
97
  <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
97
98
  <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
98
99
  <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
99
100
  </media-mute-button>
100
- <media-popover
101
- id="volume-slider-popover"
101
+ <media-popover
102
+ id="volume-slider-popover"
102
103
  class="popup-animation"
103
- popover
104
+ popover="manual"
104
105
  open-on-hover
105
106
  delay="200"
106
107
  close-delay="100"
@@ -116,21 +117,21 @@ function getTemplateHTML() {
116
117
  </media-volume-slider>
117
118
  </media-popover>
118
119
 
119
- <media-tooltip delay="500" close-delay="0">
120
- <media-tooltip-trigger>
121
- <media-fullscreen-button class="button">
122
- <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
123
- <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
124
- </media-fullscreen-button>
125
- </media-tooltip-trigger>
126
- <media-tooltip-portal>
127
- <media-tooltip-positioner side="top" side-offset="6" collision-padding="12">
128
- <media-tooltip-popup class="popup-animation">
129
- <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
130
- <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
131
- </media-tooltip-popup>
132
- </media-tooltip-positioner>
133
- </media-tooltip-portal>
120
+ <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
121
+ <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
122
+ <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
123
+ </media-fullscreen-button>
124
+ <media-tooltip
125
+ id="fullscreen-tooltip"
126
+ class="popup-animation"
127
+ popover="manual"
128
+ delay="500"
129
+ side="top"
130
+ side-offset="6"
131
+ collision-padding="12"
132
+ >
133
+ <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
134
+ <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
134
135
  </media-tooltip>
135
136
  </div>
136
137
  </div>
package/dist/skins/minimal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n media-container::after {\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n transform: translateY(100%);\\n transition-property: transform, opacity;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transform: translateY(0);\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0;\\n inset-inline: 0;\\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n display: flex;\\n align-items: center;\\n gap: 0.875rem;\\n will-change: transform, filter, opacity;\\n transform: translateY(100%);\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n transform: translateY(0);\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.duration-display {\\n display: contents;\\n color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.625rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: 0.375rem;\\n color: oklab(1 0 0);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n color: oklab(1 0 0 / 0.8);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklab(1 0 0);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 4.5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.1875rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklab(1 0 0);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.75rem;\\n height: 0.75rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n scale: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n display: none;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip-popup {\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n font-size: 0.75rem;\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n media-tooltip-popup {\\n background-color: oklab(0 0 0 / 0.7);\\n }\\n}\\n@media (prefers-contrast: more) {\\n media-tooltip-popup {\\n background-color: oklab(0 0 0 / 0.9);\\n }\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\nmedia-tooltip-popup[data-paused] .play-tooltip,\\nmedia-tooltip-popup:not([data-paused]) .pause-tooltip {\\n display: block;\\n}\\n\\nmedia-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\\nmedia-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/media-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\n\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n <media-tooltip delay=\"500\" close-delay=\"0\">\n <media-tooltip-trigger>\n <media-play-button class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"6\" collision-padding=\"12\">\n <media-tooltip-popup class=\"popup-animation\">\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip>\n\n <div class=\"time-display-group\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <span class=\"duration-display\">\n /\n <media-duration-display></media-duration-display>\n </span>\n </div>\n\n <media-tooltip track-cursor-axis=\"x\">\n <media-tooltip-trigger>\n <media-time-slider class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"12\" collision-padding=\"12\">\n <media-tooltip-popup class=\"popup-animation\">\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip>\n\n <div class=\"button-group\">\n <media-mute-button popovertarget=\"volume-slider-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover \n id=\"volume-slider-popover\" \n class=\"popup-animation\"\n popover\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"2\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-tooltip delay=\"500\" close-delay=\"0\">\n <media-tooltip-trigger>\n <media-fullscreen-button class=\"button\">\n <media-fullscreen-enter-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-alt-icon>\n </media-fullscreen-button>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"6\" collision-padding=\"12\">\n <media-tooltip-popup class=\"popup-animation\">\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip>\n </div>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
1
+ {"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n media-container::after {\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Fullscreen */\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Media Container UI Overlay Styling */\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n transform: translateY(100%);\\n transition-property: transform, opacity;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transform: translateY(0);\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n position: absolute;\\n bottom: 0;\\n inset-inline: 0;\\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n display: flex;\\n align-items: center;\\n gap: 0.875rem;\\n will-change: transform, filter, opacity;\\n transform: translateY(100%);\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n transform: translateY(0);\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-display-group {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.duration-display {\\n display: contents;\\n color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.375rem;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.625rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: 0.375rem;\\n color: oklab(1 0 0);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n color: oklab(1 0 0 / 0.8);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklab(1 0 0);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\\n}\\n\\n/* Media Play Button UI/Styles */\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/* Media Fullscreen Button UI/Styles */\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/* One way to define the \\\"default visible\\\" icon (CJP) */\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/* TimeSlider Component Styles */\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity * 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles */\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider[data-orientation='vertical'] {\\n height: 4.5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/* Horizontal track styles */\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.1875rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n width: 0.1875rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklab(1 0 0);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.75rem;\\n height: 0.75rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity * 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n scale: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n display: none;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles */\\nmedia-tooltip {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n color: oklab(1 0 0);\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n font-size: 0.75rem;\\n background-color: oklab(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklab(0 0 0 / 0.1),\\n 0 2px 4px -2px oklab(0 0 0 / 0.1);\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.7);\\n }\\n}\\n@media (prefers-contrast: more) {\\n media-tooltip {\\n background-color: oklab(0 0 0 / 0.9);\\n }\\n}\\n\\n.tooltip {\\n display: none;\\n white-space: nowrap;\\n}\\n\\n[data-paused] + media-tooltip .play-tooltip,\\n:not([data-paused]) + media-tooltip .pause-tooltip {\\n display: block;\\n}\\n\\n[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,\\n:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {\\n display: block;\\n}\\n\"","import { MediaSkinElement } from '@/media/media-skin';\nimport { defineCustomElement } from '@/utils/custom-element';\nimport styles from './styles.css';\nimport '@/define/media-container';\nimport '@/define/video-provider';\nimport '@/define/media-play-button';\nimport '@/define/media-mute-button';\nimport '@/define/media-volume-slider';\nimport '@/define/media-time-slider';\nimport '@/define/media-fullscreen-button';\nimport '@/define/media-duration-display';\nimport '@/define/media-current-time-display';\nimport '@/define/media-preview-time-display';\nimport '@/define/media-popover';\n\nimport '@/define/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkinElement.getTemplateHTML()}\n <style>${styles}</style>\n\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n\n <media-play-button commandfor=\"play-tooltip\" class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n <media-tooltip\n id=\"play-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip>\n\n <div class=\"time-display-group\">\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display></media-current-time-display>\n\n <span class=\"duration-display\">\n /\n <media-duration-display></media-duration-display>\n </span>\n </div>\n\n <media-time-slider commandfor=\"time-slider-tooltip\" class=\"slider\">\n <media-time-slider-track class=\"slider-track\">\n <media-time-slider-progress class=\"slider-progress\"></media-time-slider-progress>\n <media-time-slider-pointer class=\"slider-pointer\"></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb class=\"slider-thumb\"></media-time-slider-thumb>\n </media-time-slider>\n <media-tooltip\n id=\"time-slider-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n track-cursor-axis=\"x\"\n side=\"top\"\n side-offset=\"12\"\n collision-padding=\"12\"\n >\n <media-preview-time-display></media-preview-time-display>\n </media-tooltip>\n\n <div class=\"button-group\">\n <media-mute-button commandfor=\"volume-slider-popover\" command=\"toggle-popover\" class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n <media-popover\n id=\"volume-slider-popover\"\n class=\"popup-animation\"\n popover=\"manual\"\n open-on-hover\n delay=\"200\"\n close-delay=\"100\"\n side=\"top\"\n side-offset=\"2\"\n collision-padding=\"12\"\n >\n <media-volume-slider class=\"slider\" orientation=\"vertical\">\n <media-volume-slider-track class=\"slider-track\">\n <media-volume-slider-indicator class=\"slider-progress\"></media-volume-slider-indicator>\n </media-volume-slider-track>\n <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"button\">\n <media-fullscreen-enter-alt-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-alt-icon>\n <media-fullscreen-exit-alt-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n <media-tooltip\n id=\"fullscreen-tooltip\"\n class=\"popup-animation\"\n popover=\"manual\"\n delay=\"500\"\n side=\"top\"\n side-offset=\"6\"\n collision-padding=\"12\"\n >\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip>\n </div>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinMinimalElement extends MediaSkinElement {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-minimal', MediaSkinMinimalElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}
package/dist/tooltip-CJpujx2f.js ADDED
@@ -0,0 +1,219 @@
1
+ import { getDocumentOrShadowRoot } from "@videojs/utils/dom";
2
+ import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
3
+
4
+ //#region src/elements/tooltip.ts
5
+ var TooltipElement = class extends HTMLElement {
6
+ #open = false;
7
+ #hoverTimeout = null;
8
+ #cleanup = null;
9
+ #arrowElement = null;
10
+ #pointerPosition = {
11
+ x: 0,
12
+ y: 0
13
+ };
14
+ #transitionStatus = "initial";
15
+ #abortController = null;
16
+ connectedCallback() {
17
+ this.setAttribute("role", "tooltip");
18
+ this.#abortController ??= new AbortController();
19
+ const { signal } = this.#abortController;
20
+ const trigger = this.#triggerElement;
21
+ if (trigger) {
22
+ if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
23
+ trigger.addEventListener("pointerenter", this, { signal });
24
+ trigger.addEventListener("pointerleave", this, { signal });
25
+ trigger.addEventListener("pointermove", this, { signal });
26
+ }
27
+ }
28
+ this.#updateVisibility();
29
+ }
30
+ disconnectedCallback() {
31
+ this.#clearHoverTimeout();
32
+ this.#cleanup?.();
33
+ this.#abortController?.abort();
34
+ this.#abortController = null;
35
+ this.#transitionStatus = "unmounted";
36
+ this.#updateVisibility();
37
+ }
38
+ handleEvent(event) {
39
+ switch (event.type) {
40
+ case "pointerenter":
41
+ this.#handlePointerEnter();
42
+ break;
43
+ case "pointerleave":
44
+ this.#handlePointerLeave(event);
45
+ break;
46
+ case "pointermove":
47
+ this.#handlePointerMove(event);
48
+ break;
49
+ default: break;
50
+ }
51
+ }
52
+ static get observedAttributes() {
53
+ return [
54
+ "delay",
55
+ "close-delay",
56
+ "track-cursor-axis",
57
+ "side",
58
+ "side-offset",
59
+ "collision-padding"
60
+ ];
61
+ }
62
+ get delay() {
63
+ return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
64
+ }
65
+ get closeDelay() {
66
+ return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
67
+ }
68
+ get trackCursorAxis() {
69
+ const value = this.getAttribute("track-cursor-axis");
70
+ return value === "x" || value === "y" || value === "both" ? value : void 0;
71
+ }
72
+ get side() {
73
+ return this.getAttribute("side") ?? "top";
74
+ }
75
+ get sideOffset() {
76
+ return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
77
+ }
78
+ get collisionPadding() {
79
+ return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
80
+ }
81
+ get #triggerElement() {
82
+ return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`);
83
+ }
84
+ #setOpen(open) {
85
+ if (this.#open === open) return;
86
+ this.#open = open;
87
+ if (open) {
88
+ this.#setupFloating();
89
+ this.#transitionStatus = "initial";
90
+ this.#updateVisibility();
91
+ this.showPopover();
92
+ requestAnimationFrame(() => {
93
+ this.#transitionStatus = "open";
94
+ this.#updateVisibility();
95
+ });
96
+ } else {
97
+ this.#transitionStatus = "close";
98
+ this.#updateVisibility();
99
+ const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
100
+ if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
101
+ else this.hidePopover();
102
+ this.#cleanup?.();
103
+ this.#cleanup = null;
104
+ }
105
+ }
106
+ #updateVisibility() {
107
+ this.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
108
+ this.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
109
+ this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
110
+ this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
111
+ const triggerElement = this.#triggerElement;
112
+ if (triggerElement) triggerElement.toggleAttribute("data-popup-open", this.#open);
113
+ }
114
+ #setupFloating() {
115
+ const trigger = this.#triggerElement;
116
+ if (!trigger) return;
117
+ const placement = this.side;
118
+ const sideOffset = this.sideOffset;
119
+ const collisionPadding = this.collisionPadding;
120
+ const mediaContainer = this.closest("media-container");
121
+ this.#arrowElement = this.querySelector("media-tooltip-arrow");
122
+ const updatePosition = () => {
123
+ const middleware = [
124
+ offset(sideOffset),
125
+ flip(),
126
+ shift({
127
+ boundary: mediaContainer,
128
+ padding: collisionPadding
129
+ })
130
+ ];
131
+ if (this.#arrowElement) middleware.push(arrow({ element: this.#arrowElement }));
132
+ computePosition(this.trackCursorAxis ? { getBoundingClientRect: () => {
133
+ const triggerRect = trigger.getBoundingClientRect();
134
+ if (this.trackCursorAxis === "x") return {
135
+ width: 0,
136
+ height: 0,
137
+ top: triggerRect.top,
138
+ right: this.#pointerPosition.x,
139
+ bottom: triggerRect.bottom,
140
+ left: this.#pointerPosition.x,
141
+ x: this.#pointerPosition.x,
142
+ y: triggerRect.top
143
+ };
144
+ else if (this.trackCursorAxis === "y") return {
145
+ width: 0,
146
+ height: 0,
147
+ top: this.#pointerPosition.y,
148
+ right: triggerRect.right,
149
+ bottom: this.#pointerPosition.y,
150
+ left: triggerRect.left,
151
+ x: triggerRect.left,
152
+ y: this.#pointerPosition.y
153
+ };
154
+ else return {
155
+ width: 0,
156
+ height: 0,
157
+ top: this.#pointerPosition.y,
158
+ right: this.#pointerPosition.x,
159
+ bottom: this.#pointerPosition.y,
160
+ left: this.#pointerPosition.x,
161
+ x: this.#pointerPosition.x,
162
+ y: this.#pointerPosition.y
163
+ };
164
+ } } : trigger, this, {
165
+ placement,
166
+ middleware,
167
+ strategy: "fixed"
168
+ }).then(({ x, y, middlewareData }) => {
169
+ Object.assign(this.style, {
170
+ left: `${x}px`,
171
+ top: `${y}px`
172
+ });
173
+ if (this.#arrowElement && middlewareData.arrow) {
174
+ const { x: arrowX, y: arrowY } = middlewareData.arrow;
175
+ Object.assign(this.#arrowElement.style, {
176
+ left: arrowX != null ? `${arrowX}px` : void 0,
177
+ top: arrowY != null ? `${arrowY}px` : void 0
178
+ });
179
+ }
180
+ });
181
+ };
182
+ updatePosition();
183
+ if (!this.trackCursorAxis) this.#cleanup = autoUpdate(trigger, this, updatePosition);
184
+ }
185
+ #updatePosition() {
186
+ if (this.#open && this.trackCursorAxis) this.#setupFloating();
187
+ }
188
+ #clearHoverTimeout() {
189
+ if (this.#hoverTimeout) {
190
+ globalThis.clearTimeout(this.#hoverTimeout);
191
+ this.#hoverTimeout = null;
192
+ }
193
+ }
194
+ #handlePointerEnter() {
195
+ this.#clearHoverTimeout();
196
+ this.#hoverTimeout = globalThis.setTimeout(() => {
197
+ this.#setOpen(true);
198
+ }, this.delay);
199
+ }
200
+ #handlePointerLeave(_event) {
201
+ this.#clearHoverTimeout();
202
+ this.#hoverTimeout = globalThis.setTimeout(() => {
203
+ this.#setOpen(false);
204
+ }, this.closeDelay);
205
+ }
206
+ #handlePointerMove(event) {
207
+ if (this.trackCursorAxis) {
208
+ this.#pointerPosition = {
209
+ x: event.clientX,
210
+ y: event.clientY
211
+ };
212
+ if (this.#open) this.#updatePosition();
213
+ }
214
+ }
215
+ };
216
+
217
+ //#endregion
218
+ export { TooltipElement as t };
219
+ //# sourceMappingURL=tooltip-CJpujx2f.js.map
package/dist/tooltip-CJpujx2f.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tooltip-CJpujx2f.js","names":["#abortController","#triggerElement","#updateVisibility","#clearHoverTimeout","#cleanup","#transitionStatus","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#open","#setupFloating","#arrowElement","#pointerPosition","#hoverTimeout","#setOpen","#updatePosition"],"sources":["../src/elements/tooltip.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom';\nimport type { MediaContainerElement } from '@/media/media-container';\n\nimport { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { getDocumentOrShadowRoot } from '@videojs/utils/dom';\n\nexport class TooltipElement extends HTMLElement {\n #open = false;\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #cleanup: (() => void) | null = null;\n #arrowElement: HTMLElement | null = null;\n #pointerPosition = { x: 0, y: 0 };\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n #abortController: AbortController | null = null;\n\n connectedCallback(): void {\n this.setAttribute('role', 'tooltip');\n\n this.#abortController ??= new AbortController();\n const { signal } = this.#abortController;\n\n const trigger = this.#triggerElement as HTMLElement;\n if (trigger) {\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n trigger.addEventListener('pointerenter', this, { signal });\n trigger.addEventListener('pointerleave', this, { signal });\n trigger.addEventListener('pointermove', this, { signal });\n }\n }\n\n this.#updateVisibility();\n }\n\n disconnectedCallback(): void {\n this.#clearHoverTimeout();\n this.#cleanup?.();\n this.#abortController?.abort();\n this.#abortController = null;\n\n this.#transitionStatus = 'unmounted';\n this.#updateVisibility();\n }\n\n handleEvent(event: Event): void {\n switch (event.type) {\n case 'pointerenter':\n this.#handlePointerEnter();\n break;\n case 'pointerleave':\n this.#handlePointerLeave(event as PointerEvent);\n break;\n case 'pointermove':\n this.#handlePointerMove(event as PointerEvent);\n break;\n default:\n break;\n }\n }\n\n static get observedAttributes(): string[] {\n return ['delay', 'close-delay', 'track-cursor-axis', 'side', 'side-offset', 'collision-padding'];\n }\n\n get delay(): number {\n return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n }\n\n get closeDelay(): number {\n return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n }\n\n get trackCursorAxis(): 'x' | 'y' | 'both' | undefined {\n const value = this.getAttribute('track-cursor-axis');\n return value === 'x' || value === 'y' || value === 'both' ? value : undefined;\n }\n\n get side(): Placement {\n return (this.getAttribute('side') as Placement) ?? 'top';\n }\n\n get sideOffset(): number {\n return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n }\n\n get collisionPadding(): number {\n return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);\n }\n\n get #triggerElement(): HTMLElement | null {\n return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor=\"${this.id}\"]`) as HTMLElement | null;\n }\n\n #setOpen(open: boolean): void {\n if (this.#open === open) return;\n\n this.#open = open;\n\n if (open) {\n this.#setupFloating();\n\n this.#transitionStatus = 'initial';\n this.#updateVisibility();\n\n this.showPopover();\n\n requestAnimationFrame(() => {\n this.#transitionStatus = 'open';\n this.#updateVisibility();\n });\n } else {\n this.#transitionStatus = 'close';\n this.#updateVisibility();\n\n const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition);\n if (transitions.length > 0) {\n Promise.all(transitions.map(t => t.finished))\n .then(() => this.hidePopover())\n .catch(() => this.hidePopover());\n } else {\n this.hidePopover();\n }\n\n this.#cleanup?.();\n this.#cleanup = null;\n }\n }\n\n #updateVisibility(): void {\n this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n\n const triggerElement = this.#triggerElement as HTMLElement;\n if (triggerElement) {\n triggerElement.toggleAttribute('data-popup-open', this.#open);\n }\n }\n\n #setupFloating(): void {\n const trigger = this.#triggerElement as HTMLElement;\n if (!trigger) return;\n\n const placement = this.side;\n const sideOffset = this.sideOffset;\n const collisionPadding = this.collisionPadding;\n const mediaContainer = this.closest('media-container') as MediaContainerElement;\n\n this.#arrowElement = this.querySelector('media-tooltip-arrow') as HTMLElement;\n\n const updatePosition = () => {\n const middleware = [\n offset(sideOffset),\n flip(),\n shift({\n boundary: mediaContainer,\n padding: collisionPadding,\n }),\n ];\n\n if (this.#arrowElement) {\n middleware.push(arrow({ element: this.#arrowElement }));\n }\n\n const referenceElement = this.trackCursorAxis\n ? {\n getBoundingClientRect: () => {\n const triggerRect = trigger.getBoundingClientRect();\n\n if (this.trackCursorAxis === 'x') {\n return {\n width: 0,\n height: 0,\n top: triggerRect.top,\n right: this.#pointerPosition.x,\n bottom: triggerRect.bottom,\n left: this.#pointerPosition.x,\n x: this.#pointerPosition.x,\n y: triggerRect.top,\n };\n } else if (this.trackCursorAxis === 'y') {\n return {\n width: 0,\n height: 0,\n top: this.#pointerPosition.y,\n right: triggerRect.right,\n bottom: this.#pointerPosition.y,\n left: triggerRect.left,\n x: triggerRect.left,\n y: this.#pointerPosition.y,\n };\n } else {\n // Track both axes (trackCursorAxis === 'both')\n return {\n width: 0,\n height: 0,\n top: this.#pointerPosition.y,\n right: this.#pointerPosition.x,\n bottom: this.#pointerPosition.y,\n left: this.#pointerPosition.x,\n x: this.#pointerPosition.x,\n y: this.#pointerPosition.y,\n };\n }\n },\n }\n : trigger;\n\n computePosition(referenceElement, this, {\n placement,\n middleware,\n strategy: 'fixed',\n }).then(({ x, y, middlewareData }: { x: number; y: number; middlewareData: any }) => {\n Object.assign(this.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (this.#arrowElement && middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n Object.assign(this.#arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : undefined,\n top: arrowY != null ? `${arrowY}px` : undefined,\n });\n }\n });\n };\n\n updatePosition();\n\n if (!this.trackCursorAxis) {\n this.#cleanup = autoUpdate(trigger, this, updatePosition);\n }\n }\n\n #updatePosition(): void {\n if (this.#open && this.trackCursorAxis) {\n this.#setupFloating();\n }\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n globalThis.clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (this.trackCursorAxis) {\n this.#pointerPosition = { x: event.clientX, y: event.clientY };\n\n if (this.#open) {\n this.#updatePosition();\n }\n }\n }\n}\n"],"mappings":"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"}
package/dist/video-provider-BCGedOLm.js ADDED
@@ -0,0 +1,8 @@
1
+ import { t as VideoProviderElement } from "./video-provider-BKDqoKFf.js";
2
+ import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
3
+
4
+ //#region src/define/video-provider.ts
5
+ defineCustomElement("video-provider", VideoProviderElement);
6
+
7
+ //#endregion
8
+ //# sourceMappingURL=video-provider-BCGedOLm.js.map
package/dist/video-provider-BCGedOLm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"video-provider-BCGedOLm.js","names":[],"sources":["../src/define/video-provider.ts"],"sourcesContent":["import { VideoProviderElement } from '@/media/video-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('video-provider', VideoProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}
package/dist/{media-provider-CyoL0bCx.js → video-provider-BKDqoKFf.js} RENAMED
@@ -1,9 +1,9 @@
1
1
  import { createMediaStore } from "@videojs/core/store";
2
2
  import { ProviderMixin } from "@open-wc/context-protocol";
3
3
 
4
- //#region src/media/media-provider.ts
4
+ //#region src/media/video-provider.ts
5
5
  const ProviderHTMLElement = ProviderMixin(HTMLElement);
6
- var MediaProviderElement = class extends ProviderHTMLElement {
6
+ var VideoProviderElement = class extends ProviderHTMLElement {
7
7
  constructor(..._args) {
8
8
  super(..._args);
9
9
  this.contexts = { mediaStore: () => {
@@ -13,5 +13,5 @@ var MediaProviderElement = class extends ProviderHTMLElement {
13
13
  };
14
14
 
15
15
  //#endregion
16
- export { MediaProviderElement as t };
17
- //# sourceMappingURL=media-provider-CyoL0bCx.js.map
16
+ export { VideoProviderElement as t };
17
+ //# sourceMappingURL=video-provider-BKDqoKFf.js.map
package/dist/{media-provider-CyoL0bCx.js.map → video-provider-BKDqoKFf.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"media-provider-CyoL0bCx.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/media-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class MediaProviderElement extends ProviderHTMLElement {\n contexts = {\n mediaStore: (): MediaStore => {\n return createMediaStore();\n },\n };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}
1
+ {"version":3,"file":"video-provider-BKDqoKFf.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/video-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class VideoProviderElement extends ProviderHTMLElement {\n contexts = {\n mediaStore: (): MediaStore => {\n return createMediaStore();\n },\n };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@videojs/html",
3
3
  "type": "module",
4
- "version": "0.1.0-preview.4",
4
+ "version": "0.1.0-preview.6",
5
5
  "description": "HTML library for building media players",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -48,9 +48,9 @@
48
48
  "@floating-ui/core": "^1.6.13",
49
49
  "@floating-ui/dom": "^1.6.13",
50
50
  "@open-wc/context-protocol": "^0.0.9",
51
- "@videojs/icons": "0.1.0-preview.4",
52
- "@videojs/core": "0.1.0-preview.4",
53
- "@videojs/utils": "0.1.0-preview.4"
51
+ "@videojs/icons": "0.1.0-preview.6",
52
+ "@videojs/utils": "0.1.0-preview.6",
53
+ "@videojs/core": "0.1.0-preview.6"
54
54
  },
55
55
  "devDependencies": {
56
56
  "tsdown": "^0.15.9",
package/dist/define/media-provider.d.ts DELETED
@@ -1 +0,0 @@
1
- import "../media-provider-D7P2TLXG.js";
package/dist/define/media-provider.js DELETED
@@ -1,3 +0,0 @@
1
- import "../media-provider-CyoL0bCx.js";
2
- import "../custom-element-3bDlB2XO.js";
3
- import "../media-provider-D_GL2_DN.js";