@videojs/html 0.1.0-preview.3 → 0.1.0-preview.5

package/dist/skins/minimal.js.map

@@ -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-root {\\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-root[data-orientation='horizontal'] {\\n  min-width: 5rem;\\n  width: 100%;\\n  height: 1.25rem;\\n}\\n\\n/* Vertical orientation styles */\\n.slider-root[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-root: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-root:hover .slider-thumb,\\n.slider-root: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\\npreview-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 { MediaSkin } from '@/media/media-skin';\nimport styles from './styles.css';\nimport '@/media/media-container';\nimport '@/media/media-provider';\nimport '@/components/media-play-button';\nimport '@/components/media-mute-button';\nimport '@/components/media-volume-slider';\nimport '@/components/media-time-slider';\nimport '@/components/media-fullscreen-button';\nimport '@/components/media-duration-display';\nimport '@/components/media-current-time-display';\nimport '@/components/media-preview-time-display';\nimport '@/components/media-popover';\nimport '@/components/media-tooltip';\n\nimport '@/icons';\n\nexport function getTemplateHTML() {\n  return /* html */`\n    ${MediaSkin.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-root 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-root>\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-root track-cursor-axis=\"x\">\n          <media-tooltip-trigger>\n            <media-time-slider-root class=\"slider-root\">\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-root>\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                <preview-time-display></preview-time-display>\n              </media-tooltip-popup>\n            </media-tooltip-positioner>\n          </media-tooltip-portal>\n        </media-tooltip-root>\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-root class=\"slider-root\" orientation=\"vertical\">\n              <media-volume-slider-track class=\"slider-track\">\n                <media-volume-slider-progress class=\"slider-progress\"></media-volume-slider-progress>\n              </media-volume-slider-track>\n              <media-volume-slider-thumb class=\"slider-thumb\"></media-volume-slider-thumb>\n            </media-volume-slider-root>\n          </media-popover>\n\n          <media-tooltip-root 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-root>\n        </div>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MediaSkinMinimal extends MediaSkin {\n  static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-skin-minimal', MediaSkinMinimal);\n"],"mappings":";;;;;qBAAA;;;;ACiBA,SAAgB,kBAAkB;AAChC,QAAiB;MACb,UAAU,iBAAiB,CAAC;aACrBA,eAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGpB,IAAa,mBAAb,cAAsC,UAAU;;yBACP;;;AAGzC,eAAe,OAAO,sBAAsB,iBAAiB"}
+{"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/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\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/time-slider-CA1GMs6A.js

@@ -0,0 +1,201 @@
+import { t as toConnectedHTMLComponent } from "./component-factory-DeAN6cjC.js";
+import { timeSliderStateDefinition } from "@videojs/core/store";
+import { setAttributes } from "@videojs/utils/dom";
+import { TimeSlider } from "@videojs/core";
+
+//#region src/elements/time-slider.ts
+/**
+* TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
+* Handles element attributes and properties based on state
+*/
+const getTimeSliderRootProps = (state, element) => {
+	const formatTime = (time) => {
+		return `${Math.floor(time / 60)}:${Math.floor(time % 60).toString().padStart(2, "0")}`;
+	};
+	const currentTimeText = formatTime(state.currentTime);
+	const durationText = formatTime(state.duration);
+	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": `${currentTimeText} of ${durationText}`,
+		"aria-orientation": element.orientation || "horizontal"
+	};
+};
+var TimeSliderRoot = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this._core = null;
+	}
+	static {
+		this.observedAttributes = ["orientation"];
+	}
+	get currentTime() {
+		return this._state?.currentTime ?? 0;
+	}
+	get duration() {
+		return this._state?.duration ?? 0;
+	}
+	get orientation() {
+		return this.getAttribute("orientation") || "horizontal";
+	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
+	}
+	_update(_props, state) {
+		this._state = state;
+		if (state && !this._core) {
+			this._core = new TimeSlider();
+			this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));
+			this._core.attach(this);
+			state.core = this._core;
+		}
+		this._core?.setState(state);
+	}
+	_render(props, state) {
+		const coreState = state?.core?.getState();
+		if (!coreState) return;
+		this.style.setProperty("--slider-fill", `${Math.round(coreState._fillWidth)}%`);
+		this.style.setProperty("--slider-pointer", `${Math.round(coreState._pointerWidth)}%`);
+		setAttributes(this, props);
+	}
+};
+var TimeSliderTrack = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		const rootElement = this.closest("media-time-slider");
+		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "100%";
+			this.style.removeProperty("height");
+		} else {
+			this.style.height = "100%";
+			this.style.removeProperty("width");
+		}
+	}
+};
+var TimeSliderProgress = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+		this.style.width = "var(--slider-fill, 0%)";
+		this.style.height = "100%";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "var(--slider-fill, 0%)";
+			this.style.height = "100%";
+			this.style.top = "0";
+			this.style.removeProperty("bottom");
+		} else {
+			this.style.height = "var(--slider-fill, 0%)";
+			this.style.width = "100%";
+			this.style.bottom = "0";
+			this.style.removeProperty("top");
+		}
+	}
+};
+var TimeSliderPointer = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+		this.style.width = "var(--slider-pointer, 0%)";
+		this.style.height = "100%";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.width = "var(--slider-pointer, 0%)";
+			this.style.height = "100%";
+			this.style.top = "0";
+			this.style.removeProperty("bottom");
+		} else {
+			this.style.height = "var(--slider-pointer, 0%)";
+			this.style.width = "100%";
+			this.style.bottom = "0";
+			this.style.removeProperty("top");
+		}
+	}
+};
+var TimeSliderThumb = class extends HTMLElement {
+	constructor() {
+		super();
+		this.style.position = "absolute";
+	}
+	_update(props, _state) {
+		setAttributes(this, props);
+		if (props["data-orientation"] === "horizontal") {
+			this.style.left = "var(--slider-fill, 0%)";
+			this.style.top = "50%";
+			this.style.translate = "-50% -50%";
+		} else {
+			this.style.bottom = "var(--slider-fill, 0%)";
+			this.style.left = "50%";
+			this.style.translate = "-50% 50%";
+		}
+	}
+};
+const useTimeSliderRootState = {
+	keys: timeSliderStateDefinition.keys,
+	transform: (rawState, mediaStore) => ({
+		...timeSliderStateDefinition.stateTransform(rawState),
+		...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
+		core: null
+	})
+};
+const getTimeSliderTrackProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderProgressProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderPointerProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const getTimeSliderThumbProps = (_state, element) => {
+	const rootElement = element.closest("media-time-slider");
+	return { "data-orientation": rootElement?.orientation || "horizontal" };
+};
+const TimeSliderRootElement = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
+const TimeSliderTrackElement = toConnectedHTMLComponent(TimeSliderTrack, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderTrackProps, "TimeSliderTrack");
+const TimeSliderProgressElement = toConnectedHTMLComponent(TimeSliderProgress, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderProgressProps, "TimeSliderProgress");
+const TimeSliderPointerElement = toConnectedHTMLComponent(TimeSliderPointer, {
+	keys: [],
+	transform: () => ({})
+}, getTimeSliderPointerProps, "TimeSliderPointer");
+const TimeSliderThumbElement = toConnectedHTMLComponent(TimeSliderThumb, {
+	keys: [],
+	transform: () => ({})
+}, 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-CA1GMs6A.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-CA1GMs6A.js","names":["getTimeSliderRootProps: PropsHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","CoreTimeSlider","useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/time-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\ninterface TimeSliderRootState {\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\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<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = (state, element) => {\n  const formatTime = (time: number) => {\n    const minutes = Math.floor(time / 60);\n    const seconds = Math.floor(time % 60);\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  const currentTimeText = formatTime(state.currentTime);\n  const durationText = formatTime(state.duration);\n\n  const baseProps: Record<string, any> = {\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 as any).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': `${currentTimeText} of ${durationText}`,\n    'aria-orientation': (element as any).orientation || 'horizontal',\n  };\n\n  return baseProps;\n};\n\nexport class TimeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['orientation'];\n\n  _state: TimeSliderRootState | undefined;\n  _core: CoreTimeSlider | null = null;\n\n  get currentTime(): number {\n    return this._state?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._state?.duration ?? 0;\n  }\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n\n  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n    if (name === 'orientation' && this._state) {\n      this._render(getTimeSliderRootProps(this._state, this), this._state);\n    }\n  }\n\n  _update(_props: any, state: any): void {\n    this._state = state;\n\n    if (state && !this._core) {\n      this._core = new CoreTimeSlider();\n      this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));\n      this._core.attach(this);\n      state.core = this._core;\n    }\n\n    this._core?.setState(state);\n  }\n\n  _render(props: any, state: any): void {\n    const coreState = state?.core?.getState();\n    if (!coreState) return;\n\n    this.style.setProperty('--slider-fill', `${Math.round(coreState._fillWidth)}%`);\n    this.style.setProperty('--slider-pointer', `${Math.round(coreState._pointerWidth)}%`);\n\n    setAttributes(this, props);\n  }\n}\n\nexport class TimeSliderTrack extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    // Set this element as the track element in the core TimeSlider\n    const rootElement = this.closest('media-time-slider') as any;\n    if (rootElement?._state?.core) {\n      rootElement._state.core.setState({ _trackElement: this });\n    }\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = '100%';\n      this.style.removeProperty('height');\n    } else {\n      this.style.height = '100%';\n      this.style.removeProperty('width');\n    }\n  }\n}\n\nexport class TimeSliderProgress extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-fill, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-fill, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-fill, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderPointer extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n    this.style.width = 'var(--slider-pointer, 0%)';\n    this.style.height = '100%';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.width = 'var(--slider-pointer, 0%)';\n      this.style.height = '100%';\n      this.style.top = '0';\n      this.style.removeProperty('bottom');\n    } else {\n      this.style.height = 'var(--slider-pointer, 0%)';\n      this.style.width = '100%';\n      this.style.bottom = '0';\n      this.style.removeProperty('top');\n    }\n  }\n}\n\nexport class TimeSliderThumb extends HTMLElement {\n  constructor() {\n    super();\n    this.style.position = 'absolute';\n  }\n\n  _update(props: any, _state: any): void {\n    setAttributes(this, props);\n\n    // Set appropriate positioning based on orientation\n    if (props['data-orientation'] === 'horizontal') {\n      this.style.left = 'var(--slider-fill, 0%)';\n      this.style.top = '50%';\n      this.style.translate = '-50% -50%';\n    } else {\n      this.style.bottom = 'var(--slider-fill, 0%)';\n      this.style.left = '50%';\n      this.style.translate = '-50% 50%';\n    }\n  }\n}\n\nexport const useTimeSliderRootState: StateHook<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = {\n  keys: timeSliderStateDefinition.keys,\n  transform: (rawState, mediaStore) => ({\n    ...timeSliderStateDefinition.stateTransform(rawState),\n    ...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    core: null,\n  }),\n};\n\nexport const getTimeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderPointerProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const getTimeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n  const rootElement = element.closest('media-time-slider') as any;\n  return {\n    'data-orientation': rootElement?.orientation || 'horizontal',\n  };\n};\n\nexport const TimeSliderRootElement: ConnectedComponentConstructor<{\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider | null;\n}> = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot');\n\nexport const TimeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderTrack,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderTrackProps,\n  'TimeSliderTrack',\n);\n\nexport const TimeSliderProgressElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderProgress,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderProgressProps,\n  'TimeSliderProgress',\n);\n\nexport const TimeSliderPointerElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderPointer,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderPointerProps,\n  'TimeSliderPointer',\n);\n\nexport const TimeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n  TimeSliderThumb,\n  { keys: [], transform: () => ({}) },\n  getTimeSliderThumbProps,\n  'TimeSliderThumb',\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":"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"}

package/dist/tooltip-CJpujx2f.js

@@ -0,0 +1,219 @@
+import { getDocumentOrShadowRoot } from "@videojs/utils/dom";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+
+//#region src/elements/tooltip.ts
+var TooltipElement = class extends HTMLElement {
+	#open = false;
+	#hoverTimeout = null;
+	#cleanup = null;
+	#arrowElement = null;
+	#pointerPosition = {
+		x: 0,
+		y: 0
+	};
+	#transitionStatus = "initial";
+	#abortController = null;
+	connectedCallback() {
+		this.setAttribute("role", "tooltip");
+		this.#abortController ??= new AbortController();
+		const { signal } = this.#abortController;
+		const trigger = this.#triggerElement;
+		if (trigger) {
+			if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+				trigger.addEventListener("pointerenter", this, { signal });
+				trigger.addEventListener("pointerleave", this, { signal });
+				trigger.addEventListener("pointermove", this, { signal });
+			}
+		}
+		this.#updateVisibility();
+	}
+	disconnectedCallback() {
+		this.#clearHoverTimeout();
+		this.#cleanup?.();
+		this.#abortController?.abort();
+		this.#abortController = null;
+		this.#transitionStatus = "unmounted";
+		this.#updateVisibility();
+	}
+	handleEvent(event) {
+		switch (event.type) {
+			case "pointerenter":
+				this.#handlePointerEnter();
+				break;
+			case "pointerleave":
+				this.#handlePointerLeave(event);
+				break;
+			case "pointermove":
+				this.#handlePointerMove(event);
+				break;
+			default: break;
+		}
+	}
+	static get observedAttributes() {
+		return [
+			"delay",
+			"close-delay",
+			"track-cursor-axis",
+			"side",
+			"side-offset",
+			"collision-padding"
+		];
+	}
+	get delay() {
+		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
+	}
+	get closeDelay() {
+		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
+	}
+	get trackCursorAxis() {
+		const value = this.getAttribute("track-cursor-axis");
+		return value === "x" || value === "y" || value === "both" ? value : void 0;
+	}
+	get side() {
+		return this.getAttribute("side") ?? "top";
+	}
+	get sideOffset() {
+		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
+	}
+	get collisionPadding() {
+		return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
+	}
+	get #triggerElement() {
+		return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`);
+	}
+	#setOpen(open) {
+		if (this.#open === open) return;
+		this.#open = open;
+		if (open) {
+			this.#setupFloating();
+			this.#transitionStatus = "initial";
+			this.#updateVisibility();
+			this.showPopover();
+			requestAnimationFrame(() => {
+				this.#transitionStatus = "open";
+				this.#updateVisibility();
+			});
+		} else {
+			this.#transitionStatus = "close";
+			this.#updateVisibility();
+			const transitions = this.getAnimations().filter((anim) => anim instanceof CSSTransition);
+			if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => this.hidePopover()).catch(() => this.hidePopover());
+			else this.hidePopover();
+			this.#cleanup?.();
+			this.#cleanup = null;
+		}
+	}
+	#updateVisibility() {
+		this.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
+		this.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
+		this.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+		this.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
+		const triggerElement = this.#triggerElement;
+		if (triggerElement) triggerElement.toggleAttribute("data-popup-open", this.#open);
+	}
+	#setupFloating() {
+		const trigger = this.#triggerElement;
+		if (!trigger) return;
+		const placement = this.side;
+		const sideOffset = this.sideOffset;
+		const collisionPadding = this.collisionPadding;
+		const mediaContainer = this.closest("media-container");
+		this.#arrowElement = this.querySelector("media-tooltip-arrow");
+		const updatePosition = () => {
+			const middleware = [
+				offset(sideOffset),
+				flip(),
+				shift({
+					boundary: mediaContainer,
+					padding: collisionPadding
+				})
+			];
+			if (this.#arrowElement) middleware.push(arrow({ element: this.#arrowElement }));
+			computePosition(this.trackCursorAxis ? { getBoundingClientRect: () => {
+				const triggerRect = trigger.getBoundingClientRect();
+				if (this.trackCursorAxis === "x") return {
+					width: 0,
+					height: 0,
+					top: triggerRect.top,
+					right: this.#pointerPosition.x,
+					bottom: triggerRect.bottom,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
+					y: triggerRect.top
+				};
+				else if (this.trackCursorAxis === "y") return {
+					width: 0,
+					height: 0,
+					top: this.#pointerPosition.y,
+					right: triggerRect.right,
+					bottom: this.#pointerPosition.y,
+					left: triggerRect.left,
+					x: triggerRect.left,
+					y: this.#pointerPosition.y
+				};
+				else return {
+					width: 0,
+					height: 0,
+					top: this.#pointerPosition.y,
+					right: this.#pointerPosition.x,
+					bottom: this.#pointerPosition.y,
+					left: this.#pointerPosition.x,
+					x: this.#pointerPosition.x,
+					y: this.#pointerPosition.y
+				};
+			} } : trigger, this, {
+				placement,
+				middleware,
+				strategy: "fixed"
+			}).then(({ x, y, middlewareData }) => {
+				Object.assign(this.style, {
+					left: `${x}px`,
+					top: `${y}px`
+				});
+				if (this.#arrowElement && middlewareData.arrow) {
+					const { x: arrowX, y: arrowY } = middlewareData.arrow;
+					Object.assign(this.#arrowElement.style, {
+						left: arrowX != null ? `${arrowX}px` : void 0,
+						top: arrowY != null ? `${arrowY}px` : void 0
+					});
+				}
+			});
+		};
+		updatePosition();
+		if (!this.trackCursorAxis) this.#cleanup = autoUpdate(trigger, this, updatePosition);
+	}
+	#updatePosition() {
+		if (this.#open && this.trackCursorAxis) this.#setupFloating();
+	}
+	#clearHoverTimeout() {
+		if (this.#hoverTimeout) {
+			globalThis.clearTimeout(this.#hoverTimeout);
+			this.#hoverTimeout = null;
+		}
+	}
+	#handlePointerEnter() {
+		this.#clearHoverTimeout();
+		this.#hoverTimeout = globalThis.setTimeout(() => {
+			this.#setOpen(true);
+		}, this.delay);
+	}
+	#handlePointerLeave(_event) {
+		this.#clearHoverTimeout();
+		this.#hoverTimeout = globalThis.setTimeout(() => {
+			this.#setOpen(false);
+		}, this.closeDelay);
+	}
+	#handlePointerMove(event) {
+		if (this.trackCursorAxis) {
+			this.#pointerPosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (this.#open) this.#updatePosition();
+		}
+	}
+};
+
+//#endregion
+export { TooltipElement as t };
+//# sourceMappingURL=tooltip-CJpujx2f.js.map

package/dist/tooltip-CJpujx2f.js.map

@@ -0,0 +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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"}