zipline icon indicating copy to clipboard operation
zipline copied to clipboard

Bug: video embeds cropped on playback on mobile and extra space below on PC

Open wraithy opened this issue 1 year ago • 9 comments

What happened?

When you view a video on an iOS device (maybe others too) via Discord, the video in the embed is cropped which I believe is caused by the following meta tags. I am not sure if Discord uses the OpenGraph or the Twitter tags so I included both in this issue since they essentially do the same thing.

<meta name="twitter:player:width" content="720">
<meta name="twitter:player:height" content="480">
<meta property="og:video:width" content="720">
<meta property="og:video:height" content="480">

I took a look at the source and found that these values are not pulled from the files and are static values that are used by all video and audio files (I doubt it matters for the audio files). I am not sure how hard it would be to pull the dimensions from the videos themselves but it may be possible to pull the dimensions from the thumbnails instead (though that would cause issues for people who have thumbnails disabled).

Here is an example of the cropped video which is embedded on Discord when embeds are enabled and here is an example of what the embeds with extra space at the bottom look like.

Version

latest (ghcr.io/diced/zipline or ghcr.io/diced/zipline:latest)

What browser(s) are you seeing the problem on?

No response

Zipline Logs

No response

Browser Logs

No response

Additional Info

No response

wraithy avatar Dec 30 '23 05:12 wraithy

Discord uses both twitter meta tags and og tags

L7NEG avatar Dec 30 '23 07:12 L7NEG

But if you mean width and height set to 720x480 it won't support all videos since some videos are 1080x1920

L7NEG avatar Dec 30 '23 07:12 L7NEG

I talked about it in detail the fix for it you can just add a t folder then inset the [id].tsx file along with the meta tags value you showed but only it will work as a twitter embed on twitter as on discord it will make it bugged like this https://github.com/diced/zipline/pull/509

L7NEG avatar Dec 30 '23 07:12 L7NEG

But if you mean width and height set to 720x480 it won't support all videos since some videos are 1080x1920

Which is why the resolution would need to be extracted from the file or thumbnail instead of it being one fixed value.

wraithy avatar Dec 30 '23 07:12 wraithy

Yes you are right like the images one in the id.tsx file I requested it in the pull request fr fr

L7NEG avatar Dec 30 '23 07:12 L7NEG

this is kinda annoying, i don't want to store extra information about a file if i dont have to... (aka video resolution)

diced avatar Jan 05 '24 07:01 diced

this is kinda annoying, i don't want to store extra information about a file if i dont have to... (aka video resolution)

Yeah, it does seem like a waste to only store the resolution for that one purpose. Maybe if there's a way to detect if a video's orientation is landscape or portrait the video size could be set to 1280x720 (or 1920x1080) and then 720x1280 for portrait. This should fix the cropping on screen-sized videos however I am not sure how it would look on videos that are smaller than the given size.

wraithy avatar Jan 05 '24 18:01 wraithy

Yes bro exactly that's what I mean it 100%

L7NEG avatar Jan 06 '24 16:01 L7NEG

Before zipline had a hardcoded width and height, but it was removed because it had the same crop issue, so at some point we're gonna have to compromise or find some other solution 🤔

diced avatar Jan 13 '24 06:01 diced

held a poll on the discord server and an overwhelming majority said to just leave it how it is, so i'm not gonna pursue this anymore.

diced avatar Mar 01 '24 03:03 diced