mirax-player

Mirax Player

---

---

Table of Contents

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

Description

Mirax Player is javascript 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 videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });
      return () => {
      };
    }, []);
    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="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 = '';

---

before:

return () => {
      };
    }, []);

---

after:

---

 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 ExampleComponent = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const progressColorize = 'red'; // try put #00ff00 
    useEffect(() => {
      const videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });

      const injectProgress = progressColor(progressColorize);
      return () => {
        document.head.removeChild(injectProgress);
      };
    }, [progressColorize]);
    
    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="fullscreen"></button>
        </div>
      </div>
    );
  };
export default ExampleComponent;

---

You can also use both: progressColor and progressFrame

example:

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

const ExampleComponent = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const progressColorize = 'purple'; //change color here
    const frameColorize = '#ff4500'; //change color here
     //to set default: const frameColorize = ''; no value

    useEffect(() => {
      const videoAttach = attach('.my-video');
      const miraxController = { 
        playButton: '.play-button',
        volume: '.volume',
        fullscreen: '.fullscreen',
        progressBar: '.progress-bar',
        currentTime: '.current-time',
        timeDuration: '.time-duration',
      };
      const videoPlayer = new Mirax(videoAttach, miraxController);
        videoAttach.addEventListener('timeupdate', () => {
        videoPlayer.updateCurrentTimeAndDuration();
      });

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

    const playerButton = () => {
      setIsPlaying(prevIsPlaying => {
        const video = attach('.my-video');
        if (prevIsPlaying) {video.pause(); } else {video.play();}
        return !prevIsPlaying;
      });
    };
  
    return (
      <div className="video-player">
        <video className="my-video" src="clip.mp4"></video>
        <div className="control">
         <div className="volume-icon"><div className="vol"></div></div>
          <button className="play-button" onClick={playerButton}>{isPlaying ? 'Pause' : 'Play'}
          </button>
          <input type="range" className="volume"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="time-duration"></div>
          <button className="fullscreen"></button>
        </div>
      </div>
    );
  };
export default ExampleComponent;

---

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