diff --git a/src/functions/AutoToggleControls.js b/src/functions/AutoToggleControls.js index 39ad80f..d9ee456 100644 --- a/src/functions/AutoToggleControls.js +++ b/src/functions/AutoToggleControls.js @@ -3,7 +3,7 @@ import { VideoContainer, VideoControls, ZornVideoPlayer } from '../get' export function AutoToggleControls() { function Hide_Controls() { - var ZornTitleArea = document.querySelector(".video-container > h2") + var ZornTitleArea = document.querySelector(".zorn-title") if (ZornVideoPlayer.paused) { return } else { @@ -14,7 +14,7 @@ export function AutoToggleControls() { // Show_Controls displays the video controls function Show_Controls() { - var ZornTitleArea = document.querySelector(".video-container > h2") + var ZornTitleArea = document.querySelector(".zorn-title") document.querySelector('.zorn-player-controls').classList.remove('hide') ZornTitleArea.classList.remove('hide') } diff --git a/src/index.js b/src/index.js index 97adbb2..33e14d1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import { ZornVideoPlayer } from "./get" -import { Controls } from "./themes/default" +import { Controls, Title } from "./themes/default" // Import Functions import { Events } from './events' @@ -17,6 +17,10 @@ import { KeyboardShortcuts } from "./functions/KeyboardShortcuts" ZornVideoPlayer.insertAdjacentHTML("afterend", Controls) ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog) +if (ZornVideoPlayer.getAttribute('layout') === 'default') { + Title() +} + // Init Functions Events() KeyboardShortcuts() diff --git a/src/themes/default.js b/src/themes/default.js index 8b6b739..b41ba7d 100644 --- a/src/themes/default.js +++ b/src/themes/default.js @@ -1,13 +1,25 @@ import { PlayIcon, - PauseIcon, FullcreenIcon, CaptionsIcon, Backward15Icon, Forward15Icon, - VolumeHighIcon + VolumeHighIcon, + ZornVideoPlayer } from '../get' + +// This theme includes an optional title +export function Title() { + let VideoTitle = ZornVideoPlayer.getAttribute('video-title') + document.querySelector(".zorn-title").innerHTML = VideoTitle + if (ZornVideoPlayer.hasAttribute('video-title')) { + document.querySelector('.zorn-title').style.display = 'inherit' + } else { + document.querySelector('.zorn-title').style.display = 'none' + } +} + export var Controls = `

@@ -109,10 +121,9 @@ export var Controls = ` display: inline-flex; } .video-container .zorn-title { - display: none; position: absolute; top: 0px; - background: #000; + background: rgb(0 0 0 / 50%); width: auto; margin: 12px; padding: 12px 24px; diff --git a/test/js/zorn.js b/test/js/zorn.js index fd3ec6c..b37bf31 100644 --- a/test/js/zorn.js +++ b/test/js/zorn.js @@ -1,4 +1,4 @@ -(()=>{var y='';var b='';var x='';var w='';var C='';var z='';var V='';var L='';var M='';var T='';var e=document.querySelector(".zorn-player"),d=document.querySelector(".video-container"),he=document.querySelector(".zorn-player-controls"),h=y,S=b,E=x,A=w,F=C,B=z,v=V,I=L,H=M,P=T;var j=` +(()=>{var y='';var b='';var x='';var w='';var C='';var z='';var V='';var L='';var M='';var T='';var e=document.querySelector(".zorn-player"),d=document.querySelector(".video-container"),ge=document.querySelector(".zorn-player-controls"),h=y,S=b,E=x,A=w,F=C,B=z,g=V,H=L,I=M,P=T;function j(){let t=e.getAttribute("video-title");document.querySelector(".zorn-title").innerHTML=t,e.hasAttribute("video-title")?document.querySelector(".zorn-title").style.display="inherit":document.querySelector(".zorn-title").style.display="none"}var q=`

@@ -11,7 +11,7 @@
- +
@@ -99,10 +99,9 @@ display: inline-flex; } .video-container .zorn-title { - display: none; position: absolute; top: 0px; - background: #000; + background: rgb(0 0 0 / 50%); width: auto; margin: 12px; padding: 12px 24px; @@ -353,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 q(){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 Z(){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 U(){var t=document.querySelector(".zorn-player-controls #subtitles"),r=[],o=function(p,m,f){var k=document.createElement("li"),u=k.appendChild(document.createElement("button"));return u.setAttribute("id",p),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(g,N,ie){r[N].setAttribute("data-state","inactive")});for(var s=this.getAttribute("lang"),c=0;c0&&e.volume<=.5?t.innerHTML=`${I}`:t.innerHTML=`${v}`}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 K(){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",p);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 p(){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 c=o(s);f.textContent=`${c.minutes}:${c.seconds}`;let g=e.getBoundingClientRect();f.style.left=`${i.pageX-g.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),p()}var R=` +`;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=`
${P}
-`;function D(){function t(){var a=document.querySelector(".video-container > h2");e.paused||(document.querySelector(".zorn-player-controls").classList.add("hide"),a.classList.add("hide"))}function r(){var a=document.querySelector(".video-container > h2");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 O(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 p(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",p)}e.insertAdjacentHTML("afterend",j);e.insertAdjacentHTML("afterend",R);$();O();_();D();q();Z();U();G();K();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",q);e.insertAdjacentHTML("afterend",D);e.getAttribute("layout")==="default"&&j();$();N();_();O();Z();U();G();K();R();Buffering();})();