search

vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.76k stars 154 forks source link

🎙️ Vime 2.0 #51

Closed mihar-22 closed 4 years ago

mihar-22 commented 4 years ago

Vime 2.0

Introduction

This "issue" is to layout my thoughts and plans for Vime 2 and for any community feedback. I'd love to hear from people who've actually tried Vime 1 and what they thought (especially what they hated), and what they'd love to see in a media player library.

In all honesty it was my first-time building out a "larger" front-end library. I did it at first because I needed the player for another project and I wasn't happy with existing solutions by modern standards. That motivation slowly transformed into me loving the JS ecosystem and exploring it. I think as most do, I made a lot of mistakes and over-complicated the library on my "first attempt" (not counting few rewrites). Looking back on it now I just keep shaking my head haha. I plan to remedy those mistakes in the next release.

Work will commence on the v2 branch.

Goals

  1. Improved developer experience interacting with the library as a consumer and contributor.

  2. Maintain great end-user experience by focusing on: aesthetics, accessibility, i18n and UI responsiveness.

  3. Component/s API simplification and closer to native DOM implementation (Eg: Subscriptions -> Events).

  4. Maintain customization and configuration but in a much simpler form.

  5. Make the library easier to maintain.

Plan

Foundation

I think one move that would actually hit all my goals is migrating from Svelte to Stencil. This will provide us with:

To elaborate a little more ... Svelte is built to be general purpose. It's not aimed specifically at building applications (Sapper aims to solve this part), nor libraries. It's easy to adopt/learn and just get shit done with. These are all reasons to absolutely love it but it also means it's not made for all use cases. It doesn't cover the tedious elements of maintaining a library of which some are mentioned above. TypeScript support is also poor and probably always will be because of the nature of the library + SFCs, similarly to how it feels hacky or unnatural in Vue.

I really really enjoyed Svelte but in a simple trade-off I have to let it go for now :( But ... it's not all bad news! Lucky for us Svelte has complete web component support!

Browsers

The following browsers will be supported:

Existing Packages

I think all the separate packages, names and features in Vime 1 are confusing. All existing packages will be merged into a single package called @vime/core.

Core API

The core API will be available on the root media player component vime-player which is exported from @vime/core and it will reside in packages/core.

The following props will also be included:

The following methods will also be included:

Example

<vime-player>
 <!-- ... --->
</vime-player>

Providers

All providers will follow the convention vime-provider-x (vime-provider-youtube) ~for the core provider and vime-lite-x (vime-lite-youtube) for an embed~. They will be exported from @vime/core and reside in packages/core.

A more detailed specification should exist in the future for the provider interface.

Examples

<vime-player>
  <vime-provider-youtube videoId="1y2xOj4QN6Q" />
</vime-player>

Plugins

All plugins will follow the convention vime-plugin-x (vime-plugin-localstorage). They will be exported from @vime/core and reside in packages/core.

Example

<vime-player>
  <vime-plugin-chromecast />
</vime-player>

UI Customization

All UI components will follow the convention vime-x (vime-controls). They will be exported from @vime/core and reside in packages/core.

Example

<vime-player>
  <!-- ... -->

  <vime-controls>
     <vime-control icon="play.svg" />
  </vime-controls>
</vime-player>

Integrations

Seperate packages for each integration will be exported from @vime/x (@vime/react) and reside in packages/x (packages/react).

Vime 2 will aim to support the following environments with the help of Stencil:

Testing

All components will be tested. E2E tests will be preferred over unit tests but we'll see. I'm interested in creating a test harness to ensure all providers follow a strict flow of events when playing media, seeking etc.

Site

References

szkosma commented 4 years ago

I'm using vime in production on svelte project, so will be watching this with interest. I think the simplification of the packages available is a good idea, and the move to webcomponents/Stencil is interesting, though I hope your experience with it will be better than mine!

mihar-22 commented 4 years ago

Hey that's awesome @secretcaptain. How's Vime 1 been for you? What'd you struggle with when using Stencil, hit any limitations?

mihar-22 commented 4 years ago

Update

New Example

<!-- Core API will be available on this component. You can replace youtube with html5, dailymotion, vimeo, hls or dash. -->
<vime-youtube videoId="DyTCOwB0DVw">
  <vime-controls>
    <vime-control icon="#playIcon" />
    <!-- ... -->
  </vime-controls>

  <vime-plugins>
    <vime-plugin-chromecast />
    <vime-plugin-localstorage />
  </vime-plugins>
</vime-youtube>
mihar-22 commented 4 years ago

GitHub project has been created to manage tasks and track progression towards Vime 2. If you're interested then you can follow along here -> https://github.com/vime-js/vime/projects/2.

szkosma commented 4 years ago

Hey that's awesome @secretcaptain. How's Vime 1 been for you? What'd you struggle with when using Stencil, hit any limitations?

Overall it's been great! I was looking for a lightweight wrapper around the Vimeo and YouTube players and vime fits the bill perfectly. My only two wishes are video aspect ratio detection (where possible, Vimeo is easy since it comes in the oEmbed JSON but YouTube I think is a bit trickier) and some more control over the lazy loading parameters, but not a big one.

My experience with Stencil (albeit a little while ago, maybe it's improved) was good overall, but I ran into weird bugs with events not firing when they should and ultimately gave up on it. Lots of people obviously have great experiences with it, so take it with a grain of salt. I think think using webcomponents for this library is a solid idea overall. Will be watching 2.0 with interest!

danangtamtomo commented 4 years ago

Looking forward for 2.0! I am really convinced after seeing how simple the API and the documentation of this library. I would like to use this library in production. Svelte has released TypeScript support yesterday. What do you think about it?

mihar-22 commented 4 years ago

Hey @danangtamtomo glad to hear someone is looking forward to it, it's been hard work but I'm getting there :) If you have any other feedback/requests feel free to hit me with it. I'm looking at the blog post now and it seems pretty sweeeeeet. I have to try it out before I give any feedback but this

You get autocompletion hints and type-checking as you're writing components, even in expressions inside markup

excites me the most. I might have been wrong about TS always being awkward in Svelte like Vue 2.

ohbob commented 4 years ago

loop isn't working properly, after first loop image pops up on YouTube for example and then just sound goes with out the video. I would love to see disappearing any indications of YouTube at all (youtube logo in the corner, thumbnails after video ends), posibility to stop the video on the last image of the video or setup your own image after ending. Same for vimeo. Really looking forward to 2.0

mihar-22 commented 4 years ago

Looping should work perfectly in Vime 2, it's been tested this time. We can't prevent the YouTube logo and thumbnails because there's no option to do so and we can't change the CSS inside the iframe the embed is loaded in. Figuring out how to stop the video before the last frame would be difficult but we could it as an option. Maybe you can specify a stop time and provide an custom ending poster or something. I'll keep it in mind after I release 2.0, if I forget please create a new issue and we'll address it :)

ohbob commented 4 years ago

almost forgot, supper important - need to be able to setup hiding controls if mouse is not over player and even if it is a timeout so they would disappear. Current control times are too long.

ohbob commented 4 years ago

possibility to set parameter loading="lazy" on the iframe.

mr-islam commented 4 years ago

I've been following the project for v2, and I'm super amazed by the pace and consistency of your work @mihar-22 🤩

Just wanted to say a few words of appreciation now that you're near the finish line!

mihar-22 commented 4 years ago

That's super kind of you @mr-islam, I appreciate it. Ye very close, I think everything should be wrapped up in a few days at most.

mihar-22 commented 4 years ago

👋

For anyone that's keeping any eye, apologies for the delayed release. I went off track but I've been improving framework integrations.

Going forward I'm going to:

Cheers 👍

mihar-22 commented 4 years ago

Good news guys... I'm finally done with Vime 2! No more crazy API changes, everything should be smoothed out and all the documentation is up at https://vimejs.com. Feel free to jump in and use it whenever you like. I really hope it meets your expectations, and I hope it's a truly productive tool when working on the frontend with media players. There's of course many features we can add, and bugs to fix but we can iron those out over time. For now, I'd love to hear feedback on the docs and your experience using Vime 2. You can either open an issue or join the new discord channel to talk about it. Sorry again for the huge delay, I got side-tracked here and there but owell we made it 🎉  🚀  🥳