SmilyOrg/photofield

Layout = wall not displaying

Closed this issue · 7 comments

jniggemann commented

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):

  • OS: Win 10 21H2
  • Browser: Chromium (115.0.5790.131), but also happens on Edge and FF

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

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

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.

  • 👍1
SmilyOrg commented

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

jniggemann commented

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
  • 👀1
SmilyOrg commented

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

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

Interesting! Something broken with videos then 🤔

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