Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mirax-player
Advanced tools
mirax-player - npm Package Compare versions
Comparing version 3.4.0 to 4.0.0-alpha.1
| const embedTiktok = (playerRef) => { | ||
@@ -117,30 +116,33 @@ const videoUrl = playerRef.getAttribute("data-mirax-embed"); | ||
| const emHeight = playerRef.getAttribute("data-mirax-height"); | ||
| const emFS = playerRef.getAttribute("data-mirax-fullscreen"); | ||
| const emControls = playerRef.getAttribute("data-mirax-controls"); | ||
| const inputEmbedClip = document.createElement('style'); | ||
| document.head.appendChild(inputEmbedClip); | ||
| const inputEmbedClipStyle = ` | ||
| .mirax-embed-class { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: ${emWidth}px; | ||
| height:${emHeight}px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .mirax-embed-class iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| const inputEmbedClipStyle = ` | ||
| .mirax-embed-class { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: ${emWidth}px; | ||
| height:${emHeight}px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .mirax-embed-class iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| `; | ||
| inputEmbedClip.appendChild(document.createTextNode(inputEmbedClipStyle)); | ||
| const ytFullscreen = emFS === 'true' ? 1 : 0; // Convert string to boolean | ||
| const ytControls = emControls === 'true' ? 1 : 0; // Convert string to boolean | ||
| if (playerRef) { | ||
@@ -152,3 +154,7 @@ new window.YT.Player(playerRef, { | ||
| height: emHeight, // Use the e-height attribute | ||
| playerVars: { | ||
| fs: ytFullscreen, | ||
| controls: ytControls, | ||
| ...params.playerVars // Include other playerVars from params | ||
| } | ||
| }); | ||
@@ -197,2 +203,3 @@ } | ||
| const emHeight = playerRef.getAttribute("data-mirax-height"); | ||
| const emControls = playerRef.getAttribute("data-mirax-controls"); | ||
@@ -244,2 +251,3 @@ | ||
| height: emHeight, // Use the e-height attribute | ||
| controls: emControls, | ||
| }); | ||
@@ -277,3 +285,3 @@ | ||
| else if (videoUrl.includes("tiktok.com") || videoUrl.includes("tiktok")) { | ||
| embedTiktok(playerRef, params); | ||
| embedTiktok(playerRef, params); // Pass the params argument | ||
| } else { | ||
@@ -284,2 +292,3 @@ throw new Error("Invalid video URL"); | ||
| export default miraxEmbed; | ||
@@ -286,0 +295,0 @@ |
| import './miraxplayerUI.js'; | ||
| function miraxplayer(videoClip, { playerTheme, progressTheme }) { | ||
| function miraxplayer(videoClip) { | ||
| // Check if the control elements have already been created | ||
| const existingControls = videoClip.parentNode.querySelector('.mirax-theme'); | ||
| if (existingControls) { | ||
| return; | ||
| // Check if the control elements have already been created | ||
| const existingControls = videoClip.parentNode.querySelector('.mirax-theme'); | ||
| if (existingControls) { | ||
| return; | ||
| } | ||
| // Create control elements | ||
| const controlDiv = document.createElement("div"); | ||
| // Append the control div to the videoClip element's parent node | ||
| videoClip.parentNode.appendChild(controlDiv); | ||
| // Error Handler if video file not exist or not found | ||
| videoClip.addEventListener("error", function (e) { | ||
| // Check the networkState | ||
| if (this.networkState > 2) { | ||
| // Create a text element | ||
| const videoText = document.createElement("p"); | ||
| // Set the text content | ||
| videoText.textContent = "Video not found"; | ||
| // Set the class name | ||
| videoText.className = "video-text"; | ||
| // Append the text element to the video element's parent node | ||
| this.parentNode.appendChild(videoText); | ||
| } | ||
| // Create control elements | ||
| const controlDiv = document.createElement("div"); | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // Player THEME | ||
| // | ||
| //*********************************************// | ||
| const playerTheme = videoClip.getAttribute("data-mirax-player-theme"); | ||
| controlDiv.className = "mirax-theme"; | ||
| controlDiv.style.backgroundColor = playerTheme; | ||
| //**********************************************// | ||
| // | ||
| // PIP ( Picture in Picture ) | ||
| // | ||
| //*********************************************// | ||
| const pipButton = document.createElement('mirax'); | ||
| pipButton.className = 'pip-button'; | ||
| controlDiv.appendChild(pipButton); | ||
| pipButton.addEventListener('click', () => { | ||
| if (document.pictureInPictureElement) { | ||
| // Exit PiP | ||
| document.exitPictureInPicture(); | ||
| } else if (videoClip !== document.pictureInPictureElement) { | ||
| // Request PiP | ||
| videoClip.requestPictureInPicture(); | ||
| } | ||
| }); | ||
| videoClip.addEventListener('enterpictureinpicture', handleEnterPiP); | ||
| videoClip.addEventListener('leavepictureinpicture', handleLeavePiP); | ||
| // Append the control div to the videoClip element's parent node | ||
| videoClip.parentNode.appendChild(controlDiv); | ||
| function handleEnterPiP(event) { | ||
| // Update UI or perform actions when entering PiP | ||
| console.log('Ente#FF004F PiP mode'); | ||
| } | ||
| function handleLeavePiP(event) { | ||
| // Update UI or perform actions when leaving PiP | ||
| console.log('Exited PiP mode'); | ||
| } | ||
| // Error Handler if video file not exist or not found | ||
| videoClip.addEventListener("error", function (e) { | ||
| // Check the networkState | ||
| if (this.networkState > 2) { | ||
| // Create a text element | ||
| const videoText = document.createElement("p"); | ||
| // Set the text content | ||
| videoText.textContent = "Video not found"; | ||
| // Set the class name | ||
| videoText.className = "video-text"; | ||
| // Append the text element to the video element's parent node | ||
| this.parentNode.appendChild(videoText); | ||
| } | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // PIP ( Picture in Picture ) | ||
| // | ||
| //*********************************************// | ||
| const pipButton = document.createElement('mirax'); | ||
| pipButton.className = 'pip-button'; | ||
| controlDiv.appendChild(pipButton); | ||
| pipButton.addEventListener('click', () => { | ||
| document.addEventListener('keydown', (event) => { | ||
| // Check if Alt+P is pressed | ||
| if (event.altKey && event.code === 'KeyP') { | ||
| // Toggle PiP mode | ||
| if (document.pictureInPictureElement) { | ||
| // Exit PiP | ||
| document.exitPictureInPicture(); | ||
| } else if (videoClip !== document.pictureInPictureElement) { | ||
| // Request PiP | ||
| } else { | ||
| videoClip.requestPictureInPicture(); | ||
| } | ||
| }); | ||
| videoClip.addEventListener('enterpictureinpicture', handleEnterPiP); | ||
| videoClip.addEventListener('leavepictureinpicture', handleLeavePiP); | ||
| function handleEnterPiP(event) { | ||
| // Update UI or perform actions when entering PiP | ||
| console.log('Entered PiP mode'); | ||
| } | ||
| function handleLeavePiP(event) { | ||
| // Update UI or perform actions when leaving PiP | ||
| console.log('Exited PiP mode'); | ||
| }); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Play Button | ||
| // | ||
| //*********************************************// | ||
| // Define event listener and function for the play button | ||
| const playButton = document.createElement('mirax'); | ||
| playButton.className = 'play-button'; | ||
| playButton.addEventListener('click', playerButton); | ||
| controlDiv.appendChild(playButton); | ||
| function playerButton() { | ||
| if (videoClip.paused) { | ||
| videoClip.play(); | ||
| playButton.classList.add("pause"); // Add the pause class name | ||
| } else { | ||
| videoClip.pause(); | ||
| playButton.classList.remove("pause"); // Remove the pause class name | ||
| } | ||
| document.addEventListener('keydown', (event) => { | ||
| // Check if Alt+P is pressed | ||
| if (event.altKey && event.code === 'KeyP') { | ||
| // Toggle PiP mode | ||
| if (document.pictureInPictureElement) { | ||
| document.exitPictureInPicture(); | ||
| } else { | ||
| videoClip.requestPictureInPicture(); | ||
| } | ||
| } | ||
| }); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Play Button | ||
| // | ||
| //*********************************************// | ||
| // Define event listener and function for the play button | ||
| const playButton = document.createElement('mirax'); | ||
| playButton.className = 'play-button'; | ||
| playButton.addEventListener('click', playerButton); | ||
| controlDiv.appendChild(playButton); | ||
| function playerButton() { | ||
| if (videoClip.paused) { | ||
| videoClip.play(); | ||
| playButton.classList.add("pause"); // Add the pause class name | ||
| } else { | ||
| videoClip.pause(); | ||
| playButton.classList.remove("pause"); // Remove the pause class name | ||
| } | ||
| } | ||
| // Add event listener to the video element itself to toggle play state | ||
| videoClip.addEventListener('click', () => { | ||
| if (videoClip.paused) { | ||
| videoClip.play(); | ||
| playButton.classList.add("pause"); | ||
| } else { | ||
| videoClip.pause(); | ||
| playButton.classList.remove("pause"); | ||
| } | ||
| // Add event listener to the video element itself to toggle play state | ||
| videoClip.addEventListener('click', () => { | ||
| if (videoClip.paused) { | ||
| videoClip.play(); | ||
| playButton.classList.add("pause"); | ||
| } else { | ||
| videoClip.pause(); | ||
| playButton.classList.remove("pause"); | ||
| } | ||
| }); | ||
| // Update the styles or UI of the play button based on video state | ||
| function updatePlayButton() { | ||
| if (videoClip.paused) { | ||
| playButton.classList.remove("pause"); | ||
| } else { | ||
| playButton.classList.add("pause"); | ||
| } | ||
| }); | ||
| // Update the styles or UI of the play button based on video state | ||
| function updatePlayButton() { | ||
| if (videoClip.paused) { | ||
| playButton.classList.remove("pause"); | ||
| } else { | ||
| playButton.classList.add("pause"); | ||
| } | ||
| // Listen to video play and pause events | ||
| videoClip.addEventListener('play', updatePlayButton); | ||
| videoClip.addEventListener('pause', updatePlayButton); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Play video - press space bar | ||
| // | ||
| //*********************************************// | ||
| // Add keydown event listener to the document | ||
| document.addEventListener('keydown', function(event) { | ||
| // Check if the pressed key is the space bar | ||
| if (event.code === 'Space') { | ||
| // Prevent the default action of scrolling | ||
| event.preventDefault(); | ||
| // Call the same function that you use for the play button | ||
| playerButton(); | ||
| } | ||
| }); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Volume slider | ||
| // | ||
| //*********************************************// | ||
| let prevVolume = 1; | ||
| } | ||
| // Listen to video play and pause events | ||
| videoClip.addEventListener('play', updatePlayButton); | ||
| videoClip.addEventListener('pause', updatePlayButton); | ||
| // Create the volume input element | ||
| const volumeInput = document.createElement('input'); | ||
| volumeInput.type = 'range'; | ||
| volumeInput.className = 'volume-slider'; | ||
| volumeInput.min = '0'; | ||
| volumeInput.max = '1'; | ||
| volumeInput.step = '0.01'; | ||
| volumeInput.defaultValue = '1'; | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Play video - press space bar | ||
| // | ||
| //*********************************************// | ||
| // Add keydown event listener to the document | ||
| document.addEventListener('keydown', function(event) { | ||
| // Check if the pressed key is the space bar | ||
| if (event.code === 'Space') { | ||
| // Prevent the default action of scrolling | ||
| event.preventDefault(); | ||
| // Call the same function that you use for the play button | ||
| playerButton(); | ||
| } | ||
| }); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Volume slider | ||
| // | ||
| //*********************************************// | ||
| let prevVolume = 1; | ||
| // Add event listener to update volume | ||
| volumeInput.addEventListener('input', function() { | ||
| videoClip.volume = parseFloat(this.value); | ||
| }); | ||
| // Create the volume input element | ||
| const volumeInput = document.createElement('input'); | ||
| volumeInput.type = 'range'; | ||
| volumeInput.className = 'volume-slider'; | ||
| volumeInput.min = '0'; | ||
| volumeInput.max = '1'; | ||
| volumeInput.step = '0.01'; | ||
| volumeInput.defaultValue = '1'; | ||
| // Add event listener to update volume | ||
| volumeInput.addEventListener('input', function() { | ||
| videoClip.volume = parseFloat(this.value); | ||
| }); | ||
| controlDiv.appendChild(volumeInput); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Speed Options | ||
| // | ||
| //*********************************************// | ||
| controlDiv.appendChild(volumeInput); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Speaker UI icon | ||
| // | ||
| //*********************************************// | ||
| // Create a div element for the speaker icon container | ||
| const speakerIconContainer = document.createElement('div'); | ||
| speakerIconContainer.className = 'speaker-icon'; | ||
| speakerIconContainer.style.width = '20px'; | ||
| speakerIconContainer.style.height = '50px'; | ||
| speakerIconContainer.style.position = 'absolute'; | ||
| speakerIconContainer.style.marginRight = '34px'; | ||
| speakerIconContainer.style.right = '0'; // Set the right property to auto | ||
| speakerIconContainer.style.cursor = 'pointer'; | ||
| // Get the volume slider element | ||
| const volumeSlider = document.querySelector('.volume-slider'); | ||
| volumeSlider.style.opacity = '0'; // Initially hide the volume slider | ||
| // Add a mouseenter event listener to show the volume slider when hovering over the speaker icon | ||
| speakerIconContainer.addEventListener('mouseenter', () => { | ||
| volumeSlider.style.opacity = '1'; | ||
| //**********************************************// | ||
| // | ||
| // Speed Options | ||
| // | ||
| //*********************************************// | ||
| // Create a div element for the gear icon container | ||
| const gearIconContainer = document.createElement('div'); | ||
| gearIconContainer.className = 'gear-icon'; | ||
| gearIconContainer.style.width = '12px'; | ||
| gearIconContainer.style.height = '12px'; | ||
| gearIconContainer.style.position = 'absolute'; | ||
| gearIconContainer.style.right = '39px'; | ||
| gearIconContainer.style.top = '9px'; | ||
| gearIconContainer.style.cursor = 'pointer'; | ||
| // Create a div element for the gear outer circle | ||
| const outerCircle = document.createElement('div'); | ||
| outerCircle.className = 'outer-circle'; | ||
| outerCircle.style.width = '12px'; | ||
| outerCircle.style.height = '12px'; | ||
| outerCircle.style.border = '1px solid white'; // Adjust border properties as needed | ||
| outerCircle.style.borderRadius = '50%'; | ||
| outerCircle.style.position = 'absolute'; | ||
| outerCircle.style.boxSizing = 'border-box'; | ||
| const horizontalLine = document.createElement('div'); | ||
| horizontalLine.className = 'horizontal-line'; | ||
| horizontalLine.style.width = '6px'; // Adjust the width as needed | ||
| horizontalLine.style.height = '2px'; | ||
| horizontalLine.style.backgroundColor = 'white'; // Change color as needed | ||
| horizontalLine.style.position = 'absolute'; | ||
| horizontalLine.style.top = '55%'; | ||
| horizontalLine.style.left = '35%'; | ||
| horizontalLine.style.transform = 'translate(-50%, -50%)'; | ||
| // Create a div element for the vertical line of the "L" flip shape | ||
| const verticalLine = document.createElement('div'); | ||
| verticalLine.className = 'vertical-line'; | ||
| verticalLine.style.width = '2px'; | ||
| verticalLine.style.height = '6px'; // Adjust the height as needed | ||
| verticalLine.style.backgroundColor = 'white'; // Change color as needed | ||
| verticalLine.style.position = 'absolute'; | ||
| verticalLine.style.top = '30%'; | ||
| verticalLine.style.left = '50%'; | ||
| verticalLine.style.transform = 'translate(-50%, -50%)'; | ||
| // Append the horizontal and vertical lines to the gear icon container | ||
| gearIconContainer.appendChild(horizontalLine); | ||
| gearIconContainer.appendChild(verticalLine); | ||
| // Append the outer circle to the gear icon container | ||
| gearIconContainer.appendChild(outerCircle); | ||
| // Add the gear icon container to your player's UI | ||
| controlDiv.appendChild(gearIconContainer); | ||
| // Create a div element for the tooltip | ||
| const tooltip = document.createElement('div'); | ||
| tooltip.className = 'tooltip'; | ||
| tooltip.style.width = '80px'; | ||
| tooltip.style.height = '150px'; | ||
| tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; | ||
| tooltip.style.color = 'white'; | ||
| tooltip.style.position = 'absolute'; | ||
| tooltip.style.display = 'none'; | ||
| tooltip.style.zIndex = '100'; | ||
| tooltip.style.fontFamily = 'Arial, Corbel'; | ||
| tooltip.style.fontWeight = 'normal'; | ||
| tooltip.style.fontSize = '11px'; | ||
| tooltip.style.lineHeight = '19px'; | ||
| // Adjust the top property to make the tooltip appear above the gear icon | ||
| tooltip.style.right = '40px'; | ||
| tooltip.style.bottom = '32px'; // Change this value to position the tooltip above the gear icon | ||
| tooltip.style.padding = '5px'; | ||
| tooltip.style.borderRadius = '4px'; | ||
| // Add speed options to the tooltip | ||
| // Add speed options to the tooltip | ||
| const speedOptions = [ | ||
| { value: 0.25, label: '0.25x' }, | ||
| { value: 0.5, label: '0.5x' }, | ||
| { value: 0.75, label: '0.75x' }, | ||
| { value: 1, label: 'Normal' }, | ||
| { value: 1.25, label: '1.25x' }, | ||
| { value: 1.5, label: '1.5x' }, | ||
| { value: 1.75, label: '1.75x' }, | ||
| { value: 2, label: '2x' } | ||
| ]; | ||
| let selectedOption = null; // Track the selected option | ||
| speedOptions.forEach((option) => { | ||
| const optionElement = document.createElement('div'); | ||
| optionElement.className = 'speed-option'; // Add this class for event handling | ||
| optionElement.textContent = option.label; | ||
| optionElement.style.cursor = 'pointer'; | ||
| tooltip.appendChild(optionElement); | ||
| optionElement.addEventListener('click', () => { | ||
| // Extract the numeric value from the label | ||
| const speedValue = parseFloat(option.value); | ||
| changePlaybackSpeed(speedValue); | ||
| // Update the selected option and indicator | ||
| selectedOption = optionElement; | ||
| updateSelectedIndicator(); | ||
| }); | ||
| // Add a wheel event listener to the volume slider | ||
| volumeSlider.addEventListener('wheel', function (event) { | ||
| // Prevent the default scrolling behavior | ||
| event.preventDefault(); | ||
| // 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 | ||
| let newVolume = parseFloat(this.value) + delta; | ||
| // Ensure the volume stays within the range [0, 1] | ||
| newVolume = Math.max(0, Math.min(1, newVolume)); | ||
| // Update the volume slider value and video volume | ||
| this.value = newVolume; | ||
| videoClip.volume = newVolume; | ||
| // Update the x symbol based on the volume value | ||
| if (newVolume === 0) { | ||
| xSymbol.textContent = 'x'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| } | ||
| // Add mouseover and mouseout event listeners to change background color | ||
| optionElement.addEventListener('mouseover', () => { | ||
| optionElement.style.backgroundColor = 'rgba(45, 85, 255, 0.8)'; // Blue background on hover | ||
| }); | ||
| // Add a mouseleave event listener to hide the volume slider when not hovering over the speaker icon | ||
| speakerIconContainer.addEventListener('mouseleave', () => { | ||
| volumeSlider.style.opacity = '0'; | ||
| }); | ||
| // Add a wheel event listener to the speaker icon container | ||
| speakerIconContainer.addEventListener('wheel', function (event) { | ||
| // Prevent the default scrolling behavior | ||
| event.preventDefault(); | ||
| // 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 | ||
| let newVolume = parseFloat(volumeSlider.value) + delta; | ||
| // Ensure the volume stays within the range [0, 1] | ||
| newVolume = Math.max(0, Math.min(1, newVolume)); | ||
| // Update the volume slider value and video volume | ||
| volumeSlider.value = newVolume; | ||
| videoClip.volume = newVolume; | ||
| // Update the x symbol based on the volume value | ||
| if (newVolume === 0) { | ||
| xSymbol.textContent = 'x'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| optionElement.addEventListener('mouseout', () => { | ||
| // Remove background color on mouseout, but skip the selected option | ||
| if (optionElement !== selectedOption) { | ||
| optionElement.style.backgroundColor = ''; | ||
| } | ||
| }); | ||
| // Add a mouseenter event listener to show the volume slider when hovering over the volume slider | ||
| volumeSlider.addEventListener('mouseenter', () => { | ||
| volumeSlider.style.opacity = '1'; | ||
| }); | ||
| // Add a mouseleave event listener to hide the volume slider when not hovering over the volume slider | ||
| volumeSlider.addEventListener('mouseleave', () => { | ||
| volumeSlider.style.opacity = '0'; | ||
| }); | ||
| // Create a div element for the speaker box | ||
| const speakerBox = document.createElement('div'); | ||
| speakerBox.className = 'box'; | ||
| speakerBox.style.width = '6px'; | ||
| speakerBox.style.height = '6px'; | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerBox.style.borderRadius = '2px'; | ||
| speakerBox.style.position = 'absolute'; | ||
| speakerBox.style.left = '2px'; | ||
| speakerBox.style.top = '22px'; | ||
| // Create a div element for the speaker cone | ||
| const speakerCone = document.createElement('div'); | ||
| speakerCone.className = 'cone'; | ||
| speakerCone.style.width = '0'; | ||
| speakerCone.style.height = '0'; | ||
| speakerCone.style.borderTop = '6px solid transparent'; | ||
| speakerCone.style.borderBottom = '6px solid transparent'; | ||
| speakerCone.style.borderRight = '13px solid white'; // Swap the border-left and border-right properties | ||
| speakerCone.style.borderLeft = '0'; // Swap the border-left and border-right properties | ||
| speakerCone.style.position = 'absolute'; | ||
| speakerCone.style.top = '19px'; | ||
| // Append the speaker box and cone to the speaker icon container | ||
| speakerIconContainer.appendChild(speakerBox); | ||
| speakerIconContainer.appendChild(speakerCone); | ||
| // Append the speaker icon container to the controlDiv | ||
| controlDiv.appendChild(speakerIconContainer); | ||
| //______________________________________________________________________ | ||
| // Create a span element for the ")" symbol | ||
| const xSymbol = document.createElement('span'); | ||
| xSymbol.className = 'x-symbol'; | ||
| xSymbol.textContent = ')'; | ||
| xSymbol.style.fontSize = '12px'; | ||
| xSymbol.style.color = 'white'; // Set the color to white once | ||
| xSymbol.style.position = 'absolute'; | ||
| xSymbol.style.left = '17px'; | ||
| xSymbol.style.top = '18px'; | ||
| xSymbol.style.fontFamily = 'Arial, Corbel'; | ||
| // Append the ")" symbol to the speaker icon container | ||
| speakerIconContainer.appendChild(xSymbol); | ||
| // Add event listener to update volume and x symbol | ||
| volumeInput.addEventListener('input', function () { | ||
| // Use the video element directly | ||
| videoClip.volume = parseFloat(this.value); | ||
| // Update the x symbol based on the volume value | ||
| if (videoClip.volume === 0) { | ||
| xSymbol.textContent = 'x'; | ||
| // Change the background color of the volume slider to red | ||
| volumeInput.style.backgroundColor = 'red'; | ||
| }); | ||
| // Function to update the visual indicator for the selected option | ||
| function updateSelectedIndicator() { | ||
| speedOptionElements.forEach((optionElement) => { | ||
| if (optionElement === selectedOption) { | ||
| 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.borderRadius = '2px'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| optionElement.style.backgroundColor = ''; // Remove background color from other options | ||
| optionElement.style.color = ''; // Remove text color from other options | ||
| } | ||
| }); | ||
| // Add event listener to the speaker icon container | ||
| speakerIconContainer.addEventListener("click", function() { | ||
| // Toggle the mute state of the video element | ||
| videoClip.muted = !videoClip.muted; | ||
| // Change the color of the speaker icon based on the mute state | ||
| if (videoClip.muted) { | ||
| // Set the color to gray | ||
| speakerBox.style.backgroundColor = "red"; | ||
| speakerCone.style.borderRightColor = "red"; | ||
| // Change the background color of the volume slider to red | ||
| xSymbol.textContent = 'x'; | ||
| // Store the current volume value before setting it to zero | ||
| prevVolume = volumeInput.value; | ||
| volumeInput.value = '0'; | ||
| videoClip.volume = 0; | ||
| } else { | ||
| // Set the color to white | ||
| speakerBox.style.backgroundColor = "white"; | ||
| speakerCone.style.borderRightColor = "white"; | ||
| volumeInput.style.backgroundColor = 'white'; | ||
| xSymbol.textContent = ')'; | ||
| // Restore the previous volume value after unmuting | ||
| volumeInput.value = prevVolume; | ||
| videoClip.volume = parseFloat(prevVolume); | ||
| } | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // Progress bar slider with scroll bar, mouse wheel, and keyboard shortcuts | ||
| // | ||
| //*********************************************// | ||
| const progressBar = document.createElement('progress'); | ||
| progressBar.className = 'progress-bar'; | ||
| progressBar.min = '0'; | ||
| progressBar.max = '100'; | ||
| progressBar.value = '0'; | ||
| controlDiv.appendChild(progressBar); | ||
| videoClip.addEventListener('timeupdate', function() { | ||
| const percentPlayed = (videoClip.currentTime / videoClip.duration) * 100; | ||
| progressBar.value = percentPlayed; | ||
| } | ||
| // Add the tooltip to the player's UI | ||
| controlDiv.appendChild(tooltip); | ||
| // Remove the initial 'display: none' style from the tooltip | ||
| tooltip.style.display = 'none'; | ||
| // Add event listeners for mouseover and mouseout to show/hide the tooltip | ||
| gearIconContainer.addEventListener('mouseover', () => showTooltip()); | ||
| tooltip.addEventListener('mouseover', () => showTooltip()); | ||
| tooltip.addEventListener('mouseout', () => hideTooltip()); | ||
| // Function to show the tooltip | ||
| function showTooltip() { | ||
| tooltip.style.display = 'block'; | ||
| } | ||
| // Function to hide the tooltip | ||
| function hideTooltip() { | ||
| tooltip.style.display = 'none'; | ||
| } | ||
| // Add event listeners to the speed options in the tooltip | ||
| const speedOptionElements = tooltip.querySelectorAll('.speed-option'); | ||
| speedOptionElements.forEach((optionElement) => { | ||
| optionElement.addEventListener('click', () => { | ||
| const speedValue = parseFloat(optionElement.textContent); | ||
| changePlaybackSpeed(speedValue); | ||
| }); | ||
| }); | ||
| // Function to change the playback speed of the video | ||
| function changePlaybackSpeed(speed) { | ||
| videoClip.playbackRate = speed; | ||
| hideTooltip(); | ||
| } | ||
| //**********************************************// | ||
| // | ||
| // Speaker UI icon | ||
| // | ||
| //*********************************************// | ||
| let xSymbolInterval; | ||
| // Function to toggle the visibility of the xSymbol | ||
| function toggleXSymbol() { | ||
| xSymbol.style.visibility = xSymbol.style.visibility === 'visible' ? 'hidden' : 'visible'; | ||
| } | ||
| // Add event listener to update xSymbol visibility when video play/pause | ||
| videoClip.addEventListener('play', () => { | ||
| // Start toggling the symbol every 500 milliseconds (adjust timing as needed) | ||
| xSymbolInterval = setInterval(toggleXSymbol, 700); | ||
| xSymbol.style.color = 'white'; | ||
| }); | ||
| videoClip.addEventListener('pause', () => { | ||
| // Stop toggling and make the symbol visible | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.visibility = 'visible'; | ||
| xSymbol.style.color = 'white'; | ||
| }); | ||
| // Create a div element for the speaker icon container | ||
| const speakerIconContainer = document.createElement('div'); | ||
| speakerIconContainer.className = 'speaker-icon'; | ||
| speakerIconContainer.style.width = '20px'; | ||
| speakerIconContainer.style.height = '50px'; | ||
| speakerIconContainer.style.position = 'absolute'; | ||
| speakerIconContainer.style.marginRight = '87px'; | ||
| speakerIconContainer.style.right = '0'; // Set the right property to auto | ||
| speakerIconContainer.style.cursor = 'pointer'; | ||
| // Get the volume slider element | ||
| const volumeSlider = document.querySelector('.volume-slider'); | ||
| volumeSlider.style.opacity = '0'; // Initially hide the volume slider | ||
| // Add a mouseenter event listener to show the volume slider when hovering over the speaker icon | ||
| speakerIconContainer.addEventListener('mouseenter', () => { | ||
| volumeSlider.style.opacity = '1'; | ||
| }); | ||
| // Gear Icon pure javascript: | ||
| // Add a wheel event listener to the volume slider | ||
| volumeSlider.addEventListener('wheel', function (event) { | ||
| // Prevent the default scrolling behavior | ||
| event.preventDefault(); | ||
| // 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 | ||
| let newVolume = parseFloat(this.value) + delta; | ||
| // Ensure the volume stays within the range [0, 1] | ||
| newVolume = Math.max(0, Math.min(1, newVolume)); | ||
| // Update the volume slider value and video volume | ||
| this.value = newVolume; | ||
| videoClip.volume = newVolume; | ||
| // Update the x symbol based on the volume value | ||
| if (newVolume === 0) { | ||
| xSymbol.textContent = 'x'; | ||
| volumeInput.style.backgroundColor = '#FF004F'; | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.visibility = 'visible'; | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = '#FF004F'; | ||
| speakerCone.style.borderRight = '13px solid #FF004F'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| volumeInput.style.backgroundColor = 'white'; | ||
| xSymbolInterval = setInterval(toggleXSymbol, 700); | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerCone.style.borderRight = '13px solid white'; | ||
| } | ||
| }); | ||
| // Add a mouseleave event listener to hide the volume slider when not hovering over the speaker icon | ||
| speakerIconContainer.addEventListener('mouseleave', () => { | ||
| volumeSlider.style.opacity = '0'; | ||
| }); | ||
| // Add a wheel event listener to the speaker icon container | ||
| speakerIconContainer.addEventListener('wheel', function (event) { | ||
| // Prevent the default scrolling behavior | ||
| event.preventDefault(); | ||
| // 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 | ||
| let newVolume = parseFloat(volumeSlider.value) + delta; | ||
| // Ensure the volume stays within the range [0, 1] | ||
| newVolume = Math.max(0, Math.min(1, newVolume)); | ||
| // Update the volume slider value and video volume | ||
| volumeSlider.value = newVolume; | ||
| videoClip.volume = newVolume; | ||
| // Update the x symbol based on the volume value | ||
| if (newVolume === 0) { | ||
| volumeInput.style.backgroundColor = '#FF004F'; | ||
| xSymbol.textContent = 'x'; | ||
| xSymbol.style.fontSize= '11px'; | ||
| xSymbol.style.top = '18px'; | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.visibility = 'visible'; | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = '#FF004F'; | ||
| speakerCone.style.borderRight = '13px solid #FF004F'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| xSymbol.style.fontSize = '8px'; | ||
| xSymbol.style.top = '20px'; | ||
| volumeInput.style.backgroundColor = 'white'; | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerCone.style.borderRight = '13px solid white'; | ||
| } | ||
| }); | ||
| // Add a mouseenter event listener to show the volume slider when hovering over the volume slider | ||
| volumeSlider.addEventListener('mouseenter', () => { | ||
| volumeSlider.style.opacity = '1'; | ||
| progressBar.addEventListener('mousedown', function(e) { | ||
| handleProgressBarClick(e); | ||
| }); | ||
| // Function to handle mouse wheel events | ||
| progressBar.addEventListener('wheel', function(e) { | ||
| e.preventDefault(); // Prevent the default scroll behavior | ||
| const delta = e.deltaY; // Get the scrolling direction (positive or negative) | ||
| const rect = progressBar.getBoundingClientRect(); | ||
| }); | ||
| // Add a mouseleave event listener to hide the volume slider when not hovering over the volume slider | ||
| volumeSlider.addEventListener('mouseleave', () => { | ||
| volumeSlider.style.opacity = '0'; | ||
| }); | ||
| // Create a div element for the speaker box | ||
| const speakerBox = document.createElement('div'); | ||
| speakerBox.className = 'box'; | ||
| speakerBox.style.width = '6px'; | ||
| speakerBox.style.height = '6px'; | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerBox.style.borderRadius = '2px'; | ||
| speakerBox.style.position = 'absolute'; | ||
| speakerBox.style.left = '2px'; | ||
| speakerBox.style.top = '22px'; | ||
| // Create a div element for the speaker cone | ||
| const speakerCone = document.createElement('div'); | ||
| speakerCone.className = 'cone'; | ||
| speakerCone.style.width = '0'; | ||
| speakerCone.style.height = '0'; | ||
| speakerCone.style.borderTop = '6px solid transparent'; | ||
| speakerCone.style.borderBottom = '6px solid transparent'; | ||
| speakerCone.style.borderRight = '13px solid white'; // Swap the border-left and border-right properties | ||
| speakerCone.style.borderLeft = '0'; // Swap the border-left and border-right properties | ||
| speakerCone.style.position = 'absolute'; | ||
| speakerCone.style.top = '19px'; | ||
| // Append the speaker box and cone to the speaker icon container | ||
| speakerIconContainer.appendChild(speakerBox); | ||
| speakerIconContainer.appendChild(speakerCone); | ||
| // Append the speaker icon container to the controlDiv | ||
| controlDiv.appendChild(speakerIconContainer); | ||
| videoClip.addEventListener('play', () => { | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerCone.style.borderRight = '13px solid white'; | ||
| }); | ||
| videoClip.addEventListener('pause', () => { | ||
| // Stop toggling and make the symbol visible | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerCone.style.borderRight = '13px solid white'; | ||
| }); | ||
| //______________________________________________________________________ | ||
| // Create a span element for the ")" symbol | ||
| const xSymbol = document.createElement('span'); | ||
| xSymbol.className = 'x-symbol'; | ||
| xSymbol.textContent = ')'; | ||
| xSymbol.style.fontSize = '8px'; | ||
| xSymbol.style.color = 'white'; // Set the color to white once | ||
| xSymbol.style.position = 'absolute'; | ||
| xSymbol.style.left = '15px'; | ||
| xSymbol.style.top = '20px'; | ||
| xSymbol.style.fontFamily = 'Arial, Corbel'; | ||
| // Append the ")" symbol to the speaker icon container | ||
| speakerIconContainer.appendChild(xSymbol); | ||
| // Add event listener to update volume and x symbol | ||
| volumeInput.addEventListener('input', function () { | ||
| // Use the video element directly | ||
| videoClip.volume = parseFloat(this.value); | ||
| // Update the x symbol based on the volume value | ||
| if (videoClip.volume === 0) { | ||
| xSymbol.textContent = 'x'; | ||
| xSymbol.style.fontSize = '11px'; | ||
| xSymbol.style.top = '18px'; | ||
| // Change the background color of the volume slider to #FF004F | ||
| volumeInput.style.backgroundColor = '#FF004F'; | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.visibility = 'visible'; | ||
| xSymbol.style.color = 'white'; | ||
| } else { | ||
| xSymbol.textContent = ')'; | ||
| xSymbol.style.fontSize = '8px'; | ||
| xSymbol.style.top = '20px'; | ||
| volumeInput.style.backgroundColor = 'white'; | ||
| xSymbolInterval = setInterval(toggleXSymbol, 700); | ||
| xSymbol.style.color = 'white'; | ||
| } | ||
| }); | ||
| // Add event listener to the speaker icon container | ||
| speakerIconContainer.addEventListener("click", function() { | ||
| // Toggle the mute state of the video element | ||
| videoClip.muted = !videoClip.muted; | ||
| // Change the color of the speaker icon based on the mute state | ||
| if (videoClip.muted) { | ||
| // Set the color to gray | ||
| speakerBox.style.backgroundColor = "#FF004F"; | ||
| speakerCone.style.borderRightColor = "#FF004F"; | ||
| // Change the background color of the volume slider to #FF004F | ||
| xSymbol.textContent = 'x'; | ||
| xSymbol.style.fontSize = '11px'; | ||
| xSymbol.style.top = '18px'; | ||
| volumeInput.style.backgroundColor = '#FF004F'; | ||
| prevVolume = volumeInput.value; | ||
| volumeInput.value = '0'; | ||
| videoClip.volume = 0; | ||
| clearInterval(xSymbolInterval); | ||
| xSymbol.style.visibility = 'visible'; | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = '#FF004F'; | ||
| speakerCone.style.borderRight = '13px solid #FF004F'; | ||
| } else { | ||
| // Set the color to white | ||
| speakerBox.style.backgroundColor = "white"; | ||
| speakerCone.style.borderRightColor = "white"; | ||
| volumeInput.style.backgroundColor = 'white'; | ||
| xSymbol.textContent = ')'; | ||
| xSymbol.style.fontSize = '8px'; | ||
| xSymbol.style.top = '20px'; | ||
| // Restore the previous volume value after unmuting | ||
| volumeInput.value = prevVolume; | ||
| videoClip.volume = parseFloat(prevVolume); | ||
| xSymbolInterval = setInterval(toggleXSymbol, 700); | ||
| xSymbol.style.color = 'white'; | ||
| speakerBox.style.backgroundColor = 'white'; | ||
| speakerCone.style.borderRight = '13px solid white'; | ||
| } | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // Progress bar slider with scroll bar, mouse wheel, and keyboard shortcuts | ||
| // | ||
| //*********************************************// | ||
| const progressBar = document.createElement('progress'); | ||
| progressBar.className = 'progress-bar'; | ||
| progressBar.min = '0'; | ||
| progressBar.max = '100'; | ||
| progressBar.value = '0'; | ||
| controlDiv.appendChild(progressBar); | ||
| videoClip.addEventListener('timeupdate', function() { | ||
| const percentPlayed = (videoClip.currentTime / videoClip.duration) * 100; | ||
| progressBar.value = percentPlayed; | ||
| }); | ||
| progressBar.addEventListener('mousedown', function(e) { | ||
| handleProgressBarClick(e); | ||
| }); | ||
| // Function to handle mouse wheel events | ||
| progressBar.addEventListener('wheel', function(e) { | ||
| e.preventDefault(); // Prevent the default scroll behavior | ||
| const delta = e.deltaY; // Get the scrolling direction (positive or negative) | ||
| const rect = progressBar.getBoundingClientRect(); | ||
| const offsetX = e.clientX - rect.left; | ||
| const newProgress = (offsetX / rect.width) * 100; | ||
| // Adjust the video's current time based on the scrolling direction | ||
| const step = 1; // You can adjust the step size as needed | ||
| const currentTime = videoClip.currentTime + (delta > 0 ? step : -step); | ||
| // Ensure the currentTime stays within the video's duration limits | ||
| videoClip.currentTime = Math.min(Math.max(currentTime, 0), videoClip.duration); | ||
| // Update the progress bar value | ||
| progressBar.value = (videoClip.currentTime / videoClip.duration) * 100; | ||
| }); | ||
| function handleProgressBarClick(e) { | ||
| const rect = progressBar.getBoundingClientRect(); | ||
| const offsetX = e.clientX - rect.left; | ||
| const newProgress = (offsetX / rect.width) * 100; | ||
| videoClip.currentTime = (newProgress / 100) * videoClip.duration; | ||
| const onMouseMove = function(e) { | ||
| const offsetX = e.clientX - rect.left; | ||
| const newProgress = (offsetX / rect.width) * 100; | ||
| // Adjust the video's current time based on the scrolling direction | ||
| const step = 1; // You can adjust the step size as needed | ||
| const currentTime = videoClip.currentTime + (delta > 0 ? step : -step); | ||
| // Ensure the currentTime stays within the video's duration limits | ||
| videoClip.currentTime = Math.min(Math.max(currentTime, 0), videoClip.duration); | ||
| // Update the progress bar value | ||
| progressBar.value = (videoClip.currentTime / videoClip.duration) * 100; | ||
| }); | ||
| function handleProgressBarClick(e) { | ||
| const rect = progressBar.getBoundingClientRect(); | ||
| const offsetX = e.clientX - rect.left; | ||
| const newProgress = (offsetX / rect.width) * 100; | ||
| videoClip.currentTime = (newProgress / 100) * videoClip.duration; | ||
| const onMouseMove = function(e) { | ||
| const offsetX = e.clientX - rect.left; | ||
| const newProgress = (offsetX / rect.width) * 100; | ||
| videoClip.currentTime = (newProgress / 100) * videoClip.duration; | ||
| }; | ||
| const onMouseUp = function() { | ||
| document.removeEventListener('mousemove', onMouseMove); | ||
| document.removeEventListener('mouseup', onMouseUp); | ||
| }; | ||
| document.addEventListener('mousemove', onMouseMove); | ||
| document.addEventListener('mouseup', onMouseUp); | ||
| }; | ||
| const onMouseUp = function() { | ||
| document.removeEventListener('mousemove', onMouseMove); | ||
| document.removeEventListener('mouseup', onMouseUp); | ||
| }; | ||
| document.addEventListener('mousemove', onMouseMove); | ||
| document.addEventListener('mouseup', onMouseUp); | ||
| } | ||
| // Function to handle keyboard shortcuts | ||
| document.addEventListener('keydown', function(e) { | ||
| if (e.key === 'ArrowLeft') { | ||
| // Rewind the video by 10 seconds | ||
| videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0); | ||
| e.preventDefault(); // Prevent the default behavior of scrolling the page | ||
| } else if (e.key === 'ArrowRight') { | ||
| // Forward the video by 10 seconds | ||
| videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration); | ||
| e.preventDefault(); // Prevent the default behavior of scrolling the page | ||
| } | ||
| // Function to handle keyboard shortcuts | ||
| document.addEventListener('keydown', function(e) { | ||
| if (e.key === 'ArrowLeft') { | ||
| // Rewind the video by 10 seconds | ||
| videoClip.currentTime = Math.max(videoClip.currentTime - 10, 0); | ||
| e.preventDefault(); // Prevent the default behavior of scrolling the page | ||
| } else if (e.key === 'ArrowRight') { | ||
| // Forward the video by 10 seconds | ||
| videoClip.currentTime = Math.min(videoClip.currentTime + 10, videoClip.duration); | ||
| e.preventDefault(); // Prevent the default behavior of scrolling the page | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // Dynamic Player Width | ||
| // | ||
| //*********************************************// | ||
| const dynamicWidth = videoClip.getAttribute("data-mirax-player-width"); | ||
| const dynamicFloat = videoClip.getAttribute("data-mirax-player-float"); | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .mirax-player { | ||
| min-width:350px; | ||
| max-width: ${dynamicWidth + 400}px; | ||
| width: 100%; /* This ensures the video fills its container while respecting max-width */ | ||
| height: auto; /* This maintains the video's aspect ratio */ | ||
| min-height:100px; | ||
| max-height:450px; | ||
| background-color: #000000; | ||
| margin: 0 auto; | ||
| } | ||
| /* Hide the control div by default */ | ||
| .mirax-theme { | ||
| display: none; | ||
| transition: transform 0.3s; | ||
| } | ||
| /* 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; | ||
| width: 100%; | ||
| height: 20px; | ||
| min-width:350px; | ||
| max-width:${dynamicWidth -30}px; | ||
| margin-top:-44px; | ||
| bottom: 0; | ||
| left: 10; | ||
| background-color: rgba(0, 0, 0, 0.3); | ||
| color: #fff; | ||
| padding-top:5px; | ||
| padding-bottom:5px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border-radius:3px; | ||
| } | ||
| .progress-bar { | ||
| position: absolute; | ||
| width: 100%; | ||
| max-width:390px; | ||
| height:8px; | ||
| float: left; | ||
| margin-left: 190px; | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| border-style: none; | ||
| } | ||
| .mirax-player-class { | ||
| margin: 0 auto; | ||
| width: 100%; | ||
| max-width: ${dynamicWidth}px; | ||
| position: relative; | ||
| float: ${dynamicFloat}; | ||
| text-align: center; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| if (dynamicWidth < 800) { | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 50%; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| } | ||
| if (dynamicWidth < 640) { | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 35%; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| } | ||
| if (dynamicWidth < 540) { | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 20%; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| } | ||
| if (dynamicWidth < 440) { | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .progress-bar { | ||
| margin-left:170px; | ||
| min-width:30px; | ||
| width: 16%; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| } | ||
| const miraxStyleMediaQuery10 = document.createElement('style'); | ||
| document.head.appendChild(miraxStyleMediaQuery10); | ||
| // Define the media query and its associated CSS rules | ||
| const mediaQuery10 = ` | ||
| @media (max-width: 740px) { | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 40%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| }); | ||
| //**********************************************// | ||
| // | ||
| // Timestamp Math System | ||
| // | ||
| //*********************************************// | ||
| // After creating the currentTimeDiv | ||
| const currentTimeDiv = document.createElement('div'); | ||
| currentTimeDiv.className = 'current-time'; | ||
| controlDiv.appendChild(currentTimeDiv); | ||
| // After creating the timeDurationDiv | ||
| const timeDurationDiv = document.createElement('div'); | ||
| timeDurationDiv.className = 'time-duration'; | ||
| controlDiv.appendChild(timeDurationDiv); | ||
| // Set the initial margin-left to 40px for timeDurationDiv | ||
| timeDurationDiv.style.marginLeft = '100px'; | ||
| currentTimeDiv.style.marginLeft = '70px'; | ||
| currentTimeDiv.style.textAlign = 'right'; | ||
| // Listen to the timeupdate event to update the current time and adjust margin | ||
| videoClip.addEventListener('timeupdate', updateCurrentTime); | ||
| // Function to update the current time in the currentTimeDiv | ||
| function updateCurrentTime() { | ||
| const currentTime = videoClip.currentTime; | ||
| const formattedTime = formatTime(currentTime); | ||
| currentTimeDiv.textContent = formattedTime; | ||
| timeDurationDiv.style.opacity = '1'; | ||
| // Check if the current time is greater than or equal to 1 minute (01:00) | ||
| if (currentTime >= 60) { | ||
| // Reduce marginLeft by 70px | ||
| currentTimeDiv.style.marginLeft = '70px'; | ||
| } | ||
| `; | ||
| miraxStyleMediaQuery10.appendChild(document.createTextNode(mediaQuery10)); | ||
| const miraxStyleMediaQuery101 = document.createElement('style'); | ||
| document.head.appendChild(miraxStyleMediaQuery101); | ||
| // Define the media query and its associated CSS rules | ||
| const mediaQuery101 = ` | ||
| @media (max-width: 510px) { | ||
| .progress-bar { | ||
| min-width:20px; | ||
| margin-left: 184px; | ||
| width: 30%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| // Check if the current time is greater than or equal to 10 minutes (10:00) | ||
| if (currentTime >= 600) { | ||
| // Reduce marginLeft by 62px | ||
| currentTimeDiv.style.marginLeft = '62px'; | ||
| } | ||
| `; | ||
| miraxStyleMediaQuery101.appendChild(document.createTextNode(mediaQuery101)); | ||
| const miraxStyleMediaQuery102 = document.createElement('style'); | ||
| document.head.appendChild(miraxStyleMediaQuery102); | ||
| // Define the media query and its associated CSS rules | ||
| const mediaQuery102 = ` | ||
| @media (max-width: 440px) { | ||
| .progress-bar { | ||
| min-width:20px; | ||
| margin-left: 184px; | ||
| width: 20%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| // Check if the current time is greater than or equal to 1 hour (01:00:00) | ||
| if (currentTime >= 3600) { | ||
| // Reduce marginLeft by 45px | ||
| currentTimeDiv.style.marginLeft = '45px'; | ||
| } | ||
| `; | ||
| miraxStyleMediaQuery102.appendChild(document.createTextNode(mediaQuery102)); | ||
| const miraxStyleMediaQuery103 = document.createElement('style'); | ||
| document.head.appendChild(miraxStyleMediaQuery103); | ||
| // Define the media query and its associated CSS rules | ||
| const mediaQuery103 = ` | ||
| @media (max-width: 370px) { | ||
| .progress-bar { | ||
| min-width:20px; | ||
| margin-left: 184px; | ||
| width: 17%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| // Check if the current time is greater than or equal to 10 hour (10:00:00) | ||
| if (currentTime >= 36000) { | ||
| // Reduce marginLeft by 42px | ||
| currentTimeDiv.style.marginLeft = '42px'; | ||
| } | ||
| `; | ||
| miraxStyleMediaQuery103.appendChild(document.createTextNode(mediaQuery103)); | ||
| //**********************************************// | ||
| // | ||
| // Timestamp Math System | ||
| // | ||
| //*********************************************// | ||
| // After creating the currentTimeDiv | ||
| const currentTimeDiv = document.createElement('div'); | ||
| currentTimeDiv.className = 'current-time'; | ||
| controlDiv.appendChild(currentTimeDiv); | ||
| // After creating the timeDurationDiv | ||
| const timeDurationDiv = document.createElement('div'); | ||
| timeDurationDiv.className = 'time-duration'; | ||
| controlDiv.appendChild(timeDurationDiv); | ||
| // Set the initial margin-left to 40px for timeDurationDiv | ||
| timeDurationDiv.style.marginLeft = '100px'; | ||
| currentTimeDiv.style.marginLeft = '70px'; | ||
| currentTimeDiv.style.textAlign = 'right'; | ||
| // Listen to the timeupdate event to update the current time and adjust margin | ||
| videoClip.addEventListener('timeupdate', updateCurrentTime); | ||
| // Function to update the current time in the currentTimeDiv | ||
| function updateCurrentTime() { | ||
| const currentTime = videoClip.currentTime; | ||
| const formattedTime = formatTime(currentTime); | ||
| currentTimeDiv.textContent = formattedTime; | ||
| timeDurationDiv.style.opacity = '1'; | ||
| // Check if the current time is greater than or equal to 1 minute (01:00) | ||
| if (currentTime >= 60) { | ||
| // #FF004Fuce marginLeft by 70px | ||
| currentTimeDiv.style.marginLeft = '70px'; | ||
| } | ||
| // Check if the current time is greater than or equal to 10 minutes (10:00) | ||
| if (currentTime >= 600) { | ||
| // #FF004Fuce marginLeft by 62px | ||
| currentTimeDiv.style.marginLeft = '62px'; | ||
| } | ||
| // Check if the current time is greater than or equal to 1 hour (01:00:00) | ||
| if (currentTime >= 3600) { | ||
| // #FF004Fuce marginLeft by 45px | ||
| currentTimeDiv.style.marginLeft = '45px'; | ||
| } | ||
| // Check if the current time is greater than or equal to 10 hour (10:00:00) | ||
| if (currentTime >= 36000) { | ||
| // #FF004Fuce marginLeft by 42px | ||
| currentTimeDiv.style.marginLeft = '42px'; | ||
| } | ||
| } | ||
| // Function to update time duration | ||
| function updateDuration(videoClip, timeDurationDiv) { | ||
| if (!isNaN(videoClip.duration)) { | ||
| const formattedDuration = formatTime(videoClip.duration); | ||
| timeDurationDiv.textContent = formattedDuration; | ||
| } | ||
| } | ||
| // Function to format time in HH:MM:SS with conditional zero-padding | ||
| function formatTime(seconds) { | ||
| const hours = Math.floor(seconds / 3600); | ||
| const minutes = Math.floor((seconds % 3600) / 60); | ||
| const secs = Math.floor(seconds % 60); | ||
| let formattedTime = ''; | ||
| if (hours >= 1) { | ||
| formattedTime += `${hours.toString()}:`; | ||
| } | ||
| formattedTime += `${minutes.toString().padStart(1, '0')}:${secs.toString().padStart(2, '0')}`; | ||
| return formattedTime; | ||
| } | ||
| // Set initial content of currentTimeDiv | ||
| currentTimeDiv.textContent = formatTime(0); | ||
| // Listen to the timeupdate event to update the current time and adjust margin | ||
| videoClip.addEventListener('timeupdate', updateCurrentTime); | ||
| // Listen to the loadedmetadata event to update time duration and adjust margin | ||
| videoClip.addEventListener('loadedmetadata', () => updateDuration(videoClip, timeDurationDiv)); | ||
| //**********************************************// | ||
| // | ||
| // Progress bar value color | ||
| // | ||
| //*********************************************// | ||
| const playerBar = videoClip.getAttribute("data-mirax-player-bar"); | ||
| var color_progress_bar = playerBar; | ||
| const inputProgressBar = document.createElement('style'); | ||
| document.head.appendChild(inputProgressBar); | ||
| const inputProgressBarStyle = ` | ||
| progress::-webkit-progress-bar { | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| } | ||
| progress::-webkit-progress-value { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| progress[value]::-moz-progress-bar { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| progress::-ms-fill { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| `; | ||
| inputProgressBar.appendChild(document.createTextNode(inputProgressBarStyle)); | ||
| //**********************************************// | ||
| // | ||
| // Double Click Fullscreen | ||
| // | ||
| //*********************************************// | ||
| videoClip.addEventListener('dblclick', toggleFullscreen); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Fullscreen Button | ||
| // | ||
| //*********************************************// | ||
| // Existing code for the fullscreen button | ||
| const fullscreenButton = document.createElement('mirax'); | ||
| fullscreenButton.className = 'fullscreen'; | ||
| controlDiv.appendChild(fullscreenButton); | ||
| fullscreenButton.addEventListener('click', toggleFullscreen); | ||
| function toggleFullscreen() { | ||
| if (document.documentElement.requestFullscreen) { | ||
| if (!document.fullscreenElement) { | ||
| document.documentElement.requestFullscreen(); | ||
| } else { | ||
| document.exitFullscreen(); | ||
| } | ||
| } | ||
| // Function to update time duration | ||
| function updateDuration(videoClip, timeDurationDiv) { | ||
| if (!isNaN(videoClip.duration)) { | ||
| const formattedDuration = formatTime(videoClip.duration); | ||
| timeDurationDiv.textContent = formattedDuration; | ||
| } | ||
| // Add an event listener to handle fullscreen change events | ||
| document.addEventListener('fullscreenchange', () => { | ||
| if (document.fullscreenElement === document.documentElement) { | ||
| // Mirax player container is in fullscreen mode, update your UI here | ||
| // You can modify the player's CSS or perform other actions | ||
| document.body.style.overflow = 'hidden'; // Prevent scrolling | ||
| document.documentElement.style.backgroundColor = '#000'; // Set background color | ||
| document.body.style.margin = '0'; // Remove body margin | ||
| document.body.style.padding = '0'; // Remove body padding | ||
| document.documentElement.style.margin = '0'; // Remove html margin | ||
| document.documentElement.style.padding = '0'; // Remove html padding | ||
| const miraxPlayer = document.querySelector('.mirax-player'); | ||
| const miraxTheme = document.querySelector('.mirax-theme'); | ||
| let hideTimer; | ||
| miraxPlayer.addEventListener('mousemove', () => { | ||
| // Mouse is moving, show the control div with a fade-in effect | ||
| miraxTheme.style.opacity = 1; | ||
| miraxTheme.style.transition = 'opacity 0.3s'; | ||
| // Clear the previous hide timer | ||
| clearTimeout(hideTimer); | ||
| // Set a new timer to hide the control div after 7 seconds of inactivity | ||
| hideTimer = setTimeout(() => { | ||
| // Hide the control div with a fade-out effect | ||
| miraxTheme.style.opacity = 0; | ||
| }, 7000); // 7000 milliseconds (7 seconds) | ||
| }); | ||
| // Initially hide the control div | ||
| miraxTheme.style.opacity = 0; | ||
| miraxTheme.style.transition = 'opacity 0.3s'; | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .mirax-player { | ||
| min-width: 350px; | ||
| max-width: 100%; | ||
| width: 100%; | ||
| height: auto; | ||
| min-height: 100px; | ||
| max-height: 100%; | ||
| background-color: #000000; | ||
| margin: 0 auto; | ||
| } | ||
| /* Initially hide the control div */ | ||
| .mirax-theme { | ||
| opacity: 0; | ||
| transition: opacity 0.3s; | ||
| } | ||
| /* Show the control div when hovering over the video or itself */ | ||
| .mirax-player:hover + .mirax-theme, | ||
| .mirax-theme:hover { | ||
| margin: 0 auto; | ||
| position: relative; | ||
| width: 100%; | ||
| height: 20px; | ||
| min-width: 350px; | ||
| max-width: 97%; | ||
| margin-top: -44px; | ||
| bottom: 0; | ||
| left: 10; | ||
| background-color: rgba(0, 0, 0, 0.3); | ||
| color: #fff; | ||
| padding-top: 5px; | ||
| padding-bottom: 5px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border-radius: 3px; | ||
| transition: opacity 10s; | ||
| } | ||
| .progress-bar { | ||
| position: absolute; | ||
| width: 100%; | ||
| max-width: 75%; | ||
| height: 8px; | ||
| float: left; | ||
| margin-left: 190px; | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| border-style: none; | ||
| } | ||
| .mirax-player-class { | ||
| margin: 0 auto; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| position: relative; | ||
| text-align: center; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| videoClip.classList.add('fullscreen-mode'); | ||
| } else { | ||
| // Mirax player container exited fullscreen mode, update your UI here | ||
| // Restore the player's original UI | ||
| videoClip.classList.remove('fullscreen-mode'); | ||
| const miraxPlayer = document.querySelector('.mirax-player'); | ||
| const miraxTheme = document.querySelector('.mirax-theme'); | ||
| let hideTimer; | ||
| miraxPlayer.addEventListener('mousemove', () => { | ||
| // Mouse is moving, show the control div with a fade-in effect | ||
| miraxTheme.style.opacity = 1; | ||
| miraxTheme.style.transition = 'opacity 0.3s'; | ||
| // Clear the previous hide timer | ||
| clearTimeout(hideTimer); | ||
| // Set a new timer to hide the control div after 7 seconds of inactivity | ||
| hideTimer = setTimeout(() => { | ||
| // Hide the control div with a fade-out effect | ||
| miraxTheme.style.opacity = 1; | ||
| }, 7000); // 7000 milliseconds (7 seconds) | ||
| }); | ||
| // Initially hide the control div | ||
| miraxTheme.style.opacity = 1; | ||
| miraxTheme.style.transition = 'opacity 0.3s'; | ||
| const inputPlayerClip = document.createElement('style'); | ||
| document.head.appendChild(inputPlayerClip); | ||
| const inputPlayerClipStyle = ` | ||
| .mirax-player { | ||
| min-width:350px; | ||
| max-width: ${dynamicWidth + 400}px; | ||
| width: 100%; /* This ensures the video fills its container while respecting max-width */ | ||
| height: auto; /* This maintains the video's aspect ratio */ | ||
| min-height:100px; | ||
| max-height:450px; | ||
| background-color: #000000; | ||
| margin: 0 auto; | ||
| } | ||
| /* Hide the control div by default */ | ||
| .mirax-theme { | ||
| display: none; | ||
| transition: transform 0.3s; | ||
| } | ||
| /* Show the control div when hovering over the video or itself */ | ||
| .mirax-player:hover + .mirax-theme, | ||
| .mirax-theme:hover { | ||
| display: block; | ||
| opacity: 1; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| width: 100%; | ||
| height: 20px; | ||
| min-width:350px; | ||
| max-width:${dynamicWidth -30}px; | ||
| margin-top:-44px; | ||
| bottom: 0; | ||
| left: 10; | ||
| background-color: rgba(0, 0, 0, 0.3); | ||
| color: #fff; | ||
| padding-top:5px; | ||
| padding-bottom:5px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border-radius:3px; | ||
| } | ||
| .progress-bar { | ||
| position: absolute; | ||
| width: 100%; | ||
| max-width:390px; | ||
| height:8px; | ||
| float: left; | ||
| margin-left: 190px; | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| border-style: none; | ||
| } | ||
| .mirax-player-class { | ||
| margin: 0 auto; | ||
| width: 100%; | ||
| max-width: ${dynamicWidth}px; | ||
| position: relative; | ||
| float: ${dynamicFloat}; | ||
| text-align: center; | ||
| } | ||
| `; | ||
| inputPlayerClip.appendChild(document.createTextNode(inputPlayerClipStyle)); | ||
| document.body.style.overflow = ''; // Restore scrolling | ||
| document.documentElement.style.backgroundColor = ''; // Restore background color | ||
| document.body.style.margin = ''; // Restore body margin | ||
| document.body.style.padding = ''; // Restore body padding | ||
| document.documentElement.style.margin = ''; // Restore html margin | ||
| document.documentElement.style.padding = ''; // Restore html padding | ||
| } | ||
| // Function to format time in HH:MM:SS with conditional zero-padding | ||
| function formatTime(seconds) { | ||
| const hours = Math.floor(seconds / 3600); | ||
| const minutes = Math.floor((seconds % 3600) / 60); | ||
| const secs = Math.floor(seconds % 60); | ||
| let formattedTime = ''; | ||
| if (hours >= 1) { | ||
| formattedTime += `${hours.toString()}:`; | ||
| }); | ||
| } | ||
| /* # Mirax Player core license | ||
| formattedTime += `${minutes.toString().padStart(1, '0')}:${secs.toString().padStart(2, '0')}`; | ||
| Mirax Player is released under the MIT license: | ||
| return formattedTime; | ||
| } | ||
| MIT License | ||
| // Set initial content of currentTimeDiv | ||
| currentTimeDiv.textContent = formatTime(0); | ||
| Copyright (c) [2023-present] [Demjhon Silver] | ||
| // Listen to the timeupdate event to update the current time and adjust margin | ||
| videoClip.addEventListener('timeupdate', updateCurrentTime); | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| // Listen to the loadedmetadata event to update time duration and adjust margin | ||
| videoClip.addEventListener('loadedmetadata', () => updateDuration(videoClip, timeDurationDiv)); | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| //**********************************************// | ||
| // | ||
| // Progress bar value color | ||
| // | ||
| //*********************************************// | ||
| var color_progress_bar = progressTheme; | ||
| const inputProgressBar = document.createElement('style'); | ||
| document.head.appendChild(inputProgressBar); | ||
| const inputProgressBarStyle = ` | ||
| progress::-webkit-progress-bar { | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| progress::-webkit-progress-value { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| progress[value]::-moz-progress-bar { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| progress::-ms-fill { | ||
| background-color: ${color_progress_bar}; | ||
| } | ||
| `; | ||
| inputProgressBar.appendChild(document.createTextNode(inputProgressBarStyle)); | ||
| //**********************************************// | ||
| // | ||
| // Double Click Fullscreen | ||
| // | ||
| //*********************************************// | ||
| videoClip.addEventListener('dblclick', toggleFullscreen); | ||
| //______________________________________________________________________ | ||
| //**********************************************// | ||
| // | ||
| // Fullscreen Button | ||
| // | ||
| //*********************************************// | ||
| const fullscreenButton = document.createElement('mirax'); | ||
| fullscreenButton.className = 'fullscreen'; | ||
| controlDiv.appendChild(fullscreenButton); | ||
| fullscreenButton.addEventListener('click', toggleFullscreen); | ||
| function toggleFullscreen() { | ||
| if (videoClip.requestFullscreen) { | ||
| if (document.fullscreenElement) { | ||
| document.exitFullscreen(); | ||
| } else { | ||
| videoClip.requestFullscreen(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. */ | ||
@@ -675,0 +1516,0 @@ /* # Mirax Player core license |
@@ -18,46 +18,5 @@ | ||
| .mirax-player { | ||
| min-width:300px !important; | ||
| max-width: 800px; | ||
| width: 100%; /* This ensures the video fills its container while respecting max-width */ | ||
| height: auto; /* This maintains the video's aspect ratio */ | ||
| min-height:100px; | ||
| max-height:450px; | ||
| background-color: #000000; | ||
| margin: 0 auto; | ||
| } | ||
| /* Hide the control div by default */ | ||
| .mirax-theme { | ||
| display: none; | ||
| transition: transform 0.3s; | ||
| } | ||
| /* 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; | ||
| width: 100%; | ||
| height: 20px; | ||
| min-width:300px !important; | ||
| max-width:740px; | ||
| margin-top:-44px; | ||
| bottom: 0; | ||
| left: 10; | ||
| background-color: rgba(0, 0, 0, 0.3); | ||
| color: #fff; | ||
| padding-top:5px; | ||
| padding-bottom:5px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| border-radius:3px; | ||
| } | ||
| .play-button { | ||
@@ -108,9 +67,9 @@ position: relative; | ||
| right: 0; | ||
| margin-right:21px; | ||
| margin-right:73px; | ||
| top:0; | ||
| margin-top:-30px; | ||
| width:50px; | ||
| height: 5px; | ||
| height: 3px; | ||
| outline: none; | ||
| border-radius: 0px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
@@ -128,3 +87,3 @@ -webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */ | ||
| height: 10px; | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| background-color: rgba(45, 85, 255, 0.9); | ||
| border: none; | ||
@@ -137,6 +96,7 @@ -webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */ | ||
| .volume-slider::-moz-range-thumb { | ||
| width: 7px; | ||
| height: 15px; | ||
| margin-top:-3px; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| width: 11px; | ||
| height: 11px; | ||
| margin-top:-1px; | ||
| border-radius: 100%; | ||
| background-color: rgba(45, 85, 255, 1); | ||
| cursor: pointer; | ||
@@ -153,3 +113,3 @@ -webkit-appearance: none; /* Remove default appearance for Chrome, Safari, and Opera */ | ||
| height: 10px; | ||
| background-color: rgba(255, 255, 255, 0.1); /* Change the color of the half bar */ | ||
| background-color: rgba(45, 85, 255, 0.6); /* Change the color of the half bar */ | ||
| -webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */ | ||
@@ -176,6 +136,7 @@ -moz-appearance: none; /* Remove default appearance for Firefox */ | ||
| .volume-slider::-webkit-slider-thumb { | ||
| width: 7px; | ||
| height: 15px; | ||
| margin-top:-3px; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| width: 11px; | ||
| height: 11px; | ||
| margin-top:-1px; | ||
| border-radius: 100%; | ||
| background-color: rgba(45, 85, 255, 1); | ||
| cursor: pointer; | ||
@@ -191,3 +152,3 @@ -webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */ | ||
| height: 10px; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| background-color: rgba(45, 85, 255, 0.9); | ||
| -webkit-appearance: none; /* Remove default appearance for Chrome, Safari and Opera */ | ||
@@ -258,22 +219,15 @@ -moz-appearance: none; /* Remove default appearance for Firefox */ | ||
| .progress-bar { | ||
| position: absolute; | ||
| width: 100%; | ||
| max-width:380px; | ||
| height:10px; | ||
| float: left; | ||
| margin-left: 190px; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| border-style: none; | ||
| } | ||
| progress::-webkit-progress-value { | ||
| background-color: rgba(255,255, 255, 0.8); | ||
| background-color: rgba(45, 85, 255, 0.9); | ||
| } | ||
| progress[value]::-moz-progress-bar { | ||
| background-color: rgba(255,255, 255, 0.8); | ||
| background-color: rgba(45, 85, 255, 0.9); | ||
| } | ||
| progress::-ms-fill { | ||
| background-color: rgba(255,255, 255, 0.8); | ||
| background-color: rgba(45, 85, 255, 0.9); | ||
| } | ||
@@ -333,3 +287,2 @@ | ||
| content: "${content_fullscreen}"; | ||
@@ -339,2 +292,11 @@ } | ||
| /* Style the text elements */ | ||
@@ -357,5 +319,6 @@ .video-text, .input-text { | ||
| background-image: url('https://raw.githubusercontent.com/demjhongray/mirax-player/main/img/logo.png'); | ||
| background-image: url('https://raw.githubusercontent.com/demjhonsilver/mirax-player/main/img/logo.png'); | ||
| background-position: center center; | ||
| background-repeat: no-repeat; | ||
| background-size: 100px 100px; | ||
| min-width:100px; | ||
@@ -367,2 +330,3 @@ width:50%; | ||
| max-height:190px; | ||
| } | ||
@@ -383,8 +347,3 @@ | ||
| @media (max-width: 740px) { | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 40%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| /* Hide the control div by default */ | ||
@@ -408,3 +367,2 @@ .mirax-theme { | ||
| left: 10; | ||
| /* background-color: rgba(0, 0, 0, 0.5); */ | ||
| color: #fff; | ||
@@ -432,31 +390,6 @@ padding-top:5px; | ||
| @media (max-width: 540px) { | ||
| .progress-bar { | ||
| min-width:30px; | ||
| width: 30%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| } | ||
| `; | ||
| miraxStyleMediaQuery2.appendChild(document.createTextNode(mediaQuery2)); | ||
| // __________________________________________________________ | ||
| const miraxStyleMediaQuery3 = document.createElement('style'); | ||
| document.head.appendChild(miraxStyleMediaQuery3); | ||
| // Define the media query and its associated CSS rules | ||
| const mediaQuery3 = ` | ||
| @media (max-width: 540px) { | ||
| .progress-bar { | ||
| margin-left: 160px; | ||
| min-width:50px; | ||
| width: 30%; | ||
| background-color: rgba(205, 228, 235, 0.1); | ||
| } | ||
| .video-text, .input-text { | ||
| background-size: 50px 50px; | ||
| width:100%; | ||
@@ -466,4 +399,6 @@ max-width:240px; | ||
| height: auto; | ||
| max-height:120px; | ||
| max-height:100px; | ||
| } | ||
@@ -474,2 +409,2 @@ | ||
| miraxStyleMediaQuery3.appendChild(document.createTextNode(mediaQuery3)); | ||
| miraxStyleMediaQuery2.appendChild(document.createTextNode(mediaQuery2)); |
@@ -15,22 +15,5 @@ // mirax-player.d.ts | ||
| type VideoPlayerFunction = ( | ||
| videoClip: HTMLVideoElement, | ||
| options: { | ||
| playerTheme: PlayerTheme, | ||
| progressTheme: ProgressTheme | ||
| } | ||
| videoClip: HTMLVideoElement | ||
| ) => void; | ||
| // Type for PlayerTheme and ProgressTheme | ||
| type PlayerTheme = | ||
| | string | ||
| | `rgba(${number}, ${number}, ${number}, ${number})` | ||
| | `rgb(${number}, ${number}, ${number})` | ||
| | `#${string}`; | ||
| type ProgressTheme = | ||
| | string | ||
| | `rgba(${number}, ${number}, ${number}, ${number})` | ||
| | `rgb(${number}, ${number}, ${number})` | ||
| | `#${string}`; | ||
| // Export the VideoEmbed and VideoPlayerFunction types | ||
@@ -37,0 +20,0 @@ export const miraxEmbed: VideoEmbed; |
| { | ||
| "name": "mirax-player", | ||
| "version": "3.4.0", | ||
| "version": "4.0.0-alpha.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.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
229
README.md
@@ -13,2 +13,3 @@ <p align="center"> | ||
| </div> | ||
@@ -57,8 +58,30 @@ <p align="center"> | ||
| ## Changes | ||
| Major: | ||
| - Adding speed control options: | ||
| - Fullscreen will be exact mirax-player ui | ||
| - Adding new mirax player tag: | ||
| `mirax-player-class` | ||
| `data-mirax-player-width` | ||
| `data-mirax-player-float` | ||
| `data-mirax-player-theme` | ||
| `data-mirax-player-bar` | ||
| - Adding new mirax embed tag: | ||
| `data-mirax-fullscreen` | ||
| `data-mirax-controls` | ||
| Minor: | ||
| - Volume scrolling up/down is available, just point the mouse below the speaker icon. | ||
| - Scrolling up/down to progress bar can play backward or forward. | ||
| - Pressing left or right key arrow on your keyboard, your video will be backward / forward for 10 sec. | ||
| - Speaker icon animation: | ||
| - Embed parameters becomes minimal options | ||
| - No more mirax-customizer | ||
| - No more .whatever class name setup | ||
| Patches: | ||
| - Progress bar minimize | ||
| - Volume slider getting thin | ||
| ------- | ||
@@ -105,8 +128,10 @@ ## Features | ||
| Mirax embed tags | Type | Functionality | | ||
| ------ | -------- | --------- | | ||
| `mirax-embed-class` | class name | responsiveness | | ||
| `data-mirax-width` | attribute | dynamic width | | ||
| `data-mirax-height` | attribute | dynamic height | | ||
| `data-mirax-embed` | attribute | video links to embed | | ||
| Mirax embed tags | Type | Functionality | TikTok | YouTube | Vimeo | | ||
| ------ | -------- | --------- | --------- | --------- | ------- | ||
| `mirax-embed-class` | class name | responsiveness | required | required | required | ||
| `data-mirax-width` | attribute | dynamic width | n/a | required | required | ||
| `data-mirax-height` | attribute | dynamic height | n/a | required | required | ||
| `data-mirax-fullscreen` | attribute | enable fullscreen | n/a | required | n/a | ||
| `data-mirax-controls` | attribute | enable controllers | n/a | required | required | ||
| `data-mirax-embed` | attribute | video links to embed | required | required | required | ||
@@ -120,2 +145,4 @@ example: | ||
| data-mirax-height="360" // | ||
| data-mirax-fullscreen="false" // boolean only | ||
| data-mirax-controls="true" // boolean only | ||
| data-mirax-embed="https://www.tiktok.com/@scout2015/video/6718335390845095173" // links from TikTok Youtube/Shorts and Vimeo | ||
@@ -129,2 +156,13 @@ > | ||
| Mirax player tags | Type | Functionality | Min | Max| Example value | | ||
| ------ | -------- | --------- | --------- | ---------- | ----------- | | ||
| `mirax-player-class` | class name | responsiveness | n/a | n/a | n/a | | ||
| `data-mirax-player-width` | attribute | width | 360 | 800 | 640 | | ||
| `data-mirax-player-float` | attribute | float position | n/a | n/a | left, center, right | | ||
| `data-mirax-player-theme` | attribute | player color | n/a | n/a | red, green | | ||
| `data-mirax-player-bar` | attribute | progress bar color | n/a | n/a | blue, yellow | | ||
| ------- | ||
| Keyboard keys / buttons | Functions | Description | Supported Browsers | | ||
@@ -148,8 +186,17 @@ ---- | ---------------------- | ----------- | ------- | ||
| src=" " // Link public/clip.mp4 from your frameworks | assets/clip.mp4 angular | example.com/video/clip.mp4 | ||
| src=" " | ||
| ``` | ||
| ------------- | ||
| - video stored location: | ||
| public/clip.mp4 from your frameworks | ||
| assets/clip.mp4 angular | ||
| example.com/video/clip.mp4 | ||
| ---------------------- | ||
| ## React | ||
| - Video player - [CSS for Video Player](#css-player) | ||
@@ -161,14 +208,16 @@ ```js | ||
| const videoPlayer = useRef(null); | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| useEffect(() => { | ||
| if (videoPlayer.current) { | ||
| miraxplayer(videoPlayer.current, miraxCustomizer); | ||
| miraxplayer(videoPlayer.current); | ||
| } | ||
| }); | ||
| return ( | ||
| <div className="whatever"> | ||
| <video ref={videoPlayer} className="mirax-player" src="clip.mp4"></video> | ||
| <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> | ||
@@ -189,6 +238,2 @@ ); | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -198,4 +243,2 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -211,2 +254,4 @@ }; | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -231,4 +276,10 @@ </div> | ||
| <template> | ||
| <div class="whatever"> | ||
| <video ref="videoPlayer" class="mirax-player" src="clip.mp4"></video> | ||
| <div class="mirax-player-class"> | ||
| <video ref="videoPlayer" | ||
| class="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"></video> | ||
| </div> | ||
@@ -244,14 +295,7 @@ </template> | ||
| const videoPlayer = ref(null); | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMounted(() => { | ||
| if (videoPlayer.value) { | ||
| miraxplayer(videoPlayer.value, miraxCustomizer); | ||
| miraxplayer(videoPlayer.value); | ||
| } | ||
| }); | ||
| return { | ||
@@ -272,2 +316,4 @@ videoPlayer | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -287,16 +333,8 @@ </div> | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
| } | ||
| }; | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
| }; | ||
| onMounted(() => { | ||
@@ -307,3 +345,2 @@ if (embedVideo.value) { | ||
| }); | ||
| return { | ||
@@ -340,6 +377,2 @@ embedVideo | ||
| @ViewChild('videoPlayer', { static: true }) videoPlayer!: ElementRef<HTMLVideoElement>; | ||
| miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| ngOnInit(): void { | ||
@@ -350,3 +383,3 @@ this.initializeMiraxplayer(); | ||
| if (this.videoPlayer.nativeElement) { | ||
| miraxplayer(this.videoPlayer.nativeElement, this.miraxCustomizer); | ||
| miraxplayer(this.videoPlayer.nativeElement); | ||
| } | ||
@@ -362,4 +395,10 @@ } | ||
| <div> | ||
| <div class="whatever"> | ||
| <video #videoPlayer class="mirax-player" src="assets/clip.mp4"></video> | ||
| <div class="mirax-player-class"> | ||
| <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> | ||
| </div> | ||
@@ -384,6 +423,2 @@ </div> | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -393,4 +428,2 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -411,2 +444,4 @@ }; | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -424,10 +459,6 @@ </div> | ||
| let videoPlayer; | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMount(() => { | ||
| if (videoPlayer) { | ||
| miraxplayer(videoPlayer, miraxCustomizer); | ||
| miraxplayer(videoPlayer); | ||
| } | ||
@@ -437,4 +468,9 @@ }); | ||
| <div class="whatever"> | ||
| <video bind:this={videoPlayer} class="mirax-player" src="clip.mp4"> | ||
| <div class="mirax-player-class"> | ||
| <video bind:this={videoPlayer} class="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"> | ||
| <track kind="captions" src="" label="English" default> | ||
@@ -454,6 +490,2 @@ </video> | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -463,7 +495,4 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
| }; | ||
| onMount(() => { | ||
@@ -475,3 +504,8 @@ miraxEmbed(embedVideo, youtubeParams, vimeoParams); | ||
| <div class="mirax-embed-class"> | ||
| <div bind:this={embedVideo} data-mirax-width="640" data-mirax-height="360" data-mirax-embed="https://vimeo.com/217499569"></div> | ||
| <div bind:this={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> | ||
@@ -489,26 +523,17 @@ ``` | ||
| You can assign your own class name to encapsulate the video player. | ||
| You can set-up attribute for position alignment of the video player. | ||
| - Left | ||
| ```css | ||
| .whatever { | ||
| position: relative; | ||
| float: left; | ||
| text-align: left; | ||
| } | ||
| ```js | ||
| data-mirax-player-float="left" | ||
| ``` | ||
| - Center | ||
| ```css | ||
| .whatever { | ||
| position: relative; | ||
| text-align: center; | ||
| } | ||
| ```js | ||
| data-mirax-player-float="" | ||
| //or | ||
| data-mirax-player-float="center" | ||
| ``` | ||
| - Right | ||
| ```css | ||
| .whatever { | ||
| position: relative; | ||
| float: right; | ||
| text-align: right; | ||
| } | ||
| ```js | ||
| data-mirax-player-float="right" | ||
| ``` | ||
@@ -520,24 +545,16 @@ | ||
| ```js | ||
| const miraxCustomizer = { | ||
| playerTheme: "rgba(250, 149, 35, 0.9)", | ||
| progressTheme: "rgba(17, 117, 59, 0.9)" | ||
| }; | ||
| data-mirax-player-theme="rgba(250, 149, 35, 0.9)" | ||
| data-mirax-player-bar="rgba(17, 117, 59, 0.9)" | ||
| ``` | ||
| ```js | ||
| const miraxCustomizer = { | ||
| playerTheme: "rgb(0,0,0)", | ||
| progressTheme: "rgb(255, 255, 255)" | ||
| }; | ||
| data-mirax-player-theme="rgb(0,0,0)" | ||
| data-mirax-player-bar="rgb(255, 255, 255)" | ||
| ``` | ||
| ```js | ||
| const miraxCustomizer = { | ||
| playerTheme: "#000000", | ||
| progressTheme: "#00ff00" | ||
| }; | ||
| data-mirax-player-theme="#000000" | ||
| data-mirax-player-bar="#00ff00" | ||
| ``` | ||
| ```js | ||
| const miraxCustomizer = { | ||
| playerTheme: "black", | ||
| progressTheme: "red" | ||
| }; | ||
| data-mirax-player-theme="black" | ||
| data-mirax-player-bar="red" | ||
| ``` | ||
@@ -547,3 +564,3 @@ If you want pure transparent: | ||
| ```js | ||
| const playerTheme = "rgba(0, 0, 0, 0)"; | ||
| data-mirax-player-theme = "rgba(0, 0, 0, 0)"; | ||
| ``` | ||
@@ -550,0 +567,0 @@ |
@@ -6,2 +6,4 @@ ```html | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -8,0 +10,0 @@ </div> |
| ```html | ||
| <div> | ||
| <div class="whatever"> | ||
| <video #videoPlayer class="mirax-player" src="assets/clip.mp4"></video> | ||
| <div class="mirax-player-class"> | ||
| <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> | ||
| </div> | ||
| </div> | ||
| ``` |
@@ -15,6 +15,2 @@ ```ts | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -24,4 +20,2 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -28,0 +22,0 @@ }; |
@@ -11,6 +11,2 @@ ```ts | ||
| @ViewChild('videoPlayer', { static: true }) videoPlayer!: ElementRef<HTMLVideoElement>; | ||
| miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| ngOnInit(): void { | ||
@@ -21,3 +17,3 @@ this.initializeMiraxplayer(); | ||
| if (this.videoPlayer.nativeElement) { | ||
| miraxplayer(this.videoPlayer.nativeElement, this.miraxCustomizer); | ||
| miraxplayer(this.videoPlayer.nativeElement); | ||
| } | ||
@@ -24,0 +20,0 @@ } |
@@ -9,6 +9,2 @@ ```js | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -18,4 +14,2 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -31,2 +25,4 @@ }; | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -33,0 +29,0 @@ </div> |
@@ -6,14 +6,16 @@ ```js | ||
| const videoPlayer = useRef(null); | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| useEffect(() => { | ||
| if (videoPlayer.current) { | ||
| miraxplayer(videoPlayer.current, miraxCustomizer); | ||
| miraxplayer(videoPlayer.current); | ||
| } | ||
| }); | ||
| return ( | ||
| <div className="whatever"> | ||
| <video ref={videoPlayer} className="mirax-player" src="clip.mp4"></video> | ||
| <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> | ||
@@ -20,0 +22,0 @@ ); |
@@ -10,16 +10,8 @@ ```ts | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
| } | ||
| }; | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
| }; | ||
| useEffect(() => { | ||
@@ -37,2 +29,4 @@ if (embedVideo.current) { | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569" | ||
@@ -39,0 +33,0 @@ ></div> |
@@ -7,10 +7,6 @@ ```ts | ||
| const videoPlayer = useRef<HTMLVideoElement | null>(null); | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| useEffect(() => { | ||
| if (videoPlayer.current) { | ||
| miraxplayer(videoPlayer.current, miraxCustomizer); | ||
| miraxplayer(videoPlayer.current); | ||
| } | ||
@@ -20,4 +16,10 @@ }); | ||
| return ( | ||
| <div className="whatever"> | ||
| <video ref={videoPlayer} className="mirax-player" src="clip.mp4"></video> | ||
| <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> | ||
@@ -24,0 +26,0 @@ ); |
@@ -9,6 +9,2 @@ ```js | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
@@ -18,4 +14,2 @@ } | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -30,4 +24,9 @@ }; | ||
| <div class="mirax-embed-class"> | ||
| <div bind:this={embedVideo} data-mirax-width="640" data-mirax-height="360" data-mirax-embed="https://vimeo.com/217499569"></div> | ||
| <div bind:this={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> | ||
| ``` |
@@ -7,10 +7,6 @@ ```js | ||
| let videoPlayer; | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMount(() => { | ||
| if (videoPlayer) { | ||
| miraxplayer(videoPlayer, miraxCustomizer); | ||
| miraxplayer(videoPlayer); | ||
| } | ||
@@ -20,4 +16,11 @@ }); | ||
| <div class="whatever"> | ||
| <video bind:this={videoPlayer} class="mirax-player" src="clip.mp4"> | ||
| <div class="mirax-player-class"> | ||
| <video bind:this={videoPlayer} | ||
| class="mirax-player" | ||
| className="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"> | ||
| <track kind="captions" src="" label="English" default> | ||
@@ -24,0 +27,0 @@ </video> |
@@ -9,5 +9,2 @@ ```ts | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
@@ -18,4 +15,2 @@ cc_load_policy: 1 | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -32,4 +27,9 @@ }; | ||
| <div class="mirax-embed-class"> | ||
| <div bind:this={embedVideo} data-mirax-width="640" data-mirax-height="360" data-mirax-embed="https://vimeo.com/217499569"></div> | ||
| <div bind:this={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> | ||
| ``` |
@@ -7,10 +7,6 @@ ```ts | ||
| let videoPlayer: HTMLVideoElement | null; | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMount(() => { | ||
| if (videoPlayer) { | ||
| miraxplayer(videoPlayer, miraxCustomizer); | ||
| miraxplayer(videoPlayer); | ||
| } | ||
@@ -20,4 +16,10 @@ }); | ||
| <div class="whatever"> | ||
| <video bind:this={videoPlayer} class="mirax-player" src="clip.mp4"> | ||
| <div class="mirax-player-class"> | ||
| <video bind:this={videoPlayer} | ||
| class="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"> | ||
| <track kind="captions" src="" label="English" default> | ||
@@ -24,0 +26,0 @@ </video> |
@@ -7,2 +7,4 @@ ```js | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -22,13 +24,6 @@ </div> | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
| } | ||
| }; | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
@@ -42,3 +37,2 @@ }; | ||
| }); | ||
| return { | ||
@@ -45,0 +39,0 @@ embedVideo |
| ```js | ||
| <template> | ||
| <div class="whatever"> | ||
| <video ref="videoPlayer" class="mirax-player" src="clip.mp4"></video> | ||
| <div class="mirax-player-class"> | ||
| <video ref="videoPlayer" | ||
| class="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"></video> | ||
| </div> | ||
@@ -16,10 +22,5 @@ </template> | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMounted(() => { | ||
| if (videoPlayer.value) { | ||
| miraxplayer(videoPlayer.value, miraxCustomizer); | ||
| miraxplayer(videoPlayer.value); | ||
| } | ||
@@ -26,0 +27,0 @@ }); |
@@ -7,2 +7,4 @@ ```ts | ||
| data-mirax-height="360" | ||
| data-mirax-fullscreen="true" | ||
| data-mirax-controls="true" | ||
| data-mirax-embed="https://vimeo.com/217499569"> | ||
@@ -23,16 +25,8 @@ </div> | ||
| playerVars: { | ||
| controls: 1, | ||
| autoplay: 0, | ||
| fs: 1, | ||
| iv_load_policy: 3, | ||
| cc_load_policy: 1 | ||
| } | ||
| }; | ||
| const vimeoParams = { | ||
| autopause: 0, | ||
| controls: true, | ||
| responsive: true | ||
| }; | ||
| onMounted(() => { | ||
@@ -39,0 +33,0 @@ if (embedVideo.value) { |
| ```ts | ||
| <template> | ||
| <div class="whatever"> | ||
| <video ref="videoPlayer" class="mirax-player" src="clip.mp4"></video> | ||
| <div class="mirax-player-class"> | ||
| <video ref="videoPlayer" | ||
| class="mirax-player" | ||
| data-mirax-player-width="800" | ||
| data-mirax-player-float=" " | ||
| data-mirax-player-theme=" " | ||
| data-mirax-player-bar=" " | ||
| src="clip.mp4"></video> | ||
| </div> | ||
@@ -14,10 +20,5 @@ </template> | ||
| const miraxCustomizer = { | ||
| playerTheme: "", | ||
| progressTheme: "" | ||
| }; | ||
| onMounted(() => { | ||
| if (videoPlayer.value) { | ||
| miraxplayer(videoPlayer.value, miraxCustomizer); | ||
| miraxplayer(videoPlayer.value); | ||
| } | ||
@@ -24,0 +25,0 @@ }); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by28.28%
100319
- Lines of code
- increased by48.81%
1622
- Number of lines in readme file
- increased by3.14%
559
Worsened metrics
- Number of low quality alerts
- increased by100%
2
No dependency changes