Skip to content

Commit

Permalink
chore: remove unused imports
Browse files Browse the repository at this point in the history
  • Loading branch information
justusmattern27 committed Mar 12, 2024
1 parent 4349f28 commit d7770c9
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 158 deletions.
301 changes: 150 additions & 151 deletions packages/2d/src/lib/components/Media.ts
Original file line number Diff line number Diff line change
@@ -1,160 +1,159 @@
import {
DependencyContext,
PlaybackState,
SignalValue,
SimpleSignal,
clamp,
isReactive,
useLogger,
useThread,
} from '@motion-canvas/core';
import { initial, signal, computed } from '../decorators';
import { Rect, RectProps } from './Rect';
import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';

export interface MediaProps extends RectProps {
src?: SignalValue<string>;
loop?: SignalValue<boolean>;
playbackRate?: number;
time?: SignalValue<number>;
play?: boolean;
}

export abstract class Media extends Rect {
@signal()
public declare readonly src: SimpleSignal<string, this>;

@initial(false)
@signal()
public declare readonly loop: SimpleSignal<boolean, this>;

@initial(1)
@signal()
public declare readonly playbackRate: SimpleSignal<number, this>;

@initial(0)
@signal()
protected declare readonly time: SimpleSignal<number, this>;

@initial(false)
@signal()
protected declare readonly playing: SimpleSignal<boolean, this>;

protected lastTime = -1;

public constructor(props: MediaProps) {
super(props);
if (props.play) {
this.play();
}
}

public isPlaying(): boolean {
return this.playing();
}

public getCurrentTime(): number {
return this.clampTime(this.time());
}

public getDuration(): number {
return this.mediaElement().duration;
}

@computed()
public override completion(): number {
return this.clampTime(this.time()) / this.getDuration();
}

protected abstract mediaElement(): HTMLMediaElement;

protected abstract seekedMedia(): HTMLMediaElement;

protected abstract fastSeekedMedia(): HTMLMediaElement;

protected abstract override draw(context: CanvasRenderingContext2D): void;

protected setCurrentTime(value: number) {
const media = this.mediaElement();
if (media.readyState < 2) return;

media.currentTime = value;
this.lastTime = value;
if (media.seeking) {
DependencyContext.collectPromise(
new Promise<void>(resolve => {
const listener = () => {
resolve();
media.removeEventListener('seeked', listener);
};
media.addEventListener('seeked', listener);
}),
);
}
}

protected setPlaybackRate(playbackRate: number) {
let value: number;
if (isReactive(playbackRate)) {
value = playbackRate();
useLogger().warn({
message: 'Invalid value set as the playback rate',
remarks: reactivePlaybackRate,
inspect: this.key,
stack: new Error().stack,
});
} else {
value = playbackRate;
}
this.playbackRate.context.setter(value);

if (this.playing()) {
if (value === 0) {
this.pause();
} else {
const time = useThread().time;
const start = time();
const offset = this.time();
this.time(() => this.clampTime(offset + (time() - start) * value));
}
}
DependencyContext,
SignalValue,
SimpleSignal,
clamp,
isReactive,
useLogger,
useThread,
} from '@motion-canvas/core';
import {computed, initial, signal} from '../decorators';
import {Rect, RectProps} from './Rect';
import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';

export interface MediaProps extends RectProps {
src?: SignalValue<string>;
loop?: SignalValue<boolean>;
playbackRate?: number;
time?: SignalValue<number>;
play?: boolean;
}

export abstract class Media extends Rect {
@signal()
public declare readonly src: SimpleSignal<string, this>;

@initial(false)
@signal()
public declare readonly loop: SimpleSignal<boolean, this>;

@initial(1)
@signal()
public declare readonly playbackRate: SimpleSignal<number, this>;

@initial(0)
@signal()
protected declare readonly time: SimpleSignal<number, this>;

@initial(false)
@signal()
protected declare readonly playing: SimpleSignal<boolean, this>;

protected lastTime = -1;

public constructor(props: MediaProps) {
super(props);
if (props.play) {
this.play();
}

public play() {
const time = useThread().time;
const start = time();
const offset = this.time();
const playbackRate = this.playbackRate();
this.playing(true);
this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
}

public isPlaying(): boolean {
return this.playing();
}

public getCurrentTime(): number {
return this.clampTime(this.time());
}

public getDuration(): number {
return this.mediaElement().duration;
}

@computed()
public override completion(): number {
return this.clampTime(this.time()) / this.getDuration();
}

protected abstract mediaElement(): HTMLMediaElement;

protected abstract seekedMedia(): HTMLMediaElement;

protected abstract fastSeekedMedia(): HTMLMediaElement;

protected abstract override draw(context: CanvasRenderingContext2D): void;

protected setCurrentTime(value: number) {
const media = this.mediaElement();
if (media.readyState < 2) return;

media.currentTime = value;
this.lastTime = value;
if (media.seeking) {
DependencyContext.collectPromise(
new Promise<void>(resolve => {
const listener = () => {
resolve();
media.removeEventListener('seeked', listener);
};
media.addEventListener('seeked', listener);
}),
);
}

public pause() {
this.playing(false);
this.time.save();
this.mediaElement().pause();
}

protected setPlaybackRate(playbackRate: number) {
let value: number;
if (isReactive(playbackRate)) {
value = playbackRate();
useLogger().warn({
message: 'Invalid value set as the playback rate',
remarks: reactivePlaybackRate,
inspect: this.key,
stack: new Error().stack,
});
} else {
value = playbackRate;
}

public seek(time: number) {
const playing = this.playing();
this.time(this.clampTime(time));
if (playing) {
this.play();
} else {
this.playbackRate.context.setter(value);

if (this.playing()) {
if (value === 0) {
this.pause();
} else {
const time = useThread().time;
const start = time();
const offset = this.time();
this.time(() => this.clampTime(offset + (time() - start) * value));
}
}

public clampTime(time: number): number {
const duration = this.getDuration();
if (this.loop()) {
time %= duration;
}
return clamp(0, duration, time);
}

public play() {
const time = useThread().time;
const start = time();
const offset = this.time();
const playbackRate = this.playbackRate();
this.playing(true);
this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
}

public pause() {
this.playing(false);
this.time.save();
this.mediaElement().pause();
}

public seek(time: number) {
const playing = this.playing();
this.time(this.clampTime(time));
if (playing) {
this.play();
} else {
this.pause();
}

protected override collectAsyncResources() {
super.collectAsyncResources();
this.seekedMedia();
}

public clampTime(time: number): number {
const duration = this.getDuration();
if (this.loop()) {
time %= duration;
}
}
return clamp(0, duration, time);
}

protected override collectAsyncResources() {
super.collectAsyncResources();
this.seekedMedia();
}
}
8 changes: 1 addition & 7 deletions packages/2d/src/lib/components/Video.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,11 @@ import {
SerializedVector2,
SignalValue,
SimpleSignal,
clamp,
isReactive,
useLogger,
useThread,
} from '@motion-canvas/core';
import {computed, initial, nodeName, signal} from '../decorators';
import {DesiredLength} from '../partials';
import {drawImage} from '../utils';
import {Rect, RectProps} from './Rect';
import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';
import { Media, MediaProps } from './Media';
import {Media, MediaProps} from './Media';

export interface VideoProps extends MediaProps {
/**
Expand Down

0 comments on commit d7770c9

Please sign in to comment.