iu/ds-galo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

feat(profile): add round avatar with upload and cropping

Browse Source 
- backend: user_avatar_objects binding (PG+SQLite), GC preserves avatar blobs,
  avatar service (EXIF-stripping WebP 128/512), public avatar read route
- web: avatar upload/crop on profile, round avatar in header/members/comments/author
- android: avatar upload/crop, round avatar on profile and albums header
- openspec: add-user-avatar proposal/design/specs/tasks
This commit is contained in:
iu
2026-10-12 16:16:47 +03:00
parent 657a04309e
commit 04617d1cdb
49 changed files with 2362 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/AppShell.svelte
+3 -2
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { authApi } from '$lib/api';
import Avatar from './Avatar.svelte';
import Emblem from './Emblem.svelte';
import Icon from './Icon.svelte';
import ThemeSwitcher from './ThemeSwitcher.svelte';
@@ -135,10 +136,10 @@
{#if auth.isAuthenticated}
<a
href="/profile"
class="text-text-muted hover:text-text inline-flex items-center gap-1 text-xs"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-xs"
title="Профиль"
>
<Icon name="settings" class="size-4" />
<Avatar name={auth.user?.name} url={auth.user?.avatar_url} size="size-6" />
<span class="hidden sm:inline">{auth.user?.name ?? 'Профиль'}</span>
</a>
<button
frontend/src/lib/components/Avatar.svelte
+31
View File
@@ -0,0 +1,31 @@
<script lang="ts">
import Icon from './Icon.svelte';
interface Props {
name?: string;
url?: string | null;
/** Tailwind size classes for the round frame, e.g. "size-6". */
size?: string;
class?: string;
}
let { name = '', url = '', size = 'size-6', class: className = '' }: Props = $props();
</script>
{#if url}
<img
src={url}
alt={name || 'Аватар'}
title={name}
class="{size} {className} shrink-0 rounded-full object-cover"
/>
{:else}
<span
class="{size} {className} bg-bg-muted text-text-muted inline-flex shrink-0 items-center justify-center rounded-full"
role="img"
aria-label={name || 'Аватар'}
title={name}
>
<Icon name="person" class="h-3/4 w-3/4" />
</span>
{/if}
frontend/src/lib/components/AvatarCropper.svelte
+191
View File
@@ -0,0 +1,191 @@
<script lang="ts">
import { onMount } from 'svelte';
import Icon from './Icon.svelte';
interface Props {
file: File;
onCancel: () => void;
onConfirm: (blob: Blob) => void;
}
let { file, onCancel, onConfirm }: Props = $props();
// The cropper always produces a square. VIEW is the on-screen picker size;
// OUTPUT is the uploaded resolution.
const VIEW = 320;
const OUTPUT = 512;
let canvas: HTMLCanvasElement | null = null;
let img = $state<HTMLImageElement | null>(null);
let zoom = $state(1);
let offsetX = $state(0);
let offsetY = $state(0);
let dragging = false;
let lastX = 0;
let lastY = 0;
let busy = $state(false);
onMount(() => {
const url = URL.createObjectURL(file);
const image = new Image();
image.onload = () => {
img = image;
clamp();
};
image.src = url;
return () => URL.revokeObjectURL(url);
});
function baseScale(): number {
if (!img) return 1;
return Math.max(VIEW / img.naturalWidth, VIEW / img.naturalHeight);
}
function scale(): number {
return baseScale() * zoom;
}
function drawn(): { w: number; h: number } {
if (!img) return { w: VIEW, h: VIEW };
const s = scale();
return { w: img.naturalWidth * s, h: img.naturalHeight * s };
}
function clamp() {
const { w, h } = drawn();
const mx = Math.max(0, (w - VIEW) / 2);
const my = Math.max(0, (h - VIEW) / 2);
offsetX = Math.min(mx, Math.max(-mx, offsetX));
offsetY = Math.min(my, Math.max(-my, offsetY));
}
function draw() {
if (!canvas || !img) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const { w, h } = drawn();
const x = (VIEW - w) / 2 + offsetX;
const y = (VIEW - h) / 2 + offsetY;
ctx.clearRect(0, 0, VIEW, VIEW);
ctx.drawImage(img, x, y, w, h);
// Dim everything outside the circular crop.
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, VIEW, VIEW);
ctx.arc(VIEW / 2, VIEW / 2, VIEW / 2 - 1, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(0,0,0,0.55)';
ctx.fill('evenodd');
ctx.restore();
ctx.beginPath();
ctx.arc(VIEW / 2, VIEW / 2, VIEW / 2 - 1, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(255,255,255,0.85)';
ctx.lineWidth = 2;
ctx.stroke();
}
$effect(() => {
img;
zoom;
offsetX;
offsetY;
draw();
});
function onPointerDown(e: PointerEvent) {
dragging = true;
lastX = e.clientX;
lastY = e.clientY;
(e.currentTarget as HTMLCanvasElement).setPointerCapture(e.pointerId);
}
function onPointerMove(e: PointerEvent) {
if (!dragging) return;
offsetX += e.clientX - lastX;
offsetY += e.clientY - lastY;
lastX = e.clientX;
lastY = e.clientY;
clamp();
}
function onPointerUp(e: PointerEvent) {
dragging = false;
try {
(e.currentTarget as HTMLCanvasElement).releasePointerCapture(e.pointerId);
} catch {
/* already released */
}
}
function onZoom(e: Event) {
zoom = Number((e.currentTarget as HTMLInputElement).value);
clamp();
}
async function confirm() {
if (!img || !canvas) return;
busy = true;
try {
const s = scale();
const side = VIEW / s;
const cx = img.naturalWidth / 2 - offsetX / s;
const cy = img.naturalHeight / 2 - offsetY / s;
const out = document.createElement('canvas');
out.width = OUTPUT;
out.height = OUTPUT;
const octx = out.getContext('2d');
if (!octx) return;
octx.drawImage(img, cx - side / 2, cy - side / 2, side, side, 0, 0, OUTPUT, OUTPUT);
const blob = await new Promise<Blob | null>((resolve) =>
out.toBlob(resolve, 'image/jpeg', 0.9)
);
if (blob) onConfirm(blob);
} finally {
busy = false;
}
}
</script>
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
role="dialog"
aria-modal="true"
aria-label="Кадрирование аватара"
>
<div class="border-border bg-bg-elevated w-full max-w-sm rounded-xl border p-4">
<h2 class="mb-3 font-semibold">Кадрирование</h2>
<canvas
bind:this={canvas}
width={VIEW}
height={VIEW}
class="bg-bg mx-auto block touch-none rounded-lg"
style="width: {VIEW}px; height: {VIEW}px;"
onpointerdown={onPointerDown}
onpointermove={onPointerMove}
onpointerup={onPointerUp}
onpointercancel={onPointerUp}
></canvas>
<label class="mt-3 block">
<span class="text-text-muted mb-1 block text-xs">Масштаб</span>
<input type="range" min="1" max="3" step="0.01" value={zoom} oninput={onZoom} class="w-full" />
</label>
<div class="mt-4 flex justify-end gap-2">
<button
type="button"
class="border-border text-text inline-flex items-center gap-1.5 rounded-lg border px-4 py-2 text-sm"
onclick={onCancel}
>
<Icon name="close" class="size-4" />
Отмена
</button>
<button
type="button"
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm disabled:opacity-50"
disabled={busy}
onclick={confirm}
>
<Icon name="check" class="size-4" />
Сохранить
</button>
</div>
</div>
</div>
frontend/src/lib/components/Comments.svelte
+4 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { api } from '$lib/api';
import Avatar from './Avatar.svelte';
import Icon from './Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
import type { Comment } from '$lib/types';
@@ -56,8 +57,9 @@
<div class="mt-2">
{#each comments as comment (comment.id)}
<div class="border-border mb-1 flex items-start justify-between gap-2 border-b py-1 text-sm">
<span class="text-text">
<strong>{comment.user.name}</strong>: {comment.text}
<span class="text-text inline-flex items-start gap-2">
<Avatar name={comment.user.name} url={comment.user.avatar_url} size="size-6" />
<span><strong>{comment.user.name}</strong>: {comment.text}</span>
</span>
{#if auth.user?.id === comment.user_id}
<button
frontend/src/lib/components/PhotoPanel.svelte
+2 -1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { api, photosApi, tagsApi } from '$lib/api';
import Avatar from './Avatar.svelte';
import Icon from './Icon.svelte';
import Comments from './Comments.svelte';
import ConfirmDialog from './ConfirmDialog.svelte';
@@ -396,7 +397,7 @@
</button>
{/snippet}
<dl class="space-y-1">
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
<div class={metaRow}><span>Автор</span><span class="text-text inline-flex items-center gap-2"><Avatar name={photo.uploader.name} url={photo.uploader.avatar_url} size="size-6" />{photo.uploader.name}</span></div>
<div class={metaRow}><span>Файл</span><span class="text-text">{formatSize(photo.size)}</span></div>
<div class={metaRow}><span>Тип</span><span class="text-text">{photo.mime_type}</span></div>
<div class={metaRow}>