@videojs/html 10.0.1 → 10.2.0

package/dist/dev/ui/time-slider/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs, type TimeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { hasTimeRange } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\n  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { SliderCSSVars, TimeSliderCore, TimeSliderDataAttrs, type TimeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createTimeSliderSeek,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { hasTimeRange, isMediaPlaying } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\n  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #seek = createTimeSliderSeek(SliderCSSVars.fill);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #cssVars: Record<string, string> = {};\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    let dragSeekPercent: number | undefined;\n\n    const seek = (percent: number) => {\n      const media = this.#timeState.value;\n\n      if (media) {\n        const time = this.#core.rawValueFromPercent(percent);\n\n        this.#seek.seek(percent);\n        media.seek(time);\n      }\n    };\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      // Seek on each (throttled) change while dragging so the frame follows the thumb.\n      // Presses and key steps seek once, on commit.\n      onValueChange: (percent) => {\n        if (!this.#slider?.input.current.dragging || percent === dragSeekPercent) return;\n\n        dragSeekPercent = percent;\n        seek(percent);\n      },\n      onValueCommit: (percent) => {\n        // Skip the commit when the drag already sought this position.\n        if (percent !== dragSeekPercent) seek(percent);\n\n        dragSeekPercent = undefined;\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      // Only edge alignment depends on the slider's size.\n      onResize: () => {\n        if (this.thumbAlignment === 'edge') this.requestUpdate();\n      },\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n    this.#seek.state.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#seek.destroy();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#seek.destroy();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) {\n      this.#seek.destroy();\n      this.removeAttribute('data-playing');\n      return;\n    }\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    this.#seek.update(state.seeking, state.fillPercent, this);\n    const percent = this.#seek.state.current.percent;\n\n    this.toggleAttribute(\n      'data-playing',\n      isMediaPlaying(this.#playbackState.value) &&\n        !state.disabled &&\n        !state.dragging &&\n        !state.seeking &&\n        percent === undefined\n    );\n\n    const fill = percent === undefined || state.dragging || state.disabled ? state : { ...state, fillPercent: percent };\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(fill));\n    const styles = Object.fromEntries(Object.entries(cssVars).filter(([name, value]) => this.#cssVars[name] !== value));\n\n    applyStyles(this, styles);\n    this.#cssVars = cssVars;\n\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/volume-slider/element.js

@@ -97,7 +97,9 @@ var VolumeSliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		const wheelProps = createWheelStep({
 			isDisabled,

package/dist/dev/ui/volume-slider/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs, type VolumeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createWheelStep,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectControls,\n  selectVolume,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class VolumeSliderElement extends UIElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    wheelStep: { type: Number, attribute: 'wheel-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof VolumeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  wheelStep = VolumeSliderCore.defaultProps.wheelStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    const isDisabled = () => {\n      const volume = this.#volumeState.value;\n\n      return this.disabled || !volume || volume.volumeAvailability !== 'available';\n    };\n\n    const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;\n    const getStepPercent = () => this.#core.getStepPercent();\n    const setVolume = (percent: number) => this.#setVolume(percent);\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled,\n      getPercent,\n      getStepPercent,\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: setVolume,\n      onValueCommit: setVolume,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    const wheelProps = createWheelStep({\n      isDisabled,\n      getPercent,\n      getStepPercent: () => this.#core.getWheelStepPercent(),\n      onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyElementProps(this, wheelProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n    applyElementProps(this, { hidden: state.hidden ? '' : undefined });\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/volume-slider/element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs, type VolumeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  createWheelStep,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectControls,\n  selectVolume,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class VolumeSliderElement extends UIElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    wheelStep: { type: Number, attribute: 'wheel-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof VolumeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  wheelStep = VolumeSliderCore.defaultProps.wheelStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    const isDisabled = () => {\n      const volume = this.#volumeState.value;\n\n      return this.disabled || !volume || volume.volumeAvailability !== 'available';\n    };\n\n    const getPercent = () => (this.#volumeState.value?.volume ?? 0) * 100;\n    const getStepPercent = () => this.#core.getStepPercent();\n    const setVolume = (percent: number) => this.#setVolume(percent);\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isDisabled,\n      getPercent,\n      getStepPercent,\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: setVolume,\n      onValueCommit: setVolume,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      // Only edge alignment depends on the slider's size.\n      onResize: () => {\n        if (this.thumbAlignment === 'edge') this.requestUpdate();\n      },\n    });\n\n    const wheelProps = createWheelStep({\n      isDisabled,\n      getPercent,\n      getStepPercent: () => this.#core.getWheelStepPercent(),\n      onValueChange: (percent) => this.#volumeState.value?.setVolume(this.#core.rawValueFromPercent(percent) / 100),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyElementProps(this, wheelProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n    applyElementProps(this, { hidden: state.hidden ? '' : undefined });\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.0.1";
+		return "10.2.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.0.1.
+Bundled markdown documentation for `@videojs/html` v10.2.0.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/guides/browser-support.md

@@ -12,7 +12,7 @@ Browsers and rendering environments supported by Video.js 10, and how the packag
 | Safari | 16.4 and later |
 | Safari on iOS | 16.4 and later |
 
-These versions account for 91.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001810, and this figure updates when we update that data.
+These versions account for 92.5% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001815, and this figure updates when we update that data.
 
 We test in and fix bugs for these versions. Each minimum comes from a feature with no fallback: `:has()` sets Firefox, [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) and [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) set Chrome and Edge (Chrome 111, Firefox 113, Safari 16.2), and the JavaScript sets Safari, because it uses ES2022 syntax and [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets). Newer JavaScript APIs are feature-detected.
 
@@ -36,16 +36,16 @@ The table reads the first fully supporting version of each feature from [caniuse
 
 | Feature | Chrome and Edge | Firefox | Safari and iOS | Global support |
 | --- | --- | --- | --- | --- |
-| [`@scope`](https://caniuse.com/css-cascade-scope) Has a fallback. Packaged skins use :where() selectors instead; registry CSS skins need it. | 118 | 146 | 17.4 | 90.0% |
-| [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 95.3% |
-| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.1% |
-| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.0% |
-| [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.0% |
-| [`:dir()`](https://caniuse.com/css-dir-pseudo) Has a fallback. Right-to-left layout follows the dir attribute instead. | 120 | 17 | 16.4 | 91.4% |
-| [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Control scrims fall back to color-mix(), and subtle shadows are lost. | 131 | 133 | 18 | 85.7% |
-| [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 85.6% |
-| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 95.7% |
-| [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | 125 | 147 | 26 | 84.1% |
+| [`@scope`](https://caniuse.com/css-cascade-scope) Has a fallback. Packaged skins use :where() selectors instead; registry CSS skins need it. | 118 | 146 | 17.4 | 91.7% |
+| [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 96.0% |
+| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.8% |
+| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.8% |
+| [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.8% |
+| [`:dir()`](https://caniuse.com/css-dir-pseudo) Has a fallback. Right-to-left layout follows the dir attribute instead. | 120 | 17 | 16.4 | 92.5% |
+| [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Control scrims fall back to color-mix(), and subtle shadows are lost. | 131 | 133 | 18 | 87.0% |
+| [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 87.0% |
+| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 96.4% |
+| [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | Not supported | Not supported | 27 | 0.0% |
 
 Older browsers than the baseline are not tested. Without `:has()`, `@container`, `@layer`, `color-mix()`, or `oklch()`, the skins lose focus states, layout, or colors.
 

package/docs/guides/build-with-ai.md

@@ -121,7 +121,7 @@ The old `npx @videojs/cli docs` workflow was removed. `@videojs/cli` now contain
 
 If your agent does not use the skill, start a new session or reload plugins, then ask it to use the Video.js skill explicitly. If it writes `videojs()`, `data-setup`, `registerPlugin`, or other Video.js 8 APIs, ask it to read the installed `llms.txt` before changing code.
 
-Report problems with the skill in the [videojs/skills repository](https://github.com/videojs/skills/issues). Report package and documentation problems in [videojs/v10](https://github.com/videojs/v10/issues).
+Report problems with the skill in the [videojs/skills repository](https://github.com/videojs/skills/issues). Report package and documentation problems in [videojs/video.js](https://github.com/videojs/video.js/issues).
 
 ## Use the docs
 

package/docs/guides/build-your-own-skin.md

@@ -0,0 +1,381 @@
+# Build your own skin
+
+Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
+
+A skin is the player interface: markup that arranges Video.js UI components inside the player, plus the styles that give it a look. The components handle playback state, keyboard support, and accessibility, so building your own skin is mostly a layout and design job. [Skins](./skins.md) explains how skins fit into Video.js.
+
+If a packaged skin is already close to what you want, [Customize skins](./customize-skins.md) is less work.
+
+## Create a skin project
+
+The quickest way to start is a standalone skin project:
+
+**npm**
+
+```bash
+npx @videojs/cli skin create
+```
+
+**pnpm**
+
+```bash
+pnpm dlx @videojs/cli skin create
+```
+
+**yarn**
+
+```bash
+npx @videojs/cli skin create --package-manager yarn
+```
+
+**bun**
+
+```bash
+bunx @videojs/cli skin create
+```
+
+The command asks for a name, a framework (React or HTML), a styling approach (Tailwind or CSS), a starting skin, and a preset (video, audio, live video, or live audio). The starting skin defaults to [Scaffold](../reference/components/video-scaffold-skin.md): every control wired up, with minimal styling and no transitions, so there’s little to undo.
+
+The project goes in a folder named after the skin, so a skin called “My Skin” goes in `my-skin`. Open it and start the preview:
+
+**npm**
+
+```bash
+cd my-skin
+npm run dev
+```
+
+**pnpm**
+
+```bash
+cd my-skin
+pnpm dev
+```
+
+**yarn**
+
+```bash
+cd my-skin
+yarn dev
+```
+
+**bun**
+
+```bash
+cd my-skin
+bun dev
+```
+
+The project has two parts:
+
+- **`src/`** holds the skin and nothing else. Edit it however you like, including its markup, class names, theme tokens, and stylesheets.
+- **`apps/preview/`** is a workbench that plays your skin. Use it to try different player sizes and aspect ratios, light and dark color schemes, right-to-left text, every built-in language, and playback settings such as autoplay and loop.
+
+When you want to share it, deploy the workbench to Vercel, Netlify, or Cloudflare Pages:
+
+**npm**
+
+```bash
+npm run deploy
+```
+
+**pnpm**
+
+```bash
+pnpm run deploy
+```
+
+**yarn**
+
+```bash
+yarn run deploy
+```
+
+**bun**
+
+```bash
+bun run deploy
+```
+
+Add the host’s name to skip the question, as in `npm run deploy vercel`. With pnpm, keep the `run`, since `pnpm deploy` is a built-in pnpm command. When the skin is done, move `src/` into your app.
+
+### Build it with a coding agent
+
+If you work with a coding agent, such as Claude Code, Codex, or Cursor, it can do all of this for you. Install the Video.js skills, which include a skill for building skins:
+
+```bash
+npx @videojs/cli agents skills
+```
+
+Then ask your agent something like “Help me design my own Video.js skin for our podcast player.” It asks for the same choices as the command, creates the project, starts the workbench, and agrees a design with you before styling. It can also match an existing player’s look from a screenshot or a link, then checks its work against the reference and for accessibility before handing back. [Build with AI](./build-with-ai.md) covers installing the skills in each agent.
+
+## Other starting points
+
+- **Inside an existing app.** Add a skin’s source with [Install with Shadcn](./installation-shadcn.md) and pick **Scaffold** as the skin.
+- **From nothing.** Put a [Container](../reference/components/player-container.md) inside your player and add the components you want, as in the example below.
+
+No path requires Scaffold’s structure, its theme tokens, or any particular CSS approach.
+
+## A minimal skin
+
+This example shows how a skin fits together without Scaffold’s extra parts. It has a play button, a timeline, the current time, mute, fullscreen, keyboard shortcuts, screen reader announcements, and an error dialog. The player provides state, the Container is the skin’s root, and the media element goes inside the Container next to the controls.
+
+**index.html**
+
+```html
+<script type="module">
+  import '@videojs/html/video/player';
+  import '@videojs/html/ui/container';
+  import '@videojs/html/ui/controls';
+  import '@videojs/html/ui/controls-content';
+  import '@videojs/html/ui/controls-group';
+  import '@videojs/html/ui/play-button';
+  import '@videojs/html/ui/time-slider';
+  import '@videojs/html/ui/slider-track';
+  import '@videojs/html/ui/slider-buffer';
+  import '@videojs/html/ui/slider-fill';
+  import '@videojs/html/ui/slider-thumb';
+  import '@videojs/html/ui/time';
+  import '@videojs/html/ui/mute-button';
+  import '@videojs/html/ui/fullscreen-button';
+  import '@videojs/html/ui/hotkey';
+  import '@videojs/html/ui/status-announcer';
+  import '@videojs/html/ui/error-dialog';
+  import '@videojs/html/ui/dialog-popup';
+  import '@videojs/html/ui/dialog-title';
+  import '@videojs/html/ui/dialog-description';
+  import '@videojs/html/ui/dialog-close';
+</script>
+
+<video-player>
+  <media-container class="video-skin">
+    <video src="video.mp4" playsinline></video>
+
+    <media-controls>
+      <media-controls-content class="video-skin-controls">
+        <media-time-slider class="video-skin-time-slider">
+          <media-slider-track class="video-skin-track">
+            <media-slider-buffer class="video-skin-buffer"></media-slider-buffer>
+            <media-slider-fill class="video-skin-fill"></media-slider-fill>
+          </media-slider-track>
+          <media-slider-thumb class="video-skin-thumb"></media-slider-thumb>
+        </media-time-slider>
+
+        <media-controls-group class="video-skin-controls-group" aria-label="Playback controls">
+          <media-play-button class="video-skin-play">
+            <span class="show-when-paused">Play</span>
+            <span class="show-when-playing">Pause</span>
+          </media-play-button>
+          <media-time type="current"></media-time>
+          <media-mute-button class="video-skin-mute">
+            <span class="show-when-muted">Unmute</span>
+            <span class="show-when-unmuted">Mute</span>
+          </media-mute-button>
+          <media-fullscreen-button class="video-skin-fullscreen">
+            <span class="show-when-fullscreen">Exit fullscreen</span>
+            <span class="show-when-not-fullscreen">Fullscreen</span>
+          </media-fullscreen-button>
+        </media-controls-group>
+      </media-controls-content>
+    </media-controls>
+
+    <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
+    <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
+    <media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
+    <media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
+    <media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
+
+    <media-status-announcer></media-status-announcer>
+
+    <media-error-dialog>
+      <media-dialog-popup class="video-skin-error">
+        <media-dialog-title></media-dialog-title>
+        <media-dialog-description></media-dialog-description>
+        <media-dialog-close></media-dialog-close>
+      </media-dialog-popup>
+    </media-error-dialog>
+  </media-container>
+</video-player>
+```
+
+The `@videojs/html/video/player` import registers `<video-player>` with the video features, which hold the state these controls need. Some controls, such as Cast or Quality, depend on features that not every preset includes. Each control’s reference page names the feature it needs.
+
+This CSS places the controls over the video, hides them when the viewer is idle, draws the timeline, and keeps the error dialog hidden until playback fails:
+
+**video-skin.css**
+
+```css
+.video-skin {
+  position: relative;
+  display: block;
+}
+
+.video-skin video {
+  display: block;
+  width: 100%;
+}
+
+.video-skin-controls {
+  position: absolute;
+  inset: auto 0 0;
+  padding: 12px;
+  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
+  color: white;
+  transition: opacity 0.25s;
+}
+
+/* Keep controls visible while something inside them has keyboard focus. */
+.video-skin-controls:not([data-visible]):not(:has(:focus-visible)) {
+  opacity: 0;
+}
+
+.video-skin-controls-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* The slider sets its progress as CSS custom properties. */
+.video-skin-time-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  cursor: pointer;
+}
+
+.video-skin-track {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: rgb(255 255 255 / 0.3);
+  border-radius: 9999px;
+}
+
+.video-skin-buffer,
+.video-skin-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
+.video-skin-buffer {
+  width: var(--media-slider-buffer);
+  background: rgb(255 255 255 / 0.4);
+}
+
+.video-skin-fill {
+  width: var(--media-slider-fill);
+  background: white;
+}
+
+.video-skin-thumb {
+  position: absolute;
+  left: var(--media-slider-fill);
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  translate: -50% 0;
+}
+
+.video-skin-error {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  gap: 12px;
+  place-content: center;
+  padding: 24px;
+  background: rgb(0 0 0 / 0.85);
+  color: white;
+  text-align: center;
+}
+
+.video-skin-error:not([data-open]) {
+  display: none;
+}
+```
+
+Each button in the HTML example holds a label for every state. Show only the one that matches:
+
+**video-skin.css**
+
+```css
+.video-skin-play:not([data-paused]) .show-when-paused,
+.video-skin-play[data-paused] .show-when-playing,
+.video-skin-mute:not([data-muted]) .show-when-muted,
+.video-skin-mute[data-muted] .show-when-unmuted,
+.video-skin-fullscreen:not([data-fullscreen]) .show-when-fullscreen,
+.video-skin-fullscreen[data-fullscreen] .show-when-not-fullscreen {
+  display: none;
+}
+```
+
+From here, add the components your design needs.
+
+## Pick the components
+
+Each skin is made of the same building blocks. Use the ones your design needs; their reference pages cover props, state, data attributes, and examples.
+
+| Purpose | Components |
+| --- | --- |
+| Player surface, fullscreen and activity target | [Container](../reference/components/player-container.md) |
+| Show and hide controls with user activity | [Controls](../reference/components/controls.md) |
+| Playback buttons | [Play button](../reference/components/play-button.md), [Seek button](../reference/components/seek-button.md), [Mute button](../reference/components/mute-button.md), [Playback rate button](../reference/components/playback-rate-button.md), [Live button](../reference/components/live-button.md) |
+| Screen and device buttons | [Fullscreen button](../reference/components/fullscreen-button.md), [Picture-in-picture button](../reference/components/pip-button.md), [AirPlay button](../reference/components/airplay-button.md), [Cast button](../reference/components/cast-button.md), [Captions button](../reference/components/captions-button.md) |
+| Timeline and volume | [Time slider](../reference/components/time-slider.md), [Volume slider](../reference/components/volume-slider.md), [Volume popover](../reference/components/volume-popover.md), [Thumbnail](../reference/components/thumbnail.md), [Time](../reference/components/time.md) |
+| Menus and popups | [Menu](../reference/components/menu.md), [Popover](../reference/components/popover.md), [Tooltip](../reference/components/tooltip.md), and the radio groups for [captions](../reference/components/captions-radio-group.md), [quality](../reference/components/quality-radio-group.md), [playback rate](../reference/components/playback-rate-radio-group.md), and [audio tracks](../reference/components/audio-track-radio-group.md) |
+| Media details and loading | [Title](../reference/components/title.md), [Poster](../reference/components/poster.md), [Buffering indicator](../reference/components/buffering-indicator.md) |
+| Feedback after an action | [Seek indicator](../reference/components/seek-indicator.md), [Volume indicator](../reference/components/volume-indicator.md), [Status indicator](../reference/components/status-indicator.md) |
+| Errors | [Error dialog](../reference/components/error-dialog.md) |
+| Keyboard, gestures, and announcements | [Hotkey](../reference/components/hotkey.md), [Gesture](../reference/components/gesture.md), [Status announcer](../reference/components/status-announcer.md) |
+| Icons | [Icons](../reference/components/icons.md) |
+
+Some of these are easy to leave out by accident because they have little or no visible UI. Include the error dialog, keyboard shortcuts, and status announcer unless you replace them with your own.
+
+Import the registration for every element you use, including the parts of compound components. Each reference page lists its imports.
+
+To build a control Video.js doesn’t provide, follow [Build your own UI component](./build-your-own-component.md).
+
+## Style it your way
+
+The components bring no visual styles. You add the icons, text, and CSS. They describe their state with `data-*` attributes, such as `data-paused` on the play button, so you can style them with plain CSS, Tailwind, or anything else. [UI components](./ui-components.md) explains how. [Automatically show and hide controls](./controls.md) covers the controls’ visibility states.
+
+Lay out controls in source order that matches their visual order, so keyboard focus follows the layout.
+
+A player’s controls sit over a moving picture, in a frame whose size you don’t control, so a few design questions come up in every skin:
+
+- **Surfaces over video.** Borders, shadows, and translucent backgrounds look different over every frame. [Shapes and surfaces](https://videojs.org/blog/videojs-v10-skin-design#shapes-and-surfaces) and [Letting the content influence the color](https://videojs.org/blog/videojs-v10-skin-design#letting-the-content-influence-the-color) cover how our skins handle them.
+- **Readable controls.** Seek tracks need a visible target, icons need optical alignment, and time displays need fixed-width digits. See [Controls and typography](https://videojs.org/blog/videojs-v10-skin-design#controls-and-typography).
+- **Motion.** Menus should open from the control that opened them and respond when they’re closed mid-transition. See [Motion and transitions](https://videojs.org/blog/videojs-v10-skin-design#motion-and-transitions).
+- **Small players.** Captions, settings, picture-in-picture, and Cast all compete for space at narrow widths. See [Fitting the available space](https://videojs.org/blog/videojs-v10-skin-design#fitting-the-available-space).
+- **Custom colors.** An accent color someone else picks still needs contrast against its text and the video. See [Customization and contrast](https://videojs.org/blog/videojs-v10-skin-design#customization-and-contrast).
+
+[Design inspiration behind the Video.js v10 skins](https://videojs.org/blog/videojs-v10-skin-design) covers the thinking behind our own skins in full.
+
+## Support the public CSS properties
+
+If the skin is only for your own site, you can skip this.
+
+If you want to offer it as a Video.js skin, support the same CSS custom properties as the packaged skins, such as `--media-accent-color` and `--media-border-radius`. People can then restyle your skin the same way they restyle ours. [Set the skin’s styles](./customize-skins.md#set-the-skins-styles) lists them. We’re still working out how to accept community skins into Video.js.
+
+## Test it
+
+Check the finished skin with real media, at the narrowest player size you support:
+
+- Play, pause, seek, change volume, open every menu, and enter fullscreen.
+- Use only a keyboard, then only touch. Focus stays visible and follows the layout, and controls hide when idle.
+- Check loading, errors, ended playback, captions, and controls the browser doesn’t support.
+- Check text and icon contrast over bright and dark footage, with forced colors, and with reduced motion.
+
+[Accessibility](./accessibility.md) covers these checks in more detail.
+
+## Related pages
+
+### Guides
+
+- [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.

package/docs/guides/cdn.md

@@ -36,8 +36,8 @@ A skin bundle registers every UI element its skin is built from. Any element the
 Each [UI element](./ui-components.md) is its own bundle under `ui/`, for markup that a skin bundle does not already cover: a player-only bundle, [skin source](./customize-skins.md#style-skin-source) that adds a component the packaged skin lacks, or a [dialog](../reference/components/dialog.md) your page opens beside a packaged skin.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video-player.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/ui/play-button.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video-player.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/ui/play-button.js"></script>
 ```
 
 Each path mirrors its npm subpath: `ui/play-button.js` registers the element that `@videojs/html/ui/play-button` does. Compound components list one bundle per part in their reference page’s Import section, and all of the bundles share chunks with the player.
@@ -47,8 +47,8 @@ Each path mirrors its npm subpath: `ui/play-button.js` registers the element tha
 The default presets play through the browser’s own `<video>` and `<audio>`. Every other [media component](./media-sources.md) is its own bundle under `media/`, loaded beside the player bundle:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/hlsjs-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/hlsjs-video.js"></script>
 ```
 
 Each path mirrors its npm subpath. Elements with more than one playback engine keep the extra flavors in a directory named for the element, such as `media/mux-video/spf.js`. Load one flavor per page: every flavor claims the same tag name, and the first registration wins.
@@ -58,9 +58,9 @@ Each path mirrors its npm subpath. Elements with more than one playback engine k
 Each [extension](./architecture.md) is its own bundle under `extensions/`, loaded beside the player and media bundles:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/mux-video.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/extensions/mux-data.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/media/mux-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/extensions/mux-data.js"></script>
 ```
 
 As with media, each path mirrors its npm subpath: `extensions/mux-data.js` registers the element that `@videojs/html/extensions/mux-data` does.
@@ -70,8 +70,8 @@ As with media, each path mirrors its npm subpath: `extensions/mux-data.js` regis
 English ships inside the skin bundles. Each other locale is a bundle under `locales/` that registers its translations on import. Load it before the player script to avoid a flash of English:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/locales/es.js"></script>
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/locales/es.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.2.0/video.js"></script>
 ```
 
 One bundle exists per locale pack, plus bare-language aliases such as `pt`. For custom strings, see [Internationalize the player](./internationalization.md).

package/docs/guides/customize-skins.md

@@ -127,7 +127,7 @@ Installed files belong to your project, so an update replaces your local copy. C
 npx shadcn@latest add @videojs/video --overwrite
 ```
 
-To understand how skins fit into Video.js, read [Skins](./skins.md). To create a control instead of editing one, follow [Build your own component](./build-your-own-component.md).
+To understand how skins fit into Video.js, read [Skins](./skins.md). To design a new interface from a minimal starting point, follow [Build your own skin](./build-your-own-skin.md). To create a control instead of editing one, follow [Build your own component](./build-your-own-component.md).
 
 ## Related pages
 
@@ -138,4 +138,5 @@ To understand how skins fit into Video.js, read [Skins](./skins.md). To create a
 ### Guides
 
 - [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Build your own skin](./build-your-own-skin.md): Create a skin project, preview it locally, and compose your own player interface from Video.js UI components
 - [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.