mirax-player - npm Package Compare versions

Comparing version 2.3.1-alpha to 2.3.2

package.json

 {
   "name": "mirax-player",
-  "version": "2.3.1-alpha",
+  "version": "2.3.2",
   "description": "Mirax Player is a video player has compatibility of typescript and javascript for React, Vue, Angular and Svelte.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -8,3 +8,3 @@ <p align="center">
 # Mirax Player 
-[![Latest npm version](https://img.shields.io/badge/npm_%20-v_2.3.0-%23CB3837.svg)](https://www.npmjs.com/package/mirax-player)
+[![Latest npm version](https://img.shields.io/badge/npm_%20-v_2.3.2-%23CB3837.svg)](https://www.npmjs.com/package/mirax-player)
 
@@ -55,3 +55,3 @@ </div>
 ------------
-Compatibility for scripts and coding syntax:
+Supported scripts:
 ---------
@@ -80,3 +80,2 @@ ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
 
-
 ### Controllers
@@ -110,12 +109,12 @@
 
-// for react (video file stored: public/clip.mp4)
+// for React (video file stored: public/clip.mp4)
   const video = useRef(null);
 //
-// for vue (video file stored: public/clip.mp4)
+// for Vue (video file stored: public/clip.mp4)
     const video = ref(null);
 //
-// for angular (video file stored: src/assets/clip.mp4)
-  @ViewChild('video', { static: true })
+// for Angular (video file stored: src/assets/clip.mp4)
+  @ViewChild('video', { static: true }) video!: ElementRef<HTMLVideoElement>;
 //
-// for svelte (video file stored: public/clip.mp4)
+// for Svelte (video file stored: public/clip.mp4)
    let video;
@@ -125,6 +124,5 @@ //
 ```
+
 ## React
 
-In your React component
-------------------
 You need to use useRef in React hooks:
@@ -144,3 +142,3 @@ -----------
   }, []);
-  
+
   return (
@@ -184,4 +182,2 @@ <div className='whatever'>
 ## Vue
-
-In your Vue component
 ------------------
@@ -258,4 +254,2 @@ You need to use ref in Vue attributes:
 
-In your Angular component
-
 ------------------
@@ -277,14 +271,15 @@
 })
+
 export class ExampleComponent implements OnInit {
+  
   @ViewChild('video', { static: true }) video!: ElementRef<HTMLVideoElement>;
-
   ngOnInit(): void {
-    this.initializeMirax();
+    this.initializeMiraxplayer();
   }
-
-  initializeMirax() {
+  initializeMiraxplayer() {
     if (this.video.nativeElement) {
-      new miraxplayer(this.video.nativeElement).init();
+      miraxplayer(this.video.nativeElement);
     }
   }
+
 }
@@ -308,10 +303,5 @@
 
-
 ```
 ## Svelte
 
-In your Svelte component
-
-------------------
-
 You need to use bind:this in svelte:
@@ -322,21 +312,22 @@ -----------
 <script>
-  import { onMount } from 'svelte';
-  import { miraxplayer } from 'mirax-player';
+    import { onMount } from 'svelte';
+    import { miraxplayer } from 'mirax-player';
 
-  let video;
-
-  onMount(() => {
-    if (video) {
-      miraxplayer(video);
-    }
-  });
+    let video;
+  
+    onMount(() => {
+      if (video) {
+        const miraxPlayer = miraxplayer(video);
+      }
+    });
 </script>
+  
+  <div>
+    <div class='whatever'>
+      <video bind:this={video} class="mirax-player" src="clip3.mp4">
+        <track kind="captions" src="" label="English" default>
+      </video>
+    </div>
+  </div>
 
-<div class='whatever'>
-  <video bind:this={video} class="mirax-player" src="clip.mp4">
-    <track kind="captions" src="" label="English" default>
-  </video>
-</div>
-
-
 ```
@@ -352,7 +343,7 @@ Typescipt: Svelte
 
-  let video: HTMLVideoElement;
+  let video: HTMLVideoElement | undefined;
 
   onMount(() => {
     if (video) {
-      miraxplayer(video);
+      const miraxPlayer = miraxplayer(video);
     }
@@ -362,14 +353,13 @@ });
 
-<div class='whatever'>
-  <video bind:this={video} class="mirax-player" src="clip.mp4">
-    <track kind="captions" src="" label="English" default>
-  </video>
+<div>
+  <div class='whatever'>
+    <video bind:this={video} class="mirax-player" src="clip.mp4">
+      <track kind="captions" src="" label="English" default>
+    </video>
+  </div>
 </div>
 
+
 ```
 
-
-
-
-----------
 --------------------------------------
@@ -512,3 +502,13 @@
 You have freedom to set a theme color for free.
-----------------------------
+
+
+
+Color Types | Color syntax | Example | Opacity Range |  Appearance
+---------- |  --------- | ---------------- | -------------------- | ---------------
+`RGBA` | rgba() | rgba(255,0,0, 0.5) | `0.1 to 0.9`  or  `0 to 1` | Red half transparency
+`RGB`  |rgb() | rgb(255, 0, 0) | `none` | Red
+`HEXA` | # | #ff0000| `none` | Red
+`COLORNAME` | colorname | red | `none` | Red
+-------------
+
 To change color and theme, just add to your css file
@@ -533,4 +533,8 @@ ----------
 ---------
--note always put !important at the end of statement.
+```bash
 
+- note always put !important at the end of statement.
+
+```
+
 ```css
@@ -554,14 +558,3 @@
 ---------------------------
-Color css syntax supported:
-------
-Transparency color mode:
-- rgba() -> means have opacity  add: !important;
 
---------
-Solid color mode:
-- rgb() -> means no opacity  add: !important;
-- hexa  -> starts with # symbol ex. #00ff00  add: !important;
-- colorname -> specific name:  ex. red, blue, purple add: !important; 
-
-----------------
  if you want pure transparent, mirax-theme only:
@@ -568,0 +561,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41318

increased by0.04%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

663

decreased by-1.04%

No dependency changes