lecodes-web-shared 2.0.0

package/src/utils/fonts.ts

@@ -0,0 +1,88 @@
+// The viewer measures text with a real canvas 2D context (the DOM measure system's OffscreenCanvas
+// and the canvas-ui BrowserHost), which only sees fonts the document has actually loaded — so the
+// measurement font must be fully loaded before the first layout, or text lays out against a
+// fallback and never recovers (Yoga caches the measure).
+//
+// The font is the vendored variable Roboto (weights 100–900, latin + cyrillic + greek + vietnamese
+// in ONE file), self-hosted and same-origin. The previous Google-Fonts Inter pipeline was broken on
+// a cold cache: css2 serves each family split into unicode-range subsets, and
+// `fonts.load("400 14px Inter")` (default text = a space) only awaited the *latin* subset — the
+// first measure of Cyrillic text ran against a fallback and produced a wrong layout that later
+// cache-warm loads never reproduced. One complete file makes the await cover every glyph, every
+// weight, with no CDN round trip.
+import robotoUrl from "../assets/Roboto-Variable.woff2?url"
+
+// The default measurement/paint family (createMeasureSystem / paintTree / the lite CSS renderer).
+export const DEFAULT_FONT_FAMILY = "Roboto"
+
+// One variable face serves every weight — a single load covers 400..800.
+const DEFAULT_FONTS = [`400 14px ${DEFAULT_FONT_FAMILY}`]
+
+const FONT_STYLE_MARKER = "data-lecodes-fonts"
+
+/** Register the vendored @font-face in `doc` (idempotent) and resolve once the bytes are in. */
+export const ensureFontsLoaded = async (fonts: string[] = DEFAULT_FONTS, doc?: Document) => {
+  // Fonts are per-document: the lite host renders inside its own iframe and passes that
+  // document; the default serves the classic full-viewer path.
+  const target = doc ?? (typeof document === "undefined" ? undefined : document)
+  if (!target || !target.fonts) return
+
+  if (!target.head.querySelector(`style[${FONT_STYLE_MARKER}]`)) {
+    // Resolve against the embedder document: the lite host's iframe is a base-less about:blank,
+    // and Vite emits a root-relative asset path.
+    const absUrl = new URL(robotoUrl, document.baseURI).href
+    const style = target.createElement("style")
+    style.setAttribute(FONT_STYLE_MARKER, "")
+    style.textContent =
+      `@font-face{font-family:"${DEFAULT_FONT_FAMILY}";src:url("${absUrl}") format("woff2");` +
+      `font-weight:100 900;font-display:swap}`
+    target.head.appendChild(style)
+  }
+
+  try {
+    // load() resolves once each matched face's bytes are in, and resolves (not rejects) with an
+    // empty array when nothing matches — so a missing face is a no-op, not a failure.
+    await Promise.all(fonts.map(font => target.fonts.load(font)))
+  } catch {
+    // Best-effort: a font that fails to fetch must never block the simulator from starting.
+  }
+}
+
+// ---- app-declared boot fonts (the bundle's `// fonts:` header) ----------------------------------
+
+export type BootFont = { family: string, weight: number, italic: boolean, url: string }
+
+/** Parse the bundle's `// fonts:` header value (`Family@<weight>[i]=<url>;…`) from the header
+ *  region of a compiled bundle. A `{fmt}` placeholder in a URL is the container-format choice —
+ *  replaced with this host's preference (browsers: woff2). */
+export const parseFontsHeader = (header: string, format = "woff2"): BootFont[] => {
+  const m = /^\/\/ fonts: (.+)$/m.exec(header)
+  if (!m) return []
+  const out: BootFont[] = []
+  for (const entry of m[1].split(";")) {
+    const eq = entry.indexOf("=")
+    if (eq === -1) continue
+    const tag = /^(.+)@(\d+)(i?)$/.exec(entry.slice(0, eq))
+    if (!tag) continue
+    out.push({ family: tag[1], weight: parseInt(tag[2], 10), italic: tag[3] === "i", url: entry.slice(eq + 1).replace("{fmt}", format) })
+  }
+  return out
+}
+
+/** Boot hold: start loading the app's declared faces, resolving when they settle or the budget
+ *  expires (~2s, like font-display's block period but shorter) — the host delays first paint on
+ *  this so text appears in the right font from the start. Faces are added to the document FIRST,
+ *  so one that loses the race still swaps in when it lands (the degraded-network fallback). */
+export const loadBootFonts = async (fonts: BootFont[], doc?: Document, budgetMs = 2000): Promise<void> => {
+  const target = doc ?? (typeof document === "undefined" ? undefined : document)
+  if (!target?.fonts || fonts.length === 0) return
+  const loads: Promise<unknown>[] = []
+  for (const f of fonts) {
+    try {
+      const face = new FontFace(f.family, `url("${f.url}")`, { weight: String(f.weight), style: f.italic ? "italic" : "normal" } as FontFaceDescriptors)
+      target.fonts.add(face)
+      loads.push(face.load().catch(() => { /* missing face → fallback, never a boot failure */ }))
+    } catch { /* malformed entry — skip */ }
+  }
+  await Promise.race([ Promise.all(loads), new Promise((res) => setTimeout(res, budgetMs)) ])
+}

package/src/utils/mediaplayer.ts

@@ -0,0 +1,128 @@
+
+// Slots are addressed by id (their original index) and are never spliced — disposing a single
+// player nulls its slot so every other id stays valid. `releasePlayer` does the actual teardown.
+// Slot 0 stays empty: id 0 is the SDK's dead handle (sdk/src/core/pins.ts DEAD_HANDLE), and a
+// player with that id would never get its end-of-playback report.
+const players: (HTMLVideoElement | HTMLAudioElement | null)[] = [null]
+
+// Looping is driven manually rather than through the element's native `loop` flag: a natively
+// looping element never fires "ended", so we could not signal each loop boundary. Instead we keep
+// the desired loop state per player, listen for "ended", invoke the SDK's finished callback, and —
+// when looping — rewind and replay ourselves. `onFinished` lets the SDK decide loopReached vs
+// completed based on its own loop flag.
+const loopFlags: boolean[] = [false]
+
+const attachFinished = (
+  player: HTMLVideoElement | HTMLAudioElement,
+  id: number,
+  onFinished: () => void
+) => {
+  player.addEventListener("ended", () => {
+    onFinished()
+    if (loopFlags[id]) {
+      player.currentTime = 0
+      player.play()
+    }
+  })
+}
+
+export const createVideoPlayer = (src: string, onFinished: () => void) => {
+  const player = document.createElement("video")
+  document.body.appendChild(player)
+  player.crossOrigin = "anonymous"
+  player.style = "opacity: 0; position: absolute; top: 0; left: 0; width: 1px; height: 1px"
+  player.src = src
+  player.playsInline = true
+  player.controls = false
+  const id = players.length
+  players.push(player)
+  loopFlags.push(false)
+  attachFinished(player, id, onFinished)
+  return id
+}
+
+export const createAudioPlayer = (src: string, onFinished: () => void) => {
+  const player = document.createElement("audio")
+  document.body.appendChild(player)
+  player.style = "opacity: 0; position: absolute; top: 0; left: 0; width: 1px; height: 1px"
+  player.src = src
+  const id = players.length
+  players.push(player)
+  loopFlags.push(false)
+  attachFinished(player, id, onFinished)
+  return id
+}
+
+export const updateMediaPlayerVolume = (id: number, volume: number) => {
+  const player = players[id]
+  if (!player) return
+  if (volume === 0) {
+    player.muted = true
+  } else {
+    if (player.muted) {
+      player.muted = false
+    }
+    player.volume = volume
+  }
+}
+
+export const updateMediaPlayerPlaying = (id: number, play: boolean) => {
+  const player = players[id]
+  if (!player) return
+  if (play){
+    player.play()
+  } else {
+    player.pause()
+  }
+}
+
+export const updateMediaPlayerLoop = (id: number, loop: boolean) => {
+  // Tracked for the "ended" handler; the native loop flag stays off so "ended" keeps firing.
+  loopFlags[id] = loop
+}
+
+export const getMediaPlayerTime = (id: number) => {
+  return players[id]?.currentTime ?? 0
+}
+
+export const setMediaPlayerTime = (id: number, time: number) => {
+  const player = players[id]
+  if (player) player.currentTime = time
+}
+
+export const getMediaPlayerDuration = (id: number) => {
+  // NaN before metadata loads — normalise to 0 so callers get a clean number.
+  const duration = players[id]?.duration ?? 0
+  return isNaN(duration) ? 0 : duration
+}
+
+export const getPlayer = (id: number) => {
+  return players[id]
+}
+
+// Tear down one element's media pipeline (decoder, buffering, network) and detach it from the DOM.
+const releasePlayer = (player: HTMLVideoElement | HTMLAudioElement) => {
+  // Removing the element from the DOM alone keeps the media pipeline alive. Pause, drop the source
+  // and load() to release it before detaching.
+  player.pause()
+  player.removeAttribute("src")
+  player.load()
+  player.remove()
+}
+
+export const removeMediaPlayer = (id: number) => {
+  const player = players[id]
+  if (!player) return
+  releasePlayer(player)
+  // Null the slot rather than splice, so all other ids keep pointing at the right element.
+  players[id] = null
+  loopFlags[id] = false
+}
+
+export const removePlayers = () => {
+  for (let player of players) {
+    if (player) releasePlayer(player)
+  }
+  players.length = 1   // keep the reserved slot 0
+  loopFlags.length = 1
+}

package/src/utils/svg.ts

@@ -0,0 +1,61 @@
+export type SvgSrc = { svg: string; tintColor?: string | null }
+export type ImageSrc = string | { _id: number } | SvgSrc
+
+export function isSvgSrc(src: ImageSrc | undefined | null): src is SvgSrc {
+  return typeof src === "object" && src !== null && "svg" in src
+}
+
+// A SvgSource carries its own source-level tint (`SvgSource(x).tintColor = "#.."`), a second channel
+// distinct from the style-level `tintColor`. The native hosts honour it; so must the web renderer.
+// Returns the source tint string, or undefined when there is none.
+export function svgSrcTint(src: ImageSrc | undefined | null): string | undefined {
+  return isSvgSrc(src) && typeof src.tintColor === "string" && src.tintColor.length > 0
+    ? src.tintColor
+    : undefined
+}
+
+export function convertSvgToDataUri(svg: string): string {
+  let s = svg.trim()
+
+  // A data: URI is parsed as a standalone XML document — xmlns is mandatory there.
+  // Inline <svg> in the DOM tolerates its absence; a data-uri image without it renders broken.
+  if (!/\sxmlns\s*=/.test(s)) {
+    s = s.replace(/<svg\b/, '<svg xmlns="http://www.w3.org/2000/svg"')
+  }
+
+  const bytes = new TextEncoder().encode(s)
+  let binary = ""
+  for (const byte of bytes) binary += String.fromCharCode(byte)
+  return `data:image/svg+xml;base64,${btoa(binary)}`
+}
+
+export function extractViewBox(svg: string): string | null {
+  const m = svg.match(/viewBox\s*=\s*["']([^"']+)["']/)
+  return m ? m[1] : null
+}
+
+// SVG + tintColor renders as a masked <div>: an <img> can't be recolored by CSS.
+// The mask takes the SVG's alpha channel and fills it with a single background color —
+// which is exactly the "replace all fill and stroke with one color" semantics of tintColor,
+// and leaves fill="none" transparent on its own (no shape gets accidentally filled).
+export function applySvgMask(el: HTMLElement, svg: string, tint: string): void {
+  const s = el.style as any
+  const cssUrl = `url("${convertSvgToDataUri(svg)}")`
+
+  s.webkitMaskImage = s.maskImage = cssUrl
+  s.webkitMaskRepeat = s.maskRepeat = "no-repeat"
+  s.webkitMaskPosition = s.maskPosition = "center"
+  // objectFit overrides this via applyStyle (contain | cover | "100% 100%")
+  if (!s.maskSize) s.webkitMaskSize = s.maskSize = "contain"
+
+  el.style.backgroundColor = tint
+
+  const vb = extractViewBox(svg)
+  if (vb) el.setAttribute("data-viewbox", vb)
+}
+
+export function clearSvgMask(el: HTMLElement): void {
+  const s = el.style as any
+  s.webkitMaskImage = s.maskImage = ""
+  s.backgroundColor = ""
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />