@cntrl-site/sdk 1.24.5-4 → 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.
Files changed (89) hide show
  1. package/lib/FontFaceGenerator/FontFaceGenerator.js +28 -0
  2. package/lib/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.js +221 -0
  3. package/lib/VideoDecoder/VideoDecoder.js +184 -0
  4. package/{dist → lib}/index.d.ts +0 -2
  5. package/lib/index.js +30 -0
  6. package/{dist → lib}/schemas/article/Article.schema.d.ts +12 -12
  7. package/{dist → lib}/schemas/article/ItemBase.schema.d.ts +10 -10
  8. package/{dist → lib}/schemas/article/RichTextItem.schema.d.ts +30 -30
  9. package/{dist → lib}/schemas/article/Section.schema.d.ts +3 -3
  10. package/{dist → lib}/types/keyframe/Keyframe.d.ts +1 -1
  11. package/lib/utils.js +30 -0
  12. package/package.json +9 -31
  13. package/dist/Client/Client.test.d.ts +0 -1
  14. package/dist/Client/__mock__/articleMock.d.ts +0 -2
  15. package/dist/Client/__mock__/keyframesMock.d.ts +0 -2
  16. package/dist/Client/__mock__/projectMock.d.ts +0 -2
  17. package/dist/Components/ControlSlider/ControlSlider.d.ts +0 -90
  18. package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +0 -516
  19. package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +0 -218
  20. package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts +0 -38
  21. package/dist/Components/components.d.ts +0 -2
  22. package/dist/Components/helpers/RichTextRenderer/RichTextRenderer.d.ts +0 -6
  23. package/dist/Components/helpers/SvgImage/SvgImage.d.ts +0 -9
  24. package/dist/Components/utils/scalingValue.d.ts +0 -1
  25. package/dist/FontFaceGenerator/FontFaceGenerator.test.d.ts +0 -1
  26. package/dist/index.js +0 -2737
  27. package/dist/index.mjs +0 -2720
  28. package/dist/schemas/shared/FillLayer.schema.d.ts +0 -186
  29. package/dist/sdk.css +0 -1
  30. package/dist/types/component/Component.d.ts +0 -15
  31. /package/{dist → lib}/Client/Client.d.ts +0 -0
  32. /package/{dist → lib}/Client/Client.js +0 -0
  33. /package/{dist → lib}/FontFaceGenerator/FontFaceGenerator.d.ts +0 -0
  34. /package/{dist → lib}/ScrollPlaybackVideoManager/ScrollPlaybackVideoManager.d.ts +0 -0
  35. /package/{dist → lib}/VideoDecoder/VideoDecoder.d.ts +0 -0
  36. /package/{dist → lib}/cli.d.ts +0 -0
  37. /package/{dist → lib}/cli.js +0 -0
  38. /package/{dist → lib}/schemas/article/Article.schema.js +0 -0
  39. /package/{dist → lib}/schemas/article/FillLayer.schema.d.ts +0 -0
  40. /package/{dist → lib}/schemas/article/FillLayer.schema.js +0 -0
  41. /package/{dist → lib}/schemas/article/Interaction.schema.d.ts +0 -0
  42. /package/{dist → lib}/schemas/article/Interaction.schema.js +0 -0
  43. /package/{dist → lib}/schemas/article/Item.schema.d.ts +0 -0
  44. /package/{dist → lib}/schemas/article/Item.schema.js +0 -0
  45. /package/{dist → lib}/schemas/article/ItemArea.schema.d.ts +0 -0
  46. /package/{dist → lib}/schemas/article/ItemArea.schema.js +0 -0
  47. /package/{dist → lib}/schemas/article/ItemBase.schema.js +0 -0
  48. /package/{dist → lib}/schemas/article/ItemState.schema.d.ts +0 -0
  49. /package/{dist → lib}/schemas/article/ItemState.schema.js +0 -0
  50. /package/{dist → lib}/schemas/article/RichTextItem.schema.js +0 -0
  51. /package/{dist → lib}/schemas/article/Section.schema.js +0 -0
  52. /package/{dist → lib}/schemas/keyframe/Keyframes.schema.d.ts +0 -0
  53. /package/{dist → lib}/schemas/keyframe/Keyframes.schema.js +0 -0
  54. /package/{dist → lib}/schemas/project/Layout.schema.d.ts +0 -0
  55. /package/{dist → lib}/schemas/project/Layout.schema.js +0 -0
  56. /package/{dist → lib}/schemas/project/Project.schema.d.ts +0 -0
  57. /package/{dist → lib}/schemas/project/Project.schema.js +0 -0
  58. /package/{dist → lib}/types/article/Article.d.ts +0 -0
  59. /package/{dist → lib}/types/article/Article.js +0 -0
  60. /package/{dist → lib}/types/article/ArticleItemType.d.ts +0 -0
  61. /package/{dist → lib}/types/article/ArticleItemType.js +0 -0
  62. /package/{dist → lib}/types/article/CompoundSettings.d.ts +0 -0
  63. /package/{dist → lib}/types/article/CompoundSettings.js +0 -0
  64. /package/{dist → lib}/types/article/FX.d.ts +0 -0
  65. /package/{dist → lib}/types/article/FX.js +0 -0
  66. /package/{dist → lib}/types/article/Interaction.d.ts +0 -0
  67. /package/{dist → lib}/types/article/Interaction.js +0 -0
  68. /package/{dist → lib}/types/article/Item.d.ts +0 -0
  69. /package/{dist → lib}/types/article/Item.js +0 -0
  70. /package/{dist → lib}/types/article/ItemArea.d.ts +0 -0
  71. /package/{dist → lib}/types/article/ItemArea.js +0 -0
  72. /package/{dist → lib}/types/article/ItemState.d.ts +0 -0
  73. /package/{dist → lib}/types/article/ItemState.js +0 -0
  74. /package/{dist → lib}/types/article/RichText.d.ts +0 -0
  75. /package/{dist → lib}/types/article/RichText.js +0 -0
  76. /package/{dist → lib}/types/article/Section.d.ts +0 -0
  77. /package/{dist → lib}/types/article/Section.js +0 -0
  78. /package/{dist → lib}/types/keyframe/Keyframe.js +0 -0
  79. /package/{dist → lib}/types/project/Fonts.d.ts +0 -0
  80. /package/{dist → lib}/types/project/Fonts.js +0 -0
  81. /package/{dist → lib}/types/project/Layout.d.ts +0 -0
  82. /package/{dist → lib}/types/project/Layout.js +0 -0
  83. /package/{dist → lib}/types/project/Meta.d.ts +0 -0
  84. /package/{dist → lib}/types/project/Meta.js +0 -0
  85. /package/{dist → lib}/types/project/Page.d.ts +0 -0
  86. /package/{dist → lib}/types/project/Page.js +0 -0
  87. /package/{dist → lib}/types/project/Project.d.ts +0 -0
  88. /package/{dist → lib}/types/project/Project.js +0 -0
  89. /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
+ };
@@ -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('../..').ItemAny, z.ZodTypeDef, import('../..').ItemAny>, "many">;
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('../..').SectionHeightMode>;
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('../..').SectionHeightMode;
13
+ mode: import("../..").SectionHeightMode;
14
14
  units: number;
15
15
  vhUnits?: number | undefined;
16
16
  }, {
17
- mode: import('../..').SectionHeightMode;
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('../..').SectionHeightMode;
73
+ mode: import("../..").SectionHeightMode;
74
74
  units: number;
75
75
  vhUnits?: number | undefined;
76
76
  }>;
77
- items: import('../..').ItemAny[];
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('../..').SectionHeightMode;
100
+ mode: import("../..").SectionHeightMode;
101
101
  units: number;
102
102
  vhUnits?: number | undefined;
103
103
  }>;
104
- items: import('../..').ItemAny[];
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('../..').SectionHeightMode;
232
+ mode: import("../..").SectionHeightMode;
233
233
  units: number;
234
234
  vhUnits?: number | undefined;
235
235
  }>;
236
- items: import('../..').ItemAny[];
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('../..').SectionHeightMode;
284
+ mode: import("../..").SectionHeightMode;
285
285
  units: number;
286
286
  vhUnits?: number | undefined;
287
287
  }>;
288
- items: import('../..').ItemAny[];
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('../../types/article/ItemArea').AnchorSide>>;
35
+ anchorSide: z.ZodOptional<z.ZodNativeEnum<typeof import("../../types/article/ItemArea").AnchorSide>>;
36
36
  scale: z.ZodNumber;
37
- positionType: z.ZodNativeEnum<typeof import('../../types/article/ItemArea').PositionType>;
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('../../types/article/ItemArea').PositionType;
47
+ positionType: import("../../types/article/ItemArea").PositionType;
48
48
  scaleAnchor: AreaAnchor;
49
- anchorSide?: import('../../types/article/ItemArea').AnchorSide | undefined;
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('../../types/article/ItemArea').PositionType;
58
+ positionType: import("../../types/article/ItemArea").PositionType;
59
59
  scaleAnchor: AreaAnchor;
60
- anchorSide?: import('../../types/article/ItemArea').AnchorSide | undefined;
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('../../types/article/ItemArea').PositionType;
98
+ positionType: import("../../types/article/ItemArea").PositionType;
99
99
  scaleAnchor: AreaAnchor;
100
- anchorSide?: import('../../types/article/ItemArea').AnchorSide | undefined;
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('../../types/article/ItemArea').PositionType;
123
+ positionType: import("../../types/article/ItemArea").PositionType;
124
124
  scaleAnchor: AreaAnchor;
125
- anchorSide?: import('../../types/article/ItemArea').AnchorSide | undefined;
125
+ anchorSide?: import("../../types/article/ItemArea").AnchorSide | undefined;
126
126
  }>;
127
127
  link?: {
128
128
  url: string;