Mirax embed officially supports Twitter and Dailymotion videos

dist/miraxplayerUI.js

@@ -5,7 +5,9 @@
 
 // Define the content string
 const content_fullscreen = "\\02752"; 
+const content_backward = "\\27A4";
 const content_play = "\\25B6";
+const content_forward = "\\27A4";
 const content_pause = "|" + " " + "|";
 const content_speaker = "\\1F508";
 const content_pip = "\\0393";
@@ -19,10 +21,10 @@ const styles = `
 
 
 .play-button {
- position: relative;
- margin-left: 20px;
- transform: translateX(-50%);
+ position: absolute;
+ left: 50%;
  background: none;
+ margin-left:3px;
  color: #fff;
  border-style: none;
  border-radius: 0;
@@ -58,14 +60,58 @@ const styles = `
 
 
 
+
+.backward-button {
+ position: absolute;
+ left:45%;
+ background: none;
+ color: #fff;
+ border-style: none;
+ border-radius: 0;
+ cursor: pointer;
+ font-size: 13px;
+ transform: scaleX(-1);
+ transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.backward-button::before {
+ content: "${content_backward}";
+ font-size: 13px;
+ appearance: none;
+}
+
+
+
+
+.forward-button {
+ position: absolute;
+ left: 55%;
+ background: none;
+ color: #fff;
+ border-style: none;
+ border-radius: 0;
+ cursor: pointer;
+ font-size: 13px;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.forward-button::before {
+ content: "${content_forward}";
+ font-size:13px;
+ appearance: none;
+}
+
+
+
+
 /* Style the volume slider */
 .volume-slider {
  transform: rotate(-90deg); /* Rotate the thumb to match the vertical slider */
  position: absolute;
  right: 0;
  margin-right:73px;
  top:0;
- margin-top:-30px;
+ margin-top:-34px;
  width:50px;
  height: 3px;
  outline: none;
@@ -209,8 +255,6 @@ const styles = `
  
 }
 
-
-
 progress::-webkit-progress-value {
  background-color: rgba(45, 85, 255, 0.9);
  
@@ -224,6 +268,12 @@ progress::-ms-fill {
 
 }
 
+
+
+
+
+
+
 .pip-button {
  min-width:20px;
  width: 100%;
@@ -345,7 +395,7 @@ const mediaQuery = `
  display: block;
  margin: 0 auto;
  position: relative;
- width:100%;
+ width: 95%;
  height: 20px;
  max-width:96%;
  margin-top:-44px;
@@ -357,7 +407,6 @@ const mediaQuery = `
  display: flex;
  justify-content: space-between;
  align-items: center;
- border-radius:3px;
  }
 
  }

index.js

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

mirax-player.d.ts

@@ -5,17 +5,15 @@ declare module 'mirax-player' {
 
  // Type for the VideoEmbed function
  type VideoEmbed = (
- playerRef: HTMLDivElement | null,
- youtubeParams: { [key: string]: any },
- vimeoParams: { [key: string]: any }
+ urlSource: HTMLDivElement | null
  ) => void;
 
- // Type for the VideoPlayerFunction
- type VideoPlayerFunction = (
+ // Type for the VideoPlayer function
+ type VideoPlayer = (
  videoClip: HTMLVideoElement
  ) => void;
 
- // Export the VideoEmbed and VideoPlayerFunction types
+ // Export the VideoEmbed and VideoPlayer types
  export const miraxEmbed: VideoEmbed;
- export const miraxplayer: VideoPlayerFunction;
+ export const miraxPlayer: VideoPlayer;
 }

package.json

@@ -1,7 +1,7 @@
 {
  "name": "mirax-player",
- "version": "4.0.1",
- "description": "Mirax Player is a powerful free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like TikTok, YouTube/Shorts, and Vimeo.",
+ "version": "5.0.0",
+ "description": "Mirax Player is a free video player for React, Vue, Angular, and Svelte that can embed videos from platforms like TikTok, YouTube/Shorts, Twitter, Vimeo and Dailymotion.",
  "main": "index.js",
  "types": "mirax-player.d.ts",
  "scripts": {
@@ -20,6 +20,8 @@
  "youtube",
  "vimeo",
  "tiktok",
+ "dailymotion",
+ "twitter",
  "javascript",
  "typescript",
  "react",

src/angular/ExampleEmbed.md

@@ -1,11 +1,9 @@
 ```html
-<div class="mirax-embed-class">
+<div class="class-mirax-embed">
  <div #embedVideo 
- data-mirax-width="640"
- data-mirax-height="360"
- data-mirax-fullscreen="true"
- data-mirax-controls="true"
- data-mirax-embed="https://vimeo.com/217499569">
+ data-mirax-embed-width="640"
+ data-mirax-embed-height="360"
+ data-mirax-embed-url="https://vimeo.com/217499569">
  </div>
 </div>
 ```

src/angular/ExamplePlayer.md

@@ -1,13 +1,9 @@
 ```html
-<div>
- <div class="mirax-player-class">
+ <div class="class-mirax-player">
  <video #videoPlayer
  class="mirax-player"
  data-mirax-player-width="800"
- data-mirax-player-float=" "
- data-mirax-player-theme=" "
- data-mirax-player-bar=" "
- src="assets/clip.mp4"></video>
+ src="assets/clip.mp4">
+ </video>
  </div>
-</div>
 ```

src/angular/TypescriptEmbed.md

@@ -10,15 +10,7 @@ export class ExampleComponent implements OnInit {
  @ViewChild('embedVideo', { static: true }) embedVideo!: ElementRef;
  constructor() { }
  ngOnInit(): void {
- const youtubeParams = {
- playerVars: {
- cc_load_policy: 1
- }
- };
- const vimeoParams = {
- responsive: true 
- };
- miraxEmbed(this.embedVideo.nativeElement, youtubeParams, vimeoParams);
+ miraxEmbed(this.embedVideo.nativeElement);
  }
 }
 ```

src/angular/TypescriptPlayer.md

@@ -1,6 +1,6 @@
 ```ts
 import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { miraxplayer } from 'mirax-player';
+import { miraxPlayer } from 'mirax-player';
 
 @Component({
  selector: 'app-example',
@@ -10,11 +10,11 @@ import { miraxplayer } from 'mirax-player';
 export class ExampleComponent implements AfterViewInit {
  @ViewChild('videoPlayer', { static: true }) videoPlayer!: ElementRef<HTMLVideoElement>;
  ngAfterViewInit(): void {
- this.initializeMiraxplayer();
+ this.initializemiraxPlayer();
  }
- initializeMiraxplayer() {
+ initializemiraxPlayer() {
  if (this.videoPlayer.nativeElement) {
- miraxplayer(this.videoPlayer.nativeElement);
+ miraxPlayer(this.videoPlayer.nativeElement);
  }
  }
 }

src/react/JavascriptEmbed.md

@@ -4,26 +4,15 @@ import { miraxEmbed } from 'mirax-player';
 
 const ExampleComponent = () => {
  const embedVideo = useRef(null);
- const youtubeParams = {
- playerVars: { 
- cc_load_policy: 1 
- }
- };
- const vimeoParams = { 
- responsive: true
- };
  useEffect(() => {
- miraxEmbed(embedVideo.current, youtubeParams, vimeoParams);
+ miraxEmbed(embedVideo.current);
  });
  return (
- <div className="mirax-embed-class">
- <div ref={embedVideo}
- data-mirax-width="640"
- data-mirax-height="360"
- data-mirax-fullscreen="true"
- data-mirax-controls="true"
- data-mirax-embed="https://vimeo.com/217499569">
- </div>
+ <div className="class-mirax-embed"
+ ref={embedVideo}
+ data-mirax-embed-width="640"
+ data-mirax-embed-height="360"
+ data-mirax-embed-url="https://vimeo.com/217499569">
  </div>
  );
 };

src/react/JavascriptPlayer.md

@@ -1,22 +1,21 @@
 ```js
 import React, { useEffect, useRef } from "react";
-import { miraxplayer } from 'mirax-player';
+import { miraxPlayer } from 'mirax-player';
+
 const ExampleComponent = () => {
  const videoPlayer = useRef(null);
  useEffect(() => {
  if (videoPlayer.current) {
- miraxplayer(videoPlayer.current);
+ miraxPlayer(videoPlayer.current);
  }
  });
  return (
- <div className="mirax-player-class">
- <video ref={videoPlayer}
- className="mirax-player"
- data-mirax-player-width="800"
- data-mirax-player-float=" "
- data-mirax-player-theme=" "
- data-mirax-player-bar=" "
- src="clip.mp4"></video>
+ <div className="class-mirax-player">
+ <video ref={videoPlayer} 
+ className="mirax-player"
+ data-mirax-player-width="800"
+ src="clip.mp4">
+ </video>
  </div>
  );
 };

src/react/TypescriptEmbed.md

@@ -1,36 +1,26 @@
 ```ts
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, RefObject } from "react";
 import { miraxEmbed } from 'mirax-player';
 
 const ExampleComponent: React.FC = () => {
- const embedVideo = useRef<HTMLDivElement | null>(null);
+ const embedVideo: RefObject<HTMLDivElement> = useRef(null);
 
- const youtubeParams = {
- playerVars: { 
- cc_load_policy: 1 
- }
- };
- const vimeoParams = { 
- responsive: true
- };
  useEffect(() => {
  if (embedVideo.current) {
- miraxEmbed(embedVideo.current, youtubeParams, vimeoParams);
+ miraxEmbed(embedVideo.current);
  }
- });
+ }, []);
 
  return (
- <div className="mirax-embed-class">
- <div
- ref={embedVideo}
- data-mirax-width="640"
- data-mirax-height="360"
- data-mirax-fullscreen="true"
- data-mirax-controls="true"
- data-mirax-embed="https://vimeo.com/217499569"
- ></div>
- </div>
+ <div
+ className="class-mirax-embed"
+ ref={embedVideo}
+ data-mirax-embed-width="640"
+ data-mirax-embed-height="360"
+ data-mirax-embed-url="https://vimeo.com/217499569"
+ ></div>
  );
 };
+
 export default ExampleComponent;
 ```

src/react/TypescriptPlayer.md

@@ -1,25 +1,24 @@
 ```ts
 import React, { useEffect, useRef } from "react";
-import { miraxplayer } from 'mirax-player';
+import { miraxPlayer } from 'mirax-player';
 
 const ExampleComponent: React.FC = () => {
  const videoPlayer = useRef<HTMLVideoElement | null>(null);
 
  useEffect(() => {
  if (videoPlayer.current) {
- miraxplayer(videoPlayer.current);
+ miraxPlayer(videoPlayer.current);
  }
- });
+ }, []);
 
  return (
- <div className="mirax-player-class">
- <video ref={videoPlayer}
- className="mirax-player"
- data-mirax-player-width="800"
- data-mirax-player-float=" "
- data-mirax-player-theme=" "
- data-mirax-player-bar=" "
- src="clip.mp4"></video>
+ <div className="class-mirax-player">
+ <video
+ ref={videoPlayer}
+ className="mirax-player"
+ data-mirax-player-width="800"
+ src="clip.mp4">
+ </video>
  </div>
  );
 };