From 9f8a5f5107c50e3ff1e1bb7ae58a2386f957cf28 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 14:22:44 +0000 Subject: [PATCH 01/28] Upgrade matrix-js-sdk to 9.4.0-rc.1 --- package.json | 2 +- yarn.lock | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b328823b24..44bddbbb53 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "katex": "^0.12.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.19", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", + "matrix-js-sdk": "9.4.0-rc.1", "matrix-widget-api": "^0.1.0-beta.10", "minimist": "^1.2.5", "pako": "^1.0.11", diff --git a/yarn.lock b/yarn.lock index 1a6a0b0fb3..5d31179fb0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6512,9 +6512,10 @@ mathml-tag-names@^2.0.1: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop": - version "9.3.0" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/ff6612f9d0aa1a7c08b65a0b41c5ab997506016f" +matrix-js-sdk@9.4.0-rc.1: + version "9.4.0-rc.1" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.4.0-rc.1.tgz#1aa983e474825b8156033ad83470e1d5690d6588" + integrity sha512-JeHPktQhRL3rl9DCuWBcZgYw3y6p84jKgHs4729tG5MfVVHMdx+n9IsUNPSJeZ/PkgoFpwMJgTiRZX0vszvLAQ== dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" From 88ef854349a6a19be27f1ea59d642f80fc5fb3bd Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 14:34:25 +0000 Subject: [PATCH 02/28] Prepare changelog for v3.11.0-rc.1 --- CHANGELOG.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 151888a17e..fde7c852b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,83 @@ +Changes in [3.11.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.1) (2020-12-16) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.10.0...v3.11.0-rc.1) + + * Upgrade JS SDK to 9.4.0-rc.1 + * Translations update from Weblate + [\#5497](https://github.com/matrix-org/matrix-react-sdk/pull/5497) + * Unregister from the dispatcher in CallHandler + [\#5495](https://github.com/matrix-org/matrix-react-sdk/pull/5495) + * Better adhere to MSC process + [\#5496](https://github.com/matrix-org/matrix-react-sdk/pull/5496) + * Use random pickle key on all platforms + [\#5483](https://github.com/matrix-org/matrix-react-sdk/pull/5483) + * Fix mx_MemberList icons + [\#5492](https://github.com/matrix-org/matrix-react-sdk/pull/5492) + * Convert InviteDialog to TypeScript + [\#5491](https://github.com/matrix-org/matrix-react-sdk/pull/5491) + * Add keyboard shortcut for emoji reactions + [\#5425](https://github.com/matrix-org/matrix-react-sdk/pull/5425) + * Run chat effects on events sent by widgets too + [\#5488](https://github.com/matrix-org/matrix-react-sdk/pull/5488) + * Fix being unable to pin widgets + [\#5487](https://github.com/matrix-org/matrix-react-sdk/pull/5487) + * Line 1 / 2 Support + [\#5468](https://github.com/matrix-org/matrix-react-sdk/pull/5468) + * Remove impossible labs feature: sending hidden read receipts + [\#5484](https://github.com/matrix-org/matrix-react-sdk/pull/5484) + * Fix height of Remote Video in call + [\#5456](https://github.com/matrix-org/matrix-react-sdk/pull/5456) + * Add UI for hold functionality + [\#5446](https://github.com/matrix-org/matrix-react-sdk/pull/5446) + * Allow SearchBox to expand to fill width + [\#5411](https://github.com/matrix-org/matrix-react-sdk/pull/5411) + * Use room alias in generated permalink for rooms + [\#5451](https://github.com/matrix-org/matrix-react-sdk/pull/5451) + * Only show confetti if the current room is receiving an appropriate event + [\#5482](https://github.com/matrix-org/matrix-react-sdk/pull/5482) + * Throttle RoomState.members handler to improve performance + [\#5481](https://github.com/matrix-org/matrix-react-sdk/pull/5481) + * Handle manual hs urls better for the server picker + [\#5477](https://github.com/matrix-org/matrix-react-sdk/pull/5477) + * Add Olm as a dev dependency for types + [\#5479](https://github.com/matrix-org/matrix-react-sdk/pull/5479) + * Hide Invite to this room CTA if no permission + [\#5476](https://github.com/matrix-org/matrix-react-sdk/pull/5476) + * Fix width of underline in server picker dialog + [\#5478](https://github.com/matrix-org/matrix-react-sdk/pull/5478) + * Fix confetti room unread state check + [\#5475](https://github.com/matrix-org/matrix-react-sdk/pull/5475) + * Show confetti in a chat room on command or emoji + [\#5140](https://github.com/matrix-org/matrix-react-sdk/pull/5140) + * Fix inverted settings default value + [\#5391](https://github.com/matrix-org/matrix-react-sdk/pull/5391) + * Improve usability of the Server Picker Dialog + [\#5474](https://github.com/matrix-org/matrix-react-sdk/pull/5474) + * Fix typos in some strings + [\#5473](https://github.com/matrix-org/matrix-react-sdk/pull/5473) + * Bump highlight.js from 10.1.2 to 10.4.1 + [\#5472](https://github.com/matrix-org/matrix-react-sdk/pull/5472) + * Remove old app test script path + [\#5471](https://github.com/matrix-org/matrix-react-sdk/pull/5471) + * add support for giving reason when redacting + [\#5260](https://github.com/matrix-org/matrix-react-sdk/pull/5260) + * Add support for Netlify to fetchdep script + [\#5469](https://github.com/matrix-org/matrix-react-sdk/pull/5469) + * Nest other layers inside on automation + [\#5467](https://github.com/matrix-org/matrix-react-sdk/pull/5467) + * Rebrand various CI scripts and modules + [\#5466](https://github.com/matrix-org/matrix-react-sdk/pull/5466) + * Add more widget sanity checking + [\#5462](https://github.com/matrix-org/matrix-react-sdk/pull/5462) + * Fix React complaining about unknown DOM props + [\#5465](https://github.com/matrix-org/matrix-react-sdk/pull/5465) + * Jump to home page when leaving a room + [\#5464](https://github.com/matrix-org/matrix-react-sdk/pull/5464) + * Fix SSO buttons for Social Logins + [\#5463](https://github.com/matrix-org/matrix-react-sdk/pull/5463) + * Social Login and login delight tweaks + [\#5426](https://github.com/matrix-org/matrix-react-sdk/pull/5426) + Changes in [3.10.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.10.0) (2020-12-07) ===================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.10.0-rc.1...v3.10.0) From 68b7538fca592a4018f00292ba9f3633cbae6649 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 14:34:25 +0000 Subject: [PATCH 03/28] v3.11.0-rc.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 44bddbbb53..05d403540e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.10.0", + "version": "3.11.0-rc.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { From d2ee89fa744592355468e9bf233eb7cca5ad8b03 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 15:57:56 +0000 Subject: [PATCH 04/28] Upgrade matrix-js-sdk to 9.4.0-rc.2 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 05d403540e..2c32373dd2 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "katex": "^0.12.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.19", - "matrix-js-sdk": "9.4.0-rc.1", + "matrix-js-sdk": "9.4.0-rc.2", "matrix-widget-api": "^0.1.0-beta.10", "minimist": "^1.2.5", "pako": "^1.0.11", diff --git a/yarn.lock b/yarn.lock index 5d31179fb0..66c4fe2ae1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6512,10 +6512,10 @@ mathml-tag-names@^2.0.1: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -matrix-js-sdk@9.4.0-rc.1: - version "9.4.0-rc.1" - resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.4.0-rc.1.tgz#1aa983e474825b8156033ad83470e1d5690d6588" - integrity sha512-JeHPktQhRL3rl9DCuWBcZgYw3y6p84jKgHs4729tG5MfVVHMdx+n9IsUNPSJeZ/PkgoFpwMJgTiRZX0vszvLAQ== +matrix-js-sdk@9.4.0-rc.2: + version "9.4.0-rc.2" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.4.0-rc.2.tgz#8cd0eb9a76445c63e152ff7c8eb708513a67481e" + integrity sha512-Z2GJ0uv+/0IlwoAyducBBVZUTe4COyKtl6kanZNHK4kSGYZ/8pilTtMBj8fJJtWubOiZ6HxtaLEXrxulOJF+TA== dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" From 01c3b79458edbcb75274b2642a4c5a0b5c4b4412 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 16:27:15 +0000 Subject: [PATCH 05/28] Prepare changelog for v3.11.0-rc.2 --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fde7c852b8..99d0aab14b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +Changes in [3.11.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.2) (2020-12-16) +=============================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0-rc.1...v3.11.0-rc.2) + + * Upgrade JS SDK to 9.4.0-rc.2 + Changes in [3.11.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.1) (2020-12-16) =============================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.10.0...v3.11.0-rc.1) From caf795e5c2dcba575a64659036e96b9a4a16f586 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Wed, 16 Dec 2020 16:27:16 +0000 Subject: [PATCH 06/28] v3.11.0-rc.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c32373dd2..2a3a2064f2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.11.0-rc.1", + "version": "3.11.0-rc.2", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { From a91c8a42c31432f6c5fd29b9a56ae242e658ebbf Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Dec 2020 10:47:03 +0000 Subject: [PATCH 07/28] Fix padding in confirmation email registration prompt --- res/css/views/auth/_InteractiveAuthEntryComponents.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index 0a5ac9b2bc..5df73b139f 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_InteractiveAuthEntryComponents_emailWrapper { - padding-right: 60px; + padding-right: 100px; position: relative; margin-top: 32px; margin-bottom: 32px; From b24a98c6d240556a628fca144c256e10474ddb25 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Thu, 17 Dec 2020 16:57:59 +0100 Subject: [PATCH 08/28] fireworks effect added --- src/effects/fireworks/index.ts | 167 +++++++++++++++++++++++++++++++++ src/effects/index.ts | 17 ++++ src/i18n/strings/en_EN.json | 2 + 3 files changed, 186 insertions(+) create mode 100644 src/effects/fireworks/index.ts diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts new file mode 100644 index 0000000000..7c84e31f1d --- /dev/null +++ b/src/effects/fireworks/index.ts @@ -0,0 +1,167 @@ +/* + 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'; + +export type FireworksOptions = { + /** + * the maximum number of the fireworks + */ + maxCount: number, + /** + * the alpha opacity of the fireworks (between 0 and 1, where 1 is opaque and 0 is invisible) + */ + gravity: number, + probability: number, +} + +type FireworksParticle = { + color: string, + x: number, + y: number, + vx: number, + vy: number, + alpha: number, + w: number, + h: number +} + +export const DefaultOptions: FireworksOptions = { + maxCount: 500, + gravity: 0.05, + probability: 0.04, +}; + +export default class Fireworks implements ICanvasEffect { + private readonly options: FireworksOptions; + + constructor(options: { [key: string]: any }) { + this.options = {...DefaultOptions, ...options}; + } + + private context: CanvasRenderingContext2D | null = null; + private supportsAnimationFrame = window.requestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000/60); + }; + private particles: Array = []; + public isRunning: boolean; + + public start = async (canvas: HTMLCanvasElement, timeout = 4000) => { + if (!canvas) { + return; + } + this.isRunning = true; + this.context = canvas.getContext('2d'); + this.supportsAnimationFrame.call(window, this.updateWorld); + if (timeout) { + window.setTimeout(this.stop, timeout); + } + } + + private updateWorld = () => { + if (!this.isRunning) return; + this.update(); + this.paint(); + this.supportsAnimationFrame.call(window, this.updateWorld); + } + private update = () => { + if (this.particles.length < this.options.maxCount && Math.random() < this.options.probability) { + this.createFirework(); + } + const alive = []; + for (let i=0; i { + if (!this.context || !this.context.canvas) return; + this.context.globalCompositeOperation = 'source-over'; + this.context.fillStyle = "rgba(0,0,0,0.2)"; + this.context.canvas.style.opacity = "0.8"; + this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height); + this.context.globalCompositeOperation = 'lighter'; + for (let i=0; i { + if (!this.context || !this.context.canvas) return; + const width = this.context.canvas.width; + const height = this.context.canvas.height; + const xPoint = Math.random() * (width - 200) + 100; + const yPoint = Math.random() * (height - 200) + 100; + const nFire = Math.random() * 50 + 100; + const color = "rgb("+(~~(Math.random()*200+55))+"," + +(~~(Math.random()*200+55))+","+(~~(Math.random()*200+55))+")"; + for (let i=0; i{}; + particle.color = color; + particle.w = particle.h = Math.random() * 4 + 1; + particle.x = xPoint - particle.w / 2; + particle.y = yPoint - particle.h / 2; + particle.vx = (Math.random()-0.5)*10; + particle.vy = (Math.random()-0.5)*10; + particle.alpha = Math.random()*.5+.5; + const vy = Math.sqrt(25 - particle.vx * particle.vx); + if (Math.abs(particle.vy) > vy) { + particle.vy = particle.vy > 0 ? vy: -vy; + } + this.particles.push(particle); + } + } + + public stop = async () => { + this.isRunning = false; + this.particles = []; + this.context.canvas.style.opacity = "1"; + this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); + } + + private drawParticle = (particle: FireworksParticle): void => { + if (!this.context || !this.context.canvas) { + return; + } + this.context.save(); + this.context.beginPath(); + + this.context.translate(particle.x + particle.w / 2, particle.y + particle.h / 2); + this.context.arc(0, 0, particle.w, 0, Math.PI * 2); + this.context.fillStyle = particle.color; + this.context.globalAlpha = particle.alpha; + + this.context.closePath(); + this.context.fill(); + this.context.restore(); + } + + + private move = (particle: FireworksParticle) => { + particle.x += particle.vx; + particle.vy += this.options.gravity; + particle.y += particle.vy; + particle.alpha -= 0.01; + return !(particle.x <= -particle.w || particle.x >= screen.width || + particle.y >= screen.height || + particle.alpha <= 0); + } +} diff --git a/src/effects/index.ts b/src/effects/index.ts index 16a0851070..27ed73622f 100644 --- a/src/effects/index.ts +++ b/src/effects/index.ts @@ -64,6 +64,11 @@ type ConfettiOptions = { * use gradient instead of solid particle color */ gradient: boolean, +}; +type FireworksOptions = { + maxCount: number, + gravity: number, + probability: number, } /** @@ -84,6 +89,18 @@ export const CHAT_EFFECTS: Array> = [ gradient: false, }, } as Effect, + { + emojis: ['🎆'], + msgType: 'nic.custom.fireworks', + command: 'fireworks', + description: () => _td("Sends the given message with fireworks"), + fallbackMessage: () => _t("sends fireworks") + "🎆", + options: { + maxCount: 500, + gravity: 0.05, + probability: 0.04, + }, + } as Effect, ]; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index eb1d0a632e..47d0eedf6f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -849,6 +849,8 @@ "sends confetti": "sends confetti", "You held the call Resume": "You held the call Resume", "%(peerName)s held the call": "%(peerName)s held the call", + "sends fireworks": "sends fireworks", + "Sends the given message with fireworks": "Sends the given message with fireworks", "Video Call": "Video Call", "Voice Call": "Voice Call", "Fill Screen": "Fill Screen", From 4a73402b214bd92002ceb63e9436b427ab9c39b5 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Fri, 18 Dec 2020 14:51:58 +0100 Subject: [PATCH 09/28] comments added --- src/effects/fireworks/index.ts | 19 +++++++++++++++++-- src/effects/index.ts | 6 ++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index 7c84e31f1d..3cc209eda3 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -19,23 +19,38 @@ import ICanvasEffect from '../ICanvasEffect'; export type FireworksOptions = { /** - * the maximum number of the fireworks + * max fireworks count */ maxCount: number, /** - * the alpha opacity of the fireworks (between 0 and 1, where 1 is opaque and 0 is invisible) + * gravity value that firework adds to shift from it's start position */ gravity: number, probability: number, } type FireworksParticle = { + /** + * color + */ color: string, + /** + * x,y are the point where the particle starts to position on canvas + */ x: number, y: number, + /** + * vx,vy shift values from x and y + */ vx: number, vy: number, + /** + * the alpha opacity of the firework particle (between 0 and 1, where 1 is opaque and 0 is invisible) + */ alpha: number, + /** + * w,h width and height + */ w: number, h: number } diff --git a/src/effects/index.ts b/src/effects/index.ts index 27ed73622f..07aaa5e736 100644 --- a/src/effects/index.ts +++ b/src/effects/index.ts @@ -66,7 +66,13 @@ type ConfettiOptions = { gradient: boolean, }; type FireworksOptions = { + /** + * max fireworks count + */ maxCount: number, + /** + * gravity value that firework adds to shift from it's start position + */ gravity: number, probability: number, } From 2a2c805031cea506dc9cac76c87a36cc975acdd4 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Fri, 18 Dec 2020 15:30:50 +0100 Subject: [PATCH 10/28] changed canvas globalCompositeOperation value and removed probability --- src/effects/fireworks/index.ts | 9 +++------ src/effects/index.ts | 2 -- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index 3cc209eda3..b9898b8b22 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -26,7 +26,6 @@ export type FireworksOptions = { * gravity value that firework adds to shift from it's start position */ gravity: number, - probability: number, } type FireworksParticle = { @@ -58,7 +57,6 @@ type FireworksParticle = { export const DefaultOptions: FireworksOptions = { maxCount: 500, gravity: 0.05, - probability: 0.04, }; export default class Fireworks implements ICanvasEffect { @@ -95,7 +93,7 @@ export default class Fireworks implements ICanvasEffect { this.supportsAnimationFrame.call(window, this.updateWorld); } private update = () => { - if (this.particles.length < this.options.maxCount && Math.random() < this.options.probability) { + if (this.particles.length < this.options.maxCount) { this.createFirework(); } const alive = []; @@ -109,9 +107,8 @@ export default class Fireworks implements ICanvasEffect { private paint = () => { if (!this.context || !this.context.canvas) return; - this.context.globalCompositeOperation = 'source-over'; - this.context.fillStyle = "rgba(0,0,0,0.2)"; - this.context.canvas.style.opacity = "0.8"; + this.context.globalCompositeOperation = 'destination-out'; + this.context.fillStyle = "rgba(0,0,0,0.5)"; this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height); this.context.globalCompositeOperation = 'lighter'; for (let i=0; i> = [ options: { maxCount: 500, gravity: 0.05, - probability: 0.04, }, } as Effect, ]; From 1fd6809388260a8947578e9b2605824ed7ce786c Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Fri, 18 Dec 2020 15:32:44 +0100 Subject: [PATCH 11/28] removed unnecessary opacity --- src/effects/fireworks/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index b9898b8b22..ee32c9ac9c 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -145,7 +145,6 @@ export default class Fireworks implements ICanvasEffect { public stop = async () => { this.isRunning = false; this.particles = []; - this.context.canvas.style.opacity = "1"; this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); } From a966319c90e83d28bfd0162153236eaf2bc07478 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Dec 2020 18:39:16 -0700 Subject: [PATCH 12/28] Fix minor lint problems --- src/effects/fireworks/index.ts | 21 +++++++++++---------- src/effects/index.ts | 14 +++++++------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index ee32c9ac9c..8f6cc5d82f 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -21,37 +21,37 @@ export type FireworksOptions = { /** * max fireworks count */ - maxCount: number, + maxCount: number; /** * gravity value that firework adds to shift from it's start position */ - gravity: number, + gravity: number; } type FireworksParticle = { /** * color */ - color: string, + color: string; /** * x,y are the point where the particle starts to position on canvas */ - x: number, - y: number, + x: number; + y: number; /** * vx,vy shift values from x and y */ - vx: number, - vy: number, + vx: number; + vy: number; /** * the alpha opacity of the firework particle (between 0 and 1, where 1 is opaque and 0 is invisible) */ - alpha: number, + alpha: number; /** * w,h width and height */ - w: number, - h: number + w: number; + h: number; } export const DefaultOptions: FireworksOptions = { @@ -92,6 +92,7 @@ export default class Fireworks implements ICanvasEffect { this.paint(); this.supportsAnimationFrame.call(window, this.updateWorld); } + private update = () => { if (this.particles.length < this.options.maxCount) { this.createFirework(); diff --git a/src/effects/index.ts b/src/effects/index.ts index 990d1e68ef..27f1902d7c 100644 --- a/src/effects/index.ts +++ b/src/effects/index.ts @@ -47,33 +47,33 @@ type ConfettiOptions = { /** * max confetti count */ - maxCount: number, + maxCount: number; /** * particle animation speed */ - speed: number, + speed: number; /** * the confetti animation frame interval in milliseconds */ - frameInterval: number, + frameInterval: number; /** * the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible) */ - alpha: number, + alpha: number; /** * use gradient instead of solid particle color */ - gradient: boolean, + gradient: boolean; }; type FireworksOptions = { /** * max fireworks count */ - maxCount: number, + maxCount: number; /** * gravity value that firework adds to shift from it's start position */ - gravity: number, + gravity: number; } /** From ec92be4ec479e26b8f6f316ba6b4f32429969a15 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Dec 2020 18:40:11 -0700 Subject: [PATCH 13/28] Lower effect time by 1 second It feels like it runs a bit too long --- src/effects/fireworks/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index 8f6cc5d82f..15ba286503 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -74,7 +74,7 @@ export default class Fireworks implements ICanvasEffect { private particles: Array = []; public isRunning: boolean; - public start = async (canvas: HTMLCanvasElement, timeout = 4000) => { + public start = async (canvas: HTMLCanvasElement, timeout = 3000) => { if (!canvas) { return; } From 4fea266003dcc04b95d0521c22d7160f8d2f7839 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Dec 2020 18:40:30 -0700 Subject: [PATCH 14/28] Use the same requestAnimationFrame as confetti --- src/effects/fireworks/index.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index 15ba286503..4ca5c59fa7 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -67,10 +67,7 @@ export default class Fireworks implements ICanvasEffect { } private context: CanvasRenderingContext2D | null = null; - private supportsAnimationFrame = window.requestAnimationFrame || - function(callback) { - window.setTimeout(callback, 1000/60); - }; + private supportsAnimationFrame = window.requestAnimationFrame; private particles: Array = []; public isRunning: boolean; From ce638e717d9d5c4eee0ad819a158e31c945f69f1 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Dec 2020 18:41:01 -0700 Subject: [PATCH 15/28] Run the effect to completion rather than chopping it off --- src/effects/fireworks/index.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/effects/fireworks/index.ts b/src/effects/fireworks/index.ts index 4ca5c59fa7..96a27531af 100644 --- a/src/effects/fireworks/index.ts +++ b/src/effects/fireworks/index.ts @@ -84,14 +84,14 @@ export default class Fireworks implements ICanvasEffect { } private updateWorld = () => { - if (!this.isRunning) return; + if (!this.isRunning && this.particles.length === 0) return; this.update(); this.paint(); this.supportsAnimationFrame.call(window, this.updateWorld); } private update = () => { - if (this.particles.length < this.options.maxCount) { + if (this.particles.length < this.options.maxCount && this.isRunning) { this.createFirework(); } const alive = []; @@ -142,8 +142,6 @@ export default class Fireworks implements ICanvasEffect { public stop = async () => { this.isRunning = false; - this.particles = []; - this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); } private drawParticle = (particle: FireworksParticle): void => { From 5c309042e681d04aaeb73ee152695f0a25d3cfe6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 18 Dec 2020 18:46:59 -0700 Subject: [PATCH 16/28] fix i18n order --- src/i18n/strings/en_EN.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 47d0eedf6f..b96d767ccb 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -847,10 +847,10 @@ "This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!", "Sends the given message with confetti": "Sends the given message with confetti", "sends confetti": "sends confetti", + "Sends the given message with fireworks": "Sends the given message with fireworks", + "sends fireworks": "sends fireworks", "You held the call Resume": "You held the call Resume", "%(peerName)s held the call": "%(peerName)s held the call", - "sends fireworks": "sends fireworks", - "Sends the given message with fireworks": "Sends the given message with fireworks", "Video Call": "Video Call", "Voice Call": "Voice Call", "Fill Screen": "Fill Screen", From a0d925b879e67b8f4683b75eb73efc4b7b961d0e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sun, 20 Dec 2020 23:29:03 -0700 Subject: [PATCH 17/28] Add a snowfall chat effect (with /snowfall command) --- src/effects/index.ts | 28 ++++++- src/effects/snowfall/index.ts | 148 ++++++++++++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 2 + 3 files changed, 177 insertions(+), 1 deletion(-) create mode 100644 src/effects/snowfall/index.ts diff --git a/src/effects/index.ts b/src/effects/index.ts index 27f1902d7c..a22948ebcf 100644 --- a/src/effects/index.ts +++ b/src/effects/index.ts @@ -75,6 +75,20 @@ type FireworksOptions = { */ gravity: number; } +type SnowfallOptions = { + /** + * The maximum number of snowflakes to render at a given time + */ + maxCount: number; + /** + * The amount of gravity to apply to the snowflakes + */ + gravity: number; + /** + * The amount of drift (horizontal sway) to apply to the snowflakes. Each snowflake varies. + */ + maxDrift: number; +} /** * This configuration defines room effects that can be triggered by custom message types and emojis @@ -99,12 +113,24 @@ export const CHAT_EFFECTS: Array> = [ msgType: 'nic.custom.fireworks', command: 'fireworks', description: () => _td("Sends the given message with fireworks"), - fallbackMessage: () => _t("sends fireworks") + "🎆", + fallbackMessage: () => _t("sends fireworks") + " 🎆", options: { maxCount: 500, gravity: 0.05, }, } as Effect, + { + emojis: ['❄', '🌨'], + msgType: 'io.element.effect.snowfall', + command: 'snowfall', + description: () => _td("Sends the given message with snowfall"), + fallbackMessage: () => _t("sends snowfall") + " ❄", + options: { + maxCount: 200, + gravity: 0.05, + maxDrift: 5, + }, + } as Effect, ]; diff --git a/src/effects/snowfall/index.ts b/src/effects/snowfall/index.ts new file mode 100644 index 0000000000..2affb50405 --- /dev/null +++ b/src/effects/snowfall/index.ts @@ -0,0 +1,148 @@ +/* + Copyright 2020 The Matrix.org Foundation C.I.C. + + 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'; +import { arrayFastClone } from "../../utils/arrays"; + +export type SnowfallOptions = { + /** + * The maximum number of snowflakes to render at a given time + */ + maxCount: number; + /** + * The amount of gravity to apply to the snowflakes + */ + gravity: number; + /** + * The amount of drift (horizontal sway) to apply to the snowflakes. Each snowflake varies. + */ + maxDrift: number; +} + +type Snowflake = { + x: number; + y: number; + xCol: number; + diameter: number; + maximumDrift: number; + gravity: number; +} + +export const DefaultOptions: SnowfallOptions = { + maxCount: 200, + gravity: 0.05, + maxDrift: 5, +}; + +const KEY_FRAME_INTERVAL = 15; // 15ms, roughly + +export default class Snowfall implements ICanvasEffect { + private readonly options: SnowfallOptions; + + constructor(options: { [key: string]: any }) { + this.options = {...DefaultOptions, ...options}; + } + + private context: CanvasRenderingContext2D | null = null; + private particles: Array = []; + private lastAnimationTime: number; + + public isRunning: boolean; + + public start = async (canvas: HTMLCanvasElement, timeout = 3000) => { + if (!canvas) { + return; + } + this.context = canvas.getContext('2d'); + this.particles = []; + const count = this.options.maxCount; + while (this.particles.length < count) { + this.particles.push(this.resetParticle({} as Snowflake, canvas.width, canvas.height)); + } + this.isRunning = true; + requestAnimationFrame(this.renderLoop); + if (timeout) { + window.setTimeout(this.stop, timeout); + } + } + + public stop = async () => { + this.isRunning = false; + } + + private resetParticle = (particle: Snowflake, width: number, height: number): Snowflake => { + particle.x = Math.random() * width; + particle.y = Math.random() * -height; + particle.xCol = particle.x; + particle.diameter = (Math.random() * 7) + 4; + particle.maximumDrift = (Math.random() * this.options.maxDrift) + 3.5; + particle.gravity = this.options.gravity + (Math.random() * 6) + 4; + return particle; + } + + private renderLoop = (): void => { + if (!this.context || !this.context.canvas) { + return; + } + if (this.particles.length === 0) { + this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); + } else { + const timeDelta = Date.now() - this.lastAnimationTime; + if (timeDelta >= KEY_FRAME_INTERVAL || !this.lastAnimationTime) { + // Clear the screen first + this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height); + + this.lastAnimationTime = Date.now(); + this.animateAndRenderSnowflakes(); + } + requestAnimationFrame(this.renderLoop); + } + }; + + private animateAndRenderSnowflakes() { + if (!this.context || !this.context.canvas) { + return; + } + const height = this.context.canvas.height; + for (const particle of arrayFastClone(this.particles)) { + particle.y += particle.gravity; + + // We treat the drift as a sine function to have a more fluid-like movement instead + // of a pong-like movement off walls of the X column. This means that for + // $x=A\sin(\frac{2\pi}{P}y)$ we use the `maximumDrift` as the amplitude (A) and a + // large multiplier to create a very long waveform through P. + const peakDistance = 75 * particle.maximumDrift; + const PI2 = Math.PI * 2; + particle.x = particle.maximumDrift * Math.sin((PI2 / peakDistance) * particle.y); + particle.x += particle.xCol; // bring the particle to the right place + + const radius = particle.diameter / 2; + this.context.save(); + this.context.beginPath(); + this.context.ellipse(particle.x, particle.y, radius, radius, 0, 0, 360); + this.context.fillStyle = '#eaeaea'; // grey so it shows up on the light theme + this.context.fill(); + this.context.closePath(); + this.context.restore(); + + // Remove any dead snowflakes + const maxBounds = radius * 4; // make sure it's *really* off screen + if (particle.y > (height + maxBounds)) { + const idx = this.particles.indexOf(particle); + this.particles.splice(idx, 1); + } + } + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b96d767ccb..556d217837 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -849,6 +849,8 @@ "sends confetti": "sends confetti", "Sends the given message with fireworks": "Sends the given message with fireworks", "sends fireworks": "sends fireworks", + "Sends the given message with snowfall": "Sends the given message with snowfall", + "sends snowfall": "sends snowfall", "You held the call Resume": "You held the call Resume", "%(peerName)s held the call": "%(peerName)s held the call", "Video Call": "Video Call", From f63572f02b1783940838ed7f2be586d6615f76a5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 18:08:04 +0000 Subject: [PATCH 18/28] Visual fixups for call UI * Add bottom margin on PiP view * Remove avatar blurring & pause icon for held calls * Change background of incoming call box to match PiP view * Put drop shadow & border radius on PiP view & incoming call box rather than the CallContainer they're in (so they each have their own drop shadow / rounded corners). * Add margin between incoming call box and PiP view --- res/css/views/voip/_CallContainer.scss | 7 +++---- res/css/views/voip/_CallView.scss | 10 ++++++++++ 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index eec8a1f188..ae1d37de71 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -18,10 +18,7 @@ limitations under the License. position: absolute; right: 20px; bottom: 72px; - border-radius: 8px; - overflow: hidden; z-index: 100; - box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); // Disable pointer events for Jitsi widgets to function. Direct // calls have their own cursor and behaviour, but we need to make @@ -49,8 +46,10 @@ limitations under the License. .mx_IncomingCallBox { min-width: 250px; - background-color: $primary-bg-color; + background-color: $secondary-accent-color; padding: 8px; + box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); + border-radius: 8px; pointer-events: initial; // restore pointer events so the user can accept/decline cursor: pointer; diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index dbe2c27e41..ad63604818 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -35,6 +35,10 @@ limitations under the License. .mx_CallView_pip { width: 320px; + padding-bottom: 8px; + margin-top: 10px; + box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08); + border-radius: 8px; .mx_CallView_voice { height: 180px; @@ -84,6 +88,7 @@ limitations under the License. border-radius: 2000px; overflow: hidden; position: relative; + /* Blurred avatar images & pause icon for on-hold removed for now &::after { position: absolute; content: ''; @@ -101,17 +106,21 @@ limitations under the License. .mx_CallView_pip &::after { background-size: 30px; } + */ } + /* .mx_BaseAvatar { filter: blur(20px); overflow: hidden; } + */ } .mx_CallView_voice_secondaryAvatarContainer { border-radius: 2000px; overflow: hidden; position: relative; + /* &::after { position: absolute; content: ''; @@ -129,6 +138,7 @@ limitations under the License. .mx_CallView_pip &::after { background-size: 24px; } + */ } .mx_CallView_voice_holdText { From 7cc00faeb33cd7366046d7381fde9173818a5955 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 19:35:41 +0000 Subject: [PATCH 19/28] Vary resume link text Use 'Switch' if unholding that call would hold another --- src/CallHandler.tsx | 12 ++++++++++++ src/components/views/voip/CallView.tsx | 6 ++++-- src/i18n/strings/en_EN.json | 1 + 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index fac4d6fc4e..8ce0da36dc 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -616,6 +616,18 @@ export default class CallHandler { } } + /** + * @returns true if we are currently in anu call where we haven't put the remote party on hold + */ + hasAnyUnheldCall() { + for (const call of this.calls.values()) { + if (call.state === CallState.Ended) continue; + if (!call.isRemoteOnHold()) return true; + } + + return false; + } + private async startCallApp(roomId: string, type: string) { dis.dispatch({ action: 'appsDrawer', diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 65ba693b58..495a99d53c 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -19,7 +19,7 @@ import React, { createRef, CSSProperties, ReactNode } from 'react'; import dis from '../../../dispatcher/dispatcher'; import CallHandler from '../../../CallHandler'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; -import { _t } from '../../../languageHandler'; +import { _t, _td } from '../../../languageHandler'; import VideoFeed, { VideoFeedType } from "./VideoFeed"; import RoomAvatar from "../avatars/RoomAvatar"; import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call'; @@ -423,7 +423,9 @@ export default class CallView extends React.Component { const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold; let onHoldText = null; if (this.state.isRemoteOnHold) { - onHoldText = _t("You held the call Resume", {}, { + const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ? + _td("You held the call Switch") : _td("You held the call Resume"); + onHoldText = _t(holdString, {}, { a: sub => {sub} , diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 556d217837..dcaffdfbcd 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -851,6 +851,7 @@ "sends fireworks": "sends fireworks", "Sends the given message with snowfall": "Sends the given message with snowfall", "sends snowfall": "sends snowfall", + "You held the call Switch": "You held the call Switch", "You held the call Resume": "You held the call Resume", "%(peerName)s held the call": "%(peerName)s held the call", "Video Call": "Video Call", From f325df3b6a587c11c205f8fdbefc524f961ea16d Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 18 Dec 2020 19:40:57 +0000 Subject: [PATCH 20/28] Remove secondary call avatar and change 'paused' to 'on hold' --- res/css/views/voip/_CallView.scss | 25 ------------------------- src/components/views/voip/CallView.tsx | 17 +---------------- src/i18n/strings/en_EN.json | 2 +- 3 files changed, 2 insertions(+), 42 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index ad63604818..9fcf47cf9e 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -116,31 +116,6 @@ limitations under the License. */ } -.mx_CallView_voice_secondaryAvatarContainer { - border-radius: 2000px; - overflow: hidden; - position: relative; - /* - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: rgba(0, 0, 0, 0.6); - background-image: url('$(res)/img/voip/paused.svg'); - background-position: center; - background-size: 40px; - background-repeat: no-repeat; - } - .mx_CallView_pip &::after { - background-size: 24px; - } - */ -} - .mx_CallView_voice_holdText { height: 20px; padding-top: 20px; diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 495a99d53c..6748728278 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -480,20 +480,6 @@ export default class CallView extends React.Component { mx_CallView_voice: true, mx_CallView_voice_hold: isOnHold, }); - let secondaryCallAvatar: ReactNode; - - if (this.props.secondaryCall) { - const secAvatarSize = this.props.pipMode ? 40 : 100; - secondaryCallAvatar =
- -
; - } contentView =
@@ -504,7 +490,6 @@ export default class CallView extends React.Component { width={avatarSize} />
- {secondaryCallAvatar}
{onHoldText}
{callControls} @@ -548,7 +533,7 @@ export default class CallView extends React.Component { - {_t("%(name)s paused", { name: secCallRoom.name })} + {_t("%(name)s on hold", { name: secCallRoom.name })} ; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index dcaffdfbcd..470defd2f9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -858,7 +858,7 @@ "Voice Call": "Voice Call", "Fill Screen": "Fill Screen", "Return to call": "Return to call", - "%(name)s paused": "%(name)s paused", + "%(name)s on hold": "%(name)s on hold", "Unknown caller": "Unknown caller", "Incoming voice call": "Incoming voice call", "Incoming video call": "Incoming video call", From 189d5bf769253ad9516d0fd203b70c87f4c0f3fc Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 21 Dec 2020 11:21:50 +0000 Subject: [PATCH 21/28] Comment typo Co-authored-by: J. Ryan Stinnett --- src/CallHandler.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 8ce0da36dc..0468a3917f 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -617,7 +617,7 @@ export default class CallHandler { } /** - * @returns true if we are currently in anu call where we haven't put the remote party on hold + * @returns true if we are currently in any call where we haven't put the remote party on hold */ hasAnyUnheldCall() { for (const call of this.calls.values()) { From d851c826e5fe1a43bbdf02776797b6bdca371ec7 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 21 Dec 2020 11:24:36 +0000 Subject: [PATCH 22/28] Probably better to just remove this --- res/css/views/voip/_CallView.scss | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 9fcf47cf9e..a9b02ff5d8 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -88,32 +88,7 @@ limitations under the License. border-radius: 2000px; overflow: hidden; position: relative; - /* Blurred avatar images & pause icon for on-hold removed for now - &::after { - position: absolute; - content: ''; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: rgba(0, 0, 0, 0.6); - background-image: url('$(res)/img/voip/paused.svg'); - background-position: center; - background-size: 40px; - background-repeat: no-repeat; - } - .mx_CallView_pip &::after { - background-size: 30px; - } - */ } - /* - .mx_BaseAvatar { - filter: blur(20px); - overflow: hidden; - } - */ } .mx_CallView_voice_holdText { From 71cbc8bf29aa62648832f9c4dc20bf9659fd3614 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Dec 2020 12:46:29 +0000 Subject: [PATCH 23/28] Rename and reformat Element URL pattern This is just a code style cleanup. There are no behaviour changes in this commit. --- src/HtmlUtils.tsx | 2 +- src/linkify-matrix.js | 15 ++++++++------- src/utils/permalinks/Permalinks.js | 4 ++-- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 2301ad250b..ba0781f0a4 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -163,7 +163,7 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to attribs.target = '_blank'; // by default const transformed = tryTransformPermalinkToLocalHref(attribs.href); - if (transformed !== attribs.href || attribs.href.match(linkifyMatrix.VECTOR_URL_PATTERN)) { + if (transformed !== attribs.href || attribs.href.match(linkifyMatrix.ELEMENT_URL_PATTERN)) { attribs.href = transformed; delete attribs.target; } diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js index 77c62ce84d..bee8e95137 100644 --- a/src/linkify-matrix.js +++ b/src/linkify-matrix.js @@ -183,12 +183,13 @@ const escapeRegExp = function(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }; -// Recognise URLs from both our local vector and official vector as vector. -// anyone else really should be using matrix.to. -matrixLinkify.VECTOR_URL_PATTERN = "^(?:https?://)?(?:" - + escapeRegExp(window.location.host + window.location.pathname) + "|" - + "(?:www\\.)?(?:riot|vector)\\.im/(?:app|beta|staging|develop)/" - + ")(#.*)"; +// Recognise URLs from both our local and official Element deployments. +// Anyone else really should be using matrix.to. +matrixLinkify.ELEMENT_URL_PATTERN = + "^(?:https?://)?(?:" + + escapeRegExp(window.location.host + window.location.pathname) + "|" + + "(?:www\\.)?(?:riot|vector)\\.im/(?:app|beta|staging|develop)/" + + ")(#.*)"; matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?://)?(?:www\\.)?matrix\\.to/#/(([#@!+]).*)"; matrixLinkify.MATRIXTO_MD_LINK_PATTERN = @@ -253,7 +254,7 @@ matrixLinkify.options = { target: function(href, type) { if (type === 'url') { const transformed = tryTransformPermalinkToLocalHref(href); - if (transformed !== href || href.match(matrixLinkify.VECTOR_URL_PATTERN)) { + if (transformed !== href || href.match(matrixLinkify.ELEMENT_URL_PATTERN)) { return null; } else { return '_blank'; diff --git a/src/utils/permalinks/Permalinks.js b/src/utils/permalinks/Permalinks.js index 39c5776852..e157ecc55e 100644 --- a/src/utils/permalinks/Permalinks.js +++ b/src/utils/permalinks/Permalinks.js @@ -331,7 +331,7 @@ export function tryTransformPermalinkToLocalHref(permalink: string): string { return permalink; } - const m = permalink.match(matrixLinkify.VECTOR_URL_PATTERN); + const m = permalink.match(matrixLinkify.ELEMENT_URL_PATTERN); if (m) { return m[1]; } @@ -365,7 +365,7 @@ export function getPrimaryPermalinkEntity(permalink: string): string { // If not a permalink, try the vector patterns. if (!permalinkParts) { - const m = permalink.match(matrixLinkify.VECTOR_URL_PATTERN); + const m = permalink.match(matrixLinkify.ELEMENT_URL_PATTERN); if (m) { // A bit of a hack, but it gets the job done const handler = new ElementPermalinkConstructor("http://localhost"); From 93e24fae7a5b109dc5b53afdcbe73789e777bc81 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Dec 2020 13:15:00 +0000 Subject: [PATCH 24/28] Recognise *.element.io links as Element permalinks This ensures all Elements detect permalinks to official deployments as Element and handle them internally. Fixes https://github.com/vector-im/element-web/issues/16005 --- src/linkify-matrix.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js index bee8e95137..1a40fde26f 100644 --- a/src/linkify-matrix.js +++ b/src/linkify-matrix.js @@ -188,7 +188,8 @@ const escapeRegExp = function(string) { matrixLinkify.ELEMENT_URL_PATTERN = "^(?:https?://)?(?:" + escapeRegExp(window.location.host + window.location.pathname) + "|" + - "(?:www\\.)?(?:riot|vector)\\.im/(?:app|beta|staging|develop)/" + + "(?:www\\.)?(?:riot|vector)\\.im/(?:app|beta|staging|develop)/|" + + "(?:app|beta|staging|develop)\\.element\\.io/" + ")(#.*)"; matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?://)?(?:www\\.)?matrix\\.to/#/(([#@!+]).*)"; From 3907826cd627c6365d3ca095114ed234444f6328 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 21 Dec 2020 15:24:59 +0000 Subject: [PATCH 25/28] Look for emoji in the body that will be displayed Fixes https://github.com/vector-im/element-web/issues/16013 --- src/HtmlUtils.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 2301ad250b..9e42553dfa 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -438,13 +438,14 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts delete sanitizeParams.textFilter; } + const contentBody = isDisplayedWithHtml ? safeBody : strippedBody; if (opts.returnString) { - return isDisplayedWithHtml ? safeBody : strippedBody; + return contentBody; } let emojiBody = false; if (!opts.disableBigEmoji && bodyHasEmoji) { - let contentBodyTrimmed = strippedBody !== undefined ? strippedBody.trim() : ''; + let contentBodyTrimmed = contentBody !== undefined ? contentBody.trim() : ''; // Ignore spaces in body text. Emojis with spaces in between should // still be counted as purely emoji messages. From 78e6fb91214af5b833ac25bb81748a99f0bfc61e Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Dec 2020 17:00:39 +0000 Subject: [PATCH 26/28] Upgrade matrix-js-sdk to 9.4.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 2a3a2064f2..52c9c3f730 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "katex": "^0.12.0", "linkifyjs": "^2.1.9", "lodash": "^4.17.19", - "matrix-js-sdk": "9.4.0-rc.2", + "matrix-js-sdk": "9.4.0", "matrix-widget-api": "^0.1.0-beta.10", "minimist": "^1.2.5", "pako": "^1.0.11", diff --git a/yarn.lock b/yarn.lock index 66c4fe2ae1..3c2fcc0949 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6512,10 +6512,10 @@ mathml-tag-names@^2.0.1: resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== -matrix-js-sdk@9.4.0-rc.2: - version "9.4.0-rc.2" - resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.4.0-rc.2.tgz#8cd0eb9a76445c63e152ff7c8eb708513a67481e" - integrity sha512-Z2GJ0uv+/0IlwoAyducBBVZUTe4COyKtl6kanZNHK4kSGYZ/8pilTtMBj8fJJtWubOiZ6HxtaLEXrxulOJF+TA== +matrix-js-sdk@9.4.0: + version "9.4.0" + resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.4.0.tgz#86bd3e0d974ea5b1351a40c01d3e0d7d0ca76fe3" + integrity sha512-VN52M1M4VeXCHr9cmdzAwDEcPsIjPSykZQmJG1haL5KG792jT35f95+Vbp7v0c8Mai57vbEhoC8GugA9u+qV7Q== dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" From 74c33cabcae125f27f3bc5b453e3d06fd2d2729d Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Dec 2020 17:06:40 +0000 Subject: [PATCH 27/28] Prepare changelog for v3.11.0 --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 99d0aab14b..3d92148e8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,19 @@ +Changes in [3.11.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0) (2020-12-21) +===================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0-rc.2...v3.11.0) + + * Upgrade JS SDK to 9.4.0 + * [Release] Look for emoji in the body that will be displayed + [\#5519](https://github.com/matrix-org/matrix-react-sdk/pull/5519) + * [Release] Recognise `*.element.io` links as Element permalinks + [\#5516](https://github.com/matrix-org/matrix-react-sdk/pull/5516) + * [Release] Fixes for call UI + [\#5513](https://github.com/matrix-org/matrix-react-sdk/pull/5513) + * [RELEASE] Add a snowfall chat effect (with /snowfall command) + [\#5512](https://github.com/matrix-org/matrix-react-sdk/pull/5512) + * [Release] Fix padding in confirmation email registration prompt + [\#5502](https://github.com/matrix-org/matrix-react-sdk/pull/5502) + Changes in [3.11.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.11.0-rc.2) (2020-12-16) =============================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.11.0-rc.1...v3.11.0-rc.2) From d23d0b2b42ece6f83a6cc48e5eed638c152424f2 Mon Sep 17 00:00:00 2001 From: RiotRobot Date: Mon, 21 Dec 2020 17:06:40 +0000 Subject: [PATCH 28/28] v3.11.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52c9c3f730..81cf8f8873 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.11.0-rc.2", + "version": "3.11.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": {