PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Some code optimizations

Browse source
This commit is contained in:
Steffen Kolmer 2020-10-21 14:43:09 +02:00
parent c7d535d2d3
commit 8728e12242
1 changed files with 19 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/views/elements/effects/EffectsOverlay.tsx
View file

@ -10,16 +10,12 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) =
const canvasRef = useRef<HTMLCanvasElement>(null);
const effectsRef = useRef<Map<String, ICanvasEffect>>(new Map<String, ICanvasEffect>());
const resize = () => {
canvasRef.current.height = window.innerHeight;
};
const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect> => {
if (!name) return null;
let effect = effectsRef.current[name] ?? null;
if (effect === null) {
try {
var { default: Effect } = await import(`./${name}`);
const { default: Effect } = await import(`./${name}`);
effect = new Effect();
effectsRef.current[name] = effect;
} catch (err) {
@ -27,41 +23,41 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) =
}
}
return effect;
}
const onAction = (payload: { action: string }) => {
const actionPrefix = 'effects.';
if (payload.action.indexOf(actionPrefix) === 0) {
const effect = payload.action.substr(actionPrefix.length);
lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
}
};
// on mount
useEffect(() => {
const resize = () => {
canvasRef.current.height = window.innerHeight;
};
const onAction = (payload: { action: string }) => {
const actionPrefix = 'effects.';
if (payload.action.indexOf(actionPrefix) === 0) {
const effect = payload.action.substr(actionPrefix.length);
lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
}
}
const dispatcherRef = dis.register(onAction);
const canvas = canvasRef.current;
canvas.width = roomWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', resize, true);
return () => {
dis.unregister(dispatcherRef);
window.removeEventListener('resize', resize);
for (const effect in effectsRef.current) {
effectsRef.current[effect]?.stop();
const currentEffects = effectsRef.current;
for (const effect in currentEffects) {
const effectModule: ICanvasEffect = currentEffects[effect];
if(effectModule && effectModule.isRunning) {
effectModule.stop();
}
}
};
}, []);
// on roomWidth change
useEffect(() => {
canvasRef.current.width = roomWidth;
}, [roomWidth]);
return (
<canvas
ref={canvasRef}
width={roomWidth}
style={{
display: 'block',
zIndex: 999999,
@ -74,4 +70,4 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) =
)
}
export default EffectsOverlay;
export default EffectsOverlay;