Improved styling

Author: slinjhu

smoosense-gui/src/components/folder-browser/previewers/AlbumHeaderControls.tsx

@@ -31,66 +31,69 @@ export default function AlbumHeaderControls({
   }
 
   return (
-    <div className="flex items-center justify-between w-full">
-      {/* Album title and video play/stop button - leftmost */}
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <Images className="h-5 w-5" />
-          <span className="font-medium">
-            {mediaFilesCount} items
-          </span>
-        </div>
-        {hasVideos && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleToggleAutoPlay}
-            className="flex items-center gap-2"
-          >
-            {autoPlayAllVideos ? (
-              <>
-                <Square className="h-4 w-4" />
-                Stop
-              </>
-            ) : (
-              <>
-                <Play className="h-4 w-4" />
-                Play
-              </>
-            )}
-          </Button>
-        )}
-      </div>
-
-      {/* Gallery controls - middle */}
-      <GalleryMoreControlsContent className="flex items-center gap-4 space-y-0 max-w-none min-w-140" />
-
-      {/* Pagination controls - rightmost */}
-      <div className="flex items-center gap-2">
-        {totalPages > 1 && (
-          <>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onPrevPage}
-              disabled={currentPage === 0}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <span className="text-sm text-muted-foreground px-2">
-              {currentPage + 1} of {totalPages}
+    <div className="flex flex-col gap-3 w-full">
+      {/* First line: Item count and pagination */}
+      <div className="flex items-center justify-between w-full">
+        {/* Album title and video play/stop button - leftmost */}
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Images className="h-5 w-5" />
+            <span className="font-medium">
+              {mediaFilesCount} items
             </span>
+          </div>
+          {hasVideos && (
             <Button
               variant="outline"
               size="sm"
-              onClick={onNextPage}
-              disabled={currentPage === totalPages - 1}
+              onClick={handleToggleAutoPlay}
+              className="flex items-center gap-2"
             >
-              <ChevronRight className="h-4 w-4" />
+              {autoPlayAllVideos ? (
+                <>
+                  <Square className="h-4 w-4" />
+                  Stop
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4" />
+                  Play
+                </>
+              )}
             </Button>
-          </>
-        )}
+          )}
+        </div>
+
+        {/* Pagination controls - rightmost */}
+        <div className="flex items-center gap-2">
+          {totalPages > 1 && (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onPrevPage}
+                disabled={currentPage === 0}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm text-muted-foreground px-2">
+                {currentPage + 1} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onNextPage}
+                disabled={currentPage === totalPages - 1}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+        </div>
       </div>
+
+      {/* Second line: Gallery controls */}
+      <GalleryMoreControlsContent className="flex items-center gap-4 space-y-0 max-w-none min-w-140" />
     </div>
   )
 }

smoosense-py/intests/screenshot_preview.py

@@ -0,0 +1,101 @@
+#!/usr/bin/env python
+"""
+Script to take screenshots of file/folder previews in FolderBrowser.
+
+This captures previews for various file types including audio, images, videos, and data files.
+"""
+
+import sys
+import time
+import unittest
+from pathlib import Path
+
+# Add the intests directory to sys.path for imports
+sys.path.insert(0, str(Path(__file__).parent))
+
+from base_integration_test import BaseIntegrationTest
+from utils import LocatorUtils
+
+from smoosense.my_logging import getLogger
+
+logger = getLogger(__name__)
+
+
+class PreviewScreenshotCapture(BaseIntegrationTest):
+    """Capture screenshots of file/folder previews."""
+
+    @classmethod
+    def setUpClass(cls) -> None:
+        """Set up server, browser and preview-specific configuration."""
+        super().setUpClass()
+
+        # Configure URL with S3 demo folder
+        cls.root_folder = "s3://smoosense-demo/PreviewFiles"
+        cls.folder_browser_url = f"{cls.server.base_url}/FolderBrowser?rootFolder={cls.root_folder}"
+        logger.info(f"Preview URL configured: {cls.folder_browser_url}")
+
+    def test_capture_screenshots(self) -> None:
+        """Take screenshots of various file/folder previews."""
+
+        # Files and folders to preview
+        items_to_preview = [
+            "audio-files",
+            "image-files",
+            "ClickBench-100M.parquet",
+            "OpenVid-1M.csv",
+            "captions_val2017.json",
+            "readme.md",
+        ]
+
+        # Take screenshots for each theme mode
+        for mode in ["light", "dark"]:
+            logger.info(f"Setting theme to {mode} mode")
+
+            # Click on each item and capture screenshot
+            for item_name in items_to_preview:
+                logger.info(f"Capturing preview for {item_name} in {mode} mode")
+
+                try:
+                    # Navigate to the FolderBrowser with fresh page load
+                    response = self.page.goto(self.folder_browser_url)
+                    if response.status != 200:
+                        logger.error(f"Failed to load FolderBrowser: HTTP {response.status}")
+                        continue
+
+                    # Wait for the page to load completely
+                    self.page.wait_for_load_state("networkidle")
+                    time.sleep(2)  # Additional wait for tree to render
+
+                    # Set theme mode
+                    LocatorUtils.set_theme_mode(self.page, mode)
+                    time.sleep(1)
+
+                    # Find and click the item in tree view
+                    item_locator = self.page.locator(f'span[title="{item_name}"]')
+
+                    # Ensure item is visible and scrolled into view
+                    item_locator.scroll_into_view_if_needed()
+                    time.sleep(0.5)
+
+                    item_locator.click()
+
+                    # Wait for preview to load
+                    self.page.wait_for_load_state("networkidle")
+                    time.sleep(3)
+
+                    # Take screenshot
+                    # Sanitize filename (replace special characters)
+                    safe_name = item_name.replace(".", "_").replace("/", "_")
+                    screenshot_name = f"preview_{safe_name}_{mode}.png"
+                    self.take_screenshot(screenshot_name)
+                    logger.info(f"Screenshot saved: {screenshot_name}")
+
+                except Exception as e:
+                    logger.error(f"Failed to capture {item_name}: {e}")
+                    continue
+
+        logger.info("Screenshot capture completed successfully for previews")
+
+
+if __name__ == "__main__":
+    unittest.main()