search

SmilyOrg / photofield

Experimental fast photo viewer.
MIT License
398 stars 7 forks source link

Layout = wall not displaying #75

Closed jniggemann closed 8 months ago

jniggemann commented 11 months ago

Describe the bug Layout "wall" only produces white screen. Header with album name is still rendered.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'any album'
  2. Click on 'gear icon top right'
  3. Select layout 'wall'
  4. See error

Expected behavior Images are layouted as wall of pictures.

Desktop (please complete the following information):

Additional context Chromium console shows 

index.fb736cc0.js:4 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.ch40mestatus.qjz9zk/feature/5745543795965952
index.fb736cc0.js:47 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.ch40mestatus.qjz9zk/feature/5745543795965952
index.fb736cc0.js:29 Map not initialized yet, setting pending view {x: 0, y: 0, w: 1920, h: 0}
index.fb736cc0.js:29 Map not initialized yet, setting pending view {x: 0, y: 0, w: 1920, h: 1083}

Browser network analysis shows that lots of files like /api/scenes/8NDGBbzTGL/tiles?tile_size=512&zoom=9&background_color=%23000000&x=257&y=0 are loaded, all http 200, so OK.

PF shows (taken from syslog because running as a service)

Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 scene loading 2019
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 list infos sqlite        0 ms
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 list infos               0 ms
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 layout wall width 1920 cols 12
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 layout wall image 218.181818 174.545455
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 layout                   0 ms
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 scene load 2019          1 ms
Aug  5 18:43:23 server photofield[166612]: 2023/08/05 18:43:23 photos 146, scene 1920 x 198
SmilyOrg commented 9 months ago

Hi! I only just saw this, sorry! Nothing there looks out of place, so I'm not sure what could be the reason behind this.

You mention that in the browser network tab lots of tiles are loaded with 200 OK. If you open them directly, are all of them white? Any of them show any photos?

jniggemann commented 9 months ago

No prb. So I just updated to 0.11.0 and some collections now do display with layout = wall. Those collections that don't display properly, are not clickable, i.e. the cursor changes to "hand" and when klicking anywhre in the white area, nothing happens.

SmilyOrg commented 9 months ago

Hmm, strange. No errors in browser or server logs other than what you pasted above?

jniggemann commented 9 months ago

Console is empty when it's working and shows this when it's not:

index.fb736cc0.js:11 scene not found, creating...

index.fb736cc0.js:29 Scene missing, view {x: 0, y: 0, w: 1920, h: 1083}
setView @ index.fb736cc0.js:29
view @ index.fb736cc0.js:29
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
_ @ index.fb736cc0.js:4
xg @ index.fb736cc0.js:4
K @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
O @ index.fb736cc0.js:4
A @ index.fb736cc0.js:4
b @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
Xa @ index.fb736cc0.js:4
QA @ index.fb736cc0.js:4
Promise.then (async)
XA @ index.fb736cc0.js:4
ZA @ index.fb736cc0.js:4
LP @ index.fb736cc0.js:4
y @ index.fb736cc0.js:4
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
js @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
s @ index.fb736cc0.js:8
Promise.then (async)
l @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
l1 @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
A @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
_ @ index.fb736cc0.js:8
Ze.immediate @ index.fb736cc0.js:8
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
_ @ index.fb736cc0.js:4
xg @ index.fb736cc0.js:4
K @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
O @ index.fb736cc0.js:4
A @ index.fb736cc0.js:4
b @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
Xa @ index.fb736cc0.js:4
QA @ index.fb736cc0.js:4
Promise.then (async)
XA @ index.fb736cc0.js:4
ZA @ index.fb736cc0.js:4
AE @ index.fb736cc0.js:4
nO @ index.fb736cc0.js:4
y @ index.fb736cc0.js:4
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
set value @ index.fb736cc0.js:1
O @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Promise.then (async)
C @ index.fb736cc0.js:8
p @ index.fb736cc0.js:8
s @ index.fb736cc0.js:27
we.onQuery.t.<computed>.t.<computed> @ index.fb736cc0.js:27
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
NP @ index.fb736cc0.js:4
we.onUpdate:modelValue.o.<computed>.o.<computed> @ index.fb736cc0.js:11
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
NP @ index.fb736cc0.js:4
(anonymous) @ index.fb736cc0.js:47
Promise.then (async)
En @ index.fb736cc0.js:4
(anonymous) @ index.fb736cc0.js:47
n.emit @ index.fb736cc0.js:29
notifyChange @ index.fb736cc0.js:47
t.handleChange @ index.fb736cc0.js:47
t.setSelectedIndex @ index.fb736cc0.js:47
t.handleMenuItemAction @ index.fb736cc0.js:47
handleMenuItemAction @ index.fb736cc0.js:47
n.emit @ index.fb736cc0.js:29
notifySelected @ index.fb736cc0.js:43
t.handleItemAction @ index.fb736cc0.js:43
handleItemAction @ index.fb736cc0.js:43
n.emit @ index.fb736cc0.js:29
notifyAction @ index.fb736cc0.js:43
t.handleClick @ index.fb736cc0.js:43
t.handleClickEvent @ index.fb736cc0.js:43

index.fb736cc0.js:29 Scene loading, setting pending view {x: 0, y: 0, w: 1920, h: 1083}
setView @ index.fb736cc0.js:29
view @ index.fb736cc0.js:29
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
_ @ index.fb736cc0.js:4
xg @ index.fb736cc0.js:4
K @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
O @ index.fb736cc0.js:4
A @ index.fb736cc0.js:4
b @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
Xa @ index.fb736cc0.js:4
QA @ index.fb736cc0.js:4
Promise.then (async)
XA @ index.fb736cc0.js:4
ZA @ index.fb736cc0.js:4
LP @ index.fb736cc0.js:4
y @ index.fb736cc0.js:4
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
js @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
l1 @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
A @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
_ @ index.fb736cc0.js:8
mutate @ index.fb736cc0.js:8
itemsMutate @ index.fb736cc0.js:11
await in itemsMutate (async)
g @ index.fb736cc0.js:11
(anonymous) @ index.fb736cc0.js:11
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
_ @ index.fb736cc0.js:4
xg @ index.fb736cc0.js:4
QA @ index.fb736cc0.js:4
Promise.then (async)
XA @ index.fb736cc0.js:4
ZA @ index.fb736cc0.js:4
LP @ index.fb736cc0.js:4
y @ index.fb736cc0.js:4
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
js @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
s @ index.fb736cc0.js:8
Promise.then (async)
l @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
l1 @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
A @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
c @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Du @ index.fb736cc0.js:8
_ @ index.fb736cc0.js:8
Ze.immediate @ index.fb736cc0.js:8
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
_ @ index.fb736cc0.js:4
xg @ index.fb736cc0.js:4
K @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
O @ index.fb736cc0.js:4
A @ index.fb736cc0.js:4
b @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
M @ index.fb736cc0.js:4
L @ index.fb736cc0.js:4
E @ index.fb736cc0.js:4
B @ index.fb736cc0.js:4
run @ index.fb736cc0.js:1
Y.H.update @ index.fb736cc0.js:4
Xa @ index.fb736cc0.js:4
QA @ index.fb736cc0.js:4
Promise.then (async)
XA @ index.fb736cc0.js:4
ZA @ index.fb736cc0.js:4
AE @ index.fb736cc0.js:4
nO @ index.fb736cc0.js:4
y @ index.fb736cc0.js:4
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
(anonymous) @ index.fb736cc0.js:1
aC @ index.fb736cc0.js:1
Hb @ index.fb736cc0.js:1
Cg @ index.fb736cc0.js:1
set value @ index.fb736cc0.js:1
O @ index.fb736cc0.js:8
(anonymous) @ index.fb736cc0.js:8
Promise.then (async)
C @ index.fb736cc0.js:8
p @ index.fb736cc0.js:8
s @ index.fb736cc0.js:27
we.onQuery.t.<computed>.t.<computed> @ index.fb736cc0.js:27
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
NP @ index.fb736cc0.js:4
we.onUpdate:modelValue.o.<computed>.o.<computed> @ index.fb736cc0.js:11
Xa @ index.fb736cc0.js:4
fo @ index.fb736cc0.js:4
NP @ index.fb736cc0.js:4
(anonymous) @ index.fb736cc0.js:47
Promise.then (async)
En @ index.fb736cc0.js:4
(anonymous) @ index.fb736cc0.js:47
n.emit @ index.fb736cc0.js:29
notifyChange @ index.fb736cc0.js:47
t.handleChange @ index.fb736cc0.js:47
t.setSelectedIndex @ index.fb736cc0.js:47
t.handleMenuItemAction @ index.fb736cc0.js:47
handleMenuItemAction @ index.fb736cc0.js:47
n.emit @ index.fb736cc0.js:29
notifySelected @ index.fb736cc0.js:43
t.handleItemAction @ index.fb736cc0.js:43
handleItemAction @ index.fb736cc0.js:43
n.emit @ index.fb736cc0.js:29
notifyAction @ index.fb736cc0.js:43
t.handleClick @ index.fb736cc0.js:43
t.handleClickEvent @ index.fb736cc0.js:43
SmilyOrg commented 9 months ago

I'm not sure still what could be breaking there, I'm suspecting that error might be a red herring. Do you think it could be due to a specific unusual image or photo present?

jniggemann commented 8 months ago

Updated to latest version, but issue persisted. But I had some time and I finally solved this! Like you assumed, it was a red herring and the issue was due to mp4 files. My configuration.yaml had

media:
  extensions: [
    ".jpg", ".jpeg", ".png", ".avif", ".bmp", ".pam", ".ppm", ".jxl", ".exr", ".cr2", ".dng",
   ".mp4",".jfif"
  ]

in it. I had taken this from https://github.com/SmilyOrg/photofield/blob/main/defaults.yaml. I experimented a bit and also noticed that these mp4 files lead to having an empty entry with January 1970 in the default layout.

I removed the mp4 from media -> extensions and deleted all cache and thumbs files in my data directory. Waited for the rescan and - tadaa: Now the layout "wall" works.

SmilyOrg commented 8 months ago

Interesting! Something broken with videos then 🤔

Thanks for following up and I'm glad you were able to fix it! :)