diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts index 0fc88f0f..80906cc4 100644 --- a/examples/html-demo/src/main.ts +++ b/examples/html-demo/src/main.ts @@ -1,10 +1,6 @@ -import { defineVjsPlayer } from '@videojs/html'; - import '@videojs/html/skins/frosted'; import '@videojs/html/skins/minimal'; -defineVjsPlayer(); - document.body.innerHTML = /* html */ `
diff --git a/packages/html/package.json b/packages/html/package.json index 58826454..4edf6a0e 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -32,6 +32,10 @@ "./skins/minimal": { "types": "./dist/skins/minimal.d.ts", "default": "./dist/skins/minimal.js" + }, + "./define/*": { + "types": "./dist/define/*.d.ts", + "default": "./dist/define/*.js" } }, "main": "dist/index.js", diff --git a/packages/html/src/define/index.ts b/packages/html/src/define/index.ts new file mode 100644 index 00000000..095ab505 --- /dev/null +++ b/packages/html/src/define/index.ts @@ -0,0 +1,12 @@ +import './media-container'; +import './media-provider'; +import './media-play-button'; +import './media-mute-button'; +import './media-volume-slider'; +import './media-time-slider'; +import './media-fullscreen-button'; +import './media-duration-display'; +import './media-current-time-display'; +import './media-preview-time-display'; +import './media-popover'; +import './media-tooltip'; diff --git a/packages/html/src/define/media-container.ts b/packages/html/src/define/media-container.ts new file mode 100644 index 00000000..71965cf7 --- /dev/null +++ b/packages/html/src/define/media-container.ts @@ -0,0 +1,4 @@ +import { MediaContainerElement } from '@/media/media-container'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-container', MediaContainerElement); diff --git a/packages/html/src/define/media-current-time-display.ts b/packages/html/src/define/media-current-time-display.ts new file mode 100644 index 00000000..77661119 --- /dev/null +++ b/packages/html/src/define/media-current-time-display.ts @@ -0,0 +1,4 @@ +import { CurrentTimeDisplayElement } from '@/elements/current-time-display'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-current-time-display', CurrentTimeDisplayElement); diff --git a/packages/html/src/define/media-duration-display.ts b/packages/html/src/define/media-duration-display.ts new file mode 100644 index 00000000..1779d0ac --- /dev/null +++ b/packages/html/src/define/media-duration-display.ts @@ -0,0 +1,4 @@ +import { DurationDisplayElement } from '@/elements/duration-display'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-duration-display', DurationDisplayElement); diff --git a/packages/html/src/define/media-fullscreen-button.ts b/packages/html/src/define/media-fullscreen-button.ts new file mode 100644 index 00000000..3f344805 --- /dev/null +++ b/packages/html/src/define/media-fullscreen-button.ts @@ -0,0 +1,4 @@ +import { FullscreenButtonElement } from '@/elements/fullscreen-button'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-fullscreen-button', FullscreenButtonElement); diff --git a/packages/html/src/define/media-mute-button.ts b/packages/html/src/define/media-mute-button.ts new file mode 100644 index 00000000..f9025341 --- /dev/null +++ b/packages/html/src/define/media-mute-button.ts @@ -0,0 +1,4 @@ +import { MuteButtonElement } from '@/elements/mute-button'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-mute-button', MuteButtonElement); diff --git a/packages/html/src/define/media-play-button.ts b/packages/html/src/define/media-play-button.ts new file mode 100644 index 00000000..534922f5 --- /dev/null +++ b/packages/html/src/define/media-play-button.ts @@ -0,0 +1,4 @@ +import { PlayButtonElement } from '@/elements/play-button'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-play-button', PlayButtonElement); diff --git a/packages/html/src/define/media-popover.ts b/packages/html/src/define/media-popover.ts new file mode 100644 index 00000000..e5392ec9 --- /dev/null +++ b/packages/html/src/define/media-popover.ts @@ -0,0 +1,4 @@ +import { PopoverElement } from '@/elements/popover'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-popover', PopoverElement); diff --git a/packages/html/src/define/media-preview-time-display.ts b/packages/html/src/define/media-preview-time-display.ts new file mode 100644 index 00000000..912f7b30 --- /dev/null +++ b/packages/html/src/define/media-preview-time-display.ts @@ -0,0 +1,4 @@ +import { PreviewTimeDisplayElement } from '@/elements/preview-time-display'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-preview-time-display', PreviewTimeDisplayElement); diff --git a/packages/html/src/define/media-provider.ts b/packages/html/src/define/media-provider.ts new file mode 100644 index 00000000..aa653a23 --- /dev/null +++ b/packages/html/src/define/media-provider.ts @@ -0,0 +1,4 @@ +import { MediaProviderElement } from '@/media/media-provider'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-provider', MediaProviderElement); diff --git a/packages/html/src/define/media-time-slider.ts b/packages/html/src/define/media-time-slider.ts new file mode 100644 index 00000000..df0dd761 --- /dev/null +++ b/packages/html/src/define/media-time-slider.ts @@ -0,0 +1,8 @@ +import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-time-slider', TimeSliderRootElement); +defineCustomElement('media-time-slider-track', TimeSliderTrackElement); +defineCustomElement('media-time-slider-progress', TimeSliderProgressElement); +defineCustomElement('media-time-slider-pointer', TimeSliderPointerElement); +defineCustomElement('media-time-slider-thumb', TimeSliderThumbElement); diff --git a/packages/html/src/define/media-tooltip.ts b/packages/html/src/define/media-tooltip.ts new file mode 100644 index 00000000..d8232f42 --- /dev/null +++ b/packages/html/src/define/media-tooltip.ts @@ -0,0 +1,10 @@ +import { TooltipArrowElement, TooltipPopupElement, TooltipPortalElement, TooltipPositionerElement, TooltipRootElement, TooltipTriggerElement } from '@/elements/tooltip'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-tooltip', TooltipRootElement); +defineCustomElement('media-tooltip-trigger', TooltipTriggerElement); +defineCustomElement('media-tooltip-portal', TooltipPortalElement); +defineCustomElement('media-tooltip-positioner', TooltipPositionerElement); +defineCustomElement('media-tooltip-portal', TooltipPortalElement); +defineCustomElement('media-tooltip-popup', TooltipPopupElement); +defineCustomElement('media-tooltip-arrow', TooltipArrowElement); diff --git a/packages/html/src/define/media-volume-slider.ts b/packages/html/src/define/media-volume-slider.ts new file mode 100644 index 00000000..6a9bf90c --- /dev/null +++ b/packages/html/src/define/media-volume-slider.ts @@ -0,0 +1,7 @@ +import { VolumeSliderIndicatorElement, VolumeSliderRootElement, VolumeSliderThumbElement, VolumeSliderTrackElement } from '@/elements/volume-slider'; +import { defineCustomElement } from '@/utils/custom-element'; + +defineCustomElement('media-volume-slider', VolumeSliderRootElement); +defineCustomElement('media-volume-slider-track', VolumeSliderTrackElement); +defineCustomElement('media-volume-slider-indicator', VolumeSliderIndicatorElement); +defineCustomElement('media-volume-slider-thumb', VolumeSliderThumbElement); diff --git a/packages/html/src/components/media-chrome-button.ts b/packages/html/src/elements/button.ts similarity index 87% rename from packages/html/src/components/media-chrome-button.ts rename to packages/html/src/elements/button.ts index b1fdeba7..d2d1521b 100644 --- a/packages/html/src/components/media-chrome-button.ts +++ b/packages/html/src/elements/button.ts @@ -1,7 +1,7 @@ import { namedNodeMapToObject } from '@videojs/utils/dom'; export function getTemplateHTML( - this: typeof MediaChromeButton, + this: typeof ButtonElement, _attrs: Record, _props: Record = {}, ): string { @@ -20,7 +20,7 @@ export function getTemplateHTML( `; } -export class MediaChromeButton extends HTMLElement { +export class ButtonElement extends HTMLElement { static shadowRootOptions = { mode: 'open' as ShadowRootMode, }; @@ -32,10 +32,10 @@ export class MediaChromeButton extends HTMLElement { if (!this.shadowRoot) { // Set up the Shadow DOM if not using Declarative Shadow DOM. - this.attachShadow((this.constructor as typeof MediaChromeButton).shadowRootOptions); + this.attachShadow((this.constructor as typeof ButtonElement).shadowRootOptions); const attrs = namedNodeMapToObject(this.attributes); - const html = (this.constructor as typeof MediaChromeButton).getTemplateHTML(attrs); + const html = (this.constructor as typeof ButtonElement).getTemplateHTML(attrs); // From MDN: setHTMLUnsafe should be used instead of ShadowRoot.innerHTML // when a string of HTML may contain declarative shadow roots. const shadowRoot = this.shadowRoot as unknown as ShadowRoot; diff --git a/packages/html/src/components/media-current-time-display.ts b/packages/html/src/elements/current-time-display.ts similarity index 83% rename from packages/html/src/components/media-current-time-display.ts rename to packages/html/src/elements/current-time-display.ts index 2c69dd77..9552ac8b 100644 --- a/packages/html/src/components/media-current-time-display.ts +++ b/packages/html/src/elements/current-time-display.ts @@ -6,7 +6,7 @@ import { currentTimeDisplayStateDefinition } from '@videojs/core/store'; import { formatDisplayTime } from '@videojs/utils'; import { toConnectedHTMLComponent } from '../utils/component-factory'; -export class CurrentTimeDisplayBase extends HTMLElement { +export class CurrentTimeDisplay extends HTMLElement { static shadowRootOptions = { mode: 'open' as ShadowRootMode, }; @@ -24,7 +24,7 @@ export class CurrentTimeDisplayBase extends HTMLElement { super(); if (!this.shadowRoot) { - this.attachShadow((this.constructor as typeof CurrentTimeDisplayBase).shadowRootOptions); + this.attachShadow((this.constructor as typeof CurrentTimeDisplay).shadowRootOptions); } } @@ -81,16 +81,9 @@ export const getCurrentTimeDisplayProps: PropsHook<{ return baseProps; }; -export const CurrentTimeDisplay: ConnectedComponentConstructor = toConnectedHTMLComponent( - CurrentTimeDisplayBase, +export const CurrentTimeDisplayElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + CurrentTimeDisplay, useCurrentTimeDisplayState, getCurrentTimeDisplayProps, 'CurrentTimeDisplay', ); - -// Register the custom element -if (!globalThis.customElements.get('media-current-time-display')) { - globalThis.customElements.define('media-current-time-display', CurrentTimeDisplay); -} - -export default CurrentTimeDisplay; diff --git a/packages/html/src/components/media-duration-display.ts b/packages/html/src/elements/duration-display.ts similarity index 79% rename from packages/html/src/components/media-duration-display.ts rename to packages/html/src/elements/duration-display.ts index e1394117..06cc0a0d 100644 --- a/packages/html/src/components/media-duration-display.ts +++ b/packages/html/src/elements/duration-display.ts @@ -8,7 +8,7 @@ import { namedNodeMapToObject } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; export function getTemplateHTML( - this: typeof DurationDisplayBase, + this: typeof DurationDisplay, _attrs: Record, _props: Record = {}, ) { @@ -17,7 +17,7 @@ export function getTemplateHTML( `; } -export class DurationDisplayBase extends HTMLElement { +export class DurationDisplay extends HTMLElement { static shadowRootOptions = { mode: 'open' as ShadowRootMode, }; @@ -34,10 +34,10 @@ export class DurationDisplayBase extends HTMLElement { super(); if (!this.shadowRoot) { - this.attachShadow((this.constructor as typeof DurationDisplayBase).shadowRootOptions); + this.attachShadow((this.constructor as typeof DurationDisplay).shadowRootOptions); const attrs = namedNodeMapToObject(this.attributes); - const html = (this.constructor as typeof DurationDisplayBase).getTemplateHTML(attrs); + const html = (this.constructor as typeof DurationDisplay).getTemplateHTML(attrs); const shadowRoot = this.shadowRoot as unknown as ShadowRoot; shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html); } @@ -75,16 +75,9 @@ export const getDurationDisplayProps: PropsHook<{ return baseProps; }; -export const DurationDisplay: ConnectedComponentConstructor = toConnectedHTMLComponent( - DurationDisplayBase, +export const DurationDisplayElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + DurationDisplay, useDurationDisplayState, getDurationDisplayProps, 'DurationDisplay', ); - -// Register the custom element -if (!globalThis.customElements.get('media-duration-display')) { - globalThis.customElements.define('media-duration-display', DurationDisplay); -} - -export default DurationDisplay; diff --git a/packages/html/src/components/media-fullscreen-button.ts b/packages/html/src/elements/fullscreen-button.ts similarity index 80% rename from packages/html/src/components/media-fullscreen-button.ts rename to packages/html/src/elements/fullscreen-button.ts index ed40f538..adf644be 100644 --- a/packages/html/src/components/media-fullscreen-button.ts +++ b/packages/html/src/elements/fullscreen-button.ts @@ -5,9 +5,9 @@ import { fullscreenButtonStateDefinition } from '@videojs/core/store'; import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; -import { MediaChromeButton } from './media-chrome-button'; +import { ButtonElement } from './button'; -export class FullscreenButtonBase extends MediaChromeButton { +export class FullscreenButton extends ButtonElement { _state: | { fullscreen: boolean; @@ -72,16 +72,9 @@ export const getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (sta return baseProps; }; -export const FullscreenButton: ConnectedComponentConstructor = toConnectedHTMLComponent( - FullscreenButtonBase, +export const FullscreenButtonElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + FullscreenButton, getFullscreenButtonState, getFullscreenButtonProps, 'FullscreenButton', ); - -// NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP) -if (!globalThis.customElements.get('media-fullscreen-button')) { - globalThis.customElements.define('media-fullscreen-button', FullscreenButton); -} - -export default FullscreenButton; diff --git a/packages/html/src/components/media-mute-button.ts b/packages/html/src/elements/mute-button.ts similarity index 80% rename from packages/html/src/components/media-mute-button.ts rename to packages/html/src/elements/mute-button.ts index 081c1417..16604a38 100644 --- a/packages/html/src/components/media-mute-button.ts +++ b/packages/html/src/elements/mute-button.ts @@ -5,9 +5,9 @@ import { muteButtonStateDefinition } from '@videojs/core/store'; import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; -import { MediaChromeButton } from './media-chrome-button'; +import { ButtonElement } from './button'; -export class MuteButtonBase extends MediaChromeButton { +export class MuteButton extends ButtonElement { _state: | { muted: boolean; @@ -83,16 +83,9 @@ export const getMuteButtonProps: PropsHook<{ return baseProps; }; -export const MuteButton: ConnectedComponentConstructor = toConnectedHTMLComponent( - MuteButtonBase, +export const MuteButtonElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + MuteButton, getMuteButtonState, getMuteButtonProps, 'MuteButton', ); - -// NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP) -if (!globalThis.customElements.get('media-mute-button')) { - globalThis.customElements.define('media-mute-button', MuteButton); -} - -export default MuteButton; diff --git a/packages/html/src/components/media-play-button.ts b/packages/html/src/elements/play-button.ts similarity index 78% rename from packages/html/src/components/media-play-button.ts rename to packages/html/src/elements/play-button.ts index 11b13dea..7badd760 100644 --- a/packages/html/src/components/media-play-button.ts +++ b/packages/html/src/elements/play-button.ts @@ -5,9 +5,9 @@ import { playButtonStateDefinition } from '@videojs/core/store'; import { setAttributes } from '@videojs/utils/dom'; import { toConnectedHTMLComponent } from '../utils/component-factory'; -import { MediaChromeButton } from './media-chrome-button'; +import { ButtonElement } from './button'; -export class PlayButtonBase extends MediaChromeButton { +export class PlayButton extends ButtonElement { _state: { paused: boolean; requestPlay: () => void; requestPause: () => void } | undefined; handleEvent(event: Event): void { @@ -62,16 +62,9 @@ export const getPlayButtonProps: PropsHook<{ paused: boolean }> = (state, _eleme return baseProps; }; -export const PlayButton: ConnectedComponentConstructor = toConnectedHTMLComponent( - PlayButtonBase, +export const PlayButtonElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + PlayButton, getPlayButtonState, getPlayButtonProps, 'PlayButton', ); - -// NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP) -if (!globalThis.customElements.get('media-play-button')) { - globalThis.customElements.define('media-play-button', PlayButton); -} - -export default PlayButton; diff --git a/packages/html/src/components/media-popover.ts b/packages/html/src/elements/popover.ts similarity index 97% rename from packages/html/src/components/media-popover.ts rename to packages/html/src/elements/popover.ts index 43a5884f..2d483c96 100644 --- a/packages/html/src/components/media-popover.ts +++ b/packages/html/src/elements/popover.ts @@ -14,7 +14,7 @@ type FloatingContext = Prettify & { }; }; -class Popover extends HTMLElement { +export class PopoverElement extends HTMLElement { #open = false; #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial'; #hoverTimeout: ReturnType | null = null; @@ -236,11 +236,3 @@ class Popover extends HTMLElement { this.#setOpen(false); }; } - -if (!globalThis.customElements.get('media-popover')) { - globalThis.customElements.define('media-popover', Popover); -} - -export { Popover }; - -export default Popover; diff --git a/packages/html/src/components/media-preview-time-display.ts b/packages/html/src/elements/preview-time-display.ts similarity index 82% rename from packages/html/src/components/media-preview-time-display.ts rename to packages/html/src/elements/preview-time-display.ts index d4be5737..04fb658c 100644 --- a/packages/html/src/components/media-preview-time-display.ts +++ b/packages/html/src/elements/preview-time-display.ts @@ -6,7 +6,7 @@ import { previewTimeDisplayStateDefinition } from '@videojs/core/store'; import { formatDisplayTime } from '@videojs/utils'; import { toConnectedHTMLComponent } from '../utils/component-factory'; -export class PreviewTimeDisplayBase extends HTMLElement { +export class PreviewTimeDisplay extends HTMLElement { static shadowRootOptions = { mode: 'open' as ShadowRootMode, }; @@ -23,7 +23,7 @@ export class PreviewTimeDisplayBase extends HTMLElement { super(); if (!this.shadowRoot) { - this.attachShadow((this.constructor as typeof PreviewTimeDisplayBase).shadowRootOptions); + this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions); } } @@ -71,16 +71,9 @@ export const getPreviewTimeDisplayProps: PropsHook<{ return baseProps; }; -export const PreviewTimeDisplay: ConnectedComponentConstructor = toConnectedHTMLComponent( - PreviewTimeDisplayBase, +export const PreviewTimeDisplayElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + PreviewTimeDisplay, usePreviewTimeDisplayState, getPreviewTimeDisplayProps, 'PreviewTimeDisplay', ); - -// Register the custom element -if (!globalThis.customElements.get('preview-time-display')) { - globalThis.customElements.define('preview-time-display', PreviewTimeDisplay); -} - -export default PreviewTimeDisplay; diff --git a/packages/html/src/components/media-time-slider.ts b/packages/html/src/elements/time-slider.ts similarity index 74% rename from packages/html/src/components/media-time-slider.ts rename to packages/html/src/elements/time-slider.ts index 3cafef21..3fe0f3f8 100644 --- a/packages/html/src/components/media-time-slider.ts +++ b/packages/html/src/elements/time-slider.ts @@ -49,7 +49,7 @@ export const getTimeSliderRootProps: PropsHook<{ return baseProps; }; -export class TimeSliderRootBase extends HTMLElement { +export class TimeSliderRoot extends HTMLElement { static readonly observedAttributes: readonly string[] = ['orientation']; _state: TimeSliderRootState | undefined; @@ -97,14 +97,14 @@ export class TimeSliderRootBase extends HTMLElement { } } -export class TimeSliderTrackBase extends HTMLElement { +export class TimeSliderTrack extends HTMLElement { constructor() { super(); } connectedCallback(): void { // Set this element as the track element in the core TimeSlider - const rootElement = this.closest('media-time-slider-root') as any; + const rootElement = this.closest('media-time-slider') as any; if (rootElement?._state?.core) { rootElement._state.core.setState({ _trackElement: this }); } @@ -123,7 +123,7 @@ export class TimeSliderTrackBase extends HTMLElement { } } -export class TimeSliderProgressBase extends HTMLElement { +export class TimeSliderProgress extends HTMLElement { constructor() { super(); this.style.position = 'absolute'; @@ -148,7 +148,7 @@ export class TimeSliderProgressBase extends HTMLElement { } } -export class TimeSliderPointerBase extends HTMLElement { +export class TimeSliderPointer extends HTMLElement { constructor() { super(); this.style.position = 'absolute'; @@ -173,7 +173,7 @@ export class TimeSliderPointerBase extends HTMLElement { } } -export class TimeSliderThumbBase extends HTMLElement { +export class TimeSliderThumb extends HTMLElement { constructor() { super(); this.style.position = 'absolute'; @@ -210,103 +210,81 @@ export const useTimeSliderRootState: StateHook<{ }; export const getTimeSliderTrackProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-time-slider-root') as any; + const rootElement = element.closest('media-time-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; }; export const getTimeSliderProgressProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-time-slider-root') as any; + const rootElement = element.closest('media-time-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; }; export const getTimeSliderPointerProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-time-slider-root') as any; + const rootElement = element.closest('media-time-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; }; export const getTimeSliderThumbProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-time-slider-root') as any; + const rootElement = element.closest('media-time-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; }; -export const TimeSliderRoot: ConnectedComponentConstructor<{ +export const TimeSliderRootElement: ConnectedComponentConstructor<{ currentTime: number; duration: number; requestSeek: (time: number) => void; core: CoreTimeSlider | null; -}> = toConnectedHTMLComponent(TimeSliderRootBase, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot'); +}> = toConnectedHTMLComponent(TimeSliderRoot, useTimeSliderRootState, getTimeSliderRootProps, 'TimeSliderRoot'); -export const TimeSliderTrack: ConnectedComponentConstructor = toConnectedHTMLComponent( - TimeSliderTrackBase, +export const TimeSliderTrackElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + TimeSliderTrack, { keys: [], transform: () => ({}) }, getTimeSliderTrackProps, 'TimeSliderTrack', ); -export const TimeSliderProgress: ConnectedComponentConstructor = toConnectedHTMLComponent( - TimeSliderProgressBase, +export const TimeSliderProgressElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + TimeSliderProgress, { keys: [], transform: () => ({}) }, getTimeSliderProgressProps, 'TimeSliderProgress', ); -export const TimeSliderPointer: ConnectedComponentConstructor = toConnectedHTMLComponent( - TimeSliderPointerBase, +export const TimeSliderPointerElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + TimeSliderPointer, { keys: [], transform: () => ({}) }, getTimeSliderPointerProps, 'TimeSliderPointer', ); -export const TimeSliderThumb: ConnectedComponentConstructor = toConnectedHTMLComponent( - TimeSliderThumbBase, +export const TimeSliderThumbElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + TimeSliderThumb, { keys: [], transform: () => ({}) }, getTimeSliderThumbProps, 'TimeSliderThumb', ); -export const TimeSlider = Object.assign( +export const TimeSliderElement = Object.assign( {}, { - Root: TimeSliderRoot, - Track: TimeSliderTrack, - Progress: TimeSliderProgress, - Pointer: TimeSliderPointer, - Thumb: TimeSliderThumb, + Root: TimeSliderRootElement, + Track: TimeSliderTrackElement, + Progress: TimeSliderProgressElement, + Pointer: TimeSliderPointerElement, + Thumb: TimeSliderThumbElement, }, ) as { - Root: typeof TimeSliderRoot; - Track: typeof TimeSliderTrack; - Progress: typeof TimeSliderProgress; - Pointer: typeof TimeSliderPointer; - Thumb: typeof TimeSliderThumb; + Root: typeof TimeSliderRootElement; + Track: typeof TimeSliderTrackElement; + Progress: typeof TimeSliderProgressElement; + Pointer: typeof TimeSliderPointerElement; + Thumb: typeof TimeSliderThumbElement; }; - -if (!globalThis.customElements.get('media-time-slider-root')) { - globalThis.customElements.define('media-time-slider-root', TimeSliderRoot); -} - -if (!globalThis.customElements.get('media-time-slider-track')) { - globalThis.customElements.define('media-time-slider-track', TimeSliderTrack); -} - -if (!globalThis.customElements.get('media-time-slider-progress')) { - globalThis.customElements.define('media-time-slider-progress', TimeSliderProgress); -} - -if (!globalThis.customElements.get('media-time-slider-pointer')) { - globalThis.customElements.define('media-time-slider-pointer', TimeSliderPointer); -} - -if (!globalThis.customElements.get('media-time-slider-thumb')) { - globalThis.customElements.define('media-time-slider-thumb', TimeSliderThumb); -} - -export default TimeSlider; diff --git a/packages/html/src/components/media-tooltip.ts b/packages/html/src/elements/tooltip.ts similarity index 82% rename from packages/html/src/components/media-tooltip.ts rename to packages/html/src/elements/tooltip.ts index 1501e7b9..8fc7c1aa 100644 --- a/packages/html/src/components/media-tooltip.ts +++ b/packages/html/src/elements/tooltip.ts @@ -1,10 +1,10 @@ import type { Placement } from '@floating-ui/dom'; -import type { MediaContainer } from '@/media/media-container'; +import type { MediaContainerElement } from '@/media/media-container'; import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; import { uniqueId } from '@videojs/utils'; -export class MediaTooltipRoot extends HTMLElement { +export class TooltipRootElement extends HTMLElement { #open = false; #hoverTimeout: ReturnType | null = null; #cleanup: (() => void) | null = null; @@ -61,20 +61,20 @@ export class MediaTooltipRoot extends HTMLElement { return value === 'x' || value === 'y' || value === 'both' ? value : undefined; } - get #triggerElement(): MediaTooltipTrigger | null { - return this.querySelector('media-tooltip-trigger') as MediaTooltipTrigger | null; + get #triggerElement(): TooltipTriggerElement | null { + return this.querySelector('media-tooltip-trigger') as TooltipTriggerElement | null; } - get #portalElement(): MediaTooltipPortal | null { - return this.querySelector('media-tooltip-portal') as MediaTooltipPortal | null; + get #portalElement(): TooltipPortalElement | null { + return this.querySelector('media-tooltip-portal') as TooltipPortalElement | null; } - get #positionerElement(): MediaTooltipPositioner | null { - return this.#portalElement?.querySelector('media-tooltip-positioner') as MediaTooltipPositioner | null; + get #positionerElement(): TooltipPositionerElement | null { + return this.#portalElement?.querySelector('media-tooltip-positioner') as TooltipPositionerElement | null; } - get #popupElement(): MediaTooltipPopup | null { - return this.#portalElement?.querySelector('media-tooltip-popup') as MediaTooltipPopup | null; + get #popupElement(): TooltipPopupElement | null { + return this.#portalElement?.querySelector('media-tooltip-popup') as TooltipPopupElement | null; } #setOpen(open: boolean): void { @@ -132,7 +132,7 @@ export class MediaTooltipRoot extends HTMLElement { const placement = this.#positionerElement?.side ?? 'top'; const sideOffset = this.#positionerElement?.sideOffset ?? 0; const collisionPadding = this.#positionerElement?.collisionPadding ?? 0; - const mediaContainer = this.closest('media-container') as MediaContainer; + const mediaContainer = this.closest('media-container') as MediaContainerElement; this.#arrowElement = popup.querySelector('media-tooltip-arrow') as HTMLElement; @@ -260,7 +260,7 @@ export class MediaTooltipRoot extends HTMLElement { } } -export class MediaTooltipTrigger extends HTMLElement { +export class TooltipTriggerElement extends HTMLElement { connectedCallback(): void { this.style.display = 'contents'; @@ -269,16 +269,16 @@ export class MediaTooltipTrigger extends HTMLElement { const mutationObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes') { - const rootElement = this.closest('media-tooltip-root') as MediaTooltipRoot; - let popupElement = rootElement.querySelector('media-tooltip-popup') as MediaTooltipPopup; + const rootElement = this.closest('media-tooltip') as TooltipRootElement; + let popupElement = rootElement.querySelector('media-tooltip-popup') as TooltipPopupElement; if (!popupElement) { - const portalElement = rootElement.querySelector('media-tooltip-portal') as MediaTooltipPortal; + const portalElement = rootElement.querySelector('media-tooltip-portal') as TooltipPortalElement; if (!portalElement) { return; } - popupElement = portalElement.querySelector('media-tooltip-popup') as MediaTooltipPopup; + popupElement = portalElement.querySelector('media-tooltip-popup') as TooltipPopupElement; if (!popupElement) { return; } @@ -306,7 +306,7 @@ export class MediaTooltipTrigger extends HTMLElement { } } -export class MediaTooltipPortal extends HTMLElement { +export class TooltipPortalElement extends HTMLElement { #portal: HTMLElement | null = null; connectedCallback(): void { @@ -356,7 +356,7 @@ export class MediaTooltipPortal extends HTMLElement { } } -export class MediaTooltipPositioner extends HTMLElement { +export class TooltipPositionerElement extends HTMLElement { connectedCallback(): void { this.style.display = 'contents'; @@ -383,56 +383,30 @@ export class MediaTooltipPositioner extends HTMLElement { } } -export class MediaTooltipPopup extends HTMLElement { +export class TooltipPopupElement extends HTMLElement { connectedCallback(): void { this.setAttribute('role', 'tooltip'); } } -export class MediaTooltipArrow extends HTMLElement { +export class TooltipArrowElement extends HTMLElement { connectedCallback(): void { this.setAttribute('aria-hidden', 'true'); } } -if (!globalThis.customElements.get('media-tooltip-root')) { - globalThis.customElements.define('media-tooltip-root', MediaTooltipRoot); -} - -if (!globalThis.customElements.get('media-tooltip-trigger')) { - globalThis.customElements.define('media-tooltip-trigger', MediaTooltipTrigger); -} - -if (!globalThis.customElements.get('media-tooltip-portal')) { - globalThis.customElements.define('media-tooltip-portal', MediaTooltipPortal); -} - -if (!globalThis.customElements.get('media-tooltip-positioner')) { - globalThis.customElements.define('media-tooltip-positioner', MediaTooltipPositioner); -} - -if (!globalThis.customElements.get('media-tooltip-popup')) { - globalThis.customElements.define('media-tooltip-popup', MediaTooltipPopup); -} - -if (!globalThis.customElements.get('media-tooltip-arrow')) { - globalThis.customElements.define('media-tooltip-arrow', MediaTooltipArrow); -} - -export const Tooltip: { - Root: typeof MediaTooltipRoot; - Trigger: typeof MediaTooltipTrigger; - Portal: typeof MediaTooltipPortal; - Positioner: typeof MediaTooltipPositioner; - Popup: typeof MediaTooltipPopup; - Arrow: typeof MediaTooltipArrow; +export const TooltipElement: { + Root: typeof TooltipRootElement; + Trigger: typeof TooltipTriggerElement; + Portal: typeof TooltipPortalElement; + Positioner: typeof TooltipPositionerElement; + Popup: typeof TooltipPopupElement; + Arrow: typeof TooltipArrowElement; } = { - Root: MediaTooltipRoot, - Trigger: MediaTooltipTrigger, - Portal: MediaTooltipPortal, - Positioner: MediaTooltipPositioner, - Popup: MediaTooltipPopup, - Arrow: MediaTooltipArrow, + Root: TooltipRootElement, + Trigger: TooltipTriggerElement, + Portal: TooltipPortalElement, + Positioner: TooltipPositionerElement, + Popup: TooltipPopupElement, + Arrow: TooltipArrowElement, }; - -export default Tooltip; diff --git a/packages/html/src/components/media-volume-slider.ts b/packages/html/src/elements/volume-slider.ts similarity index 77% rename from packages/html/src/components/media-volume-slider.ts rename to packages/html/src/elements/volume-slider.ts index 00d56f9a..9b71b997 100644 --- a/packages/html/src/components/media-volume-slider.ts +++ b/packages/html/src/elements/volume-slider.ts @@ -46,7 +46,7 @@ interface VolumeSliderRootState { core: CoreVolumeSlider | null; } -export class VolumeSliderRootBase extends HTMLElement { +export class VolumeSliderRoot extends HTMLElement { static readonly observedAttributes: readonly string[] = ['orientation']; _state: VolumeSliderRootState | undefined; @@ -103,14 +103,14 @@ export class VolumeSliderRootBase extends HTMLElement { /** * VolumeSlider Track component - Track element that captures pointer events */ -export class VolumeSliderTrackBase extends HTMLElement { +export class VolumeSliderTrack extends HTMLElement { constructor() { super(); } connectedCallback(): void { // Set this element as the track element in the core VolumeSlider - const rootElement = this.closest('media-volume-slider-root') as any; + const rootElement = this.closest('media-volume-slider') as any; if (rootElement?._state?.core) { rootElement._state.core.setState({ _trackElement: this }); } @@ -132,7 +132,7 @@ export class VolumeSliderTrackBase extends HTMLElement { /** * VolumeSlider Progress component - Shows current progress */ -export class VolumeSliderProgressBase extends HTMLElement { +export class VolumeSliderIndicatorElement extends HTMLElement { constructor() { super(); this.style.position = 'absolute'; @@ -160,7 +160,7 @@ export class VolumeSliderProgressBase extends HTMLElement { /** * VolumeSlider Thumb component - Draggable thumb element */ -export class VolumeSliderThumbBase extends HTMLElement { +export class VolumeSliderThumb extends HTMLElement { constructor() { super(); this.style.position = 'absolute'; @@ -205,7 +205,7 @@ export const useVolumeSliderRootState: StateHook<{ * VolumeSlider Track props hook */ export const getVolumeSliderTrackProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-volume-slider-root') as any; + const rootElement = element.closest('media-volume-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; @@ -215,7 +215,7 @@ export const getVolumeSliderTrackProps: PropsHook> = (_sta * VolumeSlider Progress props hook */ export const getVolumeSliderProgressProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-volume-slider-root') as any; + const rootElement = element.closest('media-volume-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; @@ -225,7 +225,7 @@ export const getVolumeSliderProgressProps: PropsHook> = (_ * VolumeSlider Thumb props hook */ export const getVolumeSliderThumbProps: PropsHook> = (_state, element) => { - const rootElement = element.closest('media-volume-slider-root') as any; + const rootElement = element.closest('media-volume-slider') as any; return { 'data-orientation': rootElement?.orientation || 'horizontal', }; @@ -234,19 +234,19 @@ export const getVolumeSliderThumbProps: PropsHook> = (_sta /** * Connected VolumeSlider Root component using hook-style architecture */ -export const VolumeSliderRoot: ConnectedComponentConstructor<{ +export const VolumeSliderRootElement: ConnectedComponentConstructor<{ volume: number; muted: boolean; volumeLevel: string; requestVolumeChange: (volume: number) => void; core: CoreVolumeSlider | null; -}> = toConnectedHTMLComponent(VolumeSliderRootBase, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot'); +}> = toConnectedHTMLComponent(VolumeSliderRoot, useVolumeSliderRootState, getVolumeSliderRootProps, 'VolumeSliderRoot'); /** * Connected VolumeSlider Track component */ -export const VolumeSliderTrack: ConnectedComponentConstructor = toConnectedHTMLComponent( - VolumeSliderTrackBase, +export const VolumeSliderTrackElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + VolumeSliderTrack, { keys: [], transform: () => ({}) }, getVolumeSliderTrackProps, 'VolumeSliderTrack', @@ -255,8 +255,8 @@ export const VolumeSliderTrack: ConnectedComponentConstructor = toConnected /** * Connected VolumeSlider Progress component */ -export const VolumeSliderProgress: ConnectedComponentConstructor = toConnectedHTMLComponent( - VolumeSliderProgressBase, +export const VolumeSliderProgressElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + VolumeSliderIndicatorElement, { keys: [], transform: () => ({}) }, getVolumeSliderProgressProps, 'VolumeSliderProgress', @@ -265,8 +265,8 @@ export const VolumeSliderProgress: ConnectedComponentConstructor = toConnec /** * Connected VolumeSlider Thumb component */ -export const VolumeSliderThumb: ConnectedComponentConstructor = toConnectedHTMLComponent( - VolumeSliderThumbBase, +export const VolumeSliderThumbElement: ConnectedComponentConstructor = toConnectedHTMLComponent( + VolumeSliderThumb, { keys: [], transform: () => ({}) }, getVolumeSliderThumbProps, 'VolumeSliderThumb', @@ -275,35 +275,17 @@ export const VolumeSliderThumb: ConnectedComponentConstructor = toConnected /** * Compound VolumeSlider component object */ -export const VolumeSlider = Object.assign( +export const VolumeSliderElement = Object.assign( {}, { - Root: VolumeSliderRoot, - Track: VolumeSliderTrack, - Progress: VolumeSliderProgress, - Thumb: VolumeSliderThumb, + Root: VolumeSliderRootElement, + Track: VolumeSliderTrackElement, + Progress: VolumeSliderProgressElement, + Thumb: VolumeSliderThumbElement, }, ) as { - Root: typeof VolumeSliderRoot; - Track: typeof VolumeSliderTrack; - Progress: typeof VolumeSliderProgress; - Thumb: typeof VolumeSliderThumb; + Root: typeof VolumeSliderRootElement; + Track: typeof VolumeSliderTrackElement; + Progress: typeof VolumeSliderProgressElement; + Thumb: typeof VolumeSliderThumbElement; }; - -if (!globalThis.customElements.get('media-volume-slider-root')) { - globalThis.customElements.define('media-volume-slider-root', VolumeSliderRoot); -} - -if (!globalThis.customElements.get('media-volume-slider-track')) { - globalThis.customElements.define('media-volume-slider-track', VolumeSliderTrack); -} - -if (!globalThis.customElements.get('media-volume-slider-progress')) { - globalThis.customElements.define('media-volume-slider-progress', VolumeSliderProgress); -} - -if (!globalThis.customElements.get('media-volume-slider-thumb')) { - globalThis.customElements.define('media-volume-slider-thumb', VolumeSliderThumb); -} - -export default VolumeSlider; diff --git a/packages/html/src/icons/index.ts b/packages/html/src/icons/index.ts index d57489a8..389c891c 100644 --- a/packages/html/src/icons/index.ts +++ b/packages/html/src/icons/index.ts @@ -1,9 +1,9 @@ -export * as MediaFullscreenEnterAltIcon from './media-fullscreen-enter-alt-icon'; -export * as MediaFullscreenEnterIcon from './media-fullscreen-enter-icon'; -export * as MediaFullscreenExitAltIcon from './media-fullscreen-exit-alt-icon'; -export * as MediaFullscreenExitIcon from './media-fullscreen-exit-icon'; -export * as MediaPauseIcon from './media-pause-icon'; -export * as MediaPlayIcon from './media-play-icon'; -export * as MediaVolumeHighIcon from './media-volume-high-icon'; -export * as MediaVolumeLowIcon from './media-volume-low-icon'; -export * as MediaVolumeOffIcon from './media-volume-off-icon'; +import './media-fullscreen-enter-alt-icon'; +import './media-fullscreen-enter-icon'; +import './media-fullscreen-exit-alt-icon'; +import './media-fullscreen-exit-icon'; +import './media-pause-icon'; +import './media-play-icon'; +import './media-volume-high-icon'; +import './media-volume-low-icon'; +import './media-volume-off-icon'; diff --git a/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts b/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts index 13e76ec5..621edafe 100644 --- a/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts +++ b/packages/html/src/icons/media-fullscreen-enter-alt-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaFullscreenEnterAltIcon extends MediaChromeIcon { +export class MediaFullscreenEnterAltIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIcon); +defineCustomElement('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIconElement); diff --git a/packages/html/src/icons/media-fullscreen-enter-icon.ts b/packages/html/src/icons/media-fullscreen-enter-icon.ts index 2df15f5b..4f49aba5 100644 --- a/packages/html/src/icons/media-fullscreen-enter-icon.ts +++ b/packages/html/src/icons/media-fullscreen-enter-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaFullscreenEnterIcon extends MediaChromeIcon { +export class MediaFullscreenEnterIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-fullscreen-enter-icon', MediaFullscreenEnterIcon); +defineCustomElement('media-fullscreen-enter-icon', MediaFullscreenEnterIconElement); diff --git a/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts b/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts index 24564926..0e131263 100644 --- a/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts +++ b/packages/html/src/icons/media-fullscreen-exit-alt-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaFullscreenExitAltIcon extends MediaChromeIcon { +export class MediaFullscreenExitAltIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIcon); +defineCustomElement('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIconElement); diff --git a/packages/html/src/icons/media-fullscreen-exit-icon.ts b/packages/html/src/icons/media-fullscreen-exit-icon.ts index da0cd6b1..634af981 100644 --- a/packages/html/src/icons/media-fullscreen-exit-icon.ts +++ b/packages/html/src/icons/media-fullscreen-exit-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaFullscreenExitIcon extends MediaChromeIcon { +export class MediaFullscreenExitIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-fullscreen-exit-icon', MediaFullscreenExitIcon); +defineCustomElement('media-fullscreen-exit-icon', MediaFullscreenExitIconElement); diff --git a/packages/html/src/icons/media-pause-icon.ts b/packages/html/src/icons/media-pause-icon.ts index 8013a2f8..0608945a 100644 --- a/packages/html/src/icons/media-pause-icon.ts +++ b/packages/html/src/icons/media-pause-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -9,8 +10,8 @@ export function getTemplateHTML() { `; } -export class MediaPauseIcon extends MediaChromeIcon { +export class MediaPauseIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-pause-icon', MediaPauseIcon); +defineCustomElement('media-pause-icon', MediaPauseIconElement); diff --git a/packages/html/src/icons/media-play-icon.ts b/packages/html/src/icons/media-play-icon.ts index d83f4fc9..fba93139 100644 --- a/packages/html/src/icons/media-play-icon.ts +++ b/packages/html/src/icons/media-play-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaPlayIcon extends MediaChromeIcon { +export class MediaPlayIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-play-icon', MediaPlayIcon); +defineCustomElement('media-play-icon', MediaPlayIconElement); diff --git a/packages/html/src/icons/media-volume-high-icon.ts b/packages/html/src/icons/media-volume-high-icon.ts index 5c20f350..7a521d84 100644 --- a/packages/html/src/icons/media-volume-high-icon.ts +++ b/packages/html/src/icons/media-volume-high-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaVolumeHighIcon extends MediaChromeIcon { +export class MediaVolumeHighIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-volume-high-icon', MediaVolumeHighIcon); +defineCustomElement('media-volume-high-icon', MediaVolumeHighIconElement); diff --git a/packages/html/src/icons/media-volume-low-icon.ts b/packages/html/src/icons/media-volume-low-icon.ts index 2e60afd3..7b42530a 100644 --- a/packages/html/src/icons/media-volume-low-icon.ts +++ b/packages/html/src/icons/media-volume-low-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaVolumeLowIcon extends MediaChromeIcon { +export class MediaVolumeLowIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-volume-low-icon', MediaVolumeLowIcon); +defineCustomElement('media-volume-low-icon', MediaVolumeLowIconElement); diff --git a/packages/html/src/icons/media-volume-off-icon.ts b/packages/html/src/icons/media-volume-off-icon.ts index 0004c32e..20336575 100644 --- a/packages/html/src/icons/media-volume-off-icon.ts +++ b/packages/html/src/icons/media-volume-off-icon.ts @@ -1,5 +1,6 @@ import { SVG_ICONS } from '@videojs/icons'; +import { defineCustomElement } from '@/utils/custom-element'; import { MediaChromeIcon } from './media-chrome-icon'; export function getTemplateHTML() { @@ -14,8 +15,8 @@ export function getTemplateHTML() { `; } -export class MediaVolumeOffIcon extends MediaChromeIcon { +export class MediaVolumeOffIconElement extends MediaChromeIcon { static getTemplateHTML: () => string = getTemplateHTML; } -customElements.define('media-volume-off-icon', MediaVolumeOffIcon); +defineCustomElement('media-volume-off-icon', MediaVolumeOffIconElement); diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts index 3d827bbb..65f80b1f 100644 --- a/packages/html/src/index.ts +++ b/packages/html/src/index.ts @@ -1,19 +1,13 @@ -export { CurrentTimeDisplay } from './components/media-current-time-display'; -export { DurationDisplay } from './components/media-duration-display'; -export { FullscreenButton } from './components/media-fullscreen-button'; -export { MuteButton } from './components/media-mute-button'; -export { PlayButton } from './components/media-play-button'; -export { Popover } from './components/media-popover'; -export { TimeSlider } from './components/media-time-slider'; -export { Tooltip } from './components/media-tooltip'; -export { VolumeSlider } from './components/media-volume-slider'; -export { MediaContainer } from './media/media-container'; -export { MediaProvider } from './media/media-provider'; -export { MediaSkin } from './media/media-skin'; - -export function defineVjsPlayer(): void { - /** @TODO - Reimplement me (at least as a POC) (CJP) */ - // defineVideoProvider(); - // defineVideoDefaultSkin(); - //