@videojs/html 0.1.0-preview.10

package/dist/skins/frosted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frosted.js","names":["styles"],"sources":["../../src/skins/frosted/styles.css","../../src/skins/frosted/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  border-radius: var(--frosted-border-radius, 2rem);\\n  background: oklab(0 0 0);\\n  font-family: ui-sans-serif, system-ui, sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\n}\\nmedia-container::before,\\nmedia-container::after {\\n  content: '';\\n  position: absolute;\\n  pointer-events: none;\\n  border-radius: inherit;\\n  z-index: 10;\\n}\\nmedia-container::before {\\n  inset: 1px;\\n  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\n}\\nmedia-container::after {\\n  inset: 0;\\n  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);\\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.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));\\n  backdrop-filter: saturate(1.5) brightness(0.9);\\n  transition: opacity 0.15s 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  transition-duration: 100ms;\\n  transition-delay: 0ms;\\n}\\n\\n/* Common Surface Styles - e.g. tooltips, popovers, controls */\\n.surface {\\n  background-color: oklab(1 0 0 / 0.1);\\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n  box-shadow:\\n    inset 0 0 0 1px oklab(1 0 0 / 0.15),\\n    0 0 0 1px oklab(0 0 0 / 0.15),\\n    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,\\n    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;\\n}\\n@media (prefers-reduced-transparency: reduce) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.7);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n@media (prefers-contrast: more) {\\n  .surface {\\n    background-color: oklab(0 0 0 / 0.9);\\n    box-shadow:\\n      inset 0 0 0 1px oklab(0 0 0),\\n      0 0 0 1px oklab(1 0 0 / 0.2);\\n  }\\n}\\n\\n/* Media Control Bar UI/Styles */\\n.control-bar {\\n  position: absolute;\\n  bottom: 0.75rem;\\n  inset-inline: 0.75rem;\\n  padding: 0.25rem;\\n  display: flex;\\n  align-items: center;\\n  gap: 0.125rem;\\n  border-radius: calc(infinity * 1px);\\n  will-change: scale, transform, filter, opacity;\\n  scale: 0.9;\\n  opacity: 0;\\n  filter: blur(8px);\\n  transition-property: scale, transform, filter, opacity;\\n  transition-delay: 500ms;\\n  transition-duration: 300ms;\\n  transition-timing-function: ease-out;\\n  transform-origin: bottom;\\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  scale: 1;\\n  filter: blur(0px);\\n  transition-delay: 0ms;\\n  transition-duration: 100ms;\\n}\\n\\n/* Time Display Styling */\\n.time-controls {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  gap: 0.75rem;\\n  padding-inline: 0.375rem;\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n/* Generic Media Button Styling */\\n.button {\\n  display: grid;\\n  flex-shrink: 0;\\n  padding: 0.5rem;\\n  cursor: pointer;\\n  background: transparent;\\n  border: none;\\n  border-radius: calc(infinity * 1px);\\n  color: oklab(1 0 0 / 0.9);\\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  background-color: oklab(1 0 0 / 0.1);\\n  color: oklab(1 0 0);\\n  text-decoration: none;\\n}\\n.button:focus-visible {\\n  outline-color: oklch(62.3% 0.214 259.815);\\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.25));\\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: 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.25rem;\\n}\\n\\n/* Vertical track styles */\\n.slider-track[data-orientation='vertical'] {\\n  width: 0.25rem;\\n  height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n  outline-color: oklch(62.3% 0.214 259.815);\\n  outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n  width: 0.625rem;\\n  height: 0.625rem;\\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  transition-property: opacity, height, width;\\n  transition-duration: 150ms;\\n  transition-timing-function: ease-out;\\n}\\n.slider-thumb:active {\\n  width: 0.75rem;\\n  height: 0.75rem;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n  opacity: 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  background-color: oklab(1 0 0 / 0.2);\\n  border-radius: inherit;\\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.625rem;\\n  border-radius: calc(infinity * 1px);\\n  font-size: 0.75rem;\\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';\n// be sure to import video-provider first for proper context initialization\nimport '@/define/video-provider';\nimport '@/define/media-container';\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';\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 surface\">\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=\"surface popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"12\"\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-controls\">\n          <!-- Use the show-remaining attribute to show count down/remaining time -->\n          <media-current-time-display></media-current-time-display>\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=\"surface popup-animation\"\n            popover=\"manual\"\n            track-cursor-axis=\"x\"\n            side=\"top\"\n            side-offset=\"18\"\n            collision-padding=\"12\"\n          >\n            <media-preview-time-display></media-preview-time-display>\n          </media-tooltip>\n\n          <media-duration-display></media-duration-display>\n        </div>\n\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=\"surface popup-animation\"\n          popover=\"manual\"\n          open-on-hover\n          delay=\"200\"\n          close-delay=\"100\"\n          side=\"top\"\n          side-offset=\"12\"\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-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n          <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n        </media-fullscreen-button>\n        <media-tooltip\n          id=\"fullscreen-tooltip\"\n          class=\"surface popup-animation\"\n          popover=\"manual\"\n          delay=\"500\"\n          side=\"top\"\n          side-offset=\"12\"\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    </media-container>\n  `;\n}\n\nexport class MediaSkinFrostedElement extends MediaSkinElement {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-skin-frosted', MediaSkinFrostedElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAA;;;;ACkBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}

package/dist/skins/minimal.d.ts

@@ -0,0 +1,23 @@
+import "../video-provider-nSCfwA7l.js";
+import "../media-container-ChS9lZvf.js";
+import "../media-play-button-oq8yDlxe.js";
+import "../media-mute-button-NVJF2EEW.js";
+import "../media-volume-slider-DP47VLVi.js";
+import "../media-time-slider-DvMnfYXZ.js";
+import "../media-fullscreen-button-BgUK3lgu.js";
+import "../media-duration-display-qvm6YX-q.js";
+import "../media-current-time-display-Cd0rPAuj.js";
+import "../media-preview-time-display-4YX5Rics.js";
+import "../media-popover-BtJmPv0E.js";
+import "../media-tooltip-BqV17mdM.js";
+import "../index-LKrIp3Oo.js";
+import { t as MediaSkinElement } from "../media-skin-Di3vSHvS.js";
+
+//#region src/skins/minimal/index.d.ts
+declare function getTemplateHTML(): string;
+declare class MediaSkinMinimalElement extends MediaSkinElement {
+  static getTemplateHTML: () => string;
+}
+//#endregion
+export { MediaSkinMinimalElement, getTemplateHTML };
+//# sourceMappingURL=minimal.d.ts.map

package/dist/skins/minimal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal.d.ts","names":[],"sources":["../../src/skins/minimal/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAmBgB,eAAA,CAAA;cA0GH,uBAAA,SAAgC,gBAAA;EA1G7C,OAAgB,eAAA,EAAA,GAAA,GAAA,MAAA;AA0GhB"}

package/dist/skins/minimal.js

@@ -0,0 +1,150 @@
+import "../component-factory-vR-5t251.js";
+import "../current-time-display-BNvqKqSQ.js";
+import "../duration-display-Dtl2RCNd.js";
+import "../button-Bu1mGG-F.js";
+import "../fullscreen-button-CKOv8Ywh.js";
+import "../mute-button-BCN9DDLN.js";
+import "../play-button-DP8VldNs.js";
+import "../popover-ah61j3HR.js";
+import "../preview-time-display-DwLOj4CJ.js";
+import "../time-slider-DBWcZzRe.js";
+import "../tooltip-O0U-gkDS.js";
+import "../volume-slider-cwSYSsFC.js";
+import "../media-container-BOL0PKuG.js";
+import { t as MediaSkinElement } from "../media-skin-CxnuHwhu.js";
+import "../video-provider-Bj9JwzDx.js";
+import { t as defineCustomElement } from "../custom-element-3bDlB2XO.js";
+import "../icons-CuxuONCk.js";
+import "../video-provider-HuYjfSUk.js";
+import "../media-container-DwKSOa1h.js";
+import "../media-play-button-Wt6RbYe5.js";
+import "../media-mute-button-DXq-JKvc.js";
+import "../media-volume-slider-DHV-7FOd.js";
+import "../media-time-slider-DFfiWHUh.js";
+import "../media-fullscreen-button-CiG60HOW.js";
+import "../media-duration-display-6KTtxmm3.js";
+import "../media-current-time-display-Cr2LJaRo.js";
+import "../media-preview-time-display-DF6tOv7J.js";
+import "../media-popover-CpbBQOK2.js";
+import "../media-tooltip-RjL5rqLT.js";
+
+//#region src/skins/minimal/styles.css
+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  border-radius: var(--minimal-border-radius, 0.75rem);\n  background: oklab(0 0 0);\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\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.15);\n}\n@media (prefers-color-scheme: dark) {\n  media-container::after {\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\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";
+
+//#endregion
+//#region src/skins/minimal/index.ts
+function getTemplateHTML() {
+	return `
+    ${MediaSkinElement.getTemplateHTML()}
+    <style>${styles_default}</style>
+
+    <media-container>
+      <slot name="media" slot="media"></slot>
+
+      <div class="overlay"></div>
+
+      <div class="control-bar">
+        <!-- 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) -->
+
+        <media-play-button commandfor="play-tooltip" class="button">
+          <media-play-icon class="icon play-icon"></media-play-icon>
+          <media-pause-icon class="icon pause-icon"></media-pause-icon>
+        </media-play-button>
+        <media-tooltip
+          id="play-tooltip"
+          class="popup-animation"
+          popover="manual"
+          delay="500"
+          side="top"
+          side-offset="6"
+          collision-padding="12"
+        >
+          <span class="tooltip play-tooltip">Play</span>
+          <span class="tooltip pause-tooltip">Pause</span>
+        </media-tooltip>
+
+        <div class="time-display-group">
+          <!-- Use the show-remaining attribute to show count down/remaining time -->
+          <media-current-time-display></media-current-time-display>
+
+          <span class="duration-display">
+            /
+            <media-duration-display></media-duration-display>
+          </span>
+        </div>
+
+        <media-time-slider commandfor="time-slider-tooltip" class="slider">
+          <media-time-slider-track class="slider-track">
+            <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
+            <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
+          </media-time-slider-track>
+          <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
+        </media-time-slider>
+        <media-tooltip
+          id="time-slider-tooltip"
+          class="popup-animation"
+          popover="manual"
+          track-cursor-axis="x"
+          side="top"
+          side-offset="12"
+          collision-padding="12"
+        >
+          <media-preview-time-display></media-preview-time-display>
+        </media-tooltip>
+
+        <div class="button-group">
+          <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
+            <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
+            <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
+            <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
+          </media-mute-button>
+          <media-popover
+            id="volume-slider-popover"
+            class="popup-animation"
+            popover="manual"
+            open-on-hover
+            delay="200"
+            close-delay="100"
+            side="top"
+            side-offset="2"
+            collision-padding="12"
+          >
+            <media-volume-slider class="slider" orientation="vertical">
+              <media-volume-slider-track class="slider-track">
+                <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
+              </media-volume-slider-track>
+              <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
+            <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
+            <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
+          </media-fullscreen-button>
+          <media-tooltip
+            id="fullscreen-tooltip"
+            class="popup-animation"
+            popover="manual"
+            delay="500"
+            side="top"
+            side-offset="6"
+            collision-padding="12"
+          >
+            <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
+            <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
+          </media-tooltip>
+        </div>
+      </div>
+    </media-container>
+  `;
+}
+var MediaSkinMinimalElement = class extends MediaSkinElement {
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+};
+defineCustomElement("media-skin-minimal", MediaSkinMinimalElement);
+
+//#endregion
+export { MediaSkinMinimalElement, getTemplateHTML };
+//# sourceMappingURL=minimal.js.map

package/dist/skins/minimal.js.map

@@ -0,0 +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  border-radius: var(--minimal-border-radius, 0.75rem);\\n  background: oklab(0 0 0);\\n  font-family: ui-sans-serif, system-ui, sans-serif;\\n  font-size: 0.8125rem;\\n  line-height: 1.5;\\n  -webkit-font-smoothing: auto;\\n  -moz-osx-font-smoothing: auto;\\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.15);\\n}\\n@media (prefers-color-scheme: dark) {\\n  media-container::after {\\n    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);\\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';\n// be sure to import video-provider first for proper context initialization\nimport '@/define/video-provider';\nimport '@/define/media-container';\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;;;;ACmBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,iBAAiB,iBAAiB,CAAC;aAC5BA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGpB,IAAa,0BAAb,cAA6C,iBAAiB;;yBACrB;;;AAGzC,oBAAoB,sBAAsB,wBAAwB"}

package/dist/store.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/time-slider-DBWcZzRe.js

@@ -0,0 +1,141 @@
+import { n as getPropsFromAttrs, r as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-vR-5t251.js";
+import { timeSliderStateDefinition } from "@videojs/core/store";
+import { memoize } from "@videojs/utils";
+import { TimeSlider } from "@videojs/core";
+
+//#region src/elements/time-slider.ts
+const timeSliderCreateRequestMethods = memoize(timeSliderStateDefinition.createRequestMethods);
+const getTimeSliderRootState = (element, mediaStore) => {
+	const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());
+	const mediaMethods = timeSliderCreateRequestMethods(mediaStore.dispatch);
+	return { ...getCoreState(TimeSlider, {
+		...getPropsFromAttrs(element),
+		...mediaState,
+		...mediaMethods
+	}) };
+};
+/**
+* TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
+* Handles element attributes and properties based on state
+*/
+const getTimeSliderRootProps = (element, state) => {
+	if (state._rootElement !== element) state._setRootElement(element);
+	return {
+		role: "slider",
+		tabindex: element.getAttribute("tabindex") ?? "0",
+		"data-current-time": state.currentTime.toString(),
+		"data-duration": state.duration.toString(),
+		"data-orientation": element.orientation || "horizontal",
+		"aria-label": "Seek",
+		"aria-valuemin": "0",
+		"aria-valuemax": Math.round(state.duration).toString(),
+		"aria-valuenow": Math.round(state.currentTime).toString(),
+		"aria-valuetext": `${state._currentTimeText} of ${state._durationText}`,
+		"aria-orientation": element.orientation || "horizontal",
+		style: {
+			...element.hasAttribute("commandfor") ? { anchorName: `--${element.getAttribute("commandfor")}` } : {},
+			"--slider-fill": `${state._fillWidth.toFixed(3)}%`,
+			"--slider-pointer": `${(state._pointerWidth * 100).toFixed(3)}%`
+		}
+	};
+};
+var TimeSliderRoot = class extends HTMLElement {
+	static {
+		this.observedAttributes = ["commandfor", "orientation"];
+	}
+	get orientation() {
+		return this.getAttribute("orientation") || "horizontal";
+	}
+};
+const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, getTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
+const getTimeSliderTrackProps = (element, _state) => {
+	const rootElement = element.closest("media-time-slider");
+	if (rootElement._state?._trackElement !== element) rootElement._state?._setTrackElement?.(element);
+	const orientation = rootElement?.orientation || "horizontal";
+	return {
+		"data-orientation": orientation,
+		style: {
+			width: orientation === "horizontal" ? "100%" : void 0,
+			height: orientation !== "horizontal" ? "100%" : void 0
+		}
+	};
+};
+var TimeSliderTrack = class extends HTMLElement {};
+const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, void 0, getTimeSliderTrackProps, "TimeSliderTrack");
+const getTimeSliderProgressProps = (element, _state) => {
+	const orientation = element.closest("media-time-slider")?.orientation || "horizontal";
+	const style = orientation === "horizontal" ? {
+		position: "absolute",
+		width: "var(--slider-fill, 0%)",
+		height: "100%",
+		top: "0",
+		bottom: void 0
+	} : {
+		position: "absolute",
+		height: "var(--slider-fill, 0%)",
+		width: "100%",
+		bottom: "0",
+		top: void 0
+	};
+	return {
+		"data-orientation": orientation,
+		style
+	};
+};
+var TimeSliderProgress = class extends HTMLElement {};
+const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, void 0, getTimeSliderProgressProps, "TimeSliderProgress");
+const getTimeSliderPointerProps = (element, _state) => {
+	const orientation = element.closest("media-time-slider")?.orientation || "horizontal";
+	const style = orientation === "horizontal" ? {
+		position: "absolute",
+		width: "var(--slider-pointer, 0%)",
+		height: "100%",
+		top: "0",
+		bottom: void 0
+	} : {
+		position: "absolute",
+		height: "var(--slider-pointer, 0%)",
+		width: "100%",
+		bottom: "0",
+		top: void 0
+	};
+	return {
+		"data-orientation": orientation,
+		style
+	};
+};
+var TimeSliderPointer = class extends HTMLElement {};
+const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, void 0, getTimeSliderPointerProps, "TimeSliderPointer");
+const getTimeSliderThumbProps = (element, _state) => {
+	const orientation = element.closest("media-time-slider")?.orientation || "horizontal";
+	const style = orientation === "horizontal" ? {
+		position: "absolute",
+		left: "var(--slider-fill, 0%)",
+		top: "50%",
+		bottom: void 0,
+		translate: "-50% -50%"
+	} : {
+		position: "absolute",
+		bottom: "var(--slider-fill, 0%)",
+		left: "50%",
+		top: void 0,
+		translate: "-50% 50%"
+	};
+	return {
+		"data-orientation": orientation,
+		style
+	};
+};
+var TimeSliderThumb = class extends HTMLElement {};
+const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, void 0, getTimeSliderThumbProps, "TimeSliderThumb");
+const TimeSliderElement = Object.assign({}, {
+	Root: TimeSliderRootElement,
+	Track: TimeSliderTrackElement,
+	Progress: TimeSliderProgressElement,
+	Pointer: TimeSliderPointerElement,
+	Thumb: TimeSliderThumbElement
+});
+
+//#endregion
+export { TimeSliderThumbElement as a, TimeSliderRootElement as i, TimeSliderPointerElement as n, TimeSliderTrackElement as o, TimeSliderProgressElement as r, TimeSliderElement as t };
+//# sourceMappingURL=time-slider-DBWcZzRe.js.map

package/dist/time-slider-DBWcZzRe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-DBWcZzRe.js","names":["getTimeSliderRootState: StateHook<TimeSliderRoot, TimeSliderStateWithMethods>","CoreTimeSlider","getTimeSliderRootProps: PropsHook<TimeSliderRoot, TimeSliderStateWithMethods>","TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderRoot, TimeSliderStateWithMethods>","getTimeSliderTrackProps: PropsHook<TimeSliderTrack, undefined>","TimeSliderTrackElement: ConnectedComponentConstructor<TimeSliderTrack, undefined>","getTimeSliderProgressProps: PropsHook<TimeSliderProgress, undefined>","TimeSliderProgressElement: ConnectedComponentConstructor<TimeSliderProgress, undefined>","getTimeSliderPointerProps: PropsHook<TimeSliderPointer, undefined>","TimeSliderPointerElement: ConnectedComponentConstructor<TimeSliderPointer, undefined>","getTimeSliderThumbProps: PropsHook<TimeSliderThumb, undefined>","TimeSliderThumbElement: ConnectedComponentConstructor<TimeSliderThumb, undefined>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\nimport { memoize } from '@videojs/utils';\n\nimport { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\ntype TimeSliderState = Prettify<ReturnType<CoreTimeSlider['getState']>>;\ntype TimeSliderStateWithMethods = Prettify<TimeSliderState & ReturnType<typeof timeSliderStateDefinition.createRequestMethods>>;\n\nconst timeSliderCreateRequestMethods = memoize(timeSliderStateDefinition.createRequestMethods);\n\nexport const getTimeSliderRootState: StateHook<TimeSliderRoot, TimeSliderStateWithMethods> = (element, mediaStore) => {\n  const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());\n  const mediaMethods = timeSliderCreateRequestMethods(mediaStore.dispatch);\n  const coreState = getCoreState(CoreTimeSlider, {\n    ...getPropsFromAttrs(element),\n    ...mediaState,\n    ...mediaMethods,\n  });\n  return {\n    ...coreState,\n  };\n};\n\n/**\n * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getTimeSliderRootProps: PropsHook<TimeSliderRoot, TimeSliderStateWithMethods> = (element, state) => {\n  if (state._rootElement !== element) {\n    state._setRootElement(element);\n  }\n\n  return {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-current-time': state.currentTime.toString(),\n    'data-duration': state.duration.toString(),\n    'data-orientation': element.orientation || 'horizontal',\n    'aria-label': 'Seek',\n    'aria-valuemin': '0',\n    'aria-valuemax': Math.round(state.duration).toString(),\n    'aria-valuenow': Math.round(state.currentTime).toString(),\n    'aria-valuetext': `${state._currentTimeText} of ${state._durationText}`,\n    'aria-orientation': element.orientation || 'horizontal',\n    style: {\n      ...(element.hasAttribute('commandfor') ? { anchorName: `--${element.getAttribute('commandfor')}` } : {}),\n      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,\n      '--slider-pointer': `${(state._pointerWidth * 100).toFixed(3)}%`,\n    },\n  };\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];\n\n  _state: TimeSliderState | undefined;\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n}\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderRoot, TimeSliderStateWithMethods> = toConnectedHTMLComponent(\n  TimeSliderRoot,\n  getTimeSliderRootState,\n  getTimeSliderRootProps,\n  'TimeSliderRoot',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport const getTimeSliderTrackProps: PropsHook<TimeSliderTrack, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;\n\n  if (rootElement._state?._trackElement !== element) {\n    rootElement._state?._setTrackElement?.(element);\n  }\n\n  const orientation = rootElement?.orientation || 'horizontal';\n\n  return {\n    'data-orientation': orientation,\n    style: {\n      width: orientation === 'horizontal' ? '100%' : undefined,\n      height: orientation !== 'horizontal' ? '100%' : undefined,\n    },\n  };\n};\n\nexport class TimeSliderTrack extends HTMLElement {}\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<TimeSliderTrack, undefined> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  undefined,\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport const getTimeSliderProgressProps: PropsHook<TimeSliderProgress, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;\n  const orientation = rootElement?.orientation || 'horizontal';\n  const style = orientation === 'horizontal'\n    ? {\n        position: 'absolute',\n        width: 'var(--slider-fill, 0%)',\n        height: '100%',\n        top: '0',\n        bottom: undefined,\n      }\n    : {\n        position: 'absolute',\n        height: 'var(--slider-fill, 0%)',\n        width: '100%',\n        bottom: '0',\n        top: undefined,\n      };\n\n  return {\n    'data-orientation': orientation,\n    style,\n  };\n};\n\nexport class TimeSliderProgress extends HTMLElement {}\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<TimeSliderProgress, undefined> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  undefined,\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport const getTimeSliderPointerProps: PropsHook<TimeSliderPointer, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;\n  const orientation = rootElement?.orientation || 'horizontal';\n  const style = orientation === 'horizontal'\n    ? {\n        position: 'absolute',\n        width: 'var(--slider-pointer, 0%)',\n        height: '100%',\n        top: '0',\n        bottom: undefined,\n      }\n    : {\n        position: 'absolute',\n        height: 'var(--slider-pointer, 0%)',\n        width: '100%',\n        bottom: '0',\n        top: undefined,\n      };\n\n  return {\n    'data-orientation': orientation,\n    style,\n  };\n};\n\nexport class TimeSliderPointer extends HTMLElement {}\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<TimeSliderPointer, undefined> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  undefined,\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport const getTimeSliderThumbProps: PropsHook<TimeSliderThumb, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;\n  const orientation = rootElement?.orientation || 'horizontal';\n  const style = orientation === 'horizontal'\n    ? {\n        position: 'absolute',\n        left: 'var(--slider-fill, 0%)',\n        top: '50%',\n        bottom: undefined,\n        translate: '-50% -50%',\n      }\n    : {\n        position: 'absolute',\n        bottom: 'var(--slider-fill, 0%)',\n        left: '50%',\n        top: undefined,\n        translate: '-50% 50%',\n      };\n\n  return {\n    'data-orientation': orientation,\n    style,\n  };\n};\n\nexport class TimeSliderThumb extends HTMLElement {}\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<TimeSliderThumb, undefined> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  undefined,\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\n);\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSliderElement = Object.assign(\n  {},\n  {\n    Root: TimeSliderRootElement,\n    Track: TimeSliderTrackElement,\n    Progress: TimeSliderProgressElement,\n    Pointer: TimeSliderPointerElement,\n    Thumb: TimeSliderThumbElement,\n  },\n) as {\n  Root: typeof TimeSliderRootElement;\n  Track: typeof TimeSliderTrackElement;\n  Progress: typeof TimeSliderProgressElement;\n  Pointer: typeof TimeSliderPointerElement;\n  Thumb: typeof TimeSliderThumbElement;\n};\n"],"mappings":";;;;;;AAgBA,MAAM,iCAAiC,QAAQ,0BAA0B,qBAAqB;AAE9F,MAAaA,0BAAiF,SAAS,eAAe;CACpH,MAAM,aAAa,0BAA0B,eAAe,WAAW,UAAU,CAAC;CAClF,MAAM,eAAe,+BAA+B,WAAW,SAAS;AAMxE,QAAO,EACL,GANgB,aAAaC,YAAgB;EAC7C,GAAG,kBAAkB,QAAQ;EAC7B,GAAG;EACH,GAAG;EACJ,CAAC,EAGD;;;;;;AAOH,MAAaC,0BAAiF,SAAS,UAAU;AAC/G,KAAI,MAAM,iBAAiB,QACzB,OAAM,gBAAgB,QAAQ;AAGhC,QAAO;EACL,MAAM;EACN,UAAU,QAAQ,aAAa,WAAW,IAAI;EAC9C,qBAAqB,MAAM,YAAY,UAAU;EACjD,iBAAiB,MAAM,SAAS,UAAU;EAC1C,oBAAoB,QAAQ,eAAe;EAC3C,cAAc;EACd,iBAAiB;EACjB,iBAAiB,KAAK,MAAM,MAAM,SAAS,CAAC,UAAU;EACtD,iBAAiB,KAAK,MAAM,MAAM,YAAY,CAAC,UAAU;EACzD,kBAAkB,GAAG,MAAM,iBAAiB,MAAM,MAAM;EACxD,oBAAoB,QAAQ,eAAe;EAC3C,OAAO;GACL,GAAI,QAAQ,aAAa,aAAa,GAAG,EAAE,YAAY,KAAK,QAAQ,aAAa,aAAa,IAAI,GAAG,EAAE;GACvG,iBAAiB,GAAG,MAAM,WAAW,QAAQ,EAAE,CAAC;GAChD,oBAAoB,IAAI,MAAM,gBAAgB,KAAK,QAAQ,EAAE,CAAC;GAC/D;EACF;;AAGH,IAAa,iBAAb,cAAoC,YAAY;;4BACU,CAAC,cAAc,cAAc;;CAIrF,IAAI,cAAyC;AAC3C,SAAQ,KAAK,aAAa,cAAc,IAAkC;;;AAI9E,MAAaC,wBAAmG,yBAC9G,gBACA,wBACA,wBACA,iBACD;AAMD,MAAaC,2BAAkE,SAAS,WAAW;CACjG,MAAM,cAAc,QAAQ,QAAQ,oBAAoB;AAExD,KAAI,YAAY,QAAQ,kBAAkB,QACxC,aAAY,QAAQ,mBAAmB,QAAQ;CAGjD,MAAM,cAAc,aAAa,eAAe;AAEhD,QAAO;EACL,oBAAoB;EACpB,OAAO;GACL,OAAO,gBAAgB,eAAe,SAAS;GAC/C,QAAQ,gBAAgB,eAAe,SAAS;GACjD;EACF;;AAGH,IAAa,kBAAb,cAAqC,YAAY;AAEjD,MAAaC,yBAAoF,yBAC/F,iBACA,QACA,yBACA,kBACD;AAMD,MAAaC,8BAAwE,SAAS,WAAW;CAEvG,MAAM,cADc,QAAQ,QAAQ,oBAAoB,EACvB,eAAe;CAChD,MAAM,QAAQ,gBAAgB,eAC1B;EACE,UAAU;EACV,OAAO;EACP,QAAQ;EACR,KAAK;EACL,QAAQ;EACT,GACD;EACE,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,KAAK;EACN;AAEL,QAAO;EACL,oBAAoB;EACpB;EACD;;AAGH,IAAa,qBAAb,cAAwC,YAAY;AAEpD,MAAaC,4BAA0F,yBACrG,oBACA,QACA,4BACA,qBACD;AAMD,MAAaC,6BAAsE,SAAS,WAAW;CAErG,MAAM,cADc,QAAQ,QAAQ,oBAAoB,EACvB,eAAe;CAChD,MAAM,QAAQ,gBAAgB,eAC1B;EACE,UAAU;EACV,OAAO;EACP,QAAQ;EACR,KAAK;EACL,QAAQ;EACT,GACD;EACE,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,KAAK;EACN;AAEL,QAAO;EACL,oBAAoB;EACpB;EACD;;AAGH,IAAa,oBAAb,cAAuC,YAAY;AAEnD,MAAaC,2BAAwF,yBACnG,mBACA,QACA,2BACA,oBACD;AAMD,MAAaC,2BAAkE,SAAS,WAAW;CAEjG,MAAM,cADc,QAAQ,QAAQ,oBAAoB,EACvB,eAAe;CAChD,MAAM,QAAQ,gBAAgB,eAC1B;EACE,UAAU;EACV,MAAM;EACN,KAAK;EACL,QAAQ;EACR,WAAW;EACZ,GACD;EACE,UAAU;EACV,QAAQ;EACR,MAAM;EACN,KAAK;EACL,WAAW;EACZ;AAEL,QAAO;EACL,oBAAoB;EACpB;EACD;;AAGH,IAAa,kBAAb,cAAqC,YAAY;AAEjD,MAAaC,yBAAoF,yBAC/F,iBACA,QACA,yBACA,kBACD;AAMD,MAAa,oBAAoB,OAAO,OACtC,EAAE,EACF;CACE,MAAM;CACN,OAAO;CACP,UAAU;CACV,SAAS;CACT,OAAO;CACR,CACF"}

package/dist/tooltip-O0U-gkDS.js

@@ -0,0 +1,23 @@
+import { n as getPropsFromAttrs, r as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-vR-5t251.js";
+import { r as getPopoverProps, t as Popover$1 } from "./popover-ah61j3HR.js";
+import { Tooltip } from "@videojs/core";
+
+//#region src/elements/tooltip.ts
+const getTooltipState = (element, _mediaStore) => {
+	return { ...getCoreState(Tooltip, getPropsFromAttrs(element)) };
+};
+const getTooltipProps = getPopoverProps;
+var Tooltip$1 = class extends Popover$1 {
+	static get observedAttributes() {
+		return [...super.observedAttributes, "track-cursor-axis"];
+	}
+	get trackCursorAxis() {
+		const value = this.getAttribute("track-cursor-axis");
+		return value === "x" ? value : null;
+	}
+};
+const TooltipElement = toConnectedHTMLComponent(Tooltip$1, getTooltipState, getTooltipProps, "Tooltip");
+
+//#endregion
+export { TooltipElement as t };
+//# sourceMappingURL=tooltip-O0U-gkDS.js.map

package/dist/tooltip-O0U-gkDS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-O0U-gkDS.js","names":["getTooltipState: StateHook<Tooltip, TooltipState>","CoreTooltip","getTooltipProps: PropsHook<Tooltip, TooltipState>","Tooltip","Popover","TooltipElement: ConnectedComponentConstructor<Tooltip, TooltipState>"],"sources":["../src/elements/tooltip.ts"],"sourcesContent":["import type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\nimport { Tooltip as CoreTooltip } from '@videojs/core';\nimport { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';\nimport { getPopoverProps, Popover } from './popover';\n\nexport type TooltipState = Prettify<ReturnType<CoreTooltip['getState']>>;\n\nexport const getTooltipState: StateHook<Tooltip, TooltipState> = (element, _mediaStore) => {\n  const coreState = getCoreState(CoreTooltip, getPropsFromAttrs(element));\n  return {\n    ...coreState,\n  };\n};\n\nexport const getTooltipProps: PropsHook<Tooltip, TooltipState> = getPopoverProps;\n\nexport class Tooltip extends Popover {\n  static get observedAttributes(): string[] {\n    return [\n      ...super.observedAttributes,\n      'track-cursor-axis',\n    ];\n  }\n\n  get trackCursorAxis(): 'x' | null {\n    const value = this.getAttribute('track-cursor-axis');\n    return value === 'x' ? value : null;\n  }\n}\n\nexport const TooltipElement: ConnectedComponentConstructor<Tooltip, TooltipState> = toConnectedHTMLComponent(\n  Tooltip,\n  getTooltipState,\n  getTooltipProps,\n  'Tooltip',\n);\n"],"mappings":";;;;;AAQA,MAAaA,mBAAqD,SAAS,gBAAgB;AAEzF,QAAO,EACL,GAFgB,aAAaC,SAAa,kBAAkB,QAAQ,CAAC,EAGtE;;AAGH,MAAaC,kBAAoD;AAEjE,IAAaC,YAAb,cAA6BC,UAAQ;CACnC,WAAW,qBAA+B;AACxC,SAAO,CACL,GAAG,MAAM,oBACT,oBACD;;CAGH,IAAI,kBAA8B;EAChC,MAAM,QAAQ,KAAK,aAAa,oBAAoB;AACpD,SAAO,UAAU,MAAM,QAAQ;;;AAInC,MAAaC,iBAAuE,yBAClFF,WACA,iBACA,iBACA,UACD"}

package/dist/video-provider-Bj9JwzDx.js

@@ -0,0 +1,23 @@
+import { createMediaStore } from "@videojs/core/store";
+import { printConsoleBanner } from "@videojs/utils";
+import { ProviderMixin } from "@open-wc/context-protocol";
+
+//#region package.json
+var version = "0.1.0-preview.10";
+
+//#endregion
+//#region src/media/video-provider.ts
+printConsoleBanner(version);
+const ProviderHTMLElement = ProviderMixin(HTMLElement);
+var VideoProviderElement = class extends ProviderHTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this.contexts = { mediaStore: () => {
+			return createMediaStore();
+		} };
+	}
+};
+
+//#endregion
+export { VideoProviderElement as t };
+//# sourceMappingURL=video-provider-Bj9JwzDx.js.map

package/dist/video-provider-Bj9JwzDx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-provider-Bj9JwzDx.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../package.json","../src/media/video-provider.ts"],"sourcesContent":["{\n  \"name\": \"@videojs/html\",\n  \"type\": \"module\",\n  \"version\": \"0.1.0-preview.10\",\n  \"description\": \"HTML library for building media players\",\n  \"license\": \"Apache-2.0\",\n  \"keywords\": [\n    \"media\",\n    \"player\",\n    \"html\",\n    \"ui\",\n    \"components\",\n    \"videojs\"\n  ],\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./store\": {\n      \"types\": \"./dist/store.d.ts\",\n      \"default\": \"./dist/store.js\"\n    },\n    \"./icons\": {\n      \"types\": \"./dist/icons.d.ts\",\n      \"default\": \"./dist/icons.js\"\n    },\n    \"./skins/frosted\": {\n      \"types\": \"./dist/skins/frosted.d.ts\",\n      \"default\": \"./dist/skins/frosted.js\"\n    },\n    \"./skins/minimal\": {\n      \"types\": \"./dist/skins/minimal.d.ts\",\n      \"default\": \"./dist/skins/minimal.js\"\n    },\n    \"./define/*\": {\n      \"types\": \"./dist/define/*.d.ts\",\n      \"default\": \"./dist/define/*.js\"\n    }\n  },\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"tsdown\",\n    \"build:watch\": \"tsdown --watch --silent\",\n    \"dev\": \"pnpm run build:watch\",\n    \"test\": \"echo \\\"No tests yet\\\"\",\n    \"clean\": \"rm -rf dist\"\n  },\n  \"dependencies\": {\n    \"@open-wc/context-protocol\": \"^0.0.9\",\n    \"@videojs/core\": \"workspace:*\",\n    \"@videojs/icons\": \"workspace:*\",\n    \"@videojs/utils\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"tsdown\": \"^0.15.9\",\n    \"typescript\": \"^5.9.2\"\n  },\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n","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\nimport { printConsoleBanner } from '@videojs/utils';\nimport { version } from '../../package.json';\n\nprintConsoleBanner(version);\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":";;;;;cAGa;;;;ACMb,mBAAmB,QAAQ;AAE3B,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}

package/dist/video-provider-HuYjfSUk.js

@@ -0,0 +1,8 @@
+import { t as VideoProviderElement } from "./video-provider-Bj9JwzDx.js";
+import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
+
+//#region src/define/video-provider.ts
+defineCustomElement("video-provider", VideoProviderElement);
+
+//#endregion
+//# sourceMappingURL=video-provider-HuYjfSUk.js.map

package/dist/video-provider-HuYjfSUk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-provider-HuYjfSUk.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/video-provider-nSCfwA7l.d.ts

@@ -0,0 +1 @@
+export { };