fixed linting and docs

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

.dockerignore

@@ -10,7 +10,9 @@ backend/tmp
 backend/dist
 backend/backend*
 backend/vendor/**
+backend/internal/web/dist/*
+!backend/internal/web/dist/.gitkeep
+
 
-frontend/dist/**
 frontend/node_modules/**
 frontend/pkg/**

.github/workflows/pr.yaml

@@ -42,7 +42,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: dist
-          path: backend/internal/web/dist
+          path: frontend/dist
   build_backend:
     name: Build backend
     runs-on: ubuntu-24.04-arm
@@ -97,7 +97,7 @@ jobs:
         uses: actions/download-artifact@v4
         with:
           name: dist
-          path: backend/internal/web/dist
+          path: frontend/dist
       - name: Download backend build
         uses: actions/download-artifact@v4
         with:

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes to this project will be documented in this file. For commit
     - Office previews can use embedded thumbnail if possible.
     - Text file previews are more efficient direct creation.
     - New text preview API (`/api/resources/preview/text`) returns a 16KB text preview for text, Markdown, HTML, CSS, code and RTF files. Markdown and HTML render in the listing as sanitized previews. Previews are not cached on disk. SVG files are served directly as images.
+    - Text previews only render inline on tiles at least 60px wide, so narrower tiles (list, compact, normal) show the file-type icon with a `saved_search` badge instead when popup previews are enabled, and hovering still opens the larger popup preview. Text preview reads are bounded by the preview service's shared image-processor semaphore (`server.numImageProcessors`), and rendered preview HTML is cached in the browser so scrolling and hovering do not re-parse it.
     - Embedded previews for Krita (`.kra`, [#2431](https://github.com/gtsteffaniak/filebrowser/issues/2431)), OpenRaster (`.ora`), Sketch (`.sketch`), MuseScore (`.mscz`), CBZ (first page), XPS (embedded thumbnail, when present), ODF (`.odt`, `.ods`, `.odp`, `.odg`), and Office Open XML (`.docx`, `.xlsx`, `.pptx`) thumbnails.
   - Virtual scrolling for large lists: like the main listing, advanced search, file tree, etc. Only render the rows on screen, so very large folders stay responsive, resolving some performance issues (#2879) (#1773) (#3320) (#3326).
   - Search and navigation improvements:
@@ -45,6 +46,10 @@ All notable changes to this project will be documented in this file. For commit
  - Media probes are cached by file identity and concurrent reads are coalesced, so opening a file no longer triggers repeated ffprobe runs.
  - Client-initiated stream cancels (seek/navigation) no longer log spurious write-error responses.
  - Gzipped `.woff` font files are no longer generated without being served; only `.js` and `.woff2` are precompressed.
+ - Text preview tiles no longer show the bottom truncation fade; truncated content is clipped at the tile edge instead.
+ - Text preview tiles lay out at a minimum width and are clipped, instead of wrapping aggressively on narrow tiles.
+ - Queued text preview requests are canceled when their tiles unmount, so scrolling through a folder of text files and then opening another folder no longer delays the new folder's previews.
+ - Removed the stale, unreferenced `backend/internal/web/embed/` build output that was accidentally re-added; the frontend is embedded from `backend/internal/web/dist/` as before.
  - Advanced search no longer loses the previously selected sorting (#3275)
  - Context menu in iOS don't opening in Advanced Search (#2776) (#3299)
  - Improved mobile layout of inputs in search filters.

_docker/Dockerfile

@@ -39,7 +39,7 @@ COPY --from=base --chown=filebrowser:1000 [ "/app/filebrowser", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./data/config.yaml" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/reduce-rounded-corners.css", "./" ]
-COPY --from=nbuild --chown=filebrowser:1000 [ "/build/backend/internal/web/dist/", "./internal/web/dist/" ]
+COPY --from=nbuild --chown=filebrowser:1000 [ "/build/frontend/dist/", "./internal/web/dist/" ]
 ## sanity checks
 RUN [ "filebrowser", "version" ]
 RUN [ "ffmpeg", "-version" ]

_docker/Dockerfile.beta

@@ -34,7 +34,7 @@ COPY --from=base --chown=filebrowser:1000 [ "/app/filebrowser", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./data/config.yaml" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/reduce-rounded-corners.css", "./" ]
-COPY --from=nbuild --chown=filebrowser:1000 [ "/build/backend/internal/web/dist/", "./internal/web/dist/" ]
+COPY --from=nbuild --chown=filebrowser:1000 [ "/build/frontend/dist/", "./internal/web/dist/" ]
 ## sanity checks
 RUN [ "filebrowser", "version" ]
 # exposing default port for auto discovery.

_docker/Dockerfile.media

@@ -68,7 +68,7 @@ COPY --from=base --chown=filebrowser:1000 [ "/app/filebrowser", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./data/config.yaml" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/reduce-rounded-corners.css", "./" ]
-COPY --from=nbuild --chown=filebrowser:1000 [ "/build/backend/internal/web/dist/", "./internal/web/dist/" ]
+COPY --from=nbuild --chown=filebrowser:1000 [ "/build/frontend/dist/", "./internal/web/dist/" ]
 
 RUN filebrowser version && ffmpeg -version && ffprobe -version
 

_docker/Dockerfile.playwright-general

@@ -12,7 +12,7 @@ WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 COPY [ "./backend/reduce-rounded-corners.css", "./no-rounded.css" ]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # generate duplicate 1.1MB files
 RUN dd if=/dev/zero of=/app/frontend/tests/playwright-files/1.1MB.bin bs=1024 count=1126 && dd if=/dev/zero of=/app/frontend/tests/playwright-files/1.1mb.bin bs=1024 count=1126

_docker/Dockerfile.playwright-jwt

@@ -6,7 +6,7 @@ COPY [ "./frontend/tests", "./tests" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 RUN apt update && apt install nginx -y
 RUN mv default.conf /etc/nginx/conf.d/default.conf
 RUN sed -i 's/filebrowser/localhost/g' /etc/nginx/conf.d/default.conf

_docker/Dockerfile.playwright-local

@@ -11,7 +11,7 @@ COPY [ "./_docker/src/settings/backend/config.yaml", "./"]
 COPY [ "./_docker/src/settings/backend/database.db.old", "./"]
 COPY [ "./backend/reduce-rounded-corners.css", "./no-rounded.css"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true
 RUN ./filebrowser user set testuser1 --password testuser1

_docker/Dockerfile.playwright-no-config

@@ -11,7 +11,7 @@ COPY [ "./frontend/tests/", "./tests" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # Run tests
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true

_docker/Dockerfile.playwright-noauth

@@ -11,7 +11,7 @@ COPY [ "./frontend/tests/playwright-files", "./tests/playwright-files2" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # Run tests
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true

_docker/Dockerfile.playwright-oidc

@@ -7,7 +7,7 @@ WORKDIR /app/backend/
 RUN mkdir -p ./internal/web/dist
 COPY [ "./_docker/src/oidc/backend/", "./"]
 COPY ["./backend/filebrowser", "./"]
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # Run tests
 WORKDIR /app/frontend

_docker/Dockerfile.playwright-performance

@@ -23,7 +23,7 @@ WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 COPY [ "./backend/reduce-rounded-corners.css", "./no-rounded.css" ]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true
 ENV CI=true

_docker/Dockerfile.playwright-previews

@@ -13,7 +13,7 @@ COPY [ "./frontend/tests", "./tests" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true
 RUN ./filebrowser & sleep 2 && cd ../frontend && npx playwright test

_docker/Dockerfile.playwright-proxy

@@ -6,7 +6,7 @@ COPY [ "./frontend/tests", "./tests" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 RUN apt update && apt install nginx -y
 RUN mv default.conf /etc/nginx/conf.d/default.conf
 RUN mv .htpasswd /etc/nginx/conf.d/.htpasswd

_docker/Dockerfile.playwright-screenshots

@@ -10,7 +10,7 @@ COPY [ "./backend/filebrowser", "./"]
 COPY [ "./_docker/src/screenshots/backend/*", "./"]
 
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true
 RUN ./filebrowser & sleep 2 && cd ../frontend && npx playwright test --project dark-screenshots

_docker/Dockerfile.playwright-settings

@@ -13,7 +13,7 @@ WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 COPY [ "./backend/reduce-rounded-corners.css", "./no-rounded.css"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # Run tests
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true

_docker/Dockerfile.playwright-sharing

@@ -11,7 +11,7 @@ COPY [ "./frontend/tests/", "./tests" ]
 WORKDIR /app/backend/
 COPY [ "./backend/filebrowser", "./"]
 RUN mkdir -p ./internal/web/dist
-COPY [ "./backend/internal/web/dist/", "./internal/web/dist/"]
+COPY [ "./frontend/dist/", "./internal/web/dist/"]
 
 # Run tests
 ENV FILEBROWSER_PLAYWRIGHT_TEST=true

_docker/Dockerfile.purego

@@ -33,7 +33,7 @@ COPY --from=base --chown=filebrowser:1000 [ "/app/filebrowser", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./data/config.yaml" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/reduce-rounded-corners.css", "./" ]
-COPY --from=nbuild --chown=filebrowser:1000 [ "/build/backend/internal/web/dist/", "./internal/web/dist/" ]
+COPY --from=nbuild --chown=filebrowser:1000 [ "/build/frontend/dist/", "./internal/web/dist/" ]
 ## sanity checks
 RUN [ "filebrowser", "version" ]
 # exposing default port for auto discovery.

_docker/Dockerfile.slim

@@ -32,7 +32,7 @@ COPY --from=base --chown=filebrowser:1000 [ "/app/filebrowser", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./data/config.yaml" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/config.yaml", "./" ]
 COPY --from=base --chown=filebrowser:1000 [ "/app/reduce-rounded-corners.css", "./" ]
-COPY --from=nbuild --chown=filebrowser:1000 [ "/build/backend/internal/web/dist/", "./internal/web/dist/" ]
+COPY --from=nbuild --chown=filebrowser:1000 [ "/build/frontend/dist/", "./internal/web/dist/" ]
 ## sanity checks
 RUN [ "filebrowser", "version" ]
 # exposing default port for auto discovery.

backend/go.mod

@@ -21,7 +21,7 @@ require (
 	github.com/gtsteffaniak/go-cache v1.1.0
 	github.com/gtsteffaniak/go-ffmpeg v1.6.2
 	github.com/gtsteffaniak/go-logger v1.1.0
-	github.com/gtsteffaniak/go-media v1.2.0
+	github.com/gtsteffaniak/go-media v1.2.1
 	github.com/kovidgoyal/imaging v1.9.0
 	github.com/pquerna/otp v1.5.0
 	github.com/spf13/afero v1.15.0

backend/go.sum

@@ -167,6 +167,8 @@ github.com/gtsteffaniak/go-logger v1.1.0 h1:baFds+iibuLLNpNLwygz32bDqdsunI6dGWcd
 github.com/gtsteffaniak/go-logger v1.1.0/go.mod h1:rapapTju4D7bwt6h4JOdZNUXDjnp0WkTBd6TN5yWglI=
 github.com/gtsteffaniak/go-media v1.2.0 h1:lbNL/G86uzzH8NaT45DBHKm1r0P7yndIo9pNC7gdqQs=
 github.com/gtsteffaniak/go-media v1.2.0/go.mod h1:EH+5KAVLWfFl0g4W0Xni0qJJH8MUDIhAw4wPcC0mhxY=
+github.com/gtsteffaniak/go-media v1.2.1 h1:SjrPqgQTHnenAFuVh8fTRxk8+qXFEaCxiADx3zkM1OI=
+github.com/gtsteffaniak/go-media v1.2.1/go.mod h1:EH+5KAVLWfFl0g4W0Xni0qJJH8MUDIhAw4wPcC0mhxY=
 github.com/gtsteffaniak/go-vpx v1.0.1 h1:9lSI8yoz6omDChaeV0AJrhdfe2YTrWvJrDENI/bnkAM=
 github.com/gtsteffaniak/go-vpx v1.0.1/go.mod h1:tRCdDZ15oZZTsiwmQAwyH56PTt1jn1C1O0P03oOkoJ8=
 github.com/hashicorp/go-uuid v1.0.3 h1:2gKiV6YVmrJ1i2CKKa9obLvRieoRGviZFL26PcT/Co8=

backend/internal/folio/folio.go

@@ -1,167 +0,0 @@
-// Package folio is the pure-Go document preview fast path using gen2brain/folio.
-// When folio cannot handle a file, callers fall back to the office converter (when configured).
-package folio
-
-import (
-	"bytes"
-	"context"
-	"errors"
-	"fmt"
-	"image"
-	"image/jpeg"
-	"path/filepath"
-	"strings"
-	"sync"
-
-	"github.com/gen2brain/folio/doc"
-	"github.com/gtsteffaniak/filebrowser/backend/pkg/indexing/iteminfo"
-	"github.com/gtsteffaniak/filebrowser/backend/pkg/settings"
-	"github.com/gtsteffaniak/go-logger/logger"
-	"github.com/kovidgoyal/imaging"
-)
-
-var renderMu sync.Mutex
-
-// RenderOptions controls thumbnail sizing for one rendered page.
-type RenderOptions struct {
-	MaxWidth    int
-	MaxHeight   int
-	Fill        bool
-	JpegQuality int
-	Original    bool
-}
-
-// Enabled reports whether the folio fast path may run.
-func Enabled() bool {
-	return !settings.AlwaysUseOnlyOfficeEnabled()
-}
-
-// SupportsExtension reports whether folio targets the file extension (including leading dot).
-func SupportsExtension(ext string) bool {
-	ext = strings.ToLower(ext)
-	if !strings.HasPrefix(ext, ".") {
-		ext = "." + ext
-	}
-	return iteminfo.FolioConvertable[ext]
-}
-
-func logFallback(op, path string, err error) {
-	if errors.Is(err, doc.ErrUnsupported) {
-		logger.Warningf("folio does not support %s for %s (%v); using office converter if configured", op, path, err)
-		return
-	}
-	logger.Errorf("folio %s failed for %s: %v; falling back to office converter if configured", op, path, err)
-}
-
-// RenderPageJPEG renders one document page to JPEG. ok is true when folio returned bytes.
-// name and mimetype should match the file being previewed; they control eligibility for
-// folio (content sniffing does not depend on the path extension).
-func RenderPageJPEG(ctx context.Context, path string, pageNumber int, opts RenderOptions, name, mimetype string) (data []byte, ok bool, err error) {
-	if !Enabled() {
-		return nil, false, nil
-	}
-	if name == "" {
-		name = filepath.Base(path)
-	}
-	if !SupportsPreview(name, mimetype) {
-		return nil, false, nil
-	}
-	if ctx.Err() != nil {
-		return nil, false, ctx.Err()
-	}
-
-	type result struct {
-		data []byte
-		err  error
-	}
-	done := make(chan result, 1)
-	go func() {
-		defer func() {
-			if r := recover(); r != nil {
-				done <- result{err: fmt.Errorf("folio render panicked: %v", r)}
-			}
-		}()
-		data, err := renderPageJPEG(ctx, path, name, mimetype, pageNumber, opts)
-		done <- result{data: data, err: err}
-	}()
-
-	select {
-	case <-ctx.Done():
-		return nil, false, ctx.Err()
-	case res := <-done:
-		if res.err != nil {
-			if !errors.Is(res.err, context.Canceled) && !errors.Is(res.err, context.DeadlineExceeded) {
-				logFallback("render", path, res.err)
-			}
-			return nil, false, res.err
-		}
-		if len(res.data) == 0 {
-			return nil, false, fmt.Errorf("folio render returned empty jpeg")
-		}
-		return res.data, true, nil
-	}
-}
-
-func renderPageJPEG(ctx context.Context, path, name, mimetype string, pageNumber int, opts RenderOptions) ([]byte, error) {
-	renderMu.Lock()
-	defer renderMu.Unlock()
-	if err := ctx.Err(); err != nil {
-		return nil, err
-	}
-
-	d, err := openDocument(path, name, mimetype)
-	if err != nil {
-		return nil, err
-	}
-	defer d.Close()
-
-	if pageNumber < 0 || pageNumber >= d.NumPages() {
-		return nil, fmt.Errorf("invalid page number %d (pages: %d)", pageNumber, d.NumPages())
-	}
-
-	p, err := d.Page(pageNumber)
-	if err != nil {
-		return nil, err
-	}
-
-	var img image.Image
-	if opts.Original || opts.MaxWidth <= 0 || opts.MaxHeight <= 0 {
-		const maxEdge = 4096
-		rgba, err := p.ImageDPI(150)
-		if err != nil {
-			return nil, err
-		}
-		img = rgba
-		w, h := rgba.Bounds().Dx(), rgba.Bounds().Dy()
-		if w > maxEdge || h > maxEdge {
-			scale := min(float64(maxEdge)/float64(w), float64(maxEdge)/float64(h))
-			newW := max(1, int(float64(w)*scale))
-			newH := max(1, int(float64(h)*scale))
-			img = imaging.Resize(img, newW, newH, imaging.Lanczos)
-		}
-	} else {
-		rgba, err := p.ImageDPI(150)
-		if err != nil {
-			return nil, err
-		}
-		img = rgba
-		if opts.Fill {
-			img = imaging.Fill(img, opts.MaxWidth, opts.MaxHeight, imaging.Center, imaging.Lanczos)
-		} else {
-			b := img.Bounds()
-			if b.Dx() > opts.MaxWidth || b.Dy() > opts.MaxHeight {
-				img = imaging.Fit(img, opts.MaxWidth, opts.MaxHeight, imaging.Lanczos)
-			}
-		}
-	}
-
-	q := opts.JpegQuality
-	if q <= 0 {
-		q = 85
-	}
-	var buf bytes.Buffer
-	if err := jpeg.Encode(&buf, img, &jpeg.Options{Quality: q}); err != nil {
-		return nil, err
-	}
-	return buf.Bytes(), nil
-}

backend/internal/gomedia/shadow.go

@@ -59,8 +59,8 @@ func runShadow[T any](op, path string, goLatency time.Duration, fast T, legacy L
 	ffStart := time.Now()
 	legacyVal, ffOK := legacy()
 	ffLatency := time.Since(ffStart)
-	shadowLogf("go-media shadow %s for %s: go-media=%.2fms legacy(ffmpeg/dhowden)=%.2fms diff(legacy-go)=%+.2fms legacy_ok=%t",
-		op, path, ms(goLatency), ms(ffLatency), ms(ffLatency)-ms(goLatency), ffOK)
+	shadowLogf("go-media shadow %s for %s: go-media=%.2fms legacy(ffmpeg/dhowden)=%.2fms diff(go-legacy)=%+.2fms",
+		op, path, ms(goLatency), ms(ffLatency), ms(goLatency)-ms(ffLatency))
 
 	if !ffOK {
 		// go-media read the file but the legacy path failed. That is an outcome

backend/internal/preview/doc.go

@@ -5,16 +5,26 @@ import (
 	"fmt"
 	"time"
 
-	"github.com/gtsteffaniak/filebrowser/backend/internal/folio"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/indexing/iteminfo"
 )
 
+const (
+	// docPreviewTimeout bounds small, large and xlarge page renders.
+	docPreviewTimeout = 2 * time.Second
+	// docOriginalTimeout bounds "original" renders, which are higher resolution.
+	docOriginalTimeout = 10 * time.Second
+)
+
 func (s *Service) GenerateImageFromDoc(ctx context.Context, file iteminfo.ExtendedFileInfo, pageNumber int, previewSize string) ([]byte, error) {
 	if ctx.Err() != nil {
 		return nil, ctx.Err()
 	}
 
-	timeoutCtx, cancel := context.WithTimeout(ctx, 2*time.Second)
+	timeout := docPreviewTimeout
+	if previewSize == "original" {
+		timeout = docOriginalTimeout
+	}
+	timeoutCtx, cancel := context.WithTimeout(ctx, timeout)
 	defer cancel()
 
 	opts, err := folioRenderOptions(previewSize)
@@ -22,7 +32,7 @@ func (s *Service) GenerateImageFromDoc(ctx context.Context, file iteminfo.Extend
 		return nil, err
 	}
 
-	imageBytes, ok, err := folio.RenderPageJPEG(timeoutCtx, file.RealPath, pageNumber, opts, file.Name, file.Type)
+	imageBytes, ok, err := renderDocPageJPEG(timeoutCtx, file.RealPath, pageNumber, opts, file.Name, file.Type)
 	if !ok {
 		if err != nil {
 			return nil, err
@@ -30,20 +40,22 @@ func (s *Service) GenerateImageFromDoc(ctx context.Context, file iteminfo.Extend
 		return nil, nil
 	}
 	if timeoutCtx.Err() != nil {
-		return nil, fmt.Errorf("document preview generation timed out after 2 seconds for '%s'", file.Name)
+		return nil, fmt.Errorf("document preview generation timed out after %s for '%s'", timeout, file.Name)
 	}
 	return imageBytes, nil
 }
 
-func folioRenderOptions(previewSize string) (folio.RenderOptions, error) {
+// folioRenderOptions maps a preview size onto the same dimensions, fill mode and JPEG quality
+// the image pipeline uses (see getPreviewOptions); "original" renders at full resolution.
+func folioRenderOptions(previewSize string) (docRenderOptions, error) {
 	if previewSize == "original" {
-		return folio.RenderOptions{Original: true, JpegQuality: QualityHigh.jpegQuality()}, nil
+		return docRenderOptions{Original: true, JpegQuality: QualityHigh.jpegQuality()}, nil
 	}
 	opts, err := getPreviewOptions(previewSize)
 	if err != nil {
-		return folio.RenderOptions{}, err
+		return docRenderOptions{}, err
 	}
-	return folio.RenderOptions{
+	return docRenderOptions{
 		MaxWidth:    opts.Width,
 		MaxHeight:   opts.Height,
 		Fill:        opts.ResizeMode == ResizeModeFill,

backend/internal/preview/doc_text_integration_test.go

@@ -5,7 +5,6 @@ import (
 	"path/filepath"
 	"testing"
 
-	"github.com/gtsteffaniak/filebrowser/backend/internal/folio"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/indexing/iteminfo"
 	"github.com/stretchr/testify/require"
 )
@@ -17,7 +16,7 @@ func TestFolioRender_utf8TruncatedPlaywrightFile(t *testing.T) {
 	}
 	opts, err := folioRenderOptions("small")
 	require.NoError(t, err)
-	data, ok, err := folio.RenderPageJPEG(t.Context(), realPath, 0, opts, "utf8-truncated.txt", "text/plain")
+	data, ok, err := renderDocPageJPEG(t.Context(), realPath, 0, opts, "utf8-truncated.txt", "text/plain")
 	require.NoError(t, err)
 	require.True(t, ok, "err=%v", err)
 	require.NotEmpty(t, data)
@@ -29,7 +28,7 @@ func TestFolioRender_cssAsTxt(t *testing.T) {
 	require.NoError(t, os.WriteFile(cssPath, []byte("body { color: red; }\n"), 0o644))
 	opts, err := folioRenderOptions("small")
 	require.NoError(t, err)
-	data, ok, err := folio.RenderPageJPEG(t.Context(), cssPath, 0, opts, "styles.css", "text/css")
+	data, ok, err := renderDocPageJPEG(t.Context(), cssPath, 0, opts, "styles.css", "text/css")
 	require.NoError(t, err)
 	require.True(t, ok, "err=%v", err)
 	require.NotEmpty(t, data)

backend/internal/preview/folio.go

@@ -0,0 +1,208 @@
+// folio.go is the pure-Go document preview fast path using gen2brain/folio.
+// When folio cannot handle a file, callers fall back to the office converter (when configured).
+package preview
+
+import (
+	"bytes"
+	"context"
+	"errors"
+	"fmt"
+	"image"
+	"image/jpeg"
+	"path/filepath"
+	"sync"
+
+	"github.com/gen2brain/folio/doc"
+	"github.com/gtsteffaniak/filebrowser/backend/pkg/settings"
+	"github.com/gtsteffaniak/go-logger/logger"
+	"github.com/kovidgoyal/imaging"
+)
+
+const (
+	// docSupersample renders a page at this multiple of the target box before the
+	// final downscale. Rasterized text needs the extra pixels to stay crisp.
+	docSupersample = 2
+	// docOriginalDPI is the resolution used for "original" page previews.
+	docOriginalDPI = 200
+	// docMaxRenderEdge caps the longest edge of a rendered page, in pixels.
+	docMaxRenderEdge = 4096
+	// docMinDPI and docMaxDPI bound the computed render resolution.
+	docMinDPI = 36.0
+	docMaxDPI = 600.0
+)
+
+var renderMu sync.Mutex
+
+// docRenderOptions controls the size and quality of one rendered document page.
+type docRenderOptions struct {
+	MaxWidth    int
+	MaxHeight   int
+	Fill        bool
+	JpegQuality int
+	Original    bool
+}
+
+// folioEnabled reports whether the folio fast path may run.
+func folioEnabled() bool {
+	return !settings.AlwaysUseOnlyOfficeEnabled()
+}
+
+func logFolioFallback(op, path string, err error) {
+	if errors.Is(err, doc.ErrUnsupported) {
+		logger.Warningf("folio does not support %s for %s (%v); using office converter if configured", op, path, err)
+		return
+	}
+	logger.Errorf("folio %s failed for %s: %v; falling back to office converter if configured", op, path, err)
+}
+
+// renderDocPageJPEG renders one document page to JPEG. ok is true when folio returned bytes.
+// name and mimetype should match the file being previewed; they control eligibility for
+// folio (content sniffing does not depend on the path extension).
+func renderDocPageJPEG(ctx context.Context, path string, pageNumber int, opts docRenderOptions, name, mimetype string) (data []byte, ok bool, err error) {
+	if !folioEnabled() {
+		return nil, false, nil
+	}
+	if name == "" {
+		name = filepath.Base(path)
+	}
+	if !folioSupportsPreview(name, mimetype) {
+		return nil, false, nil
+	}
+	if ctx.Err() != nil {
+		return nil, false, ctx.Err()
+	}
+
+	type result struct {
+		data []byte
+		err  error
+	}
+	done := make(chan result, 1)
+	go func() {
+		defer func() {
+			if r := recover(); r != nil {
+				done <- result{err: fmt.Errorf("folio render panicked: %v", r)}
+			}
+		}()
+		data, err := renderPageJPEG(ctx, path, name, mimetype, pageNumber, opts)
+		done <- result{data: data, err: err}
+	}()
+
+	select {
+	case <-ctx.Done():
+		return nil, false, ctx.Err()
+	case res := <-done:
+		if res.err != nil {
+			if !errors.Is(res.err, context.Canceled) && !errors.Is(res.err, context.DeadlineExceeded) {
+				logFolioFallback("render", path, res.err)
+			}
+			return nil, false, res.err
+		}
+		if len(res.data) == 0 {
+			return nil, false, fmt.Errorf("folio render returned empty jpeg")
+		}
+		return res.data, true, nil
+	}
+}
+
+func renderPageJPEG(ctx context.Context, path, name, mimetype string, pageNumber int, opts docRenderOptions) ([]byte, error) {
+	renderMu.Lock()
+	defer renderMu.Unlock()
+	if err := ctx.Err(); err != nil {
+		return nil, err
+	}
+
+	d, err := openDocument(path, name, mimetype)
+	if err != nil {
+		return nil, err
+	}
+	defer d.Close()
+
+	if pageNumber < 0 || pageNumber >= d.NumPages() {
+		return nil, fmt.Errorf("invalid page number %d (pages: %d)", pageNumber, d.NumPages())
+	}
+
+	p, err := d.Page(pageNumber)
+	if err != nil {
+		return nil, err
+	}
+
+	boxed := !opts.Original && opts.MaxWidth > 0 && opts.MaxHeight > 0
+	var dpi float64
+	if boxed {
+		dpi = docBoxRenderDPI(p, d.Kind(), opts.MaxWidth, opts.MaxHeight, opts.Fill)
+	} else {
+		dpi = docOriginalRenderDPI(p, d.Kind())
+	}
+
+	rendered, err := p.ImageDPI(dpi)
+	if err != nil {
+		return nil, err
+	}
+	if rendered == nil {
+		return nil, fmt.Errorf("folio rendered no image for page %d", pageNumber)
+	}
+
+	var img image.Image = rendered
+	if boxed {
+		// The page was rendered at docSupersample times the target, so this
+		// single high-quality downscale produces the anti-aliased final image.
+		if opts.Fill {
+			img = imaging.Fill(img, opts.MaxWidth, opts.MaxHeight, imaging.Center, imaging.Lanczos)
+		} else {
+			img = imaging.Fit(img, opts.MaxWidth, opts.MaxHeight, imaging.Lanczos)
+		}
+	}
+
+	q := opts.JpegQuality
+	if q <= 0 {
+		q = 85
+	}
+	var buf bytes.Buffer
+	if err := jpeg.Encode(&buf, img, &jpeg.Options{Quality: q}); err != nil {
+		return nil, err
+	}
+	return buf.Bytes(), nil
+}
+
+// docUnitDPI is the resolution at which folio's ImageDPI renders page units one to one:
+// 72 for PDF and book pages, 96 for drawings (SVG).
+func docUnitDPI(kind doc.Kind) float64 {
+	if kind == doc.KindSVG {
+		return 96
+	}
+	return 72
+}
+
+// docMaxEdgeDPI is the highest resolution at which the longest page edge stays within docMaxRenderEdge.
+func docMaxEdgeDPI(p doc.Page, kind doc.Kind) float64 {
+	b := p.Bounds()
+	longest := float64(max(b.X1-b.X0, b.Y1-b.Y0))
+	if longest <= 0 {
+		return docMinDPI
+	}
+	return docUnitDPI(kind) * docMaxRenderEdge / longest
+}
+
+// docBoxRenderDPI picks the resolution for a page that will be scaled into a boxW x boxH target.
+// Fill covers the box; fit stays inside it. The page is rendered at docSupersample times the target.
+func docBoxRenderDPI(p doc.Page, kind doc.Kind, boxW, boxH int, fill bool) float64 {
+	b := p.Bounds()
+	pw, ph := float64(b.X1-b.X0), float64(b.Y1-b.Y0)
+	if pw <= 0 || ph <= 0 {
+		return docMinDPI
+	}
+	// Scale (pixels per page unit) needed for the supersampled render to reach the box on each axis.
+	sx := float64(boxW*docSupersample) / pw
+	sy := float64(boxH*docSupersample) / ph
+	s := min(sx, sy)
+	if fill {
+		s = max(sx, sy)
+	}
+	dpi := min(s*docUnitDPI(kind), docMaxEdgeDPI(p, kind))
+	return min(max(dpi, docMinDPI), docMaxDPI)
+}
+
+// docOriginalRenderDPI picks the resolution for "original" previews: docOriginalDPI, capped by docMaxRenderEdge.
+func docOriginalRenderDPI(p doc.Page, kind doc.Kind) float64 {
+	return min(docOriginalDPI, docMaxEdgeDPI(p, kind))
+}

backend/internal/preview/folio_open.go

@@ -1,4 +1,4 @@
-package folio
+package preview
 
 import (
 	"fmt"
@@ -17,9 +17,9 @@ const folioTextCheckWindow = 4096 // html.readsAsText validation window
 // maxTextPreviewLoad is the most plain-text we read for a first-page thumbnail.
 const maxTextPreviewLoad = 32 << 10 // 32 KiB
 
-// SupportsPreview reports whether folio should attempt this file (name + MIME).
+// folioSupportsPreview reports whether folio should attempt this file (name + MIME).
 // doc.Open sniffs content; extensions like .css are not in FolioConvertable but still render.
-func SupportsPreview(name, mimetype string) bool {
+func folioSupportsPreview(name, mimetype string) bool {
 	ext := strings.ToLower(filepath.Ext(name))
 	if iteminfo.FolioConvertable[ext] {
 		return true

backend/internal/preview/folio_test.go

@@ -1,4 +1,4 @@
-package folio
+package preview
 
 import (
 	"os"
@@ -8,12 +8,12 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
-func TestRenderPageJPEG_txt(t *testing.T) {
+func TestRenderDocPageJPEG_txt(t *testing.T) {
 	dir := t.TempDir()
 	path := filepath.Join(dir, "hello.txt")
 	require.NoError(t, os.WriteFile(path, []byte("Hello folio preview"), 0o644))
 
-	data, ok, err := RenderPageJPEG(t.Context(), path, 0, RenderOptions{
+	data, ok, err := renderDocPageJPEG(t.Context(), path, 0, docRenderOptions{
 		MaxWidth:    256,
 		MaxHeight:   256,
 		Fill:        true,
@@ -26,8 +26,8 @@ func TestRenderPageJPEG_txt(t *testing.T) {
 	require.Equal(t, byte(0xd8), data[1])
 }
 
-func TestRenderPageJPEG_unsupportedExtension(t *testing.T) {
-	data, ok, err := RenderPageJPEG(t.Context(), "/nonexistent/file.xyz", 0, RenderOptions{}, "file.xyz", "application/octet-stream")
+func TestRenderDocPageJPEG_unsupportedExtension(t *testing.T) {
+	data, ok, err := renderDocPageJPEG(t.Context(), "/nonexistent/file.xyz", 0, docRenderOptions{}, "file.xyz", "application/octet-stream")
 	require.NoError(t, err)
 	require.False(t, ok)
 	require.Nil(t, data)

backend/internal/preview/folio_utf8_test.go

@@ -1,4 +1,4 @@
-package folio
+package preview
 
 import (
 	"os"
@@ -37,22 +37,17 @@ func TestSanitizeFolioText_stripsNUL(t *testing.T) {
 	raw := []byte("hello\x00world")
 	got := sanitizeFolioText(raw)
 	require.Equal(t, []byte("hello world"), got)
-	opts, err := folioRenderOptionsForTest()
-	require.NoError(t, err)
 
+	opts := docRenderOptions{MaxWidth: 256, MaxHeight: 256, Fill: true, JpegQuality: 80}
 	dir := t.TempDir()
 	path := filepath.Join(dir, "nul.txt")
 	require.NoError(t, os.WriteFile(path, raw, 0o600))
-	data, ok, err := RenderPageJPEG(t.Context(), path, 0, opts, "nul.txt", "text/plain")
+	data, ok, err := renderDocPageJPEG(t.Context(), path, 0, opts, "nul.txt", "text/plain")
 	require.NoError(t, err)
 	require.True(t, ok, "err=%v", err)
 	require.NotEmpty(t, data)
 }
 
-func folioRenderOptionsForTest() (RenderOptions, error) {
-	return RenderOptions{MaxWidth: 256, MaxHeight: 256, Fill: true, JpegQuality: 80}, nil
-}
-
 func TestReadTextPreviewPrefix_cap(t *testing.T) {
 	dir := t.TempDir()
 	path := filepath.Join(dir, "big.log")

backend/internal/preview/preview.go

@@ -18,7 +18,6 @@ import (
 	"github.com/gtsteffaniak/filebrowser/backend/internal/adapters/fs/fileutils"
 	"github.com/gtsteffaniak/filebrowser/backend/internal/embeddedpreview"
 	"github.com/gtsteffaniak/filebrowser/backend/internal/ffmpeg"
-	"github.com/gtsteffaniak/filebrowser/backend/internal/folio"
 	"github.com/gtsteffaniak/filebrowser/backend/internal/imagemeta"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/indexing/iteminfo"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/settings"
@@ -187,6 +186,16 @@ func GetService() *Service {
 	return service
 }
 
+// GetTextPreview returns a text preview for realPath, bounded by the preview service's
+// shared image-processor semaphore. It returns ErrPreviewServiceUnavailable when the
+// service has not been started.
+func GetTextPreview(ctx context.Context, realPath, kind string) (TextPreviewResult, error) {
+	if service == nil {
+		return TextPreviewResult{}, ErrPreviewServiceUnavailable
+	}
+	return service.ReadTextPreview(ctx, realPath, kind)
+}
+
 func GetPreviewForFile(ctx context.Context, file iteminfo.ExtendedFileInfo, previewSize, url string, seekPercentage int) ([]byte, error) {
 	if !file.HasPreview {
 		return nil, ErrUnsupportedMedia
@@ -471,7 +480,7 @@ func GeneratePreviewWithMD5(ctx context.Context, file iteminfo.ExtendedFileInfo,
 
 	// Folio document previews render at target size in-process; they skip imageSem.
 	previewTypeEarly := determinePreviewType(file)
-	skipImageSem := previewTypeEarly == previewTypeDocument && folio.Enabled() && iteminfo.HasDocConvertableExtension(file.Name, file.Type)
+	skipImageSem := previewTypeEarly == previewTypeDocument && folioEnabled() && iteminfo.HasDocConvertableExtension(file.Name, file.Type)
 	// True when the semaphore block below holds a permit for this whole function.
 	imagePermitHeld := !skipImageSem
 	if !skipImageSem {
@@ -566,7 +575,7 @@ func GeneratePreviewWithMD5(ctx context.Context, file iteminfo.ExtendedFileInfo,
 	// Video thumbnails come from go-media or ffmpeg already sized to the preview
 	// box, so they are final and need no ffmpeg gate here.
 	if !fromEmbeddedPreview && (previewType == previewTypeImage ||
-		(previewType == previewTypeDocument && folio.Enabled() && iteminfo.HasDocConvertableExtension(file.Name, file.Type)) ||
+		(previewType == previewTypeDocument && folioEnabled() && iteminfo.HasDocConvertableExtension(file.Name, file.Type)) ||
 		previewType == previewTypeVideo) {
 		if err := service.fileCache.Store(ctx, cacheKey, imageBytes); err != nil {
 			logger.Errorf("failed to cache image: %v", err)

backend/internal/preview/textpreview.go

@@ -0,0 +1,138 @@
+// Text preview: a size-capped prefix of a text-like file for the text preview API.
+//
+// Output is not sanitized; the frontend is responsible for sanitizing everything it
+// renders from these results. ReadTextPreview does not generate an image and is not
+// written to the disk cache, so it is separate from the image preview pipeline.
+package preview
+
+import (
+	"bytes"
+	"context"
+	"errors"
+	"io"
+	"os"
+	"strings"
+	"unicode/utf8"
+)
+
+// MaxTextPreviewBytes is the largest amount of a file that is read for a preview.
+const MaxTextPreviewBytes = 16 * 1024
+
+// ErrNotText is returned for files that look binary (contain NUL bytes).
+var ErrNotText = errors.New("file does not look like text")
+
+// ErrPreviewServiceUnavailable is returned by text preview entry points when the
+// preview service has not been started.
+var ErrPreviewServiceUnavailable = errors.New("preview service not initialized")
+
+// TextPreviewResult is the JSON payload returned by the text preview endpoint.
+type TextPreviewResult struct {
+	// Content is plain text, or an HTML fragment when Format is "html".
+	Content string `json:"content"`
+	// Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.
+	Kind string `json:"kind"`
+	// Format is "text" or "html". RTF is converted to HTML; everything else is text.
+	Format string `json:"format"`
+	// Truncated is true when the file is larger than the returned content.
+	Truncated bool `json:"truncated"`
+	// Size is the full size of the file in bytes.
+	Size int64 `json:"size"`
+}
+
+// ReadTextPreview returns up to MaxTextPreviewBytes of the file at realPath, prepared
+// for the given renderer kind. It reads directly from disk and does not take an image
+// processor permit; callers that need to bound concurrent reads use the service's
+// shared semaphore (see Service.ReadTextPreview).
+func ReadTextPreview(realPath, kind string) (TextPreviewResult, error) {
+	f, err := os.Open(realPath)
+	if err != nil {
+		return TextPreviewResult{}, err
+	}
+	defer f.Close()
+
+	info, err := f.Stat()
+	if err != nil {
+		return TextPreviewResult{}, err
+	}
+
+	buf := make([]byte, MaxTextPreviewBytes)
+	n, err := io.ReadFull(f, buf)
+	if err != nil && !errors.Is(err, io.EOF) && !errors.Is(err, io.ErrUnexpectedEOF) {
+		return TextPreviewResult{}, err
+	}
+	buf = buf[:n]
+
+	if bytes.IndexByte(buf, 0) >= 0 {
+		return TextPreviewResult{}, ErrNotText
+	}
+
+	truncated := info.Size() > int64(n)
+	if truncated {
+		buf = trimIncompleteRune(buf)
+		buf = trimToLastLine(buf)
+	}
+
+	// Legacy encodings are not valid UTF-8. Replace the bad bytes so the preview still renders.
+	text := strings.ToValidUTF8(string(buf), "\uFFFD")
+
+	result := TextPreviewResult{Kind: kind, Format: "text", Truncated: truncated, Size: info.Size()}
+	if kind == "rtf" {
+		result.Content = RTFToHTML(text)
+		result.Format = "html"
+	} else {
+		result.Content = text
+	}
+	return result, nil
+}
+
+// ReadTextPreview reads a text preview while holding a shared image-processor permit,
+// so text reads and conversions count against the same budget as image work instead of
+// opening an unbounded number of file handles when a listing is full of text files.
+// It returns ErrPreviewServiceUnavailable when the service has not been started.
+func (s *Service) ReadTextPreview(ctx context.Context, realPath, kind string) (TextPreviewResult, error) {
+	if err := s.acquireImageSem(ctx); err != nil {
+		return TextPreviewResult{}, err
+	}
+	defer s.releaseImageSem()
+	// The acquire select can win the slot at the same moment the request is canceled
+	// (both cases ready), so re-check before doing any file I/O for a dead request.
+	if err := ctx.Err(); err != nil {
+		return TextPreviewResult{}, err
+	}
+	return ReadTextPreview(realPath, kind)
+}
+
+// trimIncompleteRune removes a trailing partial UTF-8 sequence left by the read limit.
+func trimIncompleteRune(b []byte) []byte {
+	for i := 1; i <= utf8.UTFMax && i <= len(b); i++ {
+		c := b[len(b)-i]
+		if c&0xC0 == 0x80 {
+			// Continuation byte: keep looking for the lead byte.
+			continue
+		}
+		need := 1
+		switch {
+		case c&0xE0 == 0xC0:
+			need = 2
+		case c&0xF0 == 0xE0:
+			need = 3
+		case c&0xF8 == 0xF0:
+			need = 4
+		}
+		if need > i {
+			return b[:len(b)-i]
+		}
+		return b
+	}
+	return b
+}
+
+// trimToLastLine cuts at the last newline when that keeps at least half of the buffer.
+// Files with very long lines keep their full prefix so the preview is not empty.
+func trimToLastLine(b []byte) []byte {
+	idx := bytes.LastIndexByte(b, '\n')
+	if idx > len(b)/2 {
+		return b[:idx]
+	}
+	return b
+}

backend/internal/preview/textpreview_rtf.go

@@ -1,4 +1,4 @@
-package textpreview
+package preview
 
 import (
 	"html"

backend/internal/preview/textpreview_test.go

@@ -1,6 +1,7 @@
-package textpreview
+package preview
 
 import (
+	"context"
 	"os"
 	"path/filepath"
 	"strings"
@@ -43,15 +44,15 @@ func TestReadTruncatesAndKeepsUTF8Valid(t *testing.T) {
 	dir := t.TempDir()
 	path := filepath.Join(dir, "big.txt")
 	// Multibyte characters so the 16KB cut is likely to land inside one.
-	content := strings.Repeat("\u00e9\n", MaxBytes)
+	content := strings.Repeat("\u00e9\n", MaxTextPreviewBytes)
 	require.NoError(t, os.WriteFile(path, []byte(content), 0o600))
 
-	res, err := Read(path, "plain")
+	res, err := ReadTextPreview(path, "plain")
 	require.NoError(t, err)
 	require.True(t, res.Truncated)
 	require.Equal(t, "plain", res.Kind)
 	require.Equal(t, "text", res.Format)
-	require.LessOrEqual(t, len(res.Content), MaxBytes)
+	require.LessOrEqual(t, len(res.Content), MaxTextPreviewBytes)
 	require.True(t, strings.HasSuffix(res.Content, "\u00e9"), "cut must land on a whole line")
 	require.Equal(t, int64(len(content)), res.Size)
 }
@@ -60,7 +61,7 @@ func TestReadSmallFileNotTruncated(t *testing.T) {
 	path := filepath.Join(t.TempDir(), "small.md")
 	require.NoError(t, os.WriteFile(path, []byte("# Title\n"), 0o600))
 
-	res, err := Read(path, "markdown")
+	res, err := ReadTextPreview(path, "markdown")
 	require.NoError(t, err)
 	require.False(t, res.Truncated)
 	require.Equal(t, "# Title\n", res.Content)
@@ -70,7 +71,7 @@ func TestReadRTFReturnsHTML(t *testing.T) {
 	path := filepath.Join(t.TempDir(), "doc.rtf")
 	require.NoError(t, os.WriteFile(path, []byte(`{\rtf1 Hi\par There}`), 0o600))
 
-	res, err := Read(path, "rtf")
+	res, err := ReadTextPreview(path, "rtf")
 	require.NoError(t, err)
 	require.Equal(t, "html", res.Format)
 	require.Equal(t, "<p>Hi</p><p>There</p>", res.Content)
@@ -80,7 +81,7 @@ func TestReadRejectsBinary(t *testing.T) {
 	path := filepath.Join(t.TempDir(), "data.txt")
 	require.NoError(t, os.WriteFile(path, []byte("text\x00binary"), 0o600))
 
-	_, err := Read(path, "plain")
+	_, err := ReadTextPreview(path, "plain")
 	require.ErrorIs(t, err, ErrNotText)
 }
 
@@ -88,7 +89,44 @@ func TestReadReplacesInvalidUTF8(t *testing.T) {
 	path := filepath.Join(t.TempDir(), "latin1.txt")
 	require.NoError(t, os.WriteFile(path, []byte("caf\xe9"), 0o600))
 
-	res, err := Read(path, "plain")
+	res, err := ReadTextPreview(path, "plain")
 	require.NoError(t, err)
 	require.Equal(t, "caf\uFFFD", res.Content)
 }
+
+// A single-processor service has a one-slot imageSem, so text previews must serialize
+// behind it rather than racing ahead of image work.
+func TestServiceReadTextPreviewSharesImageSemaphore(t *testing.T) {
+	svc := NewPreviewGenerator(1, t.TempDir())
+	path := filepath.Join(t.TempDir(), "notes.md")
+	require.NoError(t, os.WriteFile(path, []byte("# Title\n"), 0o600))
+
+	res, err := svc.ReadTextPreview(t.Context(), path, "markdown")
+	require.NoError(t, err)
+	require.Equal(t, "# Title\n", res.Content)
+	require.Equal(t, 0, len(svc.imageSem), "permit must be released after the read")
+}
+
+func TestServiceReadTextPreviewHonoursCancellation(t *testing.T) {
+	svc := NewPreviewGenerator(1, t.TempDir())
+	path := filepath.Join(t.TempDir(), "notes.md")
+	require.NoError(t, os.WriteFile(path, []byte("# Title\n"), 0o600))
+
+	// Hold the only permit, then confirm a cancelled caller does not block forever.
+	require.NoError(t, svc.acquireImageSem(t.Context()))
+	defer svc.releaseImageSem()
+
+	ctx, cancel := context.WithCancel(t.Context())
+	cancel()
+	_, err := svc.ReadTextPreview(ctx, path, "markdown")
+	require.ErrorIs(t, err, context.Canceled)
+}
+
+func TestGetTextPreviewWithoutService(t *testing.T) {
+	original := service
+	service = nil
+	t.Cleanup(func() { service = original })
+
+	_, err := GetTextPreview(t.Context(), "ignored.md", "markdown")
+	require.ErrorIs(t, err, ErrPreviewServiceUnavailable)
+}

backend/internal/state/media_settings.go

@@ -14,14 +14,21 @@ const (
 
 var (
 	mediaSettingsMu      sync.RWMutex
-	mediaSettingsDefault settings.MediaSettings
+	mediaSettingsDefault settings.FullAdminMedia
 )
 
+// saveMediaSettings is the only write path for media settings. It clears derived
+// fields (EnabledProfiles, ImagePreview) so read-time values are never persisted.
+func saveMediaSettings(key string, ms settings.FullAdminMedia) error {
+	settings.ClearMediaDerived(&ms)
+	return sqlDb.SaveSetting(key, ms)
+}
+
 // InitMediaSettings loads persisted runtime media settings from SQLite and seeds from config when missing.
 func InitMediaSettings() error {
 	if _, err := sqlDb.GetSetting(mediaSettingsDefaultKey); err != nil {
 		seed := settings.SanitizeMediaSettings(settings.CurrentMediaSettings())
-		if saveErr := sqlDb.SaveSetting(mediaSettingsDefaultKey, seed); saveErr != nil {
+		if saveErr := saveMediaSettings(mediaSettingsDefaultKey, seed); saveErr != nil {
 			return fmt.Errorf("seed media settings: %w", saveErr)
 		}
 	}
@@ -43,7 +50,7 @@ func InitMediaSettings() error {
 		// sanitize, so clamps (e.g. the readRate floor) must run again.
 		overlaid = settings.SanitizeMediaSettings(overlaid)
 		if !settings.MediaSettingsEqual(loaded, overlaid) {
-			if saveErr := sqlDb.SaveSetting(mediaSettingsDefaultKey, overlaid); saveErr != nil {
+			if saveErr := saveMediaSettings(mediaSettingsDefaultKey, overlaid); saveErr != nil {
 				return fmt.Errorf("save config-synced media settings: %w", saveErr)
 			}
 			loaded = overlaid
@@ -57,22 +64,22 @@ func InitMediaSettings() error {
 	return nil
 }
 
-func loadMediaSettingsSetting(key string) (settings.MediaSettings, error) {
+func loadMediaSettingsSetting(key string) (settings.FullAdminMedia, error) {
 	raw, err := sqlDb.GetSetting(key)
 	if err != nil {
-		return settings.MediaSettings{}, err
+		return settings.FullAdminMedia{}, err
 	}
-	var ms settings.MediaSettings
+	var ms settings.FullAdminMedia
 	if err := json.Unmarshal(raw, &ms); err != nil {
-		return settings.MediaSettings{}, fmt.Errorf("parse %s: %w", key, err)
+		return settings.FullAdminMedia{}, fmt.Errorf("parse %s: %w", key, err)
 	}
 	return ms, nil
 }
 
-// GetMediaSettings returns the runtime media settings. The value is deep-copied
+// GetMediaSettings returns the stored runtime media settings. The value is deep-copied
 // so callers cannot mutate the stored settings (or the live config they are
 // applied to) through the conversion maps.
-func GetMediaSettings() settings.MediaSettings {
+func GetMediaSettings() settings.FullAdminMedia {
 	mediaSettingsMu.RLock()
 	defer mediaSettingsMu.RUnlock()
 	return settings.CloneMediaSettings(mediaSettingsDefault)
@@ -90,8 +97,11 @@ func PatchMediaSettings(patchJSON []byte) error {
 		return mergeErr
 	}
 	merged = settings.SanitizeMediaSettings(merged)
+	// A patch may echo derived fields back (e.g. imagePreview from the admin UI).
+	// Clear them before the value reaches memory or the database.
+	settings.ClearMediaDerived(&merged)
 
-	if saveErr := sqlDb.SaveSetting(mediaSettingsDefaultKey, merged); saveErr != nil {
+	if saveErr := saveMediaSettings(mediaSettingsDefaultKey, merged); saveErr != nil {
 		mediaSettingsMu.Unlock()
 		return fmt.Errorf("save media settings: %w", saveErr)
 	}

backend/internal/state/media_settings_test.go

@@ -1,6 +1,7 @@
 package state
 
 import (
+	"encoding/json"
 	"testing"
 
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/settings"
@@ -34,6 +35,56 @@ func TestGetMediaSettingsReturnsIndependentCopy(t *testing.T) {
 	}
 }
 
+// Derived read-time values must never reach the database, even when a caller
+// passes a struct that has them populated.
+func TestSaveMediaSettingsNeverPersistsDerivedFields(t *testing.T) {
+	initSidebarLinkTestDB(t)
+
+	ms := GetMediaSettings()
+	ms.Transcode.EnabledProfiles = []string{"quality"}
+	ms.ImagePreview = map[settings.ImagePreviewType]bool{settings.JPEGImagePreview: true}
+	if err := saveMediaSettings(mediaSettingsDefaultKey, ms); err != nil {
+		t.Fatalf("saveMediaSettings: %v", err)
+	}
+
+	raw, err := sqlDb.GetSetting(mediaSettingsDefaultKey)
+	if err != nil {
+		t.Fatalf("GetSetting: %v", err)
+	}
+	var stored map[string]any
+	if err := json.Unmarshal(raw, &stored); err != nil {
+		t.Fatalf("decode stored settings: %v", err)
+	}
+	transcode, ok := stored["transcode"].(map[string]any)
+	if !ok {
+		t.Fatalf("stored transcode = %T, want object", stored["transcode"])
+	}
+	if _, ok := transcode["enabledProfiles"]; ok {
+		t.Fatal("enabledProfiles (derived) was persisted")
+	}
+	if _, ok := stored["imagePreview"]; ok {
+		t.Fatal("imagePreview (derived) was persisted")
+	}
+}
+
+// The admin UI echoes its whole payload back on PATCH, derived fields included.
+// Those must be dropped before the value reaches memory, not only before the database.
+func TestPatchMediaSettingsDropsEchoedDerivedFields(t *testing.T) {
+	initSidebarLinkTestDB(t)
+
+	patch := []byte(`{"imagePreview":{"jpeg":true},"transcode":{"enabledProfiles":["quality"]}}`)
+	if err := PatchMediaSettings(patch); err != nil {
+		t.Fatalf("PatchMediaSettings: %v", err)
+	}
+	got := GetMediaSettings()
+	if got.ImagePreview != nil {
+		t.Fatal("echoed imagePreview stayed in memory")
+	}
+	if got.Transcode.EnabledProfiles != nil {
+		t.Fatal("echoed enabledProfiles stayed in memory")
+	}
+}
+
 // A fresh install seeds the stored media settings from config.
 func TestMediaSettingsSeedFromConfigOnFirstInit(t *testing.T) {
 	initSidebarLinkTestDB(t)

backend/internal/textpreview/textpreview.go

@@ -1,112 +0,0 @@
-// Package textpreview reads a size-capped prefix of a text-like file for the text preview API.
-//
-// It does not use the image preview pipeline and does not sanitize output. The frontend
-// is responsible for sanitizing everything it renders from this package.
-package textpreview
-
-import (
-	"bytes"
-	"errors"
-	"io"
-	"os"
-	"strings"
-	"unicode/utf8"
-)
-
-// MaxBytes is the largest amount of a file that is read for a preview.
-const MaxBytes = 16 * 1024
-
-// ErrNotText is returned for files that look binary (contain NUL bytes).
-var ErrNotText = errors.New("file does not look like text")
-
-// Result is the JSON payload returned by the text preview endpoint.
-type Result struct {
-	// Content is plain text, or an HTML fragment when Format is "html".
-	Content string `json:"content"`
-	// Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.
-	Kind string `json:"kind"`
-	// Format is "text" or "html". RTF is converted to HTML; everything else is text.
-	Format string `json:"format"`
-	// Truncated is true when the file is larger than the returned content.
-	Truncated bool `json:"truncated"`
-	// Size is the full size of the file in bytes.
-	Size int64 `json:"size"`
-}
-
-// Read returns up to MaxBytes of the file at realPath, prepared for the given renderer kind.
-func Read(realPath, kind string) (Result, error) {
-	f, err := os.Open(realPath)
-	if err != nil {
-		return Result{}, err
-	}
-	defer f.Close()
-
-	info, err := f.Stat()
-	if err != nil {
-		return Result{}, err
-	}
-
-	buf := make([]byte, MaxBytes)
-	n, err := io.ReadFull(f, buf)
-	if err != nil && !errors.Is(err, io.EOF) && !errors.Is(err, io.ErrUnexpectedEOF) {
-		return Result{}, err
-	}
-	buf = buf[:n]
-
-	if bytes.IndexByte(buf, 0) >= 0 {
-		return Result{}, ErrNotText
-	}
-
-	truncated := info.Size() > int64(n)
-	if truncated {
-		buf = trimIncompleteRune(buf)
-		buf = trimToLastLine(buf)
-	}
-
-	// Legacy encodings are not valid UTF-8. Replace the bad bytes so the preview still renders.
-	text := strings.ToValidUTF8(string(buf), "\uFFFD")
-
-	result := Result{Kind: kind, Format: "text", Truncated: truncated, Size: info.Size()}
-	if kind == "rtf" {
-		result.Content = RTFToHTML(text)
-		result.Format = "html"
-	} else {
-		result.Content = text
-	}
-	return result, nil
-}
-
-// trimIncompleteRune removes a trailing partial UTF-8 sequence left by the read limit.
-func trimIncompleteRune(b []byte) []byte {
-	for i := 1; i <= utf8.UTFMax && i <= len(b); i++ {
-		c := b[len(b)-i]
-		if c&0xC0 == 0x80 {
-			// Continuation byte: keep looking for the lead byte.
-			continue
-		}
-		need := 1
-		switch {
-		case c&0xE0 == 0xC0:
-			need = 2
-		case c&0xF0 == 0xE0:
-			need = 3
-		case c&0xF8 == 0xF0:
-			need = 4
-		}
-		if need > i {
-			return b[:len(b)-i]
-		}
-		return b
-	}
-	return b
-}
-
-// trimToLastLine cuts at the last newline when that keeps at least half of the buffer.
-// Files with very long lines keep their full prefix so the preview is not empty.
-func trimToLastLine(b []byte) []byte {
-	idx := bytes.LastIndexByte(b, '\n')
-	if idx > len(b)/2 {
-		return b[:idx]
-	}
-	return b
-}

backend/internal/web/media_settings_handler_test.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"net/http"
 	"net/http/httptest"
+	"sort"
 	"testing"
 
 	"github.com/gtsteffaniak/filebrowser/backend/internal/database/users"
@@ -19,11 +20,13 @@ func withMediaHandlerSettings(t *testing.T) {
 		settings.Env.FFmpegAvailable = originalFFmpeg
 	})
 	settings.Env.FFmpegAvailable = true
-	settings.Config.Integrations.Media.Transcode = settings.MediaTranscode{
-		Enabled:              true,
-		MaxConcurrent:        3,
-		MaxConcurrentPerUser: 2,
-		Profiles:             settings.DefaultTranscodeProfiles(),
+	settings.Config.Integrations.Media.Transcode = settings.FullAdminTranscode{
+		UserTranscode: settings.UserTranscode{
+			Enabled:              true,
+			MaxConcurrentPerUser: 2,
+		},
+		MaxConcurrent: 3,
+		Profiles:      settings.DefaultTranscodeProfiles(),
 	}
 }
 
@@ -52,52 +55,99 @@ func callMediaGet(t *testing.T, admin bool) map[string]any {
 	return body
 }
 
-// Non-admin users must be able to read the effective media values for the
-// player, but only the player-relevant subset.
+// objectField returns obj[key] as a JSON object, failing the test if it is missing or not an object.
+func objectField(t *testing.T, obj map[string]any, key string) map[string]any {
+	t.Helper()
+	child, ok := obj[key].(map[string]any)
+	if !ok {
+		t.Fatalf("%s is %T, want object", key, obj[key])
+	}
+	return child
+}
+
+// keysOf returns the sorted keys of a JSON object.
+func keysOf(obj map[string]any) []string {
+	keys := make([]string, 0, len(obj))
+	for k := range obj {
+		keys = append(keys, k)
+	}
+	sort.Strings(keys)
+	return keys
+}
+
+func assertKeys(t *testing.T, path string, got []string, want []string) {
+	t.Helper()
+	sort.Strings(want)
+	if len(got) != len(want) {
+		t.Fatalf("%s keys = %v, want %v", path, got, want)
+	}
+	for i := range got {
+		if got[i] != want[i] {
+			t.Fatalf("%s keys = %v, want %v", path, got, want)
+		}
+	}
+}
+
+// Non-admin users receive exactly the PUBLIC payload. Any new key fails this test,
+// which forces a conscious decision about whether it belongs in UserMedia.
 func TestSettingsMediaHandlerPlayerPayloadForNonAdmin(t *testing.T) {
 	withMediaHandlerSettings(t)
 
 	body := callMediaGet(t, false)
-	if _, ok := body["transcode"]; ok {
-		t.Fatal("non-admin must not receive the full transcode settings")
+	assertKeys(t, "top-level", keysOf(body), []string{"transcode", "imagePreview"})
+	transcode := objectField(t, body, "transcode")
+	assertKeys(t, "transcode", keysOf(transcode), []string{"enabled", "maxConcurrentPerUser", "enabledProfiles"})
+
+	if enabled, ok := transcode["enabled"].(bool); !ok || !enabled {
+		t.Fatalf("transcode.enabled = %v, want true", transcode["enabled"])
 	}
-	if _, ok := body["lockedFromConfigPaths"]; ok {
-		t.Fatal("non-admin must not receive config lock metadata")
+	if limit, ok := transcode["maxConcurrentPerUser"].(float64); !ok || limit != 2 {
+		t.Fatalf("transcode.maxConcurrentPerUser = %v, want 2", transcode["maxConcurrentPerUser"])
 	}
-	if _, ok := body["lockMessage"]; ok {
-		t.Fatal("non-admin must not receive the config lock message")
-	}
-	if enabled, ok := body["enabled"].(bool); !ok || !enabled {
-		t.Fatalf("enabled = %v, want true", body["enabled"])
-	}
-	if limit, ok := body["maxConcurrentPerUser"].(float64); !ok || limit != 2 {
-		t.Fatalf("maxConcurrentPerUser = %v, want 2", body["maxConcurrentPerUser"])
-	}
-	profiles, ok := body["profiles"].([]any)
+	profiles, ok := transcode["enabledProfiles"].([]any)
 	if !ok || len(profiles) != 3 {
-		t.Fatalf("profiles = %v, want 3 enabled ids", body["profiles"])
+		t.Fatalf("transcode.enabledProfiles = %v, want 3 enabled ids", transcode["enabledProfiles"])
 	}
 }
 
+// Admins receive the full stored config. The keys shared with users must have the
+// same names, so the admin payload is a strict superset of the user payload.
 func TestSettingsMediaHandlerFullPayloadForAdmin(t *testing.T) {
 	withMediaHandlerSettings(t)
 
-	body := callMediaGet(t, true)
-	transcode, ok := body["transcode"].(map[string]any)
-	if !ok {
-		t.Fatalf("admin must receive the full transcode settings, got %T", body["transcode"])
-	}
-	if _, ok := transcode["profiles"].(map[string]any); !ok {
-		t.Fatalf("admin transcode payload must include profiles, got %v", transcode["profiles"])
-	}
-	// Admin payload exposes the full settings surface, not the player subset.
-	for _, key := range []string{"convert", "debug", "hardwareAcceleration"} {
-		if _, ok := body[key]; !ok {
+	admin := callMediaGet(t, true)
+	user := callMediaGet(t, false)
+
+	// lockedFromConfigPaths is omitted when config pins nothing, so it is not required here.
+	for _, key := range []string{"transcode", "imagePreview", "convert", "debug", "hardwareAcceleration", "accelDevice"} {
+		if _, ok := admin[key]; !ok {
 			t.Fatalf("admin payload missing %q", key)
 		}
 	}
-	if _, ok := body["enabled"]; ok {
-		t.Fatal("the admin payload uses the full settings shape, not the player subset")
+	if _, ok := admin["enabled"]; ok {
+		t.Fatal("admin payload must not repeat transcode.enabled at the top level")
+	}
+
+	adminTranscode := objectField(t, admin, "transcode")
+	for _, key := range []string{"maxConcurrent", "profiles", "cacheMaxSizeMB", "encoderBackend", "readRate"} {
+		if _, ok := adminTranscode[key]; !ok {
+			t.Fatalf("admin transcode missing %q", key)
+		}
+	}
+	if _, ok := adminTranscode["profiles"].(map[string]any); !ok {
+		t.Fatalf("admin transcode.profiles must be an object, got %T", adminTranscode["profiles"])
+	}
+
+	// Superset rule: every key a user receives must also exist for admins. Values may
+	// differ by design: admins see stored config (so the UI can save it back unchanged),
+	// users see effective values (for example enabled is false when ffmpeg is missing).
+	for key := range objectField(t, user, "transcode") {
+		if _, ok := adminTranscode[key]; !ok {
+			t.Fatalf("admin transcode missing shared key %q", key)
+		}
+	}
+	if admin["imagePreview"] == nil {
+		t.Fatal("imagePreview must be present for admins")
 	}
 }
 
@@ -106,8 +156,8 @@ func TestSettingsMediaHandlerReflectsDisabledTranscode(t *testing.T) {
 	withMediaHandlerSettings(t)
 	settings.Config.Integrations.Media.Transcode.Enabled = false
 
-	body := callMediaGet(t, false)
-	if enabled, ok := body["enabled"].(bool); !ok || enabled {
-		t.Fatalf("enabled = %v, want false", body["enabled"])
+	transcode := objectField(t, callMediaGet(t, false), "transcode")
+	if enabled, ok := transcode["enabled"].(bool); !ok || enabled {
+		t.Fatalf("transcode.enabled = %v, want false", transcode["enabled"])
 	}
 }

backend/internal/web/server.go

@@ -42,7 +42,7 @@ func initRuntime(deps Deps, assets fs.FS) {
 	initSettingsSecretMarkers()
 }
 
-// Embed the frontend build output under internal/web/dist (see frontend `npm run build`).
+// Embed the frontend build output under internal/web/dist (see `make embed-frontend` after `npm run build` in frontend/).
 //
 //go:embed dist/*
 var assets embed.FS

backend/internal/web/settings.go

@@ -455,31 +455,26 @@ func settingsShareDefaultsPatchHandler(w http.ResponseWriter, r *http.Request, d
 
 // settingsMediaGetHandler returns the runtime media settings.
 // @Summary Get runtime media settings
-// @Description Admins receive the DB-backed media integration settings; every authenticated user
-// @Description receives the player-relevant subset (transcode enabled, profiles, per-user limit).
+// @Description Returns the media settings the caller is allowed to see.
+// @Description Admins get the full settings, including ffmpeg and hardware options, so they can edit them.
+// @Description Everyone else gets a small read-only view: whether transcoding is on, how many
+// @Description transcodes they can run at once, which quality presets are enabled, and which image
+// @Description previews the server can generate. Keys in the view are the same for admins and users.
 // @Tags Settings
 // @Produce json
 // @Success 200 {object} mediaSettingsResponse "Media settings"
 // @Router /api/settings/media [get]
-// mediaSettingsResponse is the runtime media settings plus config-lock metadata.
+// mediaSettingsResponse is the ADMIN ONLY media payload: the full stored settings
+// (FullAdminMedia, which embeds the public UserTranscode fields) plus config-lock
+// metadata and ffmpeg option lists. Non-admins never receive this type.
 type mediaSettingsResponse struct {
-	settings.MediaSettings
+	settings.FullAdminMedia
 	LockedFromConfigPaths []string                      `json:"lockedFromConfigPaths,omitempty"`
 	LockMessage           string                        `json:"lockMessage,omitempty"`
 	AccelDeviceOptions    []ffmpeg.AccelDeviceOption    `json:"accelDeviceOptions,omitempty"`
 	EncoderBackendOptions []ffmpeg.EncoderBackendOption `json:"encoderBackendOptions,omitempty"`
 }
 
-// mediaPlayerSettings is the player-relevant subset of the runtime media
-// settings. It is safe to expose to any authenticated user so the player can
-// reflect admin changes without a page reload.
-type mediaPlayerSettings struct {
-	Enabled              bool     `json:"enabled"`
-	Profiles             []string `json:"profiles"`
-	MaxConcurrentPerUser int      `json:"maxConcurrentPerUser"`
-	HardwareAcceleration bool     `json:"hardwareAcceleration"`
-}
-
 func mediaSettingsLockMeta() (paths []string, message string) {
 	paths = settings.ConfigSpecifiedMediaPaths()
 	if len(paths) == 0 {
@@ -492,11 +487,14 @@ func mediaSettingsLockMeta() (paths []string, message string) {
 // metadata, subtitles, and video thumbnails without it. ffmpeg-only controls
 // (transcoding, hardware acceleration) report their own availability.
 func settingsMediaGetHandler(w http.ResponseWriter, r *http.Request, d *Context) (int, error) {
+	// PUBLIC payload: non-admins get only what the player and general UI read.
 	if !d.User.Permissions.Admin {
-		return RenderJSON(w, r, currentMediaPlayerSettings())
+		return RenderJSON(w, r, settings.CurrentUserMedia())
 	}
+	// ADMIN payload: full stored settings with effective and derived values filled in
+	// by PrepMediaForFrontend (a read-only copy; never saved).
+	media := settings.PrepMediaForFrontend(state.GetMediaSettings())
 	lockedPaths, lockMessage := mediaSettingsLockMeta()
-	media := state.GetMediaSettings()
 	svc := ffmpeg.Get()
 	var accelDeviceOptions []ffmpeg.AccelDeviceOption
 	var encoderBackendOptions []ffmpeg.EncoderBackendOption
@@ -506,7 +504,7 @@ func settingsMediaGetHandler(w http.ResponseWriter, r *http.Request, d *Context)
 		encoderBackendOptions = svc.EncoderBackendOptions()
 	}
 	return RenderJSON(w, r, mediaSettingsResponse{
-		MediaSettings:         media,
+		FullAdminMedia:        media,
 		LockedFromConfigPaths: lockedPaths,
 		LockMessage:           lockMessage,
 		AccelDeviceOptions:    accelDeviceOptions,
@@ -514,17 +512,6 @@ func settingsMediaGetHandler(w http.ResponseWriter, r *http.Request, d *Context)
 	})
 }
 
-// currentMediaPlayerSettings reads the live media settings for the player UI.
-func currentMediaPlayerSettings() mediaPlayerSettings {
-	media := state.GetMediaSettings()
-	return mediaPlayerSettings{
-		Enabled:              settings.TranscodeEnabled(),
-		Profiles:             settings.EnabledTranscodeProfiles(),
-		MaxConcurrentPerUser: settings.TranscodeMaxConcurrentPerUser(),
-		HardwareAcceleration: media.HardwareAcceleration,
-	}
-}
-
 // settingsMediaPatchHandler merges a partial update into the runtime media settings.
 // @Summary Update runtime media settings
 // @Description Merges a partial JSON patch into the DB-backed media settings and applies them at runtime.

backend/internal/web/static.go

@@ -151,7 +151,14 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *requestCont
 		externalLinks = newExternalLinks
 	}
 
-	defaultThemeColor := settings.DefaultBackgroundColor()
+	// Single source for the instance default dark mode. It drives the server-rendered
+	// <html> class (htmlVars.defaultDarkMode), the theme-color meta, and globalVars.darkMode,
+	// so the first paint and the SPA agree.
+	defaultDark := settings.DefaultDarkMode()
+	defaultThemeColor := settings.Config.Frontend.Styling.LightBackground
+	if defaultDark {
+		defaultThemeColor = settings.Config.Frontend.Styling.DarkBackground
+	}
 	staticURL := settings.Config.Http.BaseURL + "public/static"
 	description := settings.Config.Frontend.Description
 	title := settings.Config.Frontend.Name
@@ -245,11 +252,12 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *requestCont
 		manifestURL = staticURL + "/site.webmanifest?" + query.Encode()
 	}
 
+	// only include constant values that don't change during a users session
 	data["htmlVars"] = map[string]interface{}{
 		"title":              title,
 		"customCSS":          template.CSS(settings.Config.Frontend.Styling.CustomCSSRaw),
 		"userSelectedTheme":  template.CSS(userSelectedTheme),
-		"defaultDarkMode":    settings.DefaultDarkMode(),
+		"defaultDarkMode":    defaultDark,
 		"lightBackground":    settings.Config.Frontend.Styling.LightBackground,
 		"darkBackground":     settings.Config.Frontend.Styling.DarkBackground,
 		"staticURL":          staticURL,
@@ -272,12 +280,13 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *requestCont
 		"devMode":            settings.Env.IsDevMode,
 	}
 
+	// only include constant values that don't change during a users session
 	data["globalVars"] = map[string]interface{}{
 		"name":                          settings.Config.Frontend.Name,
 		"minSearchLength":               settings.Config.Server.MinSearchLength,
 		"searchResultsLimit":            settings.Config.Server.SearchResultsLimit,
 		"disableExternal":               settings.Config.Frontend.DisableDefaultLinks,
-		"darkMode":                      settings.Config.UserDefaults.UI.DarkMode,
+		"darkMode":                      defaultDark,
 		"singleClick":                   settings.Config.UserDefaults.Listing.SingleClick,
 		"lightBackground":               settings.Config.Frontend.Styling.LightBackground,
 		"darkBackground":                settings.Config.Frontend.Styling.DarkBackground,
@@ -297,17 +306,10 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *requestCont
 		"passwordMinLength":             settings.PasswordMinLength(),
 		"ldapAvailable":                 settings.Config.Auth.Methods.LdapAuth.Enabled,
 		"ffmpegAvailable":               settings.FFmpegEnabled(),
-		"hardwareAccelerationAvailable": settings.HardwareAccelerationSupported(),
-		"transcodeEnabled":              settings.TranscodeEnabled(),
-		"transcodeProfiles":             settings.EnabledTranscodeProfiles(),
-		"transcodeMaxPerUser":           settings.TranscodeMaxConcurrentPerUser(),
 		"docPreviewExtensions":          iteminfo.DocPreviewExtensionsForSPA(),
-		"textPreviewExtensions":         iteminfo.TextPreviewExtensionsForSPA(),
 		"updateAvailable":               utils.GetUpdateAvailableUrl(),
 		"disableNavButtons":             disableNavButtons,
 		"userSelectableThemes":          settings.Config.Frontend.Styling.CustomThemeOptions,
-		"enableHeicConversion":          settings.CanConvertImage("heic"),
-		"enableJxlConversion":           settings.CanConvertImage("jxl"),
 		"eventBasedThemes":              !settings.Config.Frontend.Styling.DisableEventBasedThemes,
 		"loginIcon":                     loginIcon,
 		"disableSidebar":                disableSidebar,
@@ -324,6 +326,7 @@ func handleWithStaticData(w http.ResponseWriter, r *http.Request, d *requestCont
 		"playwrightTest":                settings.Env.IsPlaywright,
 		"officeProduct":                 officeProductForSPA(),
 		"officeExtensions":              wopiExtensionsForSPA(),
+		"textPreviewMimeTypes":          iteminfo.TextPreviewMimeTypes(),
 	}
 
 	cspNonce, err := utils.CSPNonce()

backend/internal/web/textpreview.go

@@ -5,11 +5,9 @@ import (
 	"fmt"
 	"net/http"
 	"os"
-	"path/filepath"
-	"strings"
 
 	"github.com/gtsteffaniak/filebrowser/backend/internal/adapters/fs/files"
-	"github.com/gtsteffaniak/filebrowser/backend/internal/textpreview"
+	"github.com/gtsteffaniak/filebrowser/backend/internal/preview"
 	"github.com/gtsteffaniak/filebrowser/backend/internal/utils"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/indexing/iteminfo"
 	"github.com/gtsteffaniak/filebrowser/backend/pkg/settings"
@@ -24,7 +22,7 @@ import (
 // @Produce json
 // @Param path query string true "File path of the text file to preview"
 // @Param source query string true "Source name"
-// @Success 200 {object} textpreview.Result "Text preview content"
+// @Success 200 {object} preview.TextPreviewResult "Text preview content"
 // @Failure 400 {object} map[string]string "Invalid request path"
 // @Failure 403 {object} map[string]string "User is not allowed to view files in this source"
 // @Failure 404 {object} map[string]string "File not found"
@@ -71,7 +69,7 @@ func textPreviewHandler(w http.ResponseWriter, r *http.Request, d *Context) (int
 // @Produce json
 // @Param hash query string true "Share hash for authentication"
 // @Param path query string true "File path within the share to preview"
-// @Success 200 {object} textpreview.Result "Text preview content"
+// @Success 200 {object} preview.TextPreviewResult "Text preview content"
 // @Failure 403 {object} map[string]string "Share unavailable or access denied"
 // @Failure 404 {object} map[string]string "File not found"
 // @Failure 415 {object} map[string]string "File type is not supported for text preview, or the file is binary"
@@ -101,14 +99,17 @@ func serveTextPreview(w http.ResponseWriter, r *http.Request, info *iteminfo.Ext
 	if info.Type == "directory" {
 		return http.StatusUnsupportedMediaType, fmt.Errorf("directories have no text preview")
 	}
-	kind := iteminfo.TextPreviewKind(strings.ToLower(filepath.Ext(info.Name)))
-	if kind == "" {
+	if !iteminfo.IsTextPreviewable(info.Type) {
 		return http.StatusUnsupportedMediaType, fmt.Errorf("unsupported file type for text preview")
 	}
-	result, err := textpreview.Read(info.RealPath, kind)
+	kind := iteminfo.TextPreviewRenderKind(info.Name)
+	// Bound concurrent reads and RTF conversions with the preview service's shared
+	// image-processor semaphore, so a listing of many text files cannot open an
+	// unbounded number of file handles at once.
+	result, err := preview.GetTextPreview(r.Context(), info.RealPath, kind)
 	if err != nil {
 		switch {
-		case errors.Is(err, textpreview.ErrNotText):
+		case errors.Is(err, preview.ErrNotText):
 			return http.StatusUnsupportedMediaType, err
 		case errors.Is(err, os.ErrNotExist):
 			return http.StatusNotFound, fmt.Errorf("file not found")

backend/internal/web/transcode_wiring_test.go

@@ -33,7 +33,7 @@ func TestTranscodeManagerIsWiredWithoutFFmpeg(t *testing.T) {
 	// Startup with ffmpeg missing and transcoding disabled.
 	settings.Env.FFmpegAvailable = false
 	disabled := originalMedia
-	disabled.Transcode = settings.MediaTranscode{Enabled: false}
+	disabled.Transcode = settings.FullAdminTranscode{UserTranscode: settings.UserTranscode{Enabled: false}}
 	settings.ApplyMediaSettings(disabled)
 
 	setupTestEnv(t)

backend/pkg/indexing/indexingFiles.go

@@ -1597,7 +1597,7 @@ func setFilePreviewFlags(fileInfo *iteminfo.ItemInfo, realPath string) {
 	}
 	// Text-like files are rendered by the text preview endpoint (not the image pipeline),
 	// so this runs before Folio/OnlyOffice. SVG is not a text preview type and stays an image.
-	if iteminfo.IsTextPreviewable(fileInfo.Name) {
+	if iteminfo.IsTextPreviewable(fileInfo.Type) {
 		fileInfo.HasPreview = true
 		return
 	}

backend/pkg/indexing/iteminfo/conditions.go

@@ -271,57 +271,57 @@ var compressedFile = map[string]bool{
 
 // Raw camera image: extension -> MIME type (single source for IsRawImage + type detection)
 var rawImageMimeType = map[string]string{
-	".cr2":  "image/x-canon-cr2",
-	".cr3":  "image/x-canon-cr3",
-	".nef":  "image/x-nikon-nef",
-	".nrw":  "image/x-nikon-nef",
-	".arw":  "image/x-sony-arw",
-	".srf":  "image/x-sony-arw",
-	".sr2":  "image/x-sony-arw",
-	".orf":  "image/x-olympus-orf",
-	".rw2":  "image/x-panasonic-rw2",
-	".raw":  "image/x-panasonic-raw",
-	".dng":  "image/x-adobe-dng",
-	".raf":  "image/x-fuji-raf",
-	".pef":  "image/x-pentax-pef",
-	".ptx":  "image/x-pentax-pef",
-	".rwl":  "image/x-leica-rwl",
-	".3fr":  "image/x-hasselblad-3fr",
-	".fff":  "image/x-hasselblad-fff",
-	".erf":  "image/x-epson-erf",
-	".mrw":  "image/x-minolta-mrw",
-	".dcr":  "image/x-kodak-dcr",
-	".kdc":  "image/x-kodak-dcr",
-	".dc2":  "image/x-kodak-dc2",
-	".x3f":  "image/x-sigma-x3f",
-	".iiq":  "image/x-phaseone-iiq",
-	".nkc":  "image/x-kodak-nkc",
-	".r3d":  "image/x-red-r3d",
+	".cr2": "image/x-canon-cr2",
+	".cr3": "image/x-canon-cr3",
+	".nef": "image/x-nikon-nef",
+	".nrw": "image/x-nikon-nef",
+	".arw": "image/x-sony-arw",
+	".srf": "image/x-sony-arw",
+	".sr2": "image/x-sony-arw",
+	".orf": "image/x-olympus-orf",
+	".rw2": "image/x-panasonic-rw2",
+	".raw": "image/x-panasonic-raw",
+	".dng": "image/x-adobe-dng",
+	".raf": "image/x-fuji-raf",
+	".pef": "image/x-pentax-pef",
+	".ptx": "image/x-pentax-pef",
+	".rwl": "image/x-leica-rwl",
+	".3fr": "image/x-hasselblad-3fr",
+	".fff": "image/x-hasselblad-fff",
+	".erf": "image/x-epson-erf",
+	".mrw": "image/x-minolta-mrw",
+	".dcr": "image/x-kodak-dcr",
+	".kdc": "image/x-kodak-dcr",
+	".dc2": "image/x-kodak-dc2",
+	".x3f": "image/x-sigma-x3f",
+	".iiq": "image/x-phaseone-iiq",
+	".nkc": "image/x-kodak-nkc",
+	".r3d": "image/x-red-r3d",
 }
 
 // 3D model extension -> MIME type (single source for Is3DModel + type detection)
 var model3DMimeType = map[string]string{
-	".gltf":  "model/gltf+json",
-	".glb":   "model/gltf-binary",
-	".obj":   "model/obj",
-	".fbx":   "model/fbx",
-	".stl":   "model/stl",
-	".ply":   "model/ply",
-	".dae":   "model/vnd.collada+xml",
-	".3mf":   "model/3mf",
-	".3ds":   "model/3ds",
-	".usdz":  "model/vnd.usdz+zip",
-	".usd":   "model/vnd.usd+zip",
-	".usda":  "model/vnd.usd+zip",
-	".usdc":  "model/vnd.usd+zip",
-	".amf":   "model/x-amf",
-	".vrml":  "model/vrml",
-	".wrl":   "model/vrml",
-	".vtk":   "model/vtk",
-	".vtp":   "model/vtk",
-	".pcd":   "model/pcd",
-	".xyz":   "model/xyz",
-	".vox":   "model/vox",
+	".gltf": "model/gltf+json",
+	".glb":  "model/gltf-binary",
+	".obj":  "model/obj",
+	".fbx":  "model/fbx",
+	".stl":  "model/stl",
+	".ply":  "model/ply",
+	".dae":  "model/vnd.collada+xml",
+	".3mf":  "model/3mf",
+	".3ds":  "model/3ds",
+	".usdz": "model/vnd.usdz+zip",
+	".usd":  "model/vnd.usd+zip",
+	".usda": "model/vnd.usd+zip",
+	".usdc": "model/vnd.usd+zip",
+	".amf":  "model/x-amf",
+	".vrml": "model/vrml",
+	".wrl":  "model/vrml",
+	".vtk":  "model/vtk",
+	".vtp":  "model/vtk",
+	".pcd":  "model/pcd",
+	".xyz":  "model/xyz",
+	".vox":  "model/vox",
 }
 
 var audioMetadataTypes = map[string]bool{
@@ -560,20 +560,47 @@ func TextPreviewKind(ext string) string {
 	return textPreviewKinds[ext]
 }
 
-// IsTextPreviewable reports whether a file name uses the text preview endpoint.
-func IsTextPreviewable(name string) bool {
-	return textPreviewKinds[strings.ToLower(filepath.Ext(name))] != ""
+// textPreviewMimeTypes are non-text/* mimetypes that textTypes extensions resolve to
+// (see the custom table in backend/internal/adapters/fs/files/mime.go). The frontend
+// receives this list through globalVars (backend/internal/web/static.go), so it is
+// the single source of truth.
+// Do not add mimetypes shared with binaries (e.g. application/x-msdownload for .exe).
+var textPreviewMimeTypes = map[string]bool{
+	"application/json":         true,
+	"application/yaml":         true,
+	"application/x-yaml":       true,
+	"application/sql":          true,
+	"application/x-sql":        true,
+	"application/x-sh":         true,
+	"application/x-php":        true,
+	"application/x-powershell": true,
+	"application/x-tex":        true,
+	"application/toml":         true,
+	"application/x-ruby":       true,
 }
 
-// TextPreviewExtensionsForSPA groups text preview extensions (without dots) by renderer kind.
-// The frontend uses this to decide which items get a text preview container.
-func TextPreviewExtensionsForSPA() map[string][]string {
-	out := make(map[string][]string)
-	for ext, kind := range textPreviewKinds {
-		out[kind] = append(out[kind], strings.TrimPrefix(ext, "."))
-	}
-	for kind := range out {
-		sort.Strings(out[kind])
-	}
-	return out
+// IsTextPreviewable reports whether an item uses the text preview endpoint. The decision
+// is the item's mimetype: every text/* type and the textPreviewMimeTypes allowlist.
+func IsTextPreviewable(mimetype string) bool {
+	return strings.HasPrefix(mimetype, "text/") || textPreviewMimeTypes[mimetype]
+}
+
+// TextPreviewMimeTypes returns the non-text/* allowlist in sorted order, for the
+// frontend's globalVars. Sorting keeps the served value stable across restarts.
+func TextPreviewMimeTypes() []string {
+	types := make([]string, 0, len(textPreviewMimeTypes))
+	for mt := range textPreviewMimeTypes {
+		types = append(types, mt)
+	}
+	sort.Strings(types)
+	return types
+}
+
+// TextPreviewRenderKind returns the renderer kind for a text-previewable file: the
+// extension-specific kind when one exists, otherwise "plain".
+func TextPreviewRenderKind(name string) string {
+	if kind := TextPreviewKind(strings.ToLower(filepath.Ext(name))); kind != "" {
+		return kind
+	}
+	return "plain"
 }

backend/pkg/indexing/iteminfo/text_preview_test.go

@@ -1,7 +1,7 @@
 package iteminfo
 
 import (
-	"slices"
+	"sort"
 	"testing"
 
 	"github.com/stretchr/testify/require"
@@ -22,21 +22,30 @@ func TestTextPreviewKinds(t *testing.T) {
 }
 
 func TestIsTextPreviewable(t *testing.T) {
-	require.True(t, IsTextPreviewable("Notes.TXT"))
-	require.True(t, IsTextPreviewable("dir/readme.md"))
-	require.False(t, IsTextPreviewable("image.svg"))
-	require.False(t, IsTextPreviewable("noext"))
-}
-
-func TestTextPreviewExtensionsForSPA(t *testing.T) {
-	groups := TextPreviewExtensionsForSPA()
-	require.Contains(t, groups["markdown"], "md")
-	require.Contains(t, groups["rtf"], "rtf")
-	require.True(t, slices.Contains(groups["code"], "go"))
-	require.False(t, slices.Contains(groups["code"], "svg"))
-	for _, exts := range groups {
-		for _, ext := range exts {
-			require.NotContains(t, ext, ".", "extensions must not have a leading dot")
-		}
+	for _, mt := range []string{"text/plain", "text/markdown", "text/lyrics", "text/x-go", "text/html"} {
+		require.True(t, IsTextPreviewable(mt), mt)
+	}
+	for _, mt := range []string{"application/json", "application/yaml", "application/sql", "application/x-sh", "application/x-php", "application/x-powershell", "application/x-tex"} {
+		require.True(t, IsTextPreviewable(mt), mt)
+	}
+	// Mimetypes shared with binaries (.exe, .bat via application/x-msdownload) must stay non-previewable.
+	for _, mt := range []string{"", "image/svg+xml", "application/pdf", "application/x-sqlite3", "application/postscript", "application/backup", "application/wasm", "application/x-msdownload", "application/x-msdos-program", "application/octet-stream"} {
+		require.False(t, IsTextPreviewable(mt), mt)
 	}
 }
+
+func TestTextPreviewRenderKind(t *testing.T) {
+	require.Equal(t, "markdown", TextPreviewRenderKind("notes.md"))
+	require.Equal(t, "plain", TextPreviewRenderKind("50. Holy Water.lrc"))
+	require.Equal(t, "plain", TextPreviewRenderKind("cert.pem"))
+}
+
+func TestTextPreviewMimeTypesIsSortedAndMatchesAllowlist(t *testing.T) {
+	types := TextPreviewMimeTypes()
+	require.NotEmpty(t, types)
+	require.True(t, sort.StringsAreSorted(types), "list must be sorted for a stable globalVars value")
+	for _, mt := range types {
+		require.True(t, IsTextPreviewable(mt), mt)
+	}
+	require.Contains(t, types, "application/json")
+}

backend/pkg/settings/config.go

@@ -428,7 +428,7 @@ const (
 // clampTranscodeReadRate enforces throttled producers: unset or sub-realtime
 // read rates are raised, so a producer is never left unthrottled. Burst and
 // catch-up pacing are left to ffmpeg's defaults.
-func clampTranscodeReadRate(t *MediaTranscode) {
+func clampTranscodeReadRate(t *FullAdminTranscode) {
 	if t.ReadRate <= 0 {
 		t.ReadRate = defaultTranscodeReadRate
 	} else if t.ReadRate < minTranscodeReadRate {
@@ -1073,14 +1073,16 @@ func SetDefaults(generate bool) Settings {
 	for _, t := range AllVideoPreviewTypes {
 		s.Integrations.Media.Convert.VideoPreview[t] = boolPtr(true)
 	}
-	s.Integrations.Media.Transcode = MediaTranscode{
-		Enabled:              false,
-		MaxConcurrent:        2,
-		MaxConcurrentPerUser: 1,
-		CacheMaxSizeMB:       10240,
-		CacheRetentionH:      24,
-		ReadRate:             defaultTranscodeReadRate,
-		Profiles:             DefaultTranscodeProfiles(),
+	s.Integrations.Media.Transcode = FullAdminTranscode{
+		UserTranscode: UserTranscode{
+			Enabled:              false,
+			MaxConcurrentPerUser: 1,
+		},
+		MaxConcurrent:   2,
+		CacheMaxSizeMB:  10240,
+		CacheRetentionH: 24,
+		ReadRate:        defaultTranscodeReadRate,
+		Profiles:        DefaultTranscodeProfiles(),
 	}
 	// Hardware acceleration is opt-out: "auto" lets go-ffmpeg follow its device
 	// hierarchy (integrated GPU, discrete GPU, then software).

backend/pkg/settings/generator_test.go

@@ -331,7 +331,7 @@ func TestGenerateConfigYaml_IntegrationTest(t *testing.T) {
 			showComments:     false,
 			showFull:         true,
 			filterDeprecated: false,
-			expectSecret:     true,  // secrets should be hidden
+			expectSecret:     true, // secrets should be hidden
 			expectDeprecated: false,
 			expectFull:       true,  // all fields shown
 			expectComments:   false, // no comments

backend/pkg/settings/media_config_lock.go

@@ -68,14 +68,14 @@ func MediaPatchJSONForPaths(source any, paths []string) ([]byte, error) {
 
 // ApplyConfigSpecifiedPathsToMedia overlays config media values onto stored settings for the
 // paths the config file pins, so a config value always wins over the stored one.
-func ApplyConfigSpecifiedPathsToMedia(stored MediaSettings, config Media) (MediaSettings, error) {
+func ApplyConfigSpecifiedPathsToMedia(stored FullAdminMedia, config Media) (FullAdminMedia, error) {
 	paths := ConfigSpecifiedMediaPaths()
 	if len(paths) == 0 {
 		return stored, nil
 	}
 	patchJSON, err := MediaPatchJSONForPaths(config, paths)
 	if err != nil {
-		return MediaSettings{}, err
+		return FullAdminMedia{}, err
 	}
 	if len(patchJSON) == 0 || string(patchJSON) == "{}" || string(patchJSON) == "null" {
 		return stored, nil

backend/pkg/settings/media_config_lock_test.go

@@ -60,11 +60,11 @@ func TestValidateMediaPatchNotConfigLockedWithoutLocks(t *testing.T) {
 func TestApplyConfigSpecifiedPathsToMedia(t *testing.T) {
 	withConfigMediaPaths(t, "hardwareAcceleration", "transcode.profiles.datasaver.avgBitrateKbps")
 
-	stored := MediaSettings{
+	stored := FullAdminMedia{
 		Debug:                true,
 		HardwareAcceleration: true,
-		Transcode: MediaTranscode{
-			Enabled: true,
+		Transcode: FullAdminTranscode{
+			UserTranscode: UserTranscode{Enabled: true},
 			Profiles: TranscodeProfiles{
 				DataSaver: TranscodeProfile{AvgBitrateKbps: 1500},
 			},
@@ -72,7 +72,7 @@ func TestApplyConfigSpecifiedPathsToMedia(t *testing.T) {
 	}
 	config := Media{
 		HardwareAcceleration: false,
-		Transcode: MediaTranscode{
+		Transcode: FullAdminTranscode{
 			Profiles: TranscodeProfiles{
 				DataSaver: TranscodeProfile{AvgBitrateKbps: 800},
 			},
@@ -97,7 +97,7 @@ func TestApplyConfigSpecifiedPathsToMedia(t *testing.T) {
 func TestApplyConfigSpecifiedPathsToMediaNoLocks(t *testing.T) {
 	withConfigMediaPaths(t)
 
-	stored := MediaSettings{HardwareAcceleration: true}
+	stored := FullAdminMedia{HardwareAcceleration: true}
 	overlaid, err := ApplyConfigSpecifiedPathsToMedia(stored, Media{HardwareAcceleration: false})
 	if err != nil {
 		t.Fatalf("ApplyConfigSpecifiedPathsToMedia: %v", err)

backend/pkg/settings/media_merge.go

@@ -7,18 +7,18 @@ import (
 )
 
 // MergeMediaSettingsPatchJSON merges a partial JSON patch into base media settings.
-func MergeMediaSettingsPatchJSON(base MediaSettings, patchJSON []byte) (MediaSettings, error) {
+func MergeMediaSettingsPatchJSON(base FullAdminMedia, patchJSON []byte) (FullAdminMedia, error) {
 	baseBytes, err := json.Marshal(base)
 	if err != nil {
-		return MediaSettings{}, err
+		return FullAdminMedia{}, err
 	}
 	mergedBytes, err := mergeUserDefaultsJSON(baseBytes, patchJSON)
 	if err != nil {
-		return MediaSettings{}, err
+		return FullAdminMedia{}, err
 	}
-	var merged MediaSettings
+	var merged FullAdminMedia
 	if err := json.Unmarshal(mergedBytes, &merged); err != nil {
-		return MediaSettings{}, fmt.Errorf("unmarshal merged media settings: %w", err)
+		return FullAdminMedia{}, fmt.Errorf("unmarshal merged media settings: %w", err)
 	}
 	// An explicit accelDevice wins over the legacy hardwareAcceleration bool in
 	// the base settings, which would otherwise force the device back to software.
@@ -35,7 +35,7 @@ func MergeMediaSettingsPatchJSON(base MediaSettings, patchJSON []byte) (MediaSet
 }
 
 // MediaSettingsEqual reports whether two runtime media settings are equivalent.
-func MediaSettingsEqual(a, b MediaSettings) bool {
+func MediaSettingsEqual(a, b FullAdminMedia) bool {
 	ab, errA := json.Marshal(a)
 	bb, errB := json.Marshal(b)
 	if errA != nil || errB != nil {
@@ -46,7 +46,7 @@ func MediaSettingsEqual(a, b MediaSettings) bool {
 
 // ApplyMediaSettingsIfChanged applies runtime media settings
 // only when they actually differ. It never re-runs ffmpeg detection.
-func ApplyMediaSettingsIfChanged(s MediaSettings) {
+func ApplyMediaSettingsIfChanged(s FullAdminMedia) {
 	if MediaSettingsEqual(CurrentMediaSettings(), s) {
 		return
 	}
@@ -55,7 +55,7 @@ func ApplyMediaSettingsIfChanged(s MediaSettings) {
 
 // CloneMediaSettings returns a deep copy of m — the conversion maps hold *bool
 // values, so a shallow copy would alias the live config's reference state.
-func CloneMediaSettings(m MediaSettings) MediaSettings {
+func CloneMediaSettings(m FullAdminMedia) FullAdminMedia {
 	out := m
 	out.Convert = FfmpegConvert{
 		ImagePreview: cloneBoolMap(m.Convert.ImagePreview),
@@ -84,7 +84,7 @@ func cloneBoolPtr(v *bool) *bool {
 }
 
 // SanitizeMediaSettings clamps runtime media settings into supported ranges.
-func SanitizeMediaSettings(m MediaSettings) MediaSettings {
+func SanitizeMediaSettings(m FullAdminMedia) FullAdminMedia {
 	t := &m.Transcode
 	if t.MaxConcurrent < 1 {
 		t.MaxConcurrent = 2

backend/pkg/settings/media_merge_test.go

@@ -2,17 +2,16 @@ package settings
 
 import "testing"
 
-func testMediaSettings() MediaSettings {
-	return MediaSettings{
+func testMediaSettings() FullAdminMedia {
+	return FullAdminMedia{
 		Debug:                true,
 		HardwareAcceleration: true,
-		Transcode: MediaTranscode{
-			Enabled:              true,
-			MaxConcurrent:        2,
-			MaxConcurrentPerUser: 1,
-			CacheMaxSizeMB:       10240,
-			CacheRetentionH:      24,
-			Profiles:             DefaultTranscodeProfiles(),
+		Transcode: FullAdminTranscode{
+			UserTranscode:   UserTranscode{Enabled: true, MaxConcurrentPerUser: 1},
+			MaxConcurrent:   2,
+			CacheMaxSizeMB:  10240,
+			CacheRetentionH: 24,
+			Profiles:        DefaultTranscodeProfiles(),
 		},
 	}
 }
@@ -54,11 +53,11 @@ func TestMergeMediaSettingsPatchJSONProfile(t *testing.T) {
 }
 
 func TestSanitizeMediaSettings(t *testing.T) {
-	in := MediaSettings{
-		Transcode: MediaTranscode{
-			MaxConcurrent:        -1,
-			MaxConcurrentPerUser: 0,
-			CacheRetentionH:      0,
+	in := FullAdminMedia{
+		Transcode: FullAdminTranscode{
+			UserTranscode:   UserTranscode{MaxConcurrentPerUser: 0},
+			MaxConcurrent:   -1,
+			CacheRetentionH: 0,
 			Profiles: TranscodeProfiles{
 				Quality: TranscodeProfile{MaxResolution: -5, AvgBitrateKbps: -1},
 			},
@@ -116,10 +115,10 @@ func TestSanitizeMediaSettingsAccelDevice(t *testing.T) {
 	}
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {
-			out := SanitizeMediaSettings(MediaSettings{
+			out := SanitizeMediaSettings(FullAdminMedia{
 				AccelDevice:          tc.device,
 				HardwareAcceleration: tc.hwAccel,
-				Transcode:            MediaTranscode{MaxConcurrent: 1, MaxConcurrentPerUser: 1, CacheRetentionH: 1},
+				Transcode:            FullAdminTranscode{UserTranscode: UserTranscode{MaxConcurrentPerUser: 1}, MaxConcurrent: 1, CacheRetentionH: 1},
 			})
 			if out.AccelDevice != tc.wantDevice || out.HardwareAcceleration != tc.wantHW {
 				t.Fatalf("accelDevice = %q/%v, want %q/%v", out.AccelDevice, out.HardwareAcceleration, tc.wantDevice, tc.wantHW)

backend/pkg/settings/media_runtime.go

@@ -209,8 +209,10 @@ func TranscodeCacheRetention() time.Duration {
 	return time.Duration(h) * time.Hour
 }
 
-// CurrentMediaSettings returns the runtime media settings (excluding ffmpegPath).
-func CurrentMediaSettings() MediaSettings {
+// CurrentMediaSettings returns the stored runtime media settings (excluding ffmpegPath).
+// Derived fields (ImagePreview, EnabledProfiles) are not populated; use CurrentFullAdminMedia
+// or CurrentUserMedia for response payloads.
+func CurrentMediaSettings() FullAdminMedia {
 	mediaMu.RLock()
 	defer mediaMu.RUnlock()
 	return currentMediaSettingsLocked()
@@ -218,24 +220,68 @@ func CurrentMediaSettings() MediaSettings {
 
 // currentMediaSettingsLocked snapshots the live media settings. Callers must hold
 // mediaMu. The returned value is deep-copied so it cannot alias the live config.
-func currentMediaSettingsLocked() MediaSettings {
+func currentMediaSettingsLocked() FullAdminMedia {
 	m := Config.Integrations.Media
-	return CloneMediaSettings(MediaSettings{
+	return CloneMediaSettings(FullAdminMedia{
 		Convert:              m.Convert,
 		Debug:                m.Debug,
 		HardwareAcceleration: m.HardwareAcceleration,
-		AccelDevice:              m.AccelDevice,
-		AlwaysUseFfmpeg:          m.AlwaysUseFfmpeg,
-		AlwaysUseOnlyOffice:      m.AlwaysUseOnlyOffice,
-		Transcode:                m.Transcode,
+		AccelDevice:          m.AccelDevice,
+		AlwaysUseFfmpeg:      m.AlwaysUseFfmpeg,
+		AlwaysUseOnlyOffice:  m.AlwaysUseOnlyOffice,
+		Transcode:            m.Transcode,
 	})
 }
 
+// ImagePreviewAvailability resolves each supported image preview type to whether
+// conversion is active right now, using the same check the preview pipeline uses.
+func ImagePreviewAvailability() map[ImagePreviewType]bool {
+	out := make(map[ImagePreviewType]bool, len(AllImagePreviewTypes))
+	for _, t := range AllImagePreviewTypes {
+		out[t] = CanConvertImage(string(t))
+	}
+	return out
+}
+
+// CurrentUserMedia builds the PUBLIC media payload for non-admin users. Values come
+// from the same accessors as the admin payload, so the shared fields always agree.
+// The getters take mediaMu themselves, so they are called here without holding it.
+func CurrentUserMedia() UserMedia {
+	return UserMedia{
+		Transcode: UserTranscode{
+			Enabled:              TranscodeEnabled(),
+			MaxConcurrentPerUser: TranscodeMaxConcurrentPerUser(),
+			EnabledProfiles:      EnabledTranscodeProfiles(),
+		},
+		ImagePreview: ImagePreviewAvailability(),
+	}
+}
+
+// PrepMediaForFrontend returns a read-only copy of m with derived values filled in,
+// following PrepForFrontend in internal/web/users.go. The caller's value is not modified.
+// Stored config (transcode.enabled, maxConcurrentPerUser) is deliberately NOT replaced
+// with effective values: the admin UI edits these fields and sends them back, so they
+// must stay the stored values. Only derived fields are filled.
+// NEVER pass the result to SaveSetting without ClearMediaDerived first.
+func PrepMediaForFrontend(m FullAdminMedia) FullAdminMedia {
+	m.Transcode.EnabledProfiles = EnabledTranscodeProfiles()
+	m.ImagePreview = ImagePreviewAvailability()
+	return m
+}
+
+// ClearMediaDerived zeroes the fields that PrepMediaForFrontend derives at read time so
+// they are never written to the database. Enabled and MaxConcurrentPerUser are stored
+// config and are not cleared here.
+func ClearMediaDerived(m *FullAdminMedia) {
+	m.Transcode.EnabledProfiles = nil
+	m.ImagePreview = nil
+}
+
 // ApplyMediaSettings applies runtime media settings to the in-memory config.
 // It never re-runs ffmpeg detection: codec/hardware detection happens exactly
 // once at startup (InitFFmpeg). hardwareAcceleration is read live per transcode;
 // ffmpegPath, accelDevice, debug and concurrency apply on the next restart.
-func ApplyMediaSettings(s MediaSettings) {
+func ApplyMediaSettings(s FullAdminMedia) {
 	mediaMu.Lock()
 	defer mediaMu.Unlock()
 	Config.Integrations.Media.Convert = s.Convert

backend/pkg/settings/media_runtime_test.go

@@ -25,16 +25,15 @@ func TestMediaAccessorsReflectRuntimeSettings(t *testing.T) {
 	originalTranscode := Config.Integrations.Media.Transcode
 	t.Cleanup(func() { Config.Integrations.Media.Transcode = originalTranscode })
 
-	ApplyMediaSettings(MediaSettings{
+	ApplyMediaSettings(FullAdminMedia{
 		Debug:                true,
 		HardwareAcceleration: true,
-		Transcode: MediaTranscode{
-			Enabled:              true,
-			MaxConcurrent:        4,
-			MaxConcurrentPerUser: 2,
-			CacheMaxSizeMB:       512,
-			CacheRetentionH:      6,
-			Profiles:             DefaultTranscodeProfiles(),
+		Transcode: FullAdminTranscode{
+			UserTranscode:   UserTranscode{Enabled: true, MaxConcurrentPerUser: 2},
+			MaxConcurrent:   4,
+			CacheMaxSizeMB:  512,
+			CacheRetentionH: 6,
+			Profiles:        DefaultTranscodeProfiles(),
 		},
 	})
 
@@ -67,7 +66,7 @@ func TestMediaAccessorsReflectRuntimeSettings(t *testing.T) {
 
 func TestTranscodeAccessorsUseDefaultsWhenUnset(t *testing.T) {
 	withMediaConfig(t)
-	ApplyMediaSettings(MediaSettings{})
+	ApplyMediaSettings(FullAdminMedia{})
 
 	if got := TranscodeMaxConcurrent(); got != 2 {
 		t.Fatalf("TranscodeMaxConcurrent = %d, want the 2 default", got)
@@ -225,11 +224,11 @@ func TestMediaAccessorsAreRaceFree(t *testing.T) {
 			default:
 			}
 			enabled = !enabled
-			ApplyMediaSettings(MediaSettings{
+			ApplyMediaSettings(FullAdminMedia{
 				Debug:                enabled,
 				HardwareAcceleration: enabled,
-				Transcode: MediaTranscode{
-					Enabled:       enabled,
+				Transcode: FullAdminTranscode{
+					UserTranscode: UserTranscode{Enabled: enabled},
 					MaxConcurrent: 2,
 					Profiles:      DefaultTranscodeProfiles(),
 				},

backend/pkg/settings/source_permission_enforcement_test.go

@@ -34,7 +34,7 @@ func TestSyncEnforcedSourcePermissionsOntoUser_skipsAdmin(t *testing.T) {
 	enforced := SourceFilePermissionsEnforcement{Create: true}
 	u := &users.User{
 		FrontendUser: users.FrontendUser{
-			Username: "admin",
+			Username:    "admin",
 			Permissions: users.Permissions{Admin: true},
 		},
 		BackendScopes: []users.BackendScope{{
@@ -90,4 +90,3 @@ func TestValidateSelfUserUpdateScopesNotEnforced_caseInsensitive(t *testing.T) {
 		t.Fatal("expected mixed-case scope field to be blocked")
 	}
 }
-

backend/pkg/settings/structs.go

@@ -175,43 +175,63 @@ type Media struct {
 	// The fields below are deprecated and migrated to runtime (DB-backed) media settings on
 	// first run. They are kept only to seed the database from an existing config.yaml.
 
-	Convert                  FfmpegConvert  `json:"convert"`                  // deprecated: config for ffmpeg conversion settings. deprecated: manage via the admin media settings API
-	Debug                    bool           `json:"debug"`                    // deprecated: output ffmpeg stdout for media integration. deprecated: manage via the admin media settings API
-	ExtractEmbeddedSubtitles bool `json:"extractEmbeddedSubtitles"` // deprecated: no longer configurable; embedded subtitles are always extracted
-	HardwareAcceleration     bool           `json:"hardwareAcceleration"`     // deprecated: enable hardware acceleration for ffmpeg if available. deprecated: manage via the admin media settings API
-	Transcode                MediaTranscode `json:"transcode"`                // deprecated: HLS transcoding for media playback. deprecated: manage via the admin media settings API
+	Convert                  FfmpegConvert      `json:"convert"`                  // deprecated: config for ffmpeg conversion settings. deprecated: manage via the admin media settings API
+	Debug                    bool               `json:"debug"`                    // deprecated: output ffmpeg stdout for media integration. deprecated: manage via the admin media settings API
+	ExtractEmbeddedSubtitles bool               `json:"extractEmbeddedSubtitles"` // deprecated: no longer configurable; embedded subtitles are always extracted
+	HardwareAcceleration     bool               `json:"hardwareAcceleration"`     // deprecated: enable hardware acceleration for ffmpeg if available. deprecated: manage via the admin media settings API
+	Transcode                FullAdminTranscode `json:"transcode"`                // deprecated: HLS transcoding for media playback. deprecated: manage via the admin media settings API
 
 	// AccelDevice selects the acceleration device: "auto" (default), "software"/"cpu",
 	// "igpu", "dgpu", a Linux DRM render node (e.g. /dev/dri/renderD128), or a GPU
 	// name substring. Managed via the admin media settings API.
-	AccelDevice     string `json:"accelDevice"`     // deprecated: manage via the admin media settings API
-	AlwaysUseFfmpeg bool   `json:"alwaysUseFfmpeg"` // deprecated: manage via the admin media settings API
-	AlwaysUseOnlyOffice bool `json:"alwaysUseOnlyOffice"` // deprecated: skip folio previews for office converter; manage via the admin media settings API
+	AccelDevice         string `json:"accelDevice"`         // deprecated: manage via the admin media settings API
+	AlwaysUseFfmpeg     bool   `json:"alwaysUseFfmpeg"`     // deprecated: manage via the admin media settings API
+	AlwaysUseOnlyOffice bool   `json:"alwaysUseOnlyOffice"` // deprecated: skip folio previews for office converter; manage via the admin media settings API
 }
 
-// MediaSettings holds the runtime (DB-backed) media integration settings.
-// FfmpegPath is config-only and intentionally excluded.
-type MediaSettings struct {
-	Convert              FfmpegConvert `json:"convert"`              // config for ffmpeg conversion settings
-	Debug                bool          `json:"debug"`                // output ffmpeg stdout for media integration -- careful can produces lots of output!
-	HardwareAcceleration bool          `json:"hardwareAcceleration"` // enable hardware acceleration for ffmpeg if available
-	AccelDevice          string        `json:"accelDevice"`          // acceleration device: "auto", "software"/"cpu", "igpu", "dgpu", a DRM render node, or a GPU name substring
-	AlwaysUseFfmpeg          bool           `json:"alwaysUseFfmpeg"`          // skip the go-media fast path and use ffmpeg for all probe, metadata, subtitle, and thumbnail work (default: false)
-	AlwaysUseOnlyOffice      bool           `json:"alwaysUseOnlyOffice"`      // skip folio document previews and use the office converter when configured (default: false)
-	Transcode                MediaTranscode `json:"transcode"`                // HLS transcoding for media playback
+// FullAdminMedia holds every runtime (DB-backed) media integration setting.
+// ADMIN ONLY: non-admins receive UserMedia instead. FfmpegPath is config-only and intentionally excluded.
+// ImagePreview is derived at read time (see PrepMediaForFrontend) and is cleared before save.
+type FullAdminMedia struct {
+	ImagePreview         map[ImagePreviewType]bool `json:"imagePreview,omitempty"` // image formats that can be converted
+	Convert              FfmpegConvert             `json:"convert"`                // config for ffmpeg conversion settings
+	Debug                bool                      `json:"debug"`                  // output ffmpeg stdout for media integration -- careful can produces lots of output!
+	HardwareAcceleration bool                      `json:"hardwareAcceleration"`   // enable hardware acceleration for ffmpeg if available
+	AccelDevice          string                    `json:"accelDevice"`            // acceleration device: "auto", "software"/"cpu", "igpu", "dgpu", a DRM render node, or a GPU name substring
+	AlwaysUseFfmpeg      bool                      `json:"alwaysUseFfmpeg"`        // skip the go-media fast path and use ffmpeg for all probe, metadata, subtitle, and thumbnail work (default: false)
+	AlwaysUseOnlyOffice  bool                      `json:"alwaysUseOnlyOffice"`    // skip folio document previews and use the office converter when configured (default: false)
+	Transcode            FullAdminTranscode        `json:"transcode"`              // HLS transcoding for media playback
 }
 
-// MediaTranscode configures authenticated HLS transcoding (disabled by default).
-type MediaTranscode struct {
-	Enabled              bool              `json:"enabled"`              // enable HLS transcoding for authenticated playback (default: false)
-	MaxConcurrent        int               `json:"maxConcurrent"`        // global concurrent transcode sessions (default: 2)
-	MaxConcurrentPerUser int               `json:"maxConcurrentPerUser"` // hard per-user concurrent transcode ceiling (default: 1)
-	CacheMaxSizeMB       int               `json:"cacheMaxSizeMB"`       // disk cache size limit in MB; 0 = unlimited (default: 10240)
-	CacheRetentionH      int               `json:"cacheRetentionH"`      // completed cache retention in hours (default: 24)
-	Profiles             TranscodeProfiles `json:"profiles"`             // per-profile transcode settings shown in the player menu
-	MaxResolution        int               `json:"maxResolution"`        // superseded by profiles.<name>.maxResolution. deprecated: kept for config compatibility
-	EncoderBackend       string            `json:"encoderBackend"`       // default video encoder backend for transcodes: "" (auto), "cpu", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)
-	ReadRate             float64           `json:"readRate"`             // VOD producer input pacing in Nx realtime (-readrate); unset or <1 clamps to >=1 (default: 2)
+// UserTranscode is PUBLIC: transcode fields every authenticated user receives in
+// the UserMedia payload. FullAdminTranscode embeds it, so the same JSON keys appear
+// in both admin and user responses. Add a field here only if the UI reads it.
+type UserTranscode struct {
+	Enabled              bool     `json:"enabled"`                   // enable HLS transcoding for authenticated playback (default: false)
+	MaxConcurrentPerUser int      `json:"maxConcurrentPerUser"`      // hard per-user concurrent transcode ceiling (default: 1)
+	EnabledProfiles      []string `json:"enabledProfiles,omitempty"` // derived at read time (player-menu profile ids); never stored
+}
+
+// UserMedia is PUBLIC: the only media payload non-admin users receive.
+// Add a top-level key here only if the player or general UI reads it.
+type UserMedia struct {
+	Transcode    UserTranscode             `json:"transcode"`
+	ImagePreview map[ImagePreviewType]bool `json:"imagePreview"` // availability, derived at read time
+}
+
+// FullAdminTranscode configures authenticated HLS transcoding (disabled by default).
+// ADMIN ONLY beyond the embedded UserTranscode fields.
+type FullAdminTranscode struct {
+	// inline: flattens the public fields in YAML (config.yaml) the same way the embed
+	// flattens them in JSON, so config keys stay transcode.enabled, not transcode.UserTranscode.enabled.
+	UserTranscode   `yaml:",inline"`
+	MaxConcurrent   int               `json:"maxConcurrent"`   // global concurrent transcode sessions (default: 2)
+	CacheMaxSizeMB  int               `json:"cacheMaxSizeMB"`  // disk cache size limit in MB; 0 = unlimited (default: 10240)
+	CacheRetentionH int               `json:"cacheRetentionH"` // completed cache retention in hours (default: 24)
+	Profiles        TranscodeProfiles `json:"profiles"`        // per-profile transcode settings shown in the player menu
+	MaxResolution   int               `json:"maxResolution"`   // superseded by profiles.<name>.maxResolution. deprecated: kept for config compatibility
+	EncoderBackend  string            `json:"encoderBackend"`  // default video encoder backend for transcodes: "" (auto), "cpu", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)
+	ReadRate        float64           `json:"readRate"`        // VOD producer input pacing in Nx realtime (-readrate); unset or <1 clamps to >=1 (default: 2)
 }
 
 // TranscodeProfiles configures the player's transcode quality presets.

backend/swagger/docs/docs.go

@@ -2886,7 +2886,7 @@ const docTemplate = `{
                     "200": {
                         "description": "Text preview content",
                         "schema": {
-                            "$ref": "#/definitions/textpreview.Result"
+                            "$ref": "#/definitions/preview.TextPreviewResult"
                         }
                     },
                     "400": {
@@ -5274,7 +5274,7 @@ const docTemplate = `{
                     "200": {
                         "description": "Text preview content",
                         "schema": {
-                            "$ref": "#/definitions/textpreview.Result"
+                            "$ref": "#/definitions/preview.TextPreviewResult"
                         }
                     },
                     "403": {
@@ -6011,6 +6011,31 @@ const docTemplate = `{
                 }
             }
         },
+        "preview.TextPreviewResult": {
+            "type": "object",
+            "properties": {
+                "content": {
+                    "description": "Content is plain text, or an HTML fragment when Format is \"html\".",
+                    "type": "string"
+                },
+                "format": {
+                    "description": "Format is \"text\" or \"html\". RTF is converted to HTML; everything else is text.",
+                    "type": "string"
+                },
+                "kind": {
+                    "description": "Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.",
+                    "type": "string"
+                },
+                "size": {
+                    "description": "Size is the full size of the file in bytes.",
+                    "type": "integer"
+                },
+                "truncated": {
+                    "description": "Truncated is true when the file is larger than the returned content.",
+                    "type": "boolean"
+                }
+            }
+        },
         "settings.ActivityConfig": {
             "type": "object",
             "properties": {
@@ -6274,6 +6299,58 @@ const docTemplate = `{
                 }
             }
         },
+        "settings.FullAdminTranscode": {
+            "type": "object",
+            "properties": {
+                "cacheMaxSizeMB": {
+                    "description": "disk cache size limit in MB; 0 = unlimited (default: 10240)",
+                    "type": "integer"
+                },
+                "cacheRetentionH": {
+                    "description": "completed cache retention in hours (default: 24)",
+                    "type": "integer"
+                },
+                "enabled": {
+                    "description": "enable HLS transcoding for authenticated playback (default: false)",
+                    "type": "boolean"
+                },
+                "enabledProfiles": {
+                    "description": "derived at read time (player-menu profile ids); never stored",
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
+                "encoderBackend": {
+                    "description": "default video encoder backend for transcodes: \"\" (auto), \"cpu\", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)",
+                    "type": "string"
+                },
+                "maxConcurrent": {
+                    "description": "global concurrent transcode sessions (default: 2)",
+                    "type": "integer"
+                },
+                "maxConcurrentPerUser": {
+                    "description": "hard per-user concurrent transcode ceiling (default: 1)",
+                    "type": "integer"
+                },
+                "maxResolution": {
+                    "description": "superseded by profiles.\u003cname\u003e.maxResolution. deprecated: kept for config compatibility",
+                    "type": "integer"
+                },
+                "profiles": {
+                    "description": "per-profile transcode settings shown in the player menu",
+                    "allOf": [
+                        {
+                            "$ref": "#/definitions/settings.TranscodeProfiles"
+                        }
+                    ]
+                },
+                "readRate": {
+                    "description": "VOD producer input pacing in Nx realtime (-readrate); unset or \u003c1 clamps to \u003e=1 (default: 2)",
+                    "type": "number"
+                }
+            }
+        },
         "settings.Http": {
             "type": "object",
             "properties": {
@@ -6615,57 +6692,12 @@ const docTemplate = `{
                     "description": "deprecated: HLS transcoding for media playback. deprecated: manage via the admin media settings API",
                     "allOf": [
                         {
-                            "$ref": "#/definitions/settings.MediaTranscode"
+                            "$ref": "#/definitions/settings.FullAdminTranscode"
                         }
                     ]
                 }
             }
         },
-        "settings.MediaTranscode": {
-            "type": "object",
-            "properties": {
-                "cacheMaxSizeMB": {
-                    "description": "disk cache size limit in MB; 0 = unlimited (default: 10240)",
-                    "type": "integer"
-                },
-                "cacheRetentionH": {
-                    "description": "completed cache retention in hours (default: 24)",
-                    "type": "integer"
-                },
-                "enabled": {
-                    "description": "enable HLS transcoding for authenticated playback (default: false)",
-                    "type": "boolean"
-                },
-                "encoderBackend": {
-                    "description": "default video encoder backend for transcodes: \"\" (auto), \"cpu\", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)",
-                    "type": "string"
-                },
-                "maxConcurrent": {
-                    "description": "global concurrent transcode sessions (default: 2)",
-                    "type": "integer"
-                },
-                "maxConcurrentPerUser": {
-                    "description": "hard per-user concurrent transcode ceiling (default: 1)",
-                    "type": "integer"
-                },
-                "maxResolution": {
-                    "description": "superseded by profiles.\u003cname\u003e.maxResolution. deprecated: kept for config compatibility",
-                    "type": "integer"
-                },
-                "profiles": {
-                    "description": "per-profile transcode settings shown in the player menu",
-                    "allOf": [
-                        {
-                            "$ref": "#/definitions/settings.TranscodeProfiles"
-                        }
-                    ]
-                },
-                "readRate": {
-                    "description": "VOD producer input pacing in Nx realtime (-readrate); unset or \u003c1 clamps to \u003e=1 (default: 2)",
-                    "type": "number"
-                }
-            }
-        },
         "settings.OidcConfig": {
             "type": "object",
             "properties": {
@@ -8065,31 +8097,6 @@ const docTemplate = `{
                 }
             }
         },
-        "textpreview.Result": {
-            "type": "object",
-            "properties": {
-                "content": {
-                    "description": "Content is plain text, or an HTML fragment when Format is \"html\".",
-                    "type": "string"
-                },
-                "format": {
-                    "description": "Format is \"text\" or \"html\". RTF is converted to HTML; everything else is text.",
-                    "type": "string"
-                },
-                "kind": {
-                    "description": "Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.",
-                    "type": "string"
-                },
-                "size": {
-                    "description": "Size is the full size of the file in bytes.",
-                    "type": "integer"
-                },
-                "truncated": {
-                    "description": "Truncated is true when the file is larger than the returned content.",
-                    "type": "boolean"
-                }
-            }
-        },
         "users.FileLoading": {
             "type": "object",
             "properties": {
@@ -8942,7 +8949,7 @@ const docTemplate = `{
             }
         },
         "web.mediaSettingsResponse": {
-            "description": "Admins receive the DB-backed media integration settings; every authenticated user receives the player-relevant subset (transcode enabled, profiles, per-user limit).",
+            "description": "Returns the media settings the caller is allowed to see. Admins get the full settings, including ffmpeg and hardware options, so they can edit them. Everyone else gets a small read-only view: whether transcoding is on, how many transcodes they can run at once, which quality presets are enabled, and which image previews the server can generate. Keys in the view are the same for admins and users.",
             "type": "object",
             "properties": {
                 "accelDevice": {
@@ -8985,6 +8992,13 @@ const docTemplate = `{
                     "description": "enable hardware acceleration for ffmpeg if available",
                     "type": "boolean"
                 },
+                "imagePreview": {
+                    "description": "image formats that can be converted",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "boolean"
+                    }
+                },
                 "lockMessage": {
                     "type": "string"
                 },
@@ -8998,7 +9012,7 @@ const docTemplate = `{
                     "description": "HLS transcoding for media playback",
                     "allOf": [
                         {
-                            "$ref": "#/definitions/settings.MediaTranscode"
+                            "$ref": "#/definitions/settings.FullAdminTranscode"
                         }
                     ]
                 }

backend/swagger/docs/swagger.json

@@ -2875,7 +2875,7 @@
                     "200": {
                         "description": "Text preview content",
                         "schema": {
-                            "$ref": "#/definitions/textpreview.Result"
+                            "$ref": "#/definitions/preview.TextPreviewResult"
                         }
                     },
                     "400": {
@@ -5263,7 +5263,7 @@
                     "200": {
                         "description": "Text preview content",
                         "schema": {
-                            "$ref": "#/definitions/textpreview.Result"
+                            "$ref": "#/definitions/preview.TextPreviewResult"
                         }
                     },
                     "403": {
@@ -6000,6 +6000,31 @@
                 }
             }
         },
+        "preview.TextPreviewResult": {
+            "type": "object",
+            "properties": {
+                "content": {
+                    "description": "Content is plain text, or an HTML fragment when Format is \"html\".",
+                    "type": "string"
+                },
+                "format": {
+                    "description": "Format is \"text\" or \"html\". RTF is converted to HTML; everything else is text.",
+                    "type": "string"
+                },
+                "kind": {
+                    "description": "Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.",
+                    "type": "string"
+                },
+                "size": {
+                    "description": "Size is the full size of the file in bytes.",
+                    "type": "integer"
+                },
+                "truncated": {
+                    "description": "Truncated is true when the file is larger than the returned content.",
+                    "type": "boolean"
+                }
+            }
+        },
         "settings.ActivityConfig": {
             "type": "object",
             "properties": {
@@ -6263,6 +6288,58 @@
                 }
             }
         },
+        "settings.FullAdminTranscode": {
+            "type": "object",
+            "properties": {
+                "cacheMaxSizeMB": {
+                    "description": "disk cache size limit in MB; 0 = unlimited (default: 10240)",
+                    "type": "integer"
+                },
+                "cacheRetentionH": {
+                    "description": "completed cache retention in hours (default: 24)",
+                    "type": "integer"
+                },
+                "enabled": {
+                    "description": "enable HLS transcoding for authenticated playback (default: false)",
+                    "type": "boolean"
+                },
+                "enabledProfiles": {
+                    "description": "derived at read time (player-menu profile ids); never stored",
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
+                "encoderBackend": {
+                    "description": "default video encoder backend for transcodes: \"\" (auto), \"cpu\", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)",
+                    "type": "string"
+                },
+                "maxConcurrent": {
+                    "description": "global concurrent transcode sessions (default: 2)",
+                    "type": "integer"
+                },
+                "maxConcurrentPerUser": {
+                    "description": "hard per-user concurrent transcode ceiling (default: 1)",
+                    "type": "integer"
+                },
+                "maxResolution": {
+                    "description": "superseded by profiles.\u003cname\u003e.maxResolution. deprecated: kept for config compatibility",
+                    "type": "integer"
+                },
+                "profiles": {
+                    "description": "per-profile transcode settings shown in the player menu",
+                    "allOf": [
+                        {
+                            "$ref": "#/definitions/settings.TranscodeProfiles"
+                        }
+                    ]
+                },
+                "readRate": {
+                    "description": "VOD producer input pacing in Nx realtime (-readrate); unset or \u003c1 clamps to \u003e=1 (default: 2)",
+                    "type": "number"
+                }
+            }
+        },
         "settings.Http": {
             "type": "object",
             "properties": {
@@ -6604,57 +6681,12 @@
                     "description": "deprecated: HLS transcoding for media playback. deprecated: manage via the admin media settings API",
                     "allOf": [
                         {
-                            "$ref": "#/definitions/settings.MediaTranscode"
+                            "$ref": "#/definitions/settings.FullAdminTranscode"
                         }
                     ]
                 }
             }
         },
-        "settings.MediaTranscode": {
-            "type": "object",
-            "properties": {
-                "cacheMaxSizeMB": {
-                    "description": "disk cache size limit in MB; 0 = unlimited (default: 10240)",
-                    "type": "integer"
-                },
-                "cacheRetentionH": {
-                    "description": "completed cache retention in hours (default: 24)",
-                    "type": "integer"
-                },
-                "enabled": {
-                    "description": "enable HLS transcoding for authenticated playback (default: false)",
-                    "type": "boolean"
-                },
-                "encoderBackend": {
-                    "description": "default video encoder backend for transcodes: \"\" (auto), \"cpu\", or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)",
-                    "type": "string"
-                },
-                "maxConcurrent": {
-                    "description": "global concurrent transcode sessions (default: 2)",
-                    "type": "integer"
-                },
-                "maxConcurrentPerUser": {
-                    "description": "hard per-user concurrent transcode ceiling (default: 1)",
-                    "type": "integer"
-                },
-                "maxResolution": {
-                    "description": "superseded by profiles.\u003cname\u003e.maxResolution. deprecated: kept for config compatibility",
-                    "type": "integer"
-                },
-                "profiles": {
-                    "description": "per-profile transcode settings shown in the player menu",
-                    "allOf": [
-                        {
-                            "$ref": "#/definitions/settings.TranscodeProfiles"
-                        }
-                    ]
-                },
-                "readRate": {
-                    "description": "VOD producer input pacing in Nx realtime (-readrate); unset or \u003c1 clamps to \u003e=1 (default: 2)",
-                    "type": "number"
-                }
-            }
-        },
         "settings.OidcConfig": {
             "type": "object",
             "properties": {
@@ -8054,31 +8086,6 @@
                 }
             }
         },
-        "textpreview.Result": {
-            "type": "object",
-            "properties": {
-                "content": {
-                    "description": "Content is plain text, or an HTML fragment when Format is \"html\".",
-                    "type": "string"
-                },
-                "format": {
-                    "description": "Format is \"text\" or \"html\". RTF is converted to HTML; everything else is text.",
-                    "type": "string"
-                },
-                "kind": {
-                    "description": "Kind is the renderer the frontend should use: plain, csv, markdown, html, css, code, or rtf.",
-                    "type": "string"
-                },
-                "size": {
-                    "description": "Size is the full size of the file in bytes.",
-                    "type": "integer"
-                },
-                "truncated": {
-                    "description": "Truncated is true when the file is larger than the returned content.",
-                    "type": "boolean"
-                }
-            }
-        },
         "users.FileLoading": {
             "type": "object",
             "properties": {
@@ -8931,7 +8938,7 @@
             }
         },
         "web.mediaSettingsResponse": {
-            "description": "Admins receive the DB-backed media integration settings; every authenticated user receives the player-relevant subset (transcode enabled, profiles, per-user limit).",
+            "description": "Returns the media settings the caller is allowed to see. Admins get the full settings, including ffmpeg and hardware options, so they can edit them. Everyone else gets a small read-only view: whether transcoding is on, how many transcodes they can run at once, which quality presets are enabled, and which image previews the server can generate. Keys in the view are the same for admins and users.",
             "type": "object",
             "properties": {
                 "accelDevice": {
@@ -8974,6 +8981,13 @@
                     "description": "enable hardware acceleration for ffmpeg if available",
                     "type": "boolean"
                 },
+                "imagePreview": {
+                    "description": "image formats that can be converted",
+                    "type": "object",
+                    "additionalProperties": {
+                        "type": "boolean"
+                    }
+                },
                 "lockMessage": {
                     "type": "string"
                 },
@@ -8987,7 +9001,7 @@
                     "description": "HLS transcoding for media playback",
                     "allOf": [
                         {
-                            "$ref": "#/definitions/settings.MediaTranscode"
+                            "$ref": "#/definitions/settings.FullAdminTranscode"
                         }
                     ]
                 }

backend/swagger/docs/swagger.yaml

@@ -260,6 +260,26 @@ definitions:
         description: release year
         type: integer
     type: object
+  preview.TextPreviewResult:
+    properties:
+      content:
+        description: Content is plain text, or an HTML fragment when Format is "html".
+        type: string
+      format:
+        description: Format is "text" or "html". RTF is converted to HTML; everything
+          else is text.
+        type: string
+      kind:
+        description: 'Kind is the renderer the frontend should use: plain, csv, markdown,
+          html, css, code, or rtf.'
+        type: string
+      size:
+        description: Size is the full size of the file in bytes.
+        type: integer
+      truncated:
+        description: Truncated is true when the file is larger than the returned content.
+        type: boolean
+    type: object
   settings.ActivityConfig:
     properties:
       disabled:
@@ -460,6 +480,46 @@ definitions:
       styling:
         $ref: '#/definitions/settings.StylingConfig'
     type: object
+  settings.FullAdminTranscode:
+    properties:
+      cacheMaxSizeMB:
+        description: 'disk cache size limit in MB; 0 = unlimited (default: 10240)'
+        type: integer
+      cacheRetentionH:
+        description: 'completed cache retention in hours (default: 24)'
+        type: integer
+      enabled:
+        description: 'enable HLS transcoding for authenticated playback (default:
+          false)'
+        type: boolean
+      enabledProfiles:
+        description: derived at read time (player-menu profile ids); never stored
+        items:
+          type: string
+        type: array
+      encoderBackend:
+        description: 'default video encoder backend for transcodes: "" (auto), "cpu",
+          or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)'
+        type: string
+      maxConcurrent:
+        description: 'global concurrent transcode sessions (default: 2)'
+        type: integer
+      maxConcurrentPerUser:
+        description: 'hard per-user concurrent transcode ceiling (default: 1)'
+        type: integer
+      maxResolution:
+        description: 'superseded by profiles.<name>.maxResolution. deprecated: kept
+          for config compatibility'
+        type: integer
+      profiles:
+        allOf:
+        - $ref: '#/definitions/settings.TranscodeProfiles'
+        description: per-profile transcode settings shown in the player menu
+      readRate:
+        description: 'VOD producer input pacing in Nx realtime (-readrate); unset
+          or <1 clamps to >=1 (default: 2)'
+        type: number
+    type: object
   settings.Http:
     properties:
       baseURL:
@@ -744,45 +804,10 @@ definitions:
         type: boolean
       transcode:
         allOf:
-        - $ref: '#/definitions/settings.MediaTranscode'
+        - $ref: '#/definitions/settings.FullAdminTranscode'
         description: 'deprecated: HLS transcoding for media playback. deprecated:
           manage via the admin media settings API'
     type: object
-  settings.MediaTranscode:
-    properties:
-      cacheMaxSizeMB:
-        description: 'disk cache size limit in MB; 0 = unlimited (default: 10240)'
-        type: integer
-      cacheRetentionH:
-        description: 'completed cache retention in hours (default: 24)'
-        type: integer
-      enabled:
-        description: 'enable HLS transcoding for authenticated playback (default:
-          false)'
-        type: boolean
-      encoderBackend:
-        description: 'default video encoder backend for transcodes: "" (auto), "cpu",
-          or an accel backend (nvenc, amf, qsv, vaapi, d3d12, videotoolbox)'
-        type: string
-      maxConcurrent:
-        description: 'global concurrent transcode sessions (default: 2)'
-        type: integer
-      maxConcurrentPerUser:
-        description: 'hard per-user concurrent transcode ceiling (default: 1)'
-        type: integer
-      maxResolution:
-        description: 'superseded by profiles.<name>.maxResolution. deprecated: kept
-          for config compatibility'
-        type: integer
-      profiles:
-        allOf:
-        - $ref: '#/definitions/settings.TranscodeProfiles'
-        description: per-profile transcode settings shown in the player menu
-      readRate:
-        description: 'VOD producer input pacing in Nx realtime (-readrate); unset
-          or <1 clamps to >=1 (default: 2)'
-        type: number
-    type: object
   settings.OidcConfig:
     properties:
       adminGroup:
@@ -1786,26 +1811,6 @@ definitions:
         description: default view mode for anonymous users
         type: string
     type: object
-  textpreview.Result:
-    properties:
-      content:
-        description: Content is plain text, or an HTML fragment when Format is "html".
-        type: string
-      format:
-        description: Format is "text" or "html". RTF is converted to HTML; everything
-          else is text.
-        type: string
-      kind:
-        description: 'Kind is the renderer the frontend should use: plain, csv, markdown,
-          html, css, code, or rtf.'
-        type: string
-      size:
-        description: Size is the full size of the file in bytes.
-        type: integer
-      truncated:
-        description: Truncated is true when the file is larger than the returned content.
-        type: boolean
-    type: object
   users.FileLoading:
     properties:
       clearAll:
@@ -2411,9 +2416,12 @@ definitions:
         description: File metadata for non-text files
     type: object
   web.mediaSettingsResponse:
-    description: Admins receive the DB-backed media integration settings; every authenticated
-      user receives the player-relevant subset (transcode enabled, profiles, per-user
-      limit).
+    description: 'Returns the media settings the caller is allowed to see. Admins
+      get the full settings, including ffmpeg and hardware options, so they can edit
+      them. Everyone else gets a small read-only view: whether transcoding is on,
+      how many transcodes they can run at once, which quality presets are enabled,
+      and which image previews the server can generate. Keys in the view are the same
+      for admins and users.'
     properties:
       accelDevice:
         description: 'acceleration device: "auto", "software"/"cpu", "igpu", "dgpu",
@@ -2446,6 +2454,11 @@ definitions:
       hardwareAcceleration:
         description: enable hardware acceleration for ffmpeg if available
         type: boolean
+      imagePreview:
+        additionalProperties:
+          type: boolean
+        description: image formats that can be converted
+        type: object
       lockMessage:
         type: string
       lockedFromConfigPaths:
@@ -2454,7 +2467,7 @@ definitions:
         type: array
       transcode:
         allOf:
-        - $ref: '#/definitions/settings.MediaTranscode'
+        - $ref: '#/definitions/settings.FullAdminTranscode'
         description: HLS transcoding for media playback
     type: object
   web.pinnedItemPatchRequest:
@@ -4514,7 +4527,7 @@ paths:
         "200":
           description: Text preview content
           schema:
-            $ref: '#/definitions/textpreview.Result'
+            $ref: '#/definitions/preview.TextPreviewResult'
         "400":
           description: Invalid request path
           schema:
@@ -6181,7 +6194,7 @@ paths:
         "200":
           description: Text preview content
           schema:
-            $ref: '#/definitions/textpreview.Result'
+            $ref: '#/definitions/preview.TextPreviewResult'
         "403":
           description: Share unavailable, access denied, or the file viewer is disabled
             for this share

frontend/public/css/loadingSpinners.css

@@ -31,7 +31,9 @@
     inset: 0;
     display: block;
     direction: ltr;
-    background-color: var(--spinner-color, var(--primaryColor));
+    /* The concrete fallback keeps the spinner visible before the app stylesheet loads,
+       when neither --spinner-color nor --primaryColor is defined (initial index.html shell). */
+    background-color: var(--spinner-color, var(--primaryColor, #2196f3));
     /* Mirrored annulus-sector polygon, 120° sweep, viewBox 0 0 100 100 */
     --fb-loader-taper-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M57.47%2C7.65%20L54.99%2C7.29%20L52.50%2C7.07%20L50.00%2C7.00%20L47.50%2C7.07%20L45.01%2C7.29%20L42.53%2C7.65%20L40.08%2C8.16%20L37.67%2C8.81%20L35.29%2C9.59%20L32.97%2C10.52%20L30.70%2C11.57%20L28.50%2C12.76%20L26.37%2C14.07%20L24.32%2C15.51%20L22.36%2C17.06%20L20.49%2C18.72%20L18.72%2C20.49%20L17.06%2C22.36%20L15.51%2C24.32%20L14.07%2C26.37%20L12.76%2C28.50%20L11.57%2C30.70%20L10.52%2C32.97%20L9.59%2C35.29%20L8.81%2C37.67%20L8.16%2C40.08%20L7.65%2C42.53%20L7.29%2C45.01%20L7.07%2C47.50%20L7.00%2C50.00%20L7.07%2C52.50%20L7.29%2C54.99%20L7.65%2C57.47%20L8.16%2C59.92%20L8.81%2C62.33%20L9.59%2C64.71%20L10.16%2C64.50%20L9.56%2C62.11%20L9.12%2C59.69%20L8.81%2C57.26%20L8.65%2C54.83%20L8.63%2C52.41%20L8.75%2C50.00%20L9.01%2C47.61%20L9.41%2C45.26%20L9.94%2C42.94%20L10.61%2C40.66%20L11.40%2C38.44%20L12.32%2C36.28%20L13.36%2C34.19%20L14.51%2C32.18%20L15.77%2C30.24%20L17.14%2C28.39%20L18.60%2C26.63%20L20.16%2C24.96%20L21.81%2C23.40%20L23.53%2C21.95%20L25.33%2C20.60%20L27.20%2C19.37%20L29.12%2C18.26%20L31.10%2C17.26%20L33.12%2C16.39%20L35.18%2C15.64%20L37.27%2C15.02%20L39.38%2C14.52%20L41.50%2C14.15%20L43.64%2C13.91%20L45.77%2C13.79%20L47.89%2C13.79%20L50.00%2C13.92%20L52.09%2C14.18%20L54.14%2C14.55%20L56.16%2C15.04Z%22%2F%3E%3C%2Fsvg%3E");
 
@@ -143,7 +145,7 @@ body > .loader.done {
 
 .loader--pulse {
     border: none;
-    background: var(--spinner-color, var(--primaryColor));
+    background: var(--spinner-color, var(--primaryColor, #2196f3));
     animation: fb-pulse-scale var(--animation-duration, 0.75s) ease infinite;
 }
 
@@ -178,7 +180,9 @@ body > .loader.done {
     content: "";
     width: 0.6em;
     height: 0.6em;
-    background-color: var(--spinner-color, var(--primaryColor));
+    /* The concrete fallback keeps the spinner visible before the app stylesheet loads,
+       when neither --spinner-color nor --primaryColor is defined (initial index.html shell). */
+    background-color: var(--spinner-color, var(--primaryColor, #2196f3));
     border-radius: 50%;
     display: inline-block;
     animation: fb-bounce-scale var(--animation-duration, 0.75s) infinite ease-in-out both;
@@ -195,7 +199,9 @@ body > .loader.done {
 .loader--bounce .bounce-dot {
     width: 0.6em;
     height: 0.6em;
-    background-color: var(--spinner-color, var(--primaryColor));
+    /* The concrete fallback keeps the spinner visible before the app stylesheet loads,
+       when neither --spinner-color nor --primaryColor is defined (initial index.html shell). */
+    background-color: var(--spinner-color, var(--primaryColor, #2196f3));
     border-radius: 50%;
     display: inline-block;
     animation: fb-bounce-scale var(--animation-duration, 0.75s) infinite ease-in-out both;
@@ -355,3 +361,20 @@ body > .loader.done {
         min-width: auto;
     }
 }
+
+/* -------------------------------------------------------------------------- */
+/* Reduced motion                                                             */
+/* -------------------------------------------------------------------------- */
+
+/* Honor the OS "reduce motion" preference: stop the rotation, pulse, bounce,
+   and placeholder shimmer. The spinner stays visible as a static shape. */
+@media (prefers-reduced-motion: reduce) {
+    .loader__comet,
+    .loader--pulse,
+    .loader--bounce::before,
+    .loader--bounce::after,
+    .loader--bounce .bounce-dot,
+    .placeholder-item {
+        animation: none;
+    }
+}

frontend/public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
-  <title>"{{ .htmlVars.title }}"</title>
+  <title>{{ .htmlVars.title }}</title>
 
   <link rel="icon" type="image/png" sizes="256x256" href="{{ .htmlVars.favicon }}">
   <link rel="stylesheet" href="{{ .htmlVars.staticURL }}/css/variables.css">
@@ -82,7 +82,9 @@
 
 <body>
   <div id="app"></div>
-  <span class="loader loader--medium" aria-busy="true"><span class="loader__comet" aria-hidden="true"></span></span>
+  <span class="loader loader--medium" role="status" aria-live="polite" aria-label="Loading">
+    <span class="loader__comet" aria-hidden="true"></span>
+  </span>
 
   <script type="module" src="/src/main.ts"></script>
 

frontend/src/api/resources.js

@@ -1207,6 +1207,28 @@ export function getPreviewURL(source, path, modified) {
   }
 }
 
+/**
+ * Build a text preview API URL. Use fetchTextPreview(url, modified) to load it.
+ * Separate from getPreviewURL: the text endpoint returns JSON, not an image.
+ */
+export function getTextPreviewURL(source, path) {
+  if (!source || source === undefined || source === null) {
+    throw new Error('no source provided')
+  }
+  try {
+    const params = {
+      path: path,
+      source: source,
+      inline: 'true'
+    }
+    const apiPath = getApiPath('resources/preview/text', params)
+    return window.origin + apiPath
+  } catch (err) {
+    notify.showError(err.message || 'Error getting text preview URL')
+    throw err
+  }
+}
+
 // POST /api/resources/archive - Create an archive
 export async function createArchive(opts) {
   const { fromSource, toSource, paths, destination, format, compression, deleteAfter } = opts;
@@ -1359,6 +1381,28 @@ export function getPreviewURLPublic(path, size, viewToken = state.req?.viewToken
   }
 }
 
+// Generate a text preview URL for public shares
+/**
+ * @param {string} path
+ * @param {string} [viewToken]
+ * @returns {string}
+ */
+export function getTextPreviewURLPublic(path, viewToken = state.req?.viewToken) {
+  try {
+    const params = {
+      path: path,
+      hash: state.shareInfo.hash,
+      inline: 'true',
+      ...(viewToken && { viewToken }),
+    }
+    const apiPath = getPublicApiPath('resources/preview/text', params)
+    return window.origin + apiPath
+  } catch (/** @type {any} */ err) {
+    notify.showError(err.message || 'Error getting text preview URL')
+    throw err
+  }
+}
+
 /**
  * Uploads a file, one chunk of it, or creates a folder.
  * @param {string | undefined} hash

frontend/src/api/settings.js

@@ -1,6 +1,6 @@
 import { notify } from "@/notify/index.ts";
 import { getApiPath, getPublicApiPath } from "@/utils/url.js";
-import { normalizeMediaPlayerSettings } from "@/utils/mediaSettings.js";
+import { normalizeSharedMediaSettings } from "@/utils/mediaSettings.js";
 import { fetchJSON, fetchURL, requestTimeoutSignal } from "./utils.ts";
 
 const analyticsRequestTimeoutMs = 5000;
@@ -124,13 +124,14 @@ export function getMediaSettings() {
 }
 
 /**
- * Effective media settings for playback. Every authenticated user may read this;
- * admins receive the full settings object and everyone else the player subset.
- * @returns {Promise<{ enabled: boolean, profiles: string[], maxConcurrentPerUser: number, hardwareAcceleration: boolean }>}
+ * Shared runtime media state (player + general UI), normalized to a flat shape.
+ * Non-admins receive the PUBLIC UserMedia payload; admins get the full payload on the
+ * same endpoint, which carries the same transcode and imagePreview keys.
+ * @returns {Promise<{ enabled: boolean, profiles: string[], maxConcurrentPerUser: number, imagePreview: object }>}
  */
-export async function getMediaPlayerSettings() {
+export async function getSharedMediaSettings() {
   const data = await fetchJSON(getApiPath("settings/media"));
-  return normalizeMediaPlayerSettings(data);
+  return normalizeSharedMediaSettings(data);
 }
 
 export async function patchMediaSettings(partial) {

frontend/src/components/files/ExtendedImage.vue

@@ -132,7 +132,7 @@ export default {
       }
       // Don't use thumbnail when we show original embedded preview (HEIC/HEIF or raw)
       const isHeicOrHeif = state.req?.type === "image/heic" || state.req?.type === "image/heif";
-      const useOriginalForHeic = isHeicOrHeif && (state.isSafari || (globalVars.ffmpegAvailable && globalVars.enableHeicConversion));
+      const useOriginalForHeic = isHeicOrHeif && (state.isSafari || state.mediaSettings?.imagePreview?.heic === true);
       const useOriginalForRaw = isRawImageMimeType(state.req?.type);
       if (useOriginalForHeic || useOriginalForRaw) {
         return null;

frontend/src/components/files/Icon.textPreview.test.ts

@@ -0,0 +1,154 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+const { mockState, mockGetters, setPopupPreview } = vi.hoisted(() => ({
+  mockState: {
+    sessionId: "test-session",
+    user: {},
+    shareInfo: null,
+    req: { source: "main", path: "/", modified: "" },
+    popupPreviewSourceInfo: null,
+  },
+  mockGetters: {
+    sourcePermissions: () => ({ view: true }),
+    previewPerms: () => ({ office: true, popup: true, image: true, video: true, audio: true, models: true, folder: true }),
+    isShare: () => false,
+    viewMode: () => "gallery",
+    isDarkMode: () => false,
+  },
+  setPopupPreview: vi.fn(),
+}));
+
+vi.mock("@/store", () => ({
+  state: mockState,
+  getters: mockGetters,
+  mutations: { setPopupPreview, setPreviewSource: vi.fn() },
+}));
+
+// The real TextPreview is async and pulls in highlight.js; a stub is enough to detect mounting.
+vi.mock("@/utils/asyncComponent.js", () => ({
+  createAsyncComponent: () => ({
+    name: "TextPreviewStub",
+    render: () => h("div", { class: "text-preview" }),
+  }),
+}));
+
+import Icon from "./Icon.vue";
+
+type ResizeCb = (entries: ResizeObserverEntry[]) => void;
+let resizeCallback: ResizeCb | null = null;
+
+interface IconProps {
+  filename?: string;
+  mimetype?: string;
+  hasPreview?: boolean;
+  path?: string;
+  source?: string;
+  textPreviewUrl?: string;
+}
+
+function mountIcon(props: IconProps = {}) {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const app = createApp({
+    render: () =>
+      h(Icon, {
+        filename: "notes.md",
+        mimetype: "text/markdown",
+        hasPreview: true,
+        path: "/notes.md",
+        source: "main",
+        textPreviewUrl: "/api/resources/preview/text?path=%2Fnotes.md",
+        ...props,
+      }),
+  });
+  app.mount(el);
+  return { el, app };
+}
+
+describe("Icon text preview width gate", () => {
+  beforeEach(() => {
+    setPopupPreview.mockClear();
+    resizeCallback = null;
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        constructor(cb: ResizeCb) {
+          resizeCallback = cb;
+        }
+        observe() {}
+        disconnect() {}
+      },
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("shows the type icon plus a preview-available badge on a small tile", async () => {
+    const { el, app } = mountIcon();
+    await nextTick();
+
+    expect(el.querySelector(".text-preview")).toBeNull();
+    const hint = el.querySelector(".overlay-icon--preview-hint");
+    expect(hint).not.toBeNull();
+    expect(hint?.textContent).toContain("saved_search");
+    app.unmount();
+  });
+
+  it("hides the badge when popup previews are disabled", async () => {
+    const original = mockGetters.previewPerms;
+    mockGetters.previewPerms = () => ({
+      office: true,
+      popup: false,
+      image: true,
+      video: true,
+      audio: true,
+      models: true,
+      folder: true,
+    });
+    try {
+      const { el, app } = mountIcon();
+      await nextTick();
+      expect(el.querySelector(".overlay-icon--preview-hint")).toBeNull();
+      app.unmount();
+    } finally {
+      mockGetters.previewPerms = original;
+    }
+  });
+
+  it("keeps the hover popup preview working on a small tile", async () => {
+    vi.useFakeTimers();
+    const { el, app } = mountIcon();
+    await nextTick();
+
+    el.querySelector(".image-preview")?.dispatchEvent(new MouseEvent("mouseenter"));
+    vi.advanceTimersByTime(300);
+
+    expect(setPopupPreview).toHaveBeenCalledTimes(1);
+    expect(setPopupPreview.mock.calls[0]?.[0]).toMatchObject({
+      type: "text",
+      path: "/notes.md",
+      textUrl: "/api/resources/preview/text?path=%2Fnotes.md",
+    });
+    vi.useRealTimers();
+    app.unmount();
+  });
+
+  it("mounts TextPreview once the tile is wide enough", async () => {
+    const { el, app } = mountIcon();
+    await nextTick();
+    expect(el.querySelector(".text-preview")).toBeNull();
+
+    // Simulate the ResizeObserver reporting a gallery-sized tile.
+    resizeCallback?.([{ contentRect: { width: 400 } } as ResizeObserverEntry]);
+    await nextTick();
+    await nextTick();
+
+    expect(el.querySelector(".text-preview")).not.toBeNull();
+    expect(el.querySelector(".overlay-icon--preview-hint")).toBeNull();
+    app.unmount();
+  });
+});

frontend/src/components/files/Icon.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Unified preview container for all types -->
-  <span v-if="hasPreviewImage || (shouldUse3DPreview && !threeJsError) || shouldUseTextPreview" class="image-preview" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+  <span v-if="hasPreviewImage || (shouldUse3DPreview && !threeJsError) || shouldUseTextPreview" ref="tileEl" class="image-preview" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
     <!-- Overlay icons (folder/animation) positioned top-left -->
     <i v-if="hasPreviewImage && hasMotion && isFile" class="material-symbols-outlined overlay-icon">animation</i>
     <i v-else-if="hasPreviewImage && !isFile" class="material-symbols overlay-icon">folder</i>
@@ -21,18 +21,26 @@
       @error="handle3DError" />
     <TextPreview v-else-if="shouldUseTextPreview"
       :url="textPreviewUrl"
+      :language="textPreviewLanguage"
       :modified="modified"
       @error="handleTextPreviewError" />
   </span>
   <!-- Regular material icon (no preview) -->
-  <span v-else class="image-preview">
+  <span v-else ref="tileEl" class="image-preview" @mouseenter="hasTextPreview && handleMouseEnter()" @mouseleave="hasTextPreview && handleMouseLeave()">
     <i :class="[classes, { active: active, clickable: clickable }]"> {{ materialSymbol }} </i>
     <i v-if="isShared" class="material-symbols overlay-icon">group</i>
+    <!-- Text file with a popup preview, but the tile is too small to render it inline -->
+    <i
+      v-if="textPreviewHintVisible"
+      class="material-symbols overlay-icon overlay-icon--preview-hint"
+      :class="{ 'overlay-icon--preview-hint-shared': isShared }"
+      aria-hidden="true"
+    >saved_search</i>
   </span>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, unref, watch, type Ref } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, unref, watch, type Ref } from "vue";
 import { fetchPreviewImage } from "@/api/resources";
 import { createAsyncComponent } from "@/utils/asyncComponent.js";
 import { getTypeInfo } from "@/utils/mimetype";
@@ -45,8 +53,7 @@ import {
   storeThumbnailBlob,
 } from "@/utils/cache/imageCache.ts";
 import { queuedFetchPreview } from "@/utils/previewRequests.ts";
-import { textPreviewUrlFor } from "@/utils/textPreview.ts";
-import { globalVars } from "@/utils/constants";
+import { isTextPreviewableType, languageFromPath, MIN_TEXT_PREVIEW_WIDTH_PX } from "@/utils/textPreview.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -64,6 +71,8 @@ const props = withDefaults(
     isDir?: boolean;
     viewToken?: string;
     inView?: boolean;
+    /** Text preview API URL from getTextPreviewURL / getTextPreviewURLPublic. */
+    textPreviewUrl?: string;
   }>(),
   {
     hasPreview: false,
@@ -78,6 +87,7 @@ const props = withDefaults(
     isDir: false,
     viewToken: "",
     inView: true,
+    textPreviewUrl: "",
   },
 );
 
@@ -214,29 +224,57 @@ const shouldUse3DPreview = computed(() => {
   return typeInfo.value.simpleType === "3d-model";
 });
 
-/** Every extension the text preview endpoint supports, from the backend's kind map. */
-const textPreviewExtSet = computed(() => {
-  const groups = (globalVars.textPreviewExtensions ?? {}) as Record<string, string[]>;
-  return new Set(Object.values(groups).flat());
-});
+/** True when the filename has an extension the text preview endpoint supports. */
+const isTextPreviewable = computed(
+  () => props.mimetype !== "directory" && isTextPreviewableType(props.mimetype),
+);
 
-const isTextPreviewable = computed(() => {
-  if (props.mimetype === "directory" || !props.filename) return false;
-  const dot = props.filename.lastIndexOf(".");
-  if (dot <= 0) return false;
-  return textPreviewExtSet.value.has(props.filename.slice(dot + 1).toLowerCase());
-});
+/** Extension used for syntax highlighting and the CSV/TSV delimiter. */
+const textPreviewLanguage = computed(() => languageFromPath(props.filename));
 
-const textPreviewUrl = computed(() => (props.thumbnailUrl ? textPreviewUrlFor(props.thumbnailUrl) : ""));
+// Measured tile width; only observed for text-previewable files so image tiles pay nothing.
+const tileWidth = ref(0);
+const tileEl = ref<HTMLElement | null>(null);
+let tileResizeObserver: ResizeObserver | null = null;
 
-const shouldUseTextPreview = computed(() => {
+function observeTileWidth(el: HTMLElement | null): void {
+  tileResizeObserver?.disconnect();
+  tileResizeObserver = null;
+  if (!el || !isTextPreviewable.value || typeof ResizeObserver === "undefined") {
+    return;
+  }
+  // ResizeObserver fires once on observe, so no manual initial measurement is needed.
+  tileResizeObserver = new ResizeObserver((entries) => {
+    tileWidth.value = entries[0]?.contentRect.width ?? 0;
+  });
+  tileResizeObserver.observe(el);
+}
+
+// The tile element switches between the icon span and the preview span, so re-observe it.
+watch(tileEl, observeTileWidth, { flush: "post" });
+
+/** True when the tile is wide enough to render readable text instead of an icon. */
+const tileWideEnough = computed(() => tileWidth.value >= MIN_TEXT_PREVIEW_WIDTH_PX);
+
+/**
+ * True when this item has a text preview to show (inline or via the hover popup).
+ * Kept separate from shouldUseTextPreview so the popup still works on small tiles.
+ */
+const hasTextPreview = computed(() => {
   if (!canViewSource.value || !isTextPreviewable.value || !props.hasPreview || !everInView.value) return false;
-  if (textPreviewError.value || props.thumbnailUrl === "") return false;
+  if (textPreviewError.value || props.textPreviewUrl === "") return false;
   if (state.shareInfo?.disableThumbnails || previewExtDisabled.value) return false;
   // Same permission as other document-style previews (txt/md/html were already gated by office).
   return getters.previewPerms().office;
 });
 
+const shouldUseTextPreview = computed(() => hasTextPreview.value && tileWideEnough.value);
+
+/** Show the popup-preview badge on tiles too small for the inline text preview. */
+const textPreviewHintVisible = computed(
+  () => hasTextPreview.value && !shouldUseTextPreview.value && !hasPreviewImage.value && getters.previewPerms().popup,
+);
+
 function handleTextPreviewError(): void {
   textPreviewError.value = true;
 }
@@ -391,13 +429,14 @@ function showPopupPreview(): void {
   const source = (getters.isShare() ? state.shareInfo?.hash : props.source || state.req?.source) ?? "";
   const modified = props.modified || state.req?.modified;
 
-  // Text-like file: popup shows the same text preview tile at a larger fixed size
-  if (shouldUseTextPreview.value) {
+  // Text-like file: popup shows the same text preview tile at a larger fixed size.
+  // Uses hasTextPreview, not shouldUseTextPreview, so small tiles still get a popup.
+  if (hasTextPreview.value) {
     mutations.setPopupPreview({
       type: "text",
       source,
       path,
-      textUrl: textPreviewUrl.value,
+      textUrl: props.textPreviewUrl,
       modified,
     });
     return;
@@ -526,7 +565,14 @@ watch(
   { immediate: true }, // Run on component mount
 );
 
+onMounted(() => {
+  // Only text previews need the measured width, so image tiles never create an observer.
+  observeTileWidth(tileEl.value);
+});
+
 onBeforeUnmount(() => {
+  tileResizeObserver?.disconnect();
+  tileResizeObserver = null;
   cancelActivePreviews();
   if (props.path && state.popupPreviewSourceInfo?.path === props.path) {
     mutations.setPopupPreview(null);
@@ -563,6 +609,19 @@ onBeforeUnmount(() => {
   line-height: 1;
 }
 
+/* "Preview available in popup" badge on tiles too small to render the text itself.
+   Top-left, matching the other overlay icons; offset when the shared badge shares that corner. */
+.overlay-icon--preview-hint {
+  inset: 0.2em auto auto 0.2em;
+  width: auto !important;
+  height: auto !important;
+  pointer-events: none;
+}
+
+.overlay-icon--preview-hint-shared {
+  inset: 0.2em auto auto 2.2em;
+}
+
 .overlay-icon--bottom.clickable:hover {
   transform: none;
   box-shadow: none !important;

frontend/src/components/files/ListingItem.vue

@@ -45,6 +45,7 @@
         :size="size"
         :isShared="isShared"
         :viewToken="viewToken"
+        :textPreviewUrl="textPreviewUrl"
       />
       <button
         v-if="quickDownloadEnabled && galleryView"
@@ -97,6 +98,7 @@ import { globalVars } from "@/utils/constants";
 import downloadFiles from "@/utils/download";
 import { getHumanReadableFilesize } from "@/utils/filesizes";
 import { getKindKey } from "@/utils/mimetype";
+import { isTextPreviewableType } from "@/utils/textPreview";
 import { hasCachedThumbnailBlob } from "@/utils/cache/imageCache.ts";
 import { formatDuration } from "@/utils/files.js";
 import { getObjectProperty } from '@/utils/object.js';
@@ -373,6 +375,35 @@ export default {
       }
       return resourcesApi.getPreviewURL(this.source || state.req?.source, previewPath, this.modified);
     },
+    textPreviewUrl() {
+      // The text preview endpoint is JSON, not an image, so it needs its own URL.
+      // Reuse the same path resolution as thumbnailUrl so duplicates/FileTree work.
+      if (!globalVars.enableThumbs) {
+        return "";
+      }
+      // Only text-previewable names have a preview; other items must never build a URL
+      // (a DuplicateFinder row can pass a text-like name with no source).
+      if (!isTextPreviewableType(this.type)) {
+        return "";
+      }
+      let previewPath;
+      if (this.path) {
+        previewPath = this.path;
+      } else if (state.req?.path && this.name) {
+        previewPath = url.joinPath(state.req.path, this.name);
+      } else {
+        return "";
+      }
+      // getTextPreviewURL throws without a source; return "" so the icon falls back.
+      const source = this.source || state.req?.source;
+      if (this.forceFilesApi) {
+        return source ? resourcesApi.getTextPreviewURL(source, previewPath) : "";
+      }
+      if (getters.isShare()) {
+        return resourcesApi.getTextPreviewURLPublic(previewPath);
+      }
+      return source ? resourcesApi.getTextPreviewURL(source, previewPath) : "";
+    },
     isClickable() {
       return this.clickable;
     },

frontend/src/components/files/TextPreview.test.ts

@@ -0,0 +1,96 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+vi.mock("@/store", () => ({
+  getters: { isDarkMode: () => false },
+  state: { sessionId: "test-session" },
+}));
+
+import TextPreview from "./TextPreview.vue";
+import { clearTextPreviewCache } from "@/utils/textPreview.ts";
+
+function payload(overrides: Record<string, unknown> = {}) {
+  return {
+    content: "",
+    kind: "plain",
+    format: "text",
+    truncated: false,
+    size: 1,
+    ...overrides,
+  };
+}
+
+function stubFetch(data: unknown) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => new Response(JSON.stringify(data), { status: 200 })),
+  );
+}
+
+async function flush() {
+  // Wait for the fetch promise chain and queued limiter to settle.
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+  await nextTick();
+}
+
+function mount(props: { url: string; modified?: string | null; language?: string | null }) {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const app = createApp({ render: () => h(TextPreview, props) });
+  app.mount(el);
+  return { el, app };
+}
+
+describe("TextPreview rendering", () => {
+  afterEach(() => {
+    clearTextPreviewCache();
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("does not render a truncation fade for a truncated payload", async () => {
+    stubFetch(payload({ content: "<p>hello world</p>", kind: "html", format: "html", truncated: true, size: 99_999 }));
+    const { el, app } = mount({ url: "/api/resources/preview/text?path=%2Fa.html", modified: "1" });
+    await flush();
+
+    expect(el.querySelector(".text-preview-html")?.textContent).toContain("hello world");
+    expect(el.querySelector(".text-preview-fade")).toBeNull();
+    app.unmount();
+  });
+
+  it("uses the language prop to pick the CSV delimiter", async () => {
+    stubFetch(payload({ content: "a\tb\n1\t2", kind: "csv" }));
+    const { el, app } = mount({
+      url: "/api/resources/preview/text?path=%2Fdata.tsv",
+      modified: "1",
+      language: "tsv",
+    });
+    await flush();
+
+    const cells = el.querySelectorAll(".text-preview-table thead th");
+    expect(cells).toHaveLength(2);
+    expect(cells[0]?.textContent).toBe("a");
+    expect(cells[1]?.textContent).toBe("b");
+    app.unmount();
+  });
+
+  it("reuses the rendered HTML cache for the same url and modified time", async () => {
+    stubFetch(payload({ content: "<p>cached</p>", kind: "html", format: "html" }));
+    const props = { url: "/api/resources/preview/text?path=%2Fb.html", modified: "7" };
+
+    const first = mount(props);
+    await flush();
+    expect(first.el.querySelector(".text-preview-html")?.textContent).toContain("cached");
+    first.app.unmount();
+
+    // A second mount (as happens when the popup reopens) must not re-fetch.
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>;
+    fetchMock.mockClear();
+    const second = mount(props);
+    await flush();
+    expect(second.el.querySelector(".text-preview-html")?.textContent).toContain("cached");
+    expect(fetchMock).not.toHaveBeenCalled();
+    second.app.unmount();
+  });
+});

frontend/src/components/files/TextPreview.vue

@@ -1,9 +1,7 @@
 <template>
   <div ref="root" class="text-preview" :class="{ 'text-preview--dark': isDark }" aria-hidden="true">
     <span v-if="status === 'loading'" class="material-symbols text-preview-placeholder">{{ PLACEHOLDER_ICON }}</span>
-    <!-- Small tiles: markdown/html cannot fit, so show the readable text only -->
-    <pre v-else-if="status === 'ready' && compactText !== null" class="text-preview-body text-preview-plain text-preview-compact">{{ compactText }}</pre>
-    <div v-else-if="status === 'ready' && csvTable" class="text-preview-body text-preview-table-wrap" :class="{ 'text-preview-compact': compact }">
+    <div v-else-if="status === 'ready' && csvTable" class="text-preview-body text-preview-table-wrap">
       <table class="text-preview-table">
         <thead>
           <tr>
@@ -17,39 +15,42 @@
         </tbody>
       </table>
     </div>
-    <div v-else-if="status === 'ready' && renderedHtml" class="text-preview-body text-preview-html" :class="{ 'text-preview-compact': compact }" v-html="renderedHtml"></div>
-    <pre v-else-if="status === 'ready' && highlighted !== null" class="text-preview-body text-preview-plain hljs" :class="{ 'text-preview-compact': compact }" v-html="highlighted"></pre>
-    <pre v-else-if="status === 'ready' && payload" class="text-preview-body text-preview-plain" :class="{ 'text-preview-compact': compact }">{{ payload.content }}</pre>
-    <div v-if="status === 'ready' && payload?.truncated" class="text-preview-fade"></div>
+    <div v-else-if="status === 'ready' && renderedHtml" class="text-preview-body text-preview-html" v-html="renderedHtml"></div>
+    <pre v-else-if="status === 'ready' && highlighted !== null" class="text-preview-body text-preview-plain hljs" v-html="highlighted"></pre>
+    <pre v-else-if="status === 'ready' && payload" class="text-preview-body text-preview-plain">{{ payload.content }}</pre>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { computed, onBeforeUnmount, ref, shallowRef, watch } from "vue";
 import { getters } from "@/store";
 import { applyHighlightTheme, loadHljs } from "@/utils/highlight.ts";
 import { parseDelimited } from "@/utils/delimited.ts";
-import { fetchTextPreview, languageFromPreviewUrl } from "@/utils/textPreview.ts";
 import {
-  plainTextFromHtml,
+  fetchTextPreview,
+  getRenderedTextPreview,
+  languageFromPreviewUrl,
+  releaseTextPreview,
+  setRenderedTextPreview,
+  textPreviewCacheKey,
+} from "@/utils/textPreview.ts";
+import {
   renderMarkdownTile,
   sanitizeTileHtml,
   type TextPreviewPayload,
 } from "@/utils/textPreviewRender.ts";
 
 const props = defineProps<{
-  /** Text preview API URL (see textPreviewUrlFor). */
+  /** Text preview API URL (see getTextPreviewURL / getTextPreviewURLPublic). */
   url: string;
   /** Modified time, used with the URL as the cache key. */
   modified?: string | null;
+  /** Lowercase extension without the dot; derived from the URL when omitted. */
+  language?: string | null;
 }>();
 
-
 const emit = defineEmits<(e: "error") => void>();
 
-
-// Tiles narrower than this cannot fit rendered markdown or HTML, so they show plain text.
-const COMPACT_WIDTH_PX = 240;
 // Only plain source files are syntax highlighted. Markdown and HTML are rendered instead.
 const HIGHLIGHT_KINDS = new Set(["code", "css"]);
 // Limits keep the DOM small; the tile only shows its top-left area anyway.
@@ -64,37 +65,30 @@ const status = ref<Status>("loading");
 const payload = shallowRef<TextPreviewPayload | null>(null);
 let requestId = 0;
 
+/** Cache key shared with the tile and the popup, so rendering happens once per file. */
+const cacheKey = computed(() => textPreviewCacheKey(props.url, props.modified ?? null));
+
+/** Language for highlighting/CSV, preferring the caller-provided extension. */
+const language = computed(() => props.language ?? languageFromPreviewUrl(props.url));
+
 // Only markdown, html, and rtf render as HTML. Everything else (plain, css, code) is shown as escaped text.
+// Rendered HTML is cached so scroll-back and hover do not re-parse and re-sanitize.
 const renderedHtml = computed(() => {
   const data = payload.value;
   if (!data) {
     return "";
   }
-  if (data.kind === "markdown") {
-    return renderMarkdownTile(data.content);
+  if (data.kind !== "markdown" && data.kind !== "html" && data.format !== "html") {
+    return "";
   }
-  if (data.kind === "html" || data.format === "html") {
-    return sanitizeTileHtml(data.content);
+  const key = cacheKey.value;
+  const cached = getRenderedTextPreview(key);
+  if (cached !== undefined) {
+    return cached;
   }
-  return "";
-});
-
-const root = ref<HTMLElement | null>(null);
-const compact = ref(false);
-let resizeObserver: ResizeObserver | null = null;
-
-// Plain text shown on compact tiles. Markdown is shown as its source, HTML as its visible text.
-const compactText = computed<string | null>(() => {
-  const data = payload.value;
-  // CSV keeps its table, HTML keeps its rendering, and code/css keep their highlighting on compact tiles.
-  if (!compact.value || !data || data.kind === "csv" || data.kind === "html" || HIGHLIGHT_KINDS.has(data.kind)) {
-    return null;
-  }
-  // Converted RTF is HTML too, so it still falls back to text on compact tiles.
-  if (data.format === "html") {
-    return plainTextFromHtml(sanitizeTileHtml(data.content));
-  }
-  return data.content;
+  const html = data.kind === "markdown" ? renderMarkdownTile(data.content) : sanitizeTileHtml(data.content);
+  setRenderedTextPreview(key, html);
+  return html;
 });
 
 // CSV/TSV as a table: first row is the header. A truncated file may end mid-row, so that row is dropped.
@@ -103,7 +97,7 @@ const csvTable = computed<{ header: string[]; body: string[][] } | null>(() => {
   if (data?.kind !== "csv") {
     return null;
   }
-  const delimiter = languageFromPreviewUrl(props.url) === "tsv" ? "\t" : ",";
+  const delimiter = language.value === "tsv" ? "\t" : ",";
   let rows = parseDelimited(data.content, delimiter);
   if (data.truncated && rows.length > 1) {
     rows = rows.slice(0, -1);
@@ -122,48 +116,59 @@ let highlightId = 0;
 
 async function updateHighlight(): Promise<void> {
   const token = ++highlightId;
-  highlighted.value = null;
   const data = payload.value;
   if (!data || !HIGHLIGHT_KINDS.has(data.kind)) {
+    highlighted.value = null;
     return;
   }
-  const language = languageFromPreviewUrl(props.url);
-  if (!language) {
+  const lang = language.value;
+  if (!lang) {
+    highlighted.value = null;
     return;
   }
+  // Highlighted output is theme-independent, so it can be cached and reused.
+  const cacheKeyWithLang = `${cacheKey.value}|hl`;
+  const cached = getRenderedTextPreview(cacheKeyWithLang);
+  if (cached !== undefined) {
+    // The cached markup is theme-independent, but the highlight.js style element is not,
+    // so the theme must still be applied on a theme switch or when a tile mounts from cache.
+    await applyHighlightTheme(isDark.value);
+    if (token === highlightId) {
+      highlighted.value = cached;
+    }
+    return;
+  }
+  highlighted.value = null;
   try {
     const hljs = await loadHljs();
-    if (!hljs.getLanguage(language)) {
+    if (!hljs.getLanguage(lang)) {
       return; // unknown language: keep the plain text
     }
     await applyHighlightTheme(isDark.value);
-    const html = hljs.highlight(data.content, { language, ignoreIllegals: true }).value;
+    const html = hljs.highlight(data.content, { language: lang, ignoreIllegals: true }).value;
     if (token === highlightId) {
       // highlight.js escapes its input; sanitizing again is cheap defense in depth.
-      highlighted.value = sanitizeTileHtml(html);
+      const safe = sanitizeTileHtml(html);
+      setRenderedTextPreview(cacheKeyWithLang, safe);
+      highlighted.value = safe;
     }
   } catch (err) {
     console.error("Failed to highlight text preview:", err);
   }
 }
 
-watch([payload, compact, isDark], () => {
+watch([payload, language, isDark], () => {
   void updateHighlight();
 });
 
-onMounted(() => {
-  if (root.value && typeof ResizeObserver !== "undefined") {
-    resizeObserver = new ResizeObserver((entries) => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      compact.value = width > 0 && width < COMPACT_WIDTH_PX;
-    });
-    resizeObserver.observe(root.value);
-  }
-});
-
 watch(
   [() => props.url, () => props.modified],
-  async ([url, modified]) => {
+  async ([url, modified], previous) => {
+    // Release the reference held for the previous url/modified pair (if any) so its
+    // queued request can be canceled once no mounted consumer still needs it.
+    if (previous) {
+      releaseTextPreview(previous[0] as string, (previous[1] as string | null) ?? null);
+    }
     const current = ++requestId;
     status.value = "loading";
     payload.value = null;
@@ -182,11 +187,12 @@ watch(
 );
 
 onBeforeUnmount(() => {
-  // Drop any in-flight result so it never updates an unmounted tile.
+  // Drop any in-flight result so it never updates an unmounted tile, and release the
+  // request reference so queued previews for unmounted tiles stop competing with the
+  // folder the user is actually viewing.
   requestId++;
   highlightId++;
-  resizeObserver?.disconnect();
-  resizeObserver = null;
+  releaseTextPreview(props.url, props.modified ?? null);
 });
 </script>
 
@@ -237,7 +243,11 @@ onBeforeUnmount(() => {
   padding: 0.6em;
   margin: 0;
   overflow: hidden;
-  font-size: 3.4cqw;
+  /* Lay out at a readable width and let the tile clip, instead of wrapping aggressively */
+  min-width: var(--text-preview-min-width, 320px);
+  /* Scale with the tile, but never below a legible floor: at the 60px inline threshold
+     3.4cqw is only ~2px, so the floor keeps the smallest tiles readable. */
+  font-size: max(3.4cqw, 8px);
   line-height: 1.35;
   text-align: left;
   overflow-wrap: anywhere;
@@ -274,12 +284,6 @@ onBeforeUnmount(() => {
   text-align: left;
 }
 
-/* Compact tiles: keep text at a readable minimum size and let the tile clip the rest */
-.text-preview-body.text-preview-compact {
-  font-size: max(6px, 3.4cqw);
-  line-height: 1.3;
-}
-
 .text-preview-html :deep(h1),
 .text-preview-html :deep(h2),
 .text-preview-html :deep(h3),
@@ -352,14 +356,4 @@ onBeforeUnmount(() => {
   color: var(--primaryColor);
   text-decoration: underline;
 }
-
-.text-preview-fade {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 30%;
-  background: linear-gradient(to bottom, transparent, var(--surfacePrimary));
-  pointer-events: none;
-}
 </style>

frontend/src/components/prompts/Delete.vue

@@ -83,7 +83,7 @@ import { useListingVirtualization } from "@/composables/useListingVirtualization
 import url from "@/utils/url";
 import { removeFromFolderLists } from "@/utils/cache/listingCache.ts";
 
-interface DeleteItem {
+export interface DeleteItem {
   source?: string;
   path: string;
   type?: string;

frontend/src/components/prompts/MediaConversionFormats.vue

@@ -138,7 +138,7 @@ export default {
         if (!skipped) {
           this.media = media;
         }
-        void mutations.syncMediaPlayerSettings();
+        void mutations.syncMediaSettings();
         notify.showSuccess(this.$t("general.saved"));
         eventBus.emit(MEDIA_SETTINGS_CHANGED_EVENT);
         this.close();

frontend/src/components/prompts/MediaTranscodeSettings.vue

@@ -238,7 +238,7 @@ export default {
         if (!skipped) {
           this.media = media;
         }
-        void mutations.syncMediaPlayerSettings();
+        void mutations.syncMediaSettings();
         notify.showSuccess(this.$t("general.saved"));
         eventBus.emit(MEDIA_SETTINGS_CHANGED_EVENT);
         this.close();

frontend/src/components/prompts/Totp.test.js

@@ -16,7 +16,7 @@ const { store, router, notify } = vi.hoisted(() => {
         setCurrentUser: vi.fn((user) => { state.user = user; }),
         setSession: vi.fn(),
         syncEnforcedUserDefaults: vi.fn(),
-        syncMediaPlayerSettings: vi.fn(),
+        syncMediaSettings: vi.fn(),
         syncSidebarLinkDefaultsPolicy: vi.fn(),
         syncToolAccessDefaultsPolicy: vi.fn(),
         syncShareDefaultsPolicy: vi.fn(),

frontend/src/components/settings/UserDefaultsAccountSection.vue

@@ -194,7 +194,7 @@ export default {
   computed: {
     maxConcurrentTranscodesLimit() {
       // Prefer the live media settings; globalVars are static page constants.
-      const live = state.mediaPlayerSettings?.maxConcurrentPerUser;
+      const live = state.mediaSettings?.maxConcurrentPerUser;
       if (Number.isFinite(live) && live > 0) {
         return live;
       }

frontend/src/plyr/transcodeAvailability.test.js

@@ -1,8 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-vi.mock('@/store', () => ({ state: { mediaPlayerSettings: null } }));
+vi.mock('@/store', () => ({ state: { mediaSettings: null } }));
 vi.mock('@/utils/constants', () => ({
-  globalVars: { ffmpegAvailable: true, transcodeEnabled: true },
+  globalVars: { ffmpegAvailable: true },
 }));
 
 import { state } from '@/store/index.ts';
@@ -11,35 +11,31 @@ import { isTranscodeAvailable } from '@/plyr/transcodeMode.js';
 
 describe('isTranscodeAvailable', () => {
   beforeEach(() => {
-    state.mediaPlayerSettings = null;
+    state.mediaSettings = null;
     globalVars.ffmpegAvailable = true;
-    globalVars.transcodeEnabled = true;
   });
 
-  it('falls back to the page constant before settings load', () => {
-    expect(isTranscodeAvailable()).toBe(true);
-
-    globalVars.transcodeEnabled = false;
+  it('stays off until live media settings load', () => {
     expect(isTranscodeAvailable()).toBe(false);
   });
 
-  it('prefers the live media settings over the page constant', () => {
-    state.mediaPlayerSettings = { enabled: false };
+  it('follows the live media settings', () => {
+    state.mediaSettings = { enabled: false };
     expect(isTranscodeAvailable()).toBe(false);
 
-    state.mediaPlayerSettings = { enabled: true };
+    state.mediaSettings = { enabled: true };
     expect(isTranscodeAvailable()).toBe(true);
   });
 
   it('stays off when the server has no ffmpeg', () => {
     globalVars.ffmpegAvailable = false;
-    globalVars.transcodeEnabled = false;
+    state.mediaSettings = { enabled: true };
     expect(isTranscodeAvailable()).toBe(false);
   });
 
   it('stays off when ffmpeg is missing even if settings claim enabled', () => {
     globalVars.ffmpegAvailable = false;
-    state.mediaPlayerSettings = { enabled: true };
+    state.mediaSettings = { enabled: true };
     expect(isTranscodeAvailable()).toBe(false);
   });
 });

frontend/src/plyr/transcodeMode.js

@@ -4,20 +4,17 @@ import { state } from '@/store/index.ts';
 import { globalVars } from '@/utils/constants.js';
 
 /**
- * `globalVars` are static page constants, and `ffmpegAvailable` mirrors ffmpeg
- * availability, which cannot change without a restart. Transcoding is ffmpeg-only,
- * so it gates the feature outright. The transcode toggle itself is read from the
- * live media settings so an admin change applies without a page reload.
+ * `ffmpegAvailable` is a static page constant that mirrors ffmpeg availability, which
+ * cannot change without a restart. Transcoding is ffmpeg-only, so it gates the feature
+ * outright. The transcode toggle is read only from the live media settings, so an admin
+ * change applies without a page reload. Before those settings load (or for anonymous
+ * users and shares, which never load them) transcoding reports unavailable.
  */
 export function isTranscodeAvailable() {
   if (globalVars?.ffmpegAvailable !== true) {
     return false;
   }
-  const live = state?.mediaPlayerSettings;
-  if (live) {
-    return live.enabled === true;
-  }
-  return globalVars.transcodeEnabled === true;
+  return state?.mediaSettings?.enabled === true;
 }
 
 /** Supported transcode playback modes in the player UI. */

frontend/src/store/mutations.ts

@@ -3,7 +3,7 @@ import { markRaw } from "vue";
 import { resourcesApi, usersApi } from "@/api/index.js";
 import {
   getEnforcedUserDefaults,
-  getMediaPlayerSettings,
+  getSharedMediaSettings,
   getShareDefaultsPolicy,
   getSidebarLinkDefaultsPolicy,
   getToolAccessDefaultsPolicy,
@@ -622,25 +622,25 @@ export const mutations = {
     }
   },
   /**
-   * Load the effective media settings for playback. `globalVars` are static
-   * page constants, so runtime changes to media settings are read from the API
-   * (available to every authenticated user) instead.
+   * Load the runtime media settings. Runtime admin changes are read from the API
+   * rather than static page constants. Called at app start so the state is present
+   * in every view, not only the player.
    */
-  syncMediaPlayerSettings: async () => {
+  syncMediaSettings: async () => {
     if (!getters.isLoggedIn() || getters.isShare() || state.user?.username === "anonymous") {
-      state.mediaPlayerSettings = null;
+      state.mediaSettings = null;
       return;
     }
     try {
-      const settings = await getMediaPlayerSettings();
+      const settings = await getSharedMediaSettings();
       // The request can resolve after logout/share transition — don't write
       // media settings into a logged-out state.
       if (!getters.isLoggedIn() || getters.isShare() || state.user?.username === "anonymous") {
         return;
       }
-      state.mediaPlayerSettings = settings;
+      state.mediaSettings = settings;
     } catch {
-      state.mediaPlayerSettings = null;
+      state.mediaSettings = null;
     }
   },
   syncSidebarLinkDefaultsPolicy: async () => {

frontend/src/store/state.ts

@@ -33,8 +33,8 @@ export const state: StoreState = reactive({
   showSidebar: false,
   displayPreferences: {},
   enforcedUserDefaults: {},
-  /** Effective media settings for playback; null until the API reports them. */
-  mediaPlayerSettings: null,
+  /** Runtime media state shared by the player and general UI; null until loaded (logged-in users only). */
+  mediaSettings: null,
   sidebarLinkDefaultsPolicy: { items: [] },
   toolAccessDefaultsPolicy: { items: [] },
   shareDefaultsPolicy: { values: {}, enforced: {} },

frontend/src/store/types.ts

@@ -330,12 +330,13 @@ export interface StoreState {
       newFileTemplate?: boolean;
     };
   };
-  /** Effective media settings for playback, or null before the API reports them. */
-  mediaPlayerSettings: {
+  /** Runtime media state for all UI (player, listings, previews); null until loaded. */
+  mediaSettings: {
     enabled: boolean;
     profiles: string[];
     maxConcurrentPerUser: number;
-    hardwareAcceleration: boolean;
+    /** Per image preview type (e.g. heic, jxl): conversion active on this server. */
+    imagePreview: Partial<Record<'heic' | 'jxl' | 'jpeg', boolean>>;
   } | null;
   sidebarLinkDefaultsPolicy: {
     items?: Array<{

frontend/src/utils/auth.js

@@ -88,7 +88,7 @@ export async function validateLogin(isPublicRoute = false) {
   const userInfo = await res.json();
   await mutations.setCurrentUser(userInfo);
   await mutations.syncEnforcedUserDefaults();
-  await mutations.syncMediaPlayerSettings();
+  await mutations.syncMediaSettings();
   await mutations.syncSidebarLinkDefaultsPolicy();
   await mutations.syncToolAccessDefaultsPolicy();
   await mutations.syncShareDefaultsPolicy();

frontend/src/utils/auth.test.js

@@ -8,7 +8,7 @@ const { storeMock } = vi.hoisted(() => ({
       isLoggedIn: vi.fn(() => true),
       isShare: vi.fn(() => false),
     },
-    mutations: { setCurrentUser: vi.fn(), setSession: vi.fn(), syncEnforcedUserDefaults: vi.fn(), syncMediaPlayerSettings: vi.fn(), syncSidebarLinkDefaultsPolicy: vi.fn(), syncToolAccessDefaultsPolicy: vi.fn(), syncShareDefaultsPolicy: vi.fn() },
+    mutations: { setCurrentUser: vi.fn(), setSession: vi.fn(), syncEnforcedUserDefaults: vi.fn(), syncMediaSettings: vi.fn(), syncSidebarLinkDefaultsPolicy: vi.fn(), syncToolAccessDefaultsPolicy: vi.fn(), syncShareDefaultsPolicy: vi.fn() },
   },
 }));
 

frontend/src/utils/icon-inventory-core.json

@@ -147,6 +147,7 @@
   "replay_10",
   "restart",
   "save",
+  "saved_search",
   "search",
   "search_off",
   "select_all",

frontend/src/utils/mediaSettings.js

@@ -88,13 +88,16 @@ export function enabledTranscodeProfileIds(media) {
  * the full object to admins and a player-only subset to everyone else, so both
  * shapes collapse to the same fields here.
  */
-export function normalizeMediaPlayerSettings(data) {
+export function normalizeSharedMediaSettings(data) {
+  // Both payloads share the transcode keys: enabled, maxConcurrentPerUser, and the
+  // derived enabledProfiles. Admin payloads also carry the full profiles object, so
+  // fall back to deriving the ids from it when enabledProfiles is absent.
   const transcode = data?.transcode || {};
   return {
-    enabled: Boolean(data?.enabled ?? transcode.enabled),
-    profiles: Array.isArray(data?.profiles) ? data.profiles : enabledTranscodeProfileIds(data),
-    maxConcurrentPerUser: Number(data?.maxConcurrentPerUser ?? transcode.maxConcurrentPerUser) || 1,
-    hardwareAcceleration: Boolean(data?.hardwareAcceleration),
+    enabled: Boolean(transcode.enabled),
+    profiles: Array.isArray(transcode.enabledProfiles) ? transcode.enabledProfiles : enabledTranscodeProfileIds(data),
+    maxConcurrentPerUser: Number(transcode.maxConcurrentPerUser) || 1,
+    imagePreview: { ...(data?.imagePreview || {}) },
   };
 }
 

frontend/src/utils/mediaSettings.test.js

@@ -8,7 +8,7 @@ import { patchMediaSettings } from '@/api/settings.js';
 import {
   enabledTranscodeProfileIds,
   mergeMediaSettings,
-  normalizeMediaPlayerSettings,
+  normalizeSharedMediaSettings,
   saveMediaSettingsPatch,
   stripLockedMediaPaths,
 } from '@/utils/mediaSettings.js';
@@ -104,7 +104,7 @@ describe('mediaSettings', () => {
     });
   });
 
-  describe('normalizeMediaPlayerSettings', () => {
+  describe('normalizeSharedMediaSettings', () => {
     it('derives enabled profiles in menu order from the admin settings shape', () => {
       const media = {
         transcode: {
@@ -116,37 +116,34 @@ describe('mediaSettings', () => {
             datasaver: { enabled: true },
           },
         },
-        hardwareAcceleration: true,
       };
       expect(enabledTranscodeProfileIds(media)).toEqual(['quality', 'datasaver']);
-      expect(normalizeMediaPlayerSettings(media)).toEqual({
+      expect(normalizeSharedMediaSettings(media)).toEqual({
         enabled: true,
         profiles: ['quality', 'datasaver'],
         maxConcurrentPerUser: 2,
-        hardwareAcceleration: true,
+        imagePreview: {},
       });
     });
 
     it('accepts the player-only shape returned to non-admin users', () => {
-      expect(normalizeMediaPlayerSettings({
-        enabled: false,
-        profiles: ['quality'],
-        maxConcurrentPerUser: 3,
-        hardwareAcceleration: false,
+      expect(normalizeSharedMediaSettings({
+        transcode: { enabled: false, maxConcurrentPerUser: 3, enabledProfiles: ['quality'] },
+        imagePreview: { heic: true },
       })).toEqual({
         enabled: false,
         profiles: ['quality'],
         maxConcurrentPerUser: 3,
-        hardwareAcceleration: false,
+        imagePreview: { heic: true },
       });
     });
 
     it('falls back to a per-user limit of one and disabled when values are absent', () => {
-      expect(normalizeMediaPlayerSettings(undefined)).toEqual({
+      expect(normalizeSharedMediaSettings(undefined)).toEqual({
         enabled: false,
         profiles: [],
         maxConcurrentPerUser: 1,
-        hardwareAcceleration: false,
+        imagePreview: {},
       });
     });
   });

frontend/src/utils/textPreview.test.ts

@@ -1,5 +1,41 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { clearTextPreviewCache, fetchTextPreview, languageFromPreviewUrl, textPreviewUrlFor } from "./textPreview.ts";
+
+// The backend serves the text allowlist through globalVars (backend/internal/web/static.go).
+const { globalsMock } = vi.hoisted(() => ({
+  globalsMock: {
+    textPreviewMimeTypes: [
+      "application/json",
+      "application/yaml",
+      "application/x-yaml",
+      "application/sql",
+      "application/x-sql",
+      "application/x-sh",
+      "application/x-php",
+      "application/x-powershell",
+      "application/x-tex",
+      "application/toml",
+      "application/x-ruby",
+    ] as string[],
+  },
+}));
+
+vi.mock("@/utils/constants.js", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  globalVars: globalsMock,
+}));
+
+import {
+  clearTextPreviewCache,
+  fetchTextPreview,
+  getRenderedTextPreview,
+  isTextPreviewableType,
+  languageFromPath,
+  languageFromPreviewUrl,
+  MIN_TEXT_PREVIEW_WIDTH_PX,
+  releaseTextPreview,
+  setRenderedTextPreview,
+  textPreviewCacheKey,
+} from "./textPreview.ts";
 
 describe("languageFromPreviewUrl", () => {
   it("reads the lowercase extension from the path parameter", () => {
@@ -12,17 +48,70 @@ describe("languageFromPreviewUrl", () => {
   });
 });
 
-describe("textPreviewUrlFor", () => {
-  it("maps the authenticated preview URL to the text endpoint and keeps params", () => {
-    const thumb = "http://localhost/api/resources/preview?path=%2Fa.md&key=123&source=main&inline=true";
-    expect(textPreviewUrlFor(thumb)).toBe(
-      "http://localhost/api/resources/preview/text?path=%2Fa.md&key=123&source=main&inline=true",
-    );
+describe("languageFromPath", () => {
+  it("derives the extension without parsing a URL", () => {
+    expect(languageFromPath("/src/Main.GO")).toBe("go");
+    expect(languageFromPath("data.TSV")).toBe("tsv");
+    expect(languageFromPath("Makefile")).toBeNull();
+    expect(languageFromPath(".env")).toBeNull();
+    expect(languageFromPath(null)).toBeNull();
+  });
+});
+
+describe("isTextPreviewableType", () => {
+  it("is true for text/* mimetypes, with or without parameters", () => {
+    for (const mt of ["text/markdown", "text/lyrics", "text/plain; charset=utf-8", "text/x-go"]) {
+      expect(isTextPreviewableType(mt), mt).toBe(true);
+    }
   });
 
-  it("maps the public share preview URL and keeps the hash", () => {
-    const thumb = "http://localhost/public/api/resources/preview?path=%2Fa.txt&hash=abc";
-    expect(textPreviewUrlFor(thumb)).toBe("http://localhost/public/api/resources/preview/text?path=%2Fa.txt&hash=abc");
+  it("is true for text-extension mimetypes that are not text/*", () => {
+    for (const mt of ["application/json", "application/yaml", "application/sql", "application/x-sh", "application/x-php", "application/x-powershell", "application/x-tex"]) {
+      expect(isTextPreviewableType(mt), mt).toBe(true);
+    }
+  });
+
+  it("follows the allowlist served in globalVars", () => {
+    const original = globalsMock.textPreviewMimeTypes;
+    try {
+      globalsMock.textPreviewMimeTypes = ["application/x-custom"];
+      expect(isTextPreviewableType("application/x-custom")).toBe(true);
+      expect(isTextPreviewableType("application/json")).toBe(false);
+    } finally {
+      globalsMock.textPreviewMimeTypes = original;
+    }
+  });
+
+  it("is false for non-text mimetypes and missing types", () => {
+    for (const mt of ["application/x-sqlite3", "application/postscript", "application/wasm", "application/backup", "application/x-msdownload", "application/octet-stream", "image/svg+xml", "image/png", "directory", "", null, undefined]) {
+      expect(isTextPreviewableType(mt), String(mt)).toBe(false);
+    }
+  });
+});
+
+describe("MIN_TEXT_PREVIEW_WIDTH_PX", () => {
+  it("is the tile width below which no inline preview is rendered", () => {
+    expect(MIN_TEXT_PREVIEW_WIDTH_PX).toBe(60);
+  });
+});
+
+describe("rendered HTML cache", () => {
+  afterEach(() => {
+    clearTextPreviewCache();
+  });
+
+  it("round-trips a value and marks it most recently used", () => {
+    const key = textPreviewCacheKey("/api/resources/preview/text?path=a", "2026-01-01");
+    setRenderedTextPreview(key, "<p>hi</p>");
+    expect(getRenderedTextPreview(key)).toBe("<p>hi</p>");
+  });
+
+  it("keys by URL and modified time", () => {
+    const a = textPreviewCacheKey("/u", "1");
+    const b = textPreviewCacheKey("/u", "2");
+    expect(a).not.toBe(b);
+    setRenderedTextPreview(a, "<p>a</p>");
+    expect(getRenderedTextPreview(b)).toBeUndefined();
   });
 });
 
@@ -57,3 +146,41 @@ describe("fetchTextPreview cache", () => {
     expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 });
+
+describe("releaseTextPreview", () => {
+  afterEach(() => {
+    clearTextPreviewCache();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps a settled result after the last consumer releases", async () => {
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ content: "x", kind: "plain", format: "text", truncated: false, size: 1 }), { status: 200 }));
+    vi.stubGlobal("fetch", fetchMock);
+
+    await fetchTextPreview("/u", "1");
+    // The popup/tile unmounts after the fetch resolved.
+    releaseTextPreview("/u", "1");
+
+    // Reopening must reuse the cached result, not fetch again.
+    await fetchTextPreview("/u", "1");
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("aborts a pending request when its last consumer unmounts", async () => {
+    let observedSignal: AbortSignal | undefined;
+    const fetchMock = vi.fn((_url: string, init?: RequestInit) => {
+      observedSignal = init?.signal ?? undefined;
+      // Never resolves on its own; only aborts when the consumer goes away.
+      return new Promise<Response>((_resolve, reject) => {
+        observedSignal?.addEventListener("abort", () => reject(new DOMException("Aborted", "AbortError")));
+      });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const pending = fetchTextPreview("/u", "1");
+    expect(observedSignal?.aborted).toBe(false);
+    releaseTextPreview("/u", "1");
+    expect(observedSignal?.aborted).toBe(true);
+    await expect(pending).rejects.toThrow(/Aborted/);
+  });
+});

frontend/src/utils/textPreview.ts

@@ -1,18 +1,13 @@
+import { globalVars } from "@/utils/constants.js";
 import { state } from "@/store/index.ts";
 import type { TextPreviewPayload } from "@/utils/textPreviewRender.ts";
 
 // Text previews are small (about 16KB), so the frontend keeps a bounded in-memory cache.
 // Each key includes the modified time, so a changed file is fetched again on next view.
 const MAX_CACHE_ENTRIES = 200;
-const cache = new Map<string, Promise<TextPreviewPayload>>();
 
-/**
- * Derives the text preview URL from an image preview thumbnail URL. Works for both
- * /api/resources/preview and /public/api/resources/preview, so auth and share params carry over.
- */
-export function textPreviewUrlFor(thumbnailUrl: string): string {
-  return thumbnailUrl.replace(/\/resources\/preview\?/, "/resources/preview/text?");
-}
+/** Tiles narrower than this show an indicator instead of rendered markdown/HTML/CSV. */
+export const MIN_TEXT_PREVIEW_WIDTH_PX = 60;
 
 /**
  * Lowercase file extension (no dot) of the file a text preview URL points at, or null.
@@ -20,54 +15,229 @@ export function textPreviewUrlFor(thumbnailUrl: string): string {
  */
 export function languageFromPreviewUrl(url: string): string | null {
   const path = new URL(url, window.location.href).searchParams.get("path") ?? "";
+  return languageFromPath(path);
+}
+
+/** Lowercase file extension (no dot) of a path, or null. A leading dot marks a dotfile. */
+export function languageFromPath(path: string | null | undefined): string | null {
+  if (!path) return null;
   const name = path.slice(path.lastIndexOf("/") + 1);
-  // A leading dot marks a dotfile (".env"), which has no extension.
   const dot = name.lastIndexOf(".");
   if (dot <= 0) return null;
   return name.slice(dot + 1).toLowerCase();
 }
 
-async function requestTextPreview(url: string): Promise<TextPreviewPayload> {
-  const res = await fetch(url, {
-    credentials: "same-origin",
-    headers: { sessionId: state.sessionId },
-  });
-  if (!res.ok) {
-    throw new Error(`Text preview request failed: ${res.status}`);
+// Non-text/* mimetypes (JSON, YAML, SQL, shell, ...) served by the backend in globalVars.
+// The backend is the single source of truth; the Set is rebuilt only when the served array changes.
+let allowlistSource: string[] | undefined;
+let allowlistSet = new Set<string>();
+
+function textPreviewMimeTypes(): Set<string> {
+  const source = globalVars?.textPreviewMimeTypes as string[] | undefined;
+  if (source !== allowlistSource) {
+    allowlistSource = source;
+    allowlistSet = new Set(source ?? []);
   }
-  return (await res.json()) as TextPreviewPayload;
+  return allowlistSet;
 }
 
+/**
+ * True when an item's mimetype is text/* or on the backend's text allowlist. The backend uses
+ * the same rule, so an item the listing marks as text is the one the text preview endpoint
+ * renders. Binary types such as sqlite, postscript, wasm and backup never reach the endpoint.
+ */
+export function isTextPreviewableType(mimetype: string | null | undefined): boolean {
+  // split always yields at least one element; the ?? "" satisfies noUncheckedIndexedAccess.
+  const base = (mimetype ?? "").split(";")[0] ?? "";
+  return base.startsWith("text/") || textPreviewMimeTypes().has(base);
+}
+
+// Text fetches are queued so a folder full of text files does not fire dozens of
+// requests at once. Mirrors previewRequests.ts, but returns parsed JSON.
+const MAX_CONCURRENT_LOADS = 8;
+let activeLoads = 0;
+const queue: Array<() => void> = [];
+
+interface QueueEntry {
+  start: () => void;
+  started: boolean;
+}
+
+function runQueued<T>(task: () => Promise<T>, signal: AbortSignal | undefined): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const entry: QueueEntry = { start: () => {}, started: false };
+    const onAbort = () => {
+      // Drop the still-queued entry so an unmounted tile cannot hold a slot. When the
+      // request has already started, the abort signal rejects the in-flight fetch instead.
+      if (entry.started) {
+        return;
+      }
+      const i = queue.indexOf(entry.start);
+      if (i !== -1) {
+        queue.splice(i, 1);
+      }
+      reject(abortError());
+    };
+    entry.start = () => {
+      entry.started = true;
+      signal?.removeEventListener("abort", onAbort);
+      activeLoads++;
+      task()
+        .then(resolve, reject)
+        .finally(() => {
+          activeLoads--;
+          const next = queue.shift();
+          if (next) next();
+        });
+    };
+    if (signal?.aborted) {
+      reject(abortError());
+      return;
+    }
+    signal?.addEventListener("abort", onAbort, { once: true });
+    if (activeLoads < MAX_CONCURRENT_LOADS) {
+      entry.start();
+    } else {
+      queue.push(entry.start);
+    }
+  });
+}
+
+function abortError(): DOMException {
+  return new DOMException("Aborted", "AbortError");
+}
+
+async function requestTextPreview(url: string, signal: AbortSignal | undefined): Promise<TextPreviewPayload> {
+  if (signal?.aborted) {
+    throw abortError();
+  }
+  return runQueued(async () => {
+    if (signal?.aborted) {
+      throw abortError();
+    }
+    const res = await fetch(url, {
+      credentials: "same-origin",
+      headers: { sessionId: state.sessionId },
+      ...(signal && { signal }),
+    });
+    if (!res.ok) {
+      throw new Error(`Text preview request failed: ${res.status}`);
+    }
+    return (await res.json()) as TextPreviewPayload;
+  }, signal);
+}
+
+interface TextPreviewCacheEntry {
+  promise: Promise<TextPreviewPayload>;
+  controller: AbortController;
+  /** Number of mounted consumers (tile and/or popup) that still need this request. */
+  refs: number;
+  /** True once the request has resolved or rejected and is safe to keep without a consumer. */
+  settled?: boolean;
+}
+
+const cache = new Map<string, TextPreviewCacheEntry>();
+
 /**
  * Fetches a text preview, reusing a cached result for the same URL and modified time.
- * Failed requests are not cached, so a later view can retry.
+ * Failed requests are not cached, so a later view can retry. Each call takes a
+ * reference; the matching releaseTextPreview call lets a still-pending request be
+ * aborted once every consumer has unmounted.
  */
 export function fetchTextPreview(url: string, modified: string | null): Promise<TextPreviewPayload> {
-  const key = `${url}|${modified ?? ""}`;
-  const cached = cache.get(key);
-  if (cached !== undefined) {
-    // Re-insert to mark as most recently used.
-    cache.delete(key);
-    cache.set(key, cached);
-    return cached;
+  const key = textPreviewCacheKey(url, modified);
+  const existing = cache.get(key);
+  if (existing !== undefined) {
+    existing.refs++;
+    return existing.promise;
   }
-  const request = requestTextPreview(url);
-  cache.set(key, request);
+  const controller = new AbortController();
+  const entry: TextPreviewCacheEntry = {
+    promise: new Promise<TextPreviewPayload>(() => {}),
+    controller,
+    refs: 1,
+    settled: false,
+  };
+  // Mark settled as soon as the request finishes so a later release never aborts a
+  // result that is already available (the popup reopen / scroll-back case).
+  entry.promise = requestTextPreview(url, controller.signal).finally(() => {
+    entry.settled = true;
+  });
+  cache.set(key, entry);
   if (cache.size > MAX_CACHE_ENTRIES) {
-    const oldest = cache.keys().next().value;
-    if (oldest !== undefined) {
-      cache.delete(oldest);
+    const oldestKey = cache.keys().next().value;
+    if (oldestKey !== undefined) {
+      cache.get(oldestKey)?.controller.abort();
+      cache.delete(oldestKey);
     }
   }
-  request.catch(() => {
-    if (cache.get(key) === request) {
+  entry.promise.catch(() => {
+    if (cache.get(key) === entry) {
       cache.delete(key);
     }
   });
-  return request;
+  return entry.promise;
 }
 
-/** Test helper: clears the in-memory text preview cache. */
-export function clearTextPreviewCache(): void {
-  cache.clear();
+/**
+ * Drops the reference taken by fetchTextPreview. When the last consumer releases, the
+ * in-flight request is aborted and removed, so queued work for unmounted tiles does not
+ * delay previews for the folder the user is actually looking at. Requests still shared
+ * by an active consumer are kept.
+ */
+export function releaseTextPreview(url: string, modified: string | null): void {
+  const key = textPreviewCacheKey(url, modified);
+  const entry = cache.get(key);
+  if (entry === undefined) {
+    return;
+  }
+  entry.refs--;
+  // Only abort a request that has not finished. A settled result stays cached so the
+  // popup can reopen (and virtualization can scroll back) without re-fetching.
+  if (entry.refs <= 0 && !entry.settled) {
+    entry.controller.abort();
+    cache.delete(key);
+  }
+}
+
+// Final sanitized/rendered HTML is the expensive part of a text preview. Virtualization
+// unmounts off-window tiles and the popup unmounts on mouse-out, so without this every
+// scroll-back and hover would re-run markdown parsing + DOMPurify.
+const MAX_RENDERED_ENTRIES = 200;
+const renderedCache = new Map<string, string>();
+
+/** Cache key for a rendered text preview, matching fetchTextPreview's key. */
+export function textPreviewCacheKey(url: string, modified: string | null): string {
+  return `${url}|${modified ?? ""}`;
+}
+
+/** Returns the cached rendered HTML for a key, marking it as most recently used. */
+export function getRenderedTextPreview(key: string): string | undefined {
+  const value = renderedCache.get(key);
+  if (value !== undefined) {
+    renderedCache.delete(key);
+    renderedCache.set(key, value);
+  }
+  return value;
+}
+
+/** Stores rendered HTML for a key, evicting the least recently used entry past the limit. */
+export function setRenderedTextPreview(key: string, html: string): void {
+  renderedCache.delete(key);
+  renderedCache.set(key, html);
+  if (renderedCache.size > MAX_RENDERED_ENTRIES) {
+    const oldest = renderedCache.keys().next().value;
+    if (oldest !== undefined) {
+      renderedCache.delete(oldest);
+    }
+  }
+}
+
+/** Test helper: clears the in-memory text preview caches. */
+export function clearTextPreviewCache(): void {
+  for (const entry of cache.values()) {
+    entry.controller.abort();
+  }
+  cache.clear();
+  renderedCache.clear();
 }

frontend/src/views/files/Preview.vue

@@ -211,7 +211,7 @@ export default {
     // Viewable when we can get embedded/original preview: (media + heic conversion) or Safari native
     isHeicAndViewable() {
       if (state.isSafari) return true;
-      if (globalVars.ffmpegAvailable && globalVars.enableHeicConversion) return true;
+      if (state.mediaSettings?.imagePreview?.heic === true) return true;
       return false;
     },
     pdfConvertable() {
@@ -262,7 +262,7 @@ export default {
       }
 
       const getRawPreview = isRawImageMimeType(state.req.type);
-      const getHeicPreview = isHeicOrHeif && globalVars.ffmpegAvailable && globalVars.enableHeicConversion;
+      const getHeicPreview = isHeicOrHeif && state.mediaSettings?.imagePreview?.heic === true;
       if (this.pdfConvertable || getRawPreview || getHeicPreview) {
         if (getters.isShare()) {
           const previewPath = removeTrailingSlash(state.req.path);

frontend/src/views/files/plyrViewer.vue

@@ -850,15 +850,8 @@ export default {
       return needsTranscodeFirst(this.transcodeProbeParams());
     },
     transcodeProfileOptions() {
-      const live = state.mediaPlayerSettings?.profiles;
-      let configured;
-      if (Array.isArray(live)) {
-        configured = live;
-      } else {
-        configured = Array.isArray(globalVars.transcodeProfiles)
-          ? globalVars.transcodeProfiles
-          : PLYR_TRANSCODE_HLS_MODES;
-      }
+      const live = state.mediaSettings?.profiles;
+      const configured = Array.isArray(live) ? live : PLYR_TRANSCODE_HLS_MODES;
       const ids = configured.filter((id) => PLYR_TRANSCODE_HLS_MODES.includes(id));
       return ids.length ? ids : PLYR_TRANSCODE_HLS_MODES;
     },
@@ -875,7 +868,7 @@ export default {
       const base = ['captions', 'captionSize', 'quality', 'speed', 'playback', 'loop'];
       // Register the slot whenever authenticated video can show it later.
       // Plyr only builds settings panels at mount; applyCustomSettings toggles
-      // visibility when media/live settings settle (e.g. after syncMediaPlayerSettings).
+      // visibility when media/live settings settle (e.g. after syncMediaSettings).
       if (this.previewType === 'video' && getters.isLoggedIn() && !getters.isShare()) {
         return [...base, 'transcodeMode'];
       }

frontend/src/views/settings/Media.vue

@@ -121,8 +121,8 @@ export default {
   mounted() {
     this.mediaSettingsHandler = () => {
       void this.load({ silent: true });
-      // Keep the player's live view of media settings in sync after a save.
-      void mutations.syncMediaPlayerSettings();
+      // Keep the shared live view of media settings in sync after a save.
+      void mutations.syncMediaSettings();
     };
     eventBus.on(MEDIA_SETTINGS_CHANGED_EVENT, this.mediaSettingsHandler);
     void this.load();
@@ -200,7 +200,7 @@ export default {
           return;
         }
         this.media = media;
-        void mutations.syncMediaPlayerSettings();
+        void mutations.syncMediaSettings();
         notify.showSuccessToast(this.$t("settings.settingsUpdated"));
       } catch (e) {
         notify.showError(e?.message || this.$t("media.updateFailed"));

frontend/tests/playwright/previews/thumbnails.spec.ts

@@ -1,21 +1,41 @@
-import { expect, test } from "../test-setup.ts";
+import type { Page } from "@playwright/test";
+import { expect, test, ensureListingViewMode } from "../test-setup.ts";
 
 const FILES_DIR = "/files/playwright-files/files/";
 const REMOTE_IMAGE_ALT = "Remote screenshot from filebrowserquantum.com";
 
+/** Drive the StatusBar size slider so the gallery tiles are wide enough for a text preview. */
+async function setGallerySize(page: Page, size: number): Promise<void> {
+  await page.locator("#gallery-size").evaluate((el, value) => {
+    const input = el as HTMLInputElement;
+    input.value = String(value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  }, size);
+}
+
+/** Text previews only render inline once the tile is wide enough; gallery does that. */
+async function showTextPreviewGallery(page: Page, path: string): Promise<void> {
+  await page.goto(path);
+  await setGallerySize(page, 9);
+  await ensureListingViewMode(page, "gallery");
+}
+
 // Thumbnails of HTML files must not show images or videos. The full viewer still shows them.
 
 test("html thumbnail in the listing shows text but no images or videos", async ({ page }) => {
-  await page.goto(FILES_DIR);
+  await showTextPreviewGallery(page, FILES_DIR);
   const tile = page.locator('a[aria-label="index.html"] .text-preview');
   await tile.waitFor({ state: "visible" });
   await expect(tile).toContainText("Relative path resolution");
   await expect(tile.locator("img, image, picture, video")).toHaveCount(0);
   await expect(tile.locator("[srcset], [background]")).toHaveCount(0);
+  // The truncation fade was removed; truncated content is clipped instead.
+  await expect(tile.locator(".text-preview-fade")).toHaveCount(0);
 });
 
 test("html thumbnail for a page with a remote image omits the image", async ({ page }) => {
-  await page.goto(`${FILES_DIR}nested/`);
+  await showTextPreviewGallery(page, `${FILES_DIR}nested/`);
   const tile = page.locator('a[aria-label="child.html"] .text-preview');
   await tile.waitFor({ state: "visible" });
   await expect(tile).toContainText("Child page");
@@ -23,6 +43,29 @@ test("html thumbnail for a page with a remote image omits the image", async ({ p
   await expect(tile.locator(`img[alt="${REMOTE_IMAGE_ALT}"]`)).toHaveCount(0);
 });
 
+test("small tiles show a preview-available indicator instead of the text preview", async ({ page }) => {
+  await page.goto(FILES_DIR);
+  await ensureListingViewMode(page, "list");
+
+  const item = page.locator('a[aria-label="index.html"]');
+  // The tile is too small to render text, so the icon plus a badge is shown instead.
+  await expect(item.locator(".text-preview")).toHaveCount(0);
+  await expect(item.locator(".overlay-icon--preview-hint")).toHaveCount(1);
+});
+
+test("hovering a small tile still opens the text preview popup", async ({ page }) => {
+  await page.goto(FILES_DIR);
+  await ensureListingViewMode(page, "list");
+
+  const item = page.locator('a[aria-label="index.html"]');
+  // The popup handler lives on the small .image-preview Icon, not the full-width list row,
+  // so hover the first preview icon (the quick-download icon can add a second one).
+  await item.locator(".image-preview").first().hover();
+  const popup = page.locator(".popup-preview .text-preview");
+  await popup.waitFor({ state: "visible" });
+  await expect(popup).toContainText("Relative path resolution");
+});
+
 test("full html viewer shows relative images and videos", async ({ page }) => {
   await page.goto(`${FILES_DIR}index.html`);
   const frame = page.frameLocator("iframe.html-content");

frontend/tests/playwright/previews/transcode-helpers.ts

@@ -11,8 +11,9 @@ seg/00000.m4s
 `;
 
 /**
- * Force the static app-config (and live media settings API) to advertise
- * transcoding so the plyr mode menu appears even when the CI image lacks ffmpeg.
+ * Force ffmpeg availability in the static app-config and advertise transcoding via
+ * the live media settings API, so the plyr mode menu appears even when the CI image
+ * lacks ffmpeg. Transcode state is read only from the live API.
  *
  * Hook getElementById so the patch runs when constants.js reads `#app-config`.
  * Only rewrite the JSON text — do not replace `window.globalVars` with a new
@@ -27,10 +28,6 @@ export async function enableTranscodeUi(page: Page) {
         try {
           const cfg = JSON.parse(el.textContent);
           cfg.ffmpegAvailable = true;
-          cfg.transcodeEnabled = true;
-          if (!Array.isArray(cfg.transcodeProfiles) || cfg.transcodeProfiles.length === 0) {
-            cfg.transcodeProfiles = ["quality", "balanced", "datasaver"];
-          }
           el.textContent = JSON.stringify(cfg);
           el.dataset.transcodeUiPatched = "1";
         } catch (_) {
@@ -48,11 +45,14 @@ export async function enableTranscodeUi(page: Page) {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
+      // Matches the PUBLIC UserMedia payload from GET /api/settings/media.
       body: JSON.stringify({
-        enabled: true,
-        profiles: ["quality", "balanced", "datasaver"],
-        maxConcurrentPerUser: 1,
-        hardwareAcceleration: false,
+        transcode: {
+          enabled: true,
+          maxConcurrentPerUser: 1,
+          enabledProfiles: ["quality", "balanced", "datasaver"],
+        },
+        imagePreview: {},
       }),
     });
   });

frontend/vite.config.ts

@@ -8,7 +8,6 @@ import stripLegacyCSS from "./scripts/postcss-strip-legacy.ts";
 import protectTemplateStyles from "./scripts/vite-protect-template-styles.ts";
 
 const isDevBuild = process.env.DEV_BUILD === "true";
-const backendWebDist = path.resolve(import.meta.dirname, "../backend/internal/web/dist");
 // Docker builds skip vue-tsc here; CI type-checks in regular-tests.yaml.
 const skipTypecheck = process.env.SKIP_TYPECHECK === "1";
 
@@ -122,7 +121,6 @@ export default defineConfig(({ command }) => {
     base: "",
     define,
     build: {
-      outDir: backendWebDist,
       emptyOutDir: true,
       // Optimize for watch mode stability
       watch: isDevBuild ? {

makefile

@@ -19,7 +19,7 @@ backend_dev_tool = $$(cd $(BACKEND_BUILD) && go tool -n $(1))
 
 .SILENT:
 
-.PHONY: setup update build build-docker build-docker-media build-backend build-frontend dev run generate-docs
+.PHONY: setup update build build-docker build-docker-media build-backend build-frontend embed-frontend dev run generate-docs
 .PHONY: lint-frontend lint-backend lint test test-backend test-frontend check-all
 .PHONY: check-translations sync-translations test-playwright test-playwright-project test-playwright-performance playwright-base playwright-perf-base perf-check perf-smoke perf-baseline perf-dashboard run-proxy screenshots
 .PHONY: check-icons generate-icons sync-icons
@@ -52,7 +52,13 @@ build-docker-slim:
 build-docker-media:
 	DOCKER_BUILDKIT=1 docker build --build-arg="VERSION=testing" --build-arg="REVISION=n/a" -t gtstef/filebrowser-media -f _docker/Dockerfile.media .
 
-build-backend:
+embed-frontend:
+	@test -d frontend/dist || (echo "Missing frontend/dist; run 'make build-frontend' first." >&2 && exit 1)
+	mkdir -p backend/internal/web/dist
+	find backend/internal/web/dist -mindepth 1 ! -name '.gitkeep' ! -name 'config.generated.yaml' -delete
+	cp -r frontend/dist/. backend/internal/web/dist/
+
+build-backend: embed-frontend
 	@echo "Building backend..."
 	cd backend && go build -o filebrowser --ldflags="-w -s -X 'github.com/gtsteffaniak/filebrowser/backend/internal/version.CommitSHA=testingCommit' -X 'github.com/gtsteffaniak/filebrowser/backend/internal/version.Version=testing'"
 	@echo "✓ Backend built successfully"
@@ -64,6 +70,7 @@ dev: generate-docs generate-icons
 	bash ./scripts/dev.sh
 
 run: build-frontend generate-docs
+	$(MAKE) embed-frontend
 	cd backend && $(call backend_dev_tool,swag) init --output swagger/docs
 	@if [ "$$(uname)" = "Darwin" ]; then \
 		sed -i '' '/func init/,+3d' backend/swagger/docs/docs.go; \
@@ -93,6 +100,7 @@ build-frontend:
 lint-frontend:
 	cd frontend && npm run lint
 	cd frontend && npm run lint:css
+	cd frontend && npm run typecheck
 
 lint-backend:
 	cd backend && GOLANGCI_LINT="$$(cd $(BACKEND_BUILD) && go tool -n golangci-lint)" && "$$GOLANGCI_LINT" run --path-prefix=backend
@@ -137,7 +145,7 @@ PLAYWRIGHT_PROJECTS := sharing settings noauth general jwt proxy previews oidc n
 #   make test-playwright-project PROJECT=previews
 # or:
 #   make test-playwright PROJECT=previews
-test-playwright: build-frontend
+test-playwright: build-frontend embed-frontend
 	cd backend && GOOS=linux go build -o filebrowser .
 ifeq ($(PROJECT),)
 	$(foreach p,$(PLAYWRIGHT_PROJECTS),docker build -t filebrowser-playwright-tests -f _docker/Dockerfile.playwright-$(p) . ;)
@@ -165,7 +173,7 @@ playwright-perf-base:
 		--build-arg PLAYWRIGHT_BROWSERS="$(PERF_PLAYWRIGHT_BROWSERS)" \
 		-f _docker/Dockerfile.playwright-perf-base .
 
-test-playwright-performance: build-frontend
+test-playwright-performance: build-frontend embed-frontend
 	cd backend && GOOS=linux go build -o filebrowser .
 	DOCKER_BUILDKIT=1 docker build --target ci -t filebrowser-playwright-performance \
 		-f _docker/Dockerfile.playwright-performance .
@@ -181,7 +189,9 @@ PERF_BROWSERS ?= chromium,firefox,webkit
 # Only chromium feeds the CI baseline; the others are advisory insight.
 perf-check:
 ifndef PERF_SKIP_BUILD
-	$(MAKE) build-frontend
+	$(MAKE) build-frontend embed-frontend
+else
+	$(MAKE) embed-frontend
 endif
 	cd backend && GOOS=linux go build -o filebrowser .
 ifndef PERF_SKIP_PLAYWRIGHT_BASE
@@ -212,7 +222,7 @@ perf-dashboard:
 # get version from environment variable, for example
 # cd frontend && npm i @playwright/test && npx playwright install --with-deps chromium
 # make PLAYWRIGHT_TEST=settings test-playwright-ui
-test-playwright-ui: build-frontend
+test-playwright-ui: build-frontend embed-frontend
 	docker stop local-playwright-tests || true
 	docker rm local-playwright-tests || true
 	rm -rf _docker/src/tmp/ || true && mkdir -p _docker/src/tmp/
@@ -233,7 +243,7 @@ run-jwt: build-frontend
 # optional: install playwright locally
 # once local playwright server is running, you can also watch the tests interactively with:
 # cd frontend && npx playwright test --project dark-screenshots --ui
-screenshots: build-frontend
+screenshots: build-frontend embed-frontend
 	cd backend && GOOS=linux go build -o filebrowser --ldflags="-w -s -X 'github.com/gtsteffaniak/filebrowser/backend/internal/version.Version=latest'" .
 	@echo "Running screenshots..."
 	cd _docker && docker compose down && docker compose up --build local-playwright-screenshots