Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

mirax-player

Package Overview
Dependencies
Maintainers
1
Versions
144
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mirax-player - npm Package Compare versions

Comparing version 6.0.0-beta.6 to 6.0.0-beta.7

469

dist/miraxEmbedder.js

@@ -27,156 +27,60 @@ /* # Mirax Player core license

const mutation = { current: new Set() }; // Initialize mutation
const embed = (videos) => {
videos
.filter((video) => !mutation.current.has(video.videoUrl))
.map((video, index) => {
const videoClass = video.videoClass || `video-${index + 1}`;
const container = document.querySelector(`.${videoClass}`);
const embedDailymotion = (video, container, videoClass) => {
const videoUrl = video.videoUrl;
if (video.videoUrl.includes("vimeo.com")) {
embedVimeo(video, container, videoClass);
} else if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) {
embedYouTube(video, container, videoClass);
} else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) {
embedTiktok(video, container, videoClass);
} else if (video.videoUrl.includes("twitter.com")) {
embedTwitter(video, container, videoClass);
} else if (video.videoUrl.includes("dailymotion.com") || video.videoUrl.includes("dailymotion")) {
embedDailymotion(video, container, videoClass);
} else if (video.videoUrl.includes("facebook.com") || video.videoUrl.includes("fb.com")) {
embedFacebook(video, container, videoClass);
} else {
throw new Error("Invalid video URL");
}
// Define maxwidth and maxheight based on the video object's properties
const maxwidth = video.width || 640; // Default width if not provided
const maxheight = video.height || 360; // Default height if not provided
mutation.current.add(video.videoUrl);
});
};
// Check if autoplay should be enabled (true by default)
const autoplayEnabled = video.autoplay !== undefined ? video.autoplay : true;
// Create a script element for the JSONP request
const script = document.createElement("script");
script.src = `https://www.dailymotion.com/services/oembed/?url=${encodeURIComponent(
videoUrl
)}&format=json&maxwidth=${maxwidth}&maxheight=${maxheight}&callback=handleDailymotionResponse`;
// Define a global callback function to handle the response
window.handleDailymotionResponse = (data) => {
if (data.html) {
// Create a div element to hold the Dailymotion video
const videoContainer = document.createElement("div");
// Apply the videoClass to the videoContainer
videoContainer.className = `video-${videoCount} ${videoClass} custom-dailymotion`; // Add custom-dailymotion class
// Function to extract YouTube video ID from a URL
const extractYouTubeVideoId = (url) => {
// Check if it's a YouTube Shorts URL
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
if (shortsMatch && shortsMatch[1]) {
return shortsMatch[1];
}
// Set the HTML content of the videoContainer to the oEmbed HTML
videoContainer.innerHTML = data.html;
// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (videoIdMatch && videoIdMatch[2].length === 11) {
return videoIdMatch[2];
}
// Update the video's width to be responsive
const videoElement = videoContainer.querySelector('iframe');
if (videoElement) {
videoElement.style.width = '100%'; // Set width to 100% for responsiveness
throw new Error("Invalid YouTube video URL");
};
// Conditionally add the 'autoplay' attribute
if (autoplayEnabled) {
videoElement.setAttribute('autoplay', 'autoplay');
}
// Variable to track if the YouTube API is loaded
let isYouTubeApiLoaded = false;
// Update the 'allow' attribute to include 'fullscreen' and 'picture-in-picture'
videoElement.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture; muted');
}
// Variable to track the video count
let videoCount = 1;
// Append the videoContainer to the provided container
container.appendChild(videoContainer);
const embedYouTube = (video, container, videoClass) => {
const videoId = extractYouTubeVideoId(video.videoUrl);
const playerDiv = document.createElement("div");
// Apply the videoClass to the playerDiv
playerDiv.className = `video-${videoCount} ${videoClass}`;
// Increment the video count for the next video
videoCount++;
// Set the data attributes for the player div
playerDiv.dataset.eWidth = video.width;
playerDiv.dataset.eHeight = 200;
playerDiv.dataset.efullscreen = video.fullscreen;
playerDiv.dataset.eVideoId = videoId;
// Append the player div to the document body
document.body.appendChild(playerDiv);
// Allow fullscreen if the fullscreen property is true
const autoplayValue = video.autoplay ? 1 : 0;
const muteValue = video.autoplay ? 1 : video.muted;
const emWidth = video.width || 640; // Default width if not provided
const emHeight = video.height || 360; // Default height if not provided
// Function to create the YouTube player once the API is ready
const createPlayer = () => {
if (window.YT && window.YT.Player) {
initializeYouTubeAPI(playerDiv, videoId, {
width: emWidth,
height: emHeight,
fullscreen: video.fullscreen ? 1 : 0,
controls: video.controls ? 1 : 0,
autoplay: autoplayValue,
muted: muteValue,
loop: video.loop ? 1 : 0,
});
// Clean up the script element and callback function
document.body.removeChild(script);
delete window.handleDailymotionResponse;
}
};
// Check if the YouTube iframe API is already available
if (window.YT && window.YT.Player && isYouTubeApiLoaded) {
createPlayer();
} else {
// API not ready, add the creation function to the queue
youtubePlayerAPIQueue.push(createPlayer);
if (!isYouTubeApiLoaded) {
// Load the YouTube iframe API script if it hasn't been loaded yet
window.onYouTubeIframeAPIReady = () => {
isYouTubeApiLoaded = true;
while (youtubePlayerAPIQueue.length) {
youtubePlayerAPIQueue.shift()();
}
};
const script = document.createElement("script");
script.src = "https://www.youtube.com/iframe_api";
script.async = true;
document.body.appendChild(script);
}
}
// Function to clean up the player
return () => {
if (playerDiv) {
playerDiv.innerHTML = ""; // Remove the YouTube player iframe
}
};
// Append the script element to the document to trigger the JSONP request
document.body.appendChild(script);
};
// Function to initialize the YouTube API
const initializeYouTubeAPI = (playerDiv, videoId, video) => {
const emWidth = video.width || 640; // Default width if not provided
const emHeight = video.height || 360; // Default height if not provided
if (playerDiv) {
new window.YT.Player(playerDiv, {
videoId: videoId,
width: emWidth,
height: emHeight,
playerVars: {
fs: video.fullscreen ? 1 : 0,
controls: video.controls ? 1 : 0,
cc_load_policy: 1,
autoplay: video.autoplay ? 1 : 0,
mute: video.autoplay ? 1 : video.muted,
loop: video.loop ? 1 : 0,
},
});
}
};
// Initialize the queue for YouTube API callbacks
let youtubePlayerAPIQueue = [];

@@ -194,10 +98,7 @@ // Function to extract Vimeo video ID from a URL

// Function to embed a Vimeo video
const embedVimeo = (video, container, videoClass) => {
const emWidth = video.width || 640; // Default width if not provided
const emHeight = video.height || 360; // Default height if not provided
const controlsValue = video.controls === "false" ? 0 : 1;
const emWidth = video.width || 640;
const emHeight = video.height || 360;
const controlsValue = video.controls;
const AutoplayValue = video.autoplay;

@@ -209,10 +110,3 @@ const LoopValue = video.loop;

const playerDiv = document.createElement("div");
// Apply the videoClass to the playerDiv
playerDiv.className = `video-${videoCount} ${videoClass}`;
// Increment the video count for the next video
videoCount++;
// Set the data attributes for the player div
playerDiv.dataset.eWidth = emWidth;

@@ -223,4 +117,3 @@ playerDiv.dataset.eHeight = emHeight;

// Append the player div to the document body
document.body.appendChild(playerDiv);
container.appendChild(playerDiv);

@@ -238,3 +131,3 @@ const script = document.createElement("script");

autoplay: AutoplayValue,
muted: false,
muted: true, // Set muted to true for autoplay
loop: LoopValue,

@@ -261,4 +154,69 @@ });

const embedTwitter = (video, container, videoClass) => {
const extractTwitterTweetId = (url) => {
const regex = /\/status\/(\d+)/;
const match = url.match(regex);
if (match && match[1]) {
return match[1];
} else {
return null; // No match found
}
};
try {
const videoUrl = video.videoUrl;
const tweetId = extractTwitterTweetId(videoUrl);
// Create a div to hold the embedded tweet
const tweetContainer = document.createElement("div");
// Apply the videoClass to the tweetContainer
tweetContainer.className = `video-${videoCount} ${videoClass}`;
// Set the ID for the tweet container
tweetContainer.id = `tweet-${tweetId}`;
// Add the Twitter widget script to the page and wait for it to load
const twitterWidgetScript = document.createElement("script");
twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
twitterWidgetScript.charset = "utf-8";
twitterWidgetScript.async = true;
// Attach a load event listener to the script
twitterWidgetScript.addEventListener("load", () => {
// The Twitter widget script has loaded, and the tweet is now embedded.
// You can perform any additional actions here if needed.
window.twttr.widgets.createTweet(tweetId, tweetContainer);
});
// Append the tweet container to the provided container
container.appendChild(tweetContainer);
container.appendChild(twitterWidgetScript);
} catch (error) {
console.error("Error embedding Twitter content:", error);
}
};
// Map to track embedded TikTok videos
const embeddedTikTokVideos = new Map();
// Function to embed TikTok videos
const embedTiktok = (video, container, videoClass) => {
const videoUrl = video.videoUrl;
// Check if the TikTok video URL has already been embedded
if (embeddedTikTokVideos.has(videoUrl)) {
// Video has already been embedded, no need to embed it again
return;
}
// Mark the TikTok video URL as embedded
embeddedTikTokVideos.set(videoUrl, true);
const width = video.width || '100%'; // Default width if not provided

@@ -320,141 +278,91 @@ const height = video.height || '100%'; // Default height if not provided

let videoCount = 1; // Initialize videoCount
const embedFacebook = (video, container, videoClass) => {
const videoUrl = video.videoUrl;
const autoplay = video.autoplay ? 'autoplay=true' : 'autoplay=false';
const muted = autoplay ? 'muted=true' : 'muted=false';
const emWidth = video.width || 640;
const emHeight = video.height || 360;
const embedTwitter = (video, container, videoClass) => {
// Create an iframe element for the Facebook video
const iframe = document.createElement('iframe');
iframe.setAttribute('src', `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}&width=${emWidth}&height=${emHeight}&show_text=false&${autoplay}&${muted}`);
iframe.setAttribute('width', emWidth);
iframe.setAttribute('height', emHeight);
iframe.setAttribute('frameborder', '0');
if (video.fullscreen) {
iframe.setAttribute('allowfullscreen', 'true');
}
iframe.className = `video-${videoCount} ${videoClass} custom-facebook`;
const extractTwitterTweetId = (url) => {
const regex = /\/status\/(\d+)/;
const match = url.match(regex);
videoCount++;
if (match && match[1]) {
return match[1];
} else {
return null; // No match found
}
};
container.appendChild(iframe);
};
try {
const videoUrl = video.videoUrl;
const tweetId = extractTwitterTweetId(videoUrl);
// Create a div to hold the embedded tweet
const tweetContainer = document.createElement("div");
// Apply the videoClass to the tweetContainer
tweetContainer.className = `video-${videoCount} ${videoClass}`;
// Set the ID for the tweet container
tweetContainer.id = `tweet-${tweetId}`;
// Add the Twitter widget script to the page and wait for it to load
const twitterWidgetScript = document.createElement("script");
twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
twitterWidgetScript.charset = "utf-8";
twitterWidgetScript.async = true;
// Attach a load event listener to the script
twitterWidgetScript.addEventListener("load", () => {
// The Twitter widget script has loaded, and the tweet is now embedded.
// You can perform any additional actions here if needed.
window.twttr.widgets.createTweet(tweetId, tweetContainer);
});
// Append the tweet container to the provided container
container.appendChild(tweetContainer);
container.appendChild(twitterWidgetScript);
// Increment the video count for the next video
videoCount++;
} catch (error) {
console.error("Error embedding Twitter content:", error);
}
};
// Function to embed a Dailymotion video using oEmbed
const embedDailymotion = (video, container, videoClass) => {
const videoUrl = video.videoUrl;
// Define maxwidth and maxheight based on the video object's properties
const maxwidth = video.width || 640; // Default width if not provided
const maxheight = video.height || 360; // Default height if not provided
// Check if autoplay should be enabled (true by default)
const autoplayEnabled = video.autoplay !== undefined ? video.autoplay : true;
// Create a script element for the JSONP request
const script = document.createElement("script");
script.src = `https://www.dailymotion.com/services/oembed/?url=${encodeURIComponent(
videoUrl
)}&format=json&maxwidth=${maxwidth}&maxheight=${maxheight}&callback=handleDailymotionResponse`;
// Define a global callback function to handle the response
window.handleDailymotionResponse = (data) => {
if (data.html) {
// Create a div element to hold the Dailymotion video
const videoContainer = document.createElement("div");
// Apply the videoClass to the videoContainer
videoContainer.className = `video-${videoCount} ${videoClass} custom-dailymotion`; // Add custom-dailymotion class
// Set the HTML content of the videoContainer to the oEmbed HTML
videoContainer.innerHTML = data.html;
// Function to extract YouTube video ID from a URL
const extractYouTubeVideoId = (url) => {
// Check if it's a YouTube Shorts URL
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
if (shortsMatch && shortsMatch[1]) {
return shortsMatch[1];
}
// Update the video's width to be responsive
const videoElement = videoContainer.querySelector('iframe');
if (videoElement) {
videoElement.style.width = '100%'; // Set width to 100% for responsiveness
// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (videoIdMatch && videoIdMatch[2].length === 11) {
return videoIdMatch[2];
}
// Conditionally add the 'autoplay' attribute
if (autoplayEnabled) {
videoElement.setAttribute('autoplay', 'autoplay');
}
throw new Error("Invalid YouTube video URL");
};
// Update the 'allow' attribute to include 'fullscreen' and 'picture-in-picture'
videoElement.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture; muted');
}
const embedYouTube = (video, container, videoClass) => {
if (!container) {
console.error("Container element not found.");
return;
}
// Append the videoContainer to the provided container
container.appendChild(videoContainer);
const autoplayValue = video.autoplay ? 1 : 0;
const muteValue = video.autoplay ? 1 : video.muted ? 1 : 0;
const loopValue = video.autoplay ? 1 : video.loop ? 1 : 0;
// Clean up the script element and callback function
document.body.removeChild(script);
delete window.handleDailymotionResponse;
}
};
const videoId = extractYouTubeVideoId(video.videoUrl);
// Append the script element to the document to trigger the JSONP request
document.body.appendChild(script);
};
// Create an iframe element for the YouTube player
const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayValue}&mute=${muteValue}&loop=${loopValue ? 1 : 0}&controls=${video.controls ? 1 : 0}&fs=${video.fullscreen ? 1 : 0}`;
iframe.width = video.width || 640;
iframe.height = video.height || 360;
iframe.frameborder = "0";
iframe.allowfullscreen = true;
// Apply the videoClass to the iframe element
iframe.className = videoClass;
const embedFacebook = (video, container, videoClass) => {
const videoUrl = video.videoUrl;
const autoplay = video.autoplay;
const muted = autoplay ? true : false; // Mute if autoplay is true
const emWidth = video.width || 640; // Default width if not provided
const emHeight = video.height || 360; // Default height if not provided
// Create an iframe element for the Facebook video
const iframe = document.createElement('iframe');
iframe.setAttribute('src', `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}&width=${video.width}&height=${video.height}&show_text=false&autoplay=${autoplay ? 'true' : 'false'}&muted=${muted ? 'true' : 'false'}`);
iframe.setAttribute('width', emWidth);
iframe.setAttribute('height',emHeight);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', 'true');
// Apply the videoClass to the iframe
iframe.className = `video-${videoCount} ${videoClass} custom-facebook`;
// Append the iframe to the provided container
container.appendChild(iframe);
// Increment the video count for the next video
videoCount++;
};

@@ -465,27 +373,36 @@

const embed = (videos) => {
videos.map((video) => {
const videoClass = video.videoClass || "";
const container = document.querySelector(`.${videoClass}`);
// Clear the container before embedding a new video
while (container.firstChild) {
container.removeChild(container.firstChild);
}
const embedVideos = (video, container) => {
// Check for the existence of a custom videoClass
const videoClass = video.videoClass ? video.videoClass : '';
if (video.videoUrl.includes("vimeo.com")) {
embedVimeo(video, container, videoClass);
} else if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) {
embedYouTube(video, container, videoClass);
} else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) {
embedTiktok(video, container, videoClass);
} else if (video.videoUrl.includes("twitter.com")) {
embedTwitter(video, container, videoClass);
} else if (video.videoUrl.includes("dailymotion.com") || video.videoUrl.includes("dailymotion")) {
if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) {
embedYouTube(video, container, videoClass);
}
else if (video.videoUrl.includes("facebook.com") || video.videoUrl.includes("fb.com")) {
embedFacebook(video, container, videoClass);
}
else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) {
embedTiktok(video, container, videoClass);
}
else if (video.videoUrl.includes("twitter.com")) {
embedTwitter(video, container, videoClass);
}
else if (video.videoUrl.includes("vimeo.com")) {
embedVimeo(video, container, videoClass);
}
else if (video.videoUrl.includes("dailymotion.com") || video.videoUrl.includes("dailymotion")) {
embedDailymotion(video, container, videoClass);
} else if (video.videoUrl.includes("facebook.com") || video.videoUrl.includes("fb.com")) {
embedFacebook(video, container, videoClass);
} else {
throw new Error("Invalid video URL");
}
}
else {
throw new Error("Invalid video URL");
}
});
};

@@ -492,0 +409,0 @@

1728

dist/MiraxPlayer.js

@@ -8,57 +8,58 @@ import './miraxplayerUI.js';

const existingControls = videoClip.parentNode.querySelector('.mirax-theme');
const existingControls = videoClip.parentNode.querySelector('.mirax-theme');
if (existingControls) {
if (existingControls) {
return;
return;
}
}
// Create control elements
// Create control elements
const controlDiv = document.createElement("div");
const controlDiv = document.createElement("div");
// Append the control div to the videoClip element's parent node
// Append the control div to the videoClip element's parent node
videoClip.parentNode.appendChild(controlDiv);
videoClip.parentNode.appendChild(controlDiv);
// Error Handler if video file not exist or not found
videoClip.addEventListener("error", function () {
// Error Handler if video file not exist or not found
// Check the networkState
videoClip.addEventListener("error", function () {
if (this.networkState > 2) {
// Check the networkState
// Create a text element
if (this.networkState > 2) {
const videoText = document.createElement("p");
// Create a text element
// Set the text content
const videoText = document.createElement("p");
videoText.textContent = "Video not found";
// Set the text content
// Set the class name
videoText.textContent = "Video not found";
videoText.className = "video-text";
// Set the class name
// Append the text element to the video element's parent node
videoText.className = "video-text";
this.parentNode.appendChild(videoText);
// Append the text element to the video element's parent node
}
this.parentNode.appendChild(videoText);
});
}
});

@@ -105,31 +106,31 @@

//**********************************************//
//
//**********************************************//
// Player THEME
//
//
// Player THEME
//*********************************************//
//
//*********************************************//
const playerTheme = videoClip.getAttribute("data-player-theme");
controlDiv.className = "mirax-theme";
const playerTheme = videoClip.getAttribute("data-player-theme");
controlDiv.style.backgroundColor = playerTheme;
controlDiv.className = "mirax-theme";
controlDiv.style.backgroundColor = playerTheme;

@@ -144,217 +145,216 @@

//**********************************************//
//
//**********************************************//
// PIP ( Picture in Picture )
//
//
// PIP ( Picture in Picture )
//*********************************************//
//
//*********************************************//
const pipButton = document.createElement('mirax');
pipButton.className = 'pip-button';
const pipButton = document.createElement('mirax');
controlDiv.appendChild(pipButton);
pipButton.className = 'pip-button';
pipButton.addEventListener('click', () => {
controlDiv.appendChild(pipButton);
if (document.pictureInPictureElement) {
pipButton.addEventListener('click', () => {
// Exit PiP
if (document.pictureInPictureElement) {
document.exitPictureInPicture();
// Exit PiP
} else if (videoClip !== document.pictureInPictureElement) {
document.exitPictureInPicture();
// Request PiP
} else if (videoClip !== document.pictureInPictureElement) {
videoClip.requestPictureInPicture();
// Request PiP
}
videoClip.requestPictureInPicture();
});
}
});
videoClip.addEventListener('enterpictureinpicture', handleEnterPiP);
videoClip.addEventListener('leavepictureinpicture', handleLeavePiP);
videoClip.addEventListener('enterpictureinpicture', handleEnterPiP);
videoClip.addEventListener('leavepictureinpicture', handleLeavePiP);
function handleEnterPiP() {
// Update UI or perform actions when entering PiP
function handleEnterPiP() {
console.log('Enter PiP mode');
// Update UI or perform actions when entering PiP
}
console.log('Enter PiP mode');
}
function handleLeavePiP() {
// Update UI or perform actions when leaving PiP
function handleLeavePiP() {
console.log('Exited PiP mode');
// Update UI or perform actions when leaving PiP
}
console.log('Exited PiP mode');
}
document.addEventListener('keydown', (event) => {
// Check if Alt+P is pressed
document.addEventListener('keydown', (event) => {
if (event.altKey && event.code === 'KeyP') {
// Check if Alt+P is pressed
// Toggle PiP mode
if (event.altKey && event.code === 'KeyP') {
if (document.pictureInPictureElement) {
// Toggle PiP mode
document.exitPictureInPicture();
if (document.pictureInPictureElement) {
} else {
document.exitPictureInPicture();
videoClip.requestPictureInPicture();
} else {
}
videoClip.requestPictureInPicture();
}
}
});
});
//______________________________________________________________________
//______________________________________________________________________
//**********************************************//
//**********************************************//
//
//
// Play Button
// Play Button
//
//
//*********************************************//
//*********************************************//
// Define event listener and function for the play button
// Define event listener and function for the play button
const playButton = document.createElement('mirax');
const playButton = document.createElement('mirax');
playButton.className = 'play-button';
playButton.className = 'play-button';
playButton.addEventListener('click', playerButton);
playButton.addEventListener('click', playerButton);
controlDiv.appendChild(playButton);
controlDiv.appendChild(playButton);
function playerButton() {
function playerButton() {
if (videoClip.paused) {
if (videoClip.paused) {
videoClip.play();
videoClip.play();
playButton.classList.add("pause"); // Add the pause class name
playButton.classList.add("pause"); // Add the pause class name
} else {
} else {
videoClip.pause();
videoClip.pause();
playButton.classList.remove("pause"); // Remove the pause class name
playButton.classList.remove("pause"); // Remove the pause class name
}
}
}
// Add event listener to the video element itself to toggle play state
// Add event listener to the video element itself to toggle play state
videoClip.addEventListener('click', () => {
videoClip.addEventListener('click', () => {
if (videoClip.paused) {
if (videoClip.paused) {
videoClip.play();
videoClip.play();
playButton.classList.add("pause");
playButton.classList.add("pause");
} else {
} else {
videoClip.pause();
videoClip.pause();
playButton.classList.remove("pause");
playButton.classList.remove("pause");
}
}
});
});
// Update the styles or UI of the play button based on video state
// Update the styles or UI of the play button based on video state
function updatePlayButton() {
function updatePlayButton() {
if (videoClip.paused) {
if (videoClip.paused) {
playButton.classList.remove("pause");
playButton.classList.remove("pause");
} else {
} else {
playButton.classList.add("pause");
playButton.classList.add("pause");
}
}
}
// Listen to video play and pause events
// Listen to video play and pause events
videoClip.addEventListener('play', updatePlayButton);
videoClip.addEventListener('play', updatePlayButton);
videoClip.addEventListener('pause', updatePlayButton);
videoClip.addEventListener('pause', updatePlayButton);

@@ -366,14 +366,14 @@

//**********************************************//
//**********************************************//
//
//
// Backward Button >>
// Backward Button >>
//
//
//*********************************************//
//*********************************************//

@@ -383,12 +383,12 @@

const backwardButton = document.createElement('mirax');
const backwardButton = document.createElement('mirax');
backwardButton.className = 'backward-button';
backwardButton.className = 'backward-button';
backwardButton.addEventListener('click', backwarderButton);
backwardButton.addEventListener('click', backwarderButton);
controlDiv.appendChild(backwardButton);
controlDiv.appendChild(backwardButton);

@@ -398,10 +398,10 @@

function backwarderButton() {
function backwarderButton() {
// Backward the video by 10 seconds
// Backward the video by 10 seconds
videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0);
videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0);
}
}

@@ -421,18 +421,18 @@

//**********************************************//
//**********************************************//
//
//
// Forward Button >>
// Forward Button >>
//
//
//*********************************************//
//*********************************************//

@@ -442,12 +442,12 @@

const forwardButton = document.createElement('mirax');
const forwardButton = document.createElement('mirax');
forwardButton.className = 'forward-button';
forwardButton.className = 'forward-button';
forwardButton.addEventListener('click', forwarderButton);
forwardButton.addEventListener('click', forwarderButton);
controlDiv.appendChild(forwardButton);
controlDiv.appendChild(forwardButton);

@@ -457,12 +457,12 @@

function forwarderButton() {
function forwarderButton() {
// Forward the video by 10 seconds
// Forward the video by 10 seconds
videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration);
videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration);
}
}

@@ -474,124 +474,124 @@

//______________________________________________________________________
//______________________________________________________________________
//**********************************************//
//**********************************************//
//
//
// Play video - press space bar
// Play video - press space bar
//
//
//*********************************************//
//*********************************************//
// Add keydown event listener to the document
// Add keydown event listener to the document
document.addEventListener('keydown', function(event) {
document.addEventListener('keydown', function(event) {
// Check if the pressed key is the space bar
// Check if the pressed key is the space bar
if (event.code === 'Space') {
if (event.code === 'Space') {
// Prevent the default action of scrolling
// Prevent the default action of scrolling
event.preventDefault();
event.preventDefault();
// Call the same function that you use for the play button
// Call the same function that you use for the play button
playerButton();
playerButton();
}
}
});
});
//______________________________________________________________________
//______________________________________________________________________
//**********************************************//
//**********************************************//
//
//
// Volume slider
// Volume slider
//
//
//*********************************************//
//*********************************************//
let prevVolume = 1;
let prevVolume = 1;
// Create the volume input element
// Create the volume input element
const volumeInput = document.createElement('input');
const volumeInput = document.createElement('input');
volumeInput.type = 'range';
volumeInput.type = 'range';
volumeInput.className = 'volume-slider';
volumeInput.className = 'volume-slider';
volumeInput.min = '0';
volumeInput.min = '0';
volumeInput.max = '1';
volumeInput.max = '1';
volumeInput.step = '0.01';
volumeInput.step = '0.01';
volumeInput.defaultValue = '1';
volumeInput.defaultValue = '1';
// Add event listener to update volume
// Add event listener to update volume
volumeInput.addEventListener('input', function() {
volumeInput.addEventListener('input', function() {
videoClip.volume = parseFloat(this.value);
videoClip.volume = parseFloat(this.value);
});
});
controlDiv.appendChild(volumeInput);
controlDiv.appendChild(volumeInput);
//______________________________________________________________________
//______________________________________________________________________
//**********************************************//
//**********************************************//
//
//
// Speed Options
// Speed Options
//
//
//*********************************************//
//*********************************************//

@@ -601,4 +601,4 @@

@@ -610,3 +610,2 @@

//**********************************************//

@@ -726,43 +725,43 @@

// Create a div element for the tooltipSpeed
// Create a div element for the tooltipzz
const tooltipSpeed = document.createElement('div');
const tooltipzz = document.createElement('div');
tooltipSpeed.className = 'tooltipSpeed';
tooltipzz.className = 'tooltipzz';
tooltipSpeed.style.width = '80px';
tooltipzz.style.width = '80px';
tooltipSpeed.style.height = '160px';
tooltipzz.style.height = '160px';
tooltipSpeed.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
tooltipzz.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
tooltipSpeed.style.color = 'white';
tooltipzz.style.color = 'white';
tooltipSpeed.style.position = 'absolute';
tooltipzz.style.position = 'absolute';
tooltipSpeed.style.display = 'none';
tooltipzz.style.display = 'none';
tooltipSpeed.style.zIndex = '100';
tooltipzz.style.zIndex = '100';
tooltipSpeed.style.fontFamily = 'Arial, Corbel';
tooltipzz.style.fontFamily = 'Arial, Corbel';
tooltipSpeed.style.fontWeight = 'normal';
tooltipzz.style.fontWeight = 'normal';
tooltipSpeed.style.fontSize = '11px';
tooltipzz.style.fontSize = '11px';
tooltipSpeed.style.lineHeight = '19px';
tooltipzz.style.lineHeight = '19px';
// Adjust the top property to make the tooltipSpeed appear above the gear icon
// Adjust the top property to make the tooltipzz appear above the gear icon
tooltipSpeed.style.right = '40px';
tooltipzz.style.right = '40px';
tooltipSpeed.style.bottom = '40px'; // Change this value to position the tooltipSpeed above the gear icon
tooltipzz.style.bottom = '40px'; // Change this value to position the tooltipzz above the gear icon
tooltipSpeed.style.padding = '5px';
tooltipzz.style.padding = '5px';
// Add speed options to the tooltipSpeed
// Add speed options to the tooltipzz

@@ -774,17 +773,17 @@

{ value: 0.25, label: '0.25x' },
{ value: 0.25, label: '0.25x' },
{ value: 0.5, label: '0.5x' },
{ value: 0.5, label: '0.5x' },
{ value: 0.75, label: '0.75x' },
{ value: 0.75, label: '0.75x' },
{ value: 1, label: 'Normal' },
{ value: 1, label: 'Normal' },
{ value: 1.25, label: '1.25x' },
{ value: 1.25, label: '1.25x' },
{ value: 1.5, label: '1.5x' },
{ value: 1.5, label: '1.5x' },
{ value: 1.75, label: '1.75x' },
{ value: 1.75, label: '1.75x' },
{ value: 2, label: '2x' }
{ value: 2, label: '2x' }

@@ -801,54 +800,55 @@ ];

const optionElement = document.createElement('div');
const optionElement = document.createElement('div');
optionElement.className = 'speed-option'; // Add this class for event handling
optionElement.className = 'speed-option'; // Add this class for event handling
optionElement.textContent = option.label;
optionElement.textContent = option.label;
optionElement.style.cursor = 'pointer';
optionElement.style.cursor = 'pointer';
tooltipSpeed.appendChild(optionElement);
tooltipzz.appendChild(optionElement);
optionElement.addEventListener('click', () => {
optionElement.addEventListener('click', () => {
// Extract the numeric value from the label
// Extract the numeric value from the label
const speedValue = parseFloat(option.value);
const speedValue = parseFloat(option.value);
changePlaybackSpeed(speedValue);
changePlaybackSpeed(speedValue);
// Update the selected option and indicator
// Update the selected option and indicator
selectedOption = optionElement;
selectedOption = optionElement;
updateSelectedIndicator();
updateSelectedIndicator();
});
});
// Add mouseover and mouseout event listeners to change background color
// Add mouseover and mouseout event listeners to change background color
optionElement.addEventListener('mouseover', () => {
optionElement.addEventListener('mouseover', () => {
optionElement.style.backgroundColor = 'rgba(45, 85, 255, 0.8)'; // Blue background on hover
optionElement.style.backgroundColor = 'rgba(45, 85, 255, 0.8)'; // Blue background on hover
});
});
optionElement.addEventListener('mouseout', () => {
optionElement.addEventListener('mouseout', () => {
// Remove background color on mouseout, but skip the selected option
if (optionElement !== selectedOption) {
if (optionElement !== selectedOption) {
optionElement.style.backgroundColor = '';
optionElement.style.backgroundColor = '';
}
}
});
});

@@ -863,21 +863,21 @@ });

speedOptionElements.forEach((optionElement) => {
speedOptionElements.forEach((optionElement) => {
if (optionElement === selectedOption) {
if (optionElement === selectedOption) {
optionElement.style.backgroundColor = 'rgba(45, 85, 255, 1)'; // Set the selected option's background color
optionElement.style.backgroundColor = 'rgba(45, 85, 255, 1)'; // Set the selected option's background color
optionElement.style.color = 'white'; // Set text color for better visibility
optionElement.style.color = 'white'; // Set text color for better visibility
optionElement.style.borderRadius = '2px';
optionElement.style.borderRadius = '2px';
} else {
} else {
optionElement.style.backgroundColor = ''; // Remove background color from other options
optionElement.style.backgroundColor = ''; // Remove background color from other options
optionElement.style.color = ''; // Remove text color from other options
optionElement.style.color = ''; // Remove text color from other options
}
}
});
});

@@ -898,29 +898,29 @@ }

// Add the tooltipSpeed to the player's UI
// Add the tooltipzz to the player's UI
controlDiv.appendChild(tooltipSpeed);
controlDiv.appendChild(tooltipzz);
// Remove the initial 'display: none' style from the tooltipSpeed
// Remove the initial 'display: none' style from the tooltipzz
tooltipSpeed.style.display = 'none';
tooltipzz.style.display = 'none';
// Add event listeners for mouseover and mouseout to show/hide the tooltipSpeed
// Add event listeners for mouseover and mouseout to show/hide the tooltipzz
gearIconContainer.addEventListener('mouseover', () => showTooltip());
tooltipSpeed.addEventListener('mouseover', () => showTooltip());
tooltipzz.addEventListener('mouseover', () => showTooltip());
tooltipSpeed.addEventListener('mouseout', () => hideTooltip());
tooltipzz.addEventListener('mouseout', () => hideTooltip());
// Function to show the tooltipSpeed
// Function to show the tooltipzz
function showTooltip() {
tooltipSpeed.style.display = 'block';
tooltipzz.style.display = 'block';

@@ -931,7 +931,7 @@ }

// Function to hide the tooltipSpeed
// Function to hide the tooltipzz
function hideTooltip() {
tooltipSpeed.style.display = 'none';
tooltipzz.style.display = 'none';

@@ -942,15 +942,15 @@ }

// Add event listeners to the speed options in the tooltipSpeed
// Add event listeners to the speed options in the tooltipzz
const speedOptionElements = tooltipSpeed.querySelectorAll('.speed-option');
const speedOptionElements = tooltipzz.querySelectorAll('.speed-option');
speedOptionElements.forEach((optionElement) => {
optionElement.addEventListener('click', () => {
optionElement.addEventListener('click', () => {
const speedValue = parseFloat(optionElement.textContent);
const speedValue = parseFloat(optionElement.textContent);
changePlaybackSpeed(speedValue);
changePlaybackSpeed(speedValue);
});
});

@@ -965,5 +965,5 @@ });

videoClip.playbackRate = speed;
videoClip.playbackRate = speed;
hideTooltip();
hideTooltip();

@@ -990,5 +990,5 @@ }

@@ -1017,3 +1017,3 @@ //**********************************************//

xSymbol.style.visibility = xSymbol.style.visibility === 'visible' ? 'hidden' : 'visible';
xSymbol.style.visibility = xSymbol.style.visibility === 'visible' ? 'hidden' : 'visible';

@@ -1028,7 +1028,7 @@ }

// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';

@@ -1041,9 +1041,9 @@ });

// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';

@@ -1092,3 +1092,3 @@ });

volumeSlider.style.opacity = '1';
volumeSlider.style.opacity = '1';

@@ -1121,45 +1121,45 @@ });

// Prevent the default scrolling behavior
// Prevent the default scrolling behavior
event.preventDefault();
event.preventDefault();
// Calculate the new volume value based on the mouse wheel delta
// Calculate the new volume value based on the mouse wheel delta
const delta = event.deltaY > 0 ? -0.1 : 0.1; // Adjust the step as needed
const delta = event.deltaY > 0 ? -0.1 : 0.1; // Adjust the step as needed
let newVolume = parseFloat(this.value) + delta;
let newVolume = parseFloat(this.value) + delta;
// Ensure the volume stays within the range [0, 1]
// Ensure the volume stays within the range [0, 1]
newVolume = Math.max(0, Math.min(1, newVolume));
newVolume = Math.max(0, Math.min(1, newVolume));
// Update the volume slider value and video volume
// Update the volume slider value and video volume
this.value = newVolume;
this.value = newVolume;
videoClip.volume = newVolume;
videoClip.volume = newVolume;
// Update the x symbol based on the volume value
// Update the x symbol based on the volume value
if (newVolume === 0) {
if (newVolume === 0) {
xSymbol.textContent = 'x';
xSymbol.textContent = 'x';
volumeInput.style.backgroundColor = '#FF004F';
volumeInput.style.backgroundColor = '#FF004F';
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
speakerBox.style.backgroundColor = '#FF004F';
speakerBox.style.backgroundColor = '#FF004F';

@@ -1170,27 +1170,27 @@

videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});

@@ -1205,21 +1205,21 @@

}
}
else if (newVolume <= 0.5 ) {
else if (newVolume <= 0.5 ) {
xSymbol.textContent = '|';
xSymbol.textContent = '|';
xSymbol.style.fontSize = '8px';
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '20px';
xSymbol.style.top = '19px';
volumeInput.style.backgroundColor = 'orange';
volumeInput.style.backgroundColor = 'orange';
xSymbol.style.color = 'orange';
xSymbol.style.color = 'orange';
speakerBox.style.backgroundColor = 'orange';
speakerBox.style.backgroundColor = 'orange';

@@ -1230,27 +1230,27 @@

videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'orange';
xSymbol.style.color = 'orange';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'orange';
xSymbol.style.color = 'orange';
});
});

@@ -1271,56 +1271,56 @@

}
}
else {
xSymbol.textContent = ')';
else {
volumeInput.style.backgroundColor = 'white';
xSymbol.textContent = ')';
speakerBox.style.backgroundColor = 'white';
volumeInput.style.backgroundColor = 'white';
speakerBox.style.backgroundColor = 'white';
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
videoClip.addEventListener('play', () => {
xSymbolInterval = setInterval(toggleXSymbol, 700);
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbol.style.color = 'white';
xSymbolInterval = setInterval(toggleXSymbol, 700);
});
xSymbol.style.color = 'white';
});
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
videoClip.addEventListener('pause', () => {
clearInterval(xSymbolInterval);
// Stop toggling and make the symbol visible
xSymbol.style.visibility = 'visible';
clearInterval(xSymbolInterval);
xSymbol.style.color = 'white';
xSymbol.style.visibility = 'visible';
});
xSymbol.style.color = 'white';
});
}
}
});

@@ -1354,3 +1354,3 @@

volumeSlider.style.opacity = '0';
volumeSlider.style.opacity = '0';

@@ -1371,73 +1371,74 @@ });

// Prevent the default scrolling behavior
// Prevent the default scrolling behavior
event.preventDefault();
event.preventDefault();
// Calculate the new volume value based on the mouse wheel delta
// Calculate the new volume value based on the mouse wheel delta
const delta = event.deltaY > 0 ? -0.1 : 0.1; // Adjust the step as needed
const delta = event.deltaY > 0 ? -0.1 : 0.1; // Adjust the step as needed
let newVolume = parseFloat(volumeSlider.value) + delta;
let newVolume = parseFloat(volumeSlider.value) + delta;
// Ensure the volume stays within the range [0, 1]
// Ensure the volume stays within the range [0, 1]
newVolume = Math.max(0, Math.min(1, newVolume));
newVolume = Math.max(0, Math.min(1, newVolume));
// Update the volume slider value and video volume
// Update the volume slider value and video volume
volumeSlider.value = newVolume;
volumeSlider.value = newVolume;
videoClip.volume = newVolume;
videoClip.volume = newVolume;
// Update the x symbol based on the volume value
// Update the x symbol based on the volume value
if (newVolume === 0) {
if (newVolume === 0) {
volumeInput.style.backgroundColor = '#FF004F';
volumeInput.style.backgroundColor = '#FF004F';
xSymbol.textContent = 'x';
xSymbol.textContent = 'x';
xSymbol.style.fontSize= '11px';
xSymbol.style.fontSize= '11px';
xSymbol.style.top = '16px';
xSymbol.style.top = '16px';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
speakerBox.style.backgroundColor = '#FF004F';
speakerBox.style.backgroundColor = '#FF004F';
videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});

@@ -1449,48 +1450,49 @@

}
}
else if (newVolume <= 0.5 ) {
else if (newVolume <= 0.5 ) {
xSymbol.textContent = '|';
xSymbol.style.fontSize = '8px';
xSymbol.textContent = '|';
xSymbol.style.top = '19px';
xSymbol.style.fontSize = '8px';
volumeInput.style.backgroundColor = 'orange';
xSymbol.style.top = '19px';
speakerBox.style.backgroundColor = 'orange';
volumeInput.style.backgroundColor = 'orange';
speakerBox.style.backgroundColor = 'orange';
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
videoClip.addEventListener('play', () => {
xSymbolInterval = setInterval(toggleXSymbol, 700);
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbol.style.color = 'orange';
xSymbolInterval = setInterval(toggleXSymbol, 700);
});
xSymbol.style.color = 'orange';
});
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
videoClip.addEventListener('pause', () => {
clearInterval(xSymbolInterval);
// Stop toggling and make the symbol visible
xSymbol.style.visibility = 'visible';
clearInterval(xSymbolInterval);
xSymbol.style.color = 'orange';
xSymbol.style.visibility = 'visible';
});
xSymbol.style.color = 'orange';
});

@@ -1501,60 +1503,58 @@

}
}
else {
xSymbol.textContent = ')';
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '19px';
volumeInput.style.backgroundColor = 'white';
else {
speakerBox.style.backgroundColor = 'white';
xSymbol.textContent = ')';
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '19px';
volumeInput.style.backgroundColor = 'white';
speakerBox.style.backgroundColor = 'white';
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
});
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
videoClip.addEventListener('pause', () => {
xSymbolInterval = setInterval(toggleXSymbol, 700);
// Stop toggling and make the symbol visible
xSymbol.style.color = 'white';
clearInterval(xSymbolInterval);
});
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
videoClip.addEventListener('pause', () => {
});
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
});
}
}
});

@@ -1574,6 +1574,6 @@

volumeSlider.style.opacity = '1';
volumeSlider.style.opacity = '1';
});

@@ -1587,3 +1587,3 @@

volumeSlider.style.opacity = '0';
volumeSlider.style.opacity = '0';

@@ -1600,39 +1600,39 @@ });

// Create a div element for the speaker box
// Create a div element for the speaker box
const speakerBox = document.createElement('div');
const speakerBox = document.createElement('div');
const speakerTrapezoid = document.createElement('div');
const speakerTrapezoid = document.createElement('div');
speakerTrapezoid.className = 'speakerTrapezoid';
speakerTrapezoid.className = 'speakerTrapezoid';
// Append the speaker box and cone to the speaker icon container
// Append the speaker box and cone to the speaker icon container
speakerIconContainer.appendChild(speakerBox);
speakerIconContainer.appendChild(speakerBox);
speakerIconContainer.appendChild(speakerTrapezoid);
speakerIconContainer.appendChild(speakerTrapezoid);
// Append the speaker icon container to the controlDiv
// Append the speaker icon container to the controlDiv
controlDiv.appendChild(speakerIconContainer);
controlDiv.appendChild(speakerIconContainer);

@@ -1645,7 +1645,7 @@

//______________________________________________________________________
//______________________________________________________________________

@@ -1686,49 +1686,49 @@ // Create a span element for the ")" symbol

// Use the video element directly
// Use the video element directly
videoClip.volume = parseFloat(this.value);
videoClip.volume = parseFloat(this.value);
// Update the x symbol based on the volume value
// Update the x symbol based on the volume value
if (videoClip.volume === 0) {
if (videoClip.volume === 0) {
xSymbol.textContent = 'x';
xSymbol.textContent = 'x';
xSymbol.style.fontSize = '11px';
xSymbol.style.fontSize = '11px';
xSymbol.style.top = '16px';
xSymbol.style.top = '16px';
// Change the background color of the volume slider to #FF004F
// Change the background color of the volume slider to #FF004F
volumeInput.style.backgroundColor = '#FF004F';
volumeInput.style.backgroundColor = '#FF004F';
videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});

@@ -1743,51 +1743,49 @@

}
}
else if (videoClip.volume <= 0.5 ) {
xSymbol.textContent = '|';
else if (videoClip.volume <= 0.5 ) {
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '16px';
xSymbol.textContent = '|';
volumeInput.style.backgroundColor = 'orange';
xSymbol.style.fontSize = '8px';
speakerBox.style.backgroundColor = 'orange';
xSymbol.style.top = '19px';
volumeInput.style.backgroundColor = 'orange';
speakerBox.style.backgroundColor = 'orange';
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
videoClip.addEventListener('play', () => {
xSymbol.style.color = 'orange';
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
});
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'orange';
videoClip.addEventListener('pause', () => {
});
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
videoClip.addEventListener('pause', () => {
xSymbol.style.visibility = 'visible';
// Stop toggling and make the symbol visible
xSymbol.style.color = 'orange';
clearInterval(xSymbolInterval);
});
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'orange';
});

@@ -1802,19 +1800,21 @@

}
}
else {
else {
xSymbol.textContent = ')';
xSymbol.textContent = ')';
xSymbol.style.fontSize = '8px';
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '19px';
xSymbol.style.top = '19px';
volumeInput.style.backgroundColor = 'white';
volumeInput.style.backgroundColor = 'white';

@@ -1825,27 +1825,27 @@

videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});

@@ -1858,3 +1858,3 @@

}
}

@@ -1873,43 +1873,43 @@ });

// Add event listener to the speaker icon container
// Add event listener to the speaker icon container
speakerIconContainer.addEventListener("click", function() {
speakerIconContainer.addEventListener("click", function() {
// Toggle the mute state of the video element
// Toggle the mute state of the video element
videoClip.muted = !videoClip.muted;
videoClip.muted = !videoClip.muted;
// Change the color of the speaker icon based on the mute state
// Change the color of the speaker icon based on the mute state
if (videoClip.muted) {
if (videoClip.muted) {
// Set the color to gray
// Set the color to gray
speakerBox.style.backgroundColor = "#FF004F";
speakerBox.style.backgroundColor = "#FF004F";
// Change the background color of the volume slider to #FF004F
// Change the background color of the volume slider to #FF004F
xSymbol.textContent = 'x';
xSymbol.textContent = 'x';
xSymbol.style.fontSize = '11px';
xSymbol.style.fontSize = '11px';
xSymbol.style.top = '16px';
xSymbol.style.top = '16px';
volumeInput.style.backgroundColor = '#FF004F';
volumeInput.style.backgroundColor = '#FF004F';
prevVolume = volumeInput.value;
prevVolume = volumeInput.value;
volumeInput.value = '0';
volumeInput.value = '0';
videoClip.volume = 0;
videoClip.volume = 0;
speakerBox.style.backgroundColor = '#FF004F';
speakerBox.style.backgroundColor = '#FF004F';

@@ -1920,27 +1920,27 @@

videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});

@@ -1953,27 +1953,27 @@

} else {
} else {
// Set the color to white
// Set the color to white
speakerBox.style.backgroundColor = "white";
speakerBox.style.backgroundColor = "white";
volumeInput.style.backgroundColor = 'white';
volumeInput.style.backgroundColor = 'white';
xSymbol.textContent = ')';
xSymbol.textContent = ')';
xSymbol.style.fontSize = '8px';
xSymbol.style.fontSize = '8px';
xSymbol.style.top = '19px';
xSymbol.style.top = '19px';
// Restore the previous volume value after unmuting
// Restore the previous volume value after unmuting
volumeInput.value = prevVolume;
volumeInput.value = prevVolume;
videoClip.volume = parseFloat(prevVolume);
videoClip.volume = parseFloat(prevVolume);
speakerBox.style.backgroundColor = 'white';
speakerBox.style.backgroundColor = 'white';

@@ -1984,37 +1984,37 @@

videoClip.addEventListener('play', () => {
videoClip.addEventListener('play', () => {
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
// Start toggling the symbol every 500 milliseconds (adjust timing as needed)
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbolInterval = setInterval(toggleXSymbol, 700);
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
videoClip.addEventListener('pause', () => {
videoClip.addEventListener('pause', () => {
// Stop toggling and make the symbol visible
// Stop toggling and make the symbol visible
clearInterval(xSymbolInterval);
clearInterval(xSymbolInterval);
xSymbol.style.visibility = 'visible';
xSymbol.style.visibility = 'visible';
xSymbol.style.color = 'white';
xSymbol.style.color = 'white';
});
});
}
}
});
});
//**********************************************//
//**********************************************//

@@ -2051,5 +2051,5 @@ //

const percentPlayed = (videoClip.currentTime / videoClip.duration) * 100;
const percentPlayed = (videoClip.currentTime / videoClip.duration) * 100;
progressBar.value = percentPlayed;
progressBar.value = percentPlayed;

@@ -2062,3 +2062,3 @@ });

handleProgressBarClick(e);
handleProgressBarClick(e);

@@ -2073,30 +2073,30 @@ });

e.preventDefault(); // Prevent the default scroll behavior
e.preventDefault(); // Prevent the default scroll behavior
const delta = e.deltaY; // Get the scrolling direction (positive or negative)
const delta = e.deltaY; // Get the scrolling direction (positive or negative)
// Adjust the video's current time based on the scrolling direction
// Adjust the video's current time based on the scrolling direction
const step = 1; // You can adjust the step size as needed
const step = 1; // You can adjust the step size as needed
const currentTime = videoClip.currentTime + (delta > 0 ? step : -step);
const currentTime = videoClip.currentTime + (delta > 0 ? step : -step);
// Ensure the currentTime stays within the video's duration limits
// Ensure the currentTime stays within the video's duration limits
videoClip.currentTime = Math.min(Math.max(currentTime, 0), videoClip.duration);
videoClip.currentTime = Math.min(Math.max(currentTime, 0), videoClip.duration);
// Update the progress bar value
// Update the progress bar value
progressBar.value = (videoClip.currentTime / videoClip.duration) * 100;
progressBar.value = (videoClip.currentTime / videoClip.duration) * 100;
});

@@ -2108,37 +2108,37 @@

const rect = progressBar.getBoundingClientRect();
const rect = progressBar.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetX = e.clientX - rect.left;
const newProgress = (offsetX / rect.width) * 100;
const newProgress = (offsetX / rect.width) * 100;
videoClip.currentTime = (newProgress / 100) * videoClip.duration;
videoClip.currentTime = (newProgress / 100) * videoClip.duration;
const onMouseMove = function(e) {
const onMouseMove = function(e) {
const offsetX = e.clientX - rect.left;
const offsetX = e.clientX - rect.left;
const newProgress = (offsetX / rect.width) * 100;
const newProgress = (offsetX / rect.width) * 100;
videoClip.currentTime = (newProgress / 100) * videoClip.duration;
videoClip.currentTime = (newProgress / 100) * videoClip.duration;
};
};
const onMouseUp = function() {
const onMouseUp = function() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mouseup', onMouseUp);
};
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mouseup', onMouseUp);

@@ -2153,19 +2153,19 @@ }

if (e.key === 'ArrowLeft') {
if (e.key === 'ArrowLeft') {
// Rewind the video by 10 seconds
// Rewind the video by 10 seconds
videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0);
videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0);
e.preventDefault(); // Prevent the default behavior of scrolling the page
e.preventDefault(); // Prevent the default behavior of scrolling the page
} else if (e.key === 'ArrowRight') {
} else if (e.key === 'ArrowRight') {
// Forward the video by 10 seconds
// Forward the video by 10 seconds
videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration);
videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration);
e.preventDefault(); // Prevent the default behavior of scrolling the page
e.preventDefault(); // Prevent the default behavior of scrolling the page
}
}

@@ -2232,17 +2232,17 @@ });

min-width:350px;
min-width:350px;
max-width: ${dynamicWidth + 400}px;
max-width: ${dynamicWidth + 400}px;
width: 100%; /* This ensures the video fills its container while respecting max-width */
width: 100%; /* This ensures the video fills its container while respecting max-width */
height: auto; /* This maintains the video's aspect ratio */
height: auto; /* This maintains the video's aspect ratio */
min-height:100px;
min-height:100px;
max-height:450px;
max-height:450px;
background-color: #000000;
background-color: #000000;
margin: 0 auto;
margin: 0 auto;

@@ -2257,3 +2257,3 @@

--progress-width: 100%;
--progress-width: 100%;

@@ -2266,50 +2266,25 @@ }

/* Hide the control div by default */
.mirax-theme {
display: none;
transition: transform 0.3s;
opacity: 0; /* Start with 0 opacity */
transition: opacity 0.3s; /* Use opacity for a smooth transition */
position: absolute;
bottom: 20px;
width: 100%;
max-width: 95%;
min-width: 350px;
height: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Adjust to perfectly center */
}
/* Show the control div when hovering over the video or itself */
.mirax-player:hover + .mirax-theme,
.mirax-theme:hover {
display: block;
margin: 0 auto;
position: relative !important;
width: 100%;
height: 30px;
bottom: 50px;
min-width:350px;
max-width: 95%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 1; /* Change opacity to 1 on hover to make it visible */
}

@@ -2324,24 +2299,23 @@

.progress-bar {
display: block;
display: block;
margin: 0 auto;
margin: 0 auto;
position: relative;
position: relative;
margin-top:-36px;
margin-top:-36px;
width: 100%;
width: 100%;
width: var(--progress-width);
width: var(--progress-width);
max-width: var(--progress-max-width);
max-width: var(--progress-max-width);
height: 6px;
height: 6px;
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
border-style: none;
border-style: none;

@@ -2353,13 +2327,13 @@ }

margin: 0 auto;
margin: 0 auto;
width: 100%;
width: 100%;
max-width: ${dynamicWidth}px;
max-width: ${dynamicWidth}px;
position: relative;
position: relative;
float: ${dynamicFloat};
float: ${dynamicFloat};
text-align: center;
text-align: center;

@@ -2394,11 +2368,11 @@ }

//**********************************************//
//**********************************************//
//
//
// Timestamp Math System
// Timestamp Math System
//
//
//*********************************************//
//*********************************************//

@@ -2447,63 +2421,63 @@

const currentTime = videoClip.currentTime;
const currentTime = videoClip.currentTime;
const formattedTime = formatTime(currentTime);
const formattedTime = formatTime(currentTime);
currentTimeDiv.textContent = formattedTime;
currentTimeDiv.textContent = formattedTime;
timeDurationDiv.style.opacity = '1';
timeDurationDiv.style.opacity = '1';
// Check if the current time is greater than or equal to 1 minute (01:00)
// Check if the current time is greater than or equal to 1 minute (01:00)
if (currentTime >= 60) {
if (currentTime >= 60) {
// #FF004Fuce marginLeft by 40px
// #FF004Fuce marginLeft by 40px
timeDurationDiv.style.marginLeft = '40px';
timeDurationDiv.style.marginLeft = '40px';
}
}
// Check if the current time is greater than or equal to 10 minutes (10:00)
// Check if the current time is greater than or equal to 10 minutes (10:00)
if (currentTime >= 600) {
if (currentTime >= 600) {
// #FF004Fuce marginLeft by 45px
// #FF004Fuce marginLeft by 45px
timeDurationDiv.style.marginLeft = '45px';
timeDurationDiv.style.marginLeft = '45px';
}
}
// Check if the current time is greater than or equal to 1 hour (01:00:00)
// Check if the current time is greater than or equal to 1 hour (01:00:00)
if (currentTime >= 3600) {
if (currentTime >= 3600) {
// #FF004Fuce marginLeft by 63px
// #FF004Fuce marginLeft by 63px
timeDurationDiv.style.marginLeft = '63px';
timeDurationDiv.style.marginLeft = '63px';
}
}
// Check if the current time is greater than or equal to 10 hour (10:00:00)
// Check if the current time is greater than or equal to 10 hour (10:00:00)
if (currentTime >= 36000) {
if (currentTime >= 36000) {
// #FF004Fuce marginLeft by 69px
// #FF004Fuce marginLeft by 69px
timeDurationDiv.style.marginLeft = '69px';
timeDurationDiv.style.marginLeft = '69px';
}
}

@@ -2524,9 +2498,9 @@

if (!isNaN(videoClip.duration)) {
if (!isNaN(videoClip.duration)) {
const formattedDuration = formatTime(videoClip.duration);
const formattedDuration = formatTime(videoClip.duration);
timeDurationDiv.textContent = formattedDuration;
timeDurationDiv.textContent = formattedDuration;
}
}

@@ -2541,29 +2515,29 @@ }

const hours = Math.floor(seconds / 3600);
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
const secs = Math.floor(seconds % 60);
let formattedTime = '';
let formattedTime = '';
if (hours >= 1) {
if (hours >= 1) {
formattedTime += `${hours.toString()}:`;
formattedTime += `${hours.toString()}:`;
}
}
formattedTime += `${minutes.toString().padStart(1, '0')}:${secs.toString().padStart(2, '0')}`;
formattedTime += `${minutes.toString().padStart(1, '0')}:${secs.toString().padStart(2, '0')}`;
return formattedTime;
return formattedTime;

@@ -2592,48 +2566,38 @@ }

//**********************************************//
//**********************************************//
//
//
// Progress bar value color
// Progress bar value color
//
//
//*********************************************//
//*********************************************//
const playerBar = videoClip.getAttribute("data-player-bar");
const playerBar = videoClip.getAttribute("data-player-bar");
var color_progress_bar = playerBar;
var color_progress_bar = playerBar;
const inputProgressBar = document.createElement('style');
const inputProgressBar = document.createElement('style');
document.head.appendChild(inputProgressBar);
document.head.appendChild(inputProgressBar);
const inputProgressBarStyle = `
const inputProgressBarStyle = `
progress::-webkit-progress-bar {
progress::-webkit-progress-bar {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
position:relative;
}
progress::-webkit-progress-value {
background-color: ${color_progress_bar};
position:relative;

@@ -2643,85 +2607,89 @@

}
}
progress[value]::-moz-progress-bar {
progress::-webkit-progress-value {
background-color: ${color_progress_bar};
background-color: ${color_progress_bar};
position:relative;
position:relative;
}
}
progress::-ms-fill {
progress[value]::-moz-progress-bar {
background-color: ${color_progress_bar};
background-color: ${color_progress_bar};
position:relative;
position:relative;
}
progress::-ms-fill {
background-color: ${color_progress_bar};
position:relative;
progress::-webkit-slider-thumb {
width: 11px;
height: 11px;
margin-top:-1px;
border-radius: 100%;
background-color: red;
border-style: none;
progress::-webkit-slider-thumb {
cursor: pointer;
width: 11px;
-webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */
height: 11px;
-moz-appearance: none; /* Remove default appearance for Firefox */
margin-top:-1px;
appearance: none; /* Remove default appearance for Edge */
border-radius: 100%;
}
background-color: red;
border-style: none;
progress::-moz-range-thumb {
cursor: pointer;
width: 11px;
-webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */
height: 11px;
-moz-appearance: none; /* Remove default appearance for Firefox */
margin-top:-1px;
appearance: none; /* Remove default appearance for Edge */
border-radius: 100%;
}
background-color: red;
border-style: none;
progress::-moz-range-thumb {
cursor: pointer;
width: 11px;
-webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */
height: 11px;
-moz-appearance: none; /* Remove default appearance for Firefox */
margin-top:-1px;
appearance: none; /* Remove default appearance for Edge */
border-radius: 100%;
}
background-color: red;
border-style: none;
cursor: pointer;
-webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */
-moz-appearance: none; /* Remove default appearance for Firefox */
appearance: none; /* Remove default appearance for Edge */
}

@@ -2732,34 +2700,14 @@

}
`;
inputProgressBar.appendChild(document.createTextNode(inputProgressBarStyle));
}
`;
//**********************************************//
inputProgressBar.appendChild(document.createTextNode(inputProgressBarStyle));
//
// Double Click Fullscreen
//
//*********************************************//
videoClip.addEventListener('dblclick', toggleFullscreen);

@@ -2771,4 +2719,2 @@

//______________________________________________________________________

@@ -2782,3 +2728,3 @@

// Fullscreen Button
// Double Click Fullscreen

@@ -2793,39 +2739,65 @@ //

videoClip.addEventListener('dblclick', toggleFullscreen);
const fullscreenButton = document.createElement('mirax');
fullscreenButton.className = 'fullscreen';
controlDiv.appendChild(fullscreenButton);
//______________________________________________________________________
fullscreenButton.addEventListener('click', toggleFullscreen);
//**********************************************//
//
// Fullscreen Button
//
//*********************************************//
function toggleFullscreen() {
if (videoClip.requestFullscreen) {
if (document.fullscreenElement) {
const fullscreenButton = document.createElement('mirax');
document.exitFullscreen();
fullscreenButton.className = 'fullscreen';
} else {
controlDiv.appendChild(fullscreenButton);
videoClip.requestFullscreen();
}
fullscreenButton.addEventListener('click', toggleFullscreen);
}
}
function toggleFullscreen() {
if (videoClip.requestFullscreen) {
}
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
videoClip.requestFullscreen();
}
}
}
}

@@ -2832,0 +2804,0 @@ /* # Mirax Player core license

41

dist/miraxplayerUI.js

@@ -7,3 +7,2 @@

// Define the content string
const content_fullscreen = "\\0292D";
const content_backward = "\\0279C";

@@ -321,3 +320,3 @@ const content_play = "\\27A4";

height: 12px; /* Adjust the height as needed */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='12' height='12'%3E%3Crect x='0' y='0' width='100' height='100' fill='%23FFFFFF' /%3E%3Crect x='12' y='12' width='70' height='70' fill='%23000000' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='12' height='12'%3E%3Crect x='0' y='0' width='100' height='100' fill='%23FFFFFF' /%3E%3Crect x='12' y='12' width='70' height='70' fill='%23818589' /%3E%3C/svg%3E");
font-size: 12px;

@@ -374,6 +373,20 @@ appearance: none;

/* Hide the control div by default */
.mirax-theme {
display: none;
opacity: 0; /* Start with 0 opacity */
transition: opacity 0.3s; /* Use opacity for a smooth transition */
position: absolute;
bottom: 20px;
width: 100%;
max-width: 95%;
min-width: 350px;
height: 30px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Adjust to perfectly center */
}

@@ -384,19 +397,9 @@

.mirax-theme:hover {
display: block;
margin: 0 auto;
position: relative;
width: 95%;
height: 20px;
max-width:96%;
margin-top:-44px;
bottom: 0;
left: 10;
color: #fff;
padding-top:5px;
padding-bottom:5px;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 1; /* Change opacity to 1 on hover to make it visible */
}
}

@@ -403,0 +406,0 @@ `;

2

package.json
{
"name": "mirax-player",
"version": "6.0.0-beta.6",
"version": "6.0.0-beta.7",
"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.",

@@ -5,0 +5,0 @@ "main": "index.js",

62

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=Latest&color=blue)](https://www.npmjs.com/package/mirax-player)
[![Npm version](https://img.shields.io/npm/v/mirax-player.svg?style=flat-square&label=Latest&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)

@@ -73,3 +73,3 @@ [![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)

Patch Changes:
Patch notes:

@@ -87,4 +87,5 @@ - Some icons in the video player have been updated.

- Easy to use and responsive.
- Capable of embedding videos from platforms like Facebook, TikTok, YouTube, YouTube Shorts, Twitter, Dailymotion and Vimeo.
- Supports playing videos in both portrait and landscape orientations.
- Capable of embedding one or many videos from platforms like Facebook, TikTok, YouTube, YouTube Shorts, Twitter, Dailymotion and Vimeo.
- Supports playing videos in both portrait and landscape orientations.
- Set up once, everything is flexible.

@@ -102,10 +103,8 @@ -------------

Logo | Sites | Source type | Docs.
------ | -------- | --------- | ---------- |
![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white) | Facebook | Iframe Plugins | https://developers.facebook.com/docs/plugins/embedded-video-player
![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white) | Twitter / X | JavaScript API | https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white) | YouTube / Shorts | Iframe Api | https://developers.google.com/youtube/iframe_api_reference
![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge&logo=TikTok&logoColor=white) | TikTok | oEmbed API | https://developers.tiktok.com/doc/embed-videos/
![Vimeo](https://camo.githubusercontent.com/2026999d43e099c9c835757e3d2f5f8c574efad153f4e3d5143914223e9cbc24/68747470733a2f2f613131796261646765732e636f6d2f62616467653f6c6f676f3d76696d656f) | Vimeo | Player SDK | https://developer.vimeo.com/player/sdk
![Dailymotion](https://a11ybadges.com/badge?logo=dailymotion) | Dailymotion | oEmbed API | https://developers.dailymotion.com/player/#player-oembed
![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white)
![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white)
![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white)
![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge&logo=TikTok&logoColor=white)
![Vimeo](https://camo.githubusercontent.com/2026999d43e099c9c835757e3d2f5f8c574efad153f4e3d5143914223e9cbc24/68747470733a2f2f613131796261646765732e636f6d2f62616467653f6c6f676f3d76696d656f)
![Dailymotion](https://a11ybadges.com/badge?logo=dailymotion)
--------

@@ -126,6 +125,2 @@

---------
Recommended web browser for local test:
-----
Google chrome ![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
--------

@@ -151,2 +146,4 @@ ## TypeScript

You may apply to app.css or index.css or any css file.
This is sample only, you can rename, recreate, and do something:
```css

@@ -173,14 +170,2 @@ .embed-youtube-one-clip {

You can embed one or more videos in any URL.
```html
videoUrl: 'youtube | shorts copy link / url',
videoUrl: 'tiktok copy link / url',
videoUrl: 'facebook copy link / url',
videoUrl: 'twitter copy link / url',
videoUrl: 'vimeo copy link / url',
videoUrl: 'dailymotion copy link / url',
```
If you want sample code for embed multiple videos?

@@ -202,4 +187,10 @@ -----

------
Use Google chrome as much as possible to load more videos properly.
------------
Recommended web browser for local test:
-----
![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
--------

@@ -310,2 +301,13 @@ Reminder:

```css
::ng-deep .embed-youtube-one-clip {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
border: 2px solid orange;
width: 100%;
max-width: 640px;
margin: auto; /* Center the entire container horizontally */
}
```

@@ -377,3 +379,3 @@ ## Svelte

miraxPlayer(playerDiv.current);
},[]);
});
return (

@@ -383,3 +385,3 @@ <div className="player-selector">

data-player-width="800"
src="clip.mp4">
src="clip8.mp4">
</video>

@@ -386,0 +388,0 @@ </div>

6

src/angular/TypescriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md (including Angular css)
```ts

@@ -2,0 +8,0 @@ import { Component, AfterViewInit } from '@angular/core';

8

src/react/JavascriptEmbed.md

@@ -0,3 +1,9 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```jsx
import React, { useRef, useEffect } from 'react';
import React, { useEffect } from 'react';
import { embed } from 'mirax-player';

@@ -4,0 +10,0 @@

6

src/react/TypescriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```ts

@@ -2,0 +8,0 @@ import React, { useEffect } from 'react';

6

src/svelte/JavascriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```js

@@ -2,0 +8,0 @@ <script>

7

src/svelte/TypescriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```ts

@@ -63,3 +69,2 @@ <script lang="ts">

</div>
</script>
```

12

src/vue/JavascriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```js

@@ -13,3 +19,3 @@ <template>

<script>
import { ref, onMounted } from 'vue';
import { onMounted } from 'vue';
import { embed } from 'mirax-player';

@@ -20,3 +26,3 @@

setup() {
const videos = ref([
const videos = ([
{

@@ -57,3 +63,3 @@ videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',

onMounted(() => {
embed(videos.value);
embed(videos);
});

@@ -60,0 +66,0 @@

12

src/vue/TypescriptEmbed.md

@@ -0,1 +1,7 @@

You can find the css styles for these embed videos
mirax-player/
|-- css-embed/css.md
```ts

@@ -13,6 +19,6 @@ <template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onMounted } from 'vue';
import { embed } from 'mirax-player';
const videos = ref<VideoConfig[]>([
const videos = <VideoConfig[]>([
{

@@ -53,3 +59,3 @@ videoUrl: 'https://www.tiktok.com/@scout2015/video/6718335390845095173',

onMounted(() => {
embed(videos.value);
embed(videos);
});

@@ -56,0 +62,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc