Skip to main content
Version: 4.x

Design Principles

  • 🎨  Customization. Every part of Vime should be optional, easily accessible and customizable. This is achieved by:

    • No shadow DOM so all components can be directly referenced and modified freely through the DOM or framework.
    • We provide all the building blocks for you to create your own UI.
    • CSS variables are available for all components so you can restyle anything you want.
    • Every single component is optional aside from the root vm-player component.
    • All component's core behaviour, style and function can be modified via properties and methods.
    • Multi-provider support so you're free to choose what type of media to play and where you host your content.

  • 🧰  Defaults. The more you customize something to fit your desired need/want, the more time and effort is required. For some this is not an option. Thus, we provide well-built and extendable defaults out of the box such as:

    • Light/dark themes.
    • Default controls for all devices and types of media.
    • Default settings menu that is provider-aware.

  • 🤗  User experience. At the end of the day, our ultimate goal as developers is to build products that our users/customers enjoy using, whilst solving a problem they face. Vime strives for great UX by:

    • Simple, clean and visually pleasing aesthetics that anyone can enjoy.
    • The ability to use the player at its full potential regardless of language, disability or device.
    • Intuitive default controls, shortcuts and iconography so users are not overwhelmed or left confused.
    • Multiple text tracks and captions support, so everyone can understand and enjoy your content.

  • 💻  Developer experience. We discussed the importance of a great user experience above, and for Vime that user is you, the developer. Vime strives for great DX by:

    • Providing a comprehensive player API. The player is at the root of Vime, thus it is the most interacted with component. It must contain a rich API for controlling the state of the player and playback of media.
    • A steep learning curve is time-consuming, and time is something we don't have enough of. Thus, we use web components which rely on technologies (HTML/CSS/JS) that every web developer is familiar with. In addition, we provide framework-specific bindings for some of the most popular frameworks, so you can get up and running even quicker.
    • Vime is built with TypeScript so you can enjoy type checking, code autocompletion, hints and snippets in your IDE.
    • Interacting with Vime components should be intuivite from the way they're named, composed and modified.
    • Great documentation is key for an awesome developer experience. All component properties, methods and events are documented. In addition, the documentation for this site is completely open-sourced and can be easily improved by anyone in the community, including you!

  • 🛠  Contributor experience. Vime wouldn't be possible without people donating their time and effort to making it what it is. Vime strives for great CX by:

    • Being open to all. No special requirements, anyone can be a contributor!
    • A detailed contributing guide has been created to get you from zero to PR.
    • There are many ways to contribute and they don't all involve writing code, we have some ideas on the next page.
    • We continuously strive for as little friction as possible for new contributors, everything is organized to help you get started quickly.
    • All the ugly and boring parts have been automated by our continous integration system (GitHub Actions). Simply clone, make changes and push!

  • 🧪  Testing. We've dedicated extra time and attention to ensuring Vime is tested as much as possible. Over 200+ unit tests, UI E2E tests, accessibility tests, and a provider test harness all ensure Vime is functioning correctly and up-to-standard. All package releases must go through our full suite of tests before being sent out into the wild.

Edit this page