LibrePhotos window goes blank while scrolling through photos

[millercentral]

🐛 Bug Report

• 📁 I've Included a ZIP file containing my librephotos log files
• ❌ I have looked for similar issues (including closed ones)
• 🎬 (If applicable) I've provided pictures or links to videos that clearly demonstrate the issue

📝 Description of issue:

I'm a new user of LibrePhotos having freshly installed via docker and indexed my photo collection this weekend. Everything appears to have worked correctly, just over 42,000 images total.

On any browser on either mac or pc (haven't tried mobile), when scrolling through the main collection of photos, approximately 10 "pages" down the entire window immediately goes white. When this happens the browser developer console reports the following errors (see attached screenshot):

• Error: Invalid unit value at util.js 235:11 / Uncaught Error: Invalid Unit Value (util.js 235:11, util.js:245:35) at Function.value (duration.js:244:15)

If I use the browser scroll bar to scroll far down the page before hitting the issue, it appears I can then browse the rest of the collection, so it seems tied to a specific part of the collection near the top.

🔁 How can we reproduce it:

I can provide you access to my install/collection, just dm me if needed.

Please provide additional information:

• 💻 Operating system: Reproduces on either Windows 11 or Mac, using Safari, Edge, Chrome or Firefox browsers
• ⚙ Architecture (x86 or ARM): x64 (Windows), M1 (Mac)
• 🔢 Librephotos version: Docker:latest (2022w34)
• 📸 Librephotos installation method (Docker, Kubernetes, .deb, etc.): Docker
  • 🐋 If Docker or Kubernets, provide docker-compose image tag: latest
• 📁 How is you picture library mounted (Local file system (Type), NFS, SMB, etc.): SMB
• ☁ If you are virtualizing librephotos, Virtualization platform (Proxmox, Xen, HyperV, etc.): Ubuntu Docker, no VM

logs.zip

Screen.Recording.of.bug.mp4

[PatrickLove]

I had the same problem in my collection and did a little digging:

I first observed that it was happening consistently at the same position so I hypothesized that it was a particular image that trying to display that caused the problem. I narrowed it down to a particular month using the search feature. It would reliable occur searching for that month unless I used a really small screen that fit fewer images, where I would need to scroll down first. That seemed to confirm it was a problem image.

I then took to developer tools and pulled the item object that was causing the error in Video Overlay (see below). The item has video type but video_length is "". This causes it to fail when it tries to generate what appears to be the duration overlay, because "" does not convert to a number of seconds.

{
    "id": "b8658a3150c3d37d6904aaa116a29ed51",
    "dominantColor": "#000000",
    "url": "b8658a3150c3d37d6904aaa116a29ed51",
    "location": "",
    "date": "2022-01-22T01:30:08+00:00",
    "birthTime": "2022-01-22T01:30:08Z",
    "aspectRatio": 1.33,
    "type": "video",
    "video_length": "",
    "rating": 0,
    "owner": {
      [...]
    },
    "style": {
        "width": 170.45714285714286,
        "height": 128.16326530612244,
        "translateX": 160,
        "translateY": 2207
    }
}

Investigating the actual images from that month I found that I had a single .wmv video - the only one in my library (the rest being mp4s). I suspected this may have been the cause so moved it out of the librephotos folder and rescanned to remove the one missing image. This resolved the problem. I then converted that video to mp4 with ffmpeg and re-added it and I can now scroll my entire library without a whitescreen. Would be interested to know if @millercentral also has a WMV file in their library or if there is a different culprit in their case.

Looking at the github copy of VideoOverlay.tsx it looks like this might have already been addressed in 5a6a399? The added check on item.video_length should prevent it from trying to convert the duration in the empty case. My only thought then would be whether there is something else up with the initial video processing of WMV where video_length should be getting set but isn't. But it's also possible that my file was just weird and missing some length metadata it is supposed to have and that was added back as part of the re-encoding process.

[derneuere]

Yes, I pushed an update. I think you are using an older docker image, which doesn't include the fix. Thanks for the thorough explanation and the debugging :)

[millercentral]

I can confirm this no longer repros, thank you! Is there a better tag to use for my docker config? I don't mind being bleeding edge.

[derneuere]

If you use the docker-compose setup, then you can switch to the dev tag. The dev tag is always on the latest commit, which means it updates frequently :)