[6.x] Fix video thumbnails showing as a broken image (#15291)

Author: jaygeorge

config/assets.php

@@ -148,8 +148,9 @@
     | Control Panel Video Thumbnails
     |--------------------------------------------------------------------------
     |
-    | When enabled, Statamic will generate thumbnails for videos.
-    | Generated thumbnails are displayed in the Control Panel.
+    | When enabled, Statamic will generate thumbnails for videos when FFmpeg
+    | is available. Generated thumbnails are displayed in the Control Panel.
+    | Without FFmpeg, videos fall back to a filetype icon.
     |
     */
 
@@ -272,6 +273,7 @@
     |
     | Statamic uses FFmpeg to extract thumbnails from videos to be shown in the
     | Control Panel. You may adjust the binary location and cache path here.
+    | The configured binary must exist and be executable.
     |
     */
 

resources/js/components/assets/Browser/Grid.vue

@@ -128,6 +128,7 @@
                                                     'w-full p-4': asset.extension === 'svg',
                                                     'rounded-lg p-1': asset.orientation === 'square',
                                                 }"
+                                                @error="asset.thumbnail = null"
                                             />
                                             <file-icon v-else :extension="asset.extension" class="size-1/2" />
                                         </div>

resources/js/components/assets/Browser/Thumbnail.vue

@@ -7,6 +7,7 @@
             loading="lazy"
             :draggable="false"
             :class="{ 'h-8 w-8 object-cover': square }"
+            @error="asset.thumbnail = null"
         />
         <img
             v-else-if="asset.is_svg"

resources/js/components/fieldtypes/assets/AssetRow.vue

@@ -18,6 +18,7 @@
                     :src="thumbnail"
                     :alt="asset.basename"
                     v-if="thumbnail"
+                    @error="asset.thumbnail = null"
                 />
                 <file-icon :extension="asset.extension ?? 'generic'" v-else class="size-7" />
             </button>

resources/js/components/fieldtypes/assets/AssetTile.vue

@@ -36,7 +36,7 @@
                     <img v-if="canShowSvg" :src="asset.url" :title="label" class="p-4 w-full relative" />
 
                     <template v-else>
-                        <img :src="thumbnail" v-if="thumbnail" :title="label" class="rounded-md relative"  />
+                        <img :src="thumbnail" v-if="thumbnail" :title="label" class="rounded-md relative" @error="asset.thumbnail = null" />
 
                         <file-icon v-else :extension="asset.extension ?? 'generic'" class="h-full w-full p-4 relative" />
                     </template>

src/Console/Processes/Ffmpeg.php

@@ -8,6 +8,10 @@ class Ffmpeg extends Process
 {
     protected string $startTimestamp = '00:00:00';
 
+    private static bool $binaryResolved = false;
+
+    private static ?string $resolvedBinary = null;
+
     public function startTimestamp(string $startTimestamp): self
     {
         $this->startTimestamp = $startTimestamp;
@@ -49,10 +53,26 @@ private function buildCommand(string $ffmpegBinary, string $path, string $output
         ])->join(' ');
     }
 
+    public function available(): bool
+    {
+        return filled($this->ffmpegBinary());
+    }
+
     public function ffmpegBinary(): ?string
+    {
+        if (static::$binaryResolved) {
+            return static::$resolvedBinary;
+        }
+
+        static::$binaryResolved = true;
+
+        return static::$resolvedBinary = $this->resolveFfmpegBinary();
+    }
+
+    private function resolveFfmpegBinary(): ?string
     {
         if ($binary = config('statamic.assets.ffmpeg.binary')) {
-            return $binary;
+            return is_executable($binary) ? $binary : null;
         }
 
         $output = $this->run($this->isWindows() ? 'where ffmpeg' : 'which ffmpeg');
@@ -66,8 +86,20 @@ public function ffmpegBinary(): ?string
             return null;
         }
 
-        return str(StringUtilities::normalizeLineEndings(trim($output)))
+        $resolved = str(StringUtilities::normalizeLineEndings(trim($output)))
             ->explode("\n")
             ->first();
+
+        if (! filled($resolved) || ! is_executable($resolved)) {
+            return null;
+        }
+
+        return $resolved;
+    }
+
+    public static function clearBinaryCache(): void
+    {
+        static::$binaryResolved = false;
+        static::$resolvedBinary = null;
     }
 }

src/Http/Controllers/CP/Assets/ThumbnailController.php

@@ -71,9 +71,15 @@ public function show($asset, $size = null, $orientation = null)
             return $placeholder;
         }
 
+        $path = $this->generate();
+
+        if (! $path) {
+            return $this->getUnavailableThumbnailResponse();
+        }
+
         return $this->server->getResponseFactory()->create(
             $this->server->getCache(),
-            $this->generate()
+            $path
         );
     }
 
@@ -189,4 +195,18 @@ private function getPlaceholderResponse()
 
         return response(Statamic::svg('filetypes/picture'))->header('Content-Type', 'image/svg+xml');
     }
+
+    /**
+     * When thumbnail generation fails (e.g. FFmpeg missing for videos), show a filetype icon.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    private function getUnavailableThumbnailResponse()
+    {
+        $svg = $this->asset->isVideo()
+            ? Statamic::svg('filetypes/video')
+            : Statamic::svg('filetypes/picture');
+
+        return response($svg)->header('Content-Type', 'image/svg+xml');
+    }
 }

src/Http/Resources/CP/Assets/HasThumbnails.php

@@ -3,6 +3,7 @@
 namespace Statamic\Http\Resources\CP\Assets;
 
 use Illuminate\Support\Fluent;
+use Statamic\Imaging\ThumbnailExtractor;
 use Statamic\Support\Traits\Hookable;
 
 trait HasThumbnails
@@ -13,7 +14,7 @@ private function thumbnails(): array
     {
         $data = match (true) {
             $this->isImage() || $this->isSvg() => $this->getImageThumbnail(),
-            $this->isVideo() && config('statamic.assets.video_thumbnails', true) => $this->getVideoThumbnail(),
+            $this->isVideo() && ThumbnailExtractor::available() => $this->getVideoThumbnail(),
             default => ['thumbnail' => null],
         };
 

src/Imaging/ImageGenerator.php

@@ -155,10 +155,14 @@ public function generateVideoThumbnail($asset, array $params)
      */
     public function generateByAsset($asset, array $params)
     {
-        if (ThumbnailExtractor::enabled() && $asset->isVideo()) {
+        if (ThumbnailExtractor::available() && $asset->isVideo()) {
             return $this->generateVideoThumbnail($asset, $params);
         }
 
+        if ($asset->isVideo()) {
+            return '';
+        }
+
         $manipulationCacheKey = 'asset::'.$asset->id().'::'.md5(json_encode($params));
         $manifestCacheKey = static::assetCacheManifestKey($asset);
 

src/Imaging/ThumbnailExtractor.php

@@ -20,6 +20,11 @@ public static function enabled()
         );
     }
 
+    public static function available()
+    {
+        return static::enabled() && app(Ffmpeg::class)->available();
+    }
+
     public static function cachePath()
     {
         return config(