mirax-player - npm Package Compare versions

Comparing version 3.0.0-alpha.10 to 3.0.0-alpha.11

dist/mirax-player.d.ts

@@ -34,4 +34,4 @@ // mirax-player.d.ts
 declare module 'mirax-player' {
-  type VideoPlayerErrorHandler = (videoClip: any) => void;
-  export const miraxErrorHandler: VideoPlayerErrorHandler;
+  type VideoEmbed = (playerRef: any) => void;
+  export const miraxEmbed: VideoEmbed;
 }

index.js

 //index.js - This is your package's entry point
 
 export { default as miraxplayer } from './dist/MiraxPlayer';
-export { default as miraxErrorHandler } from './dist/ErrorHandler';
+export { default as miraxEmbed } from './dist/miraxEmbedder';
 
@@ -6,0 +6,0 @@

mirax-player.d.ts

@@ -34,4 +34,4 @@ // mirax-player.d.ts
 declare module 'mirax-player' {
-  type VideoPlayerErrorHandler = (videoClip: any) => void;
-  export const miraxErrorHandler: VideoPlayerErrorHandler;
+  type VideoEmbed = (playerRef: any) => void;
+  export const miraxEmbed: VideoEmbed;
 }

package.json

 {
   "name": "mirax-player",
-  "version": "3.0.0-alpha.10",
-  "description": "Mirax Player is a video player that is compatible with TypeScript and JavaScript for React, Vue, Angular and Svelte.",
+  "version": "3.0.0-alpha.11",
+  "description": "Mirax Player is a video player also serves as embed videos that is compatible with TypeScript and JavaScript for React, Vue, Angular and Svelte.",
   "main": "index.js",
@@ -15,2 +15,6 @@ "scripts": {
     "player",
+    "embed",
+    "embed video",
+    "embed player",
+    "youtube",
     "javascript",
@@ -23,3 +27,2 @@ "typescript",
     "angular",
-    "angularjs",
     "svelte",
@@ -26,0 +29,0 @@ "sveltejs"

README.md

@@ -35,2 +35,4 @@ <p align="center">
 - [Usage](#usage)
+- [Embed](#embed)
+- [Embed React](#embedreact)
 - [React](#react)
@@ -42,2 +44,3 @@ - [Vue](#vue)
 - [Colors](#colors)
+
 - [Features](#features)
@@ -49,3 +52,3 @@ - [License](#license)
 
-Mirax Player is a video player 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 video player also serves as 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.
 
@@ -115,9 +118,10 @@ ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 
+- Has ability to embed videos `miraxEmbed` like videos links from Youtube and Vimeo.
 
 
-Sources  | Usage | Themes |  React | Vue | Angular | Svelte | 
----- |  ---------------------- | ----------- | ------- | --------- | ------ | --------
-`local video File` | Video Player | Yes | Tested | Tested | Tested | Tested |
+Clip source  | Usage | Responsive | Themes |  Formats | 
+-------- |  ---------------------- | ----------- |  -----------  | ------------ |
+`local/online with file ext.` | Video Player | Yes | Yes | `.mp4 .mkv` |
+`online url/links` | Embed Videos | Yes | No | Url or Links  |
 
-
 ------------------
@@ -129,3 +133,3 @@
 
-syntax for importing Mirax Player :
+syntax for importing Mirax Player for video player or embed videos :
 
@@ -136,3 +140,3 @@ ```js
 
-import { miraxplayer } from 'mirax-player';
+import { miraxplayer, miraxEmbed } from 'mirax-player';
 
@@ -151,2 +155,73 @@
 
+## 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 playerRef = useRef(null);
+
+  useEffect(() => {
+    miraxEmbed(playerRef.current);
+  }, []);
+
+  return (
+    <div className="whatever-embed">
+      <div className="whatever-embed-videoclip" ref={playerRef} mirax-embed-video="https://vimeo.com/217499569"></div>
+    </div>
+  );
+};
+
+export default ExampleComponent;
+
+
+```
+
+
+----------
+
+
+
+
 ## React
@@ -153,0 +228,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

Improved metrics

Total package byte prevSize

45798

increased by5.64%

Lines of code

804

increased by3.47%

Number of lines in readme file

615

increased by13.89%

No dependency changes