search

diced / zipline

A ShareX/file upload server that is easy to use, packed with features, and with an easy setup!
https://zipline.diced.sh/
MIT License
1.31k stars 128 forks source link

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

Closed wraithy closed 6 months ago

wraithy commented 8 months ago

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

L7NEG commented 8 months ago

Discord uses both twitter meta tags and og tags

L7NEG commented 8 months ago

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

L7NEG commented 8 months ago

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

wraithy commented 8 months ago

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.

L7NEG commented 8 months ago

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

diced commented 8 months ago

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

wraithy commented 8 months ago

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.

L7NEG commented 8 months ago

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

diced commented 7 months ago

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 commented 6 months ago

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.