@hyperframes/studio 0.8.122 → 0.8.124

package/src/player/components/timelineClipDragPreview.ts

@@ -241,7 +241,7 @@ export function computeDragPreview(
     drag.element.key ?? drag.element.id,
     !isMusicTrack(drag.element),
   );
-  const snap = snapMoveToTargets(
+  const snapped = snapMoveToTargets(
     nextMove.start,
     drag.element.duration,
     targets,
@@ -251,6 +251,11 @@ export function computeDragPreview(
     dragMaxStart + drag.element.duration,
     ctx.gridStep,
   );
+  // A snap the saved clip would miss jumps on release, so the clip stays where the pointer put it.
+  const target = snapTarget(snapped);
+  const missed =
+    target !== null && !guideIfSaved(drag.element, { start: snapped.start }, target, pps);
+  const snap = missed ? { start: nextMove.start, snapTime: null, snapType: null } : snapped;
   // A group moves rigidly: the grabbed clip stops where any mover would cross its host's start.
   const group = resolveGroupDrag(drag, ctx);
   const dragKey = drag.element.key ?? drag.element.id;
@@ -268,11 +273,7 @@ export function computeDragPreview(
     return { ...drag, started: true };
   }
   const { track: previewTrack, insertRow } = placement;
-  const target =
-    placement.start === snap.start && snap.snapTime !== null && snap.snapType !== null
-      ? { time: snap.snapTime, type: snap.snapType }
-      : null;
-  const guide = guideIfSaved(drag.element, { start: snap.start }, target, pps);
+  const guide = placement.start === snap.start ? snapTarget(snap) : null;
   return {
     ...drag,
     started: true,
@@ -289,6 +290,9 @@ export function computeDragPreview(
   };
 }
 
+const snapTarget = (s: { snapTime: number | null; snapType: TimelineSnapType | null }) =>
+  s.snapTime !== null && s.snapType !== null ? { time: s.snapTime, type: s.snapType } : null;
+
 /** A snap's guide, kept only when the clip's edge as its file will save it is within a pixel of it. */
 export function guideIfSaved(
   element: TimelineElement,
@@ -392,37 +396,38 @@ export function computeResizePreview(
   );
   const gridStep = ctx.gridStep ?? 0;
   let snap: TimelineSnapTarget | null = null;
-  if (trimTargets.length > 0 || gridStep > 0) {
-    const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
-    if (resize.edge === "end") {
-      const edgeTime = nextResize.start + nextResize.duration;
-      const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs, gridStep);
-      // Stay within [start+minDuration, maxEnd] so the snap can't create a
-      // degenerate clip or run past the source/composition limit.
-      const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
-      if (
-        target &&
-        snapped <= maxEnd + 1e-6 &&
-        snappedDuration >= resolveTimelineMinDuration() - 1e-6
-      ) {
-        // An edge already on the target still owns the guide; only move it when off.
-        if (snapped !== edgeTime) nextResize = { ...nextResize, duration: snappedDuration };
-        snap = guideIfSaved(resize.element, nextResize, target, pps);
-      }
-    } else {
-      const { time: snapped, target } = snapTimelineTime(
-        nextResize.start,
-        trimTargets,
-        snapSecs,
-        gridStep,
-      );
-      const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
-      const delta = snapped - nextResize.start;
-      const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
-      if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
-        if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
-        snap = guideIfSaved(resize.element, nextResize, target, pps);
-      }
+  const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
+  if (resize.edge === "end") {
+    const edgeTime = nextResize.start + nextResize.duration;
+    const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs, gridStep);
+    // Stay within [start+minDuration, maxEnd] so the snap can't create a
+    // degenerate clip or run past the source/composition limit.
+    const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
+    if (
+      target &&
+      snapped <= maxEnd + 1e-6 &&
+      snappedDuration >= resolveTimelineMinDuration() - 1e-6
+    ) {
+      const onTarget =
+        snapped === edgeTime ? nextResize : { ...nextResize, duration: snappedDuration };
+      snap = guideIfSaved(resize.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
+    }
+  } else {
+    const { time: snapped, target } = snapTimelineTime(
+      nextResize.start,
+      trimTargets,
+      snapSecs,
+      gridStep,
+    );
+    const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
+    const delta = snapped - nextResize.start;
+    const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
+    if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
+      const onTarget =
+        snapped === nextResize.start ? nextResize : applyClipStartTrimDelta(clip, delta);
+      snap = guideIfSaved(resize.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
     }
   }
 

package/src/player/hooks/useTimelinePlayer.seek.test.ts

@@ -406,6 +406,17 @@ describe("useTimelinePlayer preview frame (a trim's dragged edge)", () => {
     unmountWithAct(root);
   });
 
+  it("reads the playing transport's own time, not the playhead's, under a preview frame", () => {
+    const { api, root, adapter } = renderAttachedTimelinePlayer();
+    seekWithAct(api, 2);
+    setStorePlaying();
+    previewFrame(5);
+    adapter.seek(7);
+    act(() => api.pause());
+    expect(usePlayerStore.getState().currentTime).toBe(7);
+    unmountWithAct(root);
+  });
+
   it("leaves live playback alone", () => {
     const { api, root, adapter } = renderAttachedTimelinePlayer();
     seekWithAct(api, 2);

package/src/styles/components.css

@@ -308,6 +308,22 @@
   }
 }
 
+/* A video's sound strip is too short for the peak readout: only the mark stays, on a chip clear of the clip's
+   rounded corner and above the waveform canvas layer (z 10), below the fade handles (z 30). */
+.audible-video-wave [data-peak-text] {
+  display: none;
+}
+
+.audible-video-wave [data-peak-badge] {
+  top: 50%;
+  right: var(--timeline-clip-radius);
+  translate: 0 -50%;
+  padding: 1px 3px;
+  border-radius: 3px;
+  background: var(--timeline-clip-chip-audio-bg);
+  z-index: 20;
+}
+
 .timeline-clip.is-audio.is-hovered {
   background-color: var(--timeline-clip-audio-bg-hover);
 }
@@ -350,7 +366,6 @@
   position: absolute;
   top: 5px;
   left: 6px;
-  z-index: 6;
   width: fit-content;
   max-width: calc(100% - 22px);
   overflow: hidden;
@@ -411,6 +426,7 @@
 .timeline-clip.is-audio .timeline-clip__label {
   top: 11px;
   left: 9px;
+  z-index: 11;
   background: var(--timeline-clip-chip-audio-bg);
 }
 
@@ -935,3 +951,68 @@
     transform: scaleY(1);
   }
 }
+
+/* Framey on the header's "Edit with Framey" (OpenInDesktopButton.tsx): a pulse as the page opens, a wiggle
+ * on hover, a flight towards the app while it opens. The eye follows the pointer from script. */
+@keyframes hf-framey-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-14deg);
+  }
+  60% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes hf-framey-fly {
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(48px, -28px) rotate(25deg) scale(0.6);
+    opacity: 0;
+  }
+}
+
+@keyframes hf-framey-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 45%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
+.hf-framey-trigger {
+  animation: hf-framey-pulse 1.6s ease-out 3;
+}
+
+.hf-framey {
+  transform-origin: 30% 30%;
+}
+
+.hf-framey-eye {
+  transition: transform 80ms linear;
+}
+
+.hf-framey-trigger:hover .hf-framey {
+  animation: hf-framey-wiggle 0.5s ease-in-out;
+}
+
+.hf-framey-trigger[data-opening] .hf-framey {
+  animation: hf-framey-fly 0.9s ease-in forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-framey-trigger,
+  .hf-framey-trigger:hover .hf-framey,
+  .hf-framey-trigger[data-opening] .hf-framey {
+    animation: none;
+  }
+  .hf-framey-eye {
+    transition: none;
+  }
+}

package/src/styles/theme.css

@@ -436,6 +436,9 @@
   --color-violet-400: oklch(70.2% 0.183 293.541);
   --color-violet-500: oklch(60.6% 0.25 292.717);
   --color-white: #fff;
+  /* Framey, the desktop app's cursor mascot (hyperframes-internal packages/nib): the same in both themes. */
+  --color-framey: #3ce6ac;
+  --color-framey-ink: #16121a;
 }
 
 /* The colour-scheme picks each token's light or dark half: dark unless the document element