npm - @videojs/html - Versions diffs - 0.1.0-preview.5 → 0.1.0-preview.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/skins/minimal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal.js","names":["styles"],"sources":["../../src/skins/minimal/styles.css","../../src/skins/minimal/index.ts"],"sourcesContent":["\"media-container * {\\n box-sizing: border-box;\\n}\\n\\nmedia-container {\\n position: relative;\\n isolation: isolate;\\n container: root / inline-size;\\n overflow: clip;\\n font-size: 0.8125rem;\\n line-height: 1.5;\\n border-radius: inherit;\\n background: oklab(0 0 0);\\n}\\nmedia-container::after {\\n content: '';\\n position: absolute;\\n pointer-events: none;\\n border-radius: inherit;\\n z-index: 10;\\n inset: 0;\\n box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.2);\\n}\\n@media (prefers-color-scheme: dark) {\\n media-container::after {\\n box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.2);\\n }\\n}\\n\\n/* Fullscreen /\\nmedia-container:fullscreen {\\n border-radius: 0;\\n}\\n\\nmedia-container > ::slotted([slot='media']) {\\n display: block;\\n width: 100%;\\n height: 100%;\\n}\\n\\n/ Media Container UI Overlay Styling /\\nmedia-container > .overlay {\\n position: absolute;\\n inset: 0;\\n display: flex;\\n flex-flow: column nowrap;\\n align-items: start;\\n pointer-events: none;\\n border-radius: inherit;\\n background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));\\n transform: translateY(100%);\\n transition-property: transform, opacity;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n transition-delay: 500ms;\\n opacity: 0;\\n}\\nmedia-container:hover > .overlay,\\nmedia-container:has([data-paused]) > .overlay,\\nmedia-container:has([aria-expanded='true']) > .overlay {\\n opacity: 1;\\n transform: translateY(0);\\n transition-duration: 100ms;\\n transition-delay: 0ms;\\n}\\n\\n/ Media Control Bar UI/Styles /\\n.control-bar {\\n position: absolute;\\n bottom: 0;\\n inset-inline: 0;\\n padding: 2.5rem 0.75rem 0.75rem 0.75rem;\\n display: flex;\\n align-items: center;\\n gap: 0.875rem;\\n will-change: transform, filter, opacity;\\n transform: translateY(100%);\\n opacity: 0;\\n filter: blur(8px);\\n transition-property: transform, filter, opacity;\\n transition-delay: 500ms;\\n transition-duration: 300ms;\\n transition-timing-function: ease-out;\\n color: oklab(1 0 0);\\n}\\nmedia-container:hover > .control-bar,\\nmedia-container:has([data-paused]) > .control-bar,\\nmedia-container:has([aria-expanded='true']) > .control-bar {\\n opacity: 1;\\n transform: translateY(0);\\n filter: blur(0px);\\n transition-delay: 0ms;\\n transition-duration: 100ms;\\n}\\n\\n/ Time Display Styling /\\n.time-display-group {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.duration-display {\\n display: contents;\\n color: oklab(1 0 0 / 0.5);\\n}\\nmedia-current-time-display,\\nmedia-duration-display {\\n text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.375rem;\\n}\\n\\n/ Generic Media Button Styling /\\n.button {\\n display: grid;\\n flex-shrink: 0;\\n padding: 0.625rem;\\n cursor: pointer;\\n background: transparent;\\n border: none;\\n border-radius: 0.375rem;\\n color: oklab(1 0 0);\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition-property: background-color, color, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.button:hover,\\n.button:focus-visible,\\n.button[aria-expanded='true'] {\\n color: oklab(1 0 0 / 0.8);\\n text-decoration: none;\\n}\\n.button:focus-visible {\\n outline-color: oklab(1 0 0);\\n outline-offset: 2px;\\n}\\n.button[disabled] {\\n cursor: not-allowed;\\n opacity: 0.5;\\n filter: grayscale(1);\\n}\\n\\n.button .icon {\\n grid-area: 1 / 1;\\n width: 18px;\\n height: 18px;\\n filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));\\n}\\n\\n/ Media Play Button UI/Styles /\\nmedia-play-button .icon {\\n opacity: 0;\\n transition: opacity 150ms linear;\\n}\\n\\nmedia-play-button:not([data-paused]) .pause-icon,\\nmedia-play-button[data-paused] .play-icon {\\n opacity: 1;\\n}\\n\\n/ Media Fullscreen Button UI/Styles /\\nmedia-fullscreen-button .icon {\\n display: none;\\n}\\nmedia-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\\nmedia-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\\n display: inline;\\n}\\n\\n/ One way to define the \\\"default visible\\\" icon (CJP) /\\nmedia-mute-button .icon {\\n display: none;\\n}\\nmedia-mute-button:not([data-volume-level]) .volume-low-icon,\\nmedia-mute-button[data-volume-level='high'] .volume-high-icon,\\nmedia-mute-button[data-volume-level='low'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='medium'] .volume-low-icon,\\nmedia-mute-button[data-volume-level='off'] .volume-off-icon {\\n display: inline;\\n}\\n\\n/ TimeSlider Component Styles /\\n.slider {\\n flex: 1;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: relative;\\n border-radius: calc(infinity 1px);\\n outline: none;\\n}\\n\\n/* Horizontal orientation styles /\\n.slider[data-orientation='horizontal'] {\\n min-width: 5rem;\\n width: 100%;\\n height: 1.25rem;\\n}\\n\\n/ Vertical orientation styles /\\n.slider[data-orientation='vertical'] {\\n height: 4.5rem;\\n width: 1.25rem;\\n}\\n\\n.slider-track {\\n position: relative;\\n isolation: isolate;\\n background-color: oklab(1 0 0 / 0.2);\\n border-radius: inherit;\\n overflow: hidden;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n transition: outline-offset 150ms ease-out;\\n box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);\\n}\\n\\n/ Horizontal track styles /\\n.slider-track[data-orientation='horizontal'] {\\n width: 100%;\\n height: 0.1875rem;\\n}\\n\\n/ Vertical track styles /\\n.slider-track[data-orientation='vertical'] {\\n width: 0.1875rem;\\n height: 100%;\\n}\\n\\n.slider:focus-visible .slider-track {\\n outline-color: oklab(1 0 0);\\n outline-offset: 6px;\\n}\\n\\n.slider-thumb {\\n width: 0.75rem;\\n height: 0.75rem;\\n background-color: oklab(1 0 0);\\n border-radius: calc(infinity 1px);\\n user-select: none;\\n z-index: 10;\\n box-shadow:\\n 0 0 0 1px oklab(0 0 0 / 0.1),\\n 0 1px 3px 0 oklab(0 0 0 / 0.15),\\n 0 1px 2px -1px oklab(0 0 0 / 0.15);\\n opacity: 0;\\n scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n}\\n.slider:hover .slider-thumb,\\n.slider:focus-within .slider-thumb {\\n opacity: 1;\\n scale: 1;\\n}\\n.slider-track[data-orientation='horizontal'] .slider-thumb {\\n cursor: ew-resize;\\n}\\n.slider-track[data-orientation='vertical'] .slider-thumb {\\n cursor: ns-resize;\\n}\\n\\n.slider-pointer {\\n display: none;\\n}\\n\\n.slider-progress {\\n background-color: oklab(1 0 0);\\n border-radius: inherit;\\n}\\n\\nmedia-preview-time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n.popup-animation {\\n transition-property: transform, scale, opacity, filter;\\n transition-duration: 200ms;\\n transform: scale(1);\\n transform-origin: bottom;\\n opacity: 1;\\n filter: blur(0px);\\n}\\n.popup-animation[data-starting-style],\\n.popup-animation[data-ending-style] {\\n transform: scale(0);\\n opacity: 0;\\n filter: blur(8px);\\n}\\n.popup-animation[data-instant] {\\n transition-duration: 0ms;\\n}\\n\\nmedia-popover {\\n margin: 0;\\n border: none;\\n box-shadow: none;\\n background: transparent;\\n padding: 0.75rem 0.25rem;\\n border-radius: calc(infinity * 1px);\\n}\\n\\n/* Tooltip Component Styles /\\nmedia-tooltip {\\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"}
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/{time-slider-CA1GMs6A.js → time-slider-DKamO_2Q.js} RENAMED Viewed

@@ -34,7 +34,7 @@ var TimeSliderRoot = class extends HTMLElement {
 		this._core = null;
 	}
 	static {
-		this.observedAttributes = ["orientation"];
+		this.observedAttributes = ["commandfor", "orientation"];
 	}
 	get currentTime() {
 		return this._state?.currentTime ?? 0;
@@ -45,8 +45,9 @@ var TimeSliderRoot = class extends HTMLElement {
 	get orientation() {
 		return this.getAttribute("orientation") || "horizontal";
 	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
+	attributeChangedCallback(name, _oldValue, newValue) {
 		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
+		else if (name === "commandfor") this.style.setProperty("anchor-name", `--${newValue}`);
 	}
 	_update(_props, state) {
 		this._state = state;
@@ -198,4 +199,4 @@ const TimeSliderElement = Object.assign({}, {
 //#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
+//# sourceMappingURL=time-slider-DKamO_2Q.js.map

package/dist/time-slider-DKamO_2Q.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"time-slider-DKamO_2Q.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[] = ['commandfor', '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 } else if (name === 'commandfor') {\n this.style.setProperty('anchor-name', `--${newValue}`);\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 → tooltip-B-glki2f.js} RENAMED Viewed

@@ -1,18 +1,40 @@
-import { getDocumentOrShadowRoot } from "@videojs/utils/dom";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { getBoundingClientRectWithoutTransform, getDocumentOrShadowRoot, getInBoundsAdjustments } from "@videojs/utils/dom";
 //#region src/elements/tooltip.ts
 var TooltipElement = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"id",
+			"delay",
+			"close-delay",
+			"track-cursor-axis",
+			"side",
+			"side-offset",
+			"collision-padding"
+		];
+	}
 	#open = false;
 	#hoverTimeout = null;
-	#cleanup = null;
-	#arrowElement = null;
 	#pointerPosition = {
 		x: 0,
 		y: 0
 	};
 	#transitionStatus = "initial";
 	#abortController = null;
+	constructor() {
+		super();
+		new ResizeObserver(() => this.#checkCollision()).observe(this);
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (name === "id") this.style.setProperty("position-anchor", `--${newValue}`);
+		const [side, alignment] = this.side.split("-");
+		this.style.setProperty("top", `calc(anchor(${side}) - ${this.sideOffset}px)`);
+		if (this.trackCursorAxis) this.style.setProperty("translate", `-50% -100%`);
+		else {
+			this.style.setProperty("translate", `0 -100%`);
+			this.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
+		}
+	}
 	connectedCallback() {
 		this.setAttribute("role", "tooltip");
 		this.#abortController ??= new AbortController();
@@ -29,7 +51,6 @@ var TooltipElement = class extends HTMLElement {
 	}
 	disconnectedCallback() {
 		this.#clearHoverTimeout();
-		this.#cleanup?.();
 		this.#abortController?.abort();
 		this.#abortController = null;
 		this.#transitionStatus = "unmounted";
@@ -49,16 +70,6 @@ var TooltipElement = class extends HTMLElement {
 			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);
 	}
@@ -85,13 +96,13 @@ var TooltipElement = class extends HTMLElement {
 		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();
+				this.#checkCollision();
 			});
 		} else {
 			this.#transitionStatus = "close";
@@ -99,8 +110,6 @@ var TooltipElement = class extends HTMLElement {
 			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() {
@@ -111,79 +120,22 @@ var TooltipElement = class extends HTMLElement {
 		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();
+		if (this.#open && this.trackCursorAxis) {
+			this.style.setProperty("left", `${this.#pointerPosition.x}px`);
+			this.#checkCollision();
+		}
+	}
+	#checkCollision() {
+		const mediaContainer = this.closest("media-container");
+		if (!mediaContainer || !this.#open) return;
+		const { x } = getInBoundsAdjustments(getBoundingClientRectWithoutTransform(this), getBoundingClientRectWithoutTransform(mediaContainer), this.collisionPadding);
+		if (x !== 0) if (this.trackCursorAxis) {
+			const currentLeft = Number.parseFloat(this.style.left || "0");
+			this.style.setProperty("left", `${currentLeft + x}px`);
+		} else this.style.setProperty("translate", `${x}px -100%`);
+		else if (this.trackCursorAxis) this.style.setProperty("translate", "-50% -100%");
+		else this.style.setProperty("translate", "0 -100%");
 	}
 	#clearHoverTimeout() {
 		if (this.#hoverTimeout) {
@@ -216,4 +168,4 @@ var TooltipElement = class extends HTMLElement {
 //#endregion
 export { TooltipElement as t };
-//# sourceMappingURL=tooltip-CJpujx2f.js.map
+//# sourceMappingURL=tooltip-B-glki2f.js.map

package/dist/tooltip-B-glki2f.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tooltip-B-glki2f.js","names":["#checkCollision","#abortController","#triggerElement","#updateVisibility","#clearHoverTimeout","#transitionStatus","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#open","#pointerPosition","#hoverTimeout","#setOpen","#updatePosition"],"sources":["../src/elements/tooltip.ts"],"sourcesContent":["import type { MediaContainerElement } from '@/media/media-container';\n\nimport {\n getBoundingClientRectWithoutTransform,\n getDocumentOrShadowRoot,\n getInBoundsAdjustments,\n} from '@videojs/utils/dom';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\nexport class TooltipElement extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['id', 'delay', 'close-delay', 'track-cursor-axis', 'side', 'side-offset', 'collision-padding'];\n }\n\n #open = false;\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #pointerPosition = { x: 0, y: 0 };\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n #abortController: AbortController | null = null;\n\n constructor() {\n super();\n\n const resizeObserver = new ResizeObserver(() => this.#checkCollision());\n resizeObserver.observe(this);\n }\n\n attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {\n if (name === 'id') {\n this.style.setProperty('position-anchor', `--${newValue}`);\n }\n const [side, alignment] = this.side.split('-');\n this.style.setProperty('top', `calc(anchor(${side}) - ${this.sideOffset}px)`);\n\n if (this.trackCursorAxis) {\n this.style.setProperty('translate', `-50% -100%`);\n } else {\n this.style.setProperty('translate', `0 -100%`);\n this.style.setProperty('justify-self', alignment === 'start'\n ? 'anchor-start'\n : alignment === 'end'\n ? 'anchor-end'\n : 'anchor-center');\n }\n }\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.#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 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.#transitionStatus = 'initial';\n this.#updateVisibility();\n\n this.showPopover();\n\n requestAnimationFrame(() => {\n this.#transitionStatus = 'open';\n this.#updateVisibility();\n this.#checkCollision();\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 }\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(\n 'data-ending-style',\n this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted',\n );\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 #updatePosition(): void {\n if (this.#open && this.trackCursorAxis) {\n this.style.setProperty('left', `${this.#pointerPosition.x}px`);\n this.#checkCollision();\n }\n }\n\n #checkCollision(): void {\n const mediaContainer = this.closest('media-container') as MediaContainerElement;\n if (!mediaContainer || !this.#open) return;\n\n const popupRect = getBoundingClientRectWithoutTransform(this);\n const boundsRect = getBoundingClientRectWithoutTransform(mediaContainer);\n const { x } = getInBoundsAdjustments(popupRect, boundsRect, this.collisionPadding);\n\n if (x !== 0) {\n if (this.trackCursorAxis) {\n const currentLeft = Number.parseFloat(this.style.left || '0');\n this.style.setProperty('left', `${currentLeft + x}px`);\n } else {\n this.style.setProperty('translate', `${x}px -100%`);\n }\n } else {\n if (this.trackCursorAxis) {\n this.style.setProperty('translate', '-50% -100%');\n } else {\n this.style.setProperty('translate', '0 -100%');\n }\n }\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n globalThis.clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (this.trackCursorAxis) {\n this.#pointerPosition = { x: event.clientX, y: event.clientY };\n\n if (this.#open) {\n this.#updatePosition();\n }\n }\n }\n}\n"],"mappings":"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"}

package/dist/{media-provider-CyoL0bCx.js → video-provider-BKDqoKFf.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { createMediaStore } from "@videojs/core/store";
 import { ProviderMixin } from "@open-wc/context-protocol";
-//#region src/media/media-provider.ts
+//#region src/media/video-provider.ts
 const ProviderHTMLElement = ProviderMixin(HTMLElement);
-var MediaProviderElement = class extends ProviderHTMLElement {
+var VideoProviderElement = class extends ProviderHTMLElement {
 	constructor(..._args) {
 		super(..._args);
 		this.contexts = { mediaStore: () => {
@@ -13,5 +13,5 @@ var MediaProviderElement = class extends ProviderHTMLElement {
 };
 //#endregion
-export { MediaProviderElement as t };
-//# sourceMappingURL=media-provider-CyoL0bCx.js.map
+export { VideoProviderElement as t };
+//# sourceMappingURL=video-provider-BKDqoKFf.js.map

package/dist/{media-provider-CyoL0bCx.js.map → video-provider-BKDqoKFf.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"~~media~~-provider-~~CyoL0bCx~~.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/~~media~~-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class ~~MediaProviderElement~~ extends ProviderHTMLElement {\n contexts = {\n mediaStore: (): MediaStore => {\n return createMediaStore();\n },\n };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}
1	+ {"version":3,"file":"video-provider-BKDqoKFf.js","names":["ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/video-provider.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { ProviderMixin } from '@open-wc/context-protocol';\nimport { createMediaStore } from '@videojs/core/store';\n\nconst ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);\n\nexport class VideoProviderElement extends ProviderHTMLElement {\n contexts = {\n mediaStore: (): MediaStore => {\n return createMediaStore();\n },\n };\n}\n"],"mappings":";;;;AAMA,MAAMA,sBAAgE,cAAc,YAAY;AAEhG,IAAa,uBAAb,cAA0C,oBAAoB;;;kBACjD,EACT,kBAA8B;AAC5B,UAAO,kBAAkB;KAE5B"}

package/dist/video-provider-BPPI5e47.js ADDED Viewed

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

package/dist/video-provider-BPPI5e47.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"video-provider-BPPI5e47.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/{volume-slider-guD8gqpi.js → volume-slider-CbFzCHX4.js} RENAMED Viewed

@@ -90,7 +90,7 @@ var VolumeSliderTrack = class extends HTMLElement {
 /**
 * VolumeSlider Progress component - Shows current progress
 */
-var VolumeSliderIndicatorElement = class extends HTMLElement {
+var VolumeSliderIndicator = class extends HTMLElement {
 	constructor() {
 		super();
 		this.style.position = "absolute";
@@ -180,7 +180,7 @@ const VolumeSliderTrackElement = toConnectedHTMLComponent(VolumeSliderTrack, {
 /**
 * Connected VolumeSlider Progress component
 */
-const VolumeSliderProgressElement = toConnectedHTMLComponent(VolumeSliderIndicatorElement, {
+const VolumeSliderIndicatorElement = toConnectedHTMLComponent(VolumeSliderIndicator, {
 	keys: [],
 	transform: () => ({})
 }, getVolumeSliderProgressProps, "VolumeSliderProgress");
@@ -197,10 +197,10 @@ const VolumeSliderThumbElement = toConnectedHTMLComponent(VolumeSliderThumb, {
 const VolumeSliderElement = Object.assign({}, {
 	Root: VolumeSliderRootElement,
 	Track: VolumeSliderTrackElement,
-	Progress: VolumeSliderProgressElement,
+	Indicator: VolumeSliderIndicatorElement,
 	Thumb: VolumeSliderThumbElement
 });
 //#endregion
 export { VolumeSliderTrackElement as a, VolumeSliderThumbElement as i, VolumeSliderIndicatorElement as n, VolumeSliderRootElement as r, VolumeSliderElement as t };
-//# sourceMappingURL=volume-slider-guD8gqpi.js.map
+//# sourceMappingURL=volume-slider-CbFzCHX4.js.map

package/dist/volume-slider-CbFzCHX4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"volume-slider-CbFzCHX4.js","names":["getVolumeSliderRootProps: PropsHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","CoreVolumeSlider","useVolumeSliderRootState: StateHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>"],"sources":["../src/elements/volume-slider.ts"],"sourcesContent":["import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\n\nimport { setAttributes } from '@videojs/utils/dom';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\n/**\n * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getVolumeSliderRootProps: PropsHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}> = (state, element) => {\n const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;\n\n const baseProps: Record<string, any> = {\n role: 'slider',\n tabindex: element.getAttribute('tabindex') ?? '0',\n 'data-muted': state.muted.toString(),\n 'data-volume-level': state.volumeLevel,\n 'data-orientation': (element as any).orientation || 'horizontal',\n 'aria-label': 'Volume',\n 'aria-valuemin': '0',\n 'aria-valuemax': '100',\n 'aria-valuetext': volumeText,\n 'aria-orientation': (element as any).orientation || 'horizontal',\n };\n\n return baseProps;\n};\n\n/**\n * VolumeSlider Root component - Main container with pointer event handling\n */\ninterface VolumeSliderRootState {\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}\n\nexport class VolumeSliderRoot extends HTMLElement {\n static readonly observedAttributes: readonly string[] = ['orientation'];\n\n _state: VolumeSliderRootState | undefined;\n _core: CoreVolumeSlider | null = null;\n\n get volume(): number | undefined {\n return this._state?.volume;\n }\n\n get muted(): boolean {\n return this._state?.muted ?? false;\n }\n\n get volumeLevel(): string {\n return this._state?.volumeLevel ?? 'high';\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(getVolumeSliderRootProps(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 CoreVolumeSlider();\n this._core.subscribe(() => this._render(getVolumeSliderRootProps(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', `${coreState._fillWidth.toFixed(3)}%`);\n this.style.setProperty('--slider-pointer', `${coreState._pointerWidth.toFixed(3)}%`);\n\n props['aria-valuenow'] = coreState._fillWidth.toString();\n\n setAttributes(this, props);\n }\n}\n\n/**\n * VolumeSlider Track component - Track element that captures pointer events\n */\nexport class VolumeSliderTrack extends HTMLElement {\n constructor() {\n super();\n }\n\n connectedCallback(): void {\n // Set this element as the track element in the core VolumeSlider\n const rootElement = this.closest('media-volume-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\n/**\n * VolumeSlider Progress component - Shows current progress\n */\nexport class VolumeSliderIndicator 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\n/**\n * VolumeSlider Thumb component - Draggable thumb element\n */\nexport class VolumeSliderThumb 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\n/**\n * VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState\n * Handles media store state subscription and transformation\n */\nexport const useVolumeSliderRootState: StateHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}> = {\n keys: volumeSliderStateDefinition.keys,\n transform: (rawState, mediaStore) => ({\n ...volumeSliderStateDefinition.stateTransform(rawState),\n ...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n core: null,\n }),\n};\n\n/**\n * VolumeSlider Track props hook\n */\nexport const getVolumeSliderTrackProps: PropsHook<Record<string, never>> = (_state, element) => {\n const rootElement = element.closest('media-volume-slider') as any;\n return {\n 'data-orientation': rootElement?.orientation || 'horizontal',\n };\n};\n\n/**\n * VolumeSlider Progress props hook\n */\nexport const getVolumeSliderProgressProps: PropsHook<Record<string, never>> = (_state, element) => {\n const rootElement = element.closest('media-volume-slider') as any;\n return {\n 'data-orientation': rootElement?.orientation || 'horizontal',\n };\n};\n\n/**\n * VolumeSlider Thumb props hook\n */\nexport const getVolumeSliderThumbProps: PropsHook<Record<string, never>> = (_state, element) => {\n const rootElement = element.closest('media-volume-slider') as any;\n return {\n 'data-orientation': rootElement?.orientation || 'horizontal',\n };\n};\n\n/**\n * Connected VolumeSlider Root component using hook-style architecture\n */\nexport const VolumeSliderRootElement: ConnectedComponentConstructor<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}> = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot');\n\n/**\n * Connected VolumeSlider Track component\n */\nexport const VolumeSliderTrackElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n VolumeSliderTrack,\n { keys: [], transform: () => ({}) },\n getVolumeSliderTrackProps,\n 'VolumeSliderTrack',\n);\n\n/**\n * Connected VolumeSlider Progress component\n */\nexport const VolumeSliderIndicatorElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n VolumeSliderIndicator,\n { keys: [], transform: () => ({}) },\n getVolumeSliderProgressProps,\n 'VolumeSliderProgress',\n);\n\n/**\n * Connected VolumeSlider Thumb component\n */\nexport const VolumeSliderThumbElement: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(\n VolumeSliderThumb,\n { keys: [], transform: () => ({}) },\n getVolumeSliderThumbProps,\n 'VolumeSliderThumb',\n);\n\n/**\n * Compound VolumeSlider component object\n */\nexport const VolumeSliderElement = Object.assign(\n {},\n {\n Root: VolumeSliderRootElement,\n Track: VolumeSliderTrackElement,\n Indicator: VolumeSliderIndicatorElement,\n Thumb: VolumeSliderThumbElement,\n },\n) as {\n Root: typeof VolumeSliderRootElement;\n Track: typeof VolumeSliderTrackElement;\n Indicator: typeof VolumeSliderIndicatorElement;\n Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "0.1.0-preview.5",
+  "version": "0.1.0-preview.7",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,12 +45,10 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/core": "^1.6.13",
-    "@floating-ui/dom": "^1.6.13",
     "@open-wc/context-protocol": "^0.0.9",
-    "@videojs/core": "0.1.0-preview.5",
-    "@videojs/icons": "0.1.0-preview.5",
-    "@videojs/utils": "0.1.0-preview.5"
+    "@videojs/core": "0.1.0-preview.7",
+    "@videojs/icons": "0.1.0-preview.7",
+    "@videojs/utils": "0.1.0-preview.7"
   },
   "devDependencies": {
     "tsdown": "^0.15.9",

package/dist/button-D1DWjsQu.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"button-D1DWjsQu.js","names":["#handleKeyDown","#handleKeyUp"],"sources":["../src/elements/button.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nexport function getTemplateHTML(\n this: typeof ButtonElement,\n _attrs: Record<string, string>,\n _props: Record<string, any> = {},\n): string {\n return /* html */ `\n <style>\n /*\n NOTE: Even though primitives should aim to be \"unstyled\" in their core definitions, we should\n still add pointer-events, as this defines functionality. (CJP)\n */\n :host {\n pointer-events: auto;\n }\n </style>\n <slot>\n </slot>\n `;\n}\n\nexport class ButtonElement extends HTMLElement {\n static shadowRootOptions = {\n mode: 'open' as ShadowRootMode,\n };\n\n static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n // Set up the Shadow DOM if not using Declarative Shadow DOM.\n this.attachShadow((this.constructor as typeof ButtonElement).shadowRootOptions);\n\n const attrs = namedNodeMapToObject(this.attributes);\n const html = (this.constructor as typeof ButtonElement).getTemplateHTML(attrs);\n // From MDN: setHTMLUnsafe should be used instead of ShadowRoot.innerHTML\n // when a string of HTML may contain declarative shadow roots.\n const shadowRoot = this.shadowRoot as unknown as ShadowRoot;\n shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);\n }\n\n this.addEventListener('click', this);\n this.addEventListener('keydown', this);\n }\n\n handleEvent(event: Event): void {\n const { type } = event;\n if (type === 'keydown') {\n this.#handleKeyDown(event as KeyboardEvent);\n }\n }\n\n #handleKeyDown = (event: KeyboardEvent): void => {\n const { metaKey, altKey, key } = event;\n if (metaKey || altKey || !['Enter', ' '].includes(key)) {\n this.removeEventListener('keyup', this.#handleKeyUp);\n return;\n }\n this.addEventListener('keyup', this.#handleKeyUp, { once: true });\n };\n\n #handleKeyUp = (_event: KeyboardEvent): void => {\n this.handleEvent({ type: 'click' } as Event);\n };\n}\n"],"mappings":";;;AAEA,SAAgB,gBAEd,QACA,SAA8B,EAAE,EACxB;AACR,QAAkB;;;;;;;;;;;;;;AAepB,IAAa,gBAAb,cAAmC,YAAY;;2BAClB,EACzB,MAAM,QACP;;;yBAEgD;;CAEjD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AAEpB,QAAK,aAAc,KAAK,YAAqC,kBAAkB;GAE/E,MAAM,QAAQ,qBAAqB,KAAK,WAAW;GACnD,MAAM,OAAQ,KAAK,YAAqC,gBAAgB,MAAM;GAG9E,MAAM,aAAa,KAAK;AACxB,cAAW,gBAAgB,WAAW,cAAc,KAAK,GAAI,WAAW,YAAY;;AAGtF,OAAK,iBAAiB,SAAS,KAAK;AACpC,OAAK,iBAAiB,WAAW,KAAK;;CAGxC,YAAY,OAAoB;EAC9B,MAAM,EAAE,SAAS;AACjB,MAAI,SAAS,UACX,OAAKA,cAAe,MAAuB;;CAI/C,kBAAkB,UAA+B;EAC/C,MAAM,EAAE,SAAS,QAAQ,QAAQ;AACjC,MAAI,WAAW,UAAU,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,EAAE;AACtD,QAAK,oBAAoB,SAAS,MAAKC,YAAa;AACpD;;AAEF,OAAK,iBAAiB,SAAS,MAAKA,aAAc,EAAE,MAAM,MAAM,CAAC;;CAGnE,gBAAgB,WAAgC;AAC9C,OAAK,YAAY,EAAE,MAAM,SAAS,CAAU"}

package/dist/define/media-provider.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- import "../media-provider-D7P2TLXG.js";

package/dist/define/media-provider.js DELETED Viewed

@@ -1,3 +0,0 @@
-import "../media-provider-CyoL0bCx.js";
-import "../custom-element-3bDlB2XO.js";
-import "../media-provider-D_GL2_DN.js";

package/dist/media-container-C0MUzkJ_.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"media-container-C0MUzkJ_.js","names":["CustomElementConsumer: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/media-container.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\n\nimport { ConsumerMixin } from '@open-wc/context-protocol';\n\n/* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */\nexport function getTemplateHTML() {\n return /* html */ `\n <slot name=\"media\"></slot>\n <slot></slot>\n <div id=\"@default_portal_id\" style={ position: absolute; zIndex: 10; }>\n <slot name=\"portal\"></slot>\n </div>\n `;\n}\n\nconst CustomElementConsumer: Constructor<CustomElement & HTMLElement> = ConsumerMixin(HTMLElement);\n\nexport class MediaContainerElement extends CustomElementConsumer {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML: () => string = getTemplateHTML;\n\n _mediaStore: any;\n _mediaSlot: HTMLSlotElement;\n _paused: boolean = true;\n contexts = {\n mediaStore: (mediaStore: any): void => {\n this._mediaStore = mediaStore;\n this._handleMediaSlotChange();\n this._registerContainerStateOwner();\n this._subscribeToPlayState();\n },\n };\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof MediaContainerElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainerElement).getTemplateHTML();\n }\n\n this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;\n this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);\n\n // Add click handler for play/pause functionality\n this.addEventListener('click', this._handleClick);\n }\n\n connectedCallback(): void {\n super.connectedCallback?.();\n this._registerContainerStateOwner();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._unregisterContainerStateOwner();\n }\n\n _registerContainerStateOwner = (): void => {\n if (!this._mediaStore) return;\n this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: this });\n };\n\n _unregisterContainerStateOwner = (): void => {\n if (!this._mediaStore) return;\n this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: null });\n };\n\n _handleMediaSlotChange = (): void => {\n const media = this._mediaSlot.assignedElements({ flatten: true })[0];\n this._mediaStore.dispatch({ type: 'mediastateownerchangerequest', detail: media });\n };\n\n _handleClick = (event: Event): void => {\n if (!this._mediaStore) return;\n\n if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n if (this._paused) {\n this._mediaStore.dispatch({ type: 'playrequest' });\n } else {\n this._mediaStore.dispatch({ type: 'pauserequest' });\n }\n };\n\n _subscribeToPlayState = (): void => {\n if (!this._mediaStore) return;\n\n // Subscribe to paused state changes\n this._mediaStore.subscribe((state: any) => {\n this._paused = state.paused ?? true;\n });\n };\n}\n"],"mappings":";;;AAKA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;AASpB,MAAMA,wBAAkE,cAAc,YAAY;AAElG,IAAa,wBAAb,cAA2C,sBAAsB;;2BACpC,EAAE,MAAM,QAA0B;;;yBACtB;;CAcvC,cAAc;AACZ,SAAO;iBAXU;kBACR,EACT,aAAa,eAA0B;AACrC,QAAK,cAAc;AACnB,QAAK,wBAAwB;AAC7B,QAAK,8BAA8B;AACnC,QAAK,uBAAuB;KAE/B;4CA2B0C;AACzC,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;8CAG1C;AAC3C,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;sCAGlD;GACnC,MAAM,QAAQ,KAAK,WAAW,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC;AAClE,QAAK,YAAY,SAAS;IAAE,MAAM;IAAgC,QAAQ;IAAO,CAAC;;uBAGpE,UAAuB;AACrC,OAAI,CAAC,KAAK,YAAa;AAEvB,OAAI,CAAC,CAAC,SAAS,QAAQ,CAAC,SAAU,MAAM,OAAuB,aAAa,GAAG,CAAE;AAEjF,OAAI,KAAK,QACP,MAAK,YAAY,SAAS,EAAE,MAAM,eAAe,CAAC;OAElD,MAAK,YAAY,SAAS,EAAE,MAAM,gBAAgB,CAAC;;qCAInB;AAClC,OAAI,CAAC,KAAK,YAAa;AAGvB,QAAK,YAAY,WAAW,UAAe;AACzC,SAAK,UAAU,MAAM,UAAU;KAC/B;;AAvDF,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAA6C,kBAAkB;AACvF,QAAK,WAAY,YAAa,KAAK,YAA6C,iBAAiB;;AAGnG,OAAK,aAAa,KAAK,WAAY,cAAc,mBAAmB;AACpE,OAAK,WAAW,iBAAiB,cAAc,KAAK,uBAAuB;AAG3E,OAAK,iBAAiB,SAAS,KAAK,aAAa;;CAGnD,oBAA0B;AACxB,QAAM,qBAAqB;AAC3B,OAAK,8BAA8B;;CAGrC,uBAA6B;AAC3B,QAAM,wBAAwB;AAC9B,OAAK,gCAAgC"}

package/dist/media-provider-D_GL2_DN.js DELETED Viewed

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

package/dist/media-provider-D_GL2_DN.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"media-provider-D_GL2_DN.js","names":[],"sources":["../src/define/media-provider.ts"],"sourcesContent":["import { MediaProviderElement } from '@/media/media-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-provider', MediaProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}

package/dist/popover-ty9dFDNE.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"popover-ty9dFDNE.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#setupFloating","#transitionStatus","#updateVisibility","#floatingContext","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import type { ComputePositionReturn } from '@floating-ui/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Prettify<T> = {\n [K in keyof T]: T[K];\n};\n\ntype FloatingContext = Prettify<ComputePositionReturn> & {\n elements: {\n domReference: HTMLElement;\n floating: HTMLElement;\n };\n};\n\nexport class PopoverElement extends HTMLElement {\n #open = false;\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #cleanup: (() => void) | null = null;\n #abortController: AbortController | null = null;\n #floatingContext: FloatingContext | null = null;\n\n connectedCallback(): void {\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 }\n\n trigger.addEventListener('focusin', this, { signal });\n trigger.addEventListener('focusout', this, { signal });\n }\n\n this.addEventListener('pointerenter', this, { signal });\n this.addEventListener('focusout', this, { signal });\n }\n\n disconnectedCallback(): void {\n this.#clearHoverTimeout();\n this.#cleanup?.();\n\n this.#abortController?.abort();\n this.#abortController = null;\n }\n\n handleEvent(event: Event): void {\n switch (event.type) {\n case 'pointerenter':\n this.#handlePointerEnter(event as PointerEvent);\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 case 'focusin':\n this.#handleFocusIn(event as FocusEvent);\n break;\n case 'focusout':\n this.#handleFocusOut(event as FocusEvent);\n break;\n default:\n break;\n }\n }\n\n static get observedAttributes(): string[] {\n return ['open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\n }\n\n get openOnHover(): boolean {\n return this.hasAttribute('open-on-hover');\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 side(): Placement {\n return this.getAttribute('side') as Placement;\n }\n\n get sideOffset(): number {\n return Number.parseInt(this.getAttribute('side-offset') ?? '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\n #setupFloating(): void {\n const trigger = this.#triggerElement as HTMLElement;\n if (!trigger) return;\n\n const placement = this.side ?? 'top';\n const sideOffset = this.sideOffset;\n\n const updatePosition = () => {\n computePosition(trigger, this, {\n placement,\n middleware: [offset(sideOffset), flip(), shift()],\n strategy: 'fixed',\n }).then((data: ComputePositionReturn) => {\n this.#floatingContext = {\n ...data,\n elements: {\n domReference: trigger,\n floating: this,\n },\n };\n\n Object.assign(this.style, {\n left: `${data.x}px`,\n top: `${data.y}px`,\n });\n });\n };\n\n updatePosition();\n this.#cleanup = autoUpdate(trigger, this, updatePosition);\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n globalThis.clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(event: PointerEvent): void {\n if (!this.openOnHover) return;\n\n this.#clearHoverTimeout();\n\n if (event.currentTarget === this) {\n this.#addPointerMoveListener();\n }\n\n if (this.#open) {\n return;\n }\n\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#addPointerMoveListener();\n }\n\n #addPointerMoveListener(): void {\n if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n const { signal } = this.#abortController as AbortController;\n getDocument(this).documentElement.addEventListener('pointermove', this, { signal });\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (!this.openOnHover || !this.#floatingContext) return;\n\n const close = safePolygon({ blockPointerEvents: true })({\n ...this.#floatingContext,\n x: event.clientX,\n y: event.clientY,\n onClose: () => {\n getDocument(this).documentElement.removeEventListener('pointermove', this);\n\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n },\n });\n close(event);\n }\n\n #handleFocusIn(_event: FocusEvent): void {\n this.#setOpen(true);\n }\n\n #handleFocusOut(event: FocusEvent): void {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && contains(this, relatedTarget)) return;\n\n this.#setOpen(false);\n };\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@

- {"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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"}