dsh-offwork 1.1.1 → 1.2.2

package/pet-video.js

@@ -1,13 +1,47 @@
-// Independent transparent-video playback. Presentation only; never records an action.
+// Independent media presentation; never writes settings or hydration records.
 const PET_VIDEO_SUPPORT = new WeakMap();
 
+export function petClipUrls(models, baseURI) {
+  try {
+    const base = new URL(baseURI);
+    if (!['http:', 'https:'].includes(base.protocol) || base.username || base.password) return {};
+    const prefix = new URL('offwork-clock/media/', base);
+    return Object.fromEntries(
+      Object.entries(models).map(([model, actions]) => [
+        model,
+        Object.fromEntries(
+          Object.entries(actions).flatMap(([action, path]) => {
+            if (typeof path !== 'string' || !path.startsWith('offwork-clock/media/')) return [];
+            const url = new URL(path, base);
+            return url.origin === base.origin &&
+              url.pathname.startsWith(prefix.pathname) &&
+              !url.search &&
+              !url.hash
+              ? [[action, url.href]]
+              : [];
+          }),
+        ),
+      ]),
+    );
+  } catch {
+    return {};
+  }
+}
+
 export function petVideoAlphaSupported(host, source) {
   if (PET_VIDEO_SUPPORT.has(host)) return PET_VIDEO_SUPPORT.get(host);
   const result = new Promise((resolve) => {
     const video = host.document.createElement('video');
-    let timer;
+    let timer,
+      frame,
+      delayed,
+      done = false;
     const finish = (supported) => {
+      if (done) return;
+      done = true;
       host.clearTimeout(timer);
+      host.clearTimeout(delayed);
+      if (frame !== undefined) video.cancelVideoFrameCallback?.(frame);
       video.onloadeddata = video.onerror = null;
       video.pause();
       video.removeAttribute('src');
@@ -18,145 +52,241 @@ export function petVideoAlphaSupported(host, source) {
     video.muted = true;
     video.playsInline = true;
     video.preload = 'auto';
-    video.onloadeddata = () => {
+    const inspect = (presented = false) => {
+      if (done) return true;
       try {
         const canvas = host.document.createElement('canvas');
         canvas.width = canvas.height = 16;
         const context = canvas.getContext('2d', { willReadFrequently: true });
         context.drawImage(video, 0, 0, 16, 16);
-        finish(
-          context.getImageData(1, 1, 1, 1).data[3] > 240 &&
-            context.getImageData(14, 14, 1, 1).data[3] < 8,
-        );
+        const solid = context.getImageData(1, 1, 1, 1).data[3];
+        const clear = context.getImageData(14, 14, 1, 1).data[3];
+        if (solid > 240 && clear < 8) {
+          finish(true);
+          return true;
+        }
+        if (presented && solid > 240 && clear > 240) {
+          finish(false);
+          return true;
+        }
       } catch {
-        finish(false);
+        /* A frame can be undecoded when loadeddata fires. */
       }
+      return false;
     };
-    video.onerror = () => finish(false);
-    timer = host.setTimeout(() => finish(false), 3000);
+    video.onloadeddata = () => {
+      if (inspect()) return;
+      if (video.requestVideoFrameCallback)
+        frame = video.requestVideoFrameCallback(() => inspect(true));
+      const poll = () => {
+        if (!inspect(true)) delayed = host.setTimeout(poll, 80);
+      };
+      delayed = host.setTimeout(poll, 80);
+      try {
+        Promise.resolve(video.play()).catch(() => {
+          if (!inspect()) finish(null);
+        });
+      } catch {
+        if (!inspect()) finish(null);
+      }
+    };
+    video.onerror = () => finish(null);
+    timer = host.setTimeout(() => {
+      if (!inspect()) finish(null);
+    }, 5000);
     video.src = source;
     video.load();
   });
   PET_VIDEO_SUPPORT.set(host, result);
+  result.then((supported) => {
+    if (supported === null && PET_VIDEO_SUPPORT.get(host) === result)
+      PET_VIDEO_SUPPORT.delete(host);
+  });
   return result;
 }
 
-export function createPetVideoMotion(element, host, base, clips, probeSource) {
+export function createPetVideoMotion(element, host, base, clips, probeSource, options = {}) {
   const layer = element.querySelector('.owc-pet-video-layer');
+  const poster = element.querySelector('.owc-pet-video-poster');
   if (!layer || !clips) return base;
   const document = host.document;
   const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
-  const capability = petVideoAlphaSupported(host, probeSource);
-  const failed = new Set();
-  const retired = new Map();
+  const autoIdle = options.autoIdle !== false;
+  const useFallback = options.fallback !== false;
+  const failed = new Set(),
+    retired = new Map();
   let enabled = false,
     resting = false,
     dragging = false,
-    unsupported = false,
+    unsupported = false;
+  let destroyed = false,
     idleTimer = null,
-    destroyed = false,
-    current = null;
+    current = null,
+    displayed = null,
+    lastState = '';
   const allowed = () => enabled && !destroyed && !document.hidden && !reduced?.matches;
+  const canIdle = () =>
+    autoIdle &&
+    allowed() &&
+    !resting &&
+    !dragging &&
+    !unsupported &&
+    Object.hasOwn(clips, 'idle') &&
+    !failed.has('idle');
+  function notify(phase, action = null) {
+    if (destroyed || lastState === phase + ':' + action) return;
+    lastState = phase + ':' + action;
+    options.onStateChange?.({ phase, action });
+  }
   function clearIdleTimer() {
     host.clearTimeout(idleTimer);
     idleTimer = null;
   }
   function startIdle() {
-    if (
-      allowed() &&
-      !resting &&
-      !dragging &&
-      !current &&
-      !unsupported &&
-      Object.hasOwn(clips, 'idle') &&
-      !failed.has('idle')
-    )
-      play('idle');
+    if (canIdle() && !current) play('idle');
   }
   function scheduleIdle(delay = 0) {
     clearIdleTimer();
-    if (!Object.hasOwn(clips, 'idle') || failed.has('idle') || unsupported || destroyed) return;
+    if (!canIdle()) return;
     idleTimer = host.setTimeout(() => {
       idleTimer = null;
       startIdle();
     }, delay);
   }
-  function dispose(video) {
+  function dispose(run) {
+    if (!run || run.disposed) return;
+    run.disposed = true;
+    host.clearTimeout(run.timer);
+    const video = run.video;
+    if (!video) return;
     video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
     video.pause();
     video.removeAttribute('src');
     video.load();
     video.remove();
   }
-  function stop(fade = false) {
-    clearIdleTimer();
-    const run = current;
-    if (!run) return;
-    current = null;
+  function flushRetired() {
+    for (const [run, timer] of retired) {
+      host.clearTimeout(timer);
+      dispose(run);
+    }
+    retired.clear();
+  }
+  function retire(run, fade) {
+    if (!run?.video || !fade || !allowed()) return dispose(run);
     host.clearTimeout(run.timer);
+    run.video.onplaying =
+      run.video.onended =
+      run.video.onerror =
+      run.video.onwaiting =
+      run.video.onstalled =
+        null;
+    run.video.pause();
+    run.video.style.opacity = '0';
+    const timer = host.setTimeout(() => {
+      retired.delete(run);
+      dispose(run);
+    }, 150);
+    retired.set(run, timer);
+  }
+  function settleVisibleFrame() {
+    if (!displayed?.video) {
+      if (poster?.style) {
+        poster.style.transition = 'none';
+        poster.style.opacity = '1';
+        poster.getBoundingClientRect?.();
+        poster.style.opacity = '';
+        poster.style.transition = '';
+      }
+      return;
+    }
+    displayed.video.style.transition = 'none';
+    displayed.video.style.opacity = '1';
+    if (poster?.style) {
+      poster.style.transition = 'none';
+      poster.style.opacity = '0';
+    }
+    displayed.video.getBoundingClientRect?.();
+    displayed.video.style.transition = '';
+    if (poster?.style) {
+      poster.style.opacity = '';
+      poster.style.transition = '';
+    }
+  }
+  function stopMedia(fade = false) {
+    if (!fade && poster?.style) poster.style.transition = 'none';
+    clearIdleTimer();
+    flushRetired();
+    const pending = current,
+      visible = displayed;
+    current = displayed = null;
     delete element.dataset.videoPlaying;
-    if (element.dataset.action === run.action) delete element.dataset.action;
-    if (!run.video) return;
-    const video = run.video;
-    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
-    video.pause();
-    video.style.opacity = '0';
-    if (fade && allowed()) {
-      const timer = host.setTimeout(() => {
-        retired.delete(video);
-        dispose(video);
-      }, 150);
-      retired.set(video, timer);
-    } else dispose(video);
+    delete element.dataset.videoLoading;
+    delete element.dataset.action;
+    if (pending && pending !== visible) dispose(pending);
+    retire(visible, fade);
+    if (!fade && poster?.style) {
+      poster.getBoundingClientRect?.();
+      poster.style.transition = '';
+    }
   }
   function fallback(run, broken = false) {
     if (current !== run) return;
     if (broken) failed.add(run.action);
-    stop();
-    if (allowed() && run.action !== 'idle') {
+    stopMedia();
+    notify(unsupported ? 'unsupported' : 'unavailable', run.action);
+    if (allowed() && run.action !== 'idle' && useFallback) {
       base.play(run.action);
       scheduleIdle(1400);
     }
   }
   function play(action) {
     if (!allowed() || dragging || element.dataset.action === 'drag') return false;
-    if (action === 'idle' && (resting || current || unsupported)) return false;
+    if (action === 'idle' && (resting || (current && !options.interruptible) || unsupported))
+      return false;
     if (
       current &&
       (action === 'look' ||
         current.action === action ||
-        (current.action === 'celebrate' && action === 'greet'))
+        (!options.interruptible && current.action === 'celebrate' && action === 'greet'))
     )
       return false;
     if (!Object.hasOwn(clips, action) || failed.has(action) || unsupported) {
       if (action === 'idle') return false;
-      if (current?.action === 'idle') stop();
-      const played = base.play(action);
+      if (current?.action === 'idle') stopMedia();
+      const played = useFallback && base.play(action);
       if (played) scheduleIdle(1400);
-      return played;
+      if (!played) notify(unsupported ? 'unsupported' : 'unavailable', action);
+      return !!played;
     }
-    stop();
+    clearIdleTimer();
+    settleVisibleFrame();
+    flushRetired();
+    if (current && current !== displayed) dispose(current);
     base.release(true);
-    const run = { action, video: null, timer: null };
+    const run = { action, video: null, timer: null, disposed: false };
     current = run;
-    element.dataset.action = action;
+    element.dataset.action = displayed?.action || action;
+    element.dataset.videoLoading = action;
+    notify('loading', action);
     run.timer = host.setTimeout(() => fallback(run, true), 9000);
-    capability.then((supported) => {
+    petVideoAlphaSupported(host, probeSource).then((supported) => {
       if (current !== run || !allowed()) return;
-      if (!supported) {
-        unsupported = true;
+      if (supported !== true) {
+        unsupported = supported === false;
         return fallback(run);
       }
       const video = document.createElement('video');
       run.video = video;
-      video.muted = true;
-      video.defaultMuted = true;
+      video.muted = video.defaultMuted = true;
       video.playsInline = true;
       video.loop = action === 'idle';
       video.disablePictureInPicture = true;
       video.preload = 'auto';
+      video.style.opacity = '0';
       video.setAttribute('aria-hidden', 'true');
       video.setAttribute('playsinline', '');
+      video.setAttribute('tabindex', '-1');
       video.onplaying = () => {
         if (current !== run || !allowed()) return;
         if (!Number.isFinite(video.duration) || video.duration <= 0 || video.duration > 15)
@@ -166,7 +296,14 @@ export function createPetVideoMotion(element, host, base, clips, probeSource) {
           action === 'idle'
             ? null
             : host.setTimeout(() => fallback(run, true), video.duration * 1000 + 2000);
+        const previous = displayed;
+        displayed = run;
+        video.style.opacity = '1';
+        element.dataset.action = action;
         element.dataset.videoPlaying = 'true';
+        delete element.dataset.videoLoading;
+        if (previous !== run) retire(previous, true);
+        notify('playing', action);
       };
       video.onwaiting = video.onstalled = () => {
         if (current !== run) return;
@@ -174,9 +311,15 @@ export function createPetVideoMotion(element, host, base, clips, probeSource) {
         run.timer = host.setTimeout(() => fallback(run, true), 4000);
       };
       video.onended = () => {
-        if (current === run) {
-          stop(true);
+        if (current !== run) return;
+        host.clearTimeout(run.timer);
+        if (canIdle()) {
+          current = null;
+          if (displayed !== run) dispose(run);
           scheduleIdle();
+        } else {
+          stopMedia(true);
+          notify('idle');
         }
       };
       video.onerror = () => fallback(run, true);
@@ -190,6 +333,11 @@ export function createPetVideoMotion(element, host, base, clips, probeSource) {
     });
     return true;
   }
+  function stop() {
+    stopMedia();
+    base.release(true);
+    notify('idle');
+  }
   const visibility = () => {
     if (!allowed()) stop();
     else scheduleIdle();
@@ -198,16 +346,22 @@ export function createPetVideoMotion(element, host, base, clips, probeSource) {
   reduced?.addEventListener?.('change', visibility);
   return {
     play,
+    stop,
+    retry(action) {
+      failed.delete(action);
+      return play(action);
+    },
     configure(next) {
-      if (!next.enabled || (next.resting && !resting)) stop();
+      if (!next.enabled || (next.resting && !resting)) stopMedia();
       enabled = next.enabled;
       resting = next.resting;
       base.configure(next);
+      if (!enabled) notify('idle');
       startIdle();
     },
     drag(direction) {
       dragging = true;
-      stop();
+      stopMedia();
       base.drag(direction);
     },
     release(cancelled) {
@@ -217,12 +371,7 @@ export function createPetVideoMotion(element, host, base, clips, probeSource) {
     },
     destroy() {
       destroyed = true;
-      stop();
-      for (const [video, timer] of retired) {
-        host.clearTimeout(timer);
-        dispose(video);
-      }
-      retired.clear();
+      stopMedia();
       document.removeEventListener('visibilitychange', visibility);
       reduced?.removeEventListener?.('change', visibility);
       base.destroy();

package/pet-view.js

@@ -33,6 +33,8 @@ export const PET_MODELS = Object.freeze({
   'xiaoxie-original': { ...PET_MODEL, widthScale: 1, heightScale: 1.1, label: 'petDroplet' },
 });
 export function petModel(id) {
+  if (id === 'custom-image')
+    return { id, renderer: 'image', widthScale: 1.3125, heightScale: 1.75, label: 'petCharacter' };
   return Object.hasOwn(PET_MODELS, id) ? PET_MODELS[id] : PET_MODELS['whale-dress'];
 }
 
@@ -42,6 +44,8 @@ export function petLayout(
   size = 132,
   contentHeight = 420,
   modelId = 'xiaoxie-original',
+  footerHeight = 30,
+  footerWidth = 148,
 ) {
   const model = petModel(modelId);
   const originX = viewport.left ?? 0,
@@ -55,14 +59,14 @@ export function petLayout(
     Math.min(
       size,
       Math.max(1, (width - edge * 2) / model.widthScale),
-      Math.max(1, Math.floor((height - edge * 2 - 30) / model.heightScale)),
+      Math.max(1, Math.floor((height - edge * 2 - footerHeight) / model.heightScale)),
     ),
   );
   const petWidth = Math.min(
     Math.max(1, width - edge * 2),
-    Math.max(148, artworkSize * model.widthScale),
+    Math.max(footerWidth, artworkSize * model.widthScale),
   );
-  const petHeight = Math.ceil(artworkSize * model.heightScale) + 30;
+  const petHeight = Math.ceil(artworkSize * model.heightScale) + footerHeight;
   const bound = (n, max) => Math.max(Math.min(edge, max), Math.min(n, max));
   const x = bound(
     Number.isFinite(position?.x) ? position.x - originX : width - petWidth - 32,
@@ -253,6 +257,10 @@ export function petArtwork(
 export const PET_MESSAGES = {
   zh: {
     petGreet: '与角色互动',
+    petNeedsSession: '等待会话',
+    petNeedsSetup: '请配置作息',
+    petLoadFailed: '读取失败',
+    petRetryHint: '右键菜单可重新读取设置',
     petCharacter: '角色形象',
     petWhaleActions: '鲸蓝少女 · 长裙动态',
     petWhaleOrnateActions: '鲸蓝少女 · 短裙动态',
@@ -266,9 +274,29 @@ export const PET_MESSAGES = {
     petHint: '左键互动 · 右键菜单 · 拖动移动',
     petMode: '宠物模式',
     petClock: '下班倒计时',
+    petPreviewActions: '动作试播',
+    petPreviewIdle: '待机',
+    petPreviewGreet: '挥手',
+    petPreviewDrink: '喝茶',
+    petPreviewStop: '停止',
+    petTryIdle: '试播待机',
+    petTryGreet: '试播挥手',
+    petTryDrink: '试播喝茶',
+    petStopPreview: '停止试播',
+    petPreviewHint: '仅预览，不记喝水次数，也不更换页面角色。',
+    petPreviewLoading: '正在准备动作…',
+    petPreviewPlaying: '正在试播',
+    petPreviewUnsupported: '当前浏览器不支持透明动作视频，已显示静态预览。',
+    petPreviewUnavailable: '动作暂时无法播放，已恢复静态预览。可以重试。',
+    petPreviewEnable: '勾选“角色动作反馈”后可试播；应用后才保存。',
+    petPreviewReduced: '系统已开启减少动态效果，当前显示静态预览。',
   },
   en: {
     petGreet: 'Interact with character',
+    petNeedsSession: 'Open a session',
+    petNeedsSetup: 'Set your schedule',
+    petLoadFailed: 'Settings unavailable',
+    petRetryHint: 'Retry loading settings from the context menu',
     petCharacter: 'Character',
     petWhaleActions: 'Blue whale · Animated long dress',
     petWhaleOrnateActions: 'Blue whale · Animated short dress',
@@ -282,6 +310,23 @@ export const PET_MESSAGES = {
     petHint: 'Click to interact · right-click for menu · drag to move',
     petMode: 'Pet mode',
     petClock: 'Shift countdown',
+    petPreviewActions: 'Preview actions',
+    petPreviewIdle: 'Idle',
+    petPreviewGreet: 'Wave',
+    petPreviewDrink: 'Drink',
+    petPreviewStop: 'Stop',
+    petTryIdle: 'Preview idle',
+    petTryGreet: 'Preview wave',
+    petTryDrink: 'Preview drinking',
+    petStopPreview: 'Stop preview',
+    petPreviewHint: 'Preview only: no drinking record or change to the page character.',
+    petPreviewLoading: 'Preparing action…',
+    petPreviewPlaying: 'Previewing',
+    petPreviewUnsupported:
+      'This browser cannot show transparent action videos. Showing a static preview.',
+    petPreviewUnavailable: 'Action unavailable. Static preview restored; you can retry.',
+    petPreviewEnable: 'Enable character reactions to preview. Apply to save the choice.',
+    petPreviewReduced: 'Reduced motion is enabled. Showing a static preview.',
   },
 };
 
@@ -291,8 +336,9 @@ export const PET_STYLE = `
 .owc-v2 button.owc-pet-handle{padding:0;background:none!important;border-radius:50%;min-height:0;display:block;cursor:grab;touch-action:none;line-height:0}
 .owc-v2 button.owc-pet-handle:active{cursor:grabbing}
 .owc-pet-art{overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 5px #32557418)}
-.owc-pet-video-art{display:block;position:relative}
+.owc-pet-video-art{display:block;position:relative;isolation:isolate}
 .owc-pet-video-poster,.owc-pet-video-layer,.owc-pet-video-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
+.owc-pet-video-poster,.owc-pet-video-layer video{mix-blend-mode:plus-lighter}
 .owc-pet-video-poster{opacity:1;transition:opacity .12s linear}
 .owc-pet-video-layer video{opacity:0;transition:opacity .12s linear}
 .owc-pet-video-art[data-video-playing=true] .owc-pet-video-poster{opacity:0}
@@ -309,6 +355,27 @@ export const PET_STYLE = `
 .owc-v2 .owc-pet-clock{display:flex;align-items:center;color:var(--owc-text);line-height:1.5;cursor:default;padding:4px 10px;min-height:26px;gap:5px;white-space:nowrap;border-radius:999px;font-size:11px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 25%,transparent);box-shadow:0 3px 12px #142e4812;font-variant-numeric:tabular-nums;max-width:100%;box-sizing:border-box;overflow:hidden}
 .owc-pet-clock-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .owc-pet-clock strong{flex:none}
+.owc-v2 .owc-pet-timers{width:196px;max-width:100%;margin-top:4px;box-sizing:border-box;border:1px solid var(--owc-border);border-radius:13px;background:var(--owc-surface);box-shadow:var(--owc-shadow);overflow:hidden;font-variant-numeric:tabular-nums}
+.owc-v2 .owc-pet-timers .owc-pet-clock{width:100%;height:34px;min-height:0;padding:5px 10px;gap:6px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;color:var(--owc-muted)}
+.owc-pet-timers .owc-pet-clock svg{flex-shrink:0}
+.owc-pet-timers .owc-pet-clock strong{margin-left:auto;font-size:16px;line-height:1;color:var(--owc-text);letter-spacing:.2px}
+.owc-pet-timer-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--owc-border)}
+.owc-v2 .owc-pet-timer-row{display:flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;min-width:0;height:28px;padding:3px 6px;font-size:11px;white-space:nowrap;color:var(--owc-muted)}
+.owc-pet-timer-row+.owc-pet-timer-row{border-left:1px solid var(--owc-border)}
+.owc-pet-timer-label{display:flex;align-items:center;flex-shrink:0}
+.owc-pet-timer-label svg{flex-shrink:0}
+.owc-pet-timer-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:550;color:var(--owc-text)}
+.owc-timer-pause{font-size:9px;margin-right:3px;color:var(--owc-muted)}
+.owc-v2 .owc-pet-timer-row[data-countdown-due=true]{background:color-mix(in srgb,var(--owc-accent) 8%,transparent);color:color-mix(in srgb,var(--owc-accent) 55%,var(--owc-text))}
+.owc-pet-timer-row[data-countdown-due=true] strong{color:inherit}
+.owc-v2 [data-countdown-due=true]{color:var(--owc-accent);border-color:var(--owc-accent)}
+.owc-countdown-card{padding:16px;display:flex;flex-direction:column;gap:14px}
+.owc-countdown-value{font-size:32px;line-height:1.3;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
+.owc-countdown-actions{display:flex;flex-wrap:wrap;gap:8px}
+.owc-countdown-actions button{flex:1;min-width:110px;min-height:40px}
+.owc-countdown-card label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
+.owc-v2 .owc-countdown-card select{flex:0 0 120px;width:120px;max-width:120px}
+.owc-countdown-card p{margin:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
 .owc-pet-panel{position:fixed;border-radius:20px;cursor:default;touch-action:manipulation;max-width:calc(100vw - 24px)}
 .owc-pet-panel>.owc-content{max-height:inherit}
 .owc-pet-panel .owc-glass{opacity:max(var(--owc-alpha),.94)}