feat: import F95 screenshot galleries with AVIF support

frontend/src/api.ts

@@ -47,6 +47,7 @@ export interface Game {
   tags: string[];
   engine: string;
   cover_hash: string | null;
+  gallery_hashes: string[];
   main_version_id: number | null;
   created_at: string;
   ready_versions?: number;

frontend/src/pages/GamePage.tsx

@@ -10,6 +10,7 @@ import { LanguageMenu } from "../ui/LanguageMenu";
 import { aggregateLanguages, versionLanguages } from "./languages";
 import { useUi } from "../ui/Ui";
 import { useUploads } from "../uploads";
+import { GameGallery, mergeGallery, type GalleryImage } from "../ui/GameGallery";
 
 const STATUS: Record<Version["status"], string> = {
   uploading: "Загружается",
@@ -224,6 +225,7 @@ export function GamePage() {
         </div>
       </div>
 
+      {!editing && <GameGallery images={(game.gallery_hashes ?? []).map(hash => ({ hash }))} />}
       <div className="section-title" style={{ marginTop: "var(--space-5)" }}>
         <h2>Версии</h2>
         <span className="count">{game.versions.length}</span>
@@ -365,6 +367,8 @@ function Report({ report }: { report: Record<string, any> | null }) {
 function GameEditor({ game, onDone }: { game: GameDetail; onDone: (changed: boolean) => void }) {
   const [coverHash, setCoverHash] = useState<string | null>(null);
   const [coverPreview, setCoverPreview] = useState<string | null>(null);
+  const [gallery, setGallery] = useState<GalleryImage[]>((game.gallery_hashes ?? []).map(hash => ({ hash })));
+  const [importing, setImporting] = useState(false);
   const [title, setTitle] = useState(game.title);
   const [description, setDescription] = useState(game.description);
   const [tags, setTags] = useState(game.tags.join(", "));
@@ -374,6 +378,7 @@ function GameEditor({ game, onDone }: { game: GameDetail; onDone: (changed: bool
       await api.patch(`/api/games/${game.id}`, {
         title, description, tags: tags.split(",").map((t) => t.trim()).filter(Boolean),
         ...(coverHash ? { cover_hash: coverHash } : {}),
+        gallery_hashes: gallery.map(image => image.hash),
       });
       onDone(true);
     } catch (e) {
@@ -382,20 +387,22 @@ function GameEditor({ game, onDone }: { game: GameDetail; onDone: (changed: bool
   };
   return (
     <form className="editor" onSubmit={(e) => { e.preventDefault(); void save(); }}>
-      <F95Fetch onLoaded={(m) => {
+      <F95Fetch onBusyChange={setImporting} onLoaded={(m) => {
         setTitle(m.title);
         setDescription(m.description);
         setTags(m.tags.join(", "));
         setCoverHash(m.cover_hash);
         setCoverPreview(m.cover_preview);
+        setGallery(items => mergeGallery(items, m.gallery ?? []));
       }} />
       {coverHash && <F95CoverPreview source={coverPreview} editing onRemove={() => { setCoverHash(null); setCoverPreview(null); }} />}
+      <GameGallery images={gallery} onRemove={hash => setGallery(items => items.filter(image => image.hash !== hash))} />
       <label className="field"><span>Название</span><input value={title} onChange={(e) => setTitle(e.target.value)} /></label>
       <label className="field"><span>Описание</span><textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={5} /></label>
       <label className="field"><span>Теги</span><input value={tags} onChange={(e) => setTags(e.target.value)} placeholder="через запятую: романтика, драма" /></label>
       {error && <ErrorNote>{error}</ErrorNote>}
       <div className="actions">
-        <button className="btn btn-primary" disabled={!title.trim()}>Сохранить</button>
+        <button className="btn btn-primary" disabled={!title.trim() || importing || gallery.length > 48}>Сохранить</button>
         <button type="button" className="btn" onClick={() => onDone(false)}>Отмена</button>
       </div>
     </form>

frontend/src/pages/NewGame.tsx

@@ -5,6 +5,7 @@ import { UploadProgress, useUploads } from "../uploads";
 import { ErrorNote, PageHeader } from "../ui/Bits";
 import { F95CoverPreview, F95Fetch } from "../ui/F95Fetch";
 import { Icon } from "../ui/Icon";
+import { GameGallery, type GalleryImage } from "../ui/GameGallery";
 
 const ARCHIVE = /\.(zip|7z|rar|tar|gz|tgz|bz2|xz)$/i;
 
@@ -15,6 +16,8 @@ export function NewGame() {
   const [tags, setTags] = useState("");
   const [coverHash, setCoverHash] = useState<string | null>(null);
   const [coverPreview, setCoverPreview] = useState<string | null>(null);
+  const [gallery, setGallery] = useState<GalleryImage[]>([]);
+  const [importing, setImporting] = useState(false);
   const [file, setFile] = useState<File | null>(null);
   const [over, setOver] = useState(false);
   const { start } = useUploads();
@@ -39,13 +42,14 @@ export function NewGame() {
     e.preventDefault();
     if (!file) return;
     setError("");
-    start({ file, title, description, coverHash, tags: tags.split(",").map((t) => t.trim()).filter(Boolean) });
+    start({ file, title, description, coverHash, galleryHashes: gallery.map(image => image.hash), tags: tags.split(",").map((t) => t.trim()).filter(Boolean) });
     setFile(null);
     setTitle("");
     setDescription("");
     setTags("");
     setCoverHash(null);
     setCoverPreview(null);
+    setGallery([]);
   };
 
   return (
@@ -73,14 +77,16 @@ export function NewGame() {
           )}
         </label>
 
-        <F95Fetch onLoaded={(m) => {
+        <F95Fetch onBusyChange={setImporting} onLoaded={(m) => {
           setTitle(m.title);
           setDescription(m.description);
           setTags(m.tags.join(", "));
           setCoverHash(m.cover_hash);
           setCoverPreview(m.cover_preview);
+          setGallery(m.gallery ?? []);
         }} />
         {coverHash && <F95CoverPreview source={coverPreview} onRemove={() => { setCoverHash(null); setCoverPreview(null); }} />}
+        <GameGallery images={gallery} onRemove={hash => setGallery(items => items.filter(image => image.hash !== hash))} />
         <div className="form-row game-metadata-row">
           <label className="field">
             <span>Название</span>
@@ -99,7 +105,7 @@ export function NewGame() {
 
         {error && <ErrorNote>{error}</ErrorNote>}
         <div className="actions">
-          <button className="btn btn-primary btn-lg" disabled={!file}>
+          <button className="btn btn-primary btn-lg" disabled={!file || importing}>
             <Icon name="upload" size={20} />Загрузить
           </button>
           <button type="button" className="btn btn-ghost" onClick={() => navigate(-1)}>Отмена</button>

frontend/src/styles.css

@@ -730,6 +730,15 @@ input[type="file"] { padding: 0.4rem; }
 .f95-cover-image img { width: 100%; height: 100%; object-fit: contain; }
 .f95-cover-info { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
 .game-metadata-row { align-items: flex-start; }
+.game-gallery { min-width: 0; margin-block: var(--space-3); }
+.game-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-3); }
+.game-gallery-item { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
+.game-gallery-thumb { width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
+.game-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.game-gallery-viewer { width: min(1100px, 94vw); max-height: 94dvh; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
+.game-gallery-viewer::backdrop { background: rgba(0, 0, 0, 0.85); }
+.game-gallery-viewer > img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
+.game-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
 @media (max-width: 520px) {
   .f95-cover { align-items: flex-start; flex-direction: column; }
   .game-metadata-row > .field { flex-basis: 100%; min-width: 0; }

frontend/src/ui/F95Fetch.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { api } from "../api";
+import type { GalleryImage } from "./GameGallery";
 
 export interface F95Meta {
   url: string;
@@ -10,6 +11,8 @@ export interface F95Meta {
   cover_hash: string | null;
   cover_preview: string | null;
   cover_warning: string | null;
+  gallery: GalleryImage[];
+  gallery_warning: string | null;
   auth_required: boolean;
   metadata_available: boolean;
 }
@@ -18,7 +21,7 @@ interface CookieValues { xf_user: string; xf_session: string; cf_clearance: stri
 const EMPTY_COOKIES: CookieValues = { xf_user: "", xf_session: "", cf_clearance: "" };
 
 /** Imports editable metadata and a locally cached cover from an F95zone thread. */
-export function F95Fetch({ onLoaded }: { onLoaded: (m: F95Meta) => void }) {
+export function F95Fetch({ onLoaded, onBusyChange }: { onLoaded: (m: F95Meta) => void; onBusyChange?: (busy: boolean) => void }) {
   const [url, setUrl] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -28,6 +31,7 @@ export function F95Fetch({ onLoaded }: { onLoaded: (m: F95Meta) => void }) {
   const [agent, setAgent] = useState("");
   const [result, setResult] = useState<F95Meta | null>(null);
   const [notice, setNotice] = useState("");
+  useEffect(() => { onBusyChange?.(busy); }, [busy, onBusyChange]);
 
   const decline = () => {
     setNeedsAuth(false);
@@ -96,13 +100,15 @@ export function F95Fetch({ onLoaded }: { onLoaded: (m: F95Meta) => void }) {
         </button>
       </div>
       <span className="hint">Заполнит поля по теме игры. Изменения сохранятся после отправки формы.</span>
-      {busy && <div className="note note-info" role="status">Загружаем данные и обложку из F95zone…</div>}
-      {!busy && result?.metadata_available && <div className={`note ${result.cover_warning ? "note-info" : "note-ok"}`} role="status">
+      {busy && <div className="note note-info" role="status">Загружаем данные, обложку и галерею из F95zone…</div>}
+      {!busy && result?.metadata_available && <div className={`note ${result.cover_warning || result.gallery_warning ? "note-info" : "note-ok"}`} role="status">
         <div><b>Данные из F95zone загружены</b>
           <p className="small">{result.cover_hash && result.cover_preview
             ? "Название, описание и теги заполнены, обложка подготовлена. Проверьте результат перед сохранением."
             : "Название, описание и теги заполнены. Обложку получить не удалось."}</p>
           {result.cover_warning && <p className="small">{result.cover_warning}</p>}
+          {!!result.gallery?.length && <p className="small">Изображений для галереи: {result.gallery.length}.</p>}
+          {result.gallery_warning && <p className="small">{result.gallery_warning}</p>}
         </div>
       </div>}
       {!busy && !result?.metadata_available && warning && <div className="note note-info" role="status">{warning}</div>}

frontend/src/ui/GameGallery.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export interface GalleryImage { hash: string; preview?: string }
+
+export function mergeGallery(current: GalleryImage[], incoming: GalleryImage[]): GalleryImage[] {
+  const images = new Map(current.map(image => [image.hash, image]));
+  for (const image of incoming) images.set(image.hash, image);
+  return [...images.values()];
+}
+
+export function GameGallery({ images, onRemove }: { images: GalleryImage[]; onRemove?: (hash: string) => void }) {
+  const [active, setActive] = useState<string | null>(null);
+  const index = images.findIndex(image => image.hash === active);
+  if (!images.length) return null;
+  return <section className="game-gallery" aria-label="Галерея игры">
+    <div className="section-title"><h2>Галерея</h2><span className="count">{images.length}</span></div>
+    {onRemove && <p className="hint">Изображения сохранятся вместе с игрой. Ненужные кадры можно убрать.</p>}
+    {onRemove && images.length > 48 && <p className="note note-error" role="alert">В галерее можно сохранить до 48 изображений. Уберите лишние кадры.</p>}
+    <div className="game-gallery-grid">
+      {images.map((image, i) => <div className="game-gallery-item" key={image.hash}>
+        <button type="button" className="game-gallery-thumb" onClick={() => setActive(image.hash)} aria-label={`Открыть изображение ${i + 1}`}>
+          <img src={image.preview ?? `/blobs/${image.hash}`} alt={`Кадр ${i + 1}`} loading="lazy" />
+        </button>
+        {onRemove && <button type="button" className="btn btn-ghost btn-sm" onClick={() => onRemove(image.hash)} aria-label={`Убрать изображение ${i + 1}`}>Убрать</button>}
+      </div>)}
+    </div>
+    {index >= 0 && createPortal(<GalleryViewer images={images} index={index}
+      onSelect={i => setActive(images[i].hash)} onClose={() => setActive(null)} />, document.body)}
+  </section>;
+}
+
+function GalleryViewer({ images, index, onSelect, onClose }: {
+  images: GalleryImage[]; index: number; onSelect: (index: number) => void; onClose: () => void;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    dialog.current?.showModal();
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = overflow; };
+  }, []);
+  const move = (step: number) => onSelect((index + step + images.length) % images.length);
+  const image = images[index];
+  return <dialog ref={dialog} className="game-gallery-viewer" aria-label="Просмотр галереи"
+    onCancel={onClose} onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+    onKeyDown={e => {
+      if (e.key === "ArrowLeft") { e.preventDefault(); move(-1); }
+      if (e.key === "ArrowRight") { e.preventDefault(); move(1); }
+    }}>
+    <div className="game-gallery-toolbar">
+      <button type="button" className="btn" onClick={() => move(-1)} disabled={images.length < 2}>Назад</button>
+      <span aria-live="polite">{index + 1} / {images.length}</span>
+      <button type="button" className="btn" onClick={() => move(1)} disabled={images.length < 2}>Далее</button>
+      <button type="button" className="btn" onClick={onClose}>Закрыть</button>
+    </div>
+    <img src={image.preview ?? `/blobs/${image.hash}`} alt={`Кадр ${index + 1}`} />
+  </dialog>;
+}

frontend/src/uploads.tsx

@@ -25,6 +25,7 @@ interface UploadInput {
   description?: string;
   tags?: string[];
   coverHash?: string | null;
+  galleryHashes?: string[];
 }
 
 interface UploadContextValue {
@@ -57,6 +58,7 @@ export function UploadProvider({ children }: { children: ReactNode }) {
             title: input.title?.trim() || file.name.replace(/\.(zip|7z|rar|tar.*)$/i, ""),
             description: input.description ?? "", tags: input.tags ?? [],
             cover_hash: input.coverHash ?? null,
+            gallery_hashes: input.galleryHashes ?? [],
           });
           gameId = game.id;
         }