mirax-player - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

index.js

@@ -6,6 +6,8 @@ //index.js - This is your package's entry point
 import { attach } from './dist/connector';
+import { progressColor } from './dist/progressColor';
+import { progressFrame } from './dist/progressFrame';
 
 // Export the VideoPlayer class
 export default Mirax;
-export { attach };
+export { attach, progressColor, progressFrame };
 
@@ -12,0 +14,0 @@

package.json

 {
   "name": "mirax-player",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A simple video player for react",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -16,2 +16,3 @@ # Mirax Player
 - [Usage](#usage)
+- [Colors](#colors)
 - [Features](#features)
@@ -118,3 +119,172 @@ - [License](#license)
 ``` 
+## Colors
 
+To change your color for progress bar and progress frame
+
+----------
+
+
+ const progressColorize = 'blue'; //change any color
+ const progressColorize = '#00ff00'; // hexadecimal colors supported
+
+ ------------------
+
+```js
+import Mirax, { attach, progressColor } from 'mirax-player';
+
+--------
+
+-------------
+keys:
+
+ const progressColorize = '';
+
+ 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 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:
+
+```js
+
+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
@@ -126,2 +296,3 @@
 - You can point and drag the timestamp in video time duration anywhere
+- You can change the color of progress bar and progress frame
 
@@ -128,0 +299,0 @@ ----------------------------------------------------

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17739

increased by38.78%

Number of package files

10

increased by25%

Lines of code

302

increased by12.69%

Number of lines in readme file

304

increased by128.57%

No dependency changes