mirax-player - npm Package Compare versions

Comparing version 6.0.0-beta.1 to 6.0.0-beta.4

index.js

@@ -1,4 +0,5 @@
-//index.js - This is your package's entry point
+//index.js - This is package's entry point
 
 export { default as embed } from './dist/miraxEmbedder';
+export { default as miraxPlayer } from './dist/MiraxPlayer';
 
@@ -5,0 +6,0 @@

mirax-player.d.ts

@@ -24,4 +24,12 @@ // mirax-player.d.ts
 
-  // Export the VideoEmbed type
+
+    // Type for the VideoPlayer function
+    type VideoPlayer = (
+      videoClip: HTMLVideoElement
+    ) => void;
+
+
+  // Export the VideoEmbed & VideoPlayer type
   export const embed: VideoEmbed;
+  export const miraxPlayer: VideoPlayer;
 }

package.json

 {
   "name": "mirax-player",
-  "version": "6.0.0-beta.1",
-  "description": "Mirax Player is an embed player for React, Vue, Angular, and Svelte that can embed videos from platforms like Facebook, TikTok, YouTube/Shorts, Twitter, Dailymotion and Vimeo",
+  "version": "6.0.0-beta.4",
+  "description": "Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like Facebook, TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion.",
   "main": "index.js",
@@ -6,0 +6,0 @@ "types": "mirax-player.d.ts",

README.md

@@ -8,3 +8,3 @@ <p align="center">
 # Mirax Player 
-[![Npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=NPM&color=blue)](https://www.npmjs.com/package/mirax-player)
+[![Npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=NPM&color=brightgreen)](https://www.npmjs.com/package/mirax-player)
 ![Downloads](https://img.shields.io/npm/dt/mirax-player.svg?style=flat-square&label=DOWNLOADS&color=brightgreen)
@@ -17,2 +17,6 @@ [![License](https://img.shields.io/npm/l/mirax-player.svg?style=flat-square&label=LICENSE&color=green)](https://github.com/demjhonsilver/mirax-player/blob/main/LICENSE.md)
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme1.png"/>
+</p>
+
 ---------------------
@@ -33,2 +37,5 @@
 - [Svelte](#svelte)
+- [Video Player](#video-player)
+- [CSS Player](#css-player)
+- [Colors](#colors)
 - [License](#license)
@@ -39,3 +46,3 @@ - [Author](#author)
 
-Mirax Player is an embed player for React, Vue, Angular, and Svelte that can embed videos from platforms like TikTok, YouTube/Shorts, Twitter and Vimeo. This library package enables you to set any URL once within a single embed code tag and dynamically embed videos from any video sites.
+Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like Facebook, TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion. This library package enables you to set any URL once within a single embed code tag and dynamically embed videos from any video sites.
 
@@ -57,16 +64,18 @@
 
-- Mirax video player has been deprecated.
+- Mirax video player has been revised.
 - Mirax embed is now easier to use.
 - Mirax player can embed multiple videos.
 
-Reminder:
+Minor changes:
 
-- This is an Alpha test (experimental) aimed at simplifying code syntax.
+- The `Props` for the player are more aligned with short naming conventions."
+- Fullscreen mode will back to standard set-up."
 
-Bugs Fixed:
+Patch changes:
 
-- Code syntax fixing from typescript module (angular) (Tested but it has css issue)
-- Embed code for vue and svelte still working on. (Tested)
-- Supported Facebook, Twitter and Dailymotion videos 
+- Some icons for video player has been changed.
+- Embed syntax can be shorten or declare the data videos outside.
 
+
+
 ## Features
@@ -117,3 +126,9 @@
 
-
+---------------
+Recommended web browser local test:
+-----
+Google chrome
+---------
+![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
+--------
 ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
@@ -138,2 +153,4 @@ - located at repository files
 
+You can resize the max-width or width or float anywhere.
+
 -----------
@@ -147,3 +164,3 @@ ```css
   width: 100%;
-  max-width: 250px;
+  max-width: 300px;
 }
@@ -201,3 +218,26 @@
 You can embed one or more videos in any URL.
+
+If you want sample code for embed multiple videos?
 -----
+```
+mirax-player/
+|-- dist/
+|-- src/
+|   |-- angular/
+|   |-- react/
+|   |-- svelte/
+|   |-- vue/
+|-- LICENSE.md/
+|-- README.md/
+```
+
+Located at repository files ( EMBED MANY VIDEOS )
+
+```html
+src/react/JavaScriptEmbed.md
+src/vue/JavaScriptEmbed.md
+src/svelte/JavaScriptEmbed.md
+src/angular/TypeScriptEmbed.md
+```
+-----
 Reminder:
@@ -214,36 +254,12 @@
 const ExampleComponent = () => {
-  const videos = [
-    {
-      width: 250,
-      height: 400,
-      autoplay: false,
-      fullscreen: true,
-      controls: true,
-      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
-      videoClass: 'custom-twitter',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: true,
-      fullscreen: false,
-      controls: true,
-      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-      videoClass: 'custom-youtube',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: false,
-      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
-      videoClass: 'custom-facebook',
-    },
-    {
-      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-      videoClass: 'custom-tiktok', 
-    }
-  ];
   const videoContainer = useRef(null);
   useEffect(() => {
-    embed(videos, videoContainer.current);
+    embed([
+      {
+        width: 300,
+        height: 600,
+        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+        videoClass: 'custom-twitter',
+      }
+    ], videoContainer.current);
   });
@@ -274,33 +290,2 @@ return (
   setup() {
-    const videos = [
-      {
-        width: 250,
-        height: 400,
-        autoplay: false,
-        fullscreen: true,
-        controls: true,
-        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
-        videoClass: 'custom-twitter',
-      },
-      {
-        width: 640,
-        height: 360,
-        autoplay: true,
-        fullscreen: false,
-        controls: true,
-        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-        videoClass: 'custom-youtube',
-      },
-      {
-        width: 640,
-        height: 360,
-        autoplay: false,
-        videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
-        videoClass: 'custom-facebook',
-      },
-      {
-        videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-        videoClass: 'custom-tiktok', 
-      }
-    ];
 
@@ -310,3 +295,10 @@ const videoContainer = ref(null);
     onMounted(() => {
-      embed(videos, videoContainer.value);
+      embed([
+        {
+          width: 300,
+          height: 600,
+          videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+          videoClass: 'custom-twitter',
+        }
+      ], videoContainer.value);
     });
@@ -334,38 +326,13 @@
 
-  videos = [
-    {
-      width: 250,
-      height: 400,
-      autoplay: false,
-      fullscreen: true,
-      controls: true,
-      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
-      videoClass: 'custom-twitter',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: true,
-      fullscreen: false,
-      controls: true,
-      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-      videoClass: 'custom-youtube',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: false,
-      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
-      videoClass: 'custom-facebook',
-    },
-    {
-      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-      videoClass: 'custom-tiktok', 
-    }
-  ];
-
   constructor() {}
 
   ngAfterViewInit(): void {
-    embed(this.videos, this.videoContainer.nativeElement);
+    embed([
+      { 
+        width: 300,
+        height: 600,
+        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+        videoClass: 'custom-twitter',
+      }
+    ], this.videoContainer.nativeElement);
   }
@@ -387,3 +354,3 @@ }
   width: 100%;
-  max-width: 250px;
+  max-width: 300px;
 }
@@ -445,37 +412,14 @@
 
-  const videos = [
-    {
-      width: 250,
-      height: 400,
-      autoplay: false,
-      fullscreen: true,
-      controls: true,
-      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
-      videoClass: 'custom-twitter',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: true,
-      fullscreen: false,
-      controls: true,
-      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-      videoClass: 'custom-youtube',
-    },
-    {
-      width: 640,
-      height: 360,
-      autoplay: false,
-      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
-      videoClass: 'custom-facebook',
-    },
-    {
-      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-      videoClass: 'custom-tiktok', 
-    }
-  ];
+  const videos = ;
 
   let videoContainer;
   onMount(() => {
-    embed(videos, videoContainer);
+    embed([
+      {
+        width: 300,
+        height: 600,
+        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+        videoClass: 'custom-twitter',
+      }
+    ], videoContainer);
   });
@@ -485,3 +429,191 @@ </script>
 ```
+## Video-player
 
+Player Props |   Functionality |Type | Required |
+------ | -------- |  ----------- | ----------
+`player-selector` | responsiveness | any| yes
+`data-player-width` | dynamic width | integer | yes
+`data-player-float`   | dynamic alignment | string |optional
+`data-player-theme` | player color |  any | optional
+`data-player-bar`  | progress bar color | any | optional
+
+-------
+
+
+Keyboard shortcuts| Functions | Description 
+---- |  ---------------------- | -----------
+press `space bar` | Play & Pause |The video will play or pause 
+press `alt+p` | PiP | Picture in Picture screen 
+press `left arrow key` | rewind clip | backward for 10 sec. 
+press `right arrow key` | advance clip | forward for 10 sec.
+
+-------------
+- location of videos stored: 
+
+    public/clip.mp4 from your frameworks
+
+    assets/clip.mp4 -Angular
+
+    example.com/video/clip.mp4 (url)
+
+----------------------
+# React video player
+```js
+import React, { useEffect, useRef } from "react";
+import { miraxPlayer } from 'mirax-player';
+
+const ExampleComponent = () => {
+  const playerDiv = useRef(null);
+  useEffect(() => {
+      miraxPlayer(playerDiv.current);
+  },[]);
+  return (
+    <div className="player-selector">
+      <video className="mirax-player" ref={playerDiv}
+        data-player-width="800"
+        src="clip.mp4">
+      </video>
+    </div>
+  );
+};
+export default ExampleComponent;
+```
+# Vue video player
+```js
+<template>
+  <div class="player-selector">
+    <video ref="playerDiv"
+      class="mirax-player"
+      data-player-width="800"
+      src="clip.mp4">
+    </video>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { miraxPlayer } from 'mirax-player';
+
+export default {
+  setup() {
+    const playerDiv = ref(null);
+    onMounted(() => {
+        miraxPlayer(playerDiv.value);
+    });
+    return {
+      playerDiv
+    };
+  }
+};
+</script>
+```
+# Angular video player
+---------
+example.component.ts
+-----------
+```ts
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { miraxPlayer } from 'mirax-player';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.css']
+})
+export class ExampleComponent implements AfterViewInit {
+  @ViewChild('playerDiv', { static: true }) playerDiv!: ElementRef<HTMLVideoElement>;
+  ngAfterViewInit(): void {
+    this.initializemiraxPlayer();
+  }
+  initializemiraxPlayer() {
+      miraxPlayer(this.playerDiv.nativeElement);
+  }
+}
+```
+
+example.component.html
+
+-------------
+```html
+  <div class="player-selector">
+    <video #playerDiv
+      class="mirax-player"
+      data-player-width="800"
+      src="assets/clip.mp4">
+    </video>
+  </div>
+```
+# Svelte video player
+```js
+<script>
+  import { onMount } from 'svelte';
+  import { miraxPlayer } from 'mirax-player';
+
+  let playerDiv;
+  onMount(() => {
+      miraxPlayer(playerDiv);
+  });
+</script>
+
+<div class="player-selector">
+  <video bind:this={playerDiv} class="mirax-player"
+      data-player-width="800"
+      src="clip.mp4">
+    <track kind="captions" src="" label="English" default>
+  </video>
+</div>
+```
+## CSS-player
+
+- Left
+```js
+      data-player-float="left"
+```
+- Center
+```js
+      data-player-float="" // center is default
+      //or
+      data-player-float="center"
+```
+- Right
+```js
+      data-player-float="right"
+```
+
+-----
+Examples:
+---------
+```js
+      data-player-theme="rgba(250, 149, 35, 0.9)"
+      data-player-bar="rgba(17, 117, 59, 0.9)"
+```
+```js
+      data-player-theme="rgb(0,0,0)"
+      data-player-bar="rgb(255, 255, 255)"
+```
+```js
+      data-player-theme="#000000"
+      data-player-bar="#00ff00"
+```
+```js
+      data-player-theme="black"
+      data-player-bar="red"
+```
+If you want pure transparent:
+---------
+ ```js
+      data-player-theme = "rgba(0, 0, 0, 0)"
+```
+
+## Colors
+
+Color Types | Color syntax | Example | Opacity Range |  Appearance
+---------- |  --------- | ---------------- | -------------------- | ---------------
+`RGBA` | rgba() | rgba(255,0,0, 0.5) | `0.1 to 0.9`  or  `0 and 1` | Red half transparency
+`RGB`  |rgb() | rgb(255, 0, 0) | `none` | Red
+`HEXA` | #6digits | #ff0000| `none` | Red
+`COLORNAME` | colorname | red | `none` | Red
+----------------------------------------------------
+
+
 ## License
@@ -488,0 +620,0 @@

src/angular/TypescriptEmbed.md

 ```ts
-import { Component, OnInit, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
 import { embed } from 'mirax-player';
@@ -7,38 +7,46 @@
   selector: 'app-example',
-  template: '<div></div>', 
+  template: '<div #videoContainer></div>',
   styleUrls: ['./example.component.css'],
 })
-export class ExampleComponent implements OnInit, AfterViewInit {
-  constructor(private elementRef: ElementRef) {}
+export class ExampleComponent implements AfterViewInit {
+  @ViewChild('videoContainer', { static: false }) videoContainer!: ElementRef;
 
-  ngOnInit() {}
+  videos = [
+    {
+      width: 300,
+      height: 600,
+      autoplay: false,
+      fullscreen: true,
+      controls: true,
+      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+      videoClass: 'custom-twitter',
+    },
+    {
+      width: 640,
+      height: 360,
+      autoplay: true,
+      fullscreen: false,
+      controls: true,
+      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+      videoClass: 'custom-youtube',
+    },
+    {
+      width: 640,
+      height: 360,
+      autoplay: false,
+      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
+      videoClass: 'custom-facebook',
+    },
+    {
+      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
+      videoClass: 'custom-tiktok', 
+    }
+  ];
 
-  ngAfterViewInit() {
-    const videos = [
-      {
-        width: 640,
-        height: 310,
-        autoplay: false,
-        fullscreen: true,
-        controls: true,
-        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-      },
-      {
-        width: 640,
-        height: 310,
-        autoplay: true,
-        fullscreen: true,
-        controls: false,
-        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
-      },
-      {
-        videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-      },
-    ];
+  constructor() {}
 
-    const mutation = new Set();
-
-    embed(videos, mutation, { container: this.elementRef.nativeElement });
+  ngAfterViewInit(): void {
+    embed(this.videos, this.videoContainer.nativeElement);
   }
 }
 ```

src/react/JavascriptEmbed.md

 ```js
-import React, { useEffect, useRef } from "react";
+import React, { useRef, useEffect } from 'react';
 import { embed } from 'mirax-player';
@@ -8,34 +8,42 @@
     {
-      width: 640,
-      height: 310,
+      width: 300,
+      height: 600,
       autoplay: false,
       fullscreen: true,
       controls: true,
-      videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
+      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+      videoClass: 'custom-twitter',
     },
     {
       width: 640,
-      height: 310,
+      height: 360,
       autoplay: true,
-      fullscreen: true,
-      controls: false,
-      videoUrl: "https://www.youtube.com/watch?v=vBGiFtb8Rpw",
+      fullscreen: false,
+      controls: true,
+      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+      videoClass: 'custom-youtube',
     },
     {
-      videoUrl: "https://www.tiktok.com/@scout2015/video/6718335390845095173",
+      width: 640,
+      height: 360,
+      autoplay: false,
+      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
+      videoClass: 'custom-facebook',
     },
-
+    {
+      videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
+      videoClass: 'custom-tiktok', 
+    }
   ];
-
-  const mutation = useRef(new Set());
+  const videoContainer = useRef(null);
   useEffect(() => {
-    embed(videos, mutation);
+    embed(videos, videoContainer.current);
   });
-  
   return (
-    <></>
+    <>
+    <div ref={videoContainer}>
+    </div>
+    </>
   );
 };
-
-export default ExampleComponent;
 ```

src/svelte/JavascriptEmbed.md

 ```js
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
+  import { embed } from 'mirax-player';
 
-  let mutation = new Set();
-
   const videos = [
     {
-      width: 640,
-      height: 310,
+      width: 300,
+      height: 600,
       autoplay: false,
       fullscreen: true,
       controls: true,
-      videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+      videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+      videoClass: 'custom-twitter',
     },
     {
       width: 640,
-      height: 310,
+      height: 360,
       autoplay: true,
-      fullscreen: true,
-      controls: false,
+      fullscreen: false,
+      controls: true,
       videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+      videoClass: 'custom-youtube',
     },
     {
+      width: 640,
+      height: 360,
+      autoplay: false,
+      videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
+      videoClass: 'custom-facebook',
+    },
+    {
       videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-    },
+      videoClass: 'custom-tiktok', 
+    }
   ];
 
+  let videoContainer;
   onMount(() => {
-    import('mirax-player').then((module) => {
-      const { embed } = module;
-      embed(videos, mutation);
-    });
+    embed(videos, videoContainer);
   });
 </script>
-
-<div></div>
+<div bind:this={videoContainer}></div>
 ```

src/vue/JavascriptEmbed.md

 ```js
 <template>
-  <div></div>
+  <div>
+    <div ref="videoContainer"></div>
+  </div>
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from "vue";
 import { embed } from 'mirax-player';
@@ -15,32 +17,43 @@
       {
-        width: 640,
-        height: 310,
+        width: 300,
+        height: 600,
         autoplay: false,
         fullscreen: true,
         controls: true,
-        videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+        videoUrl: 'https://twitter.com/cheerfulclips/status/1677022600655175680',
+        videoClass: 'custom-twitter',
       },
       {
         width: 640,
-        height: 310,
+        height: 360,
         autoplay: true,
-        fullscreen: true,
-        controls: false,
+        fullscreen: false,
+        controls: true,
         videoUrl: 'https://www.youtube.com/watch?v=vBGiFtb8Rpw',
+        videoClass: 'custom-youtube',
       },
       {
+        width: 640,
+        height: 360,
+        autoplay: false,
+        videoUrl: 'https://www.facebook.com/facebook/videos/10153231379946729/',
+        videoClass: 'custom-facebook',
+      },
+      {
         videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',
-      },
+        videoClass: 'custom-tiktok', 
+      }
     ];
 
-    const mutation = ref(new Set());
+    const videoContainer = ref(null);
 
     onMounted(() => {
-      embed(videos, mutation);
+      embed(videos, videoContainer.value);
     });
 
-    return {};
+    return {
+      videoContainer,
+    };
   },
 };
-</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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

99404

increased by130.13%

Number of package files

18

increased by12.5%

Lines of code

1637

increased by330.79%

Number of lines in readme file

614

increased by27.39%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes