mirax-player - npm Package Compare versions

Comparing version 3.0.0-alpha.12 to 3.0.0-alpha.13

mirax-player.d.ts

@@ -5,3 +5,2 @@ // mirax-player.d.ts
 
-// In your 'mirax-player' module declaration
 declare module 'mirax-player' {
@@ -8,0 +7,0 @@ type PlayerTheme =

package.json

 {
   "name": "mirax-player",
-  "version": "3.0.0-alpha.12",
-  "description": "Mirax Player is a video player that can also be used to embed videos that is compatible with TypeScript and JavaScript for React, Vue, Angular and Svelte.",
+  "version": "3.0.0-alpha.13",
+  "description": "Mirax Player is a framework-agnostic video player that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte.",
   "main": "index.js",
@@ -17,13 +17,8 @@ "scripts": {
     "embed video",
-    "embed player",
-    "youtube",
     "javascript",
     "typescript",
     "react",
-    "reactjs",
     "vue",
-    "vuejs",
     "angular",
-    "svelte",
-    "sveltejs"
+    "svelte"
   ],
@@ -30,0 +25,0 @@ "author": "Demjhon Silver",

README.md

@@ -8,8 +8,10 @@ <p align="center">
 # Mirax Player 
-[![Latest npm version](https://img.shields.io/badge/npm_%20-v_2.3.4-%23CB3837.svg)](https://www.npmjs.com/package/mirax-player)
+[![npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=Version&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)
+![License](https://img.shields.io/npm/l/mirax-player.svg?style=flat-square&label=License&color=brightgreen)
 
-</div>
 
 
 
+</div>
 <p align="center">
@@ -19,24 +21,9 @@ <img src="https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme1.png"/>
 
-<p align="center">
-  <img src="https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme2.png"/>
-</p>
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/theme3.png"/>
-</p>
-
-------
-
-
 ## Table of Contents
 
 - [Description](#description)
+- [Paradigm](#paradigm)
 - [Installation](#installation)
 - [Controllers](#Controllers)
 - [Usage](#usage)
-- [Embed](#embed)
-- [Embed React](#embedreact)
-- [Embed Vue](#embedvue)
-- [Embed Angular](#embedangular)
-- [Embed Svelte](#embedsvelte)
 - [React](#react)
@@ -46,3 +33,4 @@ - [Vue](#vue)
 - [Svelte](#svelte)
-- [Style](#style)
+- [CSS Player](#css-player)
+- [CSS Embed](#css-embed)
 - [Colors](#colors)
@@ -55,4 +43,32 @@ - [Features](#features)
 
-Mirax Player is a video player that can also be used to embed videos that is compatible with TypeScript and JavaScript for React, Vue, Angular and Svelte. You can customize the theme color of the video player. It is robust and easy to implement, featuring readable syntax and lightweight design. It was written in pure JavaScript but can be implemented in both TypeScript and JavaScript.
+Mirax Player is a framework-agnostic video player that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte. This framework-agnostic approach allows developers to incorporate Mirax Player into their projects without being bound to a specific library or framework, providing flexibility and compatibility for a diverse range of web development environments. It was written in pure JavaScript but can be implemented in both TypeScript and JavaScript.
 
+-----------
+Mirax Player is designed to work across multiple JavaScript frameworks without being tied to any specific one, making it a versatile choice for developers.
+
+## Paradigm
+
+Mirax employs Object-Oriented Programming principles to organize its components effectively.
+
+It aims to provide a consistent and adaptable video player and embedding solution.
+
+--------------
+```js
+Mirax Player
+ Mirax libraries/scripts (Reusable scripts)
+  ├── JavaScript
+  ├── TypeScript
+    ├── React
+    ├── Vue
+    ├── Angular
+    ├── Svelte
+      ├── Video Player/
+      │   ├── Themes/
+      │   │   ├── player theme
+      │   │   ├── progress theme
+      ├── Embed Videos/
+      │   ├── Video sites/
+      │   │   ├── Youtube
+      │   │   ├── Vimeo
+```
 ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
@@ -62,4 +78,2 @@ ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)
 ![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge&logo=svelte&logoColor=white)
-
-
 Frameworks / Library | Tested Versions | JavaScript | TypeScript |
@@ -71,4 +85,2 @@ ---- |  ------------------ | ----------- | ------------ |
 Svelte | Svelte 4 & above |  `Yes` | `Yes` |
-
-
 ------------
@@ -128,3 +140,3 @@ Supported scripts:
 -------- |  ---------------------- | ----------- |  -----------  | ------------ |
-`local/online with file ext.` | Video Player | Yes | Yes | `.mp4 .mkv` |
+`local/online with file ext.` | Video Player | Yes | Yes | `.mp4 .mkv` links |
 `online url/links` | Embed Videos | Yes | No | Url or Links  |
@@ -134,4 +146,2 @@
 
-"Reminder: This is an alpha test."
-
 --------
@@ -158,147 +168,4 @@
 ```
-
-## Embed
-
-You need to use: import { miraxEmbed } from 'mirax-player';
-
------------
-
-- Add to your css file you can customize or rename it:
-
---------
-
-```css
-.whatever-embed {
-  margin: auto 0;
-  position: relative;
-  width: 100%;
-  max-width: 600px;
-}
-
-.whatever-embed-videoclip {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
-}
-.whatever-embed-videoclip iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-```
-
------------
-
-## embedreact
-
-```js
-import React, { useEffect, useRef } from "react";
-import { miraxEmbed } from 'mirax-player';
-const ExampleComponent = () => {
-  const embedRef = useRef(null);
-  useEffect(() => {
-    miraxEmbed(embedRef.current);
-  }, []);
-  return (
-    <div className="whatever-embed">
-      <div className="whatever-embed-videoclip" ref={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
-    </div>
-  );
-};
-export default ExampleComponent;
-```
-
--------
-
-Note: Restart your server to test it.
-[CSS for Embed](#embed)
-
-----------
-
-## embedvue
-
-```js
-<template>
-  <div class="whatever-embed">
-    <div class="whatever-embed-videoclip" ref="embedRef" mirax-embed-video="https://vimeo.com/217499569"></div>
-  </div>
-</template>
-<script>
-import { onMounted, ref } from 'vue';
-import { miraxEmbed } from 'mirax-player';
-export default {
-  setup() {
-    const embedRef = ref(null);
-    onMounted(() => {
-      miraxEmbed(embedRef.value);
-    });
-    return {
-      embedRef
-    };
-  }
-};
-</script>
-```
-Note: Restart your server to test it.
-[CSS for Embed](#embed)
-
-## embedangular
-
-```js
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { miraxEmbed } from 'mirax-player';
-@Component({
-  selector: 'app-example',
-  templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css']
-})
-export class ExampleComponent implements OnInit {
-  @ViewChild('embedRef', {static: true, read: ElementRef}) embedRef!: ElementRef<HTMLVideoElement>;
-  constructor() { }
-  ngOnInit(): void {
-    miraxEmbed(this.embedRef.nativeElement);
-  }
-}
-```
-
-example.component.html
-
-```js
-<div class="whatever-embed">
-  <div class="whatever-embed-videoclip" #embedRef mirax-embed-video="https://vimeo.com/217499569"></div>
-</div>
-```
--------
-
-Note: Restart your server to test it.
-[CSS for Embed](#embed)
-
-## embedsvelte
-
-```js
-<script>
-import { onMount } from 'svelte';
-import { miraxEmbed } from 'mirax-player';
-let embedRef;
-onMount(() => {
-  miraxEmbed(embedRef);
-});
-</script>
-<div class="whatever-embed">
-  <div class="whatever-embed-videoclip" bind:this={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
-</div>
-```
--------
-
-Note: Restart your server to test it.
-[CSS for Embed](#embed)
-
-
-----------
-
 ## React
-
-You need to use "useRef" in React hooks:
-
+ - Video player - [CSS for Video Player](#css-player)
 ```js
@@ -326,21 +193,14 @@ import React, { useEffect, useRef } from "react";
 ```
-Typescript: React
+ - Embed videos - [CSS for Embed Videos](#css-embed)
 ```js 
 import React, { useEffect, useRef } from "react";
-import { miraxplayer } from 'mirax-player';
-interface Props {}
-const ExampleComponent: React.FC<Props> = () => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const miraxCustomizer = {
-    playerTheme: "rgba(250, 149, 35, 0.9)",
-    progressTheme:  "blue"
-  };
+import { miraxEmbed } from 'mirax-player';
+const ExampleComponent = () => {
+  const embedRef = useRef(null);
   useEffect(() => {
-    if (videoRef.current) {
-      miraxplayer(videoRef.current, miraxCustomizer); 
-    }
+    miraxEmbed(embedRef.current);
   }, []);
   return (
-    <div className="whatever">
-      <video ref={videoRef} className="mirax-player" src="clip.mp4"></video>
+    <div className="whatever-embed">
+      <div className="whatever-embed-videoclip" ref={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
     </div>
@@ -351,6 +211,10 @@ );
 ```
+- For TypeScript version: ( located at repository file )
+```html
+src/react/TypeScriptComponent.md
+```
 
+
 ## Vue
-------------------
-You need to use ref in Vue attributes:
+ - Video player - [CSS for Video Player](#css-player)
 ```js
@@ -384,28 +248,21 @@ <template>
 ```
-Typescript:  Vue
+ - Embed videos - [CSS for Embed Videos](#css-embed)
 -------------
 ```js 
 <template>
-  <div class="whatever">
-    <video ref="videoRef" class="mirax-player" src="clip.mp4"></video>
+  <div class="whatever-embed">
+    <div class="whatever-embed-videoclip" ref="embedRef" mirax-embed-video="https://vimeo.com/217499569"></div>
   </div>
 </template>
-<script lang="ts">
-import { miraxplayer } from 'mirax-player';
-import { ref, onMounted } from 'vue';
+<script>
+import { onMounted, ref } from 'vue';
+import { miraxEmbed } from 'mirax-player';
 export default {
-    name: 'ExampleComponent',
   setup() {
-    const videoRef = ref<HTMLVideoElement>(null);
-    const miraxCustomizer = {
-      playerTheme: "none",
-      progressTheme:  "orange"
-    };
+    const embedRef = ref(null);
     onMounted(() => {
-      if (videoRef.value) {
-        miraxplayer(videoRef.value, miraxCustomizer); 
-      }
+      miraxEmbed(embedRef.value);
     });
     return {
-      videoRef
+      embedRef
     };
@@ -416,6 +273,9 @@ }
 ```
+- For TypeScript version: ( located at repository file )
+```html
+src/vue/TypeScriptComponent.md
+```
 ## Angular
-
 ------------------
-You need to use ElementRef native DOM element:
+ - Video player - [CSS for Video Player](#css-player)
 ---------
@@ -458,6 +318,21 @@ example.component.ts
 ```
+ - Embed videos - [CSS for Embed Videos](#css-embed)
+```js
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { miraxEmbed } from 'mirax-player';
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.css']
+})
+export class ExampleComponent implements OnInit {
+  @ViewChild('embedRef', {static: true, read: ElementRef}) embedRef!: ElementRef<HTMLVideoElement>;
+  constructor() { }
+  ngOnInit(): void {
+    miraxEmbed(this.embedRef.nativeElement);
+  }
+}
+```
 ## Svelte
-
-You need to use bind:this in svelte:
------------
+ - Video player - [CSS for Video Player](#css-player)
 ```js
@@ -484,34 +359,24 @@ <script>
 ```
-Typescipt: Svelte
---------
-
+ - Embed videos - [CSS for Embed Videos](#css-embed)
 ```js
-<script lang="ts">
-    import { onMount } from 'svelte';
-    import { miraxplayer } from 'mirax-player';
-  let video: HTMLVideoElement | undefined;
-  const miraxCustomizer = {
-      playerTheme: string = "none".
-      progressTheme: string = "yellow"
-  };
-  $: if(video) {
-    miraxplayer(video, playerTheme, miraxCustomizer);
-  }
+<script>
+import { onMount } from 'svelte';
+import { miraxEmbed } from 'mirax-player';
+let embedRef;
+onMount(() => {
+  miraxEmbed(embedRef);
+});
 </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 class="whatever-embed">
+  <div class="whatever-embed-videoclip" bind:this={embedRef} mirax-embed-video="https://vimeo.com/217499569"></div>
 </div>
 ```
-To customize the alignment of video:
+- For TypeScript version: ( located at repository file )
+```html
+src/svelte/TypeScriptComponent.md
+```
+## CSS-player
 
-----------
-## Style
-
 You can assign your own class name to encapsulate the video player.
 
-----------------------------
 - Left
@@ -545,3 +410,29 @@ ```css
 ```
---------------
+## CSS-embed
+
+- Add to your css file you can customize or rename it:
+
+--------
+
+```css
+.whatever-embed {
+  margin: auto 0;
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+}
+
+.whatever-embed-videoclip {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
+}
+.whatever-embed-videoclip iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+```
+
 ## Colors
@@ -558,8 +449,4 @@
 -------------
-To change color and theme, simply add the necessary code to your component app.
------------
- if you want pure transparent:
+If you want pure transparent:
 ---------
- change into:
- ---------
  ```js
@@ -572,2 +459,3 @@ const playerTheme = "none";
 - Easy to use 
+- Can embed videos
 - Responsiveness
@@ -581,3 +469,3 @@ - Automatically hides the player bar
 - Allows you to point and drag the timestamp anywhere within the video's duration
-- Supports PIP (Picture-in-Picture), allowing the clip to continue playing even if you switch to a new app while leaving the tab open.
+- Supports PIP (Picture-in-Picture)
 ----------------------------------------------------
@@ -584,0 +472,0 @@ ## License

tsconfig.json

@@ -6,3 +6,3 @@ {
     },
-    "include": ["dist/mirax-player.d.ts"]
+    "include": ["mirax-player.d.ts"]
 }

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

53385

increased by12.8%

Number of package files

24

increased by140%

Worsened metrics

Lines of code

777

decreased by-3.36%

Number of lines in readme file

464

decreased by-19.44%

No dependency changes