[Web Bug]: Landscape videos are getting shrunk down

[XanatosX]

Description

I noticed that with some update in the past, if you upload a full HD landscape video to Loops it is getting shrunk down for the web UI. This does make it hard to view them on the web fronted.

For example my first uploaded video was just fine as you can see here:

https://loops.video/v/bFkx_XCV69

But if changed, now they look like that:

https://loops.video/v/cho38e6Cdo
https://loops.video/v/czhlmDbIBc

This does make the service quite unusable for me as I mostly do use landscape videos.

Steps to reproduce

1. Open Web UI
2. Click to upload new video
3. Upload a Full HD Landscape video
4. Preview is fine
5. Press upload
6. Video is getting shrunk on the web ui, making it nearly unviewable

Loops version

v1.0.0-beta.6

Acknowledgements

Yes

[XanatosX]

As further information, all videos where recorded with "OBS" and cut with "kdenlive". The videos are indeed 1920 x 1080 on my local machine, so they are getting actively "shrunk" on the web.

Either the post processing on upload alters the video or the player does that.

[XanatosX]

Might be a result of https://github.com/joinloops/loops-server/blob/3fcfe0a772da10aaf2ee7bd791446c9be745dee9/app/Http/Controllers/Api/VideoController.php

[XanatosX]

Might be that something got mixed up here, without a deep knowledge of the code or the inner workings of loops it seems to me that min and max width is the wrong way around.

loops-server/resources/js/components/Feed/VideoPlayer.vue

Line 968 in 3fcfe0a

<style scoped>

<style scoped>
@supports (-webkit-touch-callout: none) {
    .video-wrapper {
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
    }

    @media (max-width: 767px) {
        .video-wrapper {
            height: calc(100dvh - 80px);
        }
    }

    @media (min-width: 1024px) {
        .video-wrapper {
            height: calc(100vh - 130px);
            height: calc(100dvh - 130px);
        }
    }
}

.video-wrapper {
    height: 100dvh;
}

@media (max-width: 767px) {
    .video-wrapper {
        height: calc(100dvh - 80px);
    }
}

@media (min-width: 1024px) {
    .video-wrapper {
        height: calc(100dvh - 60px);
    }
}

[XanatosX]

Okay I did discover more about this issue. It is properly something with the video player size if a loop is shared as a link.

So if those videos are shown in the feed they do look "normal" as the UI around it reflects a portrait like view and the player does match that exactly. If you copy the link to a video and open it up on a full HD monitor the space for the video is much larger than in the feed. This does make it feel like the video is super small while still being the same size as in the feed.

> Viewed as "link" > Viewed in feed

Size stays identically but looks much smaller if shared as a link. In my opinion the player should use all space available if in the "link" share mode, if the video is landscape.

Maybe add a flag on upload to define if a video is landscape or detect automatically based on the video ratio if possible. If it is landscape make the player "fullscreen" on the link share version.