Add SVG studio image support, and studio image caching (#418)

* Support SVGs for studio images and add ETAGs
* Add SVG to studio image input
* Update content sniffing

pkg/api/routes_studio.go

@@ -2,10 +2,13 @@ package api
 
 import (
 	"context"
+	"crypto/md5"
+	"fmt"
 	"github.com/go-chi/chi"
 	"github.com/stashapp/stash/pkg/models"
 	"net/http"
 	"strconv"
+	"strings"
 )
 
 type studioRoutes struct{}
@@ -23,6 +26,21 @@ func (rs studioRoutes) Routes() chi.Router {
 
 func (rs studioRoutes) Image(w http.ResponseWriter, r *http.Request) {
 	studio := r.Context().Value(studioKey).(*models.Studio)
+	etag := fmt.Sprintf("%x", md5.Sum(studio.Image))
+	if match := r.Header.Get("If-None-Match"); match != "" {
+		if strings.Contains(match, etag) {
+			w.WriteHeader(http.StatusNotModified)
+			return
+		}
+	}
+
+	contentType := http.DetectContentType(studio.Image)
+	if contentType == "text/xml; charset=utf-8" || contentType == "text/plain; charset=utf-8" {
+		contentType = "image/svg+xml"
+	}
+
+	w.Header().Set("Content-Type", contentType)
+	w.Header().Add("Etag", etag)
 	_, _ = w.Write(studio.Image)
 }
 

ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx

@@ -12,6 +12,7 @@ interface IProps {
   onAutoTag?: () => void;
   onImageChange: (event: React.FormEvent<HTMLInputElement>) => void;
   onBackImageChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  acceptSVG?: boolean;
 }
 
 export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
@@ -113,6 +114,7 @@ export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
         isEditing={props.isEditing}
         text={props.onBackImageChange ? "Front image..." : undefined}
         onImageChange={props.onImageChange}
+        acceptSVG={props.acceptSVG ?? false}
       />
       {renderBackImageInput()}
       {renderAutoTagButton()}

ui/v2.5/src/components/Shared/ImageInput.tsx

@@ -5,12 +5,14 @@ interface IImageInput {
   isEditing: boolean;
   text?: string;
   onImageChange: (event: React.FormEvent<HTMLInputElement>) => void;
+  acceptSVG?: boolean;
 }
 
 export const ImageInput: React.FC<IImageInput> = ({
   isEditing,
   text,
-  onImageChange
+  onImageChange,
+  acceptSVG = false
 }) => {
   if (!isEditing) return <div />;
 
@@ -20,7 +22,7 @@ export const ImageInput: React.FC<IImageInput> = ({
       <Form.Control
         type="file"
         onChange={onImageChange}
-        accept=".jpg,.jpeg,.png"
+        accept={`.jpg,.jpeg,.png${acceptSVG ? ',.svg' : ''}`}
       />
     </Form.Label>
   );

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -185,6 +185,7 @@ export const Studio: React.FC = () => {
           onImageChange={onImageChangeHandler}
           onAutoTag={onAutoTag}
           onDelete={onDelete}
+          acceptSVG
         />
       </div>
       {!isNew && (