@cntrl-site/sdk 1.24.5 → 1.25.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/lib/FontFaceGenerator/FontFaceGenerator.js +28 -0
- package/lib/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.js +221 -0
- package/lib/VideoDecoder/VideoDecoder.js +184 -0
- package/{dist → lib}/index.d.ts +0 -2
- package/lib/index.js +30 -0
- package/{dist → lib}/schemas/article/Article.schema.d.ts +12 -12
- package/{dist → lib}/schemas/article/ItemBase.schema.d.ts +10 -10
- package/{dist → lib}/schemas/article/RichTextItem.schema.d.ts +30 -30
- package/{dist → lib}/schemas/article/Section.schema.d.ts +3 -3
- package/{dist → lib}/types/keyframe/Keyframe.d.ts +1 -1
- package/lib/utils.js +30 -0
- package/package.json +9 -31
- package/dist/Client/Client.test.d.ts +0 -1
- package/dist/Client/__mock__/articleMock.d.ts +0 -2
- package/dist/Client/__mock__/keyframesMock.d.ts +0 -2
- package/dist/Client/__mock__/projectMock.d.ts +0 -2
- package/dist/Components/ControlSlider/ControlSlider.d.ts +0 -90
- package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +0 -516
- package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +0 -218
- package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts +0 -38
- package/dist/Components/components.d.ts +0 -2
- package/dist/Components/helpers/RichTextRenderer/RichTextRenderer.d.ts +0 -6
- package/dist/Components/helpers/SvgImage/SvgImage.d.ts +0 -9
- package/dist/Components/utils/scalingValue.d.ts +0 -1
- package/dist/FontFaceGenerator/FontFaceGenerator.test.d.ts +0 -1
- package/dist/index.js +0 -2737
- package/dist/index.mjs +0 -2720
- package/dist/schemas/shared/FillLayer.schema.d.ts +0 -186
- package/dist/sdk.css +0 -1
- package/dist/types/component/Component.d.ts +0 -15
- /package/{dist → lib}/Client/Client.d.ts +0 -0
- /package/{dist → lib}/Client/Client.js +0 -0
- /package/{dist → lib}/FontFaceGenerator/FontFaceGenerator.d.ts +0 -0
- /package/{dist → lib}/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.d.ts +0 -0
- /package/{dist → lib}/VideoDecoder/VideoDecoder.d.ts +0 -0
- /package/{dist → lib}/cli.d.ts +0 -0
- /package/{dist → lib}/cli.js +0 -0
- /package/{dist → lib}/schemas/article/Article.schema.js +0 -0
- /package/{dist → lib}/schemas/article/FillLayer.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/article/FillLayer.schema.js +0 -0
- /package/{dist → lib}/schemas/article/Interaction.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/article/Interaction.schema.js +0 -0
- /package/{dist → lib}/schemas/article/Item.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/article/Item.schema.js +0 -0
- /package/{dist → lib}/schemas/article/ItemArea.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/article/ItemArea.schema.js +0 -0
- /package/{dist → lib}/schemas/article/ItemBase.schema.js +0 -0
- /package/{dist → lib}/schemas/article/ItemState.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/article/ItemState.schema.js +0 -0
- /package/{dist → lib}/schemas/article/RichTextItem.schema.js +0 -0
- /package/{dist → lib}/schemas/article/Section.schema.js +0 -0
- /package/{dist → lib}/schemas/keyframe/Keyframes.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/keyframe/Keyframes.schema.js +0 -0
- /package/{dist → lib}/schemas/project/Layout.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/project/Layout.schema.js +0 -0
- /package/{dist → lib}/schemas/project/Project.schema.d.ts +0 -0
- /package/{dist → lib}/schemas/project/Project.schema.js +0 -0
- /package/{dist → lib}/types/article/Article.d.ts +0 -0
- /package/{dist → lib}/types/article/Article.js +0 -0
- /package/{dist → lib}/types/article/ArticleItemType.d.ts +0 -0
- /package/{dist → lib}/types/article/ArticleItemType.js +0 -0
- /package/{dist → lib}/types/article/CompoundSettings.d.ts +0 -0
- /package/{dist → lib}/types/article/CompoundSettings.js +0 -0
- /package/{dist → lib}/types/article/FX.d.ts +0 -0
- /package/{dist → lib}/types/article/FX.js +0 -0
- /package/{dist → lib}/types/article/Interaction.d.ts +0 -0
- /package/{dist → lib}/types/article/Interaction.js +0 -0
- /package/{dist → lib}/types/article/Item.d.ts +0 -0
- /package/{dist → lib}/types/article/Item.js +0 -0
- /package/{dist → lib}/types/article/ItemArea.d.ts +0 -0
- /package/{dist → lib}/types/article/ItemArea.js +0 -0
- /package/{dist → lib}/types/article/ItemState.d.ts +0 -0
- /package/{dist → lib}/types/article/ItemState.js +0 -0
- /package/{dist → lib}/types/article/RichText.d.ts +0 -0
- /package/{dist → lib}/types/article/RichText.js +0 -0
- /package/{dist → lib}/types/article/Section.d.ts +0 -0
- /package/{dist → lib}/types/article/Section.js +0 -0
- /package/{dist → lib}/types/keyframe/Keyframe.js +0 -0
- /package/{dist → lib}/types/project/Fonts.d.ts +0 -0
- /package/{dist → lib}/types/project/Fonts.js +0 -0
- /package/{dist → lib}/types/project/Layout.d.ts +0 -0
- /package/{dist → lib}/types/project/Layout.js +0 -0
- /package/{dist → lib}/types/project/Meta.d.ts +0 -0
- /package/{dist → lib}/types/project/Meta.js +0 -0
- /package/{dist → lib}/types/project/Page.d.ts +0 -0
- /package/{dist → lib}/types/project/Page.js +0 -0
- /package/{dist → lib}/types/project/Project.d.ts +0 -0
- /package/{dist → lib}/types/project/Project.js +0 -0
- /package/{dist → lib}/utils.d.ts +0 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FontFaceGenerator = void 0;
|
|
4
|
+
const FILE_TYPES_MAP = {
|
|
5
|
+
ttf: 'truetype',
|
|
6
|
+
otf: 'opentype'
|
|
7
|
+
};
|
|
8
|
+
class FontFaceGenerator {
|
|
9
|
+
constructor(fonts) {
|
|
10
|
+
this.fonts = fonts;
|
|
11
|
+
}
|
|
12
|
+
generate() {
|
|
13
|
+
return this.fonts.map(font => {
|
|
14
|
+
const eotFile = font.files.find(file => file.type === 'eot');
|
|
15
|
+
const otherFiles = font.files
|
|
16
|
+
.filter(file => file.type !== 'eot')
|
|
17
|
+
.map(file => `url('${file.url}') format('${FILE_TYPES_MAP[file.type] || file.type}')`);
|
|
18
|
+
return `
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: "${font.name}";
|
|
21
|
+
font-weight: ${font.weight};
|
|
22
|
+
font-style: ${font.style};
|
|
23
|
+
${eotFile ? `src: url('${eotFile.url}');\n ` : ''}src: ${otherFiles.join(', ')};
|
|
24
|
+
}`;
|
|
25
|
+
}).join('\n');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
exports.FontFaceGenerator = FontFaceGenerator;
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ScrollPlaybackVideoManager = void 0;
|
|
7
|
+
const ua_parser_js_1 = __importDefault(require("ua-parser-js"));
|
|
8
|
+
const VideoDecoder_1 = __importDefault(require("../VideoDecoder/VideoDecoder"));
|
|
9
|
+
class ScrollPlaybackVideoManager {
|
|
10
|
+
constructor(options) {
|
|
11
|
+
this.currentTime = 0;
|
|
12
|
+
this.targetTime = 0;
|
|
13
|
+
this.canvas = null;
|
|
14
|
+
this.context = null;
|
|
15
|
+
this.frames = [];
|
|
16
|
+
this.frameRate = 0;
|
|
17
|
+
this.transitioning = false;
|
|
18
|
+
this.debug = false;
|
|
19
|
+
this.frameThreshold = 0.1;
|
|
20
|
+
this.transitionSpeed = 10;
|
|
21
|
+
this.useWebCodecs = true;
|
|
22
|
+
this.resize = () => {
|
|
23
|
+
if (this.debug)
|
|
24
|
+
console.info('ScrollVideo resizing...');
|
|
25
|
+
if (this.canvas) {
|
|
26
|
+
this.setCoverStyle(this.canvas);
|
|
27
|
+
}
|
|
28
|
+
else if (this.video) {
|
|
29
|
+
this.setCoverStyle(this.video);
|
|
30
|
+
}
|
|
31
|
+
this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
|
|
32
|
+
};
|
|
33
|
+
this.decodeVideo = () => {
|
|
34
|
+
if (!this.video)
|
|
35
|
+
return;
|
|
36
|
+
if (this.useWebCodecs && this.video.src) {
|
|
37
|
+
(0, VideoDecoder_1.default)(this.video.src, (frame) => {
|
|
38
|
+
this.frames.push(frame);
|
|
39
|
+
}, this.debug).then(() => {
|
|
40
|
+
if (!this.video || !this.container)
|
|
41
|
+
return;
|
|
42
|
+
if (this.frames.length === 0) {
|
|
43
|
+
if (this.debug)
|
|
44
|
+
console.error('No frames were received from webCodecs');
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
this.frameRate = this.frames.length / this.video.duration;
|
|
48
|
+
if (this.debug)
|
|
49
|
+
console.info('Received', this.frames.length, 'frames');
|
|
50
|
+
this.canvas = document.createElement('canvas');
|
|
51
|
+
this.context = this.canvas.getContext('2d');
|
|
52
|
+
this.video.style.display = 'none';
|
|
53
|
+
this.container.appendChild(this.canvas);
|
|
54
|
+
this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
|
|
55
|
+
}).catch(() => {
|
|
56
|
+
if (this.debug)
|
|
57
|
+
console.error('Error encountered while decoding video');
|
|
58
|
+
this.frames = [];
|
|
59
|
+
this.video.load();
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
64
|
+
this.resize();
|
|
65
|
+
});
|
|
66
|
+
const { src, videoContainer } = options;
|
|
67
|
+
if (typeof document !== 'object') {
|
|
68
|
+
console.error('ScrollVideo must be initiated in a DOM context');
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
if (!videoContainer) {
|
|
72
|
+
console.error('scrollVideoContainer must be a valid DOM object');
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (!src) {
|
|
76
|
+
console.error('Must provide valid video src to ScrollVideo');
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
this.container = typeof videoContainer === 'string' ? document.getElementById(videoContainer) : videoContainer;
|
|
80
|
+
this.resizeObserver.observe(this.container);
|
|
81
|
+
this.video = document.createElement('video');
|
|
82
|
+
this.video.src = src;
|
|
83
|
+
this.video.preload = 'auto';
|
|
84
|
+
this.video.tabIndex = 0;
|
|
85
|
+
this.video.playsInline = true;
|
|
86
|
+
this.video.muted = true;
|
|
87
|
+
this.video.pause();
|
|
88
|
+
this.video.load();
|
|
89
|
+
this.container.appendChild(this.video);
|
|
90
|
+
const browserEngine = new ua_parser_js_1.default().getEngine();
|
|
91
|
+
this.isSafari = browserEngine.name === 'WebKit';
|
|
92
|
+
if (this.debug && this.isSafari)
|
|
93
|
+
console.info('Safari browser detected');
|
|
94
|
+
this.video.addEventListener('loadedmetadata', () => this.setTargetTimePercent(0, true), { once: true });
|
|
95
|
+
this.video.addEventListener('progress', this.resize);
|
|
96
|
+
this.decodeVideo();
|
|
97
|
+
}
|
|
98
|
+
setCoverStyle(el) {
|
|
99
|
+
if (el && this.container) {
|
|
100
|
+
el.style.position = 'absolute';
|
|
101
|
+
el.style.top = '50%';
|
|
102
|
+
el.style.left = '50%';
|
|
103
|
+
el.style.transform = 'translate(-50%, -50%)';
|
|
104
|
+
const { width: containerWidth, height: containerHeight } = this.container.getBoundingClientRect();
|
|
105
|
+
const width = el.videoWidth || el.width;
|
|
106
|
+
const height = el.videoHeight || el.height;
|
|
107
|
+
if (containerWidth / containerHeight > width / height) {
|
|
108
|
+
el.style.width = '100%';
|
|
109
|
+
el.style.height = 'auto';
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
el.style.height = '100%';
|
|
113
|
+
el.style.width = 'auto';
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
paintCanvasFrame(frameNum) {
|
|
118
|
+
if (this.canvas) {
|
|
119
|
+
const frameIdx = Math.min(frameNum, this.frames.length - 1);
|
|
120
|
+
const currFrame = this.frames[frameIdx];
|
|
121
|
+
if (currFrame && this.container) {
|
|
122
|
+
if (this.debug)
|
|
123
|
+
console.info('Painting frame', frameIdx);
|
|
124
|
+
this.canvas.width = currFrame.width;
|
|
125
|
+
this.canvas.height = currFrame.height;
|
|
126
|
+
const { width, height } = this.container.getBoundingClientRect();
|
|
127
|
+
this.resetCanvasDimensions(width, height, currFrame.width, currFrame.height);
|
|
128
|
+
this.context.drawImage(currFrame, 0, 0, currFrame.width, currFrame.height);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
transitionToTargetTime(jump) {
|
|
133
|
+
if (!this.video)
|
|
134
|
+
return;
|
|
135
|
+
if (this.debug)
|
|
136
|
+
console.info('Transitioning targetTime:', this.targetTime, 'currentTime:', this.currentTime);
|
|
137
|
+
if (isNaN(this.targetTime) || Math.abs(this.currentTime - this.targetTime) < this.frameThreshold) {
|
|
138
|
+
this.video.pause();
|
|
139
|
+
this.transitioning = false;
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
// Make sure we don't go out of time bounds
|
|
143
|
+
if (this.targetTime > this.video.duration) {
|
|
144
|
+
this.targetTime = this.video.duration;
|
|
145
|
+
}
|
|
146
|
+
if (this.targetTime < 0) {
|
|
147
|
+
this.targetTime = 0;
|
|
148
|
+
}
|
|
149
|
+
// How far forward we need to transition
|
|
150
|
+
const transitionForward = this.targetTime - this.currentTime;
|
|
151
|
+
if (this.canvas) {
|
|
152
|
+
// Update currentTime and paint the closest frame
|
|
153
|
+
this.currentTime += transitionForward / (256 / this.transitionSpeed);
|
|
154
|
+
// If jump, we go directly to the frame
|
|
155
|
+
if (jump) {
|
|
156
|
+
this.currentTime = this.targetTime;
|
|
157
|
+
}
|
|
158
|
+
this.paintCanvasFrame(Math.floor(this.currentTime * this.frameRate));
|
|
159
|
+
}
|
|
160
|
+
else if (jump || this.isSafari || this.targetTime - this.currentTime < 0) {
|
|
161
|
+
this.video.pause();
|
|
162
|
+
this.currentTime += transitionForward / (64 / this.transitionSpeed);
|
|
163
|
+
// If jump, we go directly to the frame
|
|
164
|
+
if (jump) {
|
|
165
|
+
this.currentTime = this.targetTime;
|
|
166
|
+
}
|
|
167
|
+
this.video.currentTime = this.currentTime;
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
// Otherwise, we play the video and adjust the playbackRate to get a smoother
|
|
171
|
+
// animation effect.
|
|
172
|
+
const playbackRate = Math.max(Math.min(transitionForward * 4, this.transitionSpeed, 16), 1);
|
|
173
|
+
if (this.debug)
|
|
174
|
+
console.info('ScrollVideo playbackRate:', playbackRate);
|
|
175
|
+
if (!isNaN(playbackRate)) {
|
|
176
|
+
this.video.playbackRate = playbackRate;
|
|
177
|
+
this.video.play();
|
|
178
|
+
}
|
|
179
|
+
this.currentTime = this.video.currentTime;
|
|
180
|
+
}
|
|
181
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
182
|
+
requestAnimationFrame(() => this.transitionToTargetTime(jump));
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
resetCanvasDimensions(w, h, frameW, frameH) {
|
|
186
|
+
if (!this.canvas)
|
|
187
|
+
return;
|
|
188
|
+
if (w / h > frameW / frameH) {
|
|
189
|
+
this.canvas.style.width = '100%';
|
|
190
|
+
this.canvas.style.height = 'auto';
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
this.canvas.style.height = '100%';
|
|
194
|
+
this.canvas.style.width = 'auto';
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
setTargetTimePercent(setPercentage, jump = true) {
|
|
198
|
+
if (!this.video)
|
|
199
|
+
return;
|
|
200
|
+
this.targetTime = Math.max(Math.min(setPercentage, 1), 0)
|
|
201
|
+
* (this.frames.length && this.frameRate ? this.frames.length / this.frameRate : this.video.duration);
|
|
202
|
+
if (!jump && Math.abs(this.currentTime - this.targetTime) < this.frameThreshold)
|
|
203
|
+
return;
|
|
204
|
+
if (!jump && this.transitioning)
|
|
205
|
+
return;
|
|
206
|
+
if (!this.canvas && !this.video.paused)
|
|
207
|
+
this.video.play();
|
|
208
|
+
this.transitioning = true;
|
|
209
|
+
this.transitionToTargetTime(jump);
|
|
210
|
+
}
|
|
211
|
+
destroy() {
|
|
212
|
+
var _a;
|
|
213
|
+
this.resizeObserver.unobserve(this.container);
|
|
214
|
+
(_a = this.video) === null || _a === void 0 ? void 0 : _a.removeEventListener('progress', this.resize);
|
|
215
|
+
if (this.debug)
|
|
216
|
+
console.info('Destroying ScrollVideo');
|
|
217
|
+
if (this.container)
|
|
218
|
+
this.container.innerHTML = '';
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
exports.ScrollPlaybackVideoManager = ScrollPlaybackVideoManager;
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.Writer = void 0;
|
|
37
|
+
// @ts-ignore
|
|
38
|
+
const MP4Box = __importStar(require("mp4box"));
|
|
39
|
+
class Writer {
|
|
40
|
+
constructor(size) {
|
|
41
|
+
this.data = new Uint8Array(size);
|
|
42
|
+
this.idx = 0;
|
|
43
|
+
this.size = size;
|
|
44
|
+
}
|
|
45
|
+
getData() {
|
|
46
|
+
if (this.idx !== this.size)
|
|
47
|
+
throw new Error('Mismatch between size reserved and sized used');
|
|
48
|
+
return this.data.slice(0, this.idx);
|
|
49
|
+
}
|
|
50
|
+
writeUint8(value) {
|
|
51
|
+
this.data.set([value], this.idx);
|
|
52
|
+
this.idx += 1;
|
|
53
|
+
}
|
|
54
|
+
writeUint16(value) {
|
|
55
|
+
const arr = new Uint16Array(1);
|
|
56
|
+
arr[0] = value;
|
|
57
|
+
const buffer = new Uint8Array(arr.buffer);
|
|
58
|
+
this.data.set([buffer[1], buffer[0]], this.idx);
|
|
59
|
+
this.idx += 2;
|
|
60
|
+
}
|
|
61
|
+
writeUint8Array(value) {
|
|
62
|
+
this.data.set(value, this.idx);
|
|
63
|
+
this.idx += value.length;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
exports.Writer = Writer;
|
|
67
|
+
const getExtradata = (avccBox) => {
|
|
68
|
+
let i;
|
|
69
|
+
let size = 7;
|
|
70
|
+
for (i = 0; i < avccBox.SPS.length; i += 1) {
|
|
71
|
+
// nalu length is encoded as a uint16.
|
|
72
|
+
size += 2 + avccBox.SPS[i].length;
|
|
73
|
+
}
|
|
74
|
+
for (i = 0; i < avccBox.PPS.length; i += 1) {
|
|
75
|
+
// nalu length is encoded as a uint16.
|
|
76
|
+
size += 2 + avccBox.PPS[i].length;
|
|
77
|
+
}
|
|
78
|
+
const writer = new Writer(size);
|
|
79
|
+
writer.writeUint8(avccBox.configurationVersion);
|
|
80
|
+
writer.writeUint8(avccBox.AVCProfileIndication);
|
|
81
|
+
writer.writeUint8(avccBox.profile_compatibility);
|
|
82
|
+
writer.writeUint8(avccBox.AVCLevelIndication);
|
|
83
|
+
writer.writeUint8(avccBox.lengthSizeMinusOne + (63 << 2));
|
|
84
|
+
writer.writeUint8(avccBox.nb_SPS_nalus + (7 << 5));
|
|
85
|
+
for (i = 0; i < avccBox.SPS.length; i += 1) {
|
|
86
|
+
writer.writeUint16(avccBox.SPS[i].length);
|
|
87
|
+
writer.writeUint8Array(avccBox.SPS[i].nalu);
|
|
88
|
+
}
|
|
89
|
+
writer.writeUint8(avccBox.nb_PPS_nalus);
|
|
90
|
+
for (i = 0; i < avccBox.PPS.length; i += 1) {
|
|
91
|
+
writer.writeUint16(avccBox.PPS[i].length);
|
|
92
|
+
writer.writeUint8Array(avccBox.PPS[i].nalu);
|
|
93
|
+
}
|
|
94
|
+
return writer.getData();
|
|
95
|
+
};
|
|
96
|
+
const decodeVideo = (src, emitFrame, { VideoDecoder, EncodedVideoChunk, debug }) => new Promise((resolve, reject) => {
|
|
97
|
+
if (debug)
|
|
98
|
+
console.info('Decoding video from', src);
|
|
99
|
+
try {
|
|
100
|
+
const mp4boxfile = MP4Box.createFile();
|
|
101
|
+
let codec;
|
|
102
|
+
const decoder = new VideoDecoder({
|
|
103
|
+
output: (frame) => {
|
|
104
|
+
createImageBitmap(frame, { resizeQuality: 'low' }).then((bitmap) => {
|
|
105
|
+
emitFrame(bitmap);
|
|
106
|
+
frame.close();
|
|
107
|
+
if (decoder.decodeQueueSize <= 0) {
|
|
108
|
+
setTimeout(() => {
|
|
109
|
+
if (decoder.state !== 'closed') {
|
|
110
|
+
decoder.close();
|
|
111
|
+
resolve();
|
|
112
|
+
}
|
|
113
|
+
}, 500);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
},
|
|
117
|
+
error: (e) => {
|
|
118
|
+
console.error(e);
|
|
119
|
+
reject(e);
|
|
120
|
+
},
|
|
121
|
+
});
|
|
122
|
+
mp4boxfile.onReady = (info) => {
|
|
123
|
+
if (info && info.videoTracks && info.videoTracks[0]) {
|
|
124
|
+
[{ codec }] = info.videoTracks;
|
|
125
|
+
if (debug)
|
|
126
|
+
console.info('Video with codec:', codec);
|
|
127
|
+
const avccBox = mp4boxfile.moov.traks[0].mdia.minf.stbl.stsd.entries[0].avcC;
|
|
128
|
+
const extradata = getExtradata(avccBox);
|
|
129
|
+
decoder.configure({ codec, description: extradata });
|
|
130
|
+
mp4boxfile.setExtractionOptions(info.videoTracks[0].id);
|
|
131
|
+
mp4boxfile.start();
|
|
132
|
+
}
|
|
133
|
+
else
|
|
134
|
+
reject(new Error('URL provided is not a valid mp4 video file.'));
|
|
135
|
+
};
|
|
136
|
+
mp4boxfile.onSamples = (track_id, ref, samples) => {
|
|
137
|
+
for (let i = 0; i < samples.length; i += 1) {
|
|
138
|
+
const sample = samples[i];
|
|
139
|
+
const type = sample.is_sync ? 'key' : 'delta';
|
|
140
|
+
const chunk = new EncodedVideoChunk({
|
|
141
|
+
type,
|
|
142
|
+
timestamp: sample.cts,
|
|
143
|
+
duration: sample.duration,
|
|
144
|
+
data: sample.data,
|
|
145
|
+
});
|
|
146
|
+
decoder.decode(chunk);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
fetch(src).then((res) => {
|
|
150
|
+
const reader = res.body.getReader();
|
|
151
|
+
let offset = 0;
|
|
152
|
+
//@ts-ignore
|
|
153
|
+
function appendBuffers({ done, value }) {
|
|
154
|
+
if (done) {
|
|
155
|
+
mp4boxfile.flush();
|
|
156
|
+
return null;
|
|
157
|
+
}
|
|
158
|
+
const buf = value.buffer;
|
|
159
|
+
buf.fileStart = offset;
|
|
160
|
+
offset += buf.byteLength;
|
|
161
|
+
mp4boxfile.appendBuffer(buf);
|
|
162
|
+
return reader.read().then(appendBuffers);
|
|
163
|
+
}
|
|
164
|
+
return reader.read().then(appendBuffers);
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
catch (e) {
|
|
168
|
+
reject(e);
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
exports.default = (src, emitFrame, debug) => {
|
|
172
|
+
if (typeof VideoDecoder === 'function' && typeof EncodedVideoChunk === 'function') {
|
|
173
|
+
if (debug)
|
|
174
|
+
console.info('WebCodecs is natively supported, using native version...');
|
|
175
|
+
return decodeVideo(src, emitFrame, {
|
|
176
|
+
VideoDecoder,
|
|
177
|
+
EncodedVideoChunk,
|
|
178
|
+
debug,
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
if (debug)
|
|
182
|
+
console.info('WebCodecs is not available in this browser.');
|
|
183
|
+
return Promise.resolve();
|
|
184
|
+
};
|
package/{dist → lib}/index.d.ts
RENAMED
|
@@ -19,5 +19,3 @@ export type { Project } from './types/project/Project';
|
|
|
19
19
|
export type { Meta } from './types/project/Meta';
|
|
20
20
|
export type { KeyframeValueMap, KeyframeAny } from './types/keyframe/Keyframe';
|
|
21
21
|
export type { CompoundSettings } from './types/article/CompoundSettings';
|
|
22
|
-
export type { Component } from './types/component/Component';
|
|
23
|
-
export { components } from './Components/components';
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
|
|
4
|
+
// logic
|
|
5
|
+
var Client_1 = require("./Client/Client");
|
|
6
|
+
Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
|
|
7
|
+
var FontFaceGenerator_1 = require("./FontFaceGenerator/FontFaceGenerator");
|
|
8
|
+
Object.defineProperty(exports, "FontFaceGenerator", { enumerable: true, get: function () { return FontFaceGenerator_1.FontFaceGenerator; } });
|
|
9
|
+
var utils_1 = require("./utils");
|
|
10
|
+
Object.defineProperty(exports, "getLayoutStyles", { enumerable: true, get: function () { return utils_1.getLayoutStyles; } });
|
|
11
|
+
Object.defineProperty(exports, "getLayoutMediaQuery", { enumerable: true, get: function () { return utils_1.getLayoutMediaQuery; } });
|
|
12
|
+
var ScrollPlaybackVideoManager_1 = require("./ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
|
|
13
|
+
Object.defineProperty(exports, "ScrollPlaybackVideoManager", { enumerable: true, get: function () { return ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager; } });
|
|
14
|
+
// enums
|
|
15
|
+
var Section_1 = require("./types/article/Section");
|
|
16
|
+
Object.defineProperty(exports, "SectionHeightMode", { enumerable: true, get: function () { return Section_1.SectionHeightMode; } });
|
|
17
|
+
var RichText_1 = require("./types/article/RichText");
|
|
18
|
+
Object.defineProperty(exports, "TextAlign", { enumerable: true, get: function () { return RichText_1.TextAlign; } });
|
|
19
|
+
Object.defineProperty(exports, "TextDecoration", { enumerable: true, get: function () { return RichText_1.TextDecoration; } });
|
|
20
|
+
Object.defineProperty(exports, "TextTransform", { enumerable: true, get: function () { return RichText_1.TextTransform; } });
|
|
21
|
+
Object.defineProperty(exports, "VerticalAlign", { enumerable: true, get: function () { return RichText_1.VerticalAlign; } });
|
|
22
|
+
var ArticleItemType_1 = require("./types/article/ArticleItemType");
|
|
23
|
+
Object.defineProperty(exports, "ArticleItemType", { enumerable: true, get: function () { return ArticleItemType_1.ArticleItemType; } });
|
|
24
|
+
var ItemArea_1 = require("./types/article/ItemArea");
|
|
25
|
+
Object.defineProperty(exports, "AreaAnchor", { enumerable: true, get: function () { return ItemArea_1.AreaAnchor; } });
|
|
26
|
+
Object.defineProperty(exports, "AnchorSide", { enumerable: true, get: function () { return ItemArea_1.AnchorSide; } });
|
|
27
|
+
Object.defineProperty(exports, "DimensionMode", { enumerable: true, get: function () { return ItemArea_1.DimensionMode; } });
|
|
28
|
+
Object.defineProperty(exports, "PositionType", { enumerable: true, get: function () { return ItemArea_1.PositionType; } });
|
|
29
|
+
var Keyframe_1 = require("./types/keyframe/Keyframe");
|
|
30
|
+
Object.defineProperty(exports, "KeyframeType", { enumerable: true, get: function () { return Keyframe_1.KeyframeType; } });
|
|
@@ -3,18 +3,18 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
3
3
|
id: z.ZodString;
|
|
4
4
|
sections: z.ZodArray<z.ZodObject<{
|
|
5
5
|
id: z.ZodString;
|
|
6
|
-
items: z.ZodArray<z.ZodType<import(
|
|
6
|
+
items: z.ZodArray<z.ZodType<import("../..").ItemAny, z.ZodTypeDef, import("../..").ItemAny>, "many">;
|
|
7
7
|
name: z.ZodOptional<z.ZodString>;
|
|
8
8
|
height: z.ZodRecord<z.ZodString, z.ZodObject<{
|
|
9
|
-
mode: z.ZodNativeEnum<typeof import(
|
|
9
|
+
mode: z.ZodNativeEnum<typeof import("../..").SectionHeightMode>;
|
|
10
10
|
units: z.ZodNumber;
|
|
11
11
|
vhUnits: z.ZodOptional<z.ZodNumber>;
|
|
12
12
|
}, "strip", z.ZodTypeAny, {
|
|
13
|
-
mode: import(
|
|
13
|
+
mode: import("../..").SectionHeightMode;
|
|
14
14
|
units: number;
|
|
15
15
|
vhUnits?: number | undefined;
|
|
16
16
|
}, {
|
|
17
|
-
mode: import(
|
|
17
|
+
mode: import("../..").SectionHeightMode;
|
|
18
18
|
units: number;
|
|
19
19
|
vhUnits?: number | undefined;
|
|
20
20
|
}>>;
|
|
@@ -70,11 +70,11 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
70
70
|
position: Record<string, number>;
|
|
71
71
|
id: string;
|
|
72
72
|
height: Record<string, {
|
|
73
|
-
mode: import(
|
|
73
|
+
mode: import("../..").SectionHeightMode;
|
|
74
74
|
units: number;
|
|
75
75
|
vhUnits?: number | undefined;
|
|
76
76
|
}>;
|
|
77
|
-
items: import(
|
|
77
|
+
items: import("../..").ItemAny[];
|
|
78
78
|
name?: string | undefined;
|
|
79
79
|
media?: Record<string, {
|
|
80
80
|
url: string;
|
|
@@ -97,11 +97,11 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
97
97
|
position: Record<string, number>;
|
|
98
98
|
id: string;
|
|
99
99
|
height: Record<string, {
|
|
100
|
-
mode: import(
|
|
100
|
+
mode: import("../..").SectionHeightMode;
|
|
101
101
|
units: number;
|
|
102
102
|
vhUnits?: number | undefined;
|
|
103
103
|
}>;
|
|
104
|
-
items: import(
|
|
104
|
+
items: import("../..").ItemAny[];
|
|
105
105
|
name?: string | undefined;
|
|
106
106
|
media?: Record<string, {
|
|
107
107
|
url: string;
|
|
@@ -229,11 +229,11 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
229
229
|
position: Record<string, number>;
|
|
230
230
|
id: string;
|
|
231
231
|
height: Record<string, {
|
|
232
|
-
mode: import(
|
|
232
|
+
mode: import("../..").SectionHeightMode;
|
|
233
233
|
units: number;
|
|
234
234
|
vhUnits?: number | undefined;
|
|
235
235
|
}>;
|
|
236
|
-
items: import(
|
|
236
|
+
items: import("../..").ItemAny[];
|
|
237
237
|
name?: string | undefined;
|
|
238
238
|
media?: Record<string, {
|
|
239
239
|
url: string;
|
|
@@ -281,11 +281,11 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
281
281
|
position: Record<string, number>;
|
|
282
282
|
id: string;
|
|
283
283
|
height: Record<string, {
|
|
284
|
-
mode: import(
|
|
284
|
+
mode: import("../..").SectionHeightMode;
|
|
285
285
|
units: number;
|
|
286
286
|
vhUnits?: number | undefined;
|
|
287
287
|
}>;
|
|
288
|
-
items: import(
|
|
288
|
+
items: import("../..").ItemAny[];
|
|
289
289
|
name?: string | undefined;
|
|
290
290
|
media?: Record<string, {
|
|
291
291
|
url: string;
|
|
@@ -32,9 +32,9 @@ export declare const ItemBaseSchema: z.ZodObject<{
|
|
|
32
32
|
height: z.ZodNumber;
|
|
33
33
|
zIndex: z.ZodNumber;
|
|
34
34
|
angle: z.ZodNumber;
|
|
35
|
-
anchorSide: z.ZodOptional<z.ZodNativeEnum<typeof import(
|
|
35
|
+
anchorSide: z.ZodOptional<z.ZodNativeEnum<typeof import("../../types/article/ItemArea").AnchorSide>>;
|
|
36
36
|
scale: z.ZodNumber;
|
|
37
|
-
positionType: z.ZodNativeEnum<typeof import(
|
|
37
|
+
positionType: z.ZodNativeEnum<typeof import("../../types/article/ItemArea").PositionType>;
|
|
38
38
|
scaleAnchor: z.ZodNativeEnum<typeof AreaAnchor>;
|
|
39
39
|
}, "strip", z.ZodTypeAny, {
|
|
40
40
|
left: number;
|
|
@@ -44,9 +44,9 @@ export declare const ItemBaseSchema: z.ZodObject<{
|
|
|
44
44
|
width: number;
|
|
45
45
|
height: number;
|
|
46
46
|
zIndex: number;
|
|
47
|
-
positionType: import(
|
|
47
|
+
positionType: import("../../types/article/ItemArea").PositionType;
|
|
48
48
|
scaleAnchor: AreaAnchor;
|
|
49
|
-
anchorSide?: import(
|
|
49
|
+
anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
|
|
50
50
|
}, {
|
|
51
51
|
left: number;
|
|
52
52
|
top: number;
|
|
@@ -55,9 +55,9 @@ export declare const ItemBaseSchema: z.ZodObject<{
|
|
|
55
55
|
width: number;
|
|
56
56
|
height: number;
|
|
57
57
|
zIndex: number;
|
|
58
|
-
positionType: import(
|
|
58
|
+
positionType: import("../../types/article/ItemArea").PositionType;
|
|
59
59
|
scaleAnchor: AreaAnchor;
|
|
60
|
-
anchorSide?: import(
|
|
60
|
+
anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
|
|
61
61
|
}>>;
|
|
62
62
|
hidden: z.ZodRecord<z.ZodString, z.ZodBoolean>;
|
|
63
63
|
link: z.ZodOptional<z.ZodObject<{
|
|
@@ -95,9 +95,9 @@ export declare const ItemBaseSchema: z.ZodObject<{
|
|
|
95
95
|
width: number;
|
|
96
96
|
height: number;
|
|
97
97
|
zIndex: number;
|
|
98
|
-
positionType: import(
|
|
98
|
+
positionType: import("../../types/article/ItemArea").PositionType;
|
|
99
99
|
scaleAnchor: AreaAnchor;
|
|
100
|
-
anchorSide?: import(
|
|
100
|
+
anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
|
|
101
101
|
}>;
|
|
102
102
|
link?: {
|
|
103
103
|
url: string;
|
|
@@ -120,9 +120,9 @@ export declare const ItemBaseSchema: z.ZodObject<{
|
|
|
120
120
|
width: number;
|
|
121
121
|
height: number;
|
|
122
122
|
zIndex: number;
|
|
123
|
-
positionType: import(
|
|
123
|
+
positionType: import("../../types/article/ItemArea").PositionType;
|
|
124
124
|
scaleAnchor: AreaAnchor;
|
|
125
|
-
anchorSide?: import(
|
|
125
|
+
anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
|
|
126
126
|
}>;
|
|
127
127
|
link?: {
|
|
128
128
|
url: string;
|