Merge pull request #4161 from CalamitousFelicitousness/gallery-video

Video gallery support in default UI

javascript/sdnext.css

@@ -1748,6 +1748,13 @@ background: var(--background-color)
   width: max-content;
 }
 
+#tab-gallery-files gallery-file {
+  /* Add a vertical gutter between items (left/right), matching existing small row spacing */
+  display: inline-block;
+  margin-right: 0.2em;
+  vertical-align: top; /* keep rows aligned on the top edge */
+}
+
 #tab-gallery-files {
   display: block;
   height: 75vh;
@@ -1845,6 +1852,22 @@ div:has(>#tab-gallery-folders) {
   object-fit: contain;
 }
 
+/* Gallery video preview matches image preview sizing and layout */
+#tab-gallery-video {
+  height: 63vh;
+}
+
+/* Ensure the <video> element fills the preview column and preserves aspect */
+#tab-gallery-video video {
+  width: 100%;
+  height: 100% !important;
+  object-fit: contain;
+  background: none;
+}
+
+/* Gradio container around the video should not add extra spacing */
+#tab-gallery-video .wrap { height: 100%; }
+
 .gallery-sort {
   background: var(--input-background-fill) !important;
   margin: 0 !important;

modules/ui_gallery.py

@@ -12,20 +12,34 @@ def read_media(fn):
         shared.log.error(f'Gallery not found: file="{fn}"')
         return [[], None, '', '', f'Media not found: {fn}']
     stat_size, stat_mtime = modelstats.stat(fn)
-    if fn.lower().endswith('.mp4'):
-        frames, fps, duration, w, h, codec, _frame = video.get_video_params(fn)
+    # Treat common containers as video for preview; Gradio/HTML5 will handle codec support.
+    video_exts = ('.mp4', '.webm', '.mkv', '.avi', '.mov', '.mpg', '.mpeg', '.mjpeg')
+    if fn.lower().endswith(video_exts):
         geninfo = ''
-        log = f'''
-            <p>Video <b>{w} x {h}</b>
-            | Codec <b>{codec}</b>
-            | Frames <b>{frames:,}</b>
-            | FPS <b>{fps:.2f}</b>
-            | Duration <b>{duration:.2f}</b>
-            | Size <b>{stat_size:,}</b>
-            | Modified <b>{stat_mtime}</b></p><br>
-            '''
-        return [gr.update(visible=False, value=[]), gr.update(visible=True, value=fn), geninfo, geninfo, log]
-    else:
+        try:
+            frames, fps, duration, w, h, codec, _frame = video.get_video_params(fn)
+            log = f'''
+                <p>Video <b>{w} x {h}</b>
+                | Codec <b>{codec}</b>
+                | Frames <b>{frames:,}</b>
+                | FPS <b>{fps:.2f}</b>
+                | Duration <b>{duration:.2f}</b>
+                | Size <b>{stat_size:,}</b>
+                | Modified <b>{stat_mtime}</b></p><br>
+                '''
+        except Exception as e:  # keep preview even if probing fails
+            shared.log.warning(f'Video probe failed: file="{fn}" {e}')
+            log = f'''
+                <p>Video
+                | Size <b>{stat_size:,}</b>
+                | Modified <b>{stat_mtime}</b></p><br>
+                '''
+        return [
+            gr.update(visible=False, value=[]),          # hide image gallery preview
+            gr.update(visible=True, value=fn),           # show video player
+            geninfo, geninfo, log
+        ]
+    else:  # image
         image = Image.open(fn)
         image.already_saved_as = fn
         geninfo, _items = images.read_info_from_image(image)