Tasks

Design and implement an interface to support retrieving and setting text tracks across providers.

API

Player API

• textTracks: TextTrack[]
• currentTextTrack: number
• isTextTrackVisible: boolean

Player Methods

• setCurrentTextTrack(track: number | TextTrack): void
• setTextTrackVisibility(isVisible: boolean): void

Media Events

• text-tracks-change
• current-text-track-change
• text-track-visiblity-change

Media Request Events

• media-show-text-tracks-request
• media-hide-track-tracks-request

Provider API

• Provider's need to expose an optional textTracks object with the following fields: textTracks, currentTextTrack, visible, supported, setTextTrack (this will be undefined if not possible), and setVisibility.

References

• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerProps.ts#L429-L451
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L109-L127
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L515-L540
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L552-L650
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/dash/dash.tsx#L331-L349

Tasks

• Complete #22.
• Complete #28.
• Design, build and test the HideCaptionsControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-hide-captions-control-pressed: UI event emitted when the component is pressed.
• vds-user-hide-captions-request: UI event emitted when the component is pressed to hide captions.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/caption-control

Tasks

• Design, build and test the ControlGroup component.

Notes

Slots

• default: Used to pass in the controls that a part of "this" group.

References

• https://github.com/vime-js/vime/blob/master/core/src/components/ui/controls/control-group

Tasks

• Complete #8.
• Complete #6.
• Complete #4.
• Build MediaLoadStrategy interface.
• Connect to Player and test it.
• Build and test FirstCanPlayMediaLoadStrategy.

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#media-load-strategy

Tasks

Design and implement an interface to support getting/setting playbackQuality across providers.

API

Player API

• playbackQuality: string
• playbackQualities: string[]

Media Events

• playback-quality-change

Media Request Events

• media-playback-quality-change-request

Important

• playbackQuality can only be set to a valid value in playbackQuality.
• What to do if playback quality is not supported?

References

• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerProps.ts#L268-L284
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/MediaProvider.ts#L23-L24
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/hls/hls.tsx#L247-L254
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/dash/dash.tsx#L303-L330

Tasks

• PlayerState interface (reference).
• Define basic events interface for Player/Providers/UI.
• PlayerContext object (reference).
• Connect and test connection between PlayerContext to Player.

Notes

This is the first component required as it sits at the top of the component hierarchy. We'll start with the most basic player API:

Properties

• src
• volume
• currentTime
• paused
• poster
• muted
• aspectRatio
• duration (readonly)
• buffered (readonly)
• isMobile (readonly)
• isTouch (readonly)
• isBuffering (readonly)
• isPlaying (readonly)
• hasPlaybackStarted (readonly)
• hasPlaybackEnded (readonly)
• isPlaybackReady (readonly)
• viewType (readonly)
• isAudioView (readonly)
• isVideoView (readonly)
• mediaType (readonly)
• isAudio (readonly)
• isVideo (readonly)

Events

• vds-src-change
• vds-volume-change
• vds-current-time-change
• vds-poster-change
• vds-buffered-change
• vds-buffering-change
• vds-aspect-ratio-change
• vds-play
• vds-pause
• vds-playing
• vds-duration-change
• vds-playback-start
• vds-playback-end
• vds-playback-ready
• vds-view-Type-change
• vds-media-Type-change
• vds-mobile-change
• vds-touch-change
• vds-error

UI Events

• vds-user-play-request
• vd-user-pause-request
• vds-user-mute-request
• vds-user-unmute-request
• vds-user-volume-change-request
• vds-user-current-time-change-request

Provider Events

• vds-provider-play
• vds-provider-pause
• vds-provider-playing
• vds-provider-buffered
• vds-provider-view-type-change
• vds-provider-media-type-change
• vds-provider-playback-ready
• vds-provider-playback-start
• vds-provider-playback-end
• vds-provider-current-time-change
• vds-provider-duration-change
• vds-provider-volume-change
• vds-provider-buffering-start
• vds-provider-buffering-end
• vds-provider-error

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#player
• https://github.com/vime-js/vime/tree/master/core/src/components/core/player
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerEvents.ts

Tasks

• Complete #29.
• Complete #30.
• Complete #31.
• Design, build and test the TogglePlaybackControl component.

Notes

Slots

• play: Used to pass in a styled element to give the component form when the paused state is true.
• pause: Used to pass in a styled element to give the component form when the paused state is false.

CSS Parts

• control-* and play-control-*: Forward all Control parts and forward them again but this time prefixed with play-.
• control-* and pause-control-*: Forward all Control parts and forward them again but this time prefixed with pause-.

<!-- Example -->
<vds-play-control 
  exportparts="control, control-focused, ..., control: play-control, control-focused: play-control-focused"
>
  <slot name="play"></slot>
</vds-play-control>

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/PlayButton/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/playback-control

Tasks

• Design an interface to support entering and exiting fullscreen across browsers/providers.

Notes

This will expand the player API:

Properties

• isFullscreenActive: boolean

Methods

• enterFullscreen(options?: FullscreenOptions): Promise<void>
• exitFullscreen(): Promise<void>

Events

• vds-fullscreen-change
• vds-user-enter-fullscreen-request
• vds-user-exit-fullscreen-request
• vds-provider-entered-fullscreen
• vds-provider-exited-fullscreen

Important

• How to know if the current provider supports enterting/exiting fullscreen? The interface designed should account for this. Vime achieved this through a canSetFullscreen() method. UI components need to know if this operation is possible so it might be preferable to include this in the PlayerContext somehow.
• How to handle the fact that multiple elements might be fullscreened at the same time (stacked on top of each other)?
• Handle if PiP is active. Exit it first before entering fullscreen (should it be set back on exit?).

References

• https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
• https://github.com/kaltura/playkit-js/blob/master/src/fullscreen/fullscreen-controller.js
• https://github.com/rafgraph/fscreen
• https://github.com/vime-js/vime/tree/master/core/src/components/core/player/fullscreen
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L607-L634
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L449-L457
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L61-L84
• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#providers
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/adapters/FullscreenAdapter.ts

Tasks

• Complete #28.
• Complete #53.
• Design, build and test the CloseSettingsControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-close-settings-control-pressed: UI event emitted when the component is pressed.
• vds-user-close-settings-request: UI event emitted when the component is pressed to request closing the settings.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/settings-control

Tasks

Design and implement an interface to support retreiving and setting audio tracks across providers.

API

Player API

• audioTracks: AudioTrack[]
• currentAudioTrack: AudioTrack

Player Methods

• setCurrentAudioTrack(trackId: number): Promise<void>

Media Events

• audio-tracks-change
• current-audio-track-change

Media Request Events

• media-audio-track-change-request

Notes

• There's no native interface for an AudioTrack, how can this be designed across providers?
• What to do if setting audio tracks is not supported?

References

• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerProps.ts#L453-L463
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L129-L137
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L658-L668
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/hls/hls.tsx#L255-L259

Tasks

• Complete #28.
• Design, build and test the PauseControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-pause-request: UI event emitted when the component is pressed and to pause playback.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/PauseButton/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/playback-control

Tasks

• Complete #21.
• Complete #28.
• Design, build and test the ExitPiPControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-exit-pip-request: UI event emitted when the component is pressed to deactivate PiP mode.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/pip-control

Tasks

• Complete #5.
• Build and test MediaFileProvider class.

Notes

This class will need to query and cache the MediaElement loaded in the DOM. This object should be used to build out concrete implementations of the MediaProvider class.

// Example.

abstract class MediaFileProvider extends MediaProvider<HTMLMediaElement> {
 // Let the Audio or Video provider handle implementing it so you can query the correct element (audio/video).
 protected abstract mediaEl?: HTMLMediaElement;

  getMediaEl() {
    // Maybe throw an error if called early?
    if (isUndefined(this.mediaEl)) throw Error('...');
    return this.mediaEl!;
  }

  getPaused() {
    return this.getMediaEl().paused;
  }
}

References

• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx

Tasks

• Complete #5.
• Build and test EmbeddedMediaElement.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/core/embed

Tasks

• Complete #21
• Implement PIP Button Definition
• Docs (https://www.vidstack.io/docs/player/components/buttons/pip-button)

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/pip-control

Tasks

• Design, build and test PressToPlay component,

Notes

Press is a more generic word that encompasses click, touch and keyboard triggered events.

Slots

• default: Used to define the region that is pressable.

CSS Properties

• --vds-ptp-z-index: The position in the UI z-axis stack inside the player.

CSS Parts

• ptp
• ptp-active

Events

• vds-user-play-request: UI event emitted when the component is pressed and beings/resumes playback.
• vds-user-pause-request: UI event emitted when the component is pressed and pauses playback.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/click-to-play

Tasks

• Complete #20.
• Complete #28.
• Design, build and test the ExitFullscreenControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-exit-fullscreen-request: UI event emitted when the component is pressed to exit fullscreen.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/fullscreen-control

Tasks

• Design, build and test the ControlSpacer component.

References

• https://github.com/vime-js/vime/blob/master/core/src/components/ui/controls/control-spacer

Tasks

• Design and implement an interface for enabling components to communicate with each other.

Notes

It's important to be aware that components will mount the DOM at different times, so the final solution will need account for this.

Examples

• Controls needs to be aware of components such as captions/settings to implement collision detection.
• IconLibrary needs to be aware of icons so when the icon library changes all icons can be redrawn.
• Settings needs to be aware of any controller that will be used to open/close it.

References

• https://github.com/vidstack/player/blob/main/docs/architecture/ui-patterns.md#component-communication

Tasks

Design and implement an interface to support getting/setting playbackRate across providers.

API

Player API

• playbackRate: number
• playbackRates: number[]

Media Events

• playback-rate-change

Media RequestEvents

• media-playback-rate-change-request

Important

• playbackRate can only be set to a valid value in playbackRates.
• What to do if it's not supported?

References

• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerProps.ts#L255-L266
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/MediaProvider.ts#L21-L22

Tasks

• Design, build and test the Slider component.

Notes

CSS Properties

https://github.com/vime-js/vime/blob/master/core/src/components/ui/slider/slider.css

CSS Parts

• slider

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/slider

Tasks

Design, build and test the TooltipElement component.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/tooltip

Tasks

• Complete #5.
• Build and test MockMediaProvider Component.

Tasks

• Implement YouTube Provider
• Installation Docs (https://www.vidstack.io/docs/player/getting-started/installation)
• Provider Docs (https://www.vidstack.io/docs/player/providers/youtube)

References

• https://developers.google.com/youtube/iframe_api_reference
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/youtube

Tasks

• Implement Dash Provider
• Installation Docs (https://www.vidstack.io/docs/player/getting-started/installation)
• Provider Docs (https://www.vidstack.io/docs/player/providers/dash)

References

• https://github.com/Dash-Industry-Forum/dash.js
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/dash

Tasks

• Complete #28.
• Design, build and test the PlayControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-play-request: UI event emitted when the component is pressed and beings/resumes playback.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/PlayButton/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/playback-control

Tasks

• Design and implement an interface to support a settings menu.

Notes

This will expand the player API:

Properties

• isSettingsOpen: boolean (readonly): Whether the settings menu is open.

Methods

• openSettingsMenu(): void
• closeSettingsMenu(): void

Events

• vds-settings-opened
• vds-settings-closed
• vds-user-open-settings-request
• vds-user-close-settings-request
• vds-register-settings-menu
• vds-deregister-settings-menu

Tasks

• Complete #8.
• Build BootStrategy interface.
• Connect to Player and test it.
• Build and test LazyBootStrategy.
• Build and test ClickBootStrategy.
• Build and test ImmediateBootStrategy.

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#boot-strategy

Tasks

• Complete #29.
• Complete #33.
• Complete #34.
• Design, build and test the ToggleMuteControl component.

Notes

Slots

• mute: Used to pass in a styled element to give the component form when the muted state is false.
• unmute: Used to pass in a styled element to give the component form when the muted state is true.

CSS Parts

• control-* and mute-control-*: Forward all Control parts and forward them again but this time prefixed with mute-.
• control-* and unmute-control-*: Forward all Control parts and forward them again but this time prefixed with unmute-.

<!-- Example -->
<vds-mute-control
  exportparts="control, control-focused, ..., control: mute-control, mute-focused: mute-control-focused"
>
  <slot name="mute"></slot>
</vds-mute-control>

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/MutedToggle/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/mute-control

Tasks

• Complete #48.
• Design, build and test the Scrubber component.

Notes

Can this component be functional?

CSS Properties

https://github.com/vime-js/vime/blob/master/core/src/components/ui/controls/scrubber-control/scrubber-control.css

CSS Parts

• scrubber
• slider: Forward underlying <vds-slider> parts.
• progress

Events

• vds-user-seeking-request: Emitted when the user is scrubbing merely along without stopping.
• vds-user-seeked-request: Emitted when the user stops scrubbing merely along.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/tree/main/src/ui/Scrubber
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/scrubber-control

Tasks

• Complete #22.
• Complete #28.
• Design, build and test the ShowCaptionsControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-show-captions-control-pressed: UI event emitted when the component is pressed.
• vds-user-show-captions-request: UI event emitted when the component is pressed to show captions.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/caption-control

Tasks

• Complete #22.
• Implement Captions Definition.
• Docs (https://www.vidstack.io/docs/player/components/display/captions)

Notes

We need to keep in mind that some uers are looking for simple captions, and some for more advanced captions support. For the advanced side we can look at vtt.js.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/captions

Tasks

• Implement Vimeo Provider
• Installation Docs (https://www.vidstack.io/docs/player/getting-started/installation)
• Provider Docs (https://www.vidstack.io/docs/player/providers/vimeo)

References

• https://developer.vimeo.com/player/sdk
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/vimeo

Tasks

• Complete #9.
• Build and test Video component.

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#providers
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/video

Tasks

• Implement Dailymotion Provider
• Installation Docs (https://www.vidstack.io/docs/player/getting-started/installation)
• Provider Docs (https://www.vidstack.io/docs/player/providers/dailymotion)

References

• https://developer.dailymotion.com/player
• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#providers
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/dailymotion

Tasks

• Complete #20.
• Complete #28.
• Design, build and test the EnterFullscreenControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-enter-fullscreen-request: UI event emitted when the component is pressed to enter fullscreen.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/fullscreen-control

Tasks

• Build abstract MediaProvider class that only contains the basic API listed in #8 .

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#providers

Tasks

• Complete #56.
• Design, build and test the Controls component.

Notes

Slots

• default: Used to pass in individual controls or control groups.

CSS Properties

• --vds-controls-padding: The padding inside the controls.
• --vds-controls-bg-color: The background color of the controls.
• --vds-controls-border-radius: The border radius of the controls.
• --vds-controls-spacing: The space between individual controls.
• --vds-controls-z-index: The position in the UI z-axis stack inside the player.

CSS Parts

• controls
• controls-audio
• controls-video
• controls-disabled
• controls-active

Events

• vds-user-show-controls-request
• vds-user-hide-controls-request

References

• https://github.com/vime-js/vime/blob/master/core/src/components/ui/controls/controls

Tasks

• Complete #9.
• Build and test Audio component.

References

• https://github.com/vidstack/player/blob/main/docs/architecture/architecture.md#providers
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/audio

Tasks

Design and implement an interface to support entering and exiting picture-in-picture (PiP) across browsers/providers.

API

Player API

• pictureInPicture.active: boolean
• pictureInPicture.supported: boolean

Player Methods

• enterPictureInPicture(): Promise<void>
• exitPictureInPicture(): Promise<void>

Events

• picture-in-picture-change
• media-enter-pip-request
• media-exit-pip-request

Provider API

• Provider's need to expose a picture-in-picture API similar to the on available on the player and the existing fullscreen API.

Notes

• Careful when entering/exiting fullscreen - toggle PiP correctly.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L636-L656
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/file/file.tsx#L443-L447
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/PlayerMethods.ts#L87-L107
• https://github.com/vime-js/vime/blob/master/core/src/components/providers/adapters/PiPAdapter.ts
• https://github.com/kaltura/playkit-js/blob/master/src/fullscreen/fullscreen-controller.js

Tasks

• Complete #29.
• Complete #36.
• Complete #37.
• Design, build and test the ToggleFullscreenControl component.

Notes

Slots

• enter: Used to pass in a styled element to give the component form when the isFullscreenActive state is true.
• exit: Used to pass in a styled element to give the component form when the isFullscreenActive state is false.

CSS Parts

• control-* and enter-control-*: Forward all Control parts and forward them again but this time prefixed with enter-.
• control-* and exit-control-*: Forward all Control parts and forward them again but this time prefixed with exit-.

<!-- Example -->
<vds-enter-fullscreen-control 
  exportparts="control, control-focused, ..., control: enter-control, control-focused: enter-control-focused"
>
  <slot name="enter"></slot>
</vds-enter-fullscreen-control>

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/fullscreen-control

Tasks

• Complete #28.
• Design, build and test the UnmuteControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vdsUserUnmuteRequest: UI event emitted when the component is pressed to unmute volume.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/UnmuteButton/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/mute-control

Tasks

• Complete #22.
• Implement Caption Button Definition.
• Docs (https://www.vidstack.io/docs/player/components/buttons/captions-button)

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/caption-control

Tasks

• Design, build and test the Control component.

Notes

Methods

• getHeight(): number
• focusControl(): void
• blurControl(): void

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

• control
• control-hovered
• control-touch
• control-mobile
• control-active
• control-haspopup
• control-expanded
• control-pressed
• control-focused
• control-tap-feedback

Events

• vds-control-focus
• vds-control-blur

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/control

Tasks

• Complete #9.
• Complete #11.
• Build and test Hls component.

References

• https://github.com/video-dev/hls.js
• https://github.com/vime-js/vime/tree/master/core/src/components/providers/hls

Tasks

• Complete #28.
• Design, build and test the MuteControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-mute-request: UI event emitted when the component is pressed to mute volume.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/MuteButton/index.ts
• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/mute-control

Tasks

• Design, build and test DoublePressToFullscreen component,

Notes

Press is a more generic word that encompasses click, touch and keyboard triggered events.

Slots

• default: Used to define the region that is pressable.

CSS Properties

• --vds-dptf-z-index: The position in the UI z-axis stack inside the player.

CSS Parts

• dptf
• dptf-active

Events

• vds-user-enter-fullscreen-request: UI event emitted when the component is pressed to enter fullscreen.
• vds-user-exit-fullscreen-request: UI event emitted when the component is pressed to exit fullscreen.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/dbl-click-fullscreen

Tasks

• Complete #28.
• Complete #53.
• Design, build and test the OpenSettingsControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-open-settings-control-pressed: UI event emitted when the component is pressed.
• vds-user-open-settings-request: UI event emitted when the component is pressed to request opening the settings.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/settings-control

Tasks

• Complete #28.
• Design, build and test the Toggle component.

Notes

When implementing this component careful not to prevent consumers from animating between states. Both slots should be rendered. As both slots expect a Control component, the hidden attribute can be set to indicate which control is active. This can let the consumer decide how to handle the transition between toggled states.

Slots

These slots are defined by static properties on the subclass.

• ON_SLOT_NAME: Used to pass in a control when the toggle is on.
• OFF_SLOT_NAME: Used to pass in a control when the toggle is off.

References

• https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/ui/Toggle/index.ts

Tasks

• Complete #21.
• Complete #28.
• Design, build and test the EnterPiPControl component.

Notes

Slots

• default: Used to pass in a styled element to give the component form.

CSS Parts

Forward all Control parts.

Events

• vds-user-enter-pip-request: UI event emitted when the component is pressed to activate PiP mode.

References

• https://github.com/vime-js/vime/tree/master/core/src/components/ui/controls/pip-control