vidify v0.0.14

🔗 🚀 Live Demo: Demo

✨ Features

• 📹 Video player component that provides consistent UI/UX on different browsers.
• 🎨 Super customizable layout.
• 📝 Provide tools for users to add annotations.
• 🔄 Vidify supports passing an array of video sources.
• 📱 Flexbox css with SVG icons. Mobile friendly.
• 🎨 Provide options for users to customize the primary color.
• ♿️ Accessibility supported, keyboards events supported.
• ✔️ Vidify offers all the essential features expected from a modern video player.
• 🛠️ Customize the control bar, progress bar, and more to match your a- pplication's design and user experience requirements.
• 🎮 Define states and actions to control Vidify with your own user interface elements.
• 📋 Vidify supports customizable ccontrol bar for enhanced user interaction.
• 💻 Written in TypeScript.

📦 Install

You can install Vidify via npm:

npm i vidify

Or using yarn:

yarn add vidify

🔨 Usage

import { VideoPlayer } from "vidify";

const MyVideoPlayer = ({ src }) => (
  <VideoPlayer src={src} autoplay className="my-video-player" />
);

export default MyVideoPlayer;

⌨️ Keyboard shortcuts (When video player focused)

🛠️ Props

🏷️ HTML Video Tag Native Attributes

More attributes details : Vidify props attributes

🛠️ Vidify Props

🎉 Event Props

🔄 Dynamic Source Switching with Tooltip Preview

Vidify supports passing an array of video sources (srcs) to enable dynamic source switching. This feature allows users to seamlessly switch between different video sources within the same player instance. Additionally, when hovering over the next or previous video button, Vidify displays a tooltip previewing the next or previous video. This enhancement provides users with a visual preview of upcoming content, enabling informed decisions when switching between videos.

import { VideoPlayer } from "vidify";

const videoSources = [
  "https://example.com/video1.mp4",
  "https://example.com/video2.mp4",
  "https://example.com/video3.mp4",
];

const MyVideoPlayer = () => (
  <VideoPlayer
    src={videoSources}
    controls
    autoplay
    className="my-video-player"
  />
);

export default MyVideoPlayer;

🎨 Customizable Primary Color

Vidify provides a 'primaryColor' prop that allows users to specify a custom primary color for the video player interface. This feature enables users to match the video player's appearance to their application's branding or design scheme.

import { VideoPlayer } from "vidify";

const MyVideoPlayer = () => (
  <VideoPlayer
    src="https://example.com/video.mp4"
    controls
    autoplay
    primaryColor="red"
    className="my-video-player"
  />
);

export default MyVideoPlayer;

🛠️ Control Bar and Progress Bar Customization

The controller prop in Vidify allows for fine-grained control over the visibility and customization of the control bar and progress bar. Users can choose from various options to tailor the video player interface according to their needs.

Option 1: Hide Control Bar and Progress Bar

Setting controller={false} hides both the control bar and progress bar, providing a minimalist video player interface.

Option 2: Custom Control Bar

Passing a function to the controller prop allows users to create their own custom control bar using React components. The function receives an actions object containing methods to control the video playback (e.g., play, pause).

controller={(actions, info) => (
  <div>
    <span onClick={actions?.play}>Play</span>
    <span onClick={actions?.pause}>Pause</span>
  </div>
)}

Option 3: Advanced Control Options

Users can provide an object to the controller prop to enable advanced control options. This object allows for granular control over individual components of the video player interface, such as the screenshot button, fullscreen button, and progress bar.

controller={{
  screenshot: {
    allow: true,
    style: { color: "red" },
    className: "custom-button",
  },
  fullscreen: false,
  progressBar: false,
  controlBar: (actions, info) => (
    <div style={{ display: "flex", columnGap: "10px" }}>
      <p>{info.currentTime} / {info.duration}</p>
      <button onClick={actions?.play}>Play</button>
      <button onClick={actions?.pause}>Pause</button>
      <p>Volume</p>
      <input
        type="range"
        onChange={(e) => actions?.setVolume(+e.target. value / 100)}
      />
      <button onClick={actions?.screenShot}  >ScreenShot</button>
      <button onClick={actions?.download}>Download</button>
    /div>
  ),
}}

Option 4: Custom Buttons

Users can add custom buttons to the control bar by providing an array of custom button objects. Each button object specifies the button's content and placement (either "left" or "right").

controller={{
  customButtons: [
    { content: <div>Button 1</div>, placement: "left" },
    { content: <div>Button 2</div>, placement: "right" },
  ],
}}

❤️ Support

If you've found Vidify useful and would like to support its ongoing development, you can donate via Buy Me a Coffee:

Your support is greatly appreciated! ☕️❤️

⌨️ Development

🚀 Follow these steps to clone and run Vidify locally:

$ git clone https://github.com/braiekhazem/Vidify.git
$ cd vidify
$ npm install
$ npm run dev  # for running the development server
# OR
$ npm run demo # for running the demo

Open your browser and visit http://localhost:3000 .

🤝 How to Contribute

Thank you for considering contributing to Vidify! Here's how you can help:

Opening Issues

If you encounter any bugs or have suggestions for improvements, please open an issue on GitHub. Be sure to include detailed information about the issue or suggestion, along with any relevant screenshots or code examples.

Pull Requests

We welcome contributions from the community! If you'd like to contribute code changes, enhancements, or new features, please follow these steps:

1. Fork the repository to your GitHub account.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure they are thoroughly tested.
4. Submit a pull request with a clear description of your changes and the problem they solve.
5. We'll review your pull request and provide feedback or merge it into the main branch.

Code Style

Please adhere to the existing code style and conventions when making changes to the codebase. This helps maintain consistency and readability across the project.

Feature Requests

If you have an idea for a new feature or improvement, feel free to open an issue to discuss it with the maintainers and community members. We're always interested in hearing your ideas!

By contributing to Vidify, you're helping to make it a better tool for everyone. Thank you for your support!

📜 License

Copyright 2024 Hazem braiek

Licensed under the Apache License, Version 2.0.
You may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.