Photos: Photos not shown in large browser windows

[andrzej-r]

Describe the bug
Photo gallery doesn't work when browser window is large.

To Reproduce
Steps to reproduce the behavior:

1. Open a maximized browser window on a 4k display
2. Click on the Photos gallery
3. Observe white background with a rotating waiting indicator. The photos are not displayed.
4. This issue doesn't occur in other (default) NC applications or when the window size is smaller (~1920x1080 already works fine).

Desktop (please complete the following information):

• OS: Linux, Ubuntu 20.04
• Browser: Tested on Firefox and Chromium

[emichael]

Just to note, reducing the size of a window that's already stuck on the loading spinner doesn't get photos to load. Similarly, the photos stay there when you maximize the size of window that was originally rendered at 1080p.

[dsmic]

OK, if I see this right, it should be an easy fix:

photos/src/assets/grid-sizes.js

contains max: with count: 10

It seems to me, that https://github.com/nextcloud/photos/blob/54caff10e6045619ecc728dafea191176839b18a/src/services/GridConfig.js#L47
does not use the max value. So adding something like || size=='max' in the find call should do the job...

Sorry, I do not have a development setup to create a pull request.

Here what I debugged...

I checked for the difference in the web-console between the cases where the photos are rendered (smaller window) and where they are not (larger window). This is the error message I get from the larger windows web console in Firefox:

The first problem I see seems to be:

[photos] Grid config
Object { }
GridConfig.js:39:10

little later

Photos.vue:112
Uncaught (in promise) TypeError: t.gridConfig is undefined
e Timeline.vue:228
u runtime.js:63
_invoke runtime.js:293
v runtime.js:118
T photos-5.js:65
a photos-5.js:65
_ photos-5.js:65
_ photos-5.js:65
getContent Timeline.vue:209
beforeMount Timeline.vue:193
VueJS 24
init vue-router.esm.js:2932
init vue-router.esm.js:2931
updateRoute vue-router.esm.js:2352
transitionTo vue-router.esm.js:2206
confirmTransition vue-router.esm.js:2340
r vue-router.esm.js:1944
r vue-router.esm.js:1951
He vue-router.esm.js:1955
confirmTransition vue-router.esm.js:2455
r vue-router.esm.js:1944
r vue-router.esm.js:1948
d vue-router.esm.js:2322
u vue-router.esm.js:2070
ot vue-router.esm.js:2146

[andrzej-r]

642 has some information about this (or related) issue.

[andrzej-r]

I see another problem which is related to a large window size - this time window height.

If I reduce the window width to work around the above issue but keep the window height close to maximum my monitor allows (~2000px) Nexctloud Photos will stop displaying photos after 5 rows. Scrolling down does not work - nothing happens. This seems to only affect "Your Photos" and "Your Videos" categories and there may be some other conditions (it doesn't always happen for me). If I reduce the window height I can scroll down past that limit and see more photos being loaded.

[dsmic]

OK, I can reproduce it, it seems to be hard codes in Timeline.vue : line 228

I am not sure when it is triggered, but hardcoding seems wrong?!

            this.cancelRequest = cancel

            const numberOfImagesPerBatch = this.gridConfig.count * 5 // loading 5 rows

            try {

I set it to 10 and it seems to work, but I don't think this is a nice solution....

[andrzej-r]

I guess the image loading code relies on the batch being larger than the visible area. Indeed, hardcoding a fixed value seems like a bad idea (failing with large screens, slowing down page loading with small screens).

[andrzej-r]

Looks like this is unrelated to the previous issue, shall I open a new ticket or can we use this one for all window size related issues?