@plotdb/lotion 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+## v0.5.0
+
+ - player: captions. `captions: [[t0, t1, text, meta?], ...]` or `{lang: [...]}`, drawn outside the stage in a
+   bottom safe area, styled by css variables; readers turn them on / off with the `CC` button, the `c` key or
+   `showCaptions(on)`; `captionsBurned: true` starts them off for scenes that already show the narration.
+   Not drawn in `?render` unless `burnCaptions` ( or `?render&captions` ).
+ - player: events `on` / `off` ( `time`, `chapter`, `caption`, `captions` ) and state `chapter`, `caption`,
+   `captionsOn`, `captionLang`
+ - chapters may carry a third element, `meta` ( such as `{description, thumb}` ), passed through in `player.chapter`
+ - `lotion.vtt.parse` / `stringify`: WebVTT to and from the caption format
+ - cli: `lotion video` writes captions as `.vtt` next to the mp4 ( shifted by `--from` ); `lotion captions` exports
+   them alone. render protocol: `window.CAPTIONS`
+
+
+## v0.4.2
+
+ - animate, size: `clip-path: inset()` ( reveals ) becomes one svg clipPath whose rect moves by smil, instead of one
+   appearance per inset ( lotitor's sumi-ink trial: html variants 68 to 35 )
+
+
+## v0.4.1
+
+ - bug fix:
+   - vector / animate: box-shadow and text-shadow are reordered to "offsets blur spread color", since computed style
+     puts the color first and satori then drew a broken path, so shadows were missing
+
+
+## v0.4.0
+
+ - features:
+   - `lotion.animate(opt)` / `player.animate(opt)` ( experimental, in `vector.js` ): convert a whole animation into one
+     animated svg. each element becomes a `<g>` nested as in the dom; its motion ( position and transform as a matrix,
+     opacity, blur ) is sampled per frame and written as css keyframes, simplified to the points linear interpolation
+     needs; each distinct appearance is drawn once by satori and switched by visibility. inline svg is walked
+     natively: groups animate, leaves keep their markup with numeric attributes as smil `<animate>`, definitions are
+     written once, and text uses fonts embedded once. `mix-blend-mode` now works at any depth.
+   - demo: the `/vector/` page converts the whole animation and plays the animated svg
+   - animate, size: numeric tracks are written once per element instead of once per appearance ( positions of svg
+     leaves join the group matrix, inheritable values such as `stroke-dashoffset` animate on the group );
+     css gradient masks moved by `mask-position` / `mask-size` ( wipes ) become one svg mask with a moving rect, so
+     the content is drawn once; paths drawn progressively ( each `d` a prefix of a longer one ) become the full path
+     revealed by a dash animation. the code-only sumi-ink trial drops from 3.2 MB to 1.5 MB.
+ - tweaks:
+   - vector: inline svg keeps a content-based placeholder `src` until fonts are ready
+
+
 ## v0.3.0
 
  - features:

package/README.md

@@ -48,7 +48,14 @@ player options:
  - `width`, `height`: design size of the stage. default `1920` x `1080`. The stage scales to fit the container.
  - `duration`: total length in seconds.
  - `seek(t)`: render the frame at time `t`. must depend on `t` only.
- - `chapters`: optional `[[t, name], ...]`, shown as ticks on the timeline and used by `←` / `→`.
+ - `chapters`: optional `[[t, name, meta?], ...]`, shown as ticks on the timeline and used by `←` / `→`. `meta` is
+   an optional object ( such as `{description, thumb}` ) the player passes through in `player.chapter`.
+ - `captions`: optional `[[t0, t1, text, meta?], ...]` ( `meta` such as `{speaker}` ), or `{zh: [...], en: [...]}`
+   for several languages. See Captions.
+ - `captionsBurned`: `true` when the scene already shows the narration as text: captions start off. default
+   `false` ( captions start on ). Readers can always turn them on or off.
+ - `captionLang`: initial caption language. default the first one.
+ - `burnCaptions`: draw captions in `?render` mode ( frame export ). default `false`; `?render&captions` also works.
  - `start`: initial time. `?t=<sec>` in the url takes precedence.
  - `autoplay`: default `false`.
  - `cues`: optional function returning sound cues `[{t, ...}]`, exported by `lotion cues`.
@@ -56,16 +63,45 @@ player options:
    `false` shows nothing.
 
 player methods: `start()`, `seek(t)`, `play(go = true)`, `pause()`, `toggle()`, `fullscreen()`, `encode(opt)`
-( see Online Export ).
+( see Online Export ), `showCaptions(on = true)`, `setCaptionLang(lang)`, `on(name, cb)`, `off(name, cb)`.
 `player.ready` is a promise resolved by `start()`.
 
+player state: `t`, `playing`, `chapter` ( `{index, t, name, meta}` or `null` ), `caption`
+( `{t0, t1, text, meta, lang}` or `null` ), `captionsOn`, `captionLang`, `captionLangs`.
+
+events ( `player.on(name, cb)` ):
+
+ - `time`: every seek, with `t`.
+ - `chapter`: the current chapter changed, with `player.chapter`.
+ - `caption`: the shown caption changed ( including to `null` ), with `player.caption`. Fired whether captions
+   are on or off, so a page can read them anyway ( search, transcripts ).
+ - `captions`: captions turned on / off or switched language, with `{on, lang}`.
+
 Until `start()` is called, the stage is hidden behind the loading screen, the control bar is disabled, and
 `seek` / `play` do nothing. Scenes often need asynchronous preparation before the first frame is right
 ( web fonts, measuring the layout to place things ), and a half-built stage should not be seen or scrubbed.
 So build the scene, finish whatever it waits for, then call `start()`:
 
     Promise.all([document.fonts.ready, prepare!]).then -> p.start!
-Keys ( when the player is focused ): `space` play / pause, `←` / `→` previous / next chapter, `f` fullscreen.
+Keys ( when the player is focused ): `space` play / pause, `←` / `→` previous / next chapter, `f` fullscreen,
+`c` captions on / off.
+
+### Captions
+
+Captions are drawn by the player, outside the stage: they keep their size when the stage scales, sit in a safe
+area at the bottom, and are not part of `encode()` frames. Style them with css variables on `.lotion`:
+`--lotion-caption-size`, `--lotion-caption-bg`, `--lotion-caption-color`, `--lotion-caption-font`.
+The control bar shows a `CC` button when there are captions.
+
+`lotion.vtt.parse(text)` reads WebVTT into the caption format ( a `<v name>` voice becomes `{speaker}` ),
+`lotion.vtt.stringify(captions)` writes it back. `lotion video` writes a `.vtt` next to the mp4, and
+`lotion captions` exports it alone.
+
+Guidelines for splitting ( common subtitle practice ): Traditional Chinese up to about 16 characters a line, at most
+2 lines, no faster than about 9 characters a second; English up to about 42 characters a line, 17 - 20 a second.
+Keep each caption on screen 0.83 - 7 s, with at least 2 frames between captions. Break at punctuation or pauses,
+not inside a phrase; merge captions that are too short. With word timings from a speech generator, cut at sentence
+ends and at pauses longer than about 0.3 s, then split or merge by those limits.
 
 helpers:
 
@@ -147,6 +183,33 @@ dependency after lotion ( `{name: 'lotion', path: 'vector.min.js'}` ); rescope g
    web font ( system fonts are not available ), mask or clip-path under a transform other than a translation
    ( satori does not move masks with transforms ).
 
+### Animated svg
+
+`lotion.animate({el, seek, duration, fps})` ( or `player.animate({fps})` ) converts the whole animation into one svg
+that plays by itself, resolving to `{svg, warnings, stats}`:
+
+ - every element becomes a `<g>`, nested as in the dom. Its motion, the position and transform combined into a
+   matrix, opacity and a `blur()` filter, is sampled at `fps` and written as css keyframes, keeping only the samples
+   linear interpolation needs.
+ - everything else is its appearance. Each distinct appearance is drawn once ( by satori ) and shown by visibility
+   keyframes, so an element that only moves costs one drawing, while one whose content changes ( typing, a growing
+   width ) costs one per state. Elements with a css mask, clip-path or other filters, `<img>` and `<canvas>`, are
+   drawn with their children as one appearance.
+ - inline svg is kept as svg: groups animate like elements, leaves keep their markup with numeric attributes
+   ( coordinates, `stroke-dashoffset`, opacities ... ) written as smil `<animate>`, definitions are written once,
+   and text uses fonts embedded once. nested `<svg>` becomes a group, since smil inside a nested svg does not follow
+   the outer svg when paused or seeked.
+ - tracks are written once per element: positions of svg leaves join the group matrix, and inheritable values
+   ( `stroke-dashoffset`, `stroke-width`, fill / stroke opacity ) animate on the group.
+ - a css mask of one `linear-gradient` ( horizontal or vertical, `no-repeat` ) becomes an svg mask whose rect follows
+   `mask-position` / `mask-size`, so a wipe draws its content once. Other masks and clip-paths are drawn per state.
+ - a path whose `d` grows ( each one a prefix of a longer one, stroked without fill, dashes or markers ) becomes the
+   longest path revealed by a dash animation.
+ - options: `fps` ( default 30 ), `from`, `to`, `loop` ( default true ), `progress`, `signal`.
+
+The demo converts in under a second into 230 KB ( 35 KB with brotli ); the code-only sumi-ink trial ( 44 s at 10 fps )
+in about 2 seconds into 1.5 MB ( 230 KB with brotli ). Serve it compressed, or save it as `.svgz`. Frames of the animated svg match screenshots as closely as single frames do.
+
 On the demo and the sumi-ink trial of lotitor, frames rasterized from the svg match screenshots at 29 - 39 dB PSNR;
 the remaining difference is mostly text antialiasing and baselines in fixed line-heights. A frame takes 50 - 300 ms.
 
@@ -158,6 +221,8 @@ With `?render` in the url, a page should cover the viewport with its stage and e
  - `window.seek(t)`: render the frame at `t`.
  - `window.DURATION`: total length in seconds.
  - `window.cues()`: optional, list of sound cues.
+ - `window.CAPTIONS`: optional, captions as `{lang: [[t0, t1, text, meta?], ...]}` ( `lotion video` writes them as
+   `.vtt` ).
 
 `lotion.player` does this automatically, and only when `start()` is called: the cli waits for `window.seek` to
 exist before rendering, so it never captures a scene that is still being prepared. Any other page can follow
@@ -193,8 +258,9 @@ targets under the root ( or use `:scope` ). A block sample is in `web/src/pug/bl
 
     lotion frames <src> <outdir> <t...>      one png per time
     lotion sheet  <src> <out.png> <t...>     the same, tiled into one contact sheet
-    lotion video  <src> <out.mp4>            render to mp4
+    lotion video  <src> <out.mp4>            render to mp4, plus <out>.vtt when the page has captions
     lotion cues   <src> <out.json>           dump window.cues()
+    lotion captions <src> <out.vtt>          export captions as WebVTT ( out.<lang>.vtt for several languages )
     lotion bundle <base-url> <block> <out>   pack a block and its dependencies into one file
     lotion bgm | sfx | mix | beats           removed, see Audio
 

package/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-var fs, path, http, child_process, usage, parse, types, serve, playwright, open, shot, frames, sheet, WARM, encode, video, cues, bundle, moved, argv, ref$, pos, opt, cmd, src, out, rest, times, p, slice$ = [].slice;
+var fs, path, http, child_process, usage, parse, types, serve, playwright, open, shot, frames, sheet, WARM, encode, video, writeVtt, cues, bundle, moved, argv, ref$, pos, opt, cmd, src, out, rest, times, p, slice$ = [].slice;
 fs = require('fs');
 path = require('path');
 http = require('http');
 child_process = require('child_process');
-usage = 'usage:\n  lotion <frames|sheet|video|cues> <src> <out> [t...] [options]\n  lotion bundle <base-url> <block-name> <out> [options]\n  audio generators ( bgm | sfx | mix | beats ) were removed, see README > Audio\nsee README for options.';
+usage = 'usage:\n  lotion <frames|sheet|video|cues|captions> <src> <out> [t...] [options]\n  lotion bundle <base-url> <block-name> <out> [options]\n  audio generators ( bgm | sfx | mix | beats ) were removed, see README > Audio\nsee README for options.';
 parse = function(argv){
   var ref$, pos, opt, i, a;
   ref$ = [[], {}], pos = ref$[0], opt = ref$[1];
@@ -269,7 +269,7 @@ video = function(src, out, opt){
   workers = Math.max(1, Math.floor(+(opt.workers || 1)));
   t0 = Date.now();
   return open(src, opt).then(function(first){
-    var n, done, tick, finish, k, tmp, parts;
+    var n, done, tick, finish, vtt, k, tmp, parts;
     o.from = +(opt.from || 0);
     n = Math.round((+(opt.to || first.duration) - o.from) * o.fps);
     done = 0;
@@ -282,8 +282,11 @@ video = function(src, out, opt){
     finish = function(){
       return console.log(out + " ( " + n + " frames, " + ((Date.now() - t0) / 1000).toFixed(0) + "s )");
     };
+    vtt = writeVtt(first.page, out, o.from, +(opt.to || first.duration));
     if (workers === 1) {
-      return encode(first.page, 0, n, out, o, tick).then(function(){
+      return vtt.then(function(){
+        return encode(first.page, 0, n, out, o, tick);
+      }).then(function(){
         return first.close();
       }).then(finish);
     }
@@ -302,15 +305,17 @@ video = function(src, out, opt){
         out: path.join(tmp, "part-" + w + ".mp4")
       };
     });
-    return Promise.all([Promise.resolve(first)].concat((function(){
-      var i$, to$, results$ = [];
-      for (i$ = 1, to$ = k; i$ < to$; ++i$) {
-        results$.push(i$);
-      }
-      return results$;
-    }()).map(function(){
-      return open(src, opt);
-    }))).then(function(pages){
+    return vtt.then(function(){
+      return Promise.all([Promise.resolve(first)].concat((function(){
+        var i$, to$, results$ = [];
+        for (i$ = 1, to$ = k; i$ < to$; ++i$) {
+          results$.push(i$);
+        }
+        return results$;
+      }()).map(function(){
+        return open(src, opt);
+      })));
+    }).then(function(pages){
       return Promise.all(parts.map(function(p, w){
         return encode(pages[w].page, p.i0, p.i1, p.out, o, tick);
       }))['finally'](function(){
@@ -345,6 +350,36 @@ video = function(src, out, opt){
     }).then(finish);
   });
 };
+writeVtt = function(page, out, t0, t1){
+  var vtt;
+  vtt = require('./index').vtt;
+  return page.evaluate(function(){
+    return window.CAPTIONS || null;
+  }).then(function(tracks){
+    var langs, base, i$, len$, lang, list, f, results$ = [];
+    if (!tracks) {
+      return;
+    }
+    langs = Object.keys(tracks);
+    base = out.replace(/\.(vtt|mp4|webm|mov)$/i, '');
+    for (i$ = 0, len$ = langs.length; i$ < len$; ++i$) {
+      lang = langs[i$];
+      list = tracks[lang].filter(fn$).map(fn1$);
+      f = langs.length > 1 && lang
+        ? base + "." + lang + ".vtt"
+        : base + ".vtt";
+      fs.writeFileSync(f, vtt.stringify(list));
+      results$.push(console.log(f));
+    }
+    return results$;
+    function fn$(c){
+      return c[1] > t0 && c[0] < t1;
+    }
+    function fn1$(c){
+      return [Math.max(0, c[0] - t0), Math.min(t1, c[1]) - t0].concat(c.slice(2));
+    }
+  });
+};
 cues = function(src, out, opt){
   return open(src, opt).then(function(arg$){
     var page, close;
@@ -449,6 +484,14 @@ if ((ref$ = argv[0]) === 'bgm' || ref$ === 'sfx' || ref$ === 'mix' || ref$ === '
       return video(src, out, opt);
     case 'cues':
       return cues(src, out, opt);
+    case 'captions':
+      return open(src, opt).then(function(arg$){
+        var page, close;
+        page = arg$.page, close = arg$.close;
+        return writeVtt(page, out, 0, Infinity).then(function(){
+          return close();
+        });
+      });
     case 'bundle':
       if (rest[0]) {
         return bundle(src, out, rest[0], opt);

package/index.css

@@ -66,6 +66,52 @@
   color: var(--lotion-ink);
   border: 1px solid var(--lotion-line);
 }
+.lotion .lotion-cc {
+  width: auto;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font: 600 13px/1 sans-serif;
+  letter-spacing: 0.04em;
+  background: transparent;
+  color: var(--lotion-ink);
+  border: 1px solid var(--lotion-line);
+}
+.lotion.lotion-captions-on .lotion-cc {
+  background: var(--lotion-ink);
+  border-color: var(--lotion-ink);
+  color: #fff;
+}
+.lotion .lotion-viewport {
+  container-type: inline-size;
+}
+.lotion .lotion-captions {
+  --lotion-caption-size: clamp(14px, 2.6cqw, 44px);
+  position: absolute;
+  left: 10%;
+  right: 10%;
+  bottom: 6%;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2em;
+  pointer-events: none;
+  text-align: center;
+  font-size: var(--lotion-caption-size);
+  line-height: 1.35;
+}
+.lotion.lotion-captions-on .lotion-captions {
+  display: flex;
+}
+.lotion .lotion-caption {
+  max-width: 100%;
+  padding: 0.12em 0.5em;
+  border-radius: 0.2em;
+  background: var(--lotion-caption-bg, rgba(0,0,0,0.72));
+  color: var(--lotion-caption-color, #fff);
+  font-family: var(--lotion-caption-font, sans-serif);
+  white-space: pre-wrap;
+}
 .lotion .lotion-time {
   font: 15px/1 sans-serif;
   color: var(--lotion-mute);

package/index.js

@@ -1,5 +1,5 @@
 (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$, libs, libCache, lib, encode, lotion;
+  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$, libs, libCache, lib, encode, vttTime, vttParseTime, vtt, 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);
@@ -179,7 +179,7 @@
     return e;
   };
   player = function(opt){
-    var this$ = this;
+    var c, tracks, k, v, ref$, this$ = this;
     opt == null && (opt = {});
     this.opt = opt;
     this.root = typeof opt.root === 'string'
@@ -190,6 +190,9 @@
     this.duration = opt.duration || 0;
     this.chapters = opt.chapters || [];
     this.t = 0;
+    this.chapter = null;
+    this.caption = null;
+    this.handlers = {};
     this.playing = false;
     this.last = null;
     this.started = false;
@@ -197,8 +200,29 @@
       return this$.readyRes = res;
     });
     this.renderMode = /[?&]render\b/.test(location.search);
+    c = opt.captions;
+    tracks = !c
+      ? {}
+      : Array.isArray(c) ? {
+        '': c
+      } : c;
+    this.captionTracks = {};
+    for (k in tracks) {
+      v = tracks[k];
+      this.captionTracks[k] = v.slice().sort(fn$);
+    }
+    this.captionLangs = Object.keys(this.captionTracks);
+    this.captionLang = in$(opt.captionLang, this.captionLangs)
+      ? opt.captionLang
+      : (ref$ = this.captionLangs[0]) != null ? ref$ : null;
+    this.captionsOn = this.renderMode
+      ? !!(opt.burnCaptions || /[?&]captions\b/.test(location.search))
+      : !opt.captionsBurned;
     this.init();
     return this;
+    function fn$(a, b){
+      return a[0] - b[0];
+    }
   };
   player.prototype = (ref$ = Object.create(Object.prototype), ref$.constructor = player, ref$.init = function(){
     var r, ref$, html, q, this$ = this;
@@ -218,7 +242,7 @@
       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);
+    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-cc" title="字幕 ( c )">CC</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);
     };
@@ -229,15 +253,21 @@
       time: q('time'),
       track: q('track'),
       chapters: q('chapters'),
-      fs: q('fs')
+      fs: q('fs'),
+      cc: q('cc')
     };
     this.chapters.map(function(arg$){
-      var t, name, e;
-      t = arg$[0], name = arg$[1];
+      var t, name, meta, e;
+      t = arg$[0], name = arg$[1], meta = arg$[2];
       e = mk('lotion-ch', '', this$.el.chapters);
-      e.title = name;
+      e.title = name + (meta && meta.description ? "\n" + meta.description : '');
       return e.style.left = 100 * t / this$.duration + "%";
     });
+    this.el.captions = mk('lotion-captions', '', this.viewport);
+    if (!this.captionLangs.length) {
+      this.el.cc.remove();
+    }
+    this.root.classList.toggle('lotion-captions-on', this.captionsOn);
     this.bind();
     if (this.renderMode) {
       r.classList.add('lotion-render');
@@ -267,6 +297,9 @@
       if (this.opt.cues) {
         window.cues = this.opt.cues;
       }
+      if (this.captionLangs.length) {
+        window.CAPTIONS = this.captionTracks;
+      }
     }
     this.readyRes(this);
     m = /[?&]t=([\d.]+)/.exec(location.search);
@@ -291,6 +324,10 @@
       e.stopPropagation();
       return this$.fullscreen();
     });
+    this.el.cc.addEventListener('click', function(e){
+      e.stopPropagation();
+      return this$.showCaptions(!this$.captionsOn);
+    });
     this.viewport.addEventListener('click', function(){
       this$.root.focus();
       return this$.toggle();
@@ -324,6 +361,8 @@
         return this$.toggle();
       } else if (e.key === 'f') {
         return this$.fullscreen();
+      } else if (e.key === 'c' && this$.captionLangs.length) {
+        return this$.showCaptions(!this$.captionsOn);
       } else if (e.key === 'ArrowRight') {
         return this$.seek((ref$ = starts.find(function(s){
           return s > this$.t + 0.05;
@@ -351,7 +390,7 @@
   }, ref$.fmt = function(t){
     return Math.floor(t / 60) + ":" + ("0" + Math.floor(t % 60)).slice(-2);
   }, ref$.seek = function(t){
-    var p, ch;
+    var p, ci, i$, ref$, len$, i, c, ch;
     if (!this.started || this.encoding) {
       return;
     }
@@ -360,11 +399,109 @@
     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();
+    ci = -1;
+    for (i$ = 0, len$ = (ref$ = this.chapters).length; i$ < len$; ++i$) {
+      i = i$;
+      c = ref$[i$];
+      if (c[0] <= t) {
+        ci = i;
+      }
+    }
+    ch = this.chapters[ci];
     this.el.time.textContent = (ch ? ch[1] + " · " : '') + (this.fmt(t) + " / " + this.fmt(this.duration));
-    return this.root.classList.toggle('lotion-playing', this.playing);
+    this.root.classList.toggle('lotion-playing', this.playing);
+    if ((ch
+      ? ci
+      : -1) !== (this.chapter
+      ? this.chapter.index
+      : -1)) {
+      this.chapter = ch ? {
+        index: ci,
+        t: ch[0],
+        name: ch[1],
+        meta: ch[2] || null
+      } : null;
+      this.fire('chapter', this.chapter);
+    }
+    this.updateCaption();
+    return this.fire('time', t);
+  }, ref$.updateCaption = function(){
+    var t, list, act, cap, key, i$, ref$, len$, line;
+    t = this.t;
+    list = (this.captionLang != null && this.captionTracks[this.captionLang]) || [];
+    act = list.filter(function(c){
+      return c[0] <= t && t < c[1];
+    });
+    cap = !act.length
+      ? null
+      : {
+        t0: act[0][0],
+        t1: act[act.length - 1][1],
+        text: act.map(function(c){
+          return c[2];
+        }).join('\n'),
+        meta: act[0][3] || null,
+        lang: this.captionLang
+      };
+    key = function(c){
+      if (c) {
+        return c.lang + "|" + c.t0 + "|" + c.text;
+      } else {
+        return '';
+      }
+    };
+    if (key(cap) === key(this.caption)) {
+      return;
+    }
+    this.caption = cap;
+    this.el.captions.innerHTML = '';
+    if (cap) {
+      for (i$ = 0, len$ = (ref$ = cap.text.split('\n')).length; i$ < len$; ++i$) {
+        line = ref$[i$];
+        mk('lotion-caption', '', this.el.captions).textContent = line;
+      }
+    }
+    return this.fire('caption', cap);
+  }, ref$.showCaptions = function(v){
+    v == null && (v = true);
+    this.captionsOn = !!v;
+    this.root.classList.toggle('lotion-captions-on', this.captionsOn);
+    this.fire('captions', {
+      on: this.captionsOn,
+      lang: this.captionLang
+    });
+    return this;
+  }, ref$.setCaptionLang = function(lang){
+    if (!in$(lang, this.captionLangs)) {
+      return this;
+    }
+    this.captionLang = lang;
+    this.updateCaption();
+    this.fire('captions', {
+      on: this.captionsOn,
+      lang: lang
+    });
+    return this;
+  }, ref$['on'] = function(name, cb){
+    var ref$, ref1$;
+    ((ref1$ = (ref$ = this.handlers)[name]) != null
+      ? ref1$
+      : ref$[name] = []).push(cb);
+    return this;
+  }, ref$['off'] = function(name, cb){
+    if (this.handlers[name]) {
+      this.handlers[name] = this.handlers[name].filter(function(h){
+        return h !== cb;
+      });
+    }
+    return this;
+  }, ref$.fire = function(name, v){
+    var i$, ref$, len$, h, results$ = [];
+    for (i$ = 0, len$ = (ref$ = (this.handlers[name] || []).slice()).length; i$ < len$; ++i$) {
+      h = ref$[i$];
+      results$.push(h(v));
+    }
+    return results$;
   }, ref$.tick = function(now){
     var this$ = this;
     if (!this.playing) {
@@ -583,7 +720,79 @@
       throw e;
     });
   };
+  vttTime = function(t){
+    var ms, h, m, s, pad;
+    ms = Math.round(t * 1000);
+    h = Math.floor(ms / 3600000);
+    m = Math.floor(ms / 60000) % 60;
+    s = Math.floor(ms / 1000) % 60;
+    pad = function(v, n){
+      n == null && (n = 2);
+      return (v + "").padStart(n, '0');
+    };
+    return pad(h) + ":" + pad(m) + ":" + pad(s) + "." + pad(ms % 1000, 3);
+  };
+  vttParseTime = function(s){
+    var p;
+    p = s.trim().split(':');
+    return p.reduce(function(a, v){
+      return a * 60 + parseFloat(v);
+    }, 0);
+  };
+  vtt = {
+    parse: function(text){
+      var ret, blocks, i$, len$, b, lines, i, ref$, a, z, body, meta, m, cue;
+      ret = [];
+      blocks = text.replace(/\r\n?/g, '\n').split(/\n{2,}/);
+      for (i$ = 0, len$ = blocks.length; i$ < len$; ++i$) {
+        b = blocks[i$];
+        lines = b.split('\n').filter(fn$);
+        i = lines.findIndex(fn1$);
+        if (i < 0) {
+          continue;
+        }
+        ref$ = lines[i].split('-->'), a = ref$[0], z = ref$[1];
+        body = lines.slice(i + 1).join('\n');
+        meta = null;
+        if (m = /^<v(?:\.[^\s>]*)?\s+([^>]+)>/.exec(body)) {
+          meta = {
+            speaker: m[1].trim()
+          };
+        }
+        body = body.replace(/<\/?[^>]+>/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+        cue = [vttParseTime(a), vttParseTime(z.trim().split(/\s+/)[0]), body];
+        if (meta) {
+          cue.push(meta);
+        }
+        ret.push(cue);
+      }
+      return ret;
+      function fn$(l){
+        return l.trim();
+      }
+      function fn1$(l){
+        return /-->/.test(l);
+      }
+    },
+    stringify: function(captions){
+      var esc, cues;
+      esc = function(s){
+        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      };
+      cues = captions.map(function(arg$){
+        var t0, t1, text, meta, body;
+        t0 = arg$[0], t1 = arg$[1], text = arg$[2], meta = arg$[3];
+        body = esc(text);
+        if (meta && meta.speaker) {
+          body = "<v " + esc(meta.speaker) + ">" + body;
+        }
+        return vttTime(t0) + " --> " + vttTime(t1) + "\n" + body;
+      });
+      return "WEBVTT\n\n" + cues.join('\n\n') + '\n';
+    }
+  };
   lotion = {
+    vtt: vtt,
     clamp: clamp,
     lerp: lerp,
     ss: ss,
@@ -610,6 +819,11 @@
   } else if (typeof window != 'undefined' && window !== null) {
     window.lotion = lotion;
   }
+  function in$(x, xs){
+    var i = -1, l = xs.length >>> 0;
+    while (++i < l) if (x === xs[i]) return true;
+    return false;
+  }
   function import$(obj, src){
     var own = {}.hasOwnProperty;
     for (var key in src) if (own.call(src, key)) obj[key] = src[key];