mirax-player - npm Package Compare versions

Comparing version 3.0.0-alpha.5 to 3.0.0-alpha.6

package.json

 {
   "name": "mirax-player",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "Mirax Player is a video player that is compatible with TypeScript and JavaScript for React, Vue, Angular and Svelte.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -161,4 +161,4 @@ <p align="center">
   const videoRef = useRef(null);
-  const playerTheme = "rgba(250, 149, 35, 0.9)";
-  const progressTheme = "blue";
+  const playerTheme = "rgba(250, 149, 35, 0.9)"; // change color here (you can use rgba or rgb or hexa or colorname)
+  const progressTheme = "blue"; // change color here (you can use rgba or rgb or hexa or colorname)
 
@@ -195,4 +195,4 @@ useEffect(() => {
   const videoRef = useRef<HTMLVideoElement>(null);
-  const playerTheme = "rgba(250, 149, 35, 0.9)";
-  const progressTheme = "blue";
+  const playerTheme = "rgba(250, 149, 35, 0.9)"; // change color here (you can use rgba or rgb or hexa or colorname)
+  const progressTheme = "blue"; // change color here (you can use rgba or rgb or hexa or colorname)
 
@@ -236,4 +236,4 @@ useEffect(() => {
     const videoRef = ref(null);
-    const playerTheme = "none";
-    const progressTheme = "orange";
+    const playerTheme = "none"; // change color here (you can use rgba or rgb or hexa or colorname)
+    const progressTheme = "orange"; // change color here (you can use rgba or rgb or hexa or colorname)
 
@@ -275,4 +275,4 @@ onMounted(() => {
     const videoRef = ref<HTMLVideoElement>(null);
-    const playerTheme = "none";
-    const progressTheme = "orange";
+    const playerTheme = "none"; // change color here (you can use rgba or rgb or hexa or colorname)
+    const progressTheme = "orange"; // change color here (you can use rgba or rgb or hexa or colorname)
 
@@ -306,5 +306,35 @@ onMounted(() => {
 
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { miraxplayer, miraxErrorHandler } from 'mirax-player';
 
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.css']
+})
 
+export class ExampleComponent implements OnInit {
+  
+  @ViewChild('video', { static: true }) video!: ElementRef<HTMLVideoElement>;
+  playerTheme = "rgba(228, 41, 82, 0.3)"; // change color here (you can use rgba or rgb or hexa or colorname)
+  progressTheme = "yellow"; // change color here (you can use rgba or rgb or hexa or colorname)
+  ngOnInit(): void {
+    this.initializeMiraxplayer();
+    this.handleMiraxError();
+  }
+  initializeMiraxplayer() {
+    if (this.video.nativeElement) {
+      miraxplayer(this.video.nativeElement, this.playerTheme, this.progressTheme);
+    }
+  }
+  handleMiraxError() {
+    if (this.video.nativeElement) {
+      miraxErrorHandler(this.video.nativeElement);
+    }
+  }
 
+}
+
+
+
 ```
@@ -317,4 +347,8 @@ --------------------------------------
 
+<div>
+  <div class="whatever">
+    <video #video class="mirax-player" src="assets/clip.mp4"></video>
+  </div>
+</div>
 
-
 ```
@@ -327,4 +361,25 @@ ## Svelte
 
+<script>
+    import { onMount } from 'svelte';
+    import { miraxplayer, miraxErrorHandler } from 'mirax-player';
 
+  let video;
+  const playerTheme = "none"; // change color here (you can use rgba or rgb or hexa or colorname)
+  const progressTheme = "yellow"; // change color here (you can use rgba or rgb or hexa or colorname)
 
+  // reactive statement
+  $: if(video) { 
+    miraxplayer(video, playerTheme, progressTheme);
+    miraxErrorHandler(video); 
+  }
+</script>
+
+<div>
+  <div class='whatever'>
+    <video bind:this={video} class="mirax-player" src="clip.mp4">
+      <track kind="captions" src="" label="English" default>
+    </video>
+  </div>
+</div>
+
 ```
@@ -336,4 +391,25 @@ Typescipt: Svelte
 
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { miraxplayer, miraxErrorHandler } from 'mirax-player';
 
+  let video: HTMLVideoElement | undefined;
+  const playerTheme: string = "none";
+  const progressTheme: string = "yellow";
 
+  // reactive statement
+  $: if(video) {
+    miraxplayer(video, playerTheme, progressTheme);
+    miraxErrorHandler(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>
+
 ```
@@ -397,3 +473,3 @@
 - Play and Pause
-- Can play multiple videos
+- Easy to use 
 - Responsiveness
@@ -400,0 +476,0 @@ - Automatically hides the player bar

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

42764

increased by7.34%

Number of lines in readme file

490

increased by18.36%

No dependency changes