Skip to content

Commit ea12baa

Browse files
k9p5k9p5
committed
changed render base unit to timestamp
1 parent 5db9123 commit ea12baa

26 files changed

+145
-104
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>80%</h1>
2727
<i data-lucide="skip-forward"></i>
2828
</div>
2929
<span id="time">00:00 / 00:00</span>
30+
<i data-lucide="gauge"></i>
3031
<button id="export" type="button">
3132
<div class="loader" style="display: none;"></div>
3233
Export

‎playground/export.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11

22
import * as core from '../src';
33

4+
let fps = 30;
5+
46
export async function exportComposition(composition: core.Composition) {
57
if (loader.style.display != 'none') return;
68

79
try {
8-
const encoder = new core.WebcodecsEncoder(composition, { debug: true });
10+
const encoder = new core.WebcodecsEncoder(composition, { debug: true, fps });
911

1012
encoder.on('render', (event) => {
1113
const { progress, total } = event.detail;
@@ -41,3 +43,12 @@ export async function exportComposition(composition: core.Composition) {
4143
const container = document.querySelector('[id="progress"]') as HTMLDivElement;
4244
const text = document.querySelector('[id="progress"] > h1') as HTMLHeadingElement;
4345
const loader = document.querySelector('.loader') as HTMLDivElement;
46+
const fpsButton = document.querySelector('[data-lucide="gauge"]') as HTMLElement;
47+
48+
fpsButton.addEventListener('click', () => {
49+
const value = parseFloat(
50+
prompt("Please enter the desired frame rate", fps.toString()) ?? fps.toString()
51+
);
52+
53+
if (!Number.isNaN(value)) fps = value
54+
});

‎src/clips/clip/clip.decorator.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import { describe, expect, it, vi } from 'vitest';
99
import { Clip } from './clip';
1010
import { WebGPURenderer } from 'pixi.js';
11+
import { Timestamp } from '../../models';
1112

1213
describe('The render decorator', () => {
1314
it('should not render the compostition if the clip is disabled', () => {
@@ -16,13 +17,13 @@ describe('The render decorator', () => {
1617
const renderSpy = vi.spyOn(renderer, 'render').mockImplementation(() => { });
1718
const unrenderSpy = vi.spyOn(clip, 'unrender');
1819

19-
clip.render(renderer, 0);
20+
clip.render(renderer, new Timestamp());
2021

2122
expect(renderSpy).toHaveBeenCalledOnce();
2223
expect(unrenderSpy).not.toHaveBeenCalled();
2324

2425
clip.set({ disabled: true });
25-
clip.render(renderer, 0);
26+
clip.render(renderer, new Timestamp());
2627

2728
expect(renderSpy).toHaveBeenCalledOnce();
2829
expect(unrenderSpy).toHaveBeenCalledOnce()

‎src/clips/clip/clip.decorator.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
* Public License, v. 2.0 that can be found in the LICENSE file.
66
*/
77

8+
import type { Renderer } from "pixi.js";
89
import type { Clip } from "./clip";
10+
import type { Timestamp } from "../../models";
911

1012
/**
1113
* Decorator that only renders the frame if
@@ -15,7 +17,7 @@ export function toggle<T extends Clip> // @ts-ignore
1517
(target: T, propertyKey: string, descriptor: PropertyDescriptor) {
1618
const originalMethod = descriptor.value;
1719

18-
descriptor.value = function (this: T, ...args: any[]) {
20+
descriptor.value = function (this: T, ...args: [Renderer, Timestamp]) {
1921
if (this.disabled) {
2022
this.unrender();
2123
return;

‎src/clips/clip/clip.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export class Clip<Props extends ClipProps = ClipProps> extends EventEmitterMixin
168168
* Render the current frame
169169
*/
170170
@toggle
171-
public render(renderer: Renderer, time: number): void | Promise<void> {
171+
public render(renderer: Renderer, time: Timestamp): void | Promise<void> {
172172
renderer.render({ container: this.container, clear: false }); time;
173173
}
174174

‎src/clips/clip/clip.utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function replaceKeyframes(obj: any, time: Timestamp, depth = 0) {
3030
if (!key) continue;
3131

3232
if (value instanceof Keyframe) {
33-
obj[key] = value.value(time.millis);
33+
obj[key] = value.value(time);
3434
}
3535

3636
if (value != null && typeof value == 'object' && Object.keys(value).length) {

‎src/clips/html/html.spec.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { describe, expect, it, vi, beforeEach } from 'vitest';
99
import { HtmlClip } from './html';
1010
import { sleep } from '../../utils';
1111
import { BlurFilter, WebGPURenderer } from 'pixi.js';
12-
import { Keyframe } from '../../models';
12+
import { Keyframe, Timestamp } from '../../models';
1313
import { HtmlSource } from '../../sources';
1414

1515
const file = new File(['<h1>Hello World</h1>'], 'index.html', {
@@ -49,19 +49,19 @@ describe('The Html Clip', () => {
4949

5050
const filterSpy = vi.spyOn(clip.container, 'filters', 'set');
5151

52-
clip.render(renderer, 0);
52+
clip.render(renderer, new Timestamp());
5353

5454
expect(filterSpy).not.toHaveBeenCalled();
5555

5656
clip.set({ filters: new BlurFilter() });
5757

58-
clip.render(renderer, 0);
58+
clip.render(renderer, new Timestamp());
5959

6060
expect(filterSpy).toHaveBeenCalledOnce();
6161

6262
vi.spyOn(clip.container, 'filters', 'get').mockReturnValue([new BlurFilter()]);
6363
// render again, it should only assign once
64-
clip.render(renderer, 0);
64+
clip.render(renderer, new Timestamp());
6565

6666
expect(filterSpy).toHaveBeenCalledOnce();
6767

@@ -146,13 +146,13 @@ describe('The render decorator', () => {
146146
const renderSpy = vi.spyOn(renderer, 'render').mockImplementation(() => { });
147147
const unrenderSpy = vi.spyOn(clip, 'unrender');
148148

149-
clip.render(renderer, 0);
149+
clip.render(renderer, new Timestamp());
150150

151151
expect(renderSpy).toHaveBeenCalledOnce();
152152
expect(unrenderSpy).not.toHaveBeenCalled();
153153

154154
clip.set({ disabled: true });
155-
clip.render(renderer, 0);
155+
clip.render(renderer, new Timestamp());
156156

157157
expect(renderSpy).toHaveBeenCalledOnce();
158158
expect(unrenderSpy).toHaveBeenCalledOnce()
@@ -168,22 +168,22 @@ describe('The visualize decorator', () => {
168168
const filterSpy = vi.spyOn(clip.container, 'filters', 'set');
169169
const renderSpy = vi.spyOn(renderer, 'render');
170170

171-
clip.render(renderer, 0);
171+
clip.render(renderer, new Timestamp());
172172

173173
expect(filterSpy).not.toHaveBeenCalled();
174174
expect(renderSpy).toHaveBeenCalledTimes(1);
175175

176176
clip.set({ filters: new BlurFilter() });
177177

178-
clip.render(renderer, 0);
178+
clip.render(renderer, new Timestamp());
179179

180180
expect(filterSpy).toHaveBeenCalledOnce();
181181
expect(renderSpy).toHaveBeenCalledTimes(2);
182182

183183
vi.spyOn(clip.container, 'filters', 'get').mockReturnValue([new BlurFilter()]);
184184

185185
// render again, it should only assign once
186-
clip.render(renderer, 0);
186+
clip.render(renderer, new Timestamp());
187187

188188
expect(filterSpy).toHaveBeenCalledOnce();
189189
expect(renderSpy).toHaveBeenCalledTimes(3);

‎src/clips/html/html.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Sprite, Texture } from 'pixi.js';
1313
import type { Track } from '../../tracks';
1414
import type { Renderer } from 'pixi.js';
1515
import type { HtmlClipProps } from './html.interfaces';
16+
import type { Timestamp } from '../../models';
1617

1718
export class HtmlClip extends VisualMixin(AsyncMixin(Clip<HtmlClipProps>)) {
1819
public readonly type = 'html';
@@ -81,7 +82,7 @@ export class HtmlClip extends VisualMixin(AsyncMixin(Clip<HtmlClipProps>)) {
8182

8283
@toggle
8384
@visualize
84-
public render(renderer: Renderer, _: number): void | Promise<void> {
85+
public render(renderer: Renderer, _: Timestamp): void | Promise<void> {
8586
renderer.render({ container: this.container, clear: false });
8687
}
8788

‎src/clips/image/image.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { describe, expect, it, vi, beforeEach } from 'vitest';
99
import { ImageClip } from './image';
1010
import { sleep } from '../../utils';
1111
import { BlurFilter, WebGPURenderer } from 'pixi.js';
12-
import { Keyframe } from '../../models';
12+
import { Keyframe, Timestamp } from '../../models';
1313
import { ImageSource } from '../../sources';
1414

1515
const file = new File([], 'image.png', { type: 'image/png' });
@@ -143,13 +143,13 @@ describe('The render decorator', () => {
143143
const renderSpy = vi.spyOn(renderer, 'render').mockImplementation(() => { });
144144
const unrenderSpy = vi.spyOn(clip, 'unrender');
145145

146-
clip.render(renderer, 0);
146+
clip.render(renderer, new Timestamp());
147147

148148
expect(renderSpy).toHaveBeenCalledOnce();
149149
expect(unrenderSpy).not.toHaveBeenCalled();
150150

151151
clip.set({ disabled: true });
152-
clip.render(renderer, 0);
152+
clip.render(renderer, new Timestamp());
153153

154154
expect(renderSpy).toHaveBeenCalledOnce();
155155
expect(unrenderSpy).toHaveBeenCalledOnce()
@@ -165,22 +165,22 @@ describe('The visualize decorator', () => {
165165
const filterSpy = vi.spyOn(clip.container, 'filters', 'set');
166166
const renderSpy = vi.spyOn(renderer, 'render');
167167

168-
clip.render(renderer, 0);
168+
clip.render(renderer, new Timestamp());
169169

170170
expect(filterSpy).not.toHaveBeenCalled();
171171
expect(renderSpy).toHaveBeenCalledTimes(1);
172172

173173
clip.set({ filters: new BlurFilter() });
174174

175-
clip.render(renderer, 0);
175+
clip.render(renderer, new Timestamp());
176176

177177
expect(filterSpy).toHaveBeenCalledOnce();
178178
expect(renderSpy).toHaveBeenCalledTimes(2);
179179

180180
vi.spyOn(clip.container, 'filters', 'get').mockReturnValue([new BlurFilter()]);
181181

182182
// render again, it should only assign once
183-
clip.render(renderer, 0);
183+
clip.render(renderer, new Timestamp());
184184

185185
expect(filterSpy).toHaveBeenCalledOnce();
186186
expect(renderSpy).toHaveBeenCalledTimes(3);

‎src/clips/image/image.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { VisualMixin, AsyncMixin, visualize } from '../mixins';
1313
import type { Renderer } from 'pixi.js';
1414
import type { Track } from '../../tracks';
1515
import type { ImageClipProps } from './image.interfaces';
16+
import type { Timestamp } from '../../models';
1617

1718
export class ImageClip extends VisualMixin(AsyncMixin(Clip<ImageClipProps>)) {
1819
public readonly type = 'image';
@@ -58,7 +59,7 @@ export class ImageClip extends VisualMixin(AsyncMixin(Clip<ImageClipProps>)) {
5859

5960
@toggle
6061
@visualize
61-
public render(renderer: Renderer, _: number): void | Promise<void> {
62+
public render(renderer: Renderer, _: Timestamp): void | Promise<void> {
6263
renderer.render({ container: this.container, clear: false });
6364
}
6465

0 commit comments

Comments
 (0)