UNPKG

js-player

Version:

A lightweight custom js video player web component built with pure JavaScript. It can be used in any application that supports JavaScript, including frameworks like Angular, React, Vue, and others.

673 lines (605 loc) • 32.6 kB

JavaScript

var b=`<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script type="module" defer src="script.js"><\/script> </head> <body id="main-body"> <div class="audIioPKLayercja" hidden part="audio-player"> <audio controls> <source src="[src]"> Your browser does not support the audio element. </audio> </div> <div class="pla7cxweyer" part="video-player"> <video part="video" preload="metadata" poster="[poster]"> <source src="[src]" /> <slot></slot> Your browser does not support the video tag. </video> <div id="subti76asbzxtle-bokvx"> <div id="s3vvubtbgbitle-tpsext"> </div> </div> <div> <div class="side-hover-btn left" onmouseleave="this.classList.remove('active')"> <button class="ctrl-btn" aria-label="Backward 5 seconds" tabindex="0" id="bac45Kkwordbtn" onblur="this.parentElement.classList.remove('active')" onmousedown="this.parentElement.classList.add('active')" onmouseup="setTimeout(()=>this.blur(), 100)"> <svg viewBox="0 0 24 24" width="36" height="36" stroke="white" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 2V8M3 8H9M3 8L5.64033 5.63067C7.02134 4.25209 8.81301 3.35964 10.7454 3.08779C12.6777 2.81593 14.6461 3.17941 16.3539 4.12343C18.0617 5.06746 19.4165 6.54091 20.214 8.32177C21.0115 10.1026 21.2086 12.0944 20.7756 13.997C20.3426 15.8996 19.303 17.61 17.8133 18.8704C16.3237 20.1308 14.4647 20.873 12.5165 20.9851C10.5684 21.0972 8.63652 20.5732 7.01208 19.492C5.38765 18.4108 4.15862 16.831 3.51018 14.9907" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span style="color:white;font-size:14px;">5s</span> </button> </div> <div class="side-hover-btn right" onmouseleave="this.classList.remove('active')"> <button class="ctrl-btn" aria-label="Forward 5 seconds" tabindex="0" id="for45Kkwordbtn" onblur="this.parentElement.classList.remove('active')" onmousedown="this.parentElement.classList.add('active')" onmouseup="setTimeout(()=>this.blur(), 100)"> <svg viewBox="0 0 24 24" width="36" height="36" stroke="white" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.4898 14.9907C19.8414 16.831 18.6124 18.4108 16.9879 19.492C15.3635 20.5732 13.4316 21.0972 11.4835 20.9851C9.5353 20.873 7.67634 20.1308 6.18668 18.8704C4.69703 17.61 3.65738 15.8996 3.22438 13.997C2.79138 12.0944 2.98849 10.1026 3.78602 8.32177C4.58354 6.54091 5.93827 5.06746 7.64608 4.12343C9.35389 3.17941 11.3223 2.81593 13.2546 3.08779C16.5171 3.54676 18.6725 5.91142 21 8M21 8V2M21 8H15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span style="color:white;font-size:14px;">5s</span> </button> </div> </div> <div class="mvjuhsLayvhwer"> <div class="black-background" style="position:absolute; top:0; left:0; width:100%; height:100%; background:black; opacity:0.7; z-index:0;"> </div> <div class="vuqwhb-ac23JCAjk" style="width: 100%; height: 100%; position: relative; z-index: 1;"> <div class="JSHxzv6OV" id="plaLodv4oy-pYsd64ause2">  <div class="MVkhivo3l plaLodv4oy-pYsd64ause" role="button" tabindex="0" aria-label="Play" aria-pressed="false"> <span class="plaNu24y-iwcon"> <svg class="plaNu24y-iwcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="36" height="36"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-6.518-3.75A.75.75 0 007 8.75v6.5a.75.75 0 001.234.644l6.518-3.75a.75.75 0 000-1.326z" /> </svg> </span> <span class="pNu7y7ause-icon hidden"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="36" height="36"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 10v10m5-10v10" /> </svg> </span> </div>  </div> </div> </div> <div class="McuContr6olashkv" part="controls"> <button class="plaLodv4oy-pYsd64ause" id="plaLodv4oy-pYsd64ause1" part="play-pause" aria-label="Play/Pause" title="Play/Pause"> <span class="plaNu24y-iwcon"> <svg class="plaNu24y-iwcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-6.518-3.75A.75.75 0 007 8.75v6.5a.75.75 0 001.234.644l6.518-3.75a.75.75 0 000-1.326z" /> </svg> </span> <span class="pNu7y7ause-icon hidden"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 10v10m5-10v10" /> </svg> </span> </button> <div class="time cur6asgdrent-tim2de" part="current-time" aria-live="off">0:00</div> <span>/</span> <div class="time duNVy3Jnf" part="duration" aria-live="off">0:00</div> <div class="prog54bVK-coOCr" part="progress-container" aria-label="Video progress bar" role="slider" tabindex="0"> <div class="progress" part="progress"></div> <div class="progress-thumb" part="progress-thumb"></div> </div> <div class="buttons"> <div id="s7cd7g-x9a7b"> <div class="IUc87sadn"> <input id="ran8ch-y3k2p" type="range" value="0" min="0" max="100"> </div> <span class="v3co7vg-icon-a1b2c3" id="i9cshf-off-z7x8y"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20" height="20" fill="currentColor"> <path d="M301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" /> </svg> </span> <span class="v3co7vg-icon-a1b2c3" id="i9cshf-mid-w4v5u"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="20" height="20" fill="currentColor"> <path d="M301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM412.6 181.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z" /> </svg> </span> <span class="v3co7vg-icon-a1b2c3" id="i9cshf-high-q6t7r"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="20" height="20" fill="currentColor"> <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z" /> </svg> </span> </div>  <button class="fullscreen-toggle" part="fullscreen-toggle" aria-label="Fullscreen" title="Fullscreen"> <span class="fullscreen-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" stroke="currentColor" fill="white" width="24" height="24"> <path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z" /> </svg> </span> <span class="exit-fullscreen-icon hidden"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke="currentColor" fill="white" width="20" height="20"> <path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8l-144 0c-13.3 0-24-10.7-24-24l0-144c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272l144 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z" /> </svg> </span> </button> </div> </div> </div> </body> </html>`,f=`:host { display: block; max-width: 640px; margin: 1rem auto; font-family: "Inter", sans-serif; user-select: none; outline: none; } .hidden { display: none !important; } .audIioPKLayercja audio { width: 100%; height: auto; display: block; background: black; border-radius: 0.75rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } video::cue { color: yellow; background: rgba(0, 0, 0, 0.6); font-size: 18px; font-family: Arial, sans-serif; text-shadow: 2px 2px 4px #000; margin-top: 20px; padding: 5px; } .pla7cxweyer { background: #111; color: white; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); border-radius: 0.75rem; height: 100%; width: 100%; } video { height: 100% !important; width: 100%; height: auto; display: block; background: black; } .McuContr6olashkv { position: absolute; bottom: 0; left: 0; right: 0; background: var(--controls-bg, rgba(0, 0, 0, 0.6)); display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 8px; transition: background 0.3s ease; z-index: 10; } .McuContr6olashkv:hover { background: var(--controls-bg-hover, rgba(0, 0, 0, 0.8)); } .prog54bVK-coOCr { flex-grow: 1; height: 6px; background: #444; border-radius: 3px; cursor: pointer; margin: 0 8px 0 0; min-width: 30px; position: relative; } .progress { height: 100%; background: #ef4444; width: 0%; border-radius: 3px; transition: width 0.1s linear; } .progress-thumb { width: 8px; /* Size of the draggable thumb */ height: 8px; background-color: #a0a0a0; border-radius: 50%; /* Make it a circle */ position: absolute; top: 50%; transform: translate(-50%, -50%); /* Center the thumb */ left: 0%; /* Initial position */ cursor: grab; /* Cursor when dragging is possible */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .buttons { display: flex; align-items: center; gap: 8px; height: 32px; } button { background: transparent; border: none; color: white; cursor: pointer; padding: 4px 8px; font-size: 20px; transition: color 0.3s ease; display: flex; align-items: center; justify-content: center; } button:hover { color: #ef4444; } input[type="range"] { -webkit-appearance: none; min-width: 50px; max-width: 50px; height: 4px; background: #444; border-radius: 2px; cursor: pointer; margin-left: 8px; vertical-align: middle; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #ef4444; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; } input[type="range"]::-webkit-slider-thumb:hover { background: #2563eb; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #ef4444; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; } input[type="range"]::-moz-range-thumb:hover { background: #2563eb; } .mute-toggle { padding: 0; } .volume-control { display: flex; align-items: center; gap: 2px; } .volume-icon { display: contents; } .plaLodv4oy-pYsd64ause { padding: 0; } .plaNu24y-iwcon { display: block; } #i9cshf-off-z7x8y, #i9cshf-mid-w4v5u, #i9cshf-high-q6t7r { cursor: pointer; z-index: 9; } #s7cd7g-x9a7b { position: relative; width: 20px; height: 20px; border-radius: 20px; } #s7cd7g-x9a7b input#ran8ch-y3k2p { -webkit-appearance: none; height: 2px; border-radius: 20px; background: #d4d4d4; margin-left: 30px; margin-right: 5px; } #s7cd7g-x9a7b input#ran8ch-y3k2p::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #c5c5c5; border: 2px solid #969696; box-shadow: inset 0 0 5px white; } #s7cd7g-x9a7b .v3co7vg-icon-a1b2c3 { position: absolute; right: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; font-size: 14px; align-items: center; justify-content: center; display: flex; transition: 0.75s; } /* #s7cd7g-x9a7b .v3co7vg-icon-a1b2c3 svg { fill: white; } */ /* #s7cd7g-x9a7b:hover { background: rgb(226 226 226 / 60%); } */ #s7cd7g-x9a7b:hover input#ran8ch-y3k2p { background: #d4d4d4; visibility: visible; } #s7cd7g-x9a7b:hover input#ran8ch-y3k2p::-webkit-slider-thumb { background: #c5c5c5; border: 2px solid #969696; box-shadow: inset 0 0 5px white; } .IUc87sadn { position: absolute; left: 10px; top: -18px; -webkit-appearance: none; transform: translate(-50%, -50%) rotate(-90deg); /* visibility: hidden; */ background: #ffffff22; display: flex; height: 30px; justify-content: center; align-items: center; border-radius: 10px; visibility: hidden; z-index: 9; } #s7cd7g-x9a7b:hover .IUc87sadn { visibility: visible; } .fullscreen-icon, .exit-fullscreen-icon { display: flex; } .hsve37e5 { position: relative; border-radius: 20px; box-sizing: border-box; height: 100%; } .ks7fg33fe5 { box-sizing: border-box; height: 100%; position: relative; opacity: 1; transform: scale(1.6); transition: transform 200ms; } .hsve37e5:hover .cc-7dha-menu { display: block; } .cc-7dha-menu { background: #ffffff22; border-radius: 18px; bottom: 35px; color: rgb(255, 255, 255); display: none; left: -50px; line-height: 34px; max-height: 456.25px; opacity: 1; overflow: hidden auto; position: absolute; transition: opacity 120ms, transform 120ms, width 120ms, left 120ms; transform: scaleY(1); transform-origin: center bottom; width: 160px; } .cc-7dha-menu-item ul { list-style: none; padding: 0; } .cc-7dha-menu-item ul .cc-vmsk24fdf { padding: 0px 20px; cursor: pointer; transition: background 0.3s ease; font-size: 13px; line-height: 2; } .cc-7dha-menu-item ul .cc-vmsk24fdf:hover { background: #444; color: white; } .cc-vmsk24fdf { display: flex; align-items: center; gap: 8px; } .cc-vmsk24fdf span { display: none; } .cc-vmsk24fdf.active span { display: contents; } .mvjuhsLayvhwer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* top: 50%; left: 50%; transform: translate(-50%, -50%); */ } .mvjuhsLayvhwer .MVkhivo3l { box-sizing: border-box; border: 2px solid #ffffff; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; background-color: #0000008f; cursor: pointer; } #subti76asbzxtle-bokvx { position: absolute; bottom: 55px; left: 0; width: 100%; pointer-events: none; z-index: 10; text-align: center; display: none; } #s3vvubtbgbitle-tpsext { background: rgba(0, 0, 0, 0.6); color: white; font-size: 22px; text-shadow: 2px 2px 4px black; display: inline; padding: 2px 5px; } .JSHxzv6OV { display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; } .bac45Kkwordbtn { cursor: pointer; } .for45Kkwordbtn { cursor: pointer; } .backOcnas34 { display: flex; justify-content: center; align-items: center; } .side-hover-btn { position: absolute; top: 0; width: 20%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: auto; } .side-hover-btn.left { left: 0; } .side-hover-btn.right { right: 0; } .side-hover-btn .ctrl-btn { opacity: 0; transition: opacity 0.2s; pointer-events: none; } .side-hover-btn:hover .ctrl-btn, .side-hover-btn:focus-within .ctrl-btn { opacity: 1; pointer-events: auto; } @media (max-width: 350px) { input[type="range"] { max-width: 30px; } .time.cur6asgdrent-tim2de { font-size: 9px; } }`;((d,h)=>{class u extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"closed"});this.color=this.getAttribute("color")||"#fff";let i=this.getAttribute("poster")||"",o=this.getAttribute("src"),n=this.getAttribute("type")||"video",r=this.getAttribute("track");if(!o)throw new Error("Video or audio source (src) is required.");e.innerHTML="";let t=new DOMParser().parseFromString(d,"text/html").getElementById("main-body"),s=document.createElement("style");s.textContent=h,e.appendChild(s),Array.from(t.children).forEach(g=>{let a=g.cloneNode(!0);if(a.outerHTML){let v=a.outerHTML.replace(/\[src\]/g,o).replace(/\[track\]/g,r).replace(/\[poster\]/g,i),c=document.createElement("div");c.innerHTML=v,Array.from(c.childNodes).forEach(m=>{e.appendChild(m)})}else e.appendChild(a)}),this.audioContainer=e.querySelector(".audIioPKLayercja"),this.videoContainer=e.querySelector(".pla7cxweyer"),this.video=e.querySelector("video"),this.controlsMenu=e.querySelector(".McuContr6olashkv"),this.playPauseBtn1=e.querySelector("#plaLodv4oy-pYsd64ause1"),this.playPauseBtn2=e.querySelector("#plaLodv4oy-pYsd64ause2"),this.playIcons=e.querySelectorAll(".plaNu24y-iwcon"),this.pauseIcons=e.querySelectorAll(".pNu7y7ause-icon"),this.progressContainer=e.querySelector(".prog54bVK-coOCr"),this.progress=e.querySelector(".progress"),this.progressThumb=e.querySelector(".progress-thumb"),this.currentTimeElem=e.querySelector(".cur6asgdrent-tim2de"),this.durationElem=e.querySelector(".duNVy3Jnf"),this.volumeSlider=e.querySelector(".volume-slider"),this.volumeIcon=e.querySelector(".volume-icon"),this.muteIcon=e.querySelector(".mute-icon"),this.fullscreenToggle=e.querySelector(".fullscreen-toggle"),this.fullscreenIcon=e.querySelector(".fullscreen-icon"),this.exitFullscreenIcon=e.querySelector(".exit-fullscreen-icon"),this.ran8ch=e.querySelector("#ran8ch-y3k2p"),this.i9cshf_Off=e.querySelector("#i9cshf-off-z7x8y"),this.i9cshf_Mid=e.querySelector("#i9cshf-mid-w4v5u"),this.i9cshf_High=e.querySelector("#i9cshf-high-q6t7r"),this.ccMenuItems=e.querySelectorAll(".cc-vmsk24fdf"),this.mvjuhsLayvhwer=e.querySelector(".mvjuhsLayvhwer"),this.forwardCtrlBtn=e.querySelector("#for45Kkwordbtn"),this.backwardCtrlBtn=e.querySelector("#bac45Kkwordbtn"),this.isFullscreen=!1,this.ran8ch.value=50,this.progressBarDragging=!1,this._shadow=e,n==="audio"&&(this.videoContainer.style.display="none",this.audioContainer.style.display="block"),this.addEventListeners(),this.changeVolume(),this.initControlsMenuListner(),this.addKeyboardListeners(),this.updateColor()}updateColor(){let e=Array.from(this._shadow.querySelectorAll("style"))[0];if(e){e.textContent=e.textContent.replace(/\.progress\s*{([^}]*)background:\s*[^;]+;/,`.progress {$1background: ${this.color};`),e.textContent=e.textContent.replace(/button\s*{([^}]*)color:\s*[^;]+;/,`button {$1color: ${this.color};`),e.textContent=e.textContent.replace(/button:hover\s*{([^}]*)color:\s*[^;]+;/,"button:hover {$1color: white;"),this._shadow.querySelectorAll("svg").forEach(t=>{t.setAttribute("color",this.color),t.querySelectorAll("[fill]").forEach(s=>{s.setAttribute("fill",this.color)}),t.querySelectorAll("[stroke]").forEach(s=>{s.setAttribute("stroke",this.color)})});let o=this._shadow.querySelector(".mvjuhsLayvhwer .MVkhivo3l");o&&(o.style.borderColor=this.color),this._shadow.querySelectorAll("*").forEach(t=>{t.childNodes.length>0&&t.childNodes.forEach(s=>{s.nodeType===Node.TEXT_NODE&&s.textContent.trim()!==""&&(t.style.color=this.color)})});let r=this._shadow.querySelector(".fullscreen-toggle");r&&r.querySelectorAll("svg").forEach(t=>{t.setAttribute("color",this.color),t.hasAttribute("fill")&&t.setAttribute("fill",this.color),t.hasAttribute("stroke")&&t.setAttribute("stroke",this.color),t.querySelectorAll("[fill]").forEach(s=>{s.setAttribute("fill",this.color)}),t.querySelectorAll("[stroke]").forEach(s=>{s.setAttribute("stroke",this.color)})}),this._shadow.querySelectorAll(".v3co7vg-icon-a1b2c3 svg").forEach(t=>{t.setAttribute("color",this.color),t.querySelectorAll("[fill]").forEach(s=>{s.setAttribute("fill",this.color)}),t.querySelectorAll("[stroke]").forEach(s=>{s.setAttribute("stroke",this.color)}),t.querySelectorAll("[fill]").forEach(s=>{s.setAttribute("fill",this.color)}),t.querySelectorAll("[stroke]").forEach(s=>{s.setAttribute("stroke",this.color)})});let l=this._shadow.querySelector("#ran8ch-y3k2p");if(l){l.style.setProperty("--thumb-color",this.color);let t=this._shadow.getElementById("range-thumb-style");t||(t=document.createElement("style"),t.id="range-thumb-style",this._shadow.appendChild(t)),t.textContent=` #ran8ch-y3k2p::-webkit-slider-thumb { background: var(--thumb-color, ${this.color}); } #ran8ch-y3k2p::-moz-range-thumb { background: var(--thumb-color, ${this.color}); } #ran8ch-y3k2p::-ms-thumb { background: var(--thumb-color, ${this.color}); } #ran8ch-y3k2p { accent-color: var(--thumb-color, ${this.color}); } `}}}addEventListeners(){this.playPauseBtn1.addEventListener("click",()=>this.togglePlay()),this.playPauseBtn2.addEventListener("click",()=>this.togglePlay()),this.video.addEventListener("timeupdate",()=>this.updateProgress()),this.video.addEventListener("loadedmetadata",()=>this.initializeTime()),this.video.addEventListener("click",e=>this.clickVideoView(e)),this.i9cshf_Off.addEventListener("click",()=>this.toggleMute()),this.i9cshf_Mid.addEventListener("click",()=>this.toggleMute()),this.i9cshf_High.addEventListener("click",()=>this.toggleMute()),this.fullscreenToggle.addEventListener("click",()=>this.toggleFullscreen()),this.ran8ch.addEventListener("input",()=>this.changeVolume()),this.forwardCtrlBtn.addEventListener("click",()=>this.forwardVideoCtrl()),this.backwardCtrlBtn.addEventListener("click",()=>this.backwardVideoCtrl()),this.progressContainer.addEventListener("click",e=>this.setProgress(e)),this.progressContainer.addEventListener("mousedown",e=>{e.target!==this.progressThumb&&(this.progressBarDragging=!0,this.progressThumb.style.cursor="grabbing",this.setProgress(e),e.preventDefault())}),this.progressThumb.addEventListener("mousedown",e=>{this.progressBarDragging=!0,this.progressThumb.style.cursor="grabbing",e.preventDefault()}),this._shadow.addEventListener("mousemove",e=>{this.progressBarDragging&&this.setProgress(e)}),this._shadow.addEventListener("mouseup",()=>{this.progressBarDragging&&(this.progressBarDragging=!1,this.progressThumb.style.cursor="grab")}),this.ccMenuItems.forEach(e=>{e.addEventListener("click",()=>{e.classList.contains("active")?this.ccMenuItems.forEach(i=>i.classList.remove("active")):(this.ccMenuItems.forEach(i=>i.classList.remove("active")),e.classList.add("active"))})})}startScrubbing(e){e.target!==this.progressThumb&&(this.progressBarDragging=!0,this.progressThumb.style.cursor="grabbing",this.updateProgress(e),e.preventDefault())}addKeyboardListeners(){this._shadow.host.setAttribute("tabindex","0"),this._shadow.addEventListener("keydown",e=>{switch(e.code){case"Space":e.preventDefault(),this.togglePlay();break;case"ArrowUp":e.preventDefault(),this.changeVolumeBy(.05);break;case"ArrowDown":e.preventDefault(),this.changeVolumeBy(-.05);break}})}initControlsMenuListner(){let e,i=this._shadow.querySelector(".pla7cxweyer");i.addEventListener("mousemove",()=>{clearTimeout(e),this.controlsMenu.style.display="flex",e=setTimeout(()=>{this.controlsMenu.style.display="none"},1e4)}),i.addEventListener("mouseleave",()=>{this.controlsMenu.style.display="none"})}clickVideoView(e){e.target===this.video&&this.togglePlay()}changeVolumeBy(e){let i=this.video.volume+e;i=Math.min(1,Math.max(0,i)),this.video.volume=i,this.video.muted=i===0,this.ran8ch.value=i*100,this.changeVolume()}togglePlay(){this.video.paused?(this.video.play(),this.playIcons.forEach(e=>e.classList.add("hidden")),this.pauseIcons.forEach(e=>e.classList.remove("hidden")),this.mvjuhsLayvhwer.classList.add("hidden")):(this.video.pause(),this.playIcons.forEach(e=>e.classList.remove("hidden")),this.pauseIcons.forEach(e=>e.classList.add("hidden")),this.mvjuhsLayvhwer.classList.remove("hidden"))}updateProgress(){let e=this.video.currentTime/this.video.duration*100;this.progress.style.width=e+"%",this.progressThumb.style.left=`${e}%`,this.currentTimeElem.textContent=this.formatTime(this.video.currentTime),this.video.currentTime===this.video.duration&&(this.video.pause(),this.playIcon.classList.remove("hidden"),this.pauseIcon.classList.add("hidden"))}setProgress(e){let i=this.progressContainer.getBoundingClientRect(),o=e.clientX-i.left,n=i.width,r=o/n*this.video.duration;this.video.currentTime=r}toggleMute(){this.video.muted=!this.video.muted,this.video.muted?this.ran8ch.value=0:this.ran8ch.value=(this.video.volume==0?1:this.video.volume)*100,this.changeVolume()}toggleFullscreen(){this.isFullscreen?(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen(),this.isFullscreen=!1,this.fullscreenIcon.classList.remove("hidden"),this.exitFullscreenIcon.classList.add("hidden")):(this._shadow.host.requestFullscreen?this._shadow.host.requestFullscreen():this._shadow.host.webkitRequestFullscreen?this._shadow.host.webkitRequestFullscreen():this._shadow.host.msRequestFullscreen&&this._shadow.host.msRequestFullscreen(),this.isFullscreen=!0,this.fullscreenIcon.classList.add("hidden"),this.exitFullscreenIcon.classList.remove("hidden"))}connectedCallback(){this._fullscreenChangeHandler=()=>{let e=!!document.fullscreenElement;this.isFullscreen=e,e?(this.fullscreenIcon.classList.add("hidden"),this.exitFullscreenIcon.classList.remove("hidden")):(this.fullscreenIcon.classList.remove("hidden"),this.exitFullscreenIcon.classList.add("hidden"))},document.addEventListener("fullscreenchange",this._fullscreenChangeHandler),document.addEventListener("webkitfullscreenchange",this._fullscreenChangeHandler),document.addEventListener("msfullscreenchange",this._fullscreenChangeHandler)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this._fullscreenChangeHandler),document.removeEventListener("webkitfullscreenchange",this._fullscreenChangeHandler),document.removeEventListener("msfullscreenchange",this._fullscreenChangeHandler)}initializeTime(){this.durationElem.textContent=this.formatTime(this.video.duration),this.currentTimeElem.textContent=this.formatTime(this.video.currentTime)}formatTime(e){let i=Math.floor(e/60)||0,o=Math.floor(e%60)||0;return`${i}:${o.toString().padStart(2,"0")}`}changeVolume(){let e=this.ran8ch.value/100;this.video.volume=Math.max(0,Math.min(1,e)),this.video.muted=this.ran8ch.value==0,this.ran8ch.value==0?(this.i9cshf_Off.style.display="flex",this.i9cshf_Mid.style.display="none",this.i9cshf_High.style.display="none"):this.ran8ch.value>0&&this.ran8ch.value<=60?(this.i9cshf_Off.style.display="none",this.i9cshf_Mid.style.display="flex",this.i9cshf_High.style.display="none"):(this.i9cshf_Off.style.display="none",this.i9cshf_Mid.style.display="none",this.i9cshf_High.style.display="flex")}forwardVideoCtrl(){if(!this.video.ended){let e=Math.min(this.video.currentTime+5,this.video.duration);this.video.currentTime=e}}backwardVideoCtrl(){if(!this.video.ended){let e=Math.max(this.video.currentTime-5,0);this.video.currentTime=e}}}customElements.define("js-player",u)})(b,f);