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

[Nothing4You]

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

[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.

[dessalines]

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

[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?

[SleeplessOne1917]

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