@hyperframes/core 0.8.193 → 0.8.195

package/dist/runtime/clipReveal.d.ts

@@ -0,0 +1,8 @@
+/** The visibility pass's mark on a timed clip it hides; the runtime's rules hide the clip's contents by it. */
+export declare const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+/** Shows a clip the visibility pass hid, contents included; returns a function that puts the mark back. */
+export declare function revealClip(el: HTMLElement, priority?: string): () => void;
+/** Called by shader-transitions builds on load: their revealers go through revealClip. */
+export declare function declareClipRevealAware(): void;
+/** A shader-transitions build is on the page whose revealers predate revealClip. */
+export declare function olderShaderBuildOnPage(): boolean;

package/dist/runtime/clipReveal.js

@@ -0,0 +1,23 @@
+/** The visibility pass's mark on a timed clip it hides; the runtime's rules hide the clip's contents by it. */
+export const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+/** Shows a clip the visibility pass hid, contents included; returns a function that puts the mark back. */
+export function revealClip(el, priority = "") {
+    el.style.setProperty("visibility", "visible", priority);
+    if (!el.hasAttribute(CLIP_HIDDEN_ATTR))
+        return () => { };
+    el.removeAttribute(CLIP_HIDDEN_ATTR);
+    return function putClipHiddenMarkBack() {
+        el.setAttribute(CLIP_HIDDEN_ATTR, "");
+    };
+}
+/** Called by shader-transitions builds on load: their revealers go through revealClip. */
+export function declareClipRevealAware() {
+    if (typeof window !== "undefined")
+        window.__hfClipRevealAware = true;
+}
+/** A shader-transitions build is on the page whose revealers predate revealClip. */
+export function olderShaderBuildOnPage() {
+    const win = window;
+    const shaderOnPage = win.HyperShader !== undefined || win.__hf?.transitions !== undefined;
+    return shaderOnPage && win.__hfClipRevealAware !== true;
+}

package/dist/runtime/media.js

@@ -233,6 +233,11 @@ const MIN_NATIVE_PLAYBACK_RATE = 1 / 16;
 // A playing video is steered back by rate, not seeked (a seek resets its decoder).
 // Its rate is written only when steering starts or stops: every write costs a frame.
 const VIDEO_STEER = 0.03;
+// A video that starts a cut late closes its lag over one clip at 3%; a bigger lag steers harder, in steps so the rate is written rarely.
+const VIDEO_STEER_STEPS = [
+    [0.3, 0.25],
+    [0.1, 0.1],
+];
 const VIDEO_STEER_RELEASE_SECONDS = 0.01;
 /** Direction (+1 fast, -1 slow) a video is being steered in; absent when it plays at its authored rate. */
 const videoSteering = new WeakMap();
@@ -246,7 +251,9 @@ function steeredVideoRate(el, offset, baseRate) {
         videoSteering.delete(el);
         return baseRate;
     }
-    return baseRate * (1 + direction * VIDEO_STEER);
+    const lag = Math.abs(offset);
+    const steer = VIDEO_STEER_STEPS.find(([from]) => lag > from)?.[1] ?? VIDEO_STEER;
+    return baseRate * (1 + direction * steer);
 }
 // fallow-ignore-next-line complexity
 export function syncRuntimeMedia(params) {

package/dist/runtime/preloadMedia.d.ts

@@ -1,6 +1,7 @@
 type PreloadableMedia = Pick<HTMLMediaElement, "id" | "tagName" | "getAttribute" | "preload" | "readyState" | "networkState" | "load">;
 export declare function isRenderFrameVideo(media: Pick<Element, "getAttribute" | "id" | "tagName">): boolean;
 export declare function preloadMedia(media: PreloadableMedia): void;
+export declare function prepareUpcomingMedia(media: HTMLMediaElement, isUpcoming: () => boolean): void;
 /** Ends a fetch in flight for good, which preload none alone does not. */
 export declare function stopMediaDownload(media: HTMLMediaElement): void;
 export declare function releaseMedia(media: HTMLMediaElement): void;

package/dist/runtime/preloadMedia.js

@@ -1,7 +1,8 @@
-import { parseStrictFiniteTimingNumber } from "./playbackRate.js";
+import { parseStrictFiniteTimingNumber, readMediaStart } from "./playbackRate.js";
 import { createRuntimeStartTimeResolver } from "./startResolver.js";
 import { readMediaRenderId } from "./renderFrameSibling.js";
 import { defersMedia } from "./timedClipHide.js";
+import { swallow } from "./diagnostics.js";
 export function isRenderFrameVideo(media) {
     const ids = window
         .__HF_RENDER_FRAME_VIDEO_IDS;
@@ -17,8 +18,49 @@ export function preloadMedia(media) {
     if (media.readyState < 3 && !videoAlreadyLoading)
         media.load();
 }
+const pendingPlaybackStart = new WeakMap();
+function cancelPlaybackStart(media) {
+    pendingPlaybackStart.get(media)?.();
+}
+export function prepareUpcomingMedia(media, isUpcoming) {
+    cancelPlaybackStart(media);
+    if (media.tagName !== "VIDEO" || isRenderFrameVideo(media))
+        return;
+    const prepare = () => {
+        if (!media.isConnected || !media.paused || media.seeking || !isUpcoming())
+            return;
+        const start = readMediaStart(media);
+        if (Math.abs(media.currentTime - start) <= 0.02)
+            return;
+        try {
+            media.currentTime = start;
+        }
+        catch (error) {
+            swallow("runtime.preload.playbackStart", error);
+        }
+    };
+    if (media.readyState > 0) {
+        prepare();
+        return;
+    }
+    const cancel = () => {
+        media.removeEventListener("loadedmetadata", loaded);
+        media.removeEventListener("error", cancel);
+        media.removeEventListener("abort", cancel);
+        pendingPlaybackStart.delete(media);
+    };
+    const loaded = () => {
+        cancel();
+        prepare();
+    };
+    pendingPlaybackStart.set(media, cancel);
+    media.addEventListener("loadedmetadata", loaded);
+    media.addEventListener("error", cancel);
+    media.addEventListener("abort", cancel);
+}
 /** Ends a fetch in flight for good, which preload none alone does not. */
 export function stopMediaDownload(media) {
+    cancelPlaybackStart(media);
     for (const source of media.querySelectorAll("source"))
         source.remove();
     media.removeAttribute("src");

package/dist/runtime/startResolver.js

@@ -14,7 +14,15 @@ export function createRuntimeStartTimeResolver(params) {
     const startCache = new WeakMap();
     const durationCache = new WeakMap();
     const visiting = new Set();
-    const findReferenceTarget = (refId) => {
+    const compositionScopeOf = (element) => (element.hasAttribute("data-composition-id") ? element.parentElement : element)?.closest("[data-composition-id]") ?? null;
+    const findReferenceTarget = (refId, from) => {
+        const scope = compositionScopeOf(from);
+        if (scope) {
+            for (const candidate of scope.querySelectorAll(`[id="${refId}"]`)) {
+                if (compositionScopeOf(candidate) === scope)
+                    return candidate;
+            }
+        }
         const byId = doc.getElementById(refId);
         if (byId)
             return byId;
@@ -82,7 +90,7 @@ export function createRuntimeStartTimeResolver(params) {
             // Negative when a host's in-point is past its start; the host's slot cuts that part.
             return resolveHostOffsetForElement(element, fallback) + Math.max(0, expression.value);
         }
-        const target = findReferenceTarget(expression.refId);
+        const target = findReferenceTarget(expression.refId, element);
         if (!target)
             return fallback;
         const targetStart = resolveStartForElementInternal(target, 0);

package/dist/runtime/timedClipHide.d.ts

@@ -1,5 +1,6 @@
-export declare const SKIPPED_CLIP = "[data-start]:not(video, audio, img, [data-hf-upcoming], [data-hf-autostamped])[style*=\"visibility: hidden\"]";
-export declare const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+import { CLIP_HIDDEN_ATTR } from "./clipReveal.js";
+export { CLIP_HIDDEN_ATTR };
+export declare const SKIPPED_CLIP = "[data-start]:not(video, audio, img, [data-hf-upcoming], [data-hf-autostamped])[data-hf-clip-hidden]";
 export declare function showHiddenClips(): () => void;
 export declare function defersMedia(): boolean;
 /** True in Studio's preview, where hidden clips' images are neither fetched nor decoded until due. */
@@ -7,3 +8,4 @@ export declare function skipsHiddenImages(): boolean;
 export declare function hideTimedClipsUntilFirstPass(): void;
 /** True when this call lifted the rule; callers then re-register what skipped hidden elements (grading). */
 export declare function revealTimedClipsAfterFirstPass(): boolean;
+export declare function keepInlineHideRulesForOlderShaders(): void;

package/dist/runtime/timedClipHide.js

@@ -1,3 +1,4 @@
+import { CLIP_HIDDEN_ATTR, olderShaderBuildOnPage, revealClip } from "./clipReveal.js";
 import { RUNTIME_STAMPED_ATTR, STUDIO_PREVIEW_CAPTURE_MODE, STUDIO_PREVIEW_MARK_META, STUDIO_PREVIEW_UPCOMING_ATTR, } from "../studioPreviewMark.js";
 // Hides timed non-media clips from script evaluation until the first visibility pass decides them;
 // before it, a paused page painted every clip at once. Media is left to init's media pass.
@@ -6,24 +7,28 @@ const HIDE_ATTR = "data-hf-first-pass-hide";
 const HIDE_UNTIL_FIRST_PASS = "[data-start]:not(video, audio, img) { visibility: hidden !important; }";
 const PREVIEW_HIDE_UNTIL_FIRST_PASS = 'img[loading="lazy"] { display: none !important; }';
 const SKIP_ATTR = "data-hf-skip-hidden-images";
-export const SKIPPED_CLIP = `[data-start]:not(video, audio, img, [${STUDIO_PREVIEW_UPCOMING_ATTR}], [${RUNTIME_STAMPED_ATTR}])[style*="visibility: hidden"]`;
-const SKIP_HIDDEN_IMAGES = `${SKIPPED_CLIP} img { display: none !important; }`;
+export { CLIP_HIDDEN_ATTR };
+const SKIPPABLE_CLIP = `[data-start]:not(video, audio, img, [${STUDIO_PREVIEW_UPCOMING_ATTR}], [${RUNTIME_STAMPED_ATTR}])`;
+export const SKIPPED_CLIP = `${SKIPPABLE_CLIP}[${CLIP_HIDDEN_ATTR}]`;
 const STUDIO_PREVIEW_MARK = `meta[name="${STUDIO_PREVIEW_MARK_META}"]`;
-export const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
 const CONTENTS_ATTR = "data-hf-hidden-clip-contents";
-const HIDDEN_CLIP = `[${CLIP_HIDDEN_ATTR}][style*="visibility: hidden"]`;
-const HIDE_HIDDEN_CLIP_CONTENTS = `${HIDDEN_CLIP} * { visibility: hidden !important; }`;
-const FILTER_OUTPUT_LAYERS = [HIDDEN_CLIP, `${HIDDEN_CLIP} *`]
-    .flatMap((layer) => [layer, `${layer}::before`, `${layer}::after`])
-    .join(", ");
-const HIDE_FILTER_OUTPUT = `${FILTER_OUTPUT_LAYERS} { filter: none !important; }`;
+const HIDDEN_CLIP_DOUBLED_FOR_WEIGHT = `[${CLIP_HIDDEN_ATTR}][${CLIP_HIDDEN_ATTR}]`;
+const HIDDEN_CLIP_BY_INLINE_STYLE = `[${CLIP_HIDDEN_ATTR}][style*="visibility: hidden"]`;
+const skipHiddenImages = (clip) => `${SKIPPABLE_CLIP}${clip} img { display: none !important; }`;
+const hideHiddenClipContents = (clip) => {
+    const filterOutputLayers = [clip, `${clip} *`]
+        .flatMap((layer) => [layer, `${layer}::before`, `${layer}::after`])
+        .join(", ");
+    return `${clip} * { visibility: hidden !important; } ${filterOutputLayers} { filter: none !important; }`;
+};
 export function showHiddenClips() {
     const hidden = Array.from(document.querySelectorAll(`[${CLIP_HIDDEN_ATTR}]`));
-    for (const el of hidden)
-        el.style.visibility = "visible";
+    const putMarksBack = hidden.map((el) => revealClip(el));
     return () => {
         for (const el of hidden)
             el.style.visibility = "hidden";
+        for (const putMarkBack of putMarksBack)
+            putMarkBack();
     };
 }
 function appendStyle(parent, attr, css) {
@@ -49,9 +54,9 @@ export function hideTimedClipsUntilFirstPass() {
     const preview = mark !== null;
     const capture = mark?.getAttribute("content") === STUDIO_PREVIEW_CAPTURE_MODE;
     if (preview && !capture && !skipsHiddenImages())
-        appendStyle(parent, SKIP_ATTR, SKIP_HIDDEN_IMAGES);
+        appendStyle(parent, SKIP_ATTR, skipHiddenImages(HIDDEN_CLIP_DOUBLED_FOR_WEIGHT));
     if (!document.querySelector(`style[${CONTENTS_ATTR}]`))
-        appendStyle(parent, CONTENTS_ATTR, `${HIDE_HIDDEN_CLIP_CONTENTS} ${HIDE_FILTER_OUTPUT}`);
+        appendStyle(parent, CONTENTS_ATTR, hideHiddenClipContents(HIDDEN_CLIP_DOUBLED_FOR_WEIGHT));
     const win = window;
     // A runtime that already initialised may never run another pass to lift a new rule.
     if (win.__hfFirstPassHidden || win.__hyperframeRuntimeBootstrapped)
@@ -72,3 +77,13 @@ export function revealTimedClipsAfterFirstPass() {
         style.remove();
     return true;
 }
+export function keepInlineHideRulesForOlderShaders() {
+    if (!olderShaderBuildOnPage())
+        return;
+    const skip = document.querySelector(`style[${SKIP_ATTR}]`);
+    if (skip)
+        skip.textContent = skipHiddenImages(HIDDEN_CLIP_BY_INLINE_STYLE);
+    const contents = document.querySelector(`style[${CONTENTS_ATTR}]`);
+    if (contents)
+        contents.textContent = hideHiddenClipContents(HIDDEN_CLIP_BY_INLINE_STYLE);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.8.193",
+  "version": "0.8.195",
   "description": "",
   "repository": {
     "type": "git",
@@ -52,6 +52,10 @@
       "import": "./dist/safePath.js",
       "types": "./dist/safePath.d.ts"
     },
+    "./browser-marker": {
+      "import": "./dist/browserMarker.js",
+      "types": "./dist/browserMarker.d.ts"
+    },
     "./atomic-file": {
       "import": "./dist/atomicFile.js",
       "types": "./dist/atomicFile.d.ts"
@@ -261,6 +265,10 @@
       "import": "./dist/runtime/clipWindow.js",
       "types": "./dist/runtime/clipWindow.d.ts"
     },
+    "./runtime/clip-reveal": {
+      "import": "./dist/runtime/clipReveal.js",
+      "types": "./dist/runtime/clipReveal.d.ts"
+    },
     "./runtime/stacking-context": {
       "import": "./dist/runtime/stackingContext.js",
       "types": "./dist/runtime/stackingContext.d.ts"
@@ -389,9 +397,9 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "wawoff2": "^2.0.1",
-    "@hyperframes/lint": "0.8.193",
-    "@hyperframes/studio-server": "0.8.193",
-    "@hyperframes/parsers": "0.8.193"
+    "@hyperframes/lint": "0.8.195",
+    "@hyperframes/parsers": "0.8.195",
+    "@hyperframes/studio-server": "0.8.195"
   },
   "devDependencies": {
     "@fontsource/archivo-black": "^5.2.8",