Retort - a reaction-style plugin for Discourse

@angus I saw your fix got merged, but as reported above it’s not working. Any chance you’d be able to take a look?

Hey guys, just a note here that James has given me push permissions to the Retort repo, so I’ll be:

  • addressing this compatibility issue fully in the next few days
  • adding .discourse_compatibility file in here so the plugin can be pinned on the stable branch
  • adding the plugin to Pavilion’s public staging instance: try.thepavilion.io
  • updating the plugin’s compatbility (stable pin and compatbility with tests-passed) on a monthly basis.

Hang in there!

11 Likes

Ok, I’ve updated the plugin to properly support the new emoji picker in Discourse :tada:

It’s been tested in full and limited mode, and also on mobile. You can test it out here yourself:

https://try.thepavilion.io/t/heres-something-to-react-to/571

That site gets automatically rebuilt every 24 hours (which updates it to the latest Discourse). So if you’re on tests-passed (the default branch) it’s a good idea to test out any custom plugins you’re using there before you update.

I’ve also added a .discourse_compatibility file to the plugin:

Add .discourse_compatibility · gdpelican/retort@35aaad5 · GitHub.

This means that if you’re running the stable branch of Discourse you can keep updating as normal and this plugin will stay pinned at a commit that works with the latest stable release. See further here:

Pinning plugin and theme versions for older Discourse installs.

In this case the last stable release of Discourse (2.5.1) was 2 weeks ago and the emoji-picker refactor that broke Retort was 10 days ago, so the stable commit for this plugin is Gobals are being loaded later · gdpelican/retort@92738f0 · GitHub which I made back in June (tested and working with stable 2.5.1).

15 Likes

Thank you @angus! It is working on our Discourse instance!!

3 Likes

@sam Could you move this back to #plugin? Thanks.

4 Likes

Thank you so much for doing this!

One thing I’ve noticed (other than it’s working, yay) is that when you click the retort button it will snap the page so the emoji picker is on the top (latest Chrome, OSX), then if you scroll your page it moves the emoji picker to some weird places. Just wanted to report.

3 Likes

Thanks, yes this is a quirk of popper, the library the emoji picker uses for positioning. I’ve updated the usage of popper to address that.

4 Likes

First off a massive thank you to @angus :pray: for taking this plugin on, it’s been a fav of ours for a while now

I have updated to the latest version and it seems to break PM’s

Uncaught TypeError: Cannot read property 'map' of undefined
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:57
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)
    at e (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:19890)
_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368 Uncaught TypeError: Cannot read property 'toString' of undefined
    at t.disabledFor (_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368)
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:51
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)
1 Like

Thanks, we had a PR removing lodash today, another deprecation.

Should be addressed now:

Please update and let me know how you go.

7 Likes

Seems to be working ok now, thanks so much! :smile:

We applied this CSS to make things look a bit better for us

Desktop

.emoji-picker.has-limited-set img.emoji {
    width: 40px !important;
    height: 40px !important;
}

.post-retort {
    margin: 0px 2px;
}

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap;
}

.emoji-picker {
    min-height: 80px;
    max-width: 400px;
}

screenshot-vapingcommunity.co.uk-2020.09.08-21_17_25

Mobile

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap !important;
}

.emoji-picker {
    min-width: 100% !important;
}

4 Likes

I have juste rebuild discourse to update the plugin. But now, the plugin’s icon is missing and so are all of my theme-component. I don’t know if this is related but I have this message in the browser’s console:

Edit : after deactivating Retort, all theme-component came back so there really looks like there is a connection

2 Likes

I am seeing this error a lot on my site and after a while the whole site becomes slow / laggy for me.

In safe mode everything is fine, site is fast and responsive.

Using Google Chrome: Version 85.0.4183.83 (Official Build) (64-bit)

The Error:

Uncaught TypeError: Cannot read property 'map' of undefined
    at retort-11c49191cf3e1f7f570d8808ade67b5d7fcfdfe612b792c49f064baacdebadc7.js:1
    at application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1
    at Array.map (<anonymous>)
    at h (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.html (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at s (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at t.exports (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at e (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)



 if (!v.default.disabledFor(e))
                    return v.default.storeWidget(r),
                    o.retorts.map(function(e) {   <<<<< ERRORS ON THIS
                        var t = e.usernames
                          , i = e.emoji;
                        return r.attach("retort-toggle", {
                            post: o,
                            usernames: t,
                            emoji: i
                        })

Some CSS issues and how I resolved them for our personal use

Desktop

The first is not so much a problem but it could be, we rarely have this many retorts on a post but you should know that if you go over 8 retorts it will break the Post Controls

Here it is with 8 retorts, looks great

CSS Used for Desktop

.post-retort {
	margin: 0px 2px;
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
}

Phone: iPhone SE Gen1

Mobile

The maximum number of retorts at the moment on mobile without breaking post control, at least using a smaller screen is 1

IMG_7246

With more than one retort, post controls are moved off the screen

IMG_7245

Here’s how it looks with our CSS changes

IMG_7244

Mobile CSS

.post-retort {
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
	margin: 2px 2px;
	float: none;
}

You can achieve the same look on Desktop as on Mobile using the Mobile CSS above this will put the retorts above your post controls

We love this plugin and it gets a lot of use on our forum, thanks for taking it on @angus :+1:

4 Likes

I also get this error. My theme components are still working, though, but the retort picker is not visible anywhere (since the JS broke).

We updated our discourse to 2.5.1 and then installed this plugin for the very first time.

4 Likes

I cannot use wait load

2 Likes

I’ve somehow managed to fix my issue by rebuilding the app today.
Maybe try this on your side ?

I’m also on stable (2.5.1)

1 Like

Yeah, I reported the problem on their github issue tracker and it was fixed on the next day, very nice :slight_smile:

2 Likes

Hey guys, we love this plugin, but after the last update, we’re seeing white-skin emojis instead of the neutral yellow ones in our community forum.

We didn’t change any setting. This is our current configuration:

Is this expected? Can it be changed?

Thanks!!

2 Likes

Hello Guys,
I am new to Discourse. I installed discourse using source code in github and it is working online already.
Today I have retort installed, and I can see in Admin-Plugins the new installed retort was there and activated.

When I posted a new topic and review that using another account, with the hope I can use the new retort plugin, yet I cannot see the expected button there…

I went back to Admin and confirmed options of the plugin was set as described in manual. Please see picture below.

Since I can only post one picture here, I combine all three pictures together here.

So, please do me the favor to help me figure out what was wrong please. Any suggestions are appreciated. Thanks a lot in advance.

1 Like

Not expected no. I’ll take a look on the weekend.

@kchang Could you open up the web console (How can I open the browsers console? – Mailster Knowledge Base) and see if there are any exceptions there from this or any other plugins or themes you have (copy and paste any red lines from the console here (hide them in a “Hide Details” tab if they’re long).

2 Likes