From 6ce5d3b044ce5f0cfd448c8f058553a12505913a Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Fri, 27 Nov 2020 14:54:21 +0100 Subject: [PATCH] refactored effects dir and changed effects exported name --- src/SlashCommands.tsx | 4 +- src/components/structures/RoomView.tsx | 10 ++--- .../elements/{effects => }/EffectsOverlay.tsx | 25 ++++++++++-- .../views/elements/effects/effectUtilities.ts | 8 ---- .../views/rooms/SendMessageComposer.js | 6 +-- .../elements => }/effects/ICanvasEffect.ts | 17 ++++++++ .../elements => }/effects/confetti/index.ts | 40 +++++++++---------- src/effects/effectUtilities.ts | 25 ++++++++++++ .../views/elements => }/effects/index.ts | 23 +++++++++-- 9 files changed, 110 insertions(+), 48 deletions(-) rename src/components/views/elements/{effects => }/EffectsOverlay.tsx (74%) delete mode 100644 src/components/views/elements/effects/effectUtilities.ts rename src/{components/views/elements => }/effects/ICanvasEffect.ts (60%) rename src/{components/views/elements => }/effects/confetti/index.ts (88%) create mode 100644 src/effects/effectUtilities.ts rename src/{components/views/elements => }/effects/index.ts (70%) diff --git a/src/SlashCommands.tsx b/src/SlashCommands.tsx index 45c7251c3b..e2ae875ac3 100644 --- a/src/SlashCommands.tsx +++ b/src/SlashCommands.tsx @@ -46,7 +46,7 @@ import { EffectiveMembership, getEffectiveMembership, leaveRoomBehaviour } from import SdkConfig from "./SdkConfig"; import SettingsStore from "./settings/SettingsStore"; import {UIFeature} from "./settings/UIFeature"; -import effects from "./components/views/elements/effects" +import {CHAT_EFFECTS} from "./effects" import CallHandler from "./CallHandler"; // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816 @@ -1097,7 +1097,7 @@ export const Commands = [ hideCompletionAfterSpace: true, }), - ...effects.map((effect) => { + ...CHAT_EFFECTS.map((effect) => { return new Command({ command: effect.command, description: effect.description(), diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 59f8db5837..8189420a52 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -69,9 +69,9 @@ import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader from "../views/rooms/RoomHeader"; import {XOR} from "../../@types/common"; import { IThreepidInvite } from "../../stores/ThreepidInviteStore"; -import EffectsOverlay from "../views/elements/effects/EffectsOverlay"; -import {containsEmoji} from '../views/elements/effects/effectUtilities'; -import effects from '../views/elements/effects' +import EffectsOverlay from "../views/elements/EffectsOverlay"; +import {containsEmoji} from '../../effects/effectUtilities'; +import {CHAT_EFFECTS} from '../../effects' import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import WidgetStore from "../../stores/WidgetStore"; import {UPDATE_EVENT} from "../../stores/AsyncStore"; @@ -802,9 +802,9 @@ export default class RoomView extends React.Component { if (!this.state.room || !this.state.matrixClientIsReady || this.state.room.getUnreadNotificationCount() === 0) return; - effects.forEach(effect => { + CHAT_EFFECTS.forEach(effect => { if (containsEmoji(ev.getContent(), effect.emojis) || ev.getContent().msgtype === effect.msgType) { - dis.dispatch({action: `effects.${effect.command}`}); + dis.dispatch({action: `CHAT_EFFECTS.${effect.command}`}); } }) }; diff --git a/src/components/views/elements/effects/EffectsOverlay.tsx b/src/components/views/elements/EffectsOverlay.tsx similarity index 74% rename from src/components/views/elements/effects/EffectsOverlay.tsx rename to src/components/views/elements/EffectsOverlay.tsx index b2ecec8753..4c6a3c06ae 100644 --- a/src/components/views/elements/effects/EffectsOverlay.tsx +++ b/src/components/views/elements/EffectsOverlay.tsx @@ -1,7 +1,24 @@ +/* + Copyright 2020 Nurjin Jafar + Copyright 2020 Nordeck IT + Consulting GmbH. + + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ import React, { FunctionComponent, useEffect, useRef } from 'react'; -import dis from '../../../../dispatcher/dispatcher'; -import ICanvasEffect, { ICanvasEffectConstructable } from './ICanvasEffect.js'; -import effects from './index' +import dis from '../../../dispatcher/dispatcher'; +import ICanvasEffect, { ICanvasEffectConstructable } from '../../../effects/ICanvasEffect.js'; +import {CHAT_EFFECTS} from '../../../effects' export type EffectsOverlayProps = { roomWidth: number; @@ -15,7 +32,7 @@ const EffectsOverlay: FunctionComponent = ({ roomWidth }) = if (!name) return null; let effect: ICanvasEffect | null = effectsRef.current[name] || null; if (effect === null) { - const options = effects.find((e) => e.command === name)?.options + const options = CHAT_EFFECTS.find((e) => e.command === name)?.options try { const { default: Effect }: { default: ICanvasEffectConstructable } = await import(`./${name}`); effect = new Effect(options); diff --git a/src/components/views/elements/effects/effectUtilities.ts b/src/components/views/elements/effects/effectUtilities.ts deleted file mode 100644 index e94287c745..0000000000 --- a/src/components/views/elements/effects/effectUtilities.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Checks a message if it contains one of the provided emojis - * @param {Object} content The message - * @param {Array} emojis The list of emojis to check for - */ -export const containsEmoji = (content: { msgtype: string, body: string }, emojis: Array): boolean => { - return emojis.some((emoji) => content.body && content.body.includes(emoji)); -} diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 583a3c6368..6a7270c3d6 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -42,8 +42,8 @@ import {Key, isOnlyCtrlOrCmdKeyEvent} from "../../../Keyboard"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import RateLimitedFunc from '../../../ratelimitedfunc'; import {Action} from "../../../dispatcher/actions"; -import {containsEmoji} from "../elements/effects/effectUtilities"; -import effects from '../elements/effects'; +import {containsEmoji} from "../../../effects/effectUtilities"; +import {CHAT_EFFECTS} from '../../../effects'; import SettingsStore from "../../../settings/SettingsStore"; import CountlyAnalytics from "../../../CountlyAnalytics"; @@ -328,7 +328,7 @@ export default class SendMessageComposer extends React.Component { }); } dis.dispatch({action: "message_sent"}); - effects.forEach((effect) => { + CHAT_EFFECTS.forEach((effect) => { if (containsEmoji(content, effect.emojis)) { dis.dispatch({action: `effects.${effect.command}`}); } diff --git a/src/components/views/elements/effects/ICanvasEffect.ts b/src/effects/ICanvasEffect.ts similarity index 60% rename from src/components/views/elements/effects/ICanvasEffect.ts rename to src/effects/ICanvasEffect.ts index 400f42af73..dbbde3dbe7 100644 --- a/src/components/views/elements/effects/ICanvasEffect.ts +++ b/src/effects/ICanvasEffect.ts @@ -1,3 +1,20 @@ +/* + Copyright 2020 Nurjin Jafar + Copyright 2020 Nordeck IT + Consulting GmbH. + + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ /** * Defines the constructor of a canvas based room effect */ diff --git a/src/components/views/elements/effects/confetti/index.ts b/src/effects/confetti/index.ts similarity index 88% rename from src/components/views/elements/effects/confetti/index.ts rename to src/effects/confetti/index.ts index aee8f54a3a..646ac30524 100644 --- a/src/components/views/elements/effects/confetti/index.ts +++ b/src/effects/confetti/index.ts @@ -1,12 +1,22 @@ +/* + Copyright 2020 Nurjin Jafar + Copyright 2020 Nordeck IT + Consulting GmbH. + + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ import ICanvasEffect from '../ICanvasEffect'; -declare global { - interface Window { - mozRequestAnimationFrame: any; - oRequestAnimationFrame: any; - msRequestAnimationFrame: any; - } -} export type ConfettiOptions = { /** @@ -58,11 +68,7 @@ export default class Confetti implements ICanvasEffect { } private context: CanvasRenderingContext2D | null = null; - private supportsAnimationFrame = window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame; + private supportsAnimationFrame = window.requestAnimationFrame; private colors = ['rgba(30,144,255,', 'rgba(107,142,35,', 'rgba(255,215,0,', 'rgba(255,192,203,', 'rgba(106,90,205,', 'rgba(173,216,230,', 'rgba(238,130,238,', 'rgba(152,251,152,', 'rgba(70,130,180,', @@ -78,16 +84,6 @@ export default class Confetti implements ICanvasEffect { if (!canvas) { return; } - window.requestAnimationFrame = (function() { - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function(callback) { - return window.setTimeout(callback, this.options.frameInterval); - }; - })(); this.context = canvas.getContext('2d'); this.particles = []; const count = this.options.maxCount; diff --git a/src/effects/effectUtilities.ts b/src/effects/effectUtilities.ts new file mode 100644 index 0000000000..e708f4864e --- /dev/null +++ b/src/effects/effectUtilities.ts @@ -0,0 +1,25 @@ +/* + Copyright 2020 Nurjin Jafar + Copyright 2020 Nordeck IT + Consulting GmbH. + + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ +/** + * Checks a message if it contains one of the provided emojis + * @param {Object} content The message + * @param {Array} emojis The list of emojis to check for + */ +export const containsEmoji = (content: { msgtype: string, body: string }, emojis: Array): boolean => { + return emojis.some((emoji) => content.body && content.body.includes(emoji)); +} diff --git a/src/components/views/elements/effects/index.ts b/src/effects/index.ts similarity index 70% rename from src/components/views/elements/effects/index.ts rename to src/effects/index.ts index 0f01f2624e..067bd6848c 100644 --- a/src/components/views/elements/effects/index.ts +++ b/src/effects/index.ts @@ -1,4 +1,21 @@ -import { _t, _td } from "../../../../languageHandler"; +/* + Copyright 2020 Nurjin Jafar + Copyright 2020 Nordeck IT + Consulting GmbH. + + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ +import { _t, _td } from "../languageHandler"; export type Effect = { /** @@ -53,7 +70,7 @@ type ConfettiOptions = { /** * This configuration defines room effects that can be triggered by custom message types and emojis */ -const effects: Array> = [ +export const CHAT_EFFECTS: Array> = [ { emojis: ['🎊', '🎉'], msgType: 'nic.custom.confetti', @@ -70,6 +87,4 @@ const effects: Array> = [ } as Effect, ]; -export default effects; -