OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Some code optimizations

pull/21833/head
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 canvasRef = useRef<HTMLCanvasElement>(null);
const effectsRef = useRef<Map<String, ICanvasEffect>>(new Map<String, ICanvasEffect>()); const effectsRef = useRef<Map<String, ICanvasEffect>>(new Map<String, ICanvasEffect>());
const resize = () => {
canvasRef.current.height = window.innerHeight;
};
const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect> => { const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect> => {
if (!name) return null; if (!name) return null;
let effect = effectsRef.current[name] ?? null; let effect = effectsRef.current[name] ?? null;
if (effect === null) { if (effect === null) {
try { try {
var { default: Effect } = await import(`./${name}`); const { default: Effect } = await import(`./${name}`);
effect = new Effect(); effect = new Effect();
effectsRef.current[name] = effect; effectsRef.current[name] = effect;
} catch (err) { } catch (err) {
@ -27,41 +23,41 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) =
} }
} }
return effect; 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(() => { 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 dispatcherRef = dis.register(onAction);
const canvas = canvasRef.current; const canvas = canvasRef.current;
canvas.width = roomWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
window.addEventListener('resize', resize, true); window.addEventListener('resize', resize, true);
return () => { return () => {
dis.unregister(dispatcherRef); dis.unregister(dispatcherRef);
window.removeEventListener('resize', resize); window.removeEventListener('resize', resize);
for (const effect in effectsRef.current) { const currentEffects = effectsRef.current;
effectsRef.current[effect]?.stop(); 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 ( return (
<canvas <canvas
ref={canvasRef} ref={canvasRef}
width={roomWidth}
style={{ style={{
display: 'block', display: 'block',
zIndex: 999999, zIndex: 999999,
@ -74,4 +70,4 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({ roomWidth }) =
) )
} }
export default EffectsOverlay; export default EffectsOverlay;