From b6f9b30e4376c192583a6859034358993ac59bc6 Mon Sep 17 00:00:00 2001 From: Korbs Date: Fri, 17 May 2024 03:57:38 -0400 Subject: [PATCH] update --- README.md | 2 +- src/index.js | 3 ++- test/css/index.css | 5 +++++ test/index.html | 3 ++- test/js/zorn.js | 16 ++++++++-------- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 98111bd..262c4c9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Zorn -![Preview of Zorn with default theme set](https://img.sudovanilla.com/dhHcB5l.png) +![Preview of Zorn with default theme set](https://i.sudovanilla.org/dhHcB5l.png) > Currently in beta stages. diff --git a/src/index.js b/src/index.js index 33e14d1..6e4c1c4 100644 --- a/src/index.js +++ b/src/index.js @@ -21,6 +21,7 @@ if (ZornVideoPlayer.getAttribute('layout') === 'default') { Title() } + // Init Functions Events() KeyboardShortcuts() @@ -31,4 +32,4 @@ Fullscreen() Subtitles() Volume() Seek() -Buffering() \ No newline at end of file +BufferDialog() \ No newline at end of file diff --git a/test/css/index.css b/test/css/index.css index a72ad60..b4e0ad1 100644 --- a/test/css/index.css +++ b/test/css/index.css @@ -1,4 +1,9 @@ body { background-color: #111111; color: white; +} + + +video { + height: 100% } \ No newline at end of file diff --git a/test/index.html b/test/index.html index e6d54aa..ccc90a7 100644 --- a/test/index.html +++ b/test/index.html @@ -1,12 +1,13 @@ + Zorn
-
@@ -352,8 +352,8 @@ div#buffering { } } -`;function $(){e.addEventListener("error",function(t){document.querySelector("#invalid-src").style.display="inherit",document.querySelector(".zorn-player-controls").style.display="none",videoContainer.style.backgroundColor="#101010",setTimeout(()=>{e.style.opacity="0.10",document.querySelector("#buffering").style.display="none"},168)},!0),e.onwaiting=t=>{document.querySelector("#buffering").style.display="inherit",e.style.transition="5s opacity",e.style.opacity="0.25"},e.oncanplaythrough=t=>{document.querySelector("#buffering").style.display="none",e.style.transition="0.3s opacity",e.style.opacity="1"}}function _(){let t=document.querySelector(".zorn-player-controls #play-pause");t.addEventListener("click",r),e.addEventListener("click",r),e.addEventListener("play",o),e.addEventListener("pause",o);function r(){e.paused||e.ended?e.play():e.pause()}function o(){e.paused?(t.setAttribute("data-title","Play (K)"),t.innerHTML=`${h}`):(t.setAttribute("data-title","Pause (K)"),t.innerHTML=`${S}`)}}function Z(){let t=document.querySelector(".zorn-player-controls #skip-back"),r=document.querySelector(".zorn-player-controls #skip-forth");t.addEventListener("click",o),r.addEventListener("click",n);function o(){l(-10)}function n(){l(10)}function l(a){e.currentTime+=a}}function U(){let t=document.getElementById("fullscreen");function r(){document.fullscreenElement?document.exitFullscreen():document.webkitFullscreenElement?document.webkitExitFullscreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.requestFullscreen()}t.onclick=r;function o(){document.fullscreenElement?t.setAttribute("data-title","Exit full screen (f)"):t.setAttribute("data-title","Full screen (f)")}d.addEventListener("fullscreenchange",o),e.addEventListener("dblclick",()=>{r()})}function G(){var t=document.querySelector(".zorn-player-controls #subtitles"),r=[],o=function(c,m,f){var k=document.createElement("li"),u=k.appendChild(document.createElement("button"));return u.setAttribute("id",c),u.className="subtitles-button",m.length>0&&u.setAttribute("lang",m),u.value=f,u.setAttribute("data-state","inactive"),u.appendChild(document.createTextNode(f)),u.addEventListener("click",function(i){r.map(function(v,X,ae){r[X].setAttribute("data-state","inactive")});for(var s=this.getAttribute("lang"),p=0;p0&&e.volume<=.5?t.innerHTML=`${H}`:t.innerHTML=`${g}`}e.addEventListener("volumechange",n);function l(){e.muted=!e.muted,e.muted?(r.setAttribute("data-volume",r.value),r.value=0):r.value=r.dataset.volume}t.addEventListener("click",l)}function R(){let t=document.getElementById("time-elapsed"),r=document.getElementById("duration");function o(i){let s=new Date(i*1e3).toISOString().substr(11,8);return{minutes:s.substr(3,2),seconds:s.substr(6,2)}}e.addEventListener("loadedmetadata",c);function n(){let i=o(Math.round(e.currentTime));t.innerText=`${i.minutes}:${i.seconds}`,t.setAttribute("datetime",`${i.minutes}m ${i.seconds}s`)}e.addEventListener("timeupdate",n);let l=document.getElementById("progress-bar"),a=document.getElementById("seek");function c(){let i=Math.round(e.duration);a.setAttribute("max",i),l.setAttribute("max",i);let s=o(i);r.innerText=`${s.minutes}:${s.seconds}`,r.setAttribute("datetime",`${s.minutes}m ${s.seconds}s`)}function m(){a.value=Math.floor(e.currentTime),l.value=Math.floor(e.currentTime)}e.addEventListener("timeupdate",m);let f=document.getElementById("seek-tooltip");function k(i){let s=Math.round(i.offsetX/i.target.clientWidth*parseInt(i.target.getAttribute("max"),10));a.setAttribute("data-seek",s);let p=o(s);f.textContent=`${p.minutes}:${p.seconds}`;let v=e.getBoundingClientRect();f.style.left=`${i.pageX-v.left}px`}a.addEventListener("mousemove",k);function u(i){let s=i.target.dataset.seek?i.target.dataset.seek:i.target.value;e.currentTime=s,l.value=s,a.value=s}a.addEventListener("input",u),c()}var D=` +`;function _(){e.addEventListener("error",function(t){document.querySelector("#invalid-src").style.display="inherit",document.querySelector(".zorn-player-controls").style.display="none",videoContainer.style.backgroundColor="#101010",setTimeout(()=>{e.style.opacity="0.10",document.querySelector("#buffering").style.display="none"},168)},!0),e.onwaiting=t=>{document.querySelector("#buffering").style.display="inherit",e.style.transition="5s opacity",e.style.opacity="0.25"},e.oncanplaythrough=t=>{document.querySelector("#buffering").style.display="none",e.style.transition="0.3s opacity",e.style.opacity="1"}}function Z(){let t=document.querySelector(".zorn-player-controls #play-pause");t.addEventListener("click",r),e.addEventListener("click",r),e.addEventListener("play",o),e.addEventListener("pause",o);function r(){e.paused||e.ended?e.play():e.pause()}function o(){e.paused?(t.setAttribute("data-title","Play (K)"),t.innerHTML=`${h}`):(t.setAttribute("data-title","Pause (K)"),t.innerHTML=`${E}`)}}function U(){let t=document.querySelector(".zorn-player-controls #skip-back"),r=document.querySelector(".zorn-player-controls #skip-forth");t.addEventListener("click",o),r.addEventListener("click",n);function o(){l(-10)}function n(){l(10)}function l(a){e.currentTime+=a}}function G(){let t=document.getElementById("fullscreen");function r(){document.fullscreenElement?document.exitFullscreen():document.webkitFullscreenElement?document.webkitExitFullscreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.requestFullscreen()}t.onclick=r;function o(){document.fullscreenElement?t.setAttribute("data-title","Exit full screen (f)"):t.setAttribute("data-title","Full screen (f)")}d.addEventListener("fullscreenchange",o),e.addEventListener("dblclick",()=>{r()})}function K(){var t=document.querySelector(".zorn-player-controls #subtitles"),r=[],o=function(c,m,f){var k=document.createElement("li"),u=k.appendChild(document.createElement("button"));return u.setAttribute("id",c),u.className="subtitles-button",m.length>0&&u.setAttribute("lang",m),u.value=f,u.setAttribute("data-state","inactive"),u.appendChild(document.createTextNode(f)),u.addEventListener("click",function(i){r.map(function(y,X,ae){r[X].setAttribute("data-state","inactive")});for(var s=this.getAttribute("lang"),p=0;p0&&e.volume<=.5?t.innerHTML=`${I}`:t.innerHTML=`${g}`}e.addEventListener("volumechange",n);function l(){e.muted=!e.muted,e.muted?(r.setAttribute("data-volume",r.value),r.value=0):r.value=r.dataset.volume}t.addEventListener("click",l)}function D(){let t=document.getElementById("time-elapsed"),r=document.getElementById("duration");function o(i){let s=new Date(i*1e3).toISOString().substr(11,8);return{minutes:s.substr(3,2),seconds:s.substr(6,2)}}e.addEventListener("loadedmetadata",c);function n(){let i=o(Math.round(e.currentTime));t.innerText=`${i.minutes}:${i.seconds}`,t.setAttribute("datetime",`${i.minutes}m ${i.seconds}s`)}e.addEventListener("timeupdate",n);let l=document.getElementById("progress-bar"),a=document.getElementById("seek");function c(){let i=Math.round(e.duration);a.setAttribute("max",i),l.setAttribute("max",i);let s=o(i);r.innerText=`${s.minutes}:${s.seconds}`,r.setAttribute("datetime",`${s.minutes}m ${s.seconds}s`)}function m(){a.value=Math.floor(e.currentTime),l.value=Math.floor(e.currentTime)}e.addEventListener("timeupdate",m);let f=document.getElementById("seek-tooltip");function k(i){let s=Math.round(i.offsetX/i.target.clientWidth*parseInt(i.target.getAttribute("max"),10));a.setAttribute("data-seek",s);let p=o(s);f.textContent=`${p.minutes}:${p.seconds}`;let y=e.getBoundingClientRect();f.style.left=`${i.pageX-y.left}px`}a.addEventListener("mousemove",k);function u(i){let s=i.target.dataset.seek?i.target.dataset.seek:i.target.value;e.currentTime=s,l.value=s,a.value=s}a.addEventListener("input",u),c()}var v=`
- ${P} + ${j}
-`;function O(){function t(){var a=document.querySelector(".zorn-title");e.paused||(document.querySelector(".zorn-player-controls").classList.add("hide"),a.classList.add("hide"))}function r(){var a=document.querySelector(".zorn-title");document.querySelector(".zorn-player-controls").classList.remove("hide"),a.classList.remove("hide")}e.addEventListener("mouseenter",r),e.addEventListener("mouseleave",t),document.querySelector(".zorn-player-controls").addEventListener("mouseenter",r),document.querySelector(".zorn-player-controls").addEventListener("mouseleave",t);var o=null,n=!0;function l(){o=null,d.style.cursor="none",n=!1,t()}document.onmousemove=function(){o&&(window.clearTimeout(o),r()),n||(d.style.cursor="default",n=!0),o=window.setTimeout(l,3200)}}function N(t){if(e.hasAttribute("keyboard-shortcut-fullscreen"))var r=e.getAttribute("keyboard-shortcut-fullscreen");else var r="f";if(e.hasAttribute("keyboard-shortcut-mute"))var o=e.getAttribute("keyboard-shortcut-mute");else var o="m";if(e.hasAttribute("keyboard-shortcut-playpause"))var n=e.getAttribute("keyboard-shortcut-playpause");else var n="k";if(e.hasAttribute("keyboard-shortcut-skipback"))var l=e.getAttribute("keyboard-shortcut-skipback");else var l="j";if(e.hasAttribute("keyboard-shortcut-skipforth"))var a=e.getAttribute("keyboard-shortcut-skipforth");else var a="l";function c(m){let{key:f}=m;f===n?(e.paused||e.ended?e.play():e.pause(),e.paused?Show_Controls():setTimeout(()=>{Hide_Controls()},1200)):f===o?(e.muted=!e.muted,e.muted?(volume.setAttribute("data-volume",volume.value),volume.value=0):volume.value=volume.dataset.volume):f===r?document.fullscreenElement?document.exitFullscreen():document.webkitFullscreenElement?document.webkitExitFullscreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.requestFullscreen():f===l?e.currentTime+=-10:f===a&&(e.currentTime+=10)}document.addEventListener("keyup",c)}e.insertAdjacentHTML("afterend",q);e.insertAdjacentHTML("afterend",D);e.getAttribute("layout")==="default"&&j();$();N();_();O();Z();U();G();K();R();Buffering();})(); +`;function O(){function t(){var a=document.querySelector(".zorn-title");e.paused||(document.querySelector(".zorn-player-controls").classList.add("hide"),a.classList.add("hide"))}function r(){var a=document.querySelector(".zorn-title");document.querySelector(".zorn-player-controls").classList.remove("hide"),a.classList.remove("hide")}e.addEventListener("mouseenter",r),e.addEventListener("mouseleave",t),document.querySelector(".zorn-player-controls").addEventListener("mouseenter",r),document.querySelector(".zorn-player-controls").addEventListener("mouseleave",t);var o=null,n=!0;function l(){o=null,d.style.cursor="none",n=!1,t()}document.onmousemove=function(){o&&(window.clearTimeout(o),r()),n||(d.style.cursor="default",n=!0),o=window.setTimeout(l,3200)}}function N(t){if(e.hasAttribute("keyboard-shortcut-fullscreen"))var r=e.getAttribute("keyboard-shortcut-fullscreen");else var r="f";if(e.hasAttribute("keyboard-shortcut-mute"))var o=e.getAttribute("keyboard-shortcut-mute");else var o="m";if(e.hasAttribute("keyboard-shortcut-playpause"))var n=e.getAttribute("keyboard-shortcut-playpause");else var n="k";if(e.hasAttribute("keyboard-shortcut-skipback"))var l=e.getAttribute("keyboard-shortcut-skipback");else var l="j";if(e.hasAttribute("keyboard-shortcut-skipforth"))var a=e.getAttribute("keyboard-shortcut-skipforth");else var a="l";function c(m){let{key:f}=m;f===n?(e.paused||e.ended?e.play():e.pause(),e.paused?Show_Controls():setTimeout(()=>{Hide_Controls()},1200)):f===o?(e.muted=!e.muted,e.muted?(volume.setAttribute("data-volume",volume.value),volume.value=0):volume.value=volume.dataset.volume):f===r?document.fullscreenElement?document.exitFullscreen():document.webkitFullscreenElement?document.webkitExitFullscreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.requestFullscreen():f===l?e.currentTime+=-10:f===a&&(e.currentTime+=10)}document.addEventListener("keyup",c)}e.insertAdjacentHTML("afterend",$);e.insertAdjacentHTML("afterend",v);e.getAttribute("layout")==="default"&&q();_();N();Z();O();U();G();K();R();D();v();})();