hyperframes 0.8.71 → 0.8.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +2 -2
- package/dist/fontLocalizeCli.js +2 -2
- package/dist/hyperframe-runtime.js +45 -45
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +45 -45
- package/dist/hyperframes-player.global.js +3 -3
- package/dist/studio/assets/{hyperframes-player-DuN39PN6.js → hyperframes-player-jTC1EDAI.js} +1 -1
- package/dist/studio/assets/{index-CUcdruHw.js → index-BqUGSWqN.js} +164 -164
- package/dist/studio/assets/{index-BoQsbDgf.js → index-DpVD1igA.js} +1 -1
- package/dist/studio/assets/{index-BmCEvqsr.js → index-HuYqM2Fi.js} +1 -1
- package/dist/studio/index.d.ts +2 -0
- package/dist/studio/index.html +1 -1
- package/dist/studio/index.js +81 -65
- package/dist/studio/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as P}from"./index-
|
|
1
|
+
import{g as P}from"./index-BqUGSWqN.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
|
package/dist/studio/index.d.ts
CHANGED
|
@@ -2124,6 +2124,8 @@ interface NLEPreviewProps {
|
|
|
2124
2124
|
onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
|
|
2125
2125
|
/** Reports the authored composition size measured from the loaded preview. */
|
|
2126
2126
|
onCompositionSizeChange?: (size: PreviewCompositionSize | null) => void;
|
|
2127
|
+
/** Draws the picture edge to edge in this box, without Studio's inset band. */
|
|
2128
|
+
fillBox?: boolean;
|
|
2127
2129
|
}
|
|
2128
2130
|
declare const NLEPreview: react.NamedExoticComponent<NLEPreviewProps>;
|
|
2129
2131
|
|
package/dist/studio/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
7
7
|
<title>HyperFrames Studio</title>
|
|
8
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-BqUGSWqN.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/assets/index-0w6iIlwZ.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
package/dist/studio/index.js
CHANGED
|
@@ -29672,7 +29672,7 @@ function getPreviewPlayerKey({
|
|
|
29672
29672
|
}
|
|
29673
29673
|
var ZOOM_HUD_TIMEOUT_MS = 1200;
|
|
29674
29674
|
var ZOOM_SETTLE_MS = 200;
|
|
29675
|
-
var PREVIEW_STAGE_INSET_PX =
|
|
29675
|
+
var PREVIEW_STAGE_INSET_PX = 8;
|
|
29676
29676
|
var SHADOW_IFRAME_STYLE = {
|
|
29677
29677
|
position: "absolute",
|
|
29678
29678
|
inset: 0,
|
|
@@ -29691,9 +29691,9 @@ function loadInitialZoom() {
|
|
|
29691
29691
|
panY: stored.panY
|
|
29692
29692
|
} : DEFAULT_PREVIEW_ZOOM;
|
|
29693
29693
|
}
|
|
29694
|
-
function resolvePreviewStageSize(viewportWidth, viewportHeight, compositionSize, portrait, gutterPx = 0) {
|
|
29695
|
-
const availableWidth = Math.max(0, viewportWidth -
|
|
29696
|
-
const availableHeight = Math.max(0, viewportHeight -
|
|
29694
|
+
function resolvePreviewStageSize(viewportWidth, viewportHeight, compositionSize, portrait, gutterPx = 0, insetPx = PREVIEW_STAGE_INSET_PX) {
|
|
29695
|
+
const availableWidth = Math.max(0, viewportWidth - 2 * (insetPx + gutterPx));
|
|
29696
|
+
const availableHeight = Math.max(0, viewportHeight - 2 * (insetPx + gutterPx));
|
|
29697
29697
|
const aspectRatio = compositionSize && compositionSize.width > 0 && compositionSize.height > 0 ? compositionSize.width / compositionSize.height : portrait ? 9 / 16 : 16 / 9;
|
|
29698
29698
|
if (availableWidth === 0 || availableHeight === 0) {
|
|
29699
29699
|
return { width: 0, height: 0 };
|
|
@@ -29724,7 +29724,8 @@ var NLEPreview = memo19(function NLEPreview2({
|
|
|
29724
29724
|
directUrl,
|
|
29725
29725
|
suppressLoadingOverlay,
|
|
29726
29726
|
onStageRef,
|
|
29727
|
-
onCompositionSizeChange
|
|
29727
|
+
onCompositionSizeChange,
|
|
29728
|
+
fillBox
|
|
29728
29729
|
}) {
|
|
29729
29730
|
const activeKey = getPreviewPlayerKey({ projectId, directUrl });
|
|
29730
29731
|
const viewportRef = useRef56(null);
|
|
@@ -29743,6 +29744,7 @@ var NLEPreview = memo19(function NLEPreview2({
|
|
|
29743
29744
|
const reportPreviewFirstFrame = usePreviewFirstFrameTelemetry(previewSlots);
|
|
29744
29745
|
const [compositionSize, setCompositionSize] = useState37(null);
|
|
29745
29746
|
const gutterPx = usePreviewGuidesStore((s) => s.rulerVisible ? RULER_GUTTER_PX : 0);
|
|
29747
|
+
const insetPx = fillBox ? 0 : PREVIEW_STAGE_INSET_PX;
|
|
29746
29748
|
const [stageSize, setStageSize] = useState37(() => resolvePreviewStageSize(0, 0, null, portrait));
|
|
29747
29749
|
const zoomRef = useRef56(loadInitialZoom());
|
|
29748
29750
|
const [settledZoom, setSettledZoom] = useState37(() => zoomRef.current);
|
|
@@ -29763,14 +29765,21 @@ var NLEPreview = memo19(function NLEPreview2({
|
|
|
29763
29765
|
const updateStageSize = () => {
|
|
29764
29766
|
const rect = viewport.getBoundingClientRect();
|
|
29765
29767
|
setStageSize(
|
|
29766
|
-
resolvePreviewStageSize(
|
|
29768
|
+
resolvePreviewStageSize(
|
|
29769
|
+
rect.width,
|
|
29770
|
+
rect.height,
|
|
29771
|
+
compositionSize,
|
|
29772
|
+
portrait,
|
|
29773
|
+
gutterPx,
|
|
29774
|
+
insetPx
|
|
29775
|
+
)
|
|
29767
29776
|
);
|
|
29768
29777
|
};
|
|
29769
29778
|
updateStageSize();
|
|
29770
29779
|
const observer = new ResizeObserver(updateStageSize);
|
|
29771
29780
|
observer.observe(viewport);
|
|
29772
29781
|
return () => observer.disconnect();
|
|
29773
|
-
}, [compositionSize, portrait, gutterPx]);
|
|
29782
|
+
}, [compositionSize, portrait, gutterPx, insetPx]);
|
|
29774
29783
|
const onCompositionSizeChangeRef = useRef56(onCompositionSizeChange);
|
|
29775
29784
|
onCompositionSizeChangeRef.current = onCompositionSizeChange;
|
|
29776
29785
|
const updateCompositionSizeFromPreview = useCallback45(() => {
|
|
@@ -29996,77 +30005,84 @@ var NLEPreview = memo19(function NLEPreview2({
|
|
|
29996
30005
|
"div",
|
|
29997
30006
|
{
|
|
29998
30007
|
ref: viewportRef,
|
|
29999
|
-
className: "relative flex-1 flex items-center justify-center
|
|
30008
|
+
className: "relative flex-1 flex items-center justify-center overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-[var(--studio-preview-bg,var(--color-neutral-950))]",
|
|
30000
30009
|
tabIndex: 0,
|
|
30001
30010
|
"aria-label": "Composition preview",
|
|
30002
30011
|
children: [
|
|
30003
|
-
/* @__PURE__ */ jsx86(
|
|
30012
|
+
/* @__PURE__ */ jsx86(
|
|
30004
30013
|
"div",
|
|
30005
30014
|
{
|
|
30006
|
-
|
|
30007
|
-
|
|
30008
|
-
|
|
30009
|
-
|
|
30010
|
-
|
|
30011
|
-
|
|
30012
|
-
|
|
30013
|
-
|
|
30014
|
-
|
|
30015
|
-
|
|
30016
|
-
|
|
30017
|
-
|
|
30018
|
-
|
|
30019
|
-
{
|
|
30020
|
-
projectId,
|
|
30021
|
-
onLoad: () => {
|
|
30022
|
-
},
|
|
30023
|
-
portrait,
|
|
30024
|
-
suppressLoadingOverlay: true,
|
|
30025
|
-
style: { position: "absolute", inset: 0, zIndex: 0 }
|
|
30015
|
+
className: "absolute flex items-center justify-center pointer-events-none",
|
|
30016
|
+
style: { inset: insetPx },
|
|
30017
|
+
children: /* @__PURE__ */ jsxs61(
|
|
30018
|
+
"div",
|
|
30019
|
+
{
|
|
30020
|
+
ref: stageRef,
|
|
30021
|
+
className: "relative shrink-0 pointer-events-auto",
|
|
30022
|
+
style: {
|
|
30023
|
+
width: `${stageSize.width}px`,
|
|
30024
|
+
height: `${stageSize.height}px`,
|
|
30025
|
+
transform: `translate3d(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px, 0) scale(${toDomPrecision(initial.zoomPercent / 100)})`,
|
|
30026
|
+
// resolvePreviewWheelZoom cursor math assumes center-center pivot
|
|
30027
|
+
transformOrigin: "center center"
|
|
30026
30028
|
},
|
|
30027
|
-
|
|
30028
|
-
|
|
30029
|
-
|
|
30030
|
-
(slot) => slot.role === "live" ? /* @__PURE__ */ jsx86(
|
|
30031
|
-
Player,
|
|
30032
|
-
{
|
|
30033
|
-
ref: setPreviewIframeRef,
|
|
30034
|
-
projectId: directUrl ? void 0 : projectId,
|
|
30035
|
-
directUrl,
|
|
30036
|
-
onLoad: () => {
|
|
30037
|
-
updateCompositionSizeFromPreview();
|
|
30038
|
-
onIframeLoad();
|
|
30039
|
-
applyInitialZoom();
|
|
30040
|
-
},
|
|
30041
|
-
onCompositionLoadingChange,
|
|
30042
|
-
onPainted: (details) => reportPreviewFirstFrame(slot, details),
|
|
30043
|
-
portrait,
|
|
30044
|
-
suppressLoadingOverlay,
|
|
30045
|
-
style: directUrl?.includes("/components/") ? { position: "absolute", inset: 0, zIndex: 1 } : void 0
|
|
30046
|
-
},
|
|
30047
|
-
`${activeKey}-${slot.gen}`
|
|
30048
|
-
) : (
|
|
30049
|
-
// Loads hidden behind the live slot until promoted.
|
|
30050
|
-
/* @__PURE__ */ jsx86(
|
|
30029
|
+
"data-testid": "preview-zoom-stage",
|
|
30030
|
+
children: [
|
|
30031
|
+
directUrl?.includes("/components/") && /* @__PURE__ */ jsx86(
|
|
30051
30032
|
Player,
|
|
30052
30033
|
{
|
|
30053
|
-
|
|
30054
|
-
|
|
30055
|
-
|
|
30056
|
-
onReadyToShowChange: (ready) => onShadowReadyChange(slot.gen, ready),
|
|
30057
|
-
onPainted: (details) => reportPreviewFirstFrame(slot, details),
|
|
30058
|
-
onPreviewError: (message) => onShadowError(slot.gen, message),
|
|
30034
|
+
projectId,
|
|
30035
|
+
onLoad: () => {
|
|
30036
|
+
},
|
|
30059
30037
|
portrait,
|
|
30060
30038
|
suppressLoadingOverlay: true,
|
|
30061
|
-
style:
|
|
30039
|
+
style: { position: "absolute", inset: 0, zIndex: 0 }
|
|
30062
30040
|
},
|
|
30063
|
-
|
|
30041
|
+
`backdrop-${projectId}`
|
|
30042
|
+
),
|
|
30043
|
+
previewSlots.map(
|
|
30044
|
+
(slot) => slot.role === "live" ? /* @__PURE__ */ jsx86(
|
|
30045
|
+
Player,
|
|
30046
|
+
{
|
|
30047
|
+
ref: setPreviewIframeRef,
|
|
30048
|
+
projectId: directUrl ? void 0 : projectId,
|
|
30049
|
+
directUrl,
|
|
30050
|
+
onLoad: () => {
|
|
30051
|
+
updateCompositionSizeFromPreview();
|
|
30052
|
+
onIframeLoad();
|
|
30053
|
+
applyInitialZoom();
|
|
30054
|
+
},
|
|
30055
|
+
onCompositionLoadingChange,
|
|
30056
|
+
onPainted: (details) => reportPreviewFirstFrame(slot, details),
|
|
30057
|
+
portrait,
|
|
30058
|
+
suppressLoadingOverlay,
|
|
30059
|
+
style: directUrl?.includes("/components/") ? { position: "absolute", inset: 0, zIndex: 1 } : void 0
|
|
30060
|
+
},
|
|
30061
|
+
`${activeKey}-${slot.gen}`
|
|
30062
|
+
) : (
|
|
30063
|
+
// Loads hidden behind the live slot until promoted.
|
|
30064
|
+
/* @__PURE__ */ jsx86(
|
|
30065
|
+
Player,
|
|
30066
|
+
{
|
|
30067
|
+
ref: setShadowIframeNode,
|
|
30068
|
+
directUrl: slot.url,
|
|
30069
|
+
onLoad: () => onShadowIframeLoad(slot.gen),
|
|
30070
|
+
onReadyToShowChange: (ready) => onShadowReadyChange(slot.gen, ready),
|
|
30071
|
+
onPainted: (details) => reportPreviewFirstFrame(slot, details),
|
|
30072
|
+
onPreviewError: (message) => onShadowError(slot.gen, message),
|
|
30073
|
+
portrait,
|
|
30074
|
+
suppressLoadingOverlay: true,
|
|
30075
|
+
style: SHADOW_IFRAME_STYLE
|
|
30076
|
+
},
|
|
30077
|
+
`${activeKey}-${slot.gen}`
|
|
30078
|
+
)
|
|
30079
|
+
)
|
|
30064
30080
|
)
|
|
30065
|
-
|
|
30066
|
-
|
|
30067
|
-
|
|
30081
|
+
]
|
|
30082
|
+
}
|
|
30083
|
+
)
|
|
30068
30084
|
}
|
|
30069
|
-
)
|
|
30085
|
+
),
|
|
30070
30086
|
/* @__PURE__ */ jsx86(
|
|
30071
30087
|
"div",
|
|
30072
30088
|
{
|