mirax-player

Mirax Player

Table of Contents

• Description
• Installation
• Usage
• Colors
• Features
• License

Description

Mirax Player is a simple video player for react web application.

https://www.npmjs.com/package/mirax-player

Installation

To install the Mirax Player, you can use the following npm command:

npm install mirax-player

How to use

You can apply it in react app

example : location of video file public/clip.mp4

Usage

In you React component

Then use the attach from Mirax Player:

import React, { useEffect, useState } from 'react';
import  Mirax, { attach }  from 'mirax-player';

const ExampleComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  useEffect(() => {
    const videoElement = attach('.whatever'); 
    // you can declare any variable here starts with . (known as class selector)
    // find className="whatever" src="clip.mp4"
    const options = {
      playPauseBtn: '.play-pause-btn',
      volumeSlider: '.volume-slider',
      progressBar: '.progress-bar',
      currentTimeStamp: '.current-time',
      durationTimeStamp: '.duration-time',
      fullscreenBtn: '.fullscreen-btn',
    };

    const videoPlayer = new Mirax(videoElement, options);
    // Listen for the "timeupdate" event to update time values
    videoElement.addEventListener('timeupdate', () => {
      videoPlayer.updateCurrentTimeAndDuration();
    });
    return () => {};
  }, []);

  const togglePlayPause = () => {
    setIsPlaying(prevIsPlaying => {
      const video = attach('.whatever'); // Can edit class selector
      if (prevIsPlaying) {video.pause();} else {video.play();}
      return !prevIsPlaying;
    });
  };

  return (
    <div className="video-player">
      <video className="whatever" src="clip.mp4"></video>
      <div className="controls">
       <div className="volume-icon"><div className="speaker"></div>
        </div>
        <button className="play-pause-btn" onClick={togglePlayPause}>{isPlaying ? 'Pause' : 'Play'}
        </button>
        <input type="range" className="volume-slider" min="0" max="1" step="0.01"defaultValue="1"/>
        <progress className="progress-bar" min="0" max="100" value="0"></progress>
        <div className="current-time"></div>
        <div className="duration-time"></div>
        <button className="fullscreen-btn">Fullscreen</button>
      </div>
    </div>
  );
};

export default ExampleComponent;

Colors

To change color for progress bar and progress frame

const progressColorize = 'blue'; //change any color

const progressColorize = '#00ff00'; // hexadecimal colors supported

If you want to set as default color just leave it empty:

const progressColorize = ''; //default color

const progressFrame = ''; //default color

import Mirax, { attach, progressColor } from 'mirax-player';

--------

-------------
keys:

 const progressColorize = '';

 const injectProgress = progressColor(progressColorize);
    return () => {

      document.head.removeChild(injectProgress);
 
    };
  }, [progressColorize ]);

example:

import React, { useEffect, useState } from 'react';
import Mirax, { attach, progressColor } from 'mirax-player';



const VideoPlayerComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const progressColorize = '';

  useEffect(() => {
    const videoElement = attach('.whatever');
    const options = {
      playPauseBtn: '.play-pause-btn',
      volumeSlider: '.volume-slider',
      progressBar: '.progress-bar',
      currentTimeStamp: '.current-time',
      durationTimeStamp: '.duration-time',
      fullscreenBtn: '.fullscreen-btn',
    };

    const videoPlayer = new Mirax(videoElement, options);

    // Listen for the "timeupdate" event to update time values
    videoElement.addEventListener('timeupdate', () => {
      videoPlayer.updateCurrentTimeAndDuration();
    });

    const injectProgress = progressColor(progressColorize);
    return () => {

      document.head.removeChild(injectProgress);
 
    };
  }, [progressColorize ]);

  const togglePlayPause = () => {
    setIsPlaying(prevIsPlaying => {
      const video = attach('.whatever');
      if (prevIsPlaying) {
        video.pause();
      } else {
        video.play();
      }
      return !prevIsPlaying;
    });
  };

  return (
    <div className="video-player">
    </div>
  );
};

export default VideoPlayerComponent;

You can also use both: progressColor and progressFrame

example:

import React, { useEffect, useState } from 'react';
import Mirax, { attach,  progressColor,  progressFrame } from 'mirax-player';


const VideoPlayerComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const progressColorize = 'white'; //change color here
  const frameColorize = '#ff4500'; //change color here

  useEffect(() => {
    const videoElement = attach('.whatever');

    const options = {
      playPauseBtn: '.play-pause-btn',
      volumeSlider: '.volume-slider',
      progressBar: '.progress-bar',
      currentTimeStamp: '.current-time',
      durationTimeStamp: '.duration-time',
      fullscreenBtn: '.fullscreen-btn',
    };

    const videoPlayer = new Mirax(videoElement, options);

    // Listen for the "timeupdate" event to update time values
    videoElement.addEventListener('timeupdate', () => {
      videoPlayer.updateCurrentTimeAndDuration();
    });


    const injectProgress = progressColor(progressColorize);
    const injectFrame = progressFrame(frameColorize);
    return () => {
      document.head.removeChild(injectProgress);
      document.head.removeChild(injectFrame);
    };
  }, [progressColorize, frameColorize ]);

  const togglePlayPause = () => {
    setIsPlaying(prevIsPlaying => {
      const video = attach('.whatever');
      if (prevIsPlaying) {
        video.pause();
      } else {
        video.play();
      }
      return !prevIsPlaying;
    });
  };

  return (
    <div className="video-player">
    
    </div>
  );
};

export default VideoPlayerComponent;

Features

• Play and Pause
• Fullscreen
• Adjust the volume (low or high)
• You can point and drag the timestamp in video time duration anywhere
• You can change the color of progress bar and progress frame

License

MIT