Player Release 0.3: Hollywood, You Look Good (February 2023)

[mihar-22]

👋

Hey friends! This release was heavily focused around introducing media icons, reviewing our styling documentation, and improving Tailwind support. We needed to catch up on some documentation debt so we have a smoother path forward with upcoming releases - the next release is huge! Let's dive in!

Media Icons (NEW)

We're incredibly excited to introduce our media icons collection! It's now available on NPM via npm install media-icons. We've also sprinkled them throughout some of the new Tailwind docs. This one was truly built with love and we took the extra care in making sure the catalog was easy to search with tags, and accessible with respect to keyboard support, focus traps, markup, and more.

👉 See our new media icons catalog!

Component

Media icons is now supported out of the box with our HTML and React packages:

HTML

<!-- All icons are lazy loaded! -->
<media-icon type="play"></media-icon>
<media-icon type="airplay"></media-icon>
<media-icon type="chromecast"></media-icon>

React

import {
  AirplayIcon,
  ChromecastIcon,
  PlayIcon,
  // ...
} from '@vidstack/react';

// A standard React SVG element
<AirplayIcon color="white" size={32} />;

Styling Docs (UPDATE)

We've added a lot more information to our Styling Foundation docs to help get you started. We've also moved references over to a new section.

Tailwind Media Prefix (~BREAKING CHANGE)

In adding Tailwind examples to the site we found the media- prefix to be a bit verbose so we're experimenting with removing them by default. However, it's now completely configurable so you can add the old behavior back if desired:

// tailwind.config.js
module.exports = {
  plugins: [
    // Prefixes can now be configured - empty by default.
    require('vidstack/tailwind.cjs')({
      mediaPrefix: 'media', // paused:... -> media-paused:...
      sliderPrefix: 'slider', // dragging:... -> slider-dragging:...
    }),
  ],
};

OLD

<div class="media-paused:opacity-100"></div>

NEW

<div class="paused:opacity-100"></div>

Tailwind Not Variants (NEW)

All variants can now be prefixed with not- to negate the selector. Classes with this prefix will be transformed into media-player:not([state]) selectors.

• not-paused:...
• not-playing:...
• not-can-play:...

/* output */
media-player:not([paused]) .not-paused\:opacity-0 {
  opacity: 0;
}

Tailwind Variants (NEW)

We've added some new Tailwind variants:

• buffering: Media is not ready for playback or waiting for more data.
• can-control: Applied when media is ready for playback and user is not idle. It will also take care of hiding the control on iOS to avoid double controls in fullscreen.
• pressed: This variant can be used with the <media-toggle-button> to indicate an on state.
• volume-low: This variant can be used with the <media-mute-button> to indicate low volume (0 < x < 50).
• volume-high: This variant can be used with the <media-mute-button> to indicate high volume (x > 50).

These variants can all be negated with not- as well such as not-can-control.

Tailwind Docs (NEW)

We've added Tailwind examples everywhere and carefully hand-reviewed them to make sure they work as expected.

• Controls
• Buffering Indicator
• Toggle Button
• Play Button
• Mute Button
• Fullscreen Button
• Slider
• Time Slider
• Volume Slider

Element Type Checks (NEW)

You can now type check whether an element is HTMLAudioElement or HTMLVideoElement. This is handy when working with media events so you check the target:

import { isHTMLVideoElement, type MediaPlayEvent } from 'vidstack';

function onLoadedMetadata(event: MediaPlayEvent) {
  if (isHTMLVideoElement(event.trigger?.target)) {
    target; // HTMLVideoElement
  }
}

Documentation for this has been added to provider pages.

DocSearch Improvements (UPDATE)

Our documentation search had some design issues and more importantly duplicates with no context. For example, the search play would appear in multiple results because it exists as an instance method and event. We've made some changes to make it easier to find what you need!

OLD

NEW

API Design (UPDATE)

We found the old API pages for components hard to use. It was difficult finding content without resorting to global search, and there were a lot of minor issue that made the experience painful. We've added local search to long lists, keyboard shortcuts, and many small design improvements to make it easier to navigate.

Style Selection (NEW)

We've added a style selection dropdown to the install page to help getting started. We plan on improving the installation page over time, especially when we get to skins!

Docs/Fixes

• Blob URI's are now supported (e.g., src="blob:...") (Blob URI Support #762)
• types field has been added to package exports to support TS 5 bundler module resolution (React package does not define "types" in "exports" #771)
• Times would become undefined because duration would be incorrectly set to an object on source change (Duration NaN on source change #774)
• Define imports (e..g, vidstack/define/*) are now marked as side-effectful to avoid treeshaking them in prod. (Define imports are not being included #773)
• The default SVG icons inside buttons now scale.

Next Steps

The next release 0.4.0 is massive! It's packed with all the player features most of you have been waiting for such as playback speed, quality, captions, live stream support, and more. We're planning on breaking it up into smaller chunks so we can bring them to you faster. This release took longer than expected and we want to avoid huge delays in the future. I'm really looking forward to adding heaps of new features. It's all up from here!

Until next time friends 🍎