MP4 videos in post URLs no longer embed when clicking the preview box next to the post title

[Nothing4You]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

On 0.19.3, clicking on the play symbol to the left of the post title, an embedded video player will be shown.
On 0.19.4-beta.3, the post will show external link indicator and will not embed the video.

Steps to Reproduce

1. Create a post linking to an mp4 video, such as https://files.catbox.moe/oytdpp.mp4
2. Open said post on a 0.19.4-beta.3 instance
3. Click the (broken, because it seems to try loading the video as image) preview left of the post
4. Get redirected to the video URL

Technical Details

Firefox 124.0.2

working: https://sh.itjust.works/post/17246485
not working: https://voyager.lemmy.ml/post/78810

Lemmy Instance Version

0.19.4-beta.3

Lemmy Instance URL

https://voyager.lemmy.ml

[Nothing4You]

It doesn't seem to be reproducible by posting the same link directly on voyager.lemmy.ml: https://voyager.lemmy.ml/post/100387

[Nothing4You]

Comparing the JSON .post_view.post of both posts returned by the API:

diff

diff --git a/dev/fd/11 b/dev/fd/13
--- a/dev/fd/11
+++ b/dev/fd/13
@@ -1,17 +1,16 @@
 {
-  "id": 78810,
-  "name": "Tried this with my wife, she gave me back change",
+  "id": 100387,
+  "name": "ui#2418",
   "url": "https://files.catbox.moe/oytdpp.mp4",
-  "creator_id": 15834,
-  "community_id": 65938,
+  "creator_id": 181570,
+  "community_id": 67912,
   "removed": false,
   "locked": false,
-  "published": "2024-04-02T23:18:35.954737Z",
+  "published": "2024-04-26T23:09:20.321778Z",
   "deleted": false,
   "nsfw": false,
-  "thumbnail_url": "https://files.catbox.moe/oytdpp.mp4",
-  "ap_id": "https://sh.itjust.works/post/17246485",
-  "local": false,
+  "ap_id": "https://voyager.lemmy.ml/post/100387",
+  "local": true,
   "language_id": 37,
   "featured_community": false,
   "featured_local": false,

post_view.post.thumbnail_url is present and pointing to the mp4 on the broken post.

[SleeplessOne1917]

I just tried to reproduce your error locally using the latest changes on main. I was unable to do so. Considering the original post on shitjustworks works (no wordplay intended) and the post that got federated to voyager doesn't work, this could be a federation issue, or an issue of incompatibility between 0.19.3 and the beta releases.

To help narrow down the issue, could you try posting from voyager to a federated community? Also worth trying to post in a community that's local to voyager but federated with another instance and viewing that post from the federated instance's side.

[SleeplessOne1917]

I think I found the issue digging around in the code. Determining the thumbnail is handled in this function with a terrifying jungle of if/else statements. Here's the most relevant lines:

// this.imageSrc uses thumbnail as its src if it exists
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
      return (
        <a
          className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
          href={url}
          rel={relTags}
          title={url}
          target={this.linkTarget}
        >
          {this.imgThumb(this.imageSrc)}
          <Icon
            icon="external-link"
            classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
          />
        </a>
      );
    } else if (url) {
      if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
        return (
          <a
            className="text-body"
            href={url}
            title={url}
            rel={relTags}
            data-tippy-content={I18NextService.i18n.t("expand_here")}
            onClick={linkEvent(this, this.handleImageExpandClick)}
            aria-label={I18NextService.i18n.t("expand_here")}
            target={this.linkTarget}
          >
            <div className="thumbnail rounded bg-light d-flex justify-content-center">
              <Icon icon="play" classes="d-flex align-items-center" />
            </div>
          </a>
        );
      } else {

If a thumbnail URL is defined, it will reach the condition before the video icon thumbnail, causing a link thumbnail with a broken image like the post on voyager.

I can fix this, however this issue exposes an edge case we haven't considered: what should the thumbnail look like when a thumbnail URL is defined and the URL is a video?

[dessalines]

That logic can def be cleaned up, the blame is entirely on me 😆

I can fix this, however this issue exposes an edge case we haven't considered: what should the thumbnail look like when a thumbnail URL is defined and the URL is a video?

IMO if the thumbnail is defined, that should always be preferred.

[SleeplessOne1917]

Should I still include the little video symbol watermark icon when the thumbnail is defined?

[dessalines]

Hrm... makes sense I think, up to you tho.