diff --git a/static/js/player.js b/static/js/player.js new file mode 100644 index 0000000..1b6f212 --- /dev/null +++ b/static/js/player.js @@ -0,0 +1,50 @@ +/* minimal terminal-style video player — custom controls in our own font. + re-inits after pjax navigation. */ +(function () { + "use strict"; + function fmt(t) { + t = Math.max(0, t | 0); + var m = (t / 60) | 0, s = t % 60; + return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s; + } + function init(root) { + var v = root.querySelector("video"); + var play = root.querySelector(".player__play"); + var big = root.querySelector(".player__big"); + var scrub = root.querySelector(".player__scrub"); + var fill = root.querySelector(".player__fill"); + var time = root.querySelector(".player__time"); + var mute = root.querySelector(".player__mute"); + var full = root.querySelector(".player__full"); + if (!v) return; + + function toggle() { if (v.paused) v.play(); else v.pause(); } + if (play) play.addEventListener("click", toggle); + if (big) big.addEventListener("click", toggle); + v.addEventListener("click", toggle); + + v.addEventListener("play", function () { root.classList.add("is-playing"); if (play) play.textContent = "❚❚"; }); + v.addEventListener("pause", function () { root.classList.remove("is-playing"); if (play) play.textContent = "▶"; }); + v.addEventListener("loadedmetadata", function () { if (time) time.textContent = "00:00 / " + fmt(v.duration); }); + v.addEventListener("timeupdate", function () { + var p = v.duration ? v.currentTime / v.duration : 0; + if (fill) fill.style.width = (p * 100) + "%"; + if (time) time.textContent = fmt(v.currentTime) + " / " + fmt(v.duration || 0); + }); + if (scrub) scrub.addEventListener("click", function (e) { + var r = scrub.getBoundingClientRect(); + if (v.duration) v.currentTime = ((e.clientX - r.left) / r.width) * v.duration; + }); + if (mute) mute.addEventListener("click", function () { v.muted = !v.muted; mute.textContent = v.muted ? "muted" : "vol"; }); + if (full) full.addEventListener("click", function () { + if (document.fullscreenElement) document.exitFullscreen(); + else if (root.requestFullscreen) root.requestFullscreen(); + }); + } + function initAll() { + var ps = document.querySelectorAll(".player"); + for (var i = 0; i < ps.length; i++) if (!ps[i].__init) { ps[i].__init = 1; init(ps[i]); } + } + initAll(); + document.addEventListener("pjax:load", initAll); +})();