@vanillaskyai/video 0.10.23 → 0.11.0
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/CHANGELOG.md +61 -0
- package/PUBLIC-API.md +45 -438
- package/README.md +53 -97
- package/dist/builtin-metadata-OT6V7TB4.js +8 -0
- package/dist/{chapter-title-2JVDU62E.js → chapter-title-2RCXX7SN.js} +1 -2
- package/dist/{chunk-PDQFQIQW.js → chunk-3EQ6PVWL.js} +1 -1
- package/dist/chunk-4G4JBMCM.js +37 -0
- package/dist/{chunk-7AA2JWHZ.js → chunk-5DOQTIMD.js} +6 -6
- package/dist/chunk-666HGTVZ.js +41 -0
- package/dist/{chunk-7M56IUUX.js → chunk-6Z3ID54H.js} +0 -18
- package/dist/{chunk-5BSJLT6H.js → chunk-E7FHBLAC.js} +16 -29
- package/dist/chunk-HIQM4J3U.js +30 -0
- package/dist/chunk-ISWQ6T5X.js +36 -0
- package/dist/{chunk-224QNWRA.js → chunk-K5J7ESRO.js} +1 -10
- package/dist/chunk-KMVRBUL5.js +50 -0
- package/dist/chunk-NM4CXXZY.js +25 -0
- package/dist/{chunk-44WND2VP.js → chunk-V2CP7PVY.js} +19 -63
- package/dist/{chunk-3O7OMMMF.js → chunk-WZESNEPT.js} +0 -1
- package/dist/{chunk-RXTN2CW6.js → chunk-Z3DLSLAJ.js} +1 -1
- package/dist/cinema-media-YZ2UANJG.js +365 -0
- package/dist/cli.js +154 -1748
- package/dist/{compose-video-BH5K6XWT.js → compose-video-H2YUQDUY.js} +4 -4
- package/dist/{events-B4YCc4vc.d.ts → events-BZAfl0Dm.d.ts} +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +4 -6
- package/dist/preload-media-23JXUFCF.js +77 -0
- package/dist/react.d.ts +39 -15
- package/dist/react.js +1350 -739
- package/dist/scene-validation-SGLLLFY5.js +9 -0
- package/dist/server.d.ts +67 -117
- package/dist/server.js +262 -614
- package/dist/test.d.ts +2 -2
- package/dist/test.js +21 -21
- package/dist/{text-stream-LD364KBI.js → text-stream-SOVLYR2L.js} +2 -2
- package/dist/{types-BqB8zC9u.d.ts → types-CG-kPI81.d.ts} +3 -1
- package/dist/{types-DdZw4GRQ.d.ts → types-ht-Zw3Wv.d.ts} +1 -1
- package/docs/agent-integration.md +19 -64
- package/docs/architecture.md +80 -106
- package/docs/customization.md +49 -66
- package/docs/development.md +18 -17
- package/docs/errors.md +4 -4
- package/docs/getting-started.md +74 -93
- package/docs/media-and-audio.md +9 -7
- package/docs/performance.md +11 -6
- package/docs/persistence.md +3 -7
- package/docs/production.md +4 -15
- package/docs/prompt-and-input.md +1 -2
- package/docs/provider-integration.md +134 -181
- package/docs/reference/protocol.md +5 -14
- package/docs/reference/provider-adapters.md +21 -13
- package/docs/security.md +1 -14
- package/docs/testing.md +56 -123
- package/package.json +4 -25
- package/starters/video-chat/.env.example +12 -4
- package/starters/video-chat/.env.native.example +13 -0
- package/starters/video-chat/README.md +72 -11
- package/starters/video-chat/package.json +1 -1
- package/starters/video-chat/providers/text-native.ts +94 -0
- package/starters/video-chat/providers/text.ts +19 -0
- package/starters/video-chat/providers/transcription.ts +32 -0
- package/starters/video-chat/providers/video-custom.ts +45 -0
- package/starters/video-chat/providers/video-delivery.ts +57 -0
- package/starters/video-chat/providers/video-google.ts +48 -0
- package/starters/video-chat/providers/video-job.ts +103 -0
- package/starters/video-chat/providers/video-runway.ts +45 -0
- package/starters/video-chat/providers/video.ts +39 -63
- package/starters/video-chat/server.ts +3 -29
- package/starters/video-chat/vite.config.ts +2 -8
- package/styles/video-chat.css +8 -105
- package/dist/builtin-server-W4PLJUZ5.js +0 -8
- package/dist/catalog-types-WTbLP6Jh.d.ts +0 -78
- package/dist/check-runtime.d.ts +0 -15
- package/dist/check-runtime.js +0 -96
- package/dist/chunk-2E6T633S.js +0 -27
- package/dist/chunk-4YM2M62S.js +0 -13
- package/dist/chunk-4ZJLPHBV.js +0 -684
- package/dist/chunk-5JBMYQP6.js +0 -156
- package/dist/chunk-73NTSFFI.js +0 -81
- package/dist/chunk-EGVQODKU.js +0 -83
- package/dist/chunk-HFVNAPHZ.js +0 -35
- package/dist/chunk-IIN5M5HW.js +0 -697
- package/dist/chunk-IQMYK5DX.js +0 -133
- package/dist/chunk-IR44XKBI.js +0 -46
- package/dist/chunk-JKVOBTRO.js +0 -145
- package/dist/chunk-LVM5Q2DL.js +0 -68
- package/dist/chunk-M4QTEJTK.js +0 -709
- package/dist/chunk-QSBDB4J2.js +0 -16
- package/dist/chunk-R3XAOMKP.js +0 -29
- package/dist/chunk-SPVTJH3F.js +0 -24
- package/dist/chunk-YAHT3LST.js +0 -663
- package/dist/chunk-ZD2VTUYR.js +0 -28
- package/dist/cinema-media-HYCDG65Z.js +0 -11
- package/dist/comparison-XXAP4S4J.js +0 -36
- package/dist/editorial-timeline-VUQC6KPA.js +0 -42
- package/dist/key-figure-4TJK7HLT.js +0 -29
- package/dist/kit-DrRpdn0p.d.ts +0 -79
- package/dist/mobile-message-FIHAO6XC.js +0 -49
- package/dist/preload-media-LJXWKTWG.js +0 -57
- package/dist/quote-GRPIYKQJ.js +0 -32
- package/dist/system-prompt-AG26KJAA.js +0 -12
- package/dist/template-catalog.d.ts +0 -400
- package/dist/template-catalog.js +0 -6
- package/dist/templates.d.ts +0 -25
- package/dist/templates.js +0 -102
- package/dist/validate-4OUD2CLX.js +0 -10
- package/docs/concepts.md +0 -107
- package/docs/custom-templates.md +0 -346
- package/docs/immersive-interface.md +0 -86
- package/docs/motion-and-effects.md +0 -109
- package/docs/reference/design-system.html +0 -125
- package/docs/responsive-orientation.md +0 -37
- package/docs/streaming-protocol.md +0 -15
- package/examples/custom-template/README.md +0 -19
- package/examples/custom-template/minimal-text.tsx +0 -82
- package/examples/custom-template/structured-data.tsx +0 -104
- package/registry/items/backgrounds.json +0 -70
- package/registry/items/chapterTitle.json +0 -80
- package/registry/items/cinemaMedia.json +0 -136
- package/registry/items/comparison.json +0 -168
- package/registry/items/editorialTimeline.json +0 -172
- package/registry/items/keyFigure.json +0 -162
- package/registry/items/mobileMessage.json +0 -153
- package/registry/items/motion.json +0 -45
- package/registry/items/quote.json +0 -161
- package/registry/items/template-context.json +0 -31
- package/registry/items/theme.json +0 -47
- package/registry/items/typography.json +0 -47
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
EditorialSurface
|
|
3
|
-
} from "./chunk-HFVNAPHZ.js";
|
|
4
|
-
import "./chunk-YAHT3LST.js";
|
|
5
|
-
import {
|
|
6
|
-
editorialLabel,
|
|
7
|
-
fade
|
|
8
|
-
} from "./chunk-4YM2M62S.js";
|
|
9
|
-
import "./chunk-5JBMYQP6.js";
|
|
10
|
-
import {
|
|
11
|
-
hasSceneMedia
|
|
12
|
-
} from "./chunk-224QNWRA.js";
|
|
13
|
-
|
|
14
|
-
// src/visual-system/scene-templates/comparison.tsx
|
|
15
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
-
function ComparisonScene(props) {
|
|
17
|
-
const { variables, width, height, progress, motionProgress = progress, safeZone } = props;
|
|
18
|
-
const overMedia = hasSceneMedia(variables);
|
|
19
|
-
const portrait = height > width, u = Math.min(width, height);
|
|
20
|
-
const side = Math.max(width * 0.12, safeZone.left, safeZone.right);
|
|
21
|
-
const top = Math.max(height * 0.2, safeZone.top), bottom = height - Math.max(height * 0.23, safeZone.bottom);
|
|
22
|
-
const area = bottom - top, cy = (top + bottom) / 2, available = width - side * 2;
|
|
23
|
-
const entries = [{ label: String(variables.leftLabel ?? ""), text: String(variables.leftText ?? "") }, { label: String(variables.rightLabel ?? ""), text: String(variables.rightText ?? "") }];
|
|
24
|
-
const textWidth = portrait ? available : available * 0.39;
|
|
25
|
-
return /* @__PURE__ */ jsxs(EditorialSurface, { ...props, template: "comparison", children: [
|
|
26
|
-
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: portrait ? width * 0.32 : width / 2, top: portrait ? cy : top + area * 0.18, width: portrait ? width * 0.36 : u * 1e-3, height: portrait ? u * 1e-3 : area * 0.64, background: "#fff", opacity: 0.22 * fade((motionProgress - 0.16) / 0.18) } }),
|
|
27
|
-
entries.map((entry, i) => /* @__PURE__ */ jsxs("div", { "data-comparison-side": i === 0 ? "left" : "right", style: { position: "absolute", left: portrait ? side : side + available * (i === 0 ? 0.055 : 0.555), top: portrait ? top + area * (i === 0 ? 0.25 : 0.75) : cy, width: textWidth, transform: "translateY(-50%)", textAlign: "center", opacity: fade((motionProgress - 0.04 - i * 0.22) / 0.2) }, children: [
|
|
28
|
-
entry.label && /* @__PURE__ */ jsx("div", { style: { ...editorialLabel(u), color: overMedia ? "#fff" : "#b7b7bc", marginBottom: u * 0.028 }, children: entry.label }),
|
|
29
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: u * 0.058, fontWeight: 500, lineHeight: 1.22, letterSpacing: "-.025em", textWrap: "balance", overflowWrap: "anywhere" }, children: entry.text })
|
|
30
|
-
] }, i))
|
|
31
|
-
] });
|
|
32
|
-
}
|
|
33
|
-
var ComparisonSceneTemplate = ComparisonScene;
|
|
34
|
-
export {
|
|
35
|
-
ComparisonSceneTemplate
|
|
36
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
EditorialSurface
|
|
3
|
-
} from "./chunk-HFVNAPHZ.js";
|
|
4
|
-
import "./chunk-YAHT3LST.js";
|
|
5
|
-
import {
|
|
6
|
-
fade
|
|
7
|
-
} from "./chunk-4YM2M62S.js";
|
|
8
|
-
import "./chunk-5JBMYQP6.js";
|
|
9
|
-
import "./chunk-224QNWRA.js";
|
|
10
|
-
|
|
11
|
-
// src/visual-system/scene-templates/editorial-timeline.tsx
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
var timelineTiming = (index) => ({ nodeStart: index === 0 ? 0.06 : 0.23 + (index - 1) * 0.11, lineStart: 0.14 + index * 0.11, lineDuration: 0.09, entranceDuration: 0.16 });
|
|
14
|
-
function TimelineScene(props) {
|
|
15
|
-
const { variables, progress, motionProgress = progress, width, height, safeZone } = props;
|
|
16
|
-
const events = (Array.isArray(variables.events) ? variables.events : []).slice(0, 5).map((e) => ({ label: String(e?.label ?? "") }));
|
|
17
|
-
const portrait = height > width, u = Math.min(width, height), n = Math.max(1, events.length);
|
|
18
|
-
const side = Math.max(width * 0.13, safeZone.left, safeZone.right), available = width - side * 2;
|
|
19
|
-
const top = Math.max(height * 0.2, safeZone.top), bottom = height - Math.max(height * 0.24, safeZone.bottom);
|
|
20
|
-
const slot = portrait ? (bottom - top) / n : available / n;
|
|
21
|
-
const points = events.map((_, i) => ({ x: portrait ? side : side + slot * (i + 0.5), y: portrait ? top + slot * (i + 0.5) : height * 0.43 }));
|
|
22
|
-
const radius = u * 45e-4;
|
|
23
|
-
return /* @__PURE__ */ jsxs(EditorialSurface, { ...props, template: "timeline", children: [
|
|
24
|
-
points.slice(0, -1).map((point, i) => {
|
|
25
|
-
const next = points[i + 1], timing = timelineTiming(i), line = fade((motionProgress - timing.lineStart) / timing.lineDuration);
|
|
26
|
-
return /* @__PURE__ */ jsx("div", { "data-step-connector": "true", style: { position: "absolute", left: point.x, top: point.y, width: portrait ? u * 1e-3 : next.x - point.x, height: portrait ? next.y - point.y : u * 1e-3, background: "#fff", opacity: 0.3, transform: portrait ? `scaleY(${line})` : `scaleX(${line})`, transformOrigin: portrait ? "top" : "left" } }, `line-${i}`);
|
|
27
|
-
}),
|
|
28
|
-
points.map((point, i) => {
|
|
29
|
-
const timing = timelineTiming(i), event = events[i], opacity = fade((motionProgress - timing.nodeStart) / timing.entranceDuration);
|
|
30
|
-
const textW = portrait ? available - u * 0.055 : slot * 0.86;
|
|
31
|
-
return /* @__PURE__ */ jsxs("div", { "data-template-item": "steps", style: { opacity }, children: [
|
|
32
|
-
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: point.x - radius, top: point.y - radius, width: radius * 2, height: radius * 2, borderRadius: "50%", background: "#fff" } }),
|
|
33
|
-
/* @__PURE__ */ jsx("div", { style: { position: "absolute", left: portrait ? point.x + u * 0.055 : point.x - textW / 2, top: portrait ? point.y : point.y + u * 0.05, width: textW, transform: portrait ? "translateY(-50%)" : void 0, textAlign: portrait ? "left" : "center" }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: u * (portrait ? 0.052 : 0.041), fontWeight: 500, lineHeight: 1.22, letterSpacing: "-.025em", textWrap: "balance", overflowWrap: "anywhere" }, children: event.label }) })
|
|
34
|
-
] }, i);
|
|
35
|
-
})
|
|
36
|
-
] });
|
|
37
|
-
}
|
|
38
|
-
var TimelineSceneTemplate = TimelineScene;
|
|
39
|
-
export {
|
|
40
|
-
TimelineSceneTemplate,
|
|
41
|
-
timelineTiming
|
|
42
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
EditorialSurface
|
|
3
|
-
} from "./chunk-HFVNAPHZ.js";
|
|
4
|
-
import "./chunk-YAHT3LST.js";
|
|
5
|
-
import {
|
|
6
|
-
editorialLabel,
|
|
7
|
-
fade
|
|
8
|
-
} from "./chunk-4YM2M62S.js";
|
|
9
|
-
import "./chunk-5JBMYQP6.js";
|
|
10
|
-
import {
|
|
11
|
-
hasSceneMedia
|
|
12
|
-
} from "./chunk-224QNWRA.js";
|
|
13
|
-
|
|
14
|
-
// src/visual-system/scene-templates/key-figure.tsx
|
|
15
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
-
function KeyFigureScene(props) {
|
|
17
|
-
const { variables, width, height, progress, motionProgress = progress, safeZone } = props;
|
|
18
|
-
const overMedia = hasSceneMedia(variables);
|
|
19
|
-
const u = Math.min(width, height), side = Math.max(width * 0.13, safeZone.left, safeZone.right), available = width - side * 2;
|
|
20
|
-
const top = Math.max(height * 0.16, safeZone.top), bottom = height - Math.max(height * 0.23, safeZone.bottom), value = String(variables.value ?? "");
|
|
21
|
-
return /* @__PURE__ */ jsx(EditorialSurface, { ...props, template: "keyFigure", children: /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: side, top: (top + bottom) / 2, width: available, transform: "translateY(-50%)", textAlign: "center", opacity: fade((motionProgress - 0.03) / 0.22) }, children: [
|
|
22
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: Math.min(u * 0.22, available / Math.max(1, value.length * 0.6)), fontWeight: 500, lineHeight: 1.05, letterSpacing: "-.045em", fontVariantNumeric: "tabular-nums" }, children: value }),
|
|
23
|
-
/* @__PURE__ */ jsx("div", { style: { ...editorialLabel(u), color: overMedia ? "#fff" : "#b7b7bc", marginTop: u * 0.045, textWrap: "balance", overflowWrap: "anywhere" }, children: String(variables.label ?? "") })
|
|
24
|
-
] }) });
|
|
25
|
-
}
|
|
26
|
-
var KeyFigureSceneTemplate = KeyFigureScene;
|
|
27
|
-
export {
|
|
28
|
-
KeyFigureSceneTemplate
|
|
29
|
-
};
|
package/dist/kit-DrRpdn0p.d.ts
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { V as VideoStyle, a as VideoCapabilities } from './types-DdZw4GRQ.js';
|
|
2
|
-
import { ComponentType } from 'react';
|
|
3
|
-
import { S as SceneTemplateMetadata, T as TemplateJsonSchema, d as TemplateJsonSchemaProperty } from './catalog-types-WTbLP6Jh.js';
|
|
4
|
-
|
|
5
|
-
interface TemplateSafeZone {
|
|
6
|
-
top: number;
|
|
7
|
-
right: number;
|
|
8
|
-
bottom: number;
|
|
9
|
-
left: number;
|
|
10
|
-
}
|
|
11
|
-
interface SceneTemplateProps<Variables extends Record<string, unknown> = Record<string, unknown>> {
|
|
12
|
-
variables: Variables;
|
|
13
|
-
style: VideoStyle;
|
|
14
|
-
progress: number;
|
|
15
|
-
/**
|
|
16
|
-
* Optional transition-safe visual progress. Keep grounded values, media,
|
|
17
|
-
* and semantic state on `progress`; use this only for entrance/exit motion.
|
|
18
|
-
* Older renderers may omit it, so templates must fall back to `progress`.
|
|
19
|
-
*/
|
|
20
|
-
motionProgress?: number;
|
|
21
|
-
beatIntensity: number;
|
|
22
|
-
width: number;
|
|
23
|
-
height: number;
|
|
24
|
-
textArchetype?: string;
|
|
25
|
-
backgroundEffect?: string;
|
|
26
|
-
safeZone: TemplateSafeZone;
|
|
27
|
-
sceneDuration?: number;
|
|
28
|
-
isPlaying?: boolean;
|
|
29
|
-
}
|
|
30
|
-
type JsonObjectRequiredKeys<Property> = Property extends {
|
|
31
|
-
readonly required: readonly (infer Required)[];
|
|
32
|
-
} ? Required : never;
|
|
33
|
-
type JsonObjectValue<Property extends {
|
|
34
|
-
readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
|
|
35
|
-
}> = {
|
|
36
|
-
[Key in Extract<JsonObjectRequiredKeys<Property>, keyof Property["properties"]>]: JsonPropertyValue<Property["properties"][Key]>;
|
|
37
|
-
} & {
|
|
38
|
-
[Key in Exclude<keyof Property["properties"], JsonObjectRequiredKeys<Property>>]?: JsonPropertyValue<Property["properties"][Key]>;
|
|
39
|
-
};
|
|
40
|
-
type JsonPropertyValue<Property> = Property extends {
|
|
41
|
-
readonly enum: readonly (infer Value)[];
|
|
42
|
-
} ? Value : Property extends {
|
|
43
|
-
readonly type: "number" | "integer";
|
|
44
|
-
} ? number : Property extends {
|
|
45
|
-
readonly type: "boolean";
|
|
46
|
-
} ? boolean : Property extends {
|
|
47
|
-
readonly type: "array";
|
|
48
|
-
readonly items: infer Item;
|
|
49
|
-
} ? JsonPropertyValue<Item>[] : Property extends {
|
|
50
|
-
readonly type: "array";
|
|
51
|
-
} ? unknown[] : Property extends {
|
|
52
|
-
readonly type: "object";
|
|
53
|
-
readonly properties: Readonly<Record<string, TemplateJsonSchemaProperty>>;
|
|
54
|
-
} ? JsonObjectValue<Property> : Property extends {
|
|
55
|
-
readonly type: "object";
|
|
56
|
-
} ? Record<string, unknown> : string;
|
|
57
|
-
type RequiredJsonSchemaKeys<Schema extends TemplateJsonSchema> = Schema["required"] extends readonly (infer Key)[] ? Extract<Key, keyof Schema["properties"]> : never;
|
|
58
|
-
type InferTemplateJsonSchema<Schema extends TemplateJsonSchema> = {
|
|
59
|
-
[Key in RequiredJsonSchemaKeys<Schema>]: JsonPropertyValue<Schema["properties"][Key]>;
|
|
60
|
-
} & {
|
|
61
|
-
[Key in Exclude<keyof Schema["properties"], RequiredJsonSchemaKeys<Schema>>]?: JsonPropertyValue<Schema["properties"][Key]>;
|
|
62
|
-
};
|
|
63
|
-
interface SceneTemplate<Variables extends Record<string, unknown> = Record<string, unknown>> extends SceneTemplateMetadata {
|
|
64
|
-
component: ComponentType<SceneTemplateProps<Variables>>;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
interface TemplateRegistry {
|
|
68
|
-
readonly templates: readonly SceneTemplate<any>[];
|
|
69
|
-
readonly capabilities: VideoCapabilities;
|
|
70
|
-
getTemplate(id: string): SceneTemplate | undefined;
|
|
71
|
-
getTemplateMetadata(id: string): SceneTemplateMetadata | undefined;
|
|
72
|
-
listTemplateMetadata(): SceneTemplateMetadata[];
|
|
73
|
-
}
|
|
74
|
-
/** Build the browser renderer registry from customer-owned template definitions. */
|
|
75
|
-
declare function createTemplateRegistry(options: {
|
|
76
|
-
definitions: readonly SceneTemplate<any>[];
|
|
77
|
-
}): TemplateRegistry;
|
|
78
|
-
|
|
79
|
-
export { type InferTemplateJsonSchema as I, type SceneTemplateProps as S, type TemplateRegistry as T, type SceneTemplate as a, createTemplateRegistry as c };
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
MediaScene
|
|
3
|
-
} from "./chunk-QSBDB4J2.js";
|
|
4
|
-
import {
|
|
5
|
-
spring
|
|
6
|
-
} from "./chunk-YAHT3LST.js";
|
|
7
|
-
import {
|
|
8
|
-
editorialFont
|
|
9
|
-
} from "./chunk-4YM2M62S.js";
|
|
10
|
-
import "./chunk-5JBMYQP6.js";
|
|
11
|
-
import "./chunk-224QNWRA.js";
|
|
12
|
-
|
|
13
|
-
// src/visual-system/scene-templates/mobile-message.tsx
|
|
14
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
var clamp = (value) => Math.max(0, Math.min(1, value));
|
|
16
|
-
function NotificationScene(props) {
|
|
17
|
-
const { variables, progress, motionProgress = progress, sceneDuration = 6, width, height, safeZone } = props;
|
|
18
|
-
const message = String(variables.message ?? "");
|
|
19
|
-
const app = String(variables.app ?? "Messages");
|
|
20
|
-
const unit = Math.min(width, height);
|
|
21
|
-
const cardWidth = Math.min(width * 0.88, unit * 1.12, width - safeZone.left - safeZone.right - unit * 0.06);
|
|
22
|
-
const inset = unit * 0.038;
|
|
23
|
-
const elapsed = clamp(motionProgress) * Math.max(2, Math.min(sceneDuration, 8));
|
|
24
|
-
const entrance = clamp((elapsed - 0.18) / 0.82);
|
|
25
|
-
const arrival = entrance >= 1 ? 1 : spring(entrance, { damping: 22, stiffness: 220 });
|
|
26
|
-
const opacity = clamp((elapsed - 0.18) / 0.08);
|
|
27
|
-
const contentWidth = cardWidth - inset * 2;
|
|
28
|
-
const messageSize = unit * (message.length > 100 ? 0.038 : 0.043);
|
|
29
|
-
const longestWord = Math.max(1, ...message.split(/\s+/).map((word) => word.length));
|
|
30
|
-
const fittedMessageSize = Math.min(messageSize, contentWidth / (longestWord * 0.57));
|
|
31
|
-
const bannerTop = Math.max(safeZone.top, height * 0.08) + unit * 0.025;
|
|
32
|
-
const travel = bannerTop + unit * 0.65;
|
|
33
|
-
const iconSize = unit * 0.049;
|
|
34
|
-
return /* @__PURE__ */ jsxs("div", { "data-template": "notification", style: { position: "absolute", inset: 0, overflow: "hidden", background: "var(--vanillasky-template-surface, #000)", fontFamily: editorialFont }, children: [
|
|
35
|
-
/* @__PURE__ */ jsx(MediaScene, { ...props }),
|
|
36
|
-
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, background: "rgba(0,0,0,.16)" } }),
|
|
37
|
-
/* @__PURE__ */ jsxs("div", { "data-notification-card": "true", style: { position: "absolute", left: (width - cardWidth) / 2, top: bannerTop, width: cardWidth, boxSizing: "border-box", transform: `translateY(${-(1 - arrival) * travel}px) scale(${0.985 + arrival * 0.015})`, opacity, transformOrigin: "50% 0%", padding: inset, borderRadius: unit * 0.042, background: "rgba(245,247,250,.64)", backdropFilter: `blur(${unit * 0.034}px) saturate(135%)`, WebkitBackdropFilter: `blur(${unit * 0.034}px) saturate(135%)`, border: `${unit * 1e-3}px solid rgba(255,255,255,.72)`, boxShadow: `0 ${unit * 0.018}px ${unit * 0.065}px rgba(0,0,0,.2), inset 0 ${unit * 1e-3}px 0 rgba(255,255,255,.8)`, color: "#202025" }, children: [
|
|
38
|
-
/* @__PURE__ */ jsxs("div", { "data-notification-header": "true", style: { display: "flex", alignItems: "center", gap: unit * 0.014, marginBottom: unit * 0.024 }, children: [
|
|
39
|
-
/* @__PURE__ */ jsx("div", { style: { width: iconSize, height: iconSize, borderRadius: iconSize * 0.25, display: "grid", placeItems: "center", background: "linear-gradient(#5bd978, #25b749)", flexShrink: 0 }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 40 40", width: iconSize * 0.78, height: iconSize * 0.78, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M34 18c0 7-6 12-14 12-2 0-4 0-6-1l-7 3 2-7c-2-2-3-4-3-7C6 11 12 6 20 6s14 5 14 12Z", fill: "white" }) }) }),
|
|
40
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: unit * 0.029, fontWeight: 500, color: "#5b565f", minWidth: 0, overflowWrap: "anywhere" }, children: app })
|
|
41
|
-
] }),
|
|
42
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: fittedMessageSize, lineHeight: 1.26, letterSpacing: "-.016em", overflowWrap: "anywhere" }, children: message })
|
|
43
|
-
] })
|
|
44
|
-
] });
|
|
45
|
-
}
|
|
46
|
-
var NotificationSceneTemplate = NotificationScene;
|
|
47
|
-
export {
|
|
48
|
-
NotificationSceneTemplate
|
|
49
|
-
};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
limitsConcurrentVideoDecoders,
|
|
3
|
-
resolveMediaType
|
|
4
|
-
} from "./chunk-224QNWRA.js";
|
|
5
|
-
|
|
6
|
-
// src/player/preload-media.ts
|
|
7
|
-
var warmed = /* @__PURE__ */ new Set();
|
|
8
|
-
var inFlight = /* @__PURE__ */ new Set();
|
|
9
|
-
function warmImage(url) {
|
|
10
|
-
const trimmed = url.trim();
|
|
11
|
-
if (!trimmed || warmed.has(trimmed)) return;
|
|
12
|
-
warmed.add(trimmed);
|
|
13
|
-
const image = new Image();
|
|
14
|
-
const release = () => inFlight.delete(image);
|
|
15
|
-
image.onload = release;
|
|
16
|
-
image.onerror = release;
|
|
17
|
-
inFlight.add(image);
|
|
18
|
-
image.src = trimmed;
|
|
19
|
-
}
|
|
20
|
-
var videoWarmInFlight = false;
|
|
21
|
-
function warmVideo(url) {
|
|
22
|
-
const trimmed = url.trim();
|
|
23
|
-
if (!trimmed || warmed.has(trimmed) || videoWarmInFlight) return;
|
|
24
|
-
warmed.add(trimmed);
|
|
25
|
-
videoWarmInFlight = true;
|
|
26
|
-
const video = document.createElement("video");
|
|
27
|
-
video.preload = "auto";
|
|
28
|
-
video.muted = true;
|
|
29
|
-
video.playsInline = true;
|
|
30
|
-
const release = () => {
|
|
31
|
-
videoWarmInFlight = false;
|
|
32
|
-
inFlight.delete(video);
|
|
33
|
-
video.removeAttribute("src");
|
|
34
|
-
video.load();
|
|
35
|
-
};
|
|
36
|
-
video.onloadeddata = release;
|
|
37
|
-
video.onerror = release;
|
|
38
|
-
inFlight.add(video);
|
|
39
|
-
video.src = trimmed;
|
|
40
|
-
}
|
|
41
|
-
function preloadSceneMedia(variables) {
|
|
42
|
-
if (typeof window === "undefined" || typeof Image === "undefined") return;
|
|
43
|
-
const mediaUrl = String(variables.mediaUrl || "").trim();
|
|
44
|
-
if (!mediaUrl) return;
|
|
45
|
-
const resolved = resolveMediaType(String(variables.mediaType || "auto"), mediaUrl);
|
|
46
|
-
if (resolved === "gradient") return;
|
|
47
|
-
if (resolved === "video") {
|
|
48
|
-
warmImage(String(variables.mediaPoster || ""));
|
|
49
|
-
if (limitsConcurrentVideoDecoders()) return;
|
|
50
|
-
warmVideo(mediaUrl);
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
warmImage(mediaUrl);
|
|
54
|
-
}
|
|
55
|
-
export {
|
|
56
|
-
preloadSceneMedia
|
|
57
|
-
};
|
package/dist/quote-GRPIYKQJ.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
EditorialSurface
|
|
3
|
-
} from "./chunk-HFVNAPHZ.js";
|
|
4
|
-
import "./chunk-YAHT3LST.js";
|
|
5
|
-
import {
|
|
6
|
-
fade
|
|
7
|
-
} from "./chunk-4YM2M62S.js";
|
|
8
|
-
import "./chunk-5JBMYQP6.js";
|
|
9
|
-
import {
|
|
10
|
-
hasSceneMedia
|
|
11
|
-
} from "./chunk-224QNWRA.js";
|
|
12
|
-
|
|
13
|
-
// src/visual-system/scene-templates/quote.tsx
|
|
14
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
function QuoteScene(props) {
|
|
16
|
-
const { variables, width, height, progress, motionProgress = progress, safeZone } = props;
|
|
17
|
-
const overMedia = hasSceneMedia(variables);
|
|
18
|
-
const u = Math.min(width, height), top = Math.max(height * 0.16, safeZone.top), bottom = height - Math.max(height * 0.23, safeZone.bottom);
|
|
19
|
-
const side = Math.max(width * 0.13, safeZone.left, safeZone.right);
|
|
20
|
-
return /* @__PURE__ */ jsx(EditorialSurface, { ...props, template: "quote", children: /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: side, top: (top + bottom) / 2, width: width - side * 2, transform: "translateY(-50%)", textAlign: "center", opacity: fade((motionProgress - 0.03) / 0.24) }, children: [
|
|
21
|
-
/* @__PURE__ */ jsxs("div", { style: { fontSize: u * 0.067, fontWeight: 500, lineHeight: 1.25, letterSpacing: "-.025em", textWrap: "balance", overflowWrap: "anywhere" }, children: [
|
|
22
|
-
"\u201C",
|
|
23
|
-
String(variables.quote ?? ""),
|
|
24
|
-
"\u201D"
|
|
25
|
-
] }),
|
|
26
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: u * 0.041, fontWeight: 400, color: overMedia ? "#fff" : "#b7b7bc", lineHeight: 1.3, marginTop: u * 0.065, textWrap: "balance", overflowWrap: "anywhere" }, children: String(variables.attribution ?? "") })
|
|
27
|
-
] }) });
|
|
28
|
-
}
|
|
29
|
-
var QuoteSceneTemplate = QuoteScene;
|
|
30
|
-
export {
|
|
31
|
-
QuoteSceneTemplate
|
|
32
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
DEFAULT_VIDEO_SYSTEM_PROMPT,
|
|
3
|
-
VIDEO_PLAN_INSTRUCTION,
|
|
4
|
-
createVideoSystemPrompt,
|
|
5
|
-
videoPlanInstruction
|
|
6
|
-
} from "./chunk-LVM5Q2DL.js";
|
|
7
|
-
export {
|
|
8
|
-
DEFAULT_VIDEO_SYSTEM_PROMPT,
|
|
9
|
-
VIDEO_PLAN_INSTRUCTION,
|
|
10
|
-
createVideoSystemPrompt,
|
|
11
|
-
videoPlanInstruction
|
|
12
|
-
};
|