Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 09:37:17 +00:00
Code Issues Projects Releases Wiki Activity

[WIP] Experiment with new way to clear canvas

Browse source
This commit is contained in:
Jordan Eldredge 2020-01-02 15:14:05 -08:00
parent 98d6d890af
commit d60bd99355
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
js/components/Visualizer.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo, useEffect, useState } from "react";
import React, { useMemo, useEffect, useState, useCallback } from "react";
import * as Actions from "../actionCreators";
import * as Selectors from "../selectors";
@ -91,6 +91,7 @@ export default function Visualizer({ analyser }: Props) {
paintBars();
};
}
// Maybe Milkdrop is active.
return null;
}, [
bgCanvas,
@ -103,7 +104,14 @@ export default function Visualizer({ analyser }: Props) {
style,
]);
useAnimationLoop({ paintFrame });
const clear = useCallback(() => {
if (canvasCtx == null) {
return;
}
canvasCtx.clearRect(0, 0, width, height);
}, [canvasCtx, height, width]);
useAnimationLoop({ paintFrame, clear });
return (
<canvas

8
js/hooks.ts
View file

@ -45,11 +45,15 @@ export function usePromiseValueOrNull<T>(propValue: Promise<T>): T | null {
type AnimationLoopOptions = {
paintFrame: null | (() => void);
clear: null | (() => void);
};
export function useAnimationLoop({ paintFrame }: AnimationLoopOptions) {
export function useAnimationLoop({ paintFrame, clear }: AnimationLoopOptions) {
useLayoutEffect(() => {
if (paintFrame == null) {
if (clear != null) {
clear();
}
return;
}
@ -67,7 +71,7 @@ export function useAnimationLoop({ paintFrame }: AnimationLoopOptions) {
window.cancelAnimationFrame(animationRequest);
}
};
}, [paintFrame]);
}, [clear, paintFrame]);
}
export function useScreenSize() {