Fixed some formatting issues
This commit is contained in:
parent
daa03098f3
commit
c7d535d2d3
3 changed files with 13 additions and 13 deletions
|
@ -1,4 +1,4 @@
|
||||||
import React, {FunctionComponent, useEffect, useRef} from 'react';
|
import React, { FunctionComponent, useEffect, useRef } from 'react';
|
||||||
import dis from '../../../../dispatcher/dispatcher';
|
import dis from '../../../../dispatcher/dispatcher';
|
||||||
import ICanvasEffect from './ICanvasEffect.js';
|
import ICanvasEffect from './ICanvasEffect.js';
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@ type EffectsOverlayProps = {
|
||||||
roomWidth: number;
|
roomWidth: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({roomWidth}) => {
|
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>());
|
||||||
|
|
||||||
|
@ -15,9 +15,9 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({roomWidth}) =>
|
||||||
};
|
};
|
||||||
|
|
||||||
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}`);
|
var { default: Effect } = await import(`./${name}`);
|
||||||
effect = new Effect();
|
effect = new Effect();
|
||||||
|
@ -31,7 +31,7 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({roomWidth}) =>
|
||||||
|
|
||||||
const onAction = (payload: { action: string }) => {
|
const onAction = (payload: { action: string }) => {
|
||||||
const actionPrefix = 'effects.';
|
const actionPrefix = 'effects.';
|
||||||
if(payload.action.indexOf(actionPrefix) === 0) {
|
if (payload.action.indexOf(actionPrefix) === 0) {
|
||||||
const effect = payload.action.substr(actionPrefix.length);
|
const effect = payload.action.substr(actionPrefix.length);
|
||||||
lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
|
lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
|
||||||
}
|
}
|
||||||
|
@ -44,11 +44,11 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({roomWidth}) =>
|
||||||
canvas.width = roomWidth;
|
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) {
|
for (const effect in effectsRef.current) {
|
||||||
effectsRef.current[effect]?.stop();
|
effectsRef.current[effect]?.stop();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -58,7 +58,7 @@ const EffectsOverlay: FunctionComponent<EffectsOverlayProps> = ({roomWidth}) =>
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
canvasRef.current.width = roomWidth;
|
canvasRef.current.width = roomWidth;
|
||||||
}, [roomWidth]);
|
}, [roomWidth]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<canvas
|
<canvas
|
||||||
ref={canvasRef}
|
ref={canvasRef}
|
||||||
|
|
|
@ -65,16 +65,16 @@ export default class Confetti implements ICanvasEffect {
|
||||||
public isRunning: boolean;
|
public isRunning: boolean;
|
||||||
|
|
||||||
public start = async (canvas: HTMLCanvasElement, timeout = 3000) => {
|
public start = async (canvas: HTMLCanvasElement, timeout = 3000) => {
|
||||||
if(!canvas) {
|
if (!canvas) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
window.requestAnimationFrame = (function () {
|
window.requestAnimationFrame = (function() {
|
||||||
return window.requestAnimationFrame ||
|
return window.requestAnimationFrame ||
|
||||||
window.webkitRequestAnimationFrame ||
|
window.webkitRequestAnimationFrame ||
|
||||||
window.mozRequestAnimationFrame ||
|
window.mozRequestAnimationFrame ||
|
||||||
window.oRequestAnimationFrame ||
|
window.oRequestAnimationFrame ||
|
||||||
window.msRequestAnimationFrame ||
|
window.msRequestAnimationFrame ||
|
||||||
function (callback) {
|
function(callback) {
|
||||||
return window.setTimeout(callback, this.options.frameInterval);
|
return window.setTimeout(callback, this.options.frameInterval);
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {_t, _td} from "../../../../languageHandler";
|
import { _t, _td } from "../../../../languageHandler";
|
||||||
|
|
||||||
type Effect = {
|
type Effect = {
|
||||||
emojis: Array<string>;
|
emojis: Array<string>;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue