dsh-offwork 1.1.1 → 1.1.2

package/tests/pet-video.test.mjs

@@ -5,12 +5,13 @@ import { createPetVideoMotion, petVideoAlphaSupported } from '../pet-video.js';
 const flush = async () => {
   for (let i = 0; i < 5; i++) await Promise.resolve();
 };
-function fixture({ alpha = true, rejectPlay = false, idle = false } = {}) {
+function fixture({ alpha = true, rejectPlay = false, idle = false, options = {} } = {}) {
   const media = Object.assign(new EventTarget(), { matches: false });
   const document = Object.assign(new EventTarget(), { hidden: false });
   const videos = [],
     timers = new Map(),
-    calls = [];
+    calls = [],
+    states = [];
   let nextTimer = 0;
   document.createElement = (tag) => {
     if (tag === 'canvas')
@@ -26,6 +27,11 @@ function fixture({ alpha = true, rejectPlay = false, idle = false } = {}) {
       duration: 5,
       removed: false,
       canPlayType: () => 'probably',
+      requestVideoFrameCallback(callback) {
+        queueMicrotask(callback);
+        return 1;
+      },
+      cancelVideoFrameCallback() {},
       setAttribute() {},
       removeAttribute(name) {
         delete this[name];
@@ -81,9 +87,10 @@ function fixture({ alpha = true, rejectPlay = false, idle = false } = {}) {
     base,
     { greet: 'greet-data', celebrate: 'drink-data', ...(idle ? { idle: 'idle-data' } : {}) },
     'probe',
+    { ...options, onStateChange: (state) => states.push(state) },
   );
   motion.configure({ enabled: true, resting: false });
-  return { host, document, media, element, base, motion, videos, timers, calls };
+  return { host, document, media, element, base, motion, videos, timers, calls, states };
 }
 
 test('alpha support checks decoded pixels rather than trusting WebM codec support', async () => {
@@ -112,7 +119,15 @@ test('clips reveal only after playing; accepted drinking interrupts greeting and
   f.motion.play('celebrate');
   await flush();
   const drink = f.videos.at(-1);
+  assert.equal(greet.removed, false);
+  assert.equal(greet.paused, false);
+  assert.equal(f.element.dataset.action, 'greet');
+  assert.equal(f.element.dataset.videoLoading, 'celebrate');
+  assert.equal(drink.style.opacity, '0');
   drink.onplaying();
+  assert.equal(greet.paused, true);
+  assert.equal(greet.style.opacity, '0');
+  await fireTimer(f, 150);
   assert.equal(greet.removed, true);
   staleEnd();
   assert.equal(f.element.dataset.action, 'celebrate');
@@ -121,7 +136,7 @@ test('clips reveal only after playing; accepted drinking interrupts greeting and
   drink.onended();
   assert.equal(f.element.dataset.videoPlaying, undefined);
   assert.equal(f.element.dataset.action, undefined);
-  for (const timer of [...f.timers.values()]) if (timer.ms === 150) timer.fn();
+  await fireTimer(f, 150);
   assert.equal(drink.removed, true);
   f.motion.destroy();
 });
@@ -219,6 +234,8 @@ test('idle loops are interrupted by actions and resume once after action complet
   await flush();
   const greet = f.videos.at(-1);
   greet.onplaying();
+  assert.equal(idle.paused, true);
+  await fireTimer(f, 150);
   assert.equal(idle.removed, true);
   assert.equal(greet.loop, false);
   const oldEnd = greet.onended;
@@ -274,7 +291,7 @@ test('quiet state and a held drag suppress idle until they finish', async () =>
   f.motion.play('greet');
   await flush();
   f.videos.at(-1).onended();
-  await fireTimer(f, 0);
+  await flush();
   assert.equal(f.element.dataset.action, undefined);
   f.motion.configure({ enabled: true, resting: false });
   await flush();
@@ -335,3 +352,152 @@ test('failed action fallback suspends idle during CSS feedback and then returns
   f.motion.destroy();
   assert.equal(f.timers.size, 0);
 });
+
+test('preview waits for explicit play, switches actions freely and never resumes idle automatically', async () => {
+  const f = fixture({
+    idle: true,
+    options: { autoIdle: false, fallback: false, interruptible: true },
+  });
+  await flush();
+  assert.equal(f.videos.length, 0);
+  f.motion.play('greet');
+  await flush();
+  const greet = f.videos.at(-1);
+  greet.onplaying();
+  const announcements = f.states.length;
+  greet.onplaying();
+  assert.equal(f.states.length, announcements);
+  greet.onended();
+  await flush();
+  assert.equal(f.states.at(-1).phase, 'idle');
+  assert.equal(f.videos.length, 2);
+  await fireTimer(f, 150);
+  f.motion.play('idle');
+  await flush();
+  f.videos.at(-1).onplaying();
+  f.motion.play('celebrate');
+  await flush();
+  f.videos.at(-1).onplaying();
+  assert.equal(f.motion.play('greet'), true);
+  await flush();
+  f.videos.at(-1).onplaying();
+  assert.equal(f.motion.play('idle'), true);
+  await flush();
+  f.videos.at(-1).onplaying();
+  assert.ok(f.videos.filter((v) => v.src && !v.removed).length <= 2);
+  f.motion.stop();
+  assert.equal(f.element.dataset.videoPlaying, undefined);
+  assert.equal(f.states.at(-1).phase, 'idle');
+  assert.deepEqual(f.calls, []);
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('preview cancellation ignores late probe and video callbacks', async () => {
+  const f = fixture({ options: { autoIdle: false, fallback: false, interruptible: true } });
+  f.motion.play('greet');
+  f.motion.stop();
+  await flush();
+  assert.equal(f.videos.length, 1);
+  assert.deepEqual(
+    f.states.map((s) => s.phase),
+    ['loading', 'idle'],
+  );
+  f.motion.play('greet');
+  await flush();
+  const late = f.videos.at(-1).onplaying;
+  f.motion.stop();
+  late();
+  assert.equal(f.states.at(-1).phase, 'idle');
+  const count = f.states.length;
+  f.motion.destroy();
+  late();
+  assert.equal(f.states.length, count);
+  assert.equal(f.timers.size, 0);
+});
+
+test('preview reports media failure without pretending to play and supports explicit retry', async () => {
+  const f = fixture({
+    rejectPlay: true,
+    options: { autoIdle: false, fallback: false, interruptible: true },
+  });
+  f.motion.play('greet');
+  await flush();
+  assert.equal(f.states.at(-1).phase, 'unavailable');
+  assert.deepEqual(f.calls, []);
+  const create = f.document.createElement;
+  f.document.createElement = (tag) => {
+    const node = create(tag);
+    if (tag === 'video') node.play = () => Promise.resolve();
+    return node;
+  };
+  assert.equal(f.motion.retry('greet'), true);
+  await flush();
+  f.videos.at(-1).onplaying();
+  assert.equal(f.states.at(-1).phase, 'playing');
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('preview distinguishes unsupported transparency from retryable resource failures', async () => {
+  const f = fixture({
+    alpha: false,
+    options: { autoIdle: false, fallback: false, interruptible: true },
+  });
+  f.motion.play('greet');
+  await flush();
+  assert.equal(f.states.at(-1).phase, 'unsupported');
+  assert.deepEqual(f.calls, []);
+  const count = f.videos.length;
+  f.motion.retry('greet');
+  await flush();
+  assert.equal(f.videos.length, count);
+  assert.equal(f.states.at(-1).phase, 'unsupported');
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('alpha detection waits for a readable frame rather than treating an empty canvas as unsupported', async () => {
+  const f = fixture();
+  const create = f.document.createElement;
+  let reads = 0;
+  f.document.createElement = (tag) => {
+    const node = create(tag);
+    if (tag === 'canvas')
+      node.getContext = () => ({
+        drawImage() {},
+        getImageData(x) {
+          reads++;
+          return { data: [0, 0, 0, reads <= 2 ? 0 : x === 1 ? 255 : 0] };
+        },
+      });
+    return node;
+  };
+  assert.equal(await petVideoAlphaSupported(f.host, 'probe'), true);
+  assert.ok(reads >= 4);
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});
+
+test('a probe timeout remains retryable instead of poisoning the browser capability cache', async () => {
+  const f = fixture();
+  const create = f.document.createElement;
+  f.document.createElement = (tag) => {
+    const node = create(tag);
+    if (tag === 'video') node.load = () => {};
+    if (tag === 'canvas')
+      node.getContext = () => ({
+        drawImage() {
+          throw new Error('no decoded frame');
+        },
+      });
+    return node;
+  };
+  const first = petVideoAlphaSupported(f.host, 'probe');
+  await fireTimer(f, 5000);
+  assert.equal(await first, null);
+  f.document.createElement = create;
+  assert.equal(await petVideoAlphaSupported(f.host, 'probe'), true);
+  f.motion.destroy();
+  assert.equal(f.timers.size, 0);
+});

package/tools/build.mjs

@@ -1,4 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
 
 const root = new URL('../', import.meta.url);
 const moduleNames = [
@@ -9,10 +10,12 @@ const moduleNames = [
   'pet-view.js',
   'pet-motion.js',
   'pet-video.js',
+  'pet-reminder.js',
   'pet-interactions.js',
   'pet-surfaces.js',
   'hydration.js',
   'hydration-store.js',
+  'countdown.js',
 ];
 const [entry, ...modules] = await Promise.all(
   moduleNames.map((name) => readFile(new URL(name, root), 'utf8')),
@@ -26,7 +29,9 @@ if (entry.split(marker).length !== 2) {
 // The browser and Node.js tests execute the same calculation and store code.
 const pure = modules
   .map((source) =>
-    source.replace(/^import .* from '\.\/hydration\.js';\n/gm, '').replace(/^export /gm, ''),
+    source
+      .replace(/^import\s+\{[^}]+\}\s+from '\.\/(?:hydration|clock)\.js';\n/gm, '')
+      .replace(/^export /gm, ''),
   )
   .join('\n');
 const banner = '// Generated by tools/build.mjs; edit the source modules, not this file.\n';
@@ -44,14 +49,20 @@ const sprites = Object.fromEntries(
 );
 const clipMarker = '/* PET_CLIPS */';
 if (entry.split(clipMarker).length !== 2) throw new Error('Expected one clip marker');
-async function clip(name, maximum) {
+const mediaRoute = '/offwork-clock/media';
+const mediaAssets = {};
+async function clip(name, maximum, inline = false) {
   const bytes = await readFile(new URL(`assets/animations/${name}.webm`, root));
-  if (bytes.readUInt32BE(0) !== 0x1a45dfa3 || bytes.length > maximum)
+  if (bytes.length < 4 || bytes.readUInt32BE(0) !== 0x1a45dfa3 || bytes.length > maximum)
     throw new Error(`Invalid or oversized WebM: ${name}`);
-  return 'data:video/webm;base64,' + bytes.toString('base64');
+  if (inline) return 'data:video/webm;base64,' + bytes.toString('base64');
+  const sha256 = createHash('sha256').update(bytes).digest('hex');
+  const key = `${sha256}/${name}.webm`;
+  mediaAssets[key] = { file: `assets/animations/${name}.webm`, size: bytes.length, sha256 };
+  return `${mediaRoute.slice(1)}/${key}`;
 }
 const [probe, greet, celebrate, ornateIdle, ornateGreet, ornateDrink] = await Promise.all([
-  clip('alpha-probe', 10000),
+  clip('alpha-probe', 10000, true),
   clip('whale-greet', 2000000),
   clip('whale-drink', 2000000),
   clip('ornate-idle', 2000000),
@@ -70,15 +81,27 @@ const result =
   entry
     .replace(marker, pure)
     .replace(spriteMarker, () => `const PET_SPRITES = ${JSON.stringify(sprites)};`)
-    .replace(clipMarker, () => `const PET_CLIPS = ${JSON.stringify(clips)};`);
-const output = new URL('client.js', root);
-
-if (process.argv.includes('--check')) {
-  if ((await readFile(output, 'utf8')) !== result) {
-    throw new Error('Client artifact is stale. Run npm run build and commit client.js.');
-  }
-  console.log('Client artifact matches tested source');
-} else {
-  await writeFile(output, result);
-  console.log('Built client.js from one calculation source');
+    .replace(
+      clipMarker,
+      () =>
+        `const PET_CLIPS = ${JSON.stringify(clips)};\nPET_CLIPS.models = petClipUrls(PET_CLIPS.models, document.baseURI);`,
+    );
+const manifest =
+  banner +
+  `export const MEDIA_ROUTE = ${JSON.stringify(mediaRoute)};\nexport const MEDIA_ASSETS = Object.freeze(${JSON.stringify(Object.fromEntries(Object.entries(mediaAssets).sort()), null, 2)});\n`;
+const outputs = [
+  ['client.js', result],
+  ['media-manifest.js', manifest],
+];
+for (const [name, contents] of outputs) {
+  const output = new URL(name, root);
+  if (process.argv.includes('--check')) {
+    if ((await readFile(output, 'utf8')) !== contents)
+      throw new Error(`Generated artifact is stale: ${name}. Run npm run build.`);
+  } else await writeFile(output, contents);
 }
+console.log(
+  process.argv.includes('--check')
+    ? 'Client and media manifest match tested source'
+    : 'Built client and content-addressed media manifest',
+);

package/tools/check-package.mjs

@@ -16,6 +16,10 @@ assert.ok(pkg.engines?.dsh, 'Declare the supported Harness versions');
 assert.equal(pkg.dsh?.bundle?.patch, './cordis.patch.yml');
 assert.equal(pkg.dsh?.client?.platform, 'web');
 assert.match(await read('LICENSE'), /^MIT License/);
+assert.ok(
+  Buffer.byteLength(await read('client.js')) < 2000000,
+  'Keep the initial client below 2MB; character movies must remain on-demand resources',
+);
 
 // This check covers this project's patch; Harness composition remains the
 // authoritative check that the bundle can be installed in a real profile.
@@ -67,15 +71,19 @@ assert.equal(packed.version, pkg.version);
 for (const path of [
   'package.json',
   'index.js',
+  'media-server.js',
+  'media-manifest.js',
   'client.js',
   'companion.js',
   'pet-view.js',
   'pet-motion.js',
   'pet-video.js',
+  'pet-reminder.js',
   'pet-interactions.js',
   'pet-surfaces.js',
   'hydration.js',
   'hydration-store.js',
+  'countdown.js',
   'cordis.patch.yml',
   'icon.svg',
   'assets/characters/whale-dress.webp',

package/ui-utils.js

@@ -7,6 +7,50 @@ export function formatDuration(seconds) {
     .join(':');
 }
 
+export function classicClockPresentation({ hasSession, loaded, configured, failed, state, now }) {
+  if (!hasSession)
+    return { phase: 'waiting', title: 'classicNoSession', hint: 'noSession', seconds: null };
+  if (failed)
+    return { phase: 'error', title: 'classicUnavailable', hint: 'classicRetryHint', seconds: null };
+  if (!loaded)
+    return { phase: 'loading', title: 'classicLoading', hint: 'classicLoadingHint', seconds: null };
+  if (!configured) return { phase: 'setup', title: 'setup', hint: 'setupHint', seconds: null };
+  switch (state?.status) {
+    case 'before':
+      return {
+        phase: 'before',
+        title: 'before',
+        hint: 'classicBeforeHint',
+        seconds: state.startRemaining,
+      };
+    case 'working':
+      return {
+        phase: 'working',
+        title: 'working',
+        hint: 'classicWorkingHint',
+        seconds: state.remaining,
+      };
+    case 'lunch':
+      return {
+        phase: 'lunch',
+        title: 'classicLunchRemaining',
+        hint: 'classicLunchHint',
+        seconds: Math.max(0, Math.ceil((state.breakEnd - now) / 1000)),
+      };
+    case 'done':
+      return { phase: 'done', title: 'done', hint: 'classicDoneHint', seconds: null };
+    case 'rest':
+      return { phase: 'rest', title: 'rest', hint: 'classicRestHint', seconds: null };
+    default:
+      return {
+        phase: 'error',
+        title: 'classicUnavailable',
+        hint: 'classicRetryHint',
+        seconds: null,
+      };
+  }
+}
+
 export function clampPosition(position, viewport, size) {
   const width = Math.max(0, viewport.width),
     height = Math.max(0, viewport.height);