Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mirax-player
Advanced tools
mirax-player - npm Package Compare versions
Comparing version 2.0.0-beta.9 to 2.0.0-beta.10
@@ -15,5 +15,2 @@ //index.js - This is your package's entry point | ||
| // Re-export the function as both default and named export | ||
| export { default as progressColor } from './dist/progressColor'; | ||
| export { default as progressFrame } from './dist/progressFrame'; | ||
| */ | ||
@@ -20,0 +17,0 @@ |
| { | ||
| "name": "mirax-player", | ||
| "version": "2.0.0-beta.9", | ||
| "version": "2.0.0-beta.10", | ||
| "description": "A light weight javascript video player", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
267
README.md
@@ -16,3 +16,2 @@ # Mirax Player | ||
| - [Usage](#usage) | ||
| - [Colors](#colors) | ||
| - [Features](#features) | ||
@@ -23,3 +22,3 @@ - [License](#license) | ||
| Mirax Player is javascript video player for react web application. | ||
| Mirax Player is a light-weight javascript video player. | ||
@@ -57,175 +56,29 @@ ------------ | ||
| Then use the attach from Mirax Player: | ||
| Then use it from Mirax Player: | ||
| ```js | ||
| import React, { useEffect, useState } from 'react'; | ||
| import Mirax, { attach } from 'mirax-player'; | ||
| import { mirax } 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; | ||
| const [isPlaying, setIsPlaying] = useState(false); | ||
| useEffect(() => { | ||
| const video = document.querySelector('.mirax'); | ||
| if (video) { | ||
| mirax(video, isPlaying, setIsPlaying); | ||
| } | ||
| }, [isPlaying]); | ||
| ``` | ||
| ## Colors | ||
| return ( | ||
| <div> | ||
| <div className='whatever'> | ||
| <video className="mirax" src="clip.mp4"></video> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| 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 | ||
| ------------ | ||
| ------------------ | ||
| ```js | ||
| import Mirax, { attach, progressColor } from 'mirax-player'; | ||
| ``` | ||
| -------- | ||
| ------------- | ||
| keys: | ||
| const progressColorize = ''; | ||
| ---------------- | ||
| before: | ||
| --------- | ||
| ```css | ||
| return () => { | ||
| }; | ||
| }, []); | ||
| ``` | ||
| ---------------- | ||
| after: | ||
| -------------- | ||
| ```css | ||
| const injectProgress = progressColor(progressColorize); | ||
| return () => { | ||
| document.head.removeChild(injectProgress); | ||
| }; | ||
| }, [ progressColorize ]); | ||
| ``` | ||
| -------------------- | ||
| example: | ||
| -------- | ||
| ```js | ||
| 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; | ||
@@ -236,67 +89,34 @@ | ||
| ``` | ||
| --------------- | ||
| You can also use both: progressColor and progressFrame | ||
| -------------- | ||
| -- | ||
| ------ | ||
| example: | ||
| You can you useRef in React hooks to make it minimal: | ||
| ----------- | ||
| ```js | ||
| import React, { useEffect, useState } from 'react'; | ||
| import Mirax, { attach, progressColor, progressFrame } from 'mirax-player'; | ||
| import React, { useEffect, useState, useRef } from 'react'; | ||
| import { mirax } 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 | ||
| const [isPlaying, setIsPlaying] = useState(false); | ||
| const videoRef = useRef(null); | ||
| 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(); | ||
| }); | ||
| useEffect(() => { | ||
| if (videoRef.current) { | ||
| mirax(videoRef.current, isPlaying, setIsPlaying); | ||
| } | ||
| }, [isPlaying]); | ||
| const injectProgress = progressColor(progressColorize); | ||
| const injectFrame = progressFrame(frameColorize); | ||
| return () => { | ||
| document.head.removeChild(injectProgress); | ||
| document.head.removeChild(injectFrame); | ||
| }; | ||
| }, [ progressColorize, frameColorize]); | ||
| return ( | ||
| <div> | ||
| <div className='whatever'> | ||
| <video ref={videoRef} className="mirax" src="clip.mp4"></video> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| 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; | ||
| ``` | ||
@@ -310,6 +130,9 @@ | ||
| - Play and Pause | ||
| - Responsive | ||
| - Can play videos (Portrait or Landscape) | ||
| - 9:16 dimension supported (Mobile video) | ||
| - 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 | ||
| - PIP supported (picture in picture) will play the clip even if leave the tab open new app | ||
@@ -316,0 +139,0 @@ ---------------------------------------------------- |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-46.9%
19094
- Number of package files
- decreased by-30%
7
- Lines of code
- decreased by-41.7%
418
- Number of lines in readme file
- decreased by-55.84%
140
No dependency changes