mirax-player - npm Package Compare versions

Comparing version 3.0.0-beta.3 to 3.0.1

package.json

 {
   "name": "mirax-player",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.1",
   "description": "Mirax Player is an adaptable video player and embedding solution that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -547,3 +547,3 @@ <p align="center">
 -----
-examples: you can copy and paste to your component
+Examples of themes:
 ---------
@@ -550,0 +550,0 @@ ```js

src/angular/TypescriptComponent.md

@@ -1,2 +0,2 @@
-```js
+```ts
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@@ -3,0 +3,0 @@ import { miraxplayer } from 'mirax-player';

src/angular/TypescriptEmbed.md

@@ -1,2 +0,2 @@
-```js
+```ts
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
@@ -3,0 +3,0 @@ import { miraxEmbed } from 'mirax-player';

src/react/TypescriptComponent.md

@@ -1,2 +0,2 @@
-```js
+```ts
 import React, { useEffect, useRef } from "react";
@@ -3,0 +3,0 @@ import { miraxplayer } from 'mirax-player';

src/react/TypescriptEmbed.md

@@ -1,34 +0,49 @@
-```js
-import React, { useEffect, useRef } from "react";
+```ts
+import React, { useEffect, useRef, useMemo } from "react";
 import { miraxEmbed } from 'mirax-player';
-const embedPlayerReady = (event: any): void => {
+
+interface YouTubePlayerEvent {
+  target: {
+    playVideo: () => void;
+  };
+}
+
+const embedPlayerReady = (event: YouTubePlayerEvent): void => {
   event.target.playVideo();
 };
+
 const ExampleComponent: React.FC = () => {
   const embedVideoRef = useRef<HTMLDivElement | null>(null);
-  const youtubeParams = {
-    width: 1000,
-    height: 660,
-    playerVars: {
-      controls: 1,
-      autoplay: 0,
-      fs: 1,
-      iv_load_policy: 3,
-      cc_load_policy: 1
-    },
-    events: { onReady: embedPlayerReady }
-  };
-  const vimeoParams = {
-    width: 1300,
-    height: 760,
-    autopause: 0,
-    controls: true,
-    responsive: true 
-  };
+
+  const youtubeParams = useMemo(() => {
+    return {
+      width: 640,
+      height: 360,
+      playerVars: {
+        controls: 1,
+        autoplay: 0,
+        fs: 1,
+        iv_load_policy: 3,
+        cc_load_policy: 1,
+      },
+      events: { onReady: embedPlayerReady },
+    };
+  }, []);
+
+  const vimeoParams = useMemo(() => {
+    return {
+      width: 640,
+      height: 360,
+      autopause: 0,
+      controls: true,
+    };
+  }, []);
+
   useEffect(() => {
     miraxEmbed(embedVideoRef.current, youtubeParams, vimeoParams);
-  }, []);
+  }, [youtubeParams, vimeoParams]);
+
   return (
     <div className="embed_clip">
-      <div ref={embedVideoRef} mirax-embed-video="https://vimeo.com/217499569">
+      <div  ref={embedVideoRef} mirax-embed-video="https://vimeo.com/217499569">
       </div>
@@ -35,0 +50,0 @@ </div>

src/svelte/TypescriptComponent.md

@@ -1,2 +0,2 @@
-```js
+```ts
 <script lang="ts">
@@ -3,0 +3,0 @@ import { onMount } from 'svelte';

src/svelte/TypescriptEmbed.md

@@ -1,3 +0,47 @@
-```js
+```ts
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { miraxEmbed } from 'mirax-player';
 
+  let embedVideoRef: HTMLDivElement | null = null;
+
+  interface YouTubePlayerEvent {
+    target: {
+      playVideo: () => void;
+    };
+  }
+
+  function embedPlayerReady(event: YouTubePlayerEvent): void {
+    event.target.playVideo();
+  }
+
+  const youtubeParams = {
+    width: 640,
+    height: 360,
+    playerVars: {
+      controls: 1,
+      autoplay: 0,
+      fs: 1,
+      iv_load_policy: 3,
+      cc_load_policy: 1,
+    },
+    events: { onReady: embedPlayerReady },
+  };
+
+  const vimeoParams = {
+    width: 640,
+    height: 360,
+    autopause: 0,
+    controls: true,
+  };
+
+  onMount(() => {
+    miraxEmbed(embedVideoRef, youtubeParams, vimeoParams);
+  });
+</script>
+
+<div class="embed_clip">
+  <div bind:this={embedVideoRef} mirax-embed-video="https://vimeo.com/217499569">
+  </div>
+</div>
 ```

src/vue/TypescriptComponent.md

@@ -1,2 +0,2 @@
-```js
+```ts
 <template>
@@ -3,0 +3,0 @@ <div class="whatever">

src/vue/TypescriptEmbed.md

@@ -1,3 +0,57 @@
-```js
+```ts
+<template>
+  <div class="embed_clip">
+    <div ref="embedVideoRef" mirax-embed-video="https://vimeo.com/217499569"></div>
+  </div>
+</template>
 
+<script lang="ts">
+import { ref, onMounted, computed, Ref } from 'vue'; 
+import { miraxEmbed } from 'mirax-player';
+
+interface YouTubePlayerEvent {
+  target: {
+    playVideo: () => void;
+  };
+}
+
+export default {
+  setup() {
+    const embedVideoRef: Ref<HTMLDivElement | null> = ref(null);
+
+    function embedPlayerReady(event: YouTubePlayerEvent) {
+      event.target.playVideo();
+    }
+    const youtubeParams = computed(() => ({
+      width: 640,
+      height: 360,
+      playerVars: {
+        controls: 1,
+        autoplay: 0,
+        fs: 1,
+        iv_load_policy: 3,
+        cc_load_policy: 1
+      },
+      events: { onReady: embedPlayerReady }
+    }));
+
+    const vimeoParams = computed(() => ({
+      width: 640,
+      height: 360,
+      autopause: 0,
+      controls: true
+    }));
+
+    onMounted(() => {
+      miraxEmbed(embedVideoRef.value, youtubeParams.value, vimeoParams.value);
+    });
+
+    return {
+      embedVideoRef,
+      youtubeParams,
+      vimeoParams
+    };
+  }
+};
+</script>
 ```

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

68350

increased by3.52%

Number of low quality alerts

1

decreased by-50%

No dependency changes