Player Release 0.5: Mach 10? Let's Give Them Mach 10. (May 2023)

[mihar-22]

👋

This is release 0.5 - Part 1! In the last month we've touched every part of the player codebase and changed thousands of lines of code in preparation for 1.0. A very long month of rewriting our internals, adding all the components required for skins, and improving existing parts.

I'm beyond excited because we've now layed all the ground work for Part 2 (skins!). How long you ask? Not long, all components have essentially been built and the default styles mostly match our skins. The only thing we have to do is piece together the layouts and customize certain components slighty. So... we're almost at the promise land. It's been an insane effort to get here and I'm excited to share it with all of you!

👀 You can play with some of the new features on our home page. Do note, this is a rough example that we put together quickly and not our final skin.

Buckle up and let's get started digging through this massive release...

Preview.mp4

Breaking Changes

• All data-hidden attribtues have been renamed to aria-hidden. Affected components include: fullscreen/seek/pip/caption button, poster, slider thumbnail/video.
• The slider --preview-top CSS variable was removed. You can freely position using bottom, set it to 100% to match previous default positioning.
• Tooltips are no longer slots - see the new Tooltip component.
• Previously the thumbnail was provided on the <media-slider-thumbnail> component. It's now set directly on the player:

<media-player thumbnails="https://media-files.vidstack.io/thumbnails.vtt">
  <!-- ... -->
</media-player>

What's New?

• Player Title
• React Props
• CSS Variables
• New Class Props
• Source Headers
• JSON Captions
• Tooltip
• Thumbnail
• Buffering Indicator
• Gestures
• Menu
• Radio Group
• Audio Menu
• Captions Menu
• Quality Menu
• Playback Rate Menu
• Chapters Menu
• Vertical Sliders
• Time Slider Chapters
• New ASS Renderer
• Maverick Rewrite

Player Title (NEW)

A title can now be set on the player to help with accessibility. The browser will show a tooltip when hovering over the player region.

<media-player title="Agent 327: Operation Barbsershop">
  <!-- ... -->
</media-player>

The player also sets the stream/media type with the title on the aria-label attribute for screen readers (e.g., Live Video: Title, Audio: Title).

React Props (NEW)

We now export props for all of our React components:

import { MediaPlayerProps, MediaOutletProps, ... } from '@vidstack/react'

CSS Variables (NEW)

Previously, we had a small amount of CSS variables randomly across some components and not others. We've now included a comprehensive list of variables for all components and documented them. This should make it much easier when customizing default styles. It also helps when building skins to quickly mock up new interfaces or provide options to consumers.

New CSS Variables:

• Button
• Slider
• Time
• Captions
• Buffering
• Live Indicator
• Menu
• Chapters Menu

TW Class Props (EXPERIMENTAL)

We ran into a tricky issue with time sliders and preset menus (e.g., quality menu) as they dynamically create children based on the current media and tracks. We now expose a way to forward class attributes to children so Tailwind users can enjoy the same features:

<media-time-slider
  class=""
  track-class=""
  track-fill-class=""
  track-progress-class=""
  thumb-container-class=""
  thumb-class=""
  chapters-class=""
  chapter-container-class=""
  chapter-class=""
>
  <!-- ... -->
</media-time-slider>

👉 Very small VSCode setup required to improve DX.
👉 See the new time slider TW example.

❓ We need feedback on this approach. Let us know what feels more natural to you because we could rewrite this using part variants (e.g., #track:) but it would just end up crazy long. Prettier formats class attributes into a single line even if we just break it on new lines so there's no way to have this readable in HTML.

Source Headers (NEW)

We now provide a warning when no source/provider is matched and fall back to checking source headers via fetch. Preferably a type hint should still be given to SSR correctly. This feature ensures that the correct media will be rendered client-side in more dynamic situtations where you don't know the type being provided.

JSON Captions (NEW)

We've received feedback that some users are storing their captions as JSON in their database. To ease the process of integrating with the player we now support json captions type:

<media-player>
  <media-outlet>
    <track
      src="/media/subs/english.json"
      kind="subtitles"
      label="English"
      srclang="en-US"
      default
      data-type="json"
    />
  </media-outlet>
</media-player>

👉 See the new JSON docs for how to structure your response.

Tooltip (NEW)

Previously, the tooltip required manually wiring up ARIA attributes which can be tedious and error-prone. Slot positioning was slightly awkward too. The new <media-tooltip> makes it super simple to add and position tooltips.

OLD

<media-play-button aria-describedby="media-play-tooltip" default-appearance>
  <div id="media-play-tooltip" role="tooltip" slot="tooltip-top-center">
    <span slot="play-tooltip">Play</span>
    <span slot="pause-tooltip">Pause</span>
  </div>
</media-play-button>

NEW

<media-play-button default-appearance>
  <media-tooltip position="top left">
    <span slot="play">Play</span>
    <span slot="pause">Pause</span>
  </media-tooltip>
</media-play-button>

👉 You can find all button examples in the docs updated with the new tooltip component.

Thumbnail (NEW)

We abstracted the thumbnail component from the slider thumbnail as it was required by the chapters menu component. There's now a general-purpose thumbnail component that you can use to extend your own UI:

<media-player thumbnails="...">
  <media-thumbnail time="50" />
</media-player>

👉 See the new Thumbnail docs.

Buffering Indicator (NEW)

Previously, we documented building a custom buffering indicator rather than providing one but it was quite verbose. To make your code cleaner we've added a buffering indicator that works out the box. There's also some neat CSS variables for quick and easy customization.

<media-buffering-indicator />

👉 See the new Buffering Indicator docs.

Gesture (NEW)

Gestures enable adding media actions in response to user gestures such as pressing the screen to play. We previously had a gesture component under experimental which was eventually removed. We took it back to the workshop and simplified it:

<media-player>
  <media-outlet>
    <media-gesture event="pointerup" action="toggle:paused" />
    <media-gesture event="dblpointerup" action="toggle:fullscreen" />
    <media-gesture event="dblpointerup" action="seek:-10" />
    <media-gesture event="dblpointerup" action="seek:10" />
  </media-outlet>
</media-player>

👉 See the new Gesture docs.

Menu (NEW)

The menu component is a floating panel with submenus and complete keyboard support. The default styles also ship with a popup menu for mobile devices that animates up from the bottom of the screen.

<media-menu>
  <media-menu-button aria-label="Settings">
    <media-icon type="settings" data-rotate></media-icon>
  </media-menu-button>
  <media-menu-items>
    <!-- ... -->
  </media-menu-items>
</media-menu>

👉 See the new Menu docs.

Radio Group (NEW)

Radio groups were built to extend menus with options where only one radio item can be checked. This component is used inside of prebuilt menus such as the Quality Menu.

<media-radio-group value="720">
  <media-radio value="1080">1080p</media-radio>
  <media-radio value="720">720p</media-radio>
  <media-radio value="480">480p</media-radio>
</media-radio-group>

Audio Menu (NEW)

Menu components for displaying the current audio track and a set of radio options for configuring it. It can be used standalone or as a submenu:

<media-menu>
  <media-audio-menu-button label="Audio"></media-audio-menu-button>
  <media-audio-menu-items empty-label="Default"></media-audio-menu-items>
</media-menu>

👉 See the new Audio Menu docs.

Captions Menu (NEW)

Menu components for displaying the current caption/subtitle track and a set of radio options for configuring it. It can be used standalone or as a submenu:

<media-menu>
  <media-captions-menu-button label="Captions"></media-captions-menu-button>
  <media-captions-menu-items off-label="Off"></media-captions-menu-items>
</media-menu>

👉 See the new Captions Menu docs.

Quality Menu (NEW)

Menu components for displaying the current video quality and a set of radio options for configuring it. It can be used standalone or as a submenu:

<media-menu>
  <media-quality-menu-button label="Quality"></media-quality-menu-button>
  <media-quality-menu-items auto-label="Auto"></media-quality-menu-items>
</media-menu>

👉 See the new Quality Menu docs.

Playback Rate Menu (NEW)

Menu components for displaying the current playback rate and a set of radio options for configuring it. It can be used standalone or as a submenu:

<media-menu>
  <media-playback-rate-menu-button label="Speed"></media-playback-rate-menu-button>
  <media-playback-rate-menu-items normal-label="Normal"></media-playback-rate-menu-items>
</media-menu>

👉 See the new Playback Rate Menu docs.

Chapters Menu (NEW)

The new <media-chapters-menu-items> component displays the current media chapters inside of a menu and enables seeking on select. Just like our other menus it has complete keyboard and mobile support!

<media-menu>
  <media-menu-button aria-label="Chapters">
    <media-icon type="chapters" />
  </media-menu-button>
  <media-chapters-menu-items />
</media-menu>

👉 See the new Chapters Menu docs.

Time Slider Chapters (NEW)

The <media-time-slider> now segments the track based on chapters when a text track is showing with a kind of chapters.

👉 See the new Time Slider chapters docs.

Vertical Sliders (NEW)

All sliders now support vertical orientation by simply setting the aria-orientation attribute:

<media-volume-slider aria-orientation="vertical">
  <!-- ... -->
</media-volume-slider>

👉 See the new vertical slider tailwind example.

JASSUB Renderer (NEW)

@ThaUnknown created JASSUB as an alternative to the popular JSO for integrating libass on the web. It includes various new rendering modes, faster and more accurate font rendering, dynamic viewport resizing, and an entire 1-2 MB smaller depending on options!

Our updated integration is mostly backwards-compatible with the previous JSO one but we recommend upgrading when you can.

👉 See the new libass renderer docs.
👉 See the PR for a detailed break down of JASSUB vs. JSO.

Maverick Rewrite (NEW)

Maverick is our custom Web Component tooling that enables us to ship fully-typed and performant components which can also SSR and hydrate even in our React integration (+ future integrations to come). It's currently in private Alpha testing as we build it out inside of Vidstack. We learned a lot in our first iteration. Some components and patterns became awkard due to Maverick's initial functional design and there was performance issues since 1k+ computations/functions were being created every time the player was initialized.

The new approach is OOP-based which allows for:

• Up to 20% fast rendering and reduction in GC times.
• Up to 28% memory usage reduction thanks to sharing props/methods on the prototype chain.
• Ability to use well-known OOP-patterns for creating and extending components.
• Decorators for exposing props/methods.
• Generics support.
• Easier readability.
• Simpler lifecycle and render methods.
• Cleaner props/store patterns for managing and sharing internal state.

In addition, we completely refactored our codebase to make it easier to maintain and for new comers to contribute. Feedback has been great and @ElBouhaliMohamed is already working on the new codebase in a PR to bring IMA SDK (ads) support to the player in his spare time 🥳

We'd love to see more contributions and are planning on adding a detailed contributor/architecture guide to help. Hope to see more in the future and personally here to help get them through.

What's Fixed?

• Audio track change event was throwing errors because it was not dealing with null tracks (fix nullable current audio track with optional chain #829).
• The role="region" attribute was missing on the player causing ARIA issues.
• The aria-atomic and aria-live attributes were missing on the captions overlay causing ARIA issues.
• Credentials were not set on internal fetch requests according to the crossorigin setting on the player.
• Added missing arrow and chevron media icons.
• React integration was missing part attribute on JSX elements.
• Time slider events were re-connecting multiple times on connect.
• One default track per kind is now permitted.
• Thumbnails are correctly resolved relative to base URL.

Next Steps

After a little weekend break we're starting work straight away on the Community Skin which is coming in Part 2 🎈 As mentioned, we're almost at the promise land and I can't wait to share it with all of you.

Come join us on Discord! There's been interesting discussions around comparing various streaming providers, small sneak peeks on the future of Vidstack, and members who are willing to help in small and big ways. We'd love for you to join and share your experiences. Click the link and say hi!

Until next time friends 🍎

[Eltik]

Lets go!!! Thanks for the update :)

[thomaskant]

Awesome work, congrats!

[lirena00]

Finally it's coming .... ty for vidstack

[rdoolfop]

The most beautiful ever seen. What an amazing job