@gxpl/sdk 0.0.27 → 0.0.29
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/lib/sdk/schemas/project/Project.schema.d.ts +8 -0
- package/lib/sdk/schemas/project/Project.schema.js +3 -1
- package/lib/sdk/types/project/Page.d.ts +1 -0
- package/lib/sdk/types/project/Project.d.ts +1 -0
- package/lib/sdk-nextjs/components/Page.js +5 -2
- package/lib/sdk-nextjs/utils/usePrelaodAssets.d.ts +1 -0
- package/lib/sdk-nextjs/utils/usePrelaodAssets.js +38 -0
- package/package.json +1 -1
|
@@ -332,12 +332,15 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
332
332
|
pages: z.ZodArray<z.ZodObject<{
|
|
333
333
|
articleId: z.ZodString;
|
|
334
334
|
id: z.ZodString;
|
|
335
|
+
isStartScene: z.ZodDefault<z.ZodBoolean>;
|
|
335
336
|
}, "strip", z.ZodTypeAny, {
|
|
336
337
|
id: string;
|
|
337
338
|
articleId: string;
|
|
339
|
+
isStartScene: boolean;
|
|
338
340
|
}, {
|
|
339
341
|
id: string;
|
|
340
342
|
articleId: string;
|
|
343
|
+
isStartScene?: boolean | undefined;
|
|
341
344
|
}>, "many">;
|
|
342
345
|
fonts: z.ZodObject<{
|
|
343
346
|
google: z.ZodString;
|
|
@@ -398,6 +401,7 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
398
401
|
google: string;
|
|
399
402
|
adobe: string;
|
|
400
403
|
}>;
|
|
404
|
+
scenesAssets: z.ZodArray<z.ZodString, "many">;
|
|
401
405
|
relations: z.ZodArray<z.ZodObject<{
|
|
402
406
|
from: z.ZodString;
|
|
403
407
|
to: z.ZodString;
|
|
@@ -1020,6 +1024,7 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
1020
1024
|
pages: {
|
|
1021
1025
|
id: string;
|
|
1022
1026
|
articleId: string;
|
|
1027
|
+
isStartScene: boolean;
|
|
1023
1028
|
}[];
|
|
1024
1029
|
fonts: {
|
|
1025
1030
|
custom: {
|
|
@@ -1034,6 +1039,7 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
1034
1039
|
google: string;
|
|
1035
1040
|
adobe: string;
|
|
1036
1041
|
};
|
|
1042
|
+
scenesAssets: string[];
|
|
1037
1043
|
relations: {
|
|
1038
1044
|
type: "slide" | "fade";
|
|
1039
1045
|
direction: "north" | "east" | "south" | "west";
|
|
@@ -1166,6 +1172,7 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
1166
1172
|
pages: {
|
|
1167
1173
|
id: string;
|
|
1168
1174
|
articleId: string;
|
|
1175
|
+
isStartScene?: boolean | undefined;
|
|
1169
1176
|
}[];
|
|
1170
1177
|
fonts: {
|
|
1171
1178
|
custom: {
|
|
@@ -1180,6 +1187,7 @@ export declare const ProjectSchema: z.ZodObject<{
|
|
|
1180
1187
|
google: string;
|
|
1181
1188
|
adobe: string;
|
|
1182
1189
|
};
|
|
1190
|
+
scenesAssets: string[];
|
|
1183
1191
|
relations: {
|
|
1184
1192
|
type: "slide" | "fade";
|
|
1185
1193
|
direction: "north" | "east" | "south" | "west";
|
|
@@ -43,7 +43,8 @@ exports.ProjectSchema = zod_1.z.object({
|
|
|
43
43
|
exemplary: zod_1.z.number().positive(),
|
|
44
44
|
pages: zod_1.z.array(zod_1.z.object({
|
|
45
45
|
articleId: zod_1.z.string().min(1),
|
|
46
|
-
id: zod_1.z.string().min(1)
|
|
46
|
+
id: zod_1.z.string().min(1),
|
|
47
|
+
isStartScene: zod_1.z.boolean().default(false)
|
|
47
48
|
})),
|
|
48
49
|
fonts: zod_1.z.object({
|
|
49
50
|
google: zod_1.z.string(),
|
|
@@ -58,6 +59,7 @@ exports.ProjectSchema = zod_1.z.object({
|
|
|
58
59
|
}))
|
|
59
60
|
}))
|
|
60
61
|
}),
|
|
62
|
+
scenesAssets: zod_1.z.array(zod_1.z.string()),
|
|
61
63
|
relations: zod_1.z.array(zod_1.z.object({
|
|
62
64
|
from: zod_1.z.string().min(1),
|
|
63
65
|
to: zod_1.z.string().min(1),
|
|
@@ -10,12 +10,15 @@ const Head_1 = require("./Head");
|
|
|
10
10
|
const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
|
|
11
11
|
const Scenes_1 = require("./Scenes/Scenes");
|
|
12
12
|
const FixedLayer_1 = require("./fixedLayers/FixedLayer");
|
|
13
|
+
const usePrelaodAssets_1 = require("../utils/usePrelaodAssets");
|
|
13
14
|
const Page = ({ project, articlesData }) => {
|
|
15
|
+
var _a, _b;
|
|
14
16
|
const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
|
|
15
17
|
const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
|
|
16
|
-
const startScene = Object.keys(articlesData)[0];
|
|
18
|
+
const startScene = (_b = (_a = project.pages.find(page => page.isStartScene)) === null || _a === void 0 ? void 0 : _a.articleId) !== null && _b !== void 0 ? _b : Object.keys(articlesData)[0];
|
|
17
19
|
const scenes = Object.values(articlesData).map(({ article }) => ({ id: article.id }));
|
|
18
|
-
const { relations } = project;
|
|
20
|
+
const { relations, scenesAssets } = project;
|
|
21
|
+
(0, usePrelaodAssets_1.usePreloadAssets)(scenesAssets);
|
|
19
22
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
|
|
20
23
|
input: {
|
|
21
24
|
startScene,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function usePreloadAssets(assets: string[]): void;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePreloadAssets = usePreloadAssets;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
function isVideoAsset(url) {
|
|
6
|
+
const videoExtensions = ['.mp4', '.mov', '.webm'];
|
|
7
|
+
const lowerUrl = url.toLowerCase();
|
|
8
|
+
return videoExtensions.some(ext => lowerUrl.endsWith(ext));
|
|
9
|
+
}
|
|
10
|
+
function isImageAsset(url) {
|
|
11
|
+
const imageExtensions = ['.gif', '.png', '.jpg', '.jpeg', '.webp', '.avif', '.svg'];
|
|
12
|
+
const lowerUrl = url.toLowerCase();
|
|
13
|
+
return imageExtensions.some(ext => lowerUrl.endsWith(ext));
|
|
14
|
+
}
|
|
15
|
+
function usePreloadAssets(assets) {
|
|
16
|
+
(0, react_1.useEffect)(() => {
|
|
17
|
+
assets.forEach(asset => {
|
|
18
|
+
if (isVideoAsset(asset)) {
|
|
19
|
+
const video = document.createElement('video');
|
|
20
|
+
video.src = asset;
|
|
21
|
+
video.preload = 'auto';
|
|
22
|
+
video.style.display = 'none';
|
|
23
|
+
document.body.appendChild(video);
|
|
24
|
+
video.addEventListener('loadeddata', () => {
|
|
25
|
+
setTimeout(() => {
|
|
26
|
+
if (video.parentNode) {
|
|
27
|
+
video.parentNode.removeChild(video);
|
|
28
|
+
}
|
|
29
|
+
}, 1000);
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
if (isImageAsset(asset)) {
|
|
33
|
+
const img = new Image();
|
|
34
|
+
img.src = asset;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}, [assets]);
|
|
38
|
+
}
|