Skip to content

Commit 1d69b7e

Browse files
xiaoxiangmoexiaoxiangmoe
committed
Add tsdoc
1 parent c45d817 commit 1d69b7e

File tree

5 files changed

+331
-8
lines changed

5 files changed

+331
-8
lines changed

‎docs/index.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/generate-player-interface.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// this script generate interface Player for `player.ts`
2+
3+
const interfaces = `addListener(event: string | symbol, listener: (...args: any[]) => void): this;
4+
on(event: string | symbol, listener: (...args: any[]) => void): this;
5+
once(event: string | symbol, listener: (...args: any[]) => void): this;
6+
removeListener(event: string | symbol, listener: (...args: any[]) => void): this;
7+
off(event: string | symbol, listener: (...args: any[]) => void): this;
8+
emit(event: string | symbol, ...args: any[]): boolean;
9+
prependListener(event: string | symbol, listener: (...args: any[]) => void): this;
10+
prependOnceListener(event: string | symbol, listener: (...args: any[]) => void): this;`;
11+
const data = [
12+
{
13+
event: 'play',
14+
doc: 'playback started',
15+
},
16+
{
17+
event: 'frame',
18+
args: 'currentFrameNumber: number',
19+
doc: 'frame played',
20+
},
21+
{
22+
event: 'pause',
23+
doc: 'playback paused',
24+
},
25+
{
26+
event: 'stop',
27+
doc: 'playback stopped',
28+
},
29+
{
30+
event: 'end',
31+
doc: 'playback ended (for APNG with finite count of plays)',
32+
},
33+
];
34+
// eslint-disable-next-line no-console
35+
console.log(`
36+
interface Player{${interfaces
37+
.split('\n')
38+
.flatMap(method => [
39+
'\n',
40+
...data.map(
41+
x => `/**
42+
* ${x.doc}
43+
*/
44+
${method
45+
.replace('event: string | symbol', `event: '${x.event}'`)
46+
.replace('...args: any[]', x.args || '')}`,
47+
),
48+
])
49+
.join('\n')
50+
.split('\n')
51+
.map(x => ` ${x}`)
52+
.join('\n')}
53+
}
54+
`);

‎src/demo-page/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
12
/* eslint-disable no-shadow */
23
/* eslint-disable no-param-reassign */
34
import parseAPNG from '../library/parser';
@@ -124,7 +125,7 @@ function processFile(file: File) {
124125
player.playbackRate = playbackRate;
125126
const em = player.emit.bind(player);
126127
// eslint-disable-next-line @typescript-eslint/unbound-method
127-
player.emit = (event, ...args) => {
128+
player.emit = (event: string, ...args: any[]) => {
128129
log.unshift({ event, args });
129130
if (log.length > 10) {
130131
log.splice(10, log.length - 10);
@@ -135,7 +136,7 @@ function processFile(file: File) {
135136
)
136137
.join('\n');
137138

138-
return em(event, ...args);
139+
return (em as any)(event, ...args);
139140
};
140141
player.play();
141142
});

‎src/library/player.ts

+214-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import { EventEmitter } from 'events';
22
import { APNG, Frame } from './structs';
33

4-
export default class Player extends EventEmitter {
4+
class Player extends EventEmitter {
55
public context: CanvasRenderingContext2D;
66

7+
/**
8+
* animation playback rate
9+
*/
710
public playbackRate = 1.0;
811

912
private _apng: APNG;
@@ -34,14 +37,25 @@ export default class Player extends EventEmitter {
3437
}
3538
}
3639

40+
/**
41+
* current frame number
42+
*/
3743
public get currentFrameNumber() {
3844
return this._currentFrameNumber;
3945
}
4046

47+
/**
48+
* current frame
49+
*/
4150
public get currentFrame() {
4251
return this._apng.frames[this._currentFrameNumber];
4352
}
4453

54+
/**
55+
* move to next frame and render it on context
56+
*
57+
* Use this method to manual, frame by frame, rendering.
58+
*/
4559
public renderNextFrame() {
4660
this._currentFrameNumber =
4761
(this._currentFrameNumber + 1) % this._apng.frames.length;
@@ -93,14 +107,23 @@ export default class Player extends EventEmitter {
93107

94108
// playback
95109

110+
/**
111+
* playback is paused
112+
*/
96113
public get paused() {
97114
return this._paused;
98115
}
99116

117+
/**
118+
* playback is ended
119+
*/
100120
public get ended() {
101121
return this._ended;
102122
}
103123

124+
/**
125+
* start or resume playback
126+
*/
104127
public play() {
105128
this.emit('play');
106129

@@ -133,13 +156,19 @@ export default class Player extends EventEmitter {
133156
requestAnimationFrame(tick);
134157
}
135158

159+
/**
160+
* pause playback
161+
*/
136162
public pause() {
137163
if (!this._paused) {
138164
this.emit('pause');
139165
this._paused = true;
140166
}
141167
}
142168

169+
/**
170+
* stop playback and rewind to start
171+
*/
143172
public stop() {
144173
this.emit('stop');
145174
this._numPlays = 0;
@@ -151,3 +180,187 @@ export default class Player extends EventEmitter {
151180
this.renderNextFrame();
152181
}
153182
}
183+
184+
interface Player {
185+
/**
186+
* playback started
187+
*/
188+
addListener(event: 'play', listener: () => void): this;
189+
/**
190+
* frame played
191+
*/
192+
addListener(
193+
event: 'frame',
194+
listener: (currentFrameNumber: number) => void,
195+
): this;
196+
/**
197+
* playback paused
198+
*/
199+
addListener(event: 'pause', listener: () => void): this;
200+
/**
201+
* playback stopped
202+
*/
203+
addListener(event: 'stop', listener: () => void): this;
204+
/**
205+
* playback ended (for APNG with finite count of plays)
206+
*/
207+
addListener(event: 'end', listener: () => void): this;
208+
209+
/**
210+
* playback started
211+
*/
212+
on(event: 'play', listener: () => void): this;
213+
/**
214+
* frame played
215+
*/
216+
on(event: 'frame', listener: (currentFrameNumber: number) => void): this;
217+
/**
218+
* playback paused
219+
*/
220+
on(event: 'pause', listener: () => void): this;
221+
/**
222+
* playback stopped
223+
*/
224+
on(event: 'stop', listener: () => void): this;
225+
/**
226+
* playback ended (for APNG with finite count of plays)
227+
*/
228+
on(event: 'end', listener: () => void): this;
229+
230+
/**
231+
* playback started
232+
*/
233+
once(event: 'play', listener: () => void): this;
234+
/**
235+
* frame played
236+
*/
237+
once(event: 'frame', listener: (currentFrameNumber: number) => void): this;
238+
/**
239+
* playback paused
240+
*/
241+
once(event: 'pause', listener: () => void): this;
242+
/**
243+
* playback stopped
244+
*/
245+
once(event: 'stop', listener: () => void): this;
246+
/**
247+
* playback ended (for APNG with finite count of plays)
248+
*/
249+
once(event: 'end', listener: () => void): this;
250+
251+
/**
252+
* playback started
253+
*/
254+
removeListener(event: 'play', listener: () => void): this;
255+
/**
256+
* frame played
257+
*/
258+
removeListener(
259+
event: 'frame',
260+
listener: (currentFrameNumber: number) => void,
261+
): this;
262+
/**
263+
* playback paused
264+
*/
265+
removeListener(event: 'pause', listener: () => void): this;
266+
/**
267+
* playback stopped
268+
*/
269+
removeListener(event: 'stop', listener: () => void): this;
270+
/**
271+
* playback ended (for APNG with finite count of plays)
272+
*/
273+
removeListener(event: 'end', listener: () => void): this;
274+
275+
/**
276+
* playback started
277+
*/
278+
off(event: 'play', listener: () => void): this;
279+
/**
280+
* frame played
281+
*/
282+
off(event: 'frame', listener: (currentFrameNumber: number) => void): this;
283+
/**
284+
* playback paused
285+
*/
286+
off(event: 'pause', listener: () => void): this;
287+
/**
288+
* playback stopped
289+
*/
290+
off(event: 'stop', listener: () => void): this;
291+
/**
292+
* playback ended (for APNG with finite count of plays)
293+
*/
294+
off(event: 'end', listener: () => void): this;
295+
296+
/**
297+
* playback started
298+
*/
299+
emit(event: 'play'): boolean;
300+
/**
301+
* frame played
302+
*/
303+
emit(event: 'frame', currentFrameNumber: number): boolean;
304+
/**
305+
* playback paused
306+
*/
307+
emit(event: 'pause'): boolean;
308+
/**
309+
* playback stopped
310+
*/
311+
emit(event: 'stop'): boolean;
312+
/**
313+
* playback ended (for APNG with finite count of plays)
314+
*/
315+
emit(event: 'end'): boolean;
316+
317+
/**
318+
* playback started
319+
*/
320+
prependListener(event: 'play', listener: () => void): this;
321+
/**
322+
* frame played
323+
*/
324+
prependListener(
325+
event: 'frame',
326+
listener: (currentFrameNumber: number) => void,
327+
): this;
328+
/**
329+
* playback paused
330+
*/
331+
prependListener(event: 'pause', listener: () => void): this;
332+
/**
333+
* playback stopped
334+
*/
335+
prependListener(event: 'stop', listener: () => void): this;
336+
/**
337+
* playback ended (for APNG with finite count of plays)
338+
*/
339+
prependListener(event: 'end', listener: () => void): this;
340+
341+
/**
342+
* playback started
343+
*/
344+
prependOnceListener(event: 'play', listener: () => void): this;
345+
/**
346+
* frame played
347+
*/
348+
prependOnceListener(
349+
event: 'frame',
350+
listener: (currentFrameNumber: number) => void,
351+
): this;
352+
/**
353+
* playback paused
354+
*/
355+
prependOnceListener(event: 'pause', listener: () => void): this;
356+
/**
357+
* playback stopped
358+
*/
359+
prependOnceListener(event: 'stop', listener: () => void): this;
360+
/**
361+
* playback ended (for APNG with finite count of plays)
362+
*/
363+
prependOnceListener(event: 'end', listener: () => void): this;
364+
}
365+
366+
export default Player;

0 commit comments

Comments
 (0)