init
This commit is contained in:
BIN
animex/src/.DS_Store
vendored
Normal file
BIN
animex/src/.DS_Store
vendored
Normal file
Binary file not shown.
503
animex/src/csPlayer.js
Normal file
503
animex/src/csPlayer.js
Normal file
@@ -0,0 +1,503 @@
|
||||
// csPlayer.js - Patched to hide Related Videos on Pause
|
||||
|
||||
function $(selector,parent){
|
||||
var x;
|
||||
try{
|
||||
const elements = document.querySelectorAll(selector);
|
||||
if(elements.length == 1){x = elements[0]}
|
||||
else if(elements.length == 0){x = null}
|
||||
else{x = elements}
|
||||
}catch(error){
|
||||
x = error;
|
||||
}return x;
|
||||
}
|
||||
|
||||
var csPlayer ={
|
||||
csPlayers : {},
|
||||
preSetup: (videoTag,playerTagId,defaultId)=>{
|
||||
var theme =("theme" in csPlayer.csPlayers[videoTag]["params"]) ? csPlayer.csPlayers[videoTag]["params"]["theme"] : null;
|
||||
var themeClass = theme ? "theme-"+theme : "";
|
||||
return new Promise((resolve, reject) => {
|
||||
$("#"+videoTag).innerHTML =`
|
||||
<div class="csPlayer ${themeClass}">
|
||||
<div class="csPlayer-container">
|
||||
<span>
|
||||
<div></div>
|
||||
<i class="ti ti-player-play-filled csPlayer-loading"></i>
|
||||
<div></div>
|
||||
</span>
|
||||
<div id=${playerTagId}></div>
|
||||
</div>
|
||||
<div class="csPlayer-controls-box">
|
||||
<main>
|
||||
<i class="ti ti-rewind-backward-10"></i>
|
||||
<i class="ti csPlayer-play-pause-btn ti-player-play-filled"></i>
|
||||
<i class="ti ti-rewind-forward-10"></i>
|
||||
</main>
|
||||
<div class="csPlayer-controls">
|
||||
<p>00:00</p>
|
||||
<div><span></span>
|
||||
<input type="range" min="0" max="100" value="0" step="1"></div>
|
||||
<p>00:00</p>
|
||||
<i class="ti ti-settings settingsBtn"></i>
|
||||
<i class="ti ti-maximize fsBtn"></i>
|
||||
</div>
|
||||
<div class="csPlayer-settings-box">
|
||||
<p>Speed<b>1x</b><i class="ti ti-caret-right-filled"></i></p>
|
||||
<span>
|
||||
<label><input type="radio" name=${videoTag}1>0.75x</label>
|
||||
<label><input type="radio" name=${videoTag}1 checked>1x</label>
|
||||
<label><input type="radio" name=${videoTag}1>1.25x</label>
|
||||
<label><input type="radio" name=${videoTag}1>1.5x</label>
|
||||
<label><input type="radio" name=${videoTag}1>1.75x</label>
|
||||
<label><input type="radio" name=${videoTag}1>2x</label>
|
||||
</span>
|
||||
<p>Quality<b>auto</b><i class="ti ti-caret-right-filled"></i></p>
|
||||
<span>
|
||||
<label><input type="radio" name=${videoTag}2 checked>auto</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
pauseVideoWithPromise:(x)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
try{
|
||||
x.pauseVideo()
|
||||
resolve('Video paused');
|
||||
}catch(error){
|
||||
reject('Error pausing video: ' + error);
|
||||
}
|
||||
});
|
||||
},
|
||||
YtSetup:(videoTag,playerTagId,defaultId)=>{
|
||||
var parent = document.querySelector("#"+playerTagId).closest(".csPlayer");
|
||||
var controlsTimeout = null;
|
||||
return new Promise((resolve, reject) => {
|
||||
csPlayer.csPlayers[videoTag]["videoTag"] = new YT.Player(playerTagId,{
|
||||
videoId: csPlayer.csPlayers[videoTag]["params"]["defaultId"],
|
||||
playerVars:{
|
||||
controls: 0,
|
||||
mute: 1,
|
||||
autoplay: 1,
|
||||
disablekb: 1,
|
||||
color: "white",
|
||||
fs: 0,
|
||||
playsinline: 1,
|
||||
rel: 0,
|
||||
loop: 0,
|
||||
cc_load_policy: 3,
|
||||
showinfo: 0,
|
||||
iv_load_policy: 3,
|
||||
},
|
||||
events:{
|
||||
'onReady':()=>{
|
||||
if($("#"+videoTag) != null && videoTag){
|
||||
csPlayer.pauseVideoWithPromise(csPlayer.csPlayers[videoTag]["videoTag"]).then(()=>{
|
||||
parent.querySelector(".csPlayer-container iframe").addEventListener("load",()=>{
|
||||
parent.querySelector(".csPlayer-container span i").classList.remove("csPlayer-loading");
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].addEventListener('onStateChange', onPlayerStateChange);
|
||||
parent.querySelector(".csPlayer-controls-box main i:nth-of-type(1)").addEventListener("click", backward);
|
||||
parent.querySelector(".csPlayer-controls-box main i:nth-of-type(2)").addEventListener("click", togglePlayPause);
|
||||
parent.querySelector(".csPlayer-controls-box main i:nth-of-type(3)").addEventListener("click", forward);
|
||||
csPlayer.csPlayers[videoTag]["TextTimeInterval"] = setInterval(updateTextTime,1000);
|
||||
csPlayer.csPlayers[videoTag]["TimeSliderInterval"] = setInterval(updateTimeSlider,1000); parent.querySelector(".csPlayer-controls-box .csPlayer-controls input").addEventListener("input",updateSlider);
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls .fsBtn").addEventListener("click",toggleFullscreen);
|
||||
document.fullscreenEnabled ? parent.querySelector(".csPlayer-controls-box .csPlayer-controls .fsBtn").style.display ="block" : parent.querySelector(".csPlayer-controls-box .csPlayer-controls .fsBtn").style.display ="none";
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls .settingsBtn").addEventListener("click",toggleSettings);
|
||||
});
|
||||
});
|
||||
}},
|
||||
}
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
|
||||
function backward(){
|
||||
updateTextTime()
|
||||
updateTimeSlider()
|
||||
var currentTime = csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].seekTo(Math.max(0, currentTime - 10), true);
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
}
|
||||
|
||||
function forward(){
|
||||
updateTextTime()
|
||||
updateTimeSlider()
|
||||
var currentTime = csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].seekTo(currentTime + 10, true);
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
}
|
||||
|
||||
function togglePlayPause(){
|
||||
if(csPlayer.csPlayers[videoTag]["isPlaying"]){
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].pauseVideo();
|
||||
clearTimeout(controlsTimeout);
|
||||
}else{
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].playVideo();
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const h = Math.floor(seconds / 3600),
|
||||
m = Math.floor((seconds % 3600) / 60),
|
||||
s = Math.floor(seconds % 60);
|
||||
return h > 0 ? `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function timeToSeconds(t){
|
||||
var p = t.split(":").map(Number);
|
||||
return p.length === 3 ? p[0] * 3600 + p[1] * 60 + p[2] : p[0] * 60 + p[1];
|
||||
}
|
||||
|
||||
function updateTextTime(){
|
||||
var currentTime = csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
var duration = csPlayer.csPlayers[videoTag]["videoTag"].getDuration();
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls p:nth-of-type(1)").innerHTML = formatTime(String(currentTime));
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls p:nth-of-type(2)").innerHTML = formatTime(String(duration));
|
||||
}
|
||||
|
||||
function updateTimeSlider(){
|
||||
var slider = parent.querySelector(".csPlayer-controls-box .csPlayer-controls div input");
|
||||
var currentTime = csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
var duration = csPlayer.csPlayers[videoTag]["videoTag"].getDuration();
|
||||
var progress = (currentTime/duration)*100;
|
||||
var loaded = (csPlayer.csPlayers[videoTag]["videoTag"].getVideoLoadedFraction())*100;
|
||||
slider.value = progress;
|
||||
slider.style.background =`linear-gradient(to right, var(--sliderSeekTrackColor) ${progress}%, transparent ${progress}%)`;
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls div span").style.width = loaded+"%";
|
||||
}
|
||||
|
||||
function updateSlider(){
|
||||
clearTimeout(controlsTimeout);
|
||||
var slider = parent.querySelector(".csPlayer-controls-box .csPlayer-controls div input");
|
||||
var duration = csPlayer.csPlayers[videoTag]["videoTag"].getDuration();
|
||||
var progress = slider.value;
|
||||
slider.style.background =`linear-gradient(to right, var(--sliderSeekTrackColor) ${progress}%, transparent ${progress}%)`;
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].seekTo((slider.value/100)*duration);
|
||||
slider.value = slider.value;
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
}
|
||||
|
||||
function toggleFullscreen(){
|
||||
const videoContainer = parent;
|
||||
if(!document.fullscreenElement && document.fullscreenEnabled){
|
||||
if(videoContainer.requestFullscreen){
|
||||
videoContainer.requestFullscreen();
|
||||
}else if(videoContainer.mozRequestFullScreen){
|
||||
videoContainer.mozRequestFullScreen();
|
||||
}else if(videoContainer.webkitRequestFullscreen){
|
||||
videoContainer.webkitRequestFullscreen();
|
||||
}else if(videoContainer.msRequestFullscreen){
|
||||
videoContainer.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
else if(document.fullscreenElement && document.fullscreenEnabled){
|
||||
if(document.exitFullscreen){
|
||||
document.exitFullscreen();
|
||||
}else if(document.mozCancelFullScreen){
|
||||
document.mozCancelFullScreen();
|
||||
}else if(document.webkitExitFullscreen){
|
||||
document.webkitExitFullscreen();
|
||||
}else if(document.msExitFullscreen){
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}else{
|
||||
console.warn("Fullscreen api not supported in your browser.");
|
||||
}
|
||||
}
|
||||
|
||||
function resetSettings(){
|
||||
var settings = parent.querySelector(".csPlayer-controls-box .csPlayer-settings-box");
|
||||
settings.querySelectorAll("p").forEach(pin=>{
|
||||
pin.nextElementSibling.style.maxHeight ="0px";
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSettings(){
|
||||
const targetElement = parent.querySelector(".csPlayer-controls-box");
|
||||
var settings = parent.querySelector(".csPlayer-controls-box .csPlayer-settings-box");
|
||||
var qualities = csPlayer.csPlayers[videoTag]["videoTag"].getAvailableQualityLevels();
|
||||
for(x of qualities){
|
||||
if(!settings.querySelector("span:nth-of-type(2)").innerHTML.includes(x)){
|
||||
settings.querySelector("span:nth-of-type(2)").innerHTML +=`<label><input type="radio" name=${videoTag}2>${x}</label>`;
|
||||
}
|
||||
}
|
||||
const obsrvr = new MutationObserver((mutationsList)=>{
|
||||
mutationsList.forEach((mutation) => {
|
||||
if(mutation.attributeName === 'class'){
|
||||
if(!targetElement.className.includes("open")){
|
||||
settings.style.display ="none";
|
||||
resetSettings();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
obsrvr.observe(targetElement,{
|
||||
attributes: true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
if(settings.style.display =="block"){
|
||||
settings.style.display ="none";
|
||||
}else{
|
||||
settings.style.display ="block";
|
||||
}
|
||||
settings.addEventListener("click",()=>{
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
});
|
||||
|
||||
settings.querySelectorAll("p").forEach(pin=>{
|
||||
pin.addEventListener("click",()=>{
|
||||
settings.querySelectorAll("p").forEach(Allpin=>{
|
||||
Allpin.nextElementSibling.style.maxHeight ="0px";
|
||||
});
|
||||
pin.nextElementSibling.style.maxHeight ="400px";
|
||||
});
|
||||
});
|
||||
|
||||
settings.querySelectorAll("span:nth-of-type(1) input").forEach(spdInput=>{
|
||||
spdInput.addEventListener("change",(e)=>{
|
||||
var value = e.target.parentElement.innerText.slice(0,-1);
|
||||
settings.querySelector("p:nth-of-type(1) b").innerText = value+"x";
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].setPlaybackRate(Number(value));
|
||||
});
|
||||
});
|
||||
|
||||
settings.querySelectorAll("span:nth-of-type(2) input").forEach(qualInput=>{
|
||||
qualInput.addEventListener("change",(e)=>{
|
||||
var value = e.target.parentElement.innerText;
|
||||
try{
|
||||
var currentTime = csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
settings.querySelector("p:nth-of-type(2) b").innerText = value;
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].setPlaybackQuality(value);
|
||||
}catch(error){
|
||||
throw new Error(error);
|
||||
settings.querySelector("p:nth-of-type(2) b").innerText = value;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// KEY CHANGE HERE: Hide Overlay logic
|
||||
// ==========================================
|
||||
function onPlayerStateChange(event){
|
||||
if(event.data == YT.PlayerState.PLAYING){
|
||||
csPlayer.csPlayers[videoTag]["isPlaying"] = true;
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="playing";
|
||||
parent.querySelector(".csPlayer-controls-box main .csPlayer-play-pause-btn").className ="ti csPlayer-play-pause-btn ti-player-pause-filled";
|
||||
|
||||
// Hide the cover overlay when playing
|
||||
parent.querySelector(".csPlayer-container span").style.display ="none";
|
||||
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].unMute();
|
||||
parent.querySelector(".csPlayer-container").style.pointerEvents ="none";
|
||||
parent.querySelector(".csPlayer-controls-box").style.display ="flex";
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
|
||||
parent.querySelector(".csPlayer-controls-box").onclick = function(e){
|
||||
if(!parent.querySelector(".csPlayer-controls-box main").contains(e.target) && !parent.querySelector(".csPlayer-controls-box .csPlayer-controls").contains(e.target) && !parent.querySelector(".csPlayer-controls-box .csPlayer-settings-box").contains(e.target)){
|
||||
if(parent.querySelector(".csPlayer-controls-box").classList.contains("csPlayer-controls-open")){
|
||||
parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");
|
||||
clearTimeout(controlsTimeout);
|
||||
}else{
|
||||
parent.querySelector(".csPlayer-controls-box").classList.add("csPlayer-controls-open");
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
parent.querySelector(".csPlayer-controls-box .csPlayer-controls").addEventListener("click", ()=>{
|
||||
clearTimeout(controlsTimeout);
|
||||
controlsTimeout = setTimeout(()=>{parent.querySelector(".csPlayer-controls-box").classList.remove("csPlayer-controls-open");},3000);
|
||||
});
|
||||
|
||||
} else if(event.data == YT.PlayerState.PAUSED){
|
||||
clearTimeout(controlsTimeout);
|
||||
csPlayer.csPlayers[videoTag]["isPlaying"] = false;
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="paused";
|
||||
parent.querySelector(".csPlayer-controls-box main .csPlayer-play-pause-btn").className ="ti csPlayer-play-pause-btn ti-player-play-filled";
|
||||
|
||||
// === NEW LINE: SHOW COVER ON PAUSE ===
|
||||
// This covers the YouTube "More Videos" grid with your thumbnail/color
|
||||
parent.querySelector(".csPlayer-container span").style.display = "flex";
|
||||
|
||||
if(!parent.querySelector(".csPlayer-controls-box").classList.contains("csPlayer-controls-open")){
|
||||
parent.querySelector(".csPlayer-controls-box").classList.add("csPlayer-controls-open");
|
||||
}
|
||||
} else if(event.data == YT.PlayerState.BUFFERING){
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="buffering";
|
||||
} else if(event.data == YT.PlayerState.CUED){
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="cued";
|
||||
} else if(event.data == YT.PlayerState.ENDED){
|
||||
if(csPlayer.csPlayers[videoTag]["params"]["loop"] == true || csPlayer.csPlayers[videoTag]["params"]["loop"] =="true"){
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].seekTo(0);
|
||||
}else{
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].seekTo(0);
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].pauseVideo();
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="ended";
|
||||
}
|
||||
}
|
||||
try{
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].unloadModule("captions");
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].unloadModule("cc");
|
||||
}catch(exception){}
|
||||
}
|
||||
},
|
||||
init:(videoTag,params)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
if(videoTag && params && ("defaultId" in params)){
|
||||
if($("#"+videoTag)!=null){
|
||||
if(!(videoTag in csPlayer.csPlayers)){
|
||||
csPlayer.csPlayers[videoTag] = {}
|
||||
csPlayer.csPlayers[videoTag]["videoTag"] = videoTag;
|
||||
csPlayer.csPlayers[videoTag]["params"] = params;
|
||||
if("defaultId" in params){
|
||||
csPlayer.csPlayers[videoTag]["params"]["defaultId"] = params["defaultId"];
|
||||
}if("loop" in params){
|
||||
csPlayer.csPlayers[videoTag]["params"]["loop"] = params["loop"];
|
||||
}if("thumbnail" in params){
|
||||
csPlayer.csPlayers[videoTag]["params"]["thumbnail"] = params["thumbnail"];
|
||||
}if("theme" in params){
|
||||
csPlayer.csPlayers[videoTag]["params"]["theme"] = params["theme"];
|
||||
}
|
||||
csPlayer.csPlayers[videoTag]["isPlaying"] = false;
|
||||
csPlayer.csPlayers[videoTag]["playerState"] ="paused";
|
||||
csPlayer.csPlayers[videoTag]["initialized"] = false; csPlayer.preSetup(videoTag,playerTagId="csPlayer-"+videoTag,params["defaultId"]).then(()=>{
|
||||
var parent = document.querySelector("#"+playerTagId).closest(".csPlayer");
|
||||
if(("thumbnail" in csPlayer.csPlayers[videoTag]["params"])){
|
||||
if(csPlayer.csPlayers[videoTag]["params"]["thumbnail"] == true || csPlayer.csPlayers[videoTag]["params"]["thumbnail"] =="true"){
|
||||
parent.querySelector(".csPlayer-container span").style.backgroundImage =`url("https://img.youtube.com/vi/${csPlayer.csPlayers[videoTag]["params"]["defaultId"]}/maxresdefault.jpg")`;
|
||||
}else if(csPlayer.csPlayers[videoTag]["params"]["thumbnail"] == false || csPlayer.csPlayers[videoTag]["params"]["thumbnail"] =="false"){
|
||||
parent.querySelector(".csPlayer-container span").style.backgroundImage ="none";
|
||||
}else{
|
||||
parent.querySelector(".csPlayer-container span").style.backgroundImage =`url(${csPlayer.csPlayers[videoTag]["params"]["thumbnail"]})`;
|
||||
}} csPlayer.YtSetup(videoTag,playerTagId="csPlayer-"+videoTag,params["defaultId"]).then(()=>{
|
||||
csPlayer.csPlayers[videoTag]["initialized"] = true;
|
||||
console.log("Player",videoTag,"initialized.");
|
||||
});
|
||||
});
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" already exists.");
|
||||
}}else{
|
||||
throw new Error("No tag with id "+videoTag+" available in the document.");
|
||||
}}else{
|
||||
throw new Error("Init function must have two parameters and second parameter must have defaultId.");
|
||||
}
|
||||
resolve();});
|
||||
},
|
||||
|
||||
pause:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].pauseVideo();
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("pause function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
play:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
if(!csPlayer.csPlayers[videoTag]["videoTag"].isMuted()){
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].playVideo();
|
||||
}else{
|
||||
throw new Error("Before calling play function, the video must be played atleat once.");
|
||||
}}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("play function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
getDuration:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
return csPlayer.csPlayers[videoTag]["videoTag"].getDuration();
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("getDuration function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
getCurrentTime:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
return csPlayer.csPlayers[videoTag]["videoTag"].getCurrentTime();
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("getCurrentTime function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
getVideoTitle:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
return csPlayer.csPlayers[videoTag]["videoTag"].getVideoData().title;
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("getVideoTitle function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
getPlayerState:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
return csPlayer.csPlayers[videoTag]["playerState"];
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("getPlayerState function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
changeVideo:(videoTag,videoId)=>{
|
||||
if(videoTag && videoId){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
if(!csPlayer.csPlayers[videoTag]["videoTag"].isMuted()){
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].loadVideoById(videoId,0);
|
||||
}else{
|
||||
throw new Error("Before calling the changeVideo function, the previous video must be played in the player.");
|
||||
}
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("changeVideo function must have two parameters, first parameter as player Id and second as the new YouTube video ID.")
|
||||
}
|
||||
},
|
||||
destroy:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers) && csPlayer.csPlayers[videoTag]["initialized"] == true){
|
||||
if("TimeSliderInterval" in csPlayer.csPlayers[videoTag]){
|
||||
clearInterval(csPlayer.csPlayers[videoTag]["TimeSliderInterval"]);
|
||||
}
|
||||
if("TextTimeInterval" in csPlayer.csPlayers[videoTag]){
|
||||
clearInterval(csPlayer.csPlayers[videoTag]["TextTimeInterval"]);
|
||||
}
|
||||
csPlayer.csPlayers[videoTag]["videoTag"].destroy();
|
||||
delete csPlayer.csPlayers[videoTag];
|
||||
$("#"+videoTag+" .csPlayer").remove();
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" is not initialized yet.")
|
||||
}}else{
|
||||
throw new Error("changeVideo function must have two parameters, first parameter as player Id and second as the new YouTube video ID.")
|
||||
}
|
||||
},
|
||||
initialized:(videoTag)=>{
|
||||
if(videoTag){
|
||||
if((videoTag in csPlayer.csPlayers)){
|
||||
return csPlayer.csPlayers[videoTag]["initialized"];
|
||||
}else{
|
||||
throw new Error("Player "+videoTag+" doesn't exist. ")
|
||||
}}else{
|
||||
throw new Error("pause function must have player id as a parameter.")
|
||||
}
|
||||
},
|
||||
}
|
||||
434
animex/src/csplayer.css
Normal file
434
animex/src/csplayer.css
Normal file
@@ -0,0 +1,434 @@
|
||||
@import url("./icons/tabler-icons.min.css");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* outline: 1px solid greenyellow !important;*/
|
||||
}
|
||||
|
||||
.csPlayer {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: #e1e1e1;
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: var(--playerColor);
|
||||
--startBtnIconColor: var(--playerBg);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: var(--playerColor);
|
||||
--sliderSeekTrackColor: var(--playerColor);
|
||||
--sliderLoadedTrackColor: #878787;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #181818;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
background: var(--playerBg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 0 auto;
|
||||
user-select: none !important;
|
||||
position: relative;
|
||||
border-radius: var(--playerBR);
|
||||
min-width: 270px !important;
|
||||
}
|
||||
.theme-default {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: #e1e1e1;
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: var(--playerColor);
|
||||
--startBtnIconColor: var(--playerBg);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: var(--playerColor);
|
||||
--sliderSeekTrackColor: var(--playerColor);
|
||||
--sliderLoadedTrackColor: #878787;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #181818;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
}
|
||||
.theme-youtube {
|
||||
--playerBg: #000;
|
||||
--playerColor: #e1e1e1;
|
||||
--playerBR: 5px;
|
||||
--startLoaderColor: var(--playerColor);
|
||||
--startBtnSize: 65px;
|
||||
--startBtnBg: #fe0001;
|
||||
--startBtnIconColor: var(--playerColor);
|
||||
--playPauseIconColor: var(--playerColor);
|
||||
--forwardIconColor: var(--playerColor);
|
||||
--backwardIconColor: var(--playerColor);
|
||||
--sliderBg: #383838;
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: #fe0001;
|
||||
--sliderSeekTrackColor: #fe0001;
|
||||
--sliderLoadedTrackColor: #787672;
|
||||
--currentTimeTextColor: var(--playerColor);
|
||||
--durationTextColor: var(--playerColor);
|
||||
--settingsBtnColor: var(--playerColor);
|
||||
--fullscreenBtnColor: var(--playerColor);
|
||||
--settingsBg: #212121;
|
||||
--settingsTextColor: var(--playerColor);
|
||||
--settingsInputIconBg: #4b4b4b;
|
||||
--settingsInputIconColor: var(--playerColor);
|
||||
}
|
||||
.theme-plyr {
|
||||
--playerBg: #000000;
|
||||
--playerColor: #626a76;
|
||||
--playerBR: 10px;
|
||||
--startLoaderColor: #ffffff;
|
||||
--startBtnSize: 60px;
|
||||
--startBtnBg: #01b2ff;
|
||||
--startBtnIconColor: #ffffff;
|
||||
--playPauseIconColor: #ffffff;
|
||||
--forwardIconColor: #ffffff;
|
||||
--backwardIconColor: #ffffff;
|
||||
--sliderBg: rgba(255, 255, 255, 0.1);
|
||||
--sliderThumbSize: 15px;
|
||||
--sliderThumbColor: #01b2ff;
|
||||
--sliderSeekTrackColor: #01b2ff;
|
||||
--sliderLoadedTrackColor: #787672;
|
||||
--currentTimeTextColor: #ffffff;
|
||||
--durationTextColor: #ffffff;
|
||||
--settingsBtnColor: #ffffff;
|
||||
--fullscreenBtnColor: #ffffff;
|
||||
--settingsBg: rgba(255, 255, 255, 0.95);
|
||||
--settingsTextColor: #3d4049;
|
||||
--settingsInputIconBg: #d9dadc;
|
||||
--settingsInputIconColor: #01b2ff;
|
||||
}
|
||||
.csPlayer .csPlayer-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--playerBR);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.csPlayer .csPlayer-container iframe {
|
||||
width: 2400%;
|
||||
height: 100%;
|
||||
margin-left: -1149.95%;
|
||||
border: none;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
}
|
||||
.csPlayer .csPlayer-container span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--playerBg);
|
||||
background-image: none;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.csPlayer .csPlayer-container span i {
|
||||
display: block;
|
||||
width: var(--startBtnSize);
|
||||
height: var(--startBtnSize);
|
||||
color: var(--startBtnIconColor);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: var(--startBtnBg);
|
||||
font-size: calc(var(--startBtnSize) / 2.5);
|
||||
}
|
||||
.csPlayer-loading {
|
||||
color: transparent !important;
|
||||
background: transparent !important;
|
||||
border: 5px solid var(--startLoaderColor) !important;
|
||||
border-bottom-color: transparent !important;
|
||||
animation: csPlayerSpin 1s linear infinite;
|
||||
}
|
||||
@keyframes csPlayerSpin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.csPlayer .csPlayer-container span div {
|
||||
width: 100%;
|
||||
height: calc(50% - (var(--startBtnSize) / 2));
|
||||
background: transparent !important;
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.csPlayer .csPlayer-container span div:nth-of-type(1) {
|
||||
top: 0;
|
||||
}
|
||||
.csPlayer .csPlayer-container span div:nth-of-type(2) {
|
||||
bottom: 0;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
background: transparent;
|
||||
border-radius: var(--playerBR);
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.csPlayer-controls-open {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.csPlayer-controls-open main {
|
||||
transform: translate(-50%, -50%) scale(1) !important;
|
||||
}
|
||||
.csPlayer-controls-open .csPlayer-controls {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform 0s ease-in-out;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i {
|
||||
font-size: 2rem;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.ti-rewind-backward-10 {
|
||||
color: var(--backwardIconColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.ti-rewind-forward-10 {
|
||||
color: var(--forwardIconColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box main i.csPlayer-play-pause-btn {
|
||||
color: var(--playPauseIconColor);
|
||||
padding: 10px;
|
||||
border: 2px solid var(--playPauseIconColor);
|
||||
border-radius: 100%;
|
||||
margin: 0 3.5rem;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 8px 10px;
|
||||
transform: scale(0);
|
||||
transition: transform 0s ease-in-out;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p {
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p:nth-of-type(1) {
|
||||
color: var(--currentTimeTextColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls p:nth-of-type(2) {
|
||||
color: var(--durationTextColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i {
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 0 6px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i.settingsBtn {
|
||||
color: var(--settingsBtnColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls i.fsBtn {
|
||||
color: var(--fullscreenBtnColor);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
background: var(--sliderBg);
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div span {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: var(--sliderLoadedTrackColor);
|
||||
opacity: 0.5;
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div input {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--sliderSeekTrackColor) 0%,
|
||||
transparent 0%
|
||||
);
|
||||
border-radius: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-controls div input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: calc(0px - (var(--sliderThumbSize) / 3));
|
||||
background-color: var(--sliderThumbColor);
|
||||
height: calc(var(--sliderThumbSize));
|
||||
width: calc(var(--sliderThumbSize));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Firefox */
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-moz-range-track {
|
||||
background: transparent;
|
||||
height: calc(var(--sliderThumbSize) / 3);
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-controls
|
||||
div
|
||||
input::-moz-range-thumb {
|
||||
margin-top: calc(0px - (var(--sliderThumbSize) / 3));
|
||||
background-color: var(--sliderThumbColor);
|
||||
height: calc(var(--sliderThumbSize));
|
||||
width: calc(var(--sliderThumbSize));
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box {
|
||||
width: 150px;
|
||||
max-width: 200px;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 50px;
|
||||
padding: 4px 10px;
|
||||
background: var(--settingsBg);
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p {
|
||||
width: 100%;
|
||||
color: var(--settingsTextColor);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p b {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0 auto;
|
||||
padding-left: 15px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box p i {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box span {
|
||||
display: block;
|
||||
max-height: 0px;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.csPlayer .csPlayer-controls-box .csPlayer-settings-box span label {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
font-size: 13px;
|
||||
color: var(--settingsTextColor);
|
||||
margin: 6px 0;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-settings-box
|
||||
span
|
||||
label
|
||||
input[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--settingsInputIconBg);
|
||||
margin: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
margin-right: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
.csPlayer
|
||||
.csPlayer-controls-box
|
||||
.csPlayer-settings-box
|
||||
span
|
||||
label
|
||||
input[type="radio"]:checked {
|
||||
border: 5px solid var(--settingsInputIconColor);
|
||||
}
|
||||
4
animex/src/icons/tabler-icons.min.css
vendored
Normal file
4
animex/src/icons/tabler-icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
animex/src/icons/tabler-icons.ttf
Normal file
BIN
animex/src/icons/tabler-icons.ttf
Normal file
Binary file not shown.
BIN
animex/src/icons/tabler-icons.woff
Normal file
BIN
animex/src/icons/tabler-icons.woff
Normal file
Binary file not shown.
BIN
animex/src/icons/tabler-icons.woff2
Normal file
BIN
animex/src/icons/tabler-icons.woff2
Normal file
Binary file not shown.
8
animex/src/mangadex.html
Normal file
8
animex/src/mangadex.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<iframe
|
||||
src="https://mangadex.org/"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
title="MangaDex">
|
||||
</iframe>
|
||||
Reference in New Issue
Block a user