custom terminal video player

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);
+})();