@plotdb/lotion 0.1.0

package/index.css

@@ -0,0 +1,191 @@
+.lotion {
+  --lotion-bg: #eceae5;
+  --lotion-paper: #fbfaf7;
+  --lotion-ink: #18181a;
+  --lotion-mute: #8a877f;
+  --lotion-line: #d9d6cf;
+  position: relative;
+  border: 1px solid var(--lotion-line);
+  border-radius: 12px;
+  overflow: hidden;
+  outline: none;
+}
+.lotion .lotion-viewport {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: var(--lotion-bg);
+}
+.lotion .lotion-stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  background: var(--lotion-bg);
+  overflow: hidden;
+  line-height: normal;
+}
+.lotion .lotion-bar {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  height: 64px;
+  padding: 0 24px;
+  background: var(--lotion-paper);
+  border-top: 1px solid var(--lotion-line);
+  user-select: none;
+}
+.lotion .lotion-btn {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--lotion-ink);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.lotion .lotion-play:before {
+  content: "";
+  margin-left: 3px;
+  border-style: solid;
+  border-width: 7px 0 7px 12px;
+  border-color: transparent transparent transparent #fff;
+}
+.lotion.lotion-playing .lotion-play:before {
+  margin-left: 0;
+  width: 4px;
+  height: 14px;
+  border-width: 0 4px;
+  border-color: #fff;
+}
+.lotion .lotion-fs {
+  background: transparent;
+  color: var(--lotion-ink);
+  border: 1px solid var(--lotion-line);
+}
+.lotion .lotion-time {
+  font: 15px/1 sans-serif;
+  color: var(--lotion-mute);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.lotion .lotion-track {
+  position: relative;
+  flex: 1;
+  height: 40px;
+  cursor: pointer;
+}
+.lotion .lotion-rail,
+.lotion .lotion-fill {
+  position: absolute;
+  left: 0;
+  top: 18px;
+  height: 4px;
+  border-radius: 2px;
+}
+.lotion .lotion-rail {
+  right: 0;
+  background: var(--lotion-line);
+}
+.lotion .lotion-fill {
+  background: var(--lotion-ink);
+}
+.lotion .lotion-knob {
+  position: absolute;
+  top: 13px;
+  width: 14px;
+  height: 14px;
+  margin-left: -7px;
+  border-radius: 50%;
+  background: var(--lotion-ink);
+}
+.lotion .lotion-chapters {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.lotion .lotion-ch {
+  position: absolute;
+  top: 14px;
+  width: 2px;
+  height: 12px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--lotion-mute);
+  opacity: 0.5;
+}
+.lotion.lotion-loading .lotion-stage {
+  visibility: hidden;
+}
+.lotion.lotion-loading .lotion-bar {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.lotion .lotion-loading-screen {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lotion-bg);
+  color: var(--lotion-mute);
+}
+.lotion .lotion-spinner {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 3px solid var(--lotion-line);
+  border-top-color: var(--lotion-ink);
+  animation: lotion-spin 0.8s linear infinite;
+}
+.lotion:fullscreen {
+  display: flex;
+  flex-direction: column;
+  border: 0;
+  border-radius: 0;
+}
+.lotion:fullscreen .lotion-viewport {
+  flex: 1;
+  aspect-ratio: auto !important;
+}
+.lotion:fullscreen .lotion-bar {
+  flex: none;
+}
+.lotion.lotion-render {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  border: 0;
+  border-radius: 0;
+}
+.lotion.lotion-render .lotion-viewport {
+  width: 100vw;
+  height: 100vh;
+  aspect-ratio: auto !important;
+}
+.lotion.lotion-render .lotion-bar {
+  display: none;
+}
+@-moz-keyframes lotion-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes lotion-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes lotion-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes lotion-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/index.js

@@ -0,0 +1,437 @@
+(function(){
+  var PI, sin, cos, exp, sqrt, round, clamp, lerp, ss, spring, presets, track, vis, bump, typing, hex, mixc, rgb, mk, put, txt, NS, svg, player, ref$, lotion;
+  PI = Math.PI, sin = Math.sin, cos = Math.cos, exp = Math.exp, sqrt = Math.sqrt, round = Math.round;
+  clamp = function(v, a, b){
+    a == null && (a = 0);
+    b == null && (b = 1);
+    if (v < a) {
+      return a;
+    } else if (v > b) {
+      return b;
+    } else {
+      return v;
+    }
+  };
+  lerp = function(a, b, f){
+    return a + (b - a) * f;
+  };
+  ss = function(x){
+    x = clamp(x);
+    return x * x * (3 - 2 * x);
+  };
+  spring = function(t, w, z){
+    var wd;
+    w == null && (w = 14);
+    z == null && (z = 0.8);
+    if (t <= 0) {
+      return 0;
+    }
+    if (z >= 1) {
+      return 1 - exp(-w * t) * (1 + w * t);
+    }
+    wd = w * sqrt(1 - z * z);
+    return 1 - exp(-z * w * t) * (cos(wd * t) + (z * w / wd) * sin(wd * t));
+  };
+  presets = {
+    fast: {
+      w: 22,
+      z: 0.86
+    },
+    std: {
+      w: 14,
+      z: 0.8
+    },
+    soft: {
+      w: 9,
+      z: 0.9
+    },
+    move: {
+      w: 11,
+      z: 0.85
+    },
+    ease: {
+      w: 10,
+      z: 1
+    }
+  };
+  track = function(keys, opt){
+    var p, def;
+    opt == null && (opt = 'std');
+    p = function(o){
+      if (typeof o === 'string') {
+        return presets[o];
+      } else {
+        return o;
+      }
+    };
+    def = p(opt);
+    return function(t){
+      var v, i$, to$, i, k, c;
+      v = keys[0][1];
+      for (i$ = 1, to$ = keys.length; i$ < to$; ++i$) {
+        i = i$;
+        k = keys[i];
+        c = k[2] ? p(k[2]) : def;
+        v += (k[1] - keys[i - 1][1]) * spring(t - k[0], c.w, c.z);
+      }
+      return v;
+    };
+  };
+  vis = function(t, t0, t1, din, dout){
+    t1 == null && (t1 = 1e9);
+    din == null && (din = 0.4);
+    dout == null && (dout = 0.35);
+    return ss((t - t0) / din) * (1 - ss((t - t1) / dout));
+  };
+  bump = function(t, t0, d){
+    d == null && (d = 0.6);
+    if (t < t0 || t > t0 + d) {
+      return 0;
+    } else {
+      return Math.pow(sin(PI * (t - t0) / d), 2);
+    }
+  };
+  typing = function(t, t0, text, dt){
+    var chars;
+    dt == null && (dt = 0.06);
+    chars = Array.from(text);
+    return chars.slice(0, clamp(Math.floor((t - t0) / dt) + 1, 0, chars.length)).join('');
+  };
+  hex = function(h){
+    return [1, 3, 5].map(function(i){
+      return parseInt(h.slice(i, i + 2), 16);
+    });
+  };
+  mixc = function(a, b, f){
+    return [0, 1, 2].map(function(i){
+      return lerp(a[i], b[i], f);
+    });
+  };
+  rgb = function(c, a){
+    if (a != null) {
+      return "rgba(" + c.map(function(it){
+        return round(it);
+      }).join(',') + "," + a + ")";
+    } else {
+      return "rgb(" + c.map(function(it){
+        return round(it);
+      }).join(',') + ")";
+    }
+  };
+  mk = function(cls, html, parent, prefix){
+    var e;
+    cls == null && (cls = '');
+    html == null && (html = '');
+    prefix == null && (prefix = '');
+    e = document.createElement('div');
+    e.className = cls.split(' ').filter(function(it){
+      return it;
+    }).map(function(it){
+      return prefix + it;
+    }).join(' ');
+    e.innerHTML = html;
+    if (parent) {
+      parent.appendChild(e);
+    }
+    return e;
+  };
+  put = function(e, x, y, s, o, opt){
+    var hide, ref$;
+    s == null && (s = 1);
+    o == null && (o = 1);
+    opt == null && (opt = {});
+    hide = (ref$ = opt.hide) != null ? ref$ : true;
+    if (hide && o <= 0.002) {
+      if (e._lv !== false) {
+        e.style.visibility = 'hidden';
+        e._lv = false;
+      }
+      return;
+    }
+    if (hide && e._lv !== true) {
+      e.style.visibility = 'visible';
+      e._lv = true;
+    }
+    e.style.transform = "translate(" + x.toFixed(2) + "px," + y.toFixed(2) + "px) scale(" + s.toFixed(4) + ")";
+    e.style.opacity = o.toFixed(3);
+    if (opt.blur != null) {
+      return e.style.filter = opt.blur > 0.05 ? "blur(" + opt.blur.toFixed(2) + "px)" : '';
+    }
+  };
+  txt = function(e, v){
+    if (e._lt !== v) {
+      e.innerHTML = v;
+      return e._lt = v;
+    }
+  };
+  NS = 'http://www.w3.org/2000/svg';
+  svg = function(tag, attrs, parent){
+    var e, k, v;
+    attrs == null && (attrs = {});
+    e = document.createElementNS(NS, tag);
+    for (k in attrs) {
+      v = attrs[k];
+      e.setAttribute(k, v);
+    }
+    if (parent) {
+      parent.appendChild(e);
+    }
+    return e;
+  };
+  player = function(opt){
+    var this$ = this;
+    opt == null && (opt = {});
+    this.opt = opt;
+    this.root = typeof opt.root === 'string'
+      ? document.querySelector(opt.root)
+      : opt.root;
+    this.width = opt.width || 1920;
+    this.height = opt.height || 1080;
+    this.duration = opt.duration || 0;
+    this.chapters = opt.chapters || [];
+    this.t = 0;
+    this.playing = false;
+    this.last = null;
+    this.started = false;
+    this.ready = new Promise(function(res){
+      return this$.readyRes = res;
+    });
+    this.renderMode = /[?&]render\b/.test(location.search);
+    this.init();
+    return this;
+  };
+  player.prototype = (ref$ = Object.create(Object.prototype), ref$.constructor = player, ref$.init = function(){
+    var r, ref$, html, q, this$ = this;
+    r = this.root;
+    r.classList.add('lotion');
+    if (!r.hasAttribute('tabindex')) {
+      r.setAttribute('tabindex', 0);
+    }
+    this.viewport = mk('lotion-viewport', '', r);
+    this.stage = mk('lotion-stage', '', this.viewport);
+    ref$ = this.stage.style;
+    ref$.width = this.width + "px";
+    ref$.height = this.height + "px";
+    this.viewport.style.aspectRatio = this.width + " / " + this.height;
+    r.classList.add('lotion-loading');
+    if (this.opt.loading !== false) {
+      html = typeof this.opt.loading === 'string' ? this.opt.loading : '<div class="lotion-spinner"></div>';
+      this.loading = mk('lotion-loading-screen', html, this.viewport);
+    }
+    this.bar = mk('lotion-bar', '<div class="lotion-btn lotion-play"></div>\n<div class="lotion-track"><div class="lotion-rail"></div><div class="lotion-fill"></div>\n<div class="lotion-chapters"></div><div class="lotion-knob"></div></div>\n<div class="lotion-time"></div>\n<div class="lotion-btn lotion-fs" title="全螢幕"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"\nstroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4"/></svg></div>', r);
+    q = function(n){
+      return this$.bar.querySelector(".lotion-" + n);
+    };
+    this.el = {
+      play: q('play'),
+      fill: q('fill'),
+      knob: q('knob'),
+      time: q('time'),
+      track: q('track'),
+      chapters: q('chapters'),
+      fs: q('fs')
+    };
+    this.chapters.map(function(arg$){
+      var t, name, e;
+      t = arg$[0], name = arg$[1];
+      e = mk('lotion-ch', '', this$.el.chapters);
+      e.title = name;
+      return e.style.left = 100 * t / this$.duration + "%";
+    });
+    this.bind();
+    if (this.renderMode) {
+      r.classList.add('lotion-render');
+    }
+    this.fit();
+    if (typeof ResizeObserver !== 'undefined') {
+      return new ResizeObserver(function(){
+        return this$.fit();
+      }).observe(this.viewport);
+    } else {
+      return window.addEventListener('resize', function(){
+        return this$.fit();
+      });
+    }
+  }, ref$.start = function(){
+    var m, this$ = this;
+    this.started = true;
+    this.root.classList.remove('lotion-loading');
+    if (this.loading) {
+      this.loading.remove();
+    }
+    if (this.renderMode) {
+      window.seek = function(t){
+        return this$.opt.seek(t);
+      };
+      window.DURATION = this.duration;
+      if (this.opt.cues) {
+        window.cues = this.opt.cues;
+      }
+    }
+    this.readyRes(this);
+    m = /[?&]t=([\d.]+)/.exec(location.search);
+    this.seek(m
+      ? +m[1]
+      : this.renderMode
+        ? 0
+        : this.opt.start || 0);
+    if (this.opt.autoplay && !this.renderMode) {
+      document.fonts.ready.then(function(){
+        return this$.play(true);
+      });
+    }
+    return this;
+  }, ref$.bind = function(){
+    var dragging, fromEvent, this$ = this;
+    this.el.play.addEventListener('click', function(e){
+      e.stopPropagation();
+      return this$.toggle();
+    });
+    this.el.fs.addEventListener('click', function(e){
+      e.stopPropagation();
+      return this$.fullscreen();
+    });
+    this.viewport.addEventListener('click', function(){
+      this$.root.focus();
+      return this$.toggle();
+    });
+    dragging = false;
+    fromEvent = function(e){
+      var b;
+      b = this$.el.track.getBoundingClientRect();
+      return this$.seek(this$.duration * clamp((e.clientX - b.left) / b.width));
+    };
+    this.el.track.addEventListener('pointerdown', function(e){
+      dragging = true;
+      this$.el.track.setPointerCapture(e.pointerId);
+      return fromEvent(e);
+    });
+    this.el.track.addEventListener('pointermove', function(e){
+      if (dragging) {
+        return fromEvent(e);
+      }
+    });
+    this.el.track.addEventListener('pointerup', function(){
+      return dragging = false;
+    });
+    return this.root.addEventListener('keydown', function(e){
+      var starts, ref$;
+      starts = this$.chapters.map(function(c){
+        return c[0];
+      });
+      if (e.code === 'Space') {
+        e.preventDefault();
+        return this$.toggle();
+      } else if (e.key === 'f') {
+        return this$.fullscreen();
+      } else if (e.key === 'ArrowRight') {
+        return this$.seek((ref$ = starts.find(function(s){
+          return s > this$.t + 0.05;
+        })) != null
+          ? ref$
+          : this$.duration);
+      } else if (e.key === 'ArrowLeft') {
+        return this$.seek((ref$ = starts.filter(function(s){
+          return s < this$.t - 0.5;
+        }).pop()) != null ? ref$ : 0);
+      }
+    });
+  }, ref$.fit = function(){
+    var w, h, s;
+    w = this.viewport.clientWidth;
+    h = this.viewport.clientHeight;
+    if (!w || !h) {
+      return;
+    }
+    s = Math.min(w / this.width, h / this.height);
+    return this.stage.style.transform = "translate(" + (w - this.width * s) / 2 + "px," + (h - this.height * s) / 2 + "px) scale(" + s + ")";
+  }, ref$.fmt = function(t){
+    return Math.floor(t / 60) + ":" + ("0" + Math.floor(t % 60)).slice(-2);
+  }, ref$.seek = function(t){
+    var p, ch;
+    if (!this.started) {
+      return;
+    }
+    this.t = t = clamp(t, 0, this.duration);
+    this.opt.seek(t);
+    p = 100 * t / this.duration + "%";
+    this.el.fill.style.width = p;
+    this.el.knob.style.left = p;
+    ch = this.chapters.filter(function(c){
+      return c[0] <= t;
+    }).pop();
+    this.el.time.textContent = (ch ? ch[1] + " · " : '') + (this.fmt(t) + " / " + this.fmt(this.duration));
+    return this.root.classList.toggle('lotion-playing', this.playing);
+  }, ref$.tick = function(now){
+    var this$ = this;
+    if (!this.playing) {
+      return;
+    }
+    if (this.last != null) {
+      this.seek(this.t + (now - this.last) / 1000);
+    }
+    this.last = now;
+    if (this.t >= this.duration) {
+      this.playing = false;
+      this.seek(this.t);
+      return;
+    }
+    return requestAnimationFrame(function(n){
+      return this$.tick(n);
+    });
+  }, ref$.play = function(go){
+    var this$ = this;
+    go == null && (go = true);
+    if (!this.started) {
+      return;
+    }
+    if (go && this.t >= this.duration) {
+      this.t = 0;
+    }
+    this.playing = go;
+    this.last = null;
+    this.seek(this.t);
+    if (go) {
+      return requestAnimationFrame(function(n){
+        return this$.tick(n);
+      });
+    }
+  }, ref$.pause = function(){
+    return this.play(false);
+  }, ref$.toggle = function(){
+    return this.play(!this.playing);
+  }, ref$.fullscreen = function(){
+    var d;
+    d = document;
+    if (d.fullscreenElement || d.webkitFullscreenElement) {
+      (d.exitFullscreen || d.webkitExitFullscreen).call(d);
+    } else {
+      (this.root.requestFullscreen || this.root.webkitRequestFullscreen).call(this.root);
+    }
+    return this.root.focus();
+  }, ref$);
+  lotion = {
+    clamp: clamp,
+    lerp: lerp,
+    ss: ss,
+    spring: spring,
+    presets: presets,
+    track: track,
+    vis: vis,
+    bump: bump,
+    typing: typing,
+    hex: hex,
+    mixc: mixc,
+    rgb: rgb,
+    mk: mk,
+    put: put,
+    txt: txt,
+    svg: svg,
+    player: player
+  };
+  if (typeof module != 'undefined' && module !== null) {
+    module.exports = lotion;
+  } else if (typeof window != 'undefined' && window !== null) {
+    window.lotion = lotion;
+  }
+}).call(this);

package/index.min.css

@@ -0,0 +1 @@
+.lotion{--lotion-bg:#eceae5;--lotion-paper:#fbfaf7;--lotion-ink:#18181a;--lotion-mute:#8a877f;--lotion-line:#d9d6cf;position:relative;border:1px solid var(--lotion-line);border-radius:12px;overflow:hidden;outline:none}.lotion .lotion-viewport{position:relative;width:100%;overflow:hidden;background:var(--lotion-bg)}.lotion .lotion-stage{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--lotion-bg);overflow:hidden;line-height:normal}.lotion .lotion-bar{display:flex;align-items:center;gap:18px;height:64px;padding:0 24px;background:var(--lotion-paper);border-top:1px solid var(--lotion-line);user-select:none}.lotion .lotion-btn{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lotion-ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.lotion .lotion-play:before{content:"";margin-left:3px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}.lotion.lotion-playing .lotion-play:before{margin-left:0;width:4px;height:14px;border-width:0 4px;border-color:#fff}.lotion .lotion-fs{background:transparent;color:var(--lotion-ink);border:1px solid var(--lotion-line)}.lotion .lotion-time{font:15px/1 sans-serif;color:var(--lotion-mute);font-variant-numeric:tabular-nums;white-space:nowrap}.lotion .lotion-track{position:relative;flex:1;height:40px;cursor:pointer}.lotion .lotion-rail,.lotion .lotion-fill{position:absolute;left:0;top:18px;height:4px;border-radius:2px}.lotion .lotion-rail{right:0;background:var(--lotion-line)}.lotion .lotion-fill{background:var(--lotion-ink)}.lotion .lotion-knob{position:absolute;top:13px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--lotion-ink)}.lotion .lotion-chapters{position:absolute;inset:0;pointer-events:none}.lotion .lotion-ch{position:absolute;top:14px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--lotion-mute);opacity:.5}.lotion.lotion-loading .lotion-stage{visibility:hidden}.lotion.lotion-loading .lotion-bar{opacity:.5;pointer-events:none}.lotion .lotion-loading-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--lotion-bg);color:var(--lotion-mute)}.lotion .lotion-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--lotion-line);border-top-color:var(--lotion-ink);animation:lotion-spin .8s linear infinite}.lotion:fullscreen{display:flex;flex-direction:column;border:0;border-radius:0}.lotion:fullscreen .lotion-viewport{flex:1;aspect-ratio:auto !important}.lotion:fullscreen .lotion-bar{flex:none}.lotion.lotion-render{position:fixed;inset:0;z-index:99999;border:0;border-radius:0}.lotion.lotion-render .lotion-viewport{width:100vw;height:100vh;aspect-ratio:auto !important}.lotion.lotion-render .lotion-bar{display:none}@-moz-keyframes lotion-spin{to{transform:rotate(360deg)}}@-webkit-keyframes lotion-spin{to{transform:rotate(360deg)}}@-o-keyframes lotion-spin{to{transform:rotate(360deg)}}@keyframes lotion-spin{to{transform:rotate(360deg)}}

package/index.min.js

@@ -0,0 +1 @@
+!function(){var t,n=Math.PI,r=Math.sin,s=Math.cos,o=Math.exp,l=Math.sqrt,e=Math.round,u=function(t,i,e){return null==e&&(e=1),t<(i=null==i?0:i)?i:e<t?e:t},a=function(t,i,e){return t+(i-t)*e},h=function(t){return(t=u(t))*t*(3-2*t)},c=function(t,i,e){var n;return null==i&&(i=14),t<=0?0:1<=(e=null==e?.8:e)?1-o(-i*t)*(1+i*t):(n=i*l(1-e*e),1-o(-e*i*t)*(s(n*t)+e*i/n*r(n*t)))},i={fast:{w:22,z:.86},std:{w:14,z:.8},soft:{w:9,z:.9},move:{w:11,z:.85},ease:{w:10,z:1}},d=function(l,t){var u,a=(u=function(t){return"string"==typeof t?i[t]:t})(t=null==t?"std":t);return function(t){for(var i,e,n,r=l[0][1],s=1,o=l.length;s<o;++s)n=(e=l[i=s])[2]?u(e[2]):a,r+=(e[1]-l[i-1][1])*c(t-e[0],n.w,n.z);return r}},f=function(t,i,e,n,r){return h((t-i)/(n=null==n?.4:n))*(1-h((t-(e=null==e?1e9:e))/(r=null==r?.35:r)))},p=function(t,i,e){return null==e&&(e=.6),t<i||i+e<t?0:Math.pow(r(n*(t-i)/e),2)},v=function(t,i,e,n){return null==n&&(n=.06),(e=Array.from(e)).slice(0,u(Math.floor((t-i)/n)+1,0,e.length)).join("")},g=function(i){return[1,3,5].map(function(t){return parseInt(i.slice(t,t+2),16)})},w=function(i,e,n){return[0,1,2].map(function(t){return a(i[t],e[t],n)})},y=function(t,i){return null!=i?"rgba("+t.map(function(t){return e(t)}).join(",")+","+i+")":"rgb("+t.map(function(t){return e(t)}).join(",")+")"},m=function(t,i,e,n){var r;return null==t&&(t=""),null==i&&(i=""),null==n&&(n=""),(r=document.createElement("div")).className=t.split(" ").filter(function(t){return t}).map(function(t){return n+t}).join(" "),r.innerHTML=i,e&&e.appendChild(r),r},k=function(t,i,e,n,r,s){var o;if(null==n&&(n=1),null==r&&(r=1),!((o=null==(o=(s=null==s?{}:s).hide)||o)&&r<=.002))return o&&!0!==t._lv&&(t.style.visibility="visible",t._lv=!0),t.style.transform="translate("+i.toFixed(2)+"px,"+e.toFixed(2)+"px) scale("+n.toFixed(4)+")",t.style.opacity=r.toFixed(3),null!=s.blur?t.style.filter=.05<s.blur?"blur("+s.blur.toFixed(2)+"px)":"":void 0;!1!==t._lv&&(t.style.visibility="hidden",t._lv=!1)},b=function(t,i){if(t._lt!==i)return t.innerHTML=i,t._lt=i},x=function(t,i,e){var n,r,s;for(r in null==i&&(i={}),n=document.createElementNS("http://www.w3.org/2000/svg",t),i)s=i[r],n.setAttribute(r,s);return e&&e.appendChild(n),n},M=function(t){var i=this;return this.opt=t=null==t?{}:t,this.root="string"==typeof t.root?document.querySelector(t.root):t.root,this.width=t.width||1920,this.height=t.height||1080,this.duration=t.duration||0,this.chapters=t.chapters||[],this.t=0,this.playing=!1,this.last=null,this.started=!1,this.ready=new Promise(function(t){return i.readyRes=t}),this.renderMode=/[?&]render\b/.test(location.search),this.init(),this};M.prototype=((t=Object.create(Object.prototype)).constructor=M,t.init=function(){var t,n=this,i=this.root;return i.classList.add("lotion"),i.hasAttribute("tabindex")||i.setAttribute("tabindex",0),this.viewport=m("lotion-viewport","",i),this.stage=m("lotion-stage","",this.viewport),(t=this.stage.style).width=this.width+"px",t.height=this.height+"px",this.viewport.style.aspectRatio=this.width+" / "+this.height,i.classList.add("lotion-loading"),!1!==this.opt.loading&&(t="string"==typeof this.opt.loading?this.opt.loading:'<div class="lotion-spinner"></div>',this.loading=m("lotion-loading-screen",t,this.viewport)),this.bar=m("lotion-bar",'<div class="lotion-btn lotion-play"></div>\n<div class="lotion-track"><div class="lotion-rail"></div><div class="lotion-fill"></div>\n<div class="lotion-chapters"></div><div class="lotion-knob"></div></div>\n<div class="lotion-time"></div>\n<div class="lotion-btn lotion-fs" title="全螢幕"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"\nstroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4"/></svg></div>',i),this.el={play:(t=function(t){return n.bar.querySelector(".lotion-"+t)})("play"),fill:t("fill"),knob:t("knob"),time:t("time"),track:t("track"),chapters:t("chapters"),fs:t("fs")},this.chapters.map(function(t){var i=t[0],t=t[1],e=m("lotion-ch","",n.el.chapters);return e.title=t,e.style.left=100*i/n.duration+"%"}),this.bind(),this.renderMode&&i.classList.add("lotion-render"),this.fit(),"undefined"!=typeof ResizeObserver?new ResizeObserver(function(){return n.fit()}).observe(this.viewport):window.addEventListener("resize",function(){return n.fit()})},t.start=function(){var t,i=this;return this.started=!0,this.root.classList.remove("lotion-loading"),this.loading&&this.loading.remove(),this.renderMode&&(window.seek=function(t){return i.opt.seek(t)},window.DURATION=this.duration,this.opt.cues)&&(window.cues=this.opt.cues),this.readyRes(this),t=/[?&]t=([\d.]+)/.exec(location.search),this.seek(t?+t[1]:!this.renderMode&&this.opt.start||0),this.opt.autoplay&&!this.renderMode&&document.fonts.ready.then(function(){return i.play(!0)}),this},t.bind=function(){var i,e,n=this;return this.el.play.addEventListener("click",function(t){return t.stopPropagation(),n.toggle()}),this.el.fs.addEventListener("click",function(t){return t.stopPropagation(),n.fullscreen()}),this.viewport.addEventListener("click",function(){return n.root.focus(),n.toggle()}),i=!1,e=function(t){var i=n.el.track.getBoundingClientRect();return n.seek(n.duration*u((t.clientX-i.left)/i.width))},this.el.track.addEventListener("pointerdown",function(t){return i=!0,n.el.track.setPointerCapture(t.pointerId),e(t)}),this.el.track.addEventListener("pointermove",function(t){if(i)return e(t)}),this.el.track.addEventListener("pointerup",function(){return i=!1}),this.root.addEventListener("keydown",function(t){var i,e=n.chapters.map(function(t){return t[0]});return"Space"===t.code?(t.preventDefault(),n.toggle()):"f"===t.key?n.fullscreen():"ArrowRight"===t.key?n.seek(null!=(i=e.find(function(t){return t>n.t+.05}))?i:n.duration):"ArrowLeft"===t.key?n.seek(null!=(i=e.filter(function(t){return t<n.t-.5}).pop())?i:0):void 0})},t.fit=function(){var t,i=this.viewport.clientWidth,e=this.viewport.clientHeight;if(i&&e)return t=Math.min(i/this.width,e/this.height),this.stage.style.transform="translate("+(i-this.width*t)/2+"px,"+(e-this.height*t)/2+"px) scale("+t+")"},t.fmt=function(t){return Math.floor(t/60)+":"+("0"+Math.floor(t%60)).slice(-2)},t.seek=function(i){var t;if(this.started)return this.t=i=u(i,0,this.duration),this.opt.seek(i),t=100*i/this.duration+"%",this.el.fill.style.width=t,this.el.knob.style.left=t,t=this.chapters.filter(function(t){return t[0]<=i}).pop(),this.el.time.textContent=(t?t[1]+" · ":"")+this.fmt(i)+" / "+this.fmt(this.duration),this.root.classList.toggle("lotion-playing",this.playing)},t.tick=function(t){var i=this;if(this.playing){if(null!=this.last&&this.seek(this.t+(t-this.last)/1e3),this.last=t,!(this.t>=this.duration))return requestAnimationFrame(function(t){return i.tick(t)});this.playing=!1,this.seek(this.t)}},t.play=function(t){var i=this;if(null==t&&(t=!0),this.started)return t&&this.t>=this.duration&&(this.t=0),this.playing=t,this.last=null,this.seek(this.t),t?requestAnimationFrame(function(t){return i.tick(t)}):void 0},t.pause=function(){return this.play(!1)},t.toggle=function(){return this.play(!this.playing)},t.fullscreen=function(){var t=document;return t.fullscreenElement||t.webkitFullscreenElement?(t.exitFullscreen||t.webkitExitFullscreen).call(t):(this.root.requestFullscreen||this.root.webkitRequestFullscreen).call(this.root),this.root.focus()},t),t={clamp:u,lerp:a,ss:h,spring:c,presets:i,track:d,vis:f,bump:p,typing:v,hex:g,mixc:w,rgb:y,mk:m,put:k,txt:b,svg:x,player:M},"undefined"!=typeof module&&null!==module?module.exports=t:"undefined"!=typeof window&&null!==window&&(window.lotion=t)}.call(this);

package/package.json

@@ -0,0 +1 @@
+{"author":"zbryikt","name":"@plotdb/lotion","version":"0.1.0","description":"deterministic motion toolkit: animation as a pure function of time, with player, frame renderer, block packaging and audio tools","license":"MIT","main":"index.min.js","browser":"index.min.js","bin":{"lotion":"./cli.js"},"homepage":"https://github.com/plotdb/lotion","repository":{"type":"git","url":"git+https://github.com/plotdb/lotion.git"},"scripts":{"start":"npx server -r web -o true"},"engines":{"node":">=14"},"keywords":["motion","animation","video","playwright","block"],"dependencies":{"@plotdb/block":"^5.7.3","@plotdb/csscope":"^5.0.4","@plotdb/rescope":"^5.1.0","@plotdb/semver":"^0.0.4","proxise":"^1.0.1"},"peerDependencies":{"playwright":">=1.40"},"peerDependenciesMeta":{"playwright":{"optional":true}},"devDependencies":{"@plotdb/guides":"github:plotdb/guides","@zbryikt/template":"^2.5.0","fedep":"^1.9.0","livescript":"^1.6.0","playwright":"^1.63.0","stylus":"^0.64.0","uglify-js":"^3.19.3"},"frontendDependencies":{"root":"web/static/assets/lib","modules":[]}}