diff --git a/docs/docs/photos/troubleshooting/thumbnails.md b/docs/docs/photos/troubleshooting/thumbnails.md index d954e77ea5..81c8ff8227 100644 --- a/docs/docs/photos/troubleshooting/thumbnails.md +++ b/docs/docs/photos/troubleshooting/thumbnails.md @@ -7,10 +7,49 @@ description: # Missing thumbnails -## Black thumbnails +## Web -Users have reported an issue with Firefox which prevents the app from generating -thumbnails if the "block canvas fingerprinting" setting in Firefox is enabled -(i.e. `privacy.resistFingerprinting` is set to true in `about:config`). That -feature blocks access to the canvas, and the app needs the canvas to generate -thumbnails. +**Firefox** prevents the app from generating thumbnails if the "block canvas +fingerprinting" setting in Firefox is enabled (i.e. +**`privacy.resistFingerprinting`** is set to true in `about:config`). The app +needs the canvas to generate thumbnails, and that Firefox feature blocks access +to the canvas. Ideally, Firefox should be prompting for a permission, but some +users have reported that sometime it silently blocks access, and turning off +that setting works. + +Similar issues may arise if you are using an extension that blocks access to the +canvas. + +## Desktop + +The only known case where thumbnails might be missing on desktop is when +uploading **videos** during a Google Takeout or folder sync on **Intel macOS** +machines. This is because the bundled ffmpeg that we use does not work with +Rosetta. For images, we are able to fallback to other mechanisms for generating +the thumbnails, but for videos because of their potentially huge size, the app +doesn't try the fallback to avoid running out of memory. + +In such cases, you will need to use the following workaround: + +1. Obtain a copy of `ffmpeg` binary that works on your Intel macOS. For + example, you can install it via `brew`. If you already have `ffmpeg` + installed you can copying it from `/usr/local/bin` (or whereever it was + installed). + +2. Copy or symlink it to + `/Applications/ente.app/Contents/Resources/app.asar.unpacked/node_modules/ffmpeg-static/ffmpeg`. + +Even without the workaround, thumbnail generation during video uploads via the +normal folder selection or drag and drop will work fine (since in this case we +have access to the video's data directly without reading it from a zip and can +thus use the fallback). + +## Regenerating thumbnails + +There is currently no functionality to regenerate thumbnails in the above cases. +You will need to upload the affected files again. + +Ente skips over files that have already been uploaded, so you can drag and drop +the original folder or zip again after removing the files without thumbnails +(and fixing the issue on web or adding the workaround on Intel macOS), and it'll +only upload the files that are necessary. diff --git a/web/apps/photos/src/services/upload/uploadService.ts b/web/apps/photos/src/services/upload/uploadService.ts index fdfb3657de..53301f4aaa 100644 --- a/web/apps/photos/src/services/upload/uploadService.ts +++ b/web/apps/photos/src/services/upload/uploadService.ts @@ -1037,26 +1037,24 @@ const withThumbnail = async ( } else { // 3. Browser based thumbnail generation for paths. // - // There are two reasons why we could get here: + // We can only get here when we're running in our desktop app (since + // only that works with non-File uploadItems), and the thumbnail + // generation failed. The scenarios are: // - // - We're running under Electron, but thumbnail generation is not - // available. This is currently only a specific scenario for image - // files on Windows. + // 1. We're trying to generate an image thumbnail on Windows or on + // ARM64 Linux. This won't be possible since the bundled + // imagemagick doesn't yet support these OS/arch combinations. // - // - We're running under the Electron, but the thumbnail generation - // otherwise failed for some exception. + // 2. We're trying to generate a video thumbnail on Intel macOS. + // This won't be possible since the bundled ffmpeg doesn't + // support Rosetta. + // + // 3. Some other arbitrary exception happened. // // The fallback in this case involves reading the entire stream into // memory, and passing that data across the IPC boundary in a single // go (i.e. not in a streaming manner). This is risky for videos of - // unbounded sizes, plus we shouldn't even be getting here unless - // something went wrong. - // - // So instead of trying to cater for arbitrary exceptions, we only - // run this fallback to cover for the case where thumbnail - // generation was not available for an image file on Windows. - // If/when we add support of native thumbnailing on Windows too, - // this entire branch can be removed. + // unbounded sizes, so we can only apply this fallback for images. if (fileTypeInfo.fileType == FILE_TYPE.IMAGE) { const data = await readEntireStream(fileStream.stream);