Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Conversation

nurjinjafar
Copy link
Contributor

@nurjinjafar nurjinjafar commented Aug 24, 2020

@t3chguy as discussed, the draft pull request for confetti feature.
after the first refresh the confetti is thrown again, because the message is considered still not read!
looking forward to ideas and improvements.
Thanks

Fixes element-hq/element-web#14676

@t3chguy t3chguy changed the title fixes element-web#14676 Show confetti in a chat room on command or emoji Aug 24, 2020
@nurjinjafar
Copy link
Contributor Author

Hello @t3chguy, should i ignore that the the pull request didn't pass the end-to-end tests trying to clone riot-web from our org?
or is there anything else?

  • git clone git://github.com/nordeck/riot-web.git riot-web --branch feature_confetti#14676 --depth 1
    --
      | Cloning into 'riot-web'...
      | fatal: remote error:
      | Repository not found.
@t3chguy
Copy link
Member

t3chguy commented Aug 24, 2020

That error can be ignored, it is trying to find matching branches for this contribution falling back to the defaults.

The e2e test failure is due to your branch being out of date with develop I suggest you run the equivalent of git pull origin develop to sync back up.

I gave you a preliminary review, feel free to reach out with any questions

@nurjinjafar
Copy link
Contributor Author

Hello @t3chguy, in the current implementation of running slash commands, i think, they all happen on the sender's side to process the message before sending it, right? in SendMessageComposer the commands are ignored from beeing sent. well in confetti command case, what could be unique in the event itself that the message comes with a command or even is only the command?

@t3chguy
Copy link
Member

t3chguy commented Aug 25, 2020

@nurjinjafar

Some commands send messages, some don't.
Most are ignored by SendMessageComposer (all except /me)

Maybe you can use /rainbow as a base given that it is a command which sends a message

…into feature_confetti#14676 � Conflicts: �	src/SlashCommands.tsx �	src/i18n/strings/de_DE.json
changed the implementation of on.Event.decrypted function
throwing the confetti on the sender's side change sendHtmlMessage to sendTextMessage in slashCommands
@skolmer
Copy link
Contributor

skolmer commented Oct 21, 2020

Changes

  1. Generalized effects feature to easily add room effects by configuration
  2. Moved effect code to new effects directory
  3. Lazy-load animation code only when effect is used the first time and if room effects are enable in element settings
  4. Animation code is now a class and does not manipulate the DOM directly
  5. Added TypeScript definitions
  6. Create animation canvas the react >16.x way and (re-)use it for all kinds of room effects
@skolmer
Copy link
Contributor

skolmer commented Oct 22, 2020

Hi @t3chguy @turt2live Can you help us with the last failing check? Is it related to our code and if so where can I find the test that is failing here? thanks!

* bob hunts for the emoji to yell at their opponent ... failure: { TimeoutError: waiting for selector ".mx_Toast_icon_verification" failed: timeout 20000ms exceeded 
@t3chguy
Copy link
Member

t3chguy commented Oct 26, 2020

https://s3.amazonaws.com/buildkiteartifacts.com/e2e088c6-a3b8-46ee-8a6a-e5fba34f6f51/921c8db7-da49-4341-8039-2add795985fd/23d286de-c390-44fa-a127-92452e1f108d/d7b98ef9-020d-4e6a-abdc-3a7895df1885/test/end-to-end-tests/logs/bob/console.log?response-content-type=text%2Fplain&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAQPCP3C7LQWLAXRCN%2F20201026%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20201026T125120Z&X-Amz-Expires=600&X-Amz-SignedHeaders=host&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEKX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJIMEYCIQDw3DiJzHR%2FSnK4DI1o8JxO6%2BnLTUF6NbUfOebPtoovWQIhAJ2OT4j7p5TISllwV6zxnMN2PThPP3fh2%2Bicd6Nlj18VKr0DCO3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQABoMMDMyMzc5NzA1MzAzIgypt8VDtwkYB44ZJCwqkQNHeTVzLAqyi%2FG%2B4S%2FYnWaJQMWurPaMnlD%2Bzeje75Ztz0u4qTJXDIbpctbHxPP5KC2z9%2B281BWloSxye4CFTyd7cIv%2FnGVMyt7llLj0Ua9vW8k6sBdjm3lP7Qvd9jzfIHlDO5fQ5%2FFtchzKSylW7J%2FFKr%2BeIGk5M8cNH09ddm63X2gpKOwck%2FIQK%2FOMlsHaKJ5HdKibe%2BpJNvZR1D0NvuQeK1XTcjKk2zzFy8TAlN2PpmzrmexCmSZLN8fvCxYfzCQyWWVkKvyx9lf0wC46uVjJU6zvu%2Fi87Ey%2Fm%2BoS8pooMA4NlXL7wzqiILxeVAjdUuESOdrOhL8fU3U8fnay4tiwEqiYtXXKM4urx9BLdr8LESW2uTA4RAYV8F2jt5fmhhy0pHCZcQL64vuNXh50UXC5OzJj4SrZcZzwJ6%2BqyEJ%2BX%2FyrF0nHLGUocgInzdH8xzQ1O4WLDeXRMT5pjmVnxP%2Bik3qqavTiDwE26YpxM%2F6wl5Z8KLY0PfFVCPiihouWdTcumJJtSGvGxTGNlIol8p%2BCrTDL%2Fdr8BTrqAR4oqL6EOF0DdsFxzrp%2FzFiss4WpJiqvpG6G7p0IyYuU1wI5T73ekY%2BVwmyTMUhTgS5qo6SGLVCIDcVSRjmgCbekXP6yuHbzVgDFgIZgJSpEcYESkYWf3wfedaC%2FKHj6XRKy4lFNPSgQAERC3%2BCSOuOVWaJkp%2F5KlD6E6%2BiWIf3ouKKTgndv7q58MAYrL4WABzYtkEhWi8z9H%2Frh%2BYE4xOx6KTbME2Y3ykAoXnsXXW3dJStqdFsMQQ7zxcnQykRA70nrF3eKN%2BtbAzsxNnF2ov6tWo8zzErRrqHG92YLDd9v00IdCARv1RMNtQ%3D%3D&X-Amz-Signature=c0c0185031433ffc65c489ca91b437d082d55cb07aef5c471bcffdfbad9fe218

Bob's console has some error

Caught /sync error TypeError: Cannot read property 'getUnreadNotificationCount' of null at RoomView.eval [as handleEffects] (webpack-internal:///1020:586:27) at MatrixClient.eval (webpack-internal:///1020:582:12) at MatrixClient.emit (webpack-internal:///32:158:7) at eval (webpack-internal:///465:1045:14) at Array.forEach (<anonymous>) at SyncApi._processSyncResponse (webpack-internal:///465:1034:55) at SyncApi._sync (webpack-internal:///465:805:16) Caught /sync error TypeError: Cannot read property 'includes' of undefined at eval (webpack-internal:///1126:15:44) at Array.some (<anonymous>) at containsEmoji (webpack-internal:///1126:15:17) at eval (webpack-internal:///1020:590:109) at Array.forEach (<anonymous>) at RoomView.eval [as handleEffects] (webpack-internal:///1020:589:74) at MatrixClient.eval (webpack-internal:///1020:582:12) at MatrixClient.emit (webpack-internal:///32:158:7) at eval (webpack-internal:///465:1299:14) at Array.forEach (<anonymous>) downloadKeys: downloading for JSHandle@array Starting key download for JSHandle@array Warning: Failed prop type: Invalid prop `onRemove` of type `boolean` supplied to `DMUserTile`, expected `function`. in DMUserTile (created by InviteDialog) in InviteDialog (created by AsyncWrapper) in AsyncWrapper in div in div 
@nurjinjafar
Copy link
Contributor Author

@t3chguy thanks for the feedback, we fixed the issue!

@jryans jryans requested a review from a team October 27, 2020 11:06
@turt2live turt2live requested review from turt2live and removed request for a team October 28, 2020 01:02
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good! Apologies for the delay in review.

Aside from these comments, the only other thing would be to move the src/components/views/elements/effects directory up to just src/effects, but leaving EffectsOverlay in src/components/views/elements

@@ -0,0 +1,76 @@
import React, { FunctionComponent, useEffect, useRef } from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these new files need their header comments (usually copy/pasted from another file with the copyright line updated)

Comment on lines 3 to 9
declare global {
interface Window {
mozRequestAnimationFrame: any;
oRequestAnimationFrame: any;
msRequestAnimationFrame: any;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need these types - window.requestAnimationFrame should work.

Comment on lines 81 to 90
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, this.options.frameInterval);
};
})();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this shouldn't be needed

} as Effect<ConfettiOptions>,
];

export default effects;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We try to avoid export default for consts, and instead prefer to export them as a type instead. For exported constants like this, we'd generally use export const CHAT_EFFECTS: Effect<{ [key: string]: any }> = [...]; and import it as import { CHAT_EFFECTS } from "...";

@matrix-org matrix-org deleted a comment from vercel bot Nov 27, 2020
@jryans
Copy link
Collaborator

jryans commented Nov 27, 2020

Sorry about the noise here from the Vercel bot, it's safe to ignore. I was trialling a new preview method for PRs, but it went a bit haywire. I have now disabled it, so it shouldn't be an issue any more.

@turt2live turt2live self-requested a review November 27, 2020 15:45
@nurjinjafar
Copy link
Contributor Author

Hi @turt2live, thanks for your feedback. All points mentioned are taken care of and ready to be reviewed by you. Wish you a nice weekend!

path to confetti fixed after refactoring
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I've made some lint fixes in 550a522 - they aren't documented on the project though, so I don't expect anyone to actually know about them.

@turt2live turt2live merged commit 2c992c4 into matrix-org:develop Dec 7, 2020
@skolmer skolmer deleted the feature_confetti#14676 branch December 7, 2020 22:18
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

7 participants