82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
|
import { observeTimeline } from '../render/dom/scroll/observe.mjs';
|
||
|
|
import { supportsScrollTimeline } from '../render/dom/scroll/supports.mjs';
|
||
|
|
|
||
|
|
class GroupPlaybackControls {
|
||
|
|
constructor(animations) {
|
||
|
|
this.animations = animations.filter(Boolean);
|
||
|
|
}
|
||
|
|
then(onResolve, onReject) {
|
||
|
|
return Promise.all(this.animations).then(onResolve).catch(onReject);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* TODO: Filter out cancelled or stopped animations before returning
|
||
|
|
*/
|
||
|
|
getAll(propName) {
|
||
|
|
return this.animations[0][propName];
|
||
|
|
}
|
||
|
|
setAll(propName, newValue) {
|
||
|
|
for (let i = 0; i < this.animations.length; i++) {
|
||
|
|
this.animations[i][propName] = newValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
attachTimeline(timeline) {
|
||
|
|
const cancelAll = this.animations.map((animation) => {
|
||
|
|
if (supportsScrollTimeline() && animation.attachTimeline) {
|
||
|
|
animation.attachTimeline(timeline);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
animation.pause();
|
||
|
|
return observeTimeline((progress) => {
|
||
|
|
animation.time = animation.duration * progress;
|
||
|
|
}, timeline);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return () => {
|
||
|
|
cancelAll.forEach((cancelTimeline, i) => {
|
||
|
|
if (cancelTimeline)
|
||
|
|
cancelTimeline();
|
||
|
|
this.animations[i].stop();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|
||
|
|
get time() {
|
||
|
|
return this.getAll("time");
|
||
|
|
}
|
||
|
|
set time(time) {
|
||
|
|
this.setAll("time", time);
|
||
|
|
}
|
||
|
|
get speed() {
|
||
|
|
return this.getAll("speed");
|
||
|
|
}
|
||
|
|
set speed(speed) {
|
||
|
|
this.setAll("speed", speed);
|
||
|
|
}
|
||
|
|
get duration() {
|
||
|
|
let max = 0;
|
||
|
|
for (let i = 0; i < this.animations.length; i++) {
|
||
|
|
max = Math.max(max, this.animations[i].duration);
|
||
|
|
}
|
||
|
|
return max;
|
||
|
|
}
|
||
|
|
runAll(methodName) {
|
||
|
|
this.animations.forEach((controls) => controls[methodName]());
|
||
|
|
}
|
||
|
|
play() {
|
||
|
|
this.runAll("play");
|
||
|
|
}
|
||
|
|
pause() {
|
||
|
|
this.runAll("pause");
|
||
|
|
}
|
||
|
|
stop() {
|
||
|
|
this.runAll("stop");
|
||
|
|
}
|
||
|
|
cancel() {
|
||
|
|
this.runAll("cancel");
|
||
|
|
}
|
||
|
|
complete() {
|
||
|
|
this.runAll("complete");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { GroupPlaybackControls };
|