retake-dev 0.4.0

package/src/runtime/20-media.js

@@ -0,0 +1,157 @@
+// Audio/video can't be scrubbed, so it only plays while the clock plays at
+// normal pace. Elements the app wanted playing are resumed when the clock does.
+
+const MP = HTMLMediaElement.prototype
+const mediaOrig = { play: MP.play, pause: MP.pause }
+const media = new Set()
+
+// play() settles in real time (and autoplay may reject it), so its outcome is
+// recorded and replayed like a network response.
+MP.play = function () {
+  media.add(this)
+  const el = this
+  return recordedAsync(() => {
+    if (!clock.playing || clock.seeking) return Promise.resolve()
+    return mediaOrig.play.call(el)
+  }).then(() => {
+    el.__ptWants = true
+    // Where the media was when it started, on the virtual clock.
+    el.__ptAt = clock.now
+    el.__ptFrom = el.currentTime || 0
+    mediaRun(el, el.__ptFrom, true)
+  })
+}
+MP.pause = function () {
+  if (this.__ptWants) mediaRun(this, this.currentTime || 0, false)
+  this.__ptWants = false
+  return mediaOrig.pause.call(this)
+}
+
+// Each element's runs on the virtual clock: { at, from, on } from `at` on, it
+// played from `from` (on) or stood at it (off). The preview places media at
+// the run in effect at its moment (F50), including media removed since.
+function mediaRun(el, from, on) {
+  const runs = el.__ptRuns || (el.__ptRuns = [])
+  const last = runs[runs.length - 1]
+  if (last && last.at === clock.now) runs.pop()
+  runs.push({ at: clock.now, from, on, src: el.currentSrc || el.src || "" })
+}
+
+function syncMedia() {
+  const live = clock.playing && !clock.seeking
+  for (const el of media) {
+    if (el.__ptAlign && el.readyState >= 1 && !clock.seeking && !previewing) alignMedia()
+    // Removed media is kept (the DOM log keeps it too): a preview of a moment
+    // when it was there puts it back, at its time then.
+    if (!el.isConnected) {
+      if (!el.paused) mediaOrig.pause.call(el)
+      continue
+    }
+    if (!live && !el.paused) mediaOrig.pause.call(el)
+    else if (live && el.__ptWants && el.paused) mediaOrig.play.call(el).catch(() => {})
+    if (live && el.playbackRate !== clock.rate) el.playbackRate = clock.rate
+  }
+}
+
+// After a seek, media the app had playing jumps to where it would be at this
+// moment on the virtual clock.
+function alignMedia(at = clock.now) {
+  for (const el of media) {
+    if (previewing && el.__ptRuns && el.__ptRuns.length) {
+      placeMedia(el, at)
+      continue
+    }
+    if (!el.__ptWants || el.__ptAt == null) continue
+    // Too early to seek (no metadata yet): syncMedia does it once it can.
+    if (el.readyState < 1) {
+      el.__ptAlign = true
+      continue
+    }
+    el.__ptAlign = false
+    const t = el.__ptFrom + ((at - el.__ptAt) / 1000) * (el.playbackRate || 1)
+    const end = Number.isFinite(el.duration) ? el.duration : Infinity
+    try {
+      el.currentTime = el.loop && Number.isFinite(end) && end > 0 ? t % end : Math.min(t, end)
+    } catch {}
+  }
+}
+
+// The preview: where it was at `at`, from its runs (before the first: where that one started).
+function placeMedia(el, at) {
+  if (el.readyState < 1) return
+  const runs = el.__ptRuns
+  let run = runs[0]
+  for (const r of runs) if (r.at <= at) run = r
+  const t = run.on && run.at <= at ? run.from + ((at - run.at) / 1000) * (el.playbackRate || 1) : run.from
+  const end = Number.isFinite(el.duration) ? el.duration : Infinity
+  try {
+    el.currentTime = el.loop && Number.isFinite(end) && end > 0 ? t % end : Math.min(t, end)
+  } catch {}
+}
+
+// ---- readiness events ------------------------------------------------------------
+// A media file or image finishing loading is the network talking, in real
+// time. Apps react to it (reveal UI on loadeddata, fade in on load), so the
+// moment it happened is recorded, and on replay the real event is held back
+// and the recorded one is dispatched at its virtual moment instead.
+const READY = ["loadedmetadata", "loadeddata", "canplay", "canplaythrough", "playing", "load", "error"]
+const readyTarget = (t) => t instanceof HTMLMediaElement || t instanceof HTMLImageElement
+const delivered = new WeakMap() // element -> Set of types already given from the recording
+
+function onReady(e) {
+  if (!e.isTrusted || !rec || !readyTarget(e.target)) return
+  const el = e.target
+  const given = delivered.get(el)
+  if (hasFuture() || clock.seeking) {
+    e.stopImmediatePropagation() // the recording delivers it at its moment
+    return
+  }
+  if (given && given.has(e.type)) {
+    // Already delivered from the recording before we reached the live edge.
+    given.delete(e.type)
+    e.stopImmediatePropagation()
+    return
+  }
+  const path = pathOf(el)
+  if (e.type === "playing" && el instanceof HTMLMediaElement) startedAt(el, el.currentTime)
+  if (path) recordEvent(e.type === "playing" ? { type: "ready", ev: e.type, path, ct: el.currentTime || 0 } : { type: "ready", ev: e.type, path })
+}
+
+// Media that starts by itself (autoplay) never calls play(): it's taken in
+// when it starts, paused whenever the clock isn't playing at normal pace, and
+// placed at its virtual time after a seek, like media the app played.
+function startedAt(el, from) {
+  media.add(el)
+  el.__ptWants = true
+  if (el.__ptAt == null) {
+    el.__ptAt = clock.now
+    el.__ptFrom = from || 0
+    mediaRun(el, el.__ptFrom, true)
+  }
+}
+document.addEventListener(
+  "play",
+  (e) => {
+    const el = e.target
+    if (!(el instanceof HTMLMediaElement)) return
+    media.add(el)
+    el.__ptWants = true
+    if (!(clock.playing && !clock.seeking)) mediaOrig.pause.call(el)
+  },
+  true,
+)
+// On the document, not window: element load/error events don't reach window.
+for (const type of READY) document.addEventListener(type, onReady, true)
+
+function deliverReady(ev) {
+  const el = resolvePath(ev.path)
+  if (!el || !readyTarget(el)) return
+  if (!delivered.has(el)) delivered.set(el, new Set())
+  delivered.get(el).add(ev.ev)
+  // The recorded moment it started playing (autoplay included).
+  if (ev.ev === "playing" && el instanceof HTMLMediaElement) {
+    el.__ptAt = null
+    startedAt(el, ev.ct)
+  }
+  el.dispatchEvent(new Event(ev.ev))
+}

package/src/runtime/30-recorder.js

@@ -0,0 +1,315 @@
+// The recording: everything needed to rebuild the page at any moment by
+// reloading and replaying — input events, fetch responses, the frame times the
+// clock advanced through, the random seed, Date epoch and web storage.
+
+function snapshotStorage(store) {
+  const out = {}
+  try {
+    for (let i = 0; i < store.length; i++) {
+      const k = store.key(i)
+      if (!k.startsWith(KEY)) out[k] = store.getItem(k)
+    }
+  } catch {}
+  return out
+}
+
+function restoreStorage(store, snap) {
+  try {
+    for (let i = store.length - 1; i >= 0; i--) {
+      const k = store.key(i)
+      if (!k.startsWith(KEY)) store.removeItem(k)
+    }
+    for (const k in snap) store.setItem(k, snap[k])
+  } catch {}
+}
+
+// ---- frames take turns with the origin's storage ------------------------------------
+// The visible frame, a frame being built behind it and a checkpoint all share
+// the origin's web storage and cookies, and a frame that boots puts them back
+// to its own segment's start. So whichever frame last ran app code "owns" them
+// (shell.storageOwner): a frame keeps a copy of its own when it stops running
+// app code, and puts that copy back before it runs app code again if another
+// frame took over meanwhile. IndexedDB can't be put back synchronously: a frame
+// of an app that uses it reports storageOk false, and the dock rebuilds rather
+// than resume it.
+const storageId = real.random()
+let ownStorage = null
+let idbOpened = false
+function keepStorage() {
+  if (shell && shell.storageOwner !== storageId) return
+  ownStorage = { local: snapshotStorage(real.local), session: snapshotStorage(real.session), cookies: snapshotCookies() }
+}
+function takeStorage() {
+  if (!shell || shell.storageOwner === storageId) return
+  if (ownStorage) {
+    restoreStorage(real.local, ownStorage.local)
+    restoreStorage(real.session, ownStorage.session)
+    restoreCookies(ownStorage.cookies)
+  }
+  shell.storageOwner = storageId
+}
+const usesIDB = () => idbOpened || segmentsOf().some((s) => s.idb && s.idb.length > 0)
+const storageOk = () => !shell || shell.storageOwner === storageId || !usesIDB()
+
+function newRecording() {
+  return withPacking({
+    v: 1,
+    url: location.href,
+    seed: Math.floor(real.random() * 2 ** 32),
+    epoch: real.Date.now(),
+    storage: { local: snapshotStorage(real.local), session: snapshotStorage(real.session) },
+    // Replays run in a frame of this size, so layout matches (F18).
+    viewport: { w: W.innerWidth, h: W.innerHeight },
+    // Element paths start at an id and skip scripts (F51; see pathOf).
+    pathV: 2,
+    // The front server's kept copy of this page (F56; RT.docId).
+    ...(RT.docId ? { doc: RT.docId } : {}),
+    frames: [],
+    events: [],
+    fetches: [],
+    end: 0,
+  })
+}
+
+let rec = null
+const cursor = { event: 0, frame: 0 }
+
+// ---- compact serialisation ----------------------------------------------------------
+// JSON.stringify(rec) writes a compact form (v: 2): every DOM path is stored
+// once in a table and events refer to it by index, which on a deep DOM
+// halves the size. readRec() takes either form back. The in-memory object
+// (history()) keeps plain paths.
+// A packer keeps the tables, so events can be packed a slice at a time.
+function packer(r) {
+  const tables = { paths: [], strs: [] }
+  const idx = { paths: new Map(), strs: new Map() }
+  const ref = (kind, v) => {
+    if (v == null) return v
+    const key = typeof v === "string" ? v : Array.isArray(v) ? v.join(",") : "=" + v
+    let i = idx[kind].get(key)
+    if (i == null) {
+      i = tables[kind].length
+      tables[kind].push(v)
+      idx[kind].set(key, i)
+    }
+    return i
+  }
+  // An event's time is usually exactly a frame boundary: store the frame's index.
+  const frameAt = new Map()
+  r.frames.forEach((f, i) => frameAt.set(f, i))
+  let lastF = 0
+  return {
+    event(ev) {
+      const out = { ...ev }
+      out.y = ref("strs", out.type)
+      delete out.type
+      if ("path" in out) (out.p = ref("paths", out.path)), delete out.path
+      if ("related" in out) (out.rp = ref("paths", out.related)), delete out.related
+      if (out.css != null) (out.c = ref("strs", out.css)), delete out.css
+      const fi = frameAt.get(out.t)
+      if (fi != null) {
+        out.f = fi - lastF
+        lastF = fi
+        delete out.t
+      }
+      return out
+    },
+    clip(c) {
+      const out = { ...c }
+      if (out.selector != null) (out.s = ref("strs", out.selector)), delete out.selector
+      if (out.component != null) (out.co = ref("strs", out.component)), delete out.component
+      if (out.label != null) (out.l = ref("strs", out.label)), delete out.label
+      if (out.path != null) (out.p = ref("paths", out.path)), delete out.path
+      return out
+    },
+    // Everything but the events, with the tables as they stand.
+    head(events) {
+      const out = {}
+      for (const k of Object.keys(r)) out[k] = r[k]
+      out.v = 3
+      out.events = events
+      if (r.clips) out.clips = r.clips.map((c) => this.clip(c))
+      out.paths = tables.paths
+      out.strs = tables.strs
+      return out
+    },
+  }
+}
+function packRec(r) {
+  const pk = packer(r)
+  const events = r.events.map((ev) => pk.event(ev))
+  return pk.head(events)
+}
+function unpackRec(o) {
+  if (o && o.v === 2 && o.paths) {
+    // v2: paths table only
+    const table = o.paths
+    o.events = o.events.map((ev) => {
+      const out = { ...ev }
+      if ("p" in out) (out.path = table[out.p]), delete out.p
+      if ("rp" in out) (out.related = table[out.rp]), delete out.rp
+      return out
+    })
+    delete o.paths
+    o.v = 1
+  } else if (o && o.v === 3) {
+    const P = o.paths
+    const S = o.strs
+    let lastF = 0
+    o.events = o.events.map((ev) => {
+      const out = { ...ev }
+      out.type = S[out.y]
+      delete out.y
+      if ("p" in out) (out.path = P[out.p]), delete out.p
+      if ("rp" in out) (out.related = P[out.rp]), delete out.rp
+      if ("c" in out) (out.css = S[out.c]), delete out.c
+      if ("f" in out) {
+        lastF += out.f
+        out.t = o.frames[lastF]
+        delete out.f
+      }
+      return out
+    })
+    if (o.clips) {
+      o.clips = o.clips.map((c) => {
+        const out = { ...c }
+        if ("s" in out) (out.selector = S[out.s]), delete out.s
+        if ("co" in out) (out.component = S[out.co]), delete out.co
+        if ("l" in out) (out.label = S[out.l]), delete out.l
+        if ("p" in out) (out.path = P[out.p]), delete out.p
+        return out
+      })
+    }
+    delete o.paths
+    delete o.strs
+    o.v = 1
+  }
+  return withPacking(o)
+}
+function withPacking(o) {
+  if (o && typeof o === "object" && !Object.prototype.hasOwnProperty.call(o, "toJSON")) {
+    Object.defineProperty(o, "toJSON", { value: function () { return packRec(this) }, enumerable: false, configurable: true })
+  }
+  return o
+}
+const readRec = (json) => unpackRec(typeof json === "string" ? JSON.parse(json) : json)
+
+// Segments: a recording starts one on load, and another each time the app
+// reloads itself. A moment is rebuilt from the start of its segment: that
+// segment's URL, storage and seed, replaying only what came after it.
+function segmentsOf(r = rec) {
+  const first = { t: 0, ev: 0, fr: 0, url: r.url, storage: r.storage, cookies: r.cookies, idb: r.idb, seed: r.seed, doc: r.doc, docDebug: r.docDebug }
+  return [first, ...(r.segments || [])]
+}
+function segmentIndex(t, r = rec) {
+  if (typeof r === "string") r = readRec(r)
+  let i = 0
+  for (const s of r.segments || []) if (s.t <= t) i++
+  return i
+}
+function segmentAt(t, r = rec) {
+  return segmentsOf(r)[segmentIndex(t, r)]
+}
+// Does this page already show that URL (ignoring our own __wb parameter)?
+function sameDocUrl(url) {
+  try {
+    const a = new URL(url, location.href)
+    const b = new URL(location.href)
+    for (const u of [a, b]) u.searchParams.delete("__wb")
+    return a.origin === b.origin && a.pathname === b.pathname && a.search === b.search
+  } catch {
+    return true
+  }
+}
+
+const hasFuture = () =>
+  !!rec && (cursor.event < rec.events.length || cursor.frame < rec.frames.length)
+
+// New input after going back starts a new future. The old one isn't lost: the
+// dock keeps it as its own branch before we cut it off here.
+function fork() {
+  if (!hasFuture()) return
+  if (shell && rec.start != null) shell.branchOff(JSON.stringify(rec), rec.end, clock.now)
+  const cut = rec.events.slice(cursor.event)
+  rec.events.length = cursor.event
+  rec.frames.length = cursor.frame
+  if (rec.routes) rec.routes = rec.routes.filter((r) => r.t <= clock.now)
+  if (rec.reloads) rec.reloads = rec.reloads.filter((t) => t <= clock.now)
+  if (rec.segments) rec.segments = rec.segments.filter((sg) => sg.t <= clock.now)
+  if (rec.clips) rec.clips = rec.clips.filter((c) => c.start <= clock.now)
+  cutActivity(clock.now)
+  netFork(cut)
+  rec.end = clock.now
+  PT.emit()
+}
+
+// The frame boundary whose recorded input (live, or replayed) is being handled:
+// the DOM changes that follow are logged just after it (see logMutations).
+// Moves, hovers, wheel and scroll don't count: they come every frame while the
+// pointer moves, in between the frame's own work, which would be logged late.
+let inputAt = null
+const CONTINUOUS = /^(pointermove|mousemove|pointerover|pointerout|pointerenter|pointerleave|mouseover|mouseout|mouseenter|mouseleave|wheel|scroll|touchmove)$/
+const markInput = (ev) => {
+  if (!CONTINUOUS.test(ev.type)) inputAt = clock.now
+}
+
+function recordEvent(ev) {
+  if (hasFuture()) return
+  ev.t = clock.now
+  markInput(ev)
+  const last = rec.events[rec.events.length - 1]
+  // Collapse pointer moves within one frame; only the latest position matters.
+  if (ev.type === "pointermove" && last && last.type === "pointermove" && last.t === ev.t && last.path + "" === ev.path + "") {
+    rec.events[rec.events.length - 1] = ev
+  } else {
+    rec.events.push(ev)
+  }
+  cursor.event = rec.events.length
+}
+
+function recordFrame(t) {
+  if (!hasFuture() && t > (rec.frames[rec.frames.length - 1] ?? -1)) {
+    rec.frames.push(t)
+    cursor.frame = rec.frames.length
+  }
+  if (t > rec.end) rec.end = t
+}
+
+// ---- other real-time promises (e.g. media.play()) ----------------------------
+// Their outcome and the moment they settle are recorded, keyed by call order,
+// and replayed identically.
+
+let asyncSeq = 0
+const pendingAsync = new Map()
+const settledEarly = new Map()
+
+function recordedAsync(realCall) {
+  const i = asyncSeq++
+  const replayable = hasFuture() && rec.events.some((e, j) => j >= cursor.event && e.type === "async" && e.i === i)
+  if (replayable) {
+    if (settledEarly.has(i)) return asyncOutcome(settledEarly.get(i))
+    return new Promise((resolve, reject) => pendingAsync.set(i, { resolve, reject }))
+  }
+  if (hasFuture() || (rec.start != null && !clock.playing)) return realCall()
+  return realCall().then(
+    (value) => {
+      recordEvent({ type: "async", i, ok: true })
+      return value
+    },
+    (err) => {
+      recordEvent({ type: "async", i, ok: false, name: err && err.name, message: err && err.message })
+      throw err
+    },
+  )
+}
+
+function asyncOutcome(ev) {
+  return ev.ok ? Promise.resolve() : Promise.reject(new DOMException(ev.message || "", ev.name || "Error"))
+}
+
+function settleAsync(ev) {
+  const p = pendingAsync.get(ev.i)
+  if (!p) return settledEarly.set(ev.i, ev)
+  pendingAsync.delete(ev.i)
+  asyncOutcome(ev).then(p.resolve, p.reject)
+}