Reaction emoji only loaded properly when hovered #4

New issue

Open

opened 2023-07-04 14:42:19 +00:00 by mediki · 1 comment

mediki commented

2023-07-04 14:42:19 +00:00

Expected behaviour

Custom emoji reaction should be rendered properly whether or not the button is hovered

Actual behaviour

src property for tag is missing when emoji button is not hovered, thus showing the lengthy alt text

Steps to reproduce the problem

Reaction button when not hovered:

When hovered:

Specifications

System: Alpine Linux (AMD64)
Akkoma: OTP release, version 2.7.2 (compatible; Akkoma 3.9.3-0-g9d7c877)
Frontend: mangane + fedibird-fe
Browser: Firefox 113.0.2 (Arch Linux)

### Expected behaviour Custom emoji reaction should be rendered properly whether or not the button is hovered ### Actual behaviour src property for <img> tag is missing when emoji button is not hovered, thus showing the lengthy alt text ### Steps to reproduce the problem Reaction button when not hovered: ![image](/attachments/feeef0fa-3cd7-4525-9487-a04ed6e355bd) ![image](/attachments/5368060d-b6b2-41d5-bb92-702bf38ab862) When hovered: ![image](/attachments/7c4b28f2-b427-493b-bb8a-335de716c10b) ![image](/attachments/70315b74-5d53-4a89-928c-d8e6a5952fd3) ### Specifications System: Alpine Linux (AMD64) Akkoma: OTP release, version 2.7.2 (compatible; Akkoma 3.9.3-0-g9d7c877) Frontend: mangane + fedibird-fe Browser: Firefox 113.0.2 (Arch Linux)

image.png

7 KiB

image.png

9.8 KiB

image.png

2.6 KiB

image.png

1.3 KiB

mediki commented

2023-07-05 04:54:28 +00:00

Author

I suspect this part as a culprit:

    } else if (url || static_url) {
      const filename  = (autoPlayGif || hovered) && url ? url : static_url;
      const shortCode = `:${emoji}:`;
      const className = classNames('emojione custom-emoji', this.props.className);

      return (
        <img
          draggable='false'
          className={className}
          alt={shortCode}
          title={shortCode}
          src={filename}
        />
      );
    } else {
      return null;
    }

or mabye here but I'm not sure.

I suspect [this part](https://akkoma.dev/AkkomaGang/fedibird-fe/src/commit/9e331f8b9be690942d45f3c870b6a1bdb8ab47df/app/javascript/mastodon/components/emoji.js#L36) as a culprit: ```javascript } else if (url || static_url) { const filename = (autoPlayGif || hovered) && url ? url : static_url; const shortCode = `:${emoji}:`; const className = classNames('emojione custom-emoji', this.props.className); return ( <img draggable='false' className={className} alt={shortCode} title={shortCode} src={filename} /> ); } else { return null; } ``` or mabye [here](https://akkoma.dev/AkkomaGang/fedibird-fe/src/commit/9e331f8b9be690942d45f3c870b6a1bdb8ab47df/app/javascript/mastodon/components/emoji_reactions.js#L122) but I'm not sure.

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: AkkomaGang/fedibird-fe#4

No description provided.