Multi-select functionality for wall views

internal/api/server.go

@@ -11,6 +11,7 @@ import (
 	"net/http"
 	"os"
 	"path"
+	"path/filepath"
 	"runtime/debug"
 	"strconv"
 	"strings"
@@ -255,6 +256,9 @@ func Initialize() (*Server, error) {
 		staticUI = statigz.FileServer(ui.UIBox.(fs.ReadDirFS))
 	}
 
+	// handle favicon override
+	r.HandleFunc("/favicon.ico", handleFavicon(staticUI))
+
 	// Serve the web app
 	r.HandleFunc("/*", func(w http.ResponseWriter, r *http.Request) {
 		ext := path.Ext(r.URL.Path)
@@ -295,6 +299,31 @@ func Initialize() (*Server, error) {
 	return server, nil
 }
 
+func handleFavicon(staticUI *statigz.Server) func(w http.ResponseWriter, r *http.Request) {
+	mgr := manager.GetInstance()
+	cfg := mgr.Config
+
+	// check if favicon.ico exists in the config directory
+	// if so, use that
+	// otherwise, use the embedded one
+	iconPath := filepath.Join(cfg.GetConfigPath(), "favicon.ico")
+	exists, _ := fsutil.FileExists(iconPath)
+
+	if exists {
+		logger.Debugf("Using custom favicon at %s", iconPath)
+	}
+
+	return func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Cache-Control", "no-cache")
+
+		if exists {
+			http.ServeFile(w, r, iconPath)
+		} else {
+			staticUI.ServeHTTP(w, r)
+		}
+	}
+}
+
 // Start starts the server. It listens on the configured address and port.
 // It calls ListenAndServeTLS if TLS is configured, otherwise it calls ListenAndServe.
 // Calls to Start are blocked until the server is shutdown.

pkg/file/scan.go

@@ -7,6 +7,7 @@ import (
 	"io/fs"
 	"os"
 	"path/filepath"
+	"runtime/debug"
 	"strings"
 	"sync"
 	"time"
@@ -178,7 +179,16 @@ func (s *scanJob) execute(ctx context.Context) {
 	wg.Add(1)
 
 	go func() {
-		defer wg.Done()
+		defer func() {
+			wg.Done()
+
+			// handle panics in goroutine
+			if p := recover(); p != nil {
+				logger.Errorf("panic while queuing files for scan: %v", p)
+				logger.Errorf(string(debug.Stack()))
+			}
+		}()
+
 		if err := s.queueFiles(ctx, paths); err != nil {
 			if errors.Is(err, context.Canceled) {
 				return
@@ -204,6 +214,15 @@ func (s *scanJob) execute(ctx context.Context) {
 }
 
 func (s *scanJob) queueFiles(ctx context.Context, paths []string) error {
+	defer func() {
+		close(s.fileQueue)
+
+		if s.ProgressReports != nil {
+			s.ProgressReports.AddTotal(s.count)
+			s.ProgressReports.Definite()
+		}
+	}()
+
 	var err error
 	s.ProgressReports.ExecuteTask("Walking directory tree", func() {
 		for _, p := range paths {
@@ -214,13 +233,6 @@ func (s *scanJob) queueFiles(ctx context.Context, paths []string) error {
 		}
 	})
 
-	close(s.fileQueue)
-
-	if s.ProgressReports != nil {
-		s.ProgressReports.AddTotal(s.count)
-		s.ProgressReports.Definite()
-	}
-
 	return err
 }
 

ui/v2.5/src/App.tsx

@@ -307,7 +307,8 @@ export const App: React.FC = () => {
     );
   }
 
-  const titleProps = makeTitleProps();
+  const title = config.data?.configuration.ui.title || "Stash";
+  const titleProps = makeTitleProps(title);
 
   if (!messages) {
     return null;

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -153,7 +153,15 @@ export const GalleryList: React.FC<IGalleryList> = PatchComponent(
             <div className="row">
               <div className={`GalleryWall zoom-${filter.zoomIndex}`}>
                 {result.data.findGalleries.galleries.map((gallery) => (
-                  <GalleryWallCard key={gallery.id} gallery={gallery} />
+                  <GalleryWallCard
+                    key={gallery.id}
+                    gallery={gallery}
+                    selected={selectedIds.has(gallery.id)}
+                    onSelectedChanged={(selected, shiftKey) =>
+                      onSelectChange(gallery.id, selected, shiftKey)
+                    }
+                    selecting={selectedIds.size > 0}
+                  />
                 ))}
               </div>
             </div>

ui/v2.5/src/components/Galleries/GalleryWallCard.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Form } from "react-bootstrap";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
@@ -18,6 +19,9 @@ const CLASSNAME_IMG_CONTAIN = `${CLASSNAME}-img-contain`;
 
 interface IProps {
   gallery: GQL.SlimGalleryDataFragment;
+  selected?: boolean;
+  onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
+  selecting?: boolean;
 }
 
 type Orientation = "landscape" | "portrait";
@@ -26,7 +30,12 @@ function getOrientation(width: number, height: number): Orientation {
   return width > height ? "landscape" : "portrait";
 }
 
-const GalleryWallCard: React.FC<IProps> = ({ gallery }) => {
+const GalleryWallCard: React.FC<IProps> = ({
+  gallery,
+  selected,
+  onSelectedChanged,
+  selecting,
+}) => {
   const intl = useIntl();
   const [coverOrientation, setCoverOrientation] =
     React.useState<Orientation>("landscape");
@@ -58,7 +67,11 @@ const GalleryWallCard: React.FC<IProps> = ({ gallery }) => {
       ? [...performerNames.slice(0, -2), performerNames.slice(-2).join(" & ")]
       : performerNames;
 
-  async function showLightboxStart() {
+  async function showLightboxStart(event?: React.MouseEvent) {
+    if (selecting && onSelectedChanged && event) {
+      onSelectedChanged(!selected, event.shiftKey);
+      return;
+    }
     if (gallery.image_count === 0) {
       return;
     }
@@ -69,15 +82,33 @@ const GalleryWallCard: React.FC<IProps> = ({ gallery }) => {
   const imgClassname =
     imageOrientation !== coverOrientation ? CLASSNAME_IMG_CONTAIN : "";
 
+  let shiftKey = false;
+
   return (
     <>
       <section
-        className={`${CLASSNAME} ${CLASSNAME}-${coverOrientation}`}
-        onClick={showLightboxStart}
-        onKeyPress={showLightboxStart}
+        className={`${CLASSNAME} ${CLASSNAME}-${coverOrientation} wall-item`}
+        onClick={(e) => showLightboxStart(e)}
+        onKeyPress={() => showLightboxStart()}
         role="button"
         tabIndex={0}
+        draggable={selecting || undefined}
+        onDragStart={(e) => e.preventDefault()}
       >
+        {onSelectedChanged && (
+          <Form.Control
+            type="checkbox"
+            className="wall-item-check mousetrap"
+            checked={selected}
+            onChange={() => onSelectedChanged(!selected, shiftKey)}
+            onClick={(
+              event: React.MouseEvent<HTMLInputElement, MouseEvent>
+            ) => {
+              shiftKey = event.shiftKey;
+              event.stopPropagation();
+            }}
+          />
+        )}
         <RatingSystem value={gallery.rating100} disabled withoutContext />
         <img
           loading="lazy"

ui/v2.5/src/components/Images/ImageList.tsx

@@ -35,6 +35,9 @@ interface IImageWallProps {
   pageCount: number;
   handleImageOpen: (index: number) => void;
   zoomIndex: number;
+  selectedIds?: Set<string>;
+  onSelectChange?: (id: string, selected: boolean, shiftKey: boolean) => void;
+  selecting?: boolean;
 }
 
 const zoomWidths = [280, 340, 480, 640];
@@ -49,6 +52,9 @@ const ImageWall: React.FC<IImageWallProps> = ({
   images,
   zoomIndex,
   handleImageOpen,
+  selectedIds,
+  onSelectChange,
+  selecting,
 }) => {
   const { configuration } = useConfigurationContext();
   const uiConfig = configuration?.ui;
@@ -121,9 +127,26 @@ const ImageWall: React.FC<IImageWallProps> = ({
           ? props.photo.height
           : targetRowHeight(containerRef.current?.offsetWidth ?? 0) *
             maxHeightFactor;
-      return <ImageWallItem {...props} maxHeight={maxHeight} />;
+      const imageId = props.photo.key;
+      if (!imageId) {
+        return null;
+      }
+      return (
+        <ImageWallItem
+          {...props}
+          maxHeight={maxHeight}
+          selected={selectedIds?.has(imageId)}
+          onSelectedChanged={
+            onSelectChange
+              ? (selected, shiftKey) =>
+                  onSelectChange(imageId, selected, shiftKey)
+              : undefined
+          }
+          selecting={selecting}
+        />
+      );
     },
-    [targetRowHeight]
+    [targetRowHeight, selectedIds, onSelectChange, selecting]
   );
 
   return (
@@ -258,6 +281,9 @@ const ImageListImages: React.FC<IImageListImages> = ({
         pageCount={pageCount}
         handleImageOpen={handleImageOpen}
         zoomIndex={filter.zoomIndex}
+        selectedIds={selectedIds}
+        onSelectChange={onSelectChange}
+        selecting={!!selectedIds && selectedIds.size > 0}
       />
     );
   }

ui/v2.5/src/components/Images/ImageWallItem.tsx

@@ -1,8 +1,12 @@
 import React from "react";
+import { Form } from "react-bootstrap";
 import type { RenderImageProps } from "react-photo-gallery";
 
 interface IExtraProps {
   maxHeight: number;
+  selected?: boolean;
+  onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
+  selecting?: boolean;
 }
 
 export const ImageWallItem: React.FC<RenderImageProps & IExtraProps> = (
@@ -13,20 +17,27 @@ export const ImageWallItem: React.FC<RenderImageProps & IExtraProps> = (
   const width = props.photo.width * zoomFactor;
 
   type style = Record<string, string | number | undefined>;
-  var imgStyle: style = {
+  var divStyle: style = {
     margin: props.margin,
     display: "block",
+    position: "relative",
   };
 
   if (props.direction === "column") {
-    imgStyle.position = "absolute";
-    imgStyle.left = props.left;
-    imgStyle.top = props.top;
+    divStyle.position = "absolute";
+    divStyle.left = props.left;
+    divStyle.top = props.top;
   }
 
   var handleClick = function handleClick(
     event: React.MouseEvent<Element, MouseEvent>
   ) {
+    if (props.selecting && props.onSelectedChanged) {
+      props.onSelectedChanged(!props.selected, event.shiftKey);
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     if (props.onClick) {
       props.onClick(event, { index: props.index });
     }
@@ -35,19 +46,40 @@ export const ImageWallItem: React.FC<RenderImageProps & IExtraProps> = (
   const video = props.photo.src.includes("preview");
   const ImagePreview = video ? "video" : "img";
 
+  let shiftKey = false;
+
   return (
-    <ImagePreview
-      loop={video}
-      muted={video}
-      playsInline={video}
-      autoPlay={video}
-      key={props.photo.key}
-      style={imgStyle}
-      src={props.photo.src}
-      width={width}
-      height={height}
-      alt={props.photo.alt}
+    <div
+      className="wall-item"
+      style={divStyle}
       onClick={handleClick}
-    />
+      draggable={props.selecting || undefined}
+      onDragStart={(e) => e.preventDefault()}
+    >
+      {props.onSelectedChanged && (
+        <Form.Control
+          type="checkbox"
+          className="wall-item-check mousetrap"
+          checked={props.selected}
+          onChange={() => props.onSelectedChanged!(!props.selected, shiftKey)}
+          onClick={(event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
+            shiftKey = event.shiftKey;
+            event.stopPropagation();
+          }}
+        />
+      )}
+      <ImagePreview
+        loop={video}
+        muted={video}
+        playsInline={video}
+        autoPlay={video}
+        key={props.photo.key}
+        src={props.photo.src}
+        width={width}
+        height={height}
+        alt={props.photo.alt}
+        onClick={handleClick}
+      />
+    </div>
   );
 };

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -235,6 +235,8 @@ const SceneList: React.FC<{
         scenes={scenes}
         sceneQueue={queue}
         zoomIndex={filter.zoomIndex}
+        selectedIds={selectedIds}
+        onSelectChange={onSelectChange}
       />
     );
   }

ui/v2.5/src/components/Scenes/SceneMarkerList.tsx

@@ -101,6 +101,8 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = PatchComponent(
           <MarkerWallPanel
             markers={result.data.findSceneMarkers.scene_markers}
             zoomIndex={filter.zoomIndex}
+            selectedIds={selectedIds}
+            onSelectChange={onSelectChange}
           />
         );
       }