Player Release 0.6: Community Skin (June 2023)

[mihar-22]

👋

You know what time it is! But first a word from our breaking changes...

Breaking Changes

• Media icons are now optional and imported separately, for React this is from @vidstack/react/icons. See the icons setup. Do note, you don't need this package for the Community Skin.
• To improve performance we've removed all CSS variables on the player such as --media-current-time, --media-buffered, and --media-duration. You can set them yourself if needed by subscribing to the media store. The media-buffered-percent CSS variable is now available on the time slider.
• To improve performance we've removed --slider-fill-value, --slider-fill-rate, --slider-pointer-value, and --slider-pointer-rate. These variables were redundant and can be added back directly in CSS if you need it using calc.
• Some default size and styles have been slightly adjusted. The main one that might affect you if you were using default styles is button sizes have changed from 48px to 40px.

Community Skin 🎉

CLICK HERE TO PREVIEW SKIN

Check out our preview video showcasing the skin on Twitter.

We're so excited to finally release the Community Skin which we shared all the way back at the end of last year in November! It was harder to build than originally expected. We had all the components or lego pieces but there was still challenges around different media types (audio/video), mobile/desktop, and different browsers (looking at you iOS Safari!).

We wanted to make sure we didn't just provide a simple responsive design, but a clean and seamless user experience that adapted to player conditions. On mobile, we reorganized controls, added tap highlights, popup menus, swipe gesture for scrubbing from anywhere on the screen, tap to toggle controls, seek gestures that don't force controls to show, chapters in fullscreen landscape, and more. Interestingly, we found audio to be harder than video because of the limited space, but we still worked through and included chapter titles, chapters in the slider, and even captions!

I'm incredibly proud of what we've built for the community and I can't wait for you try it out and give us feedback. Don't fear if there's any issues or bugs - it's expected some things will go wrong. Reach out on Discord so we can try and resolve it :)

👉 See the updated installation guide on how to get started with the Community Skin!

Player Data Attributes (NEW)

Some new data attributes are set on the player:

• data-bp-x="sm": Horizontal breakpoint that updates based on the player container width.
  • sm (small): x < 600px
  • md (medium): 600px <= x < 980px
  • lg (large): x >= 980px
• data-bp-y="sm": Vertical breakpoint that updates based on the player container height.
  • sm (small): x < 380px
  • md (medium): 380px <= x < 600px
  • lg (large): x >= 980px
• data-preview: Set on the player when the time slider is being interacted with.
• data-iphone: Set on the player when the current device is an iphone.
• data-touch: Set on the player when the current device input is touch.
• data-orientation="landscape": Updated on the player to reflect the current screen orientation,
  values can be portrait or landscape.

Idle Gesture (NEW)

A new gesture action is available for toggling the user idle state. This is generally used on mobile to toggle showing controls when the player is touched.

<MediaGesture event="pointerup" action="toggle:user-idle" />

What's Improved?

• We rely on some broad CSS selectors such as [data-media-button] to style all buttons and sliders since they have different tag names. We've scoped all such selectors to the player to improve performance.
• Defualt component styles are adjusted based on player container size instead of the viewport now using the new data-bp-x and data-bp-y attribtues.
• Quality menu now allows for duplicate heights with different bitrates which are now also displayed next to the quality.
• Drastically improved slider performance. Previously, the slider thumb dragging especially when chapters were active was lagging and in fullscreen affecting the entire player. Now it's zippy fast!
• Dropped .cjs exports and made media-icons optional which reduced install size from 4.3MB to 2.2MB.

What's Fixed?

• A major memory leak was occurring as certain player components and the underlying provider was not being destroyed. This has now been resolved.
• Menus now portal to the document body when they're a popover so they shouldn't fall behind other elements on the page anymore.
• User idle tracking is now paused when interacting with player controls such as the time slider or menus to prevent the UI dissapearing.
• The volume slider now has aria-hidden='true' set and is hidden when it can't be updated (e.g., mobile).
• The fullscreenOrientation property now works as expected on mobile to rotate the screen when entering fullscreen.
• The menu item hint text will not be overriden if there's no value so you can manually provide a value.
• Seeking via numpad keys will not work when holding down the meta key so changing browsers tabs should still work.
• Captions menu now filters text tracks to only those that have a kind of captions or subtitles when checking if it should be disabled.

Next Steps

Join our Discord if you run into any issues and we're happy to try and resolve them quickly. There's generally a small period between GitHub releases and our official announcements where we take time to resolve issues. Your feedback would be appreciated!

We're not done with Community Skin as we have additional animations and enhancements planned but we're taking a moment in 0.7 to work on React. We'll be completely revamping our React components with improved performance, cleaner APIs, support for Next.js app/ directory (i.e., Server Components), and more! It's going to be a lot of work, but we want to put time into make sure our React integration is of the highest quality. It'll most likely mean splitting away from Web Components for React but TBD. I'll add more notes in Discord as we explore, stay tuned!

Until next time friends 🍎

[trueChazza]

Awesome work! Been hanging out for this so very keen to give it a run. Thank you for this great library 🚀
Congrats on the release!

[mihar-22]

Thanks @trueChazza! Let us know if you have any issues :)

[thomaskant]

Great work guys! Seems awesome 🔥

[mihar-22]

Thanks @thomaskant!

[keytrap-x86]

Thank you for your work. Now it's starting to get really interesting. I was waiting for that community skin

[Hilary-Okemeziem]

Please I'm using the community skin but on the mobile view, user can't scroll when they touch the video player, to scroll down or up, user has to use other part of the screen which isn't best for user experience

Please how do I fix this pointer event issue?

[henrybabbage]

on the mobile view, user can't scroll when they touch the video player, to scroll down or up, user has to use other part of the screen which isn't best for user experience

Noticed this too: +1