+65 -22

.claude/commands/status-update.md

··· 1 1 # status update 2 2 3 3 - update STATUS.md after completing significant work. 3 3 + update STATUS.md to reflect recent work. 4 4 5 5 - ## when to update 5 5 + ## workflow 6 6 + 7 7 + ### 1. understand current state 6 8 7 7 - after shipping something notable: 8 8 - - new features or endpoints 9 9 - - bug fixes worth documenting 10 10 - - architectural changes 11 11 - - deployment/infrastructure changes 12 12 - - incidents and their resolutions 9 9 + read STATUS.md to understand: 10 10 + - what's already documented in `## recent work` 11 11 + - the last update date (noted at the bottom) 12 12 + - current priorities and known issues 13 13 + 14 14 + ### 2. find undocumented work 15 15 + 16 16 + ```bash 17 17 + # find the last STATUS.md update 18 18 + git log --oneline -1 -- STATUS.md 19 19 + 20 20 + # get all commits since then 21 21 + git log --oneline <last-status-commit>..HEAD 22 22 + ``` 23 23 + 24 24 + for each significant commit or PR: 25 25 + - read the commit message and changed files 26 26 + - understand WHY the change was made, not just what changed 27 27 + - note architectural decisions, trade-offs, or lessons learned 28 28 + 29 29 + ### 3. decide what to document 30 30 + 31 31 + not everything needs documentation. focus on: 32 32 + - **features**: new capabilities users or developers can use 33 33 + - **fixes**: bugs that affected users, especially if they might recur 34 34 + - **architecture**: changes to how systems connect or data flows 35 35 + - **decisions**: trade-offs made and why (future readers need context) 36 36 + - **incidents**: what broke, why, and how it was resolved 37 37 + 38 38 + skip: 39 39 + - routine maintenance (dependency bumps, typo fixes) 40 40 + - work-in-progress that didn't ship 41 41 + - changes already well-documented in the PR 42 42 + 43 43 + ### 4. write the update 44 44 + 45 45 + add a new subsection under `## recent work` following existing patterns: 13 46 14 14 - **tip**: after running `/deploy`, consider running `/status-update` to document what shipped. 47 47 + ```markdown 48 48 + #### brief title (PRs #NNN, date) 15 49 16 16 - ## how to update 50 50 + **why**: the problem or motivation (1-2 sentences) 17 51 18 18 - 1. add a new subsection under `## recent work` with today's date 19 19 - 2. describe what shipped, why it matters, and any relevant PR numbers 20 20 - 3. update `## immediate priorities` if priorities changed 21 21 - 4. update `## technical state` if architecture changed 52 52 + **what shipped**: 53 53 + - concrete changes users or developers will notice 54 54 + - link to relevant docs if applicable 22 55 23 23 - ## structure 56 56 + **technical notes** (if architectural): 57 57 + - decisions made and why 58 58 + - trade-offs accepted 59 59 + ``` 24 60 25 25 - STATUS.md follows this structure: 26 26 - - **long-term vision** - why the project exists 27 27 - - **recent work** - chronological log of what shipped (newest first) 28 28 - - **immediate priorities** - what's next 29 29 - - **technical state** - architecture, what's working, known issues 61 61 + ### 5. update other sections if needed 30 62 31 31 - old content is automatically archived to `.status_history/` - you don't need to manage this. 63 63 + - `## priorities` - if focus has shifted 64 64 + - `## known issues` - if bugs were fixed or discovered 65 65 + - `## technical state` - if architecture changed 32 66 33 67 ## tone 34 68 35 35 - direct, technical, honest about limitations. useful for someone with no prior context. 69 69 + write for someone with no prior context who needs to understand: 70 70 + - what changed 71 71 + - why it matters 72 72 + - why this approach was chosen over alternatives 73 73 + 74 74 + be direct and technical. avoid marketing language. 75 75 + 76 76 + ## after updating 77 77 + 78 78 + commit the STATUS.md changes and open a PR for review.

+22 -1

STATUS.md

··· 79 79 80 80 --- 81 81 82 82 + #### auth stabilization (PRs #734-736, Jan 6-7) 83 83 + 84 84 + **why**: multi-account support introduced edge cases where auth state could become inconsistent between frontend components, and sessions could outlive their refresh tokens. 85 85 + 86 86 + **session expiry alignment** (PR #734): 87 87 + - sessions now track refresh token lifetime and respect it during validation 88 88 + - prevents sessions from appearing valid after their underlying OAuth grant expires 89 89 + - dev token expiration handling aligned with same pattern 90 90 + 91 91 + **queue auth boundary fix** (PR #735): 92 92 + - queue component now uses shared layout auth state instead of localStorage session IDs 93 93 + - fixes race condition where queue could attempt authenticated requests before layout resolved auth 94 94 + - ensures remote queue snapshots don't inherit local update flags during hydration 95 95 + 96 96 + **playlist cover upload fix** (PR #736): 97 97 + - `R2Storage.save()` was rejecting `BytesIO` objects due to beartype's strict `BinaryIO` protocol checking 98 98 + - changed type hint to `BinaryIO | BytesIO` to explicitly accept both 99 99 + - found via Logfire: only 2 failures in production, both on Jan 3 100 100 + 101 101 + --- 102 102 + 82 103 #### artist bio links (PRs #700-701, Jan 2) 83 104 84 105 **links in artist bios now render as clickable** - supports full URLs and bare domains (e.g., "example.com"): ··· 347 368 348 369 --- 349 370 350 350 - this is a living document. last updated 2026-01-06. 371 371 + this is a living document. last updated 2026-01-07.

+5 -4

backend/src/backend/_internal/atproto/client.py

··· 11 11 12 12 from backend._internal import Session as AuthSession 13 13 from backend._internal import get_oauth_client, get_session, update_session_tokens 14 14 - from backend._internal.auth import get_refresh_token_lifetime_days 14 14 + from backend._internal.auth import ( 15 15 + get_client_auth_method, 16 16 + get_refresh_token_lifetime_days, 17 17 + ) 15 18 16 19 logger = logging.getLogger(__name__) 17 20 ··· 125 128 "dpop_authserver_nonce": refreshed_session.dpop_authserver_nonce, 126 129 "dpop_pds_nonce": refreshed_session.dpop_pds_nonce or "", 127 130 } 128 128 - client_auth_method = ( 129 129 - updated_oauth_data.get("client_auth_method") or "public" 130 130 - ) 131 131 + client_auth_method = get_client_auth_method(updated_oauth_data) 131 132 refresh_lifetime_days = get_refresh_token_lifetime_days(client_auth_method) 132 133 refresh_expires_at = datetime.now(UTC) + timedelta( 133 134 days=refresh_lifetime_days

+5 -2

backend/src/backend/_internal/background.py

··· 92 92 ) 93 93 yield docket 94 94 finally: 95 95 - # cancel the worker task and wait for it to finish 95 95 + # cancel the worker task with timeout to avoid hanging on shutdown 96 96 if worker_task: 97 97 worker_task.cancel() 98 98 try: 99 99 - await worker_task 99 99 + # wait briefly for clean shutdown, but don't block forever 100 100 + await asyncio.wait_for(worker_task, timeout=2.0) 101 101 + except TimeoutError: 102 102 + logger.warning("docket worker did not stop within timeout") 100 103 except asyncio.CancelledError: 101 104 logger.debug("docket worker task cancelled") 102 105 # clear global after worker is fully stopped

+2 -1

backend/src/backend/api/tracks/metadata_service.py

··· 6 6 from io import BytesIO 7 7 from typing import TYPE_CHECKING, Any 8 8 9 9 - from fastapi import HTTPException, UploadFile 9 9 + from fastapi import HTTPException 10 10 from sqlalchemy.ext.asyncio import AsyncSession 11 11 from sqlalchemy.orm import attributes 12 12 + from starlette.datastructures import UploadFile 12 13 13 14 from backend._internal.atproto.handles import resolve_handle 14 15 from backend._internal.image import ImageFormat

+22 -4

backend/src/backend/api/tracks/mutations.py

··· 180 180 Form(description="JSON object for supporter gating, or 'null' to remove"), 181 181 ] = None, 182 182 image: UploadFile | None = File(None), 183 183 + remove_image: Annotated[ 184 184 + str | None, 185 185 + Form(description="Set to 'true' to remove artwork"), 186 186 + ] = None, 183 187 ) -> TrackResponse: 184 188 """Update track metadata (only by owner).""" 185 189 result = await db.execute( ··· 250 254 251 255 image_changed = False 252 256 image_url = None 253 253 - if image and image.filename: 257 257 + 258 258 + # handle image removal 259 259 + if remove_image and remove_image.lower() == "true" and track.image_id: 260 260 + # only delete image from R2 if album doesn't share it 261 261 + album_shares_image = ( 262 262 + track.album_rel and track.album_rel.image_id == track.image_id 263 263 + ) 264 264 + if not album_shares_image: 265 265 + with contextlib.suppress(Exception): 266 266 + await storage.delete(track.image_id) 267 267 + track.image_id = None 268 268 + track.image_url = None 269 269 + image_changed = True 270 270 + elif image and image.filename: 271 271 + # handle image upload/replacement 254 272 image_id, image_url = await upload_track_image(image) 255 273 256 274 if track.image_id: ··· 305 323 try: 306 324 await _update_atproto_record(track, auth_session, image_url) 307 325 except Exception as exc: 308 308 - logger.error( 309 309 - f"failed to update ATProto record for track {track.id}: {exc}", 310 310 - exc_info=True, 326 326 + logfire.exception( 327 327 + "failed to update ATProto record", 328 328 + track_id=track.id, 311 329 ) 312 330 await db.rollback() 313 331 raise HTTPException(

+10 -3

backend/src/backend/main.py

··· 1 1 """relay fastapi application.""" 2 2 3 3 + import asyncio 3 4 import logging 4 5 import re 5 6 import warnings ··· 157 158 app.state.docket = docket 158 159 yield 159 160 160 160 - # shutdown: cleanup resources 161 161 - await notification_service.shutdown() 162 162 - await queue_service.shutdown() 161 161 + # shutdown: cleanup resources with timeouts to avoid hanging 162 162 + try: 163 163 + await asyncio.wait_for(notification_service.shutdown(), timeout=2.0) 164 164 + except TimeoutError: 165 165 + logging.warning("notification_service.shutdown() timed out") 166 166 + try: 167 167 + await asyncio.wait_for(queue_service.shutdown(), timeout=2.0) 168 168 + except TimeoutError: 169 169 + logging.warning("queue_service.shutdown() timed out") 163 170 164 171 165 172 app = FastAPI(

+3 -2

backend/src/backend/storage/r2.py

··· 2 2 3 3 import time 4 4 from collections.abc import Callable 5 5 + from io import BytesIO 5 6 from pathlib import Path 6 7 from typing import BinaryIO 7 8 ··· 120 121 121 122 async def save( 122 123 self, 123 123 - file: BinaryIO, 124 124 + file: BinaryIO | BytesIO, 124 125 filename: str, 125 126 progress_callback: Callable[[float], None] | None = None, 126 127 ) -> str: ··· 444 445 445 446 async def save_gated( 446 447 self, 447 447 - file: BinaryIO, 448 448 + file: BinaryIO | BytesIO, 448 449 filename: str, 449 450 progress_callback: Callable[[float], None] | None = None, 450 451 ) -> str:

+53

backend/tests/test_storage_types.py

··· 1 1 + """test storage type hints accept BytesIO. 2 2 + 3 3 + regression test for: https://github.com/zzstoatzz/plyr.fm/pull/736 4 4 + beartype was rejecting BytesIO for BinaryIO type hint in R2Storage.save() 5 5 + """ 6 6 + 7 7 + from io import BytesIO 8 8 + from unittest.mock import AsyncMock, patch 9 9 + 10 10 + from backend.storage.r2 import R2Storage 11 11 + 12 12 + 13 13 + async def test_r2_save_accepts_bytesio(): 14 14 + """R2Storage.save() should accept BytesIO objects. 15 15 + 16 16 + BytesIO is the standard way to create in-memory binary streams, 17 17 + and is used throughout the codebase for image uploads. 18 18 + 19 19 + This test verifies that the type hint on save() is compatible 20 20 + with BytesIO, which beartype validates at runtime. 21 21 + """ 22 22 + # create a minimal image-like BytesIO 23 23 + image_data = b"\x89PNG\r\n\x1a\n" + b"\x00" * 100 # fake PNG header 24 24 + file_obj = BytesIO(image_data) 25 25 + 26 26 + # mock the R2 client internals 27 27 + with ( 28 28 + patch.object(R2Storage, "__init__", lambda self: None), 29 29 + patch("backend.storage.r2.hash_file_chunked", return_value="abc123def456"), 30 30 + ): 31 31 + storage = R2Storage() 32 32 + storage.async_session = AsyncMock() 33 33 + storage.image_bucket_name = "test-images" 34 34 + storage.audio_bucket_name = "test-audio" 35 35 + 36 36 + # mock the async context manager for S3 client 37 37 + mock_client = AsyncMock() 38 38 + mock_client.upload_fileobj = AsyncMock() 39 39 + 40 40 + mock_cm = AsyncMock() 41 41 + mock_cm.__aenter__ = AsyncMock(return_value=mock_client) 42 42 + mock_cm.__aexit__ = AsyncMock(return_value=None) 43 43 + storage.async_session.client = lambda *args, **kwargs: mock_cm 44 44 + storage.endpoint_url = "https://test.r2.dev" 45 45 + storage.aws_access_key_id = "test" 46 46 + storage.aws_secret_access_key = "test" 47 47 + 48 48 + # this should NOT raise a beartype error 49 49 + # before the fix: BeartypeCallHintParamViolation 50 50 + file_id = await storage.save(file_obj, "test.png") 51 51 + 52 52 + assert file_id == "abc123def456"[:16] 53 53 + mock_client.upload_fileobj.assert_called_once()

+53

docs/frontend/state-management.md

··· 133 133 2. no console errors about "Cannot access X before initialization" 134 134 3. UI reflects current variable value 135 135 136 136 + ### waiting for async conditions with `$effect` 137 137 + 138 138 + when you need to perform an action after some async condition is met (like audio being ready), **don't rely on event listeners** - they may not attach in time if the target element doesn't exist yet or the event fires before your listener is registered. 139 139 + 140 140 + **instead, use a reactive `$effect` that watches for the conditions to be met:** 141 141 + 142 142 + ```typescript 143 143 + // ❌ WRONG - event listener may not attach in time 144 144 + onMount(() => { 145 145 + queue.playNow(track); // triggers async loading in Player component 146 146 + 147 147 + // player.audioElement might be undefined here! 148 148 + // even if it exists, loadedmetadata may fire before this runs 149 149 + player.audioElement?.addEventListener('loadedmetadata', () => { 150 150 + player.audioElement.currentTime = seekTime; 151 151 + }); 152 152 + }); 153 153 + ``` 154 154 + 155 155 + ```typescript 156 156 + // ✅ CORRECT - reactive effect waits for conditions 157 157 + let pendingSeekMs = $state<number | null>(null); 158 158 + 159 159 + onMount(() => { 160 160 + pendingSeekMs = 11000; // store the pending action 161 161 + queue.playNow(track); // trigger the async operation 162 162 + }); 163 163 + 164 164 + // effect runs whenever dependencies change, including when audio becomes ready 165 165 + $effect(() => { 166 166 + if ( 167 167 + pendingSeekMs !== null && 168 168 + player.currentTrack?.id === track.id && 169 169 + player.audioElement && 170 170 + player.audioElement.readyState >= 1 171 171 + ) { 172 172 + player.audioElement.currentTime = pendingSeekMs / 1000; 173 173 + pendingSeekMs = null; // clear after performing action 174 174 + } 175 175 + }); 176 176 + ``` 177 177 + 178 178 + **why this works:** 179 179 + - `$effect` re-runs whenever any of its dependencies change 180 180 + - when `player.audioElement` becomes available and ready, the effect fires 181 181 + - no race condition - the effect will catch the ready state even if it happened "in the past" 182 182 + - setting `pendingSeekMs = null` ensures the action only runs once 183 183 + 184 184 + **use this pattern when:** 185 185 + - waiting for DOM elements to exist 186 186 + - waiting for async operations to complete 187 187 + - coordinating between components that load independently 188 188 + 136 189 ## global state management 137 190 138 191 ### overview

+5 -3

frontend/src/lib/queue.svelte.ts

··· 2 2 import type { QueueResponse, QueueState, Track } from './types'; 3 3 import { API_URL } from './config'; 4 4 import { APP_BROADCAST_PREFIX } from './branding'; 5 5 + import { auth } from './auth.svelte'; 5 6 6 7 const SYNC_DEBOUNCE_MS = 250; 7 8 ··· 141 142 142 143 private isAuthenticated(): boolean { 143 144 if (!browser) return false; 144 144 - return !!localStorage.getItem('session_id'); 145 145 + return auth.isAuthenticated; 145 146 } 146 147 147 148 async fetchQueue(force = false) { ··· 188 189 this.revision = data.revision; 189 190 this.etag = newEtag; 190 191 192 192 + this.lastUpdateWasLocal = false; 191 193 this.applySnapshot(data); 192 194 } catch (error) { 193 195 console.error('failed to fetch queue:', error); ··· 414 416 this.schedulePush(); 415 417 } 416 418 417 417 - playNow(track: Track) { 418 418 - this.lastUpdateWasLocal = true; 419 419 + playNow(track: Track, autoPlay = true) { 420 420 + this.lastUpdateWasLocal = autoPlay; 419 421 const upNext = this.tracks.slice(this.currentIndex + 1); 420 422 this.tracks = [track, ...upNext]; 421 423 this.originalOrder = [...this.tracks];

+3

frontend/src/routes/+layout.svelte

··· 47 47 preferences.data = data.preferences; 48 48 // fetch explicit images list (public, no auth needed) 49 49 moderation.initialize(); 50 50 + if (data.isAuthenticated && queue.revision === null) { 51 51 + void queue.fetchQueue(); 52 52 + } 50 53 } 51 54 }); 52 55

+359 -96

frontend/src/routes/portal/+page.svelte

··· 28 28 let editFeaturedArtists = $state<FeaturedArtist[]>([]); 29 29 let editTags = $state<string[]>([]); 30 30 let editImageFile = $state<File | null>(null); 31 31 + let editImagePreviewUrl = $state<string | null>(null); 32 32 + let editRemoveImage = $state(false); 31 33 let editSupportGate = $state(false); 32 34 let hasUnresolvedEditFeaturesInput = $state(false); 33 35 ··· 328 330 editFeaturedArtists = []; 329 331 editTags = []; 330 332 editImageFile = null; 333 333 + if (editImagePreviewUrl) { 334 334 + URL.revokeObjectURL(editImagePreviewUrl); 335 335 + } 336 336 + editImagePreviewUrl = null; 337 337 + editRemoveImage = false; 331 338 editSupportGate = false; 332 339 } 333 340 ··· 351 358 } else { 352 359 formData.append('support_gate', 'null'); 353 360 } 354 354 - if (editImageFile) { 361 361 + // handle artwork: remove, replace, or leave unchanged 362 362 + if (editRemoveImage) { 363 363 + formData.append('remove_image', 'true'); 364 364 + } else if (editImageFile) { 355 365 formData.append('image', editImageFile); 356 366 } 357 367 ··· 730 740 /> 731 741 </div> 732 742 <div class="edit-field-group"> 733 733 - <label for="edit-image" class="edit-label">artwork (optional)</label> 734 734 - {#if track.image_url && !editImageFile} 735 735 - <div class="current-image-preview"> 736 736 - <img src={track.image_url} alt="current artwork" /> 737 737 - <span class="current-image-label">current artwork</span> 738 738 - </div> 739 739 - {/if} 740 740 - <input 741 741 - id="edit-image" 742 742 - type="file" 743 743 - accept=".jpg,.jpeg,.png,.webp,.gif,image/jpeg,image/png,image/webp,image/gif" 744 744 - onchange={(e) => { 745 745 - const target = e.target as HTMLInputElement; 746 746 - editImageFile = target.files?.[0] ?? null; 747 747 - }} 748 748 - class="edit-input" 749 749 - /> 750 750 - {#if editImageFile} 751 751 - <p class="file-info">{editImageFile.name} (will replace current)</p> 752 752 - {/if} 743 743 + <span class="edit-label">artwork (optional)</span> 744 744 + <div class="artwork-editor"> 745 745 + {#if editImagePreviewUrl} 746 746 + <!-- New image selected - show preview --> 747 747 + <div class="artwork-preview"> 748 748 + <img src={editImagePreviewUrl} alt="new artwork preview" /> 749 749 + <div class="artwork-preview-overlay"> 750 750 + <button 751 751 + type="button" 752 752 + class="artwork-action-btn" 753 753 + onclick={() => { 754 754 + editImageFile = null; 755 755 + if (editImagePreviewUrl) { 756 756 + URL.revokeObjectURL(editImagePreviewUrl); 757 757 + } 758 758 + editImagePreviewUrl = null; 759 759 + }} 760 760 + title="remove selection" 761 761 + > 762 762 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 763 763 + <line x1="18" y1="6" x2="6" y2="18"></line> 764 764 + <line x1="6" y1="6" x2="18" y2="18"></line> 765 765 + </svg> 766 766 + </button> 767 767 + </div> 768 768 + </div> 769 769 + <span class="artwork-status">new artwork selected</span> 770 770 + {:else if editRemoveImage} 771 771 + <!-- User chose to remove artwork --> 772 772 + <div class="artwork-removed"> 773 773 + <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> 774 774 + <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> 775 775 + <line x1="9" y1="9" x2="15" y2="15"></line> 776 776 + <line x1="15" y1="9" x2="9" y2="15"></line> 777 777 + </svg> 778 778 + <span>artwork will be removed</span> 779 779 + <button 780 780 + type="button" 781 781 + class="undo-remove-btn" 782 782 + onclick={() => { editRemoveImage = false; }} 783 783 + > 784 784 + undo 785 785 + </button> 786 786 + </div> 787 787 + {:else if track.image_url} 788 788 + <!-- Current artwork exists --> 789 789 + <div class="artwork-preview"> 790 790 + <img src={track.image_url} alt="current artwork" /> 791 791 + <div class="artwork-preview-overlay"> 792 792 + <button 793 793 + type="button" 794 794 + class="artwork-action-btn" 795 795 + onclick={() => { editRemoveImage = true; }} 796 796 + title="remove artwork" 797 797 + > 798 798 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 799 799 + <polyline points="3 6 5 6 21 6"></polyline> 800 800 + <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> 801 801 + </svg> 802 802 + </button> 803 803 + </div> 804 804 + </div> 805 805 + <span class="artwork-status current">current artwork</span> 806 806 + {:else} 807 807 + <!-- No artwork --> 808 808 + <div class="artwork-empty"> 809 809 + <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> 810 810 + <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> 811 811 + <circle cx="8.5" cy="8.5" r="1.5"></circle> 812 812 + <polyline points="21 15 16 10 5 21"></polyline> 813 813 + </svg> 814 814 + <span>no artwork</span> 815 815 + </div> 816 816 + {/if} 817 817 + {#if !editRemoveImage} 818 818 + <label class="artwork-upload-btn"> 819 819 + <input 820 820 + type="file" 821 821 + accept=".jpg,.jpeg,.png,.webp,.gif,image/jpeg,image/png,image/webp,image/gif" 822 822 + onchange={(e) => { 823 823 + const target = e.target as HTMLInputElement; 824 824 + const file = target.files?.[0]; 825 825 + if (file) { 826 826 + editImageFile = file; 827 827 + if (editImagePreviewUrl) { 828 828 + URL.revokeObjectURL(editImagePreviewUrl); 829 829 + } 830 830 + editImagePreviewUrl = URL.createObjectURL(file); 831 831 + } 832 832 + }} 833 833 + /> 834 834 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 835 835 + <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> 836 836 + <polyline points="17 8 12 3 7 8"></polyline> 837 837 + <line x1="12" y1="3" x2="12" y2="15"></line> 838 838 + </svg> 839 839 + {track.image_url || editImagePreviewUrl ? 'replace' : 'upload'} 840 840 + </label> 841 841 + {/if} 842 842 + </div> 753 843 </div> 754 844 {#if atprotofansEligible || track.support_gate} 755 845 <div class="edit-field-group"> ··· 771 861 </div> 772 862 <div class="edit-actions"> 773 863 <button 774 774 - class="action-btn save-btn" 775 775 - onclick={() => saveTrackEdit(track.id)} 776 776 - disabled={hasUnresolvedEditFeaturesInput} 777 777 - title={hasUnresolvedEditFeaturesInput ? "please select or clear featured artist" : "save changes"} 864 864 + type="button" 865 865 + class="edit-cancel-btn" 866 866 + onclick={cancelEdit} 778 867 > 779 779 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> 780 780 - <polyline points="20 6 9 17 4 12"></polyline> 781 781 - </svg> 868 868 + cancel 782 869 </button> 783 870 <button 784 784 - class="action-btn cancel-btn" 785 785 - onclick={cancelEdit} 786 786 - title="cancel" 871 871 + type="button" 872 872 + class="edit-save-btn" 873 873 + onclick={() => saveTrackEdit(track.id)} 874 874 + disabled={hasUnresolvedEditFeaturesInput} 875 875 + title={hasUnresolvedEditFeaturesInput ? "please select or clear featured artist" : "save changes"} 787 876 > 788 788 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> 789 789 - <line x1="18" y1="6" x2="6" y2="18"></line> 790 790 - <line x1="6" y1="6" x2="18" y2="18"></line> 791 791 - </svg> 877 877 + save changes 792 878 </button> 793 879 </div> 794 880 </div> ··· 880 966 </div> 881 967 <div class="track-actions"> 882 968 <button 883 883 - class="action-btn edit-btn" 969 969 + type="button" 970 970 + class="track-action-btn edit" 884 971 onclick={() => startEditTrack(track)} 885 885 - title="edit track" 886 972 > 887 887 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 973 973 + <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 888 974 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> 889 975 <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path> 890 976 </svg> 977 977 + edit 891 978 </button> 892 979 <button 893 893 - class="action-btn delete-btn" 980 980 + type="button" 981 981 + class="track-action-btn delete" 894 982 onclick={() => deleteTrack(track.id, track.title)} 895 895 - title="delete track" 896 983 > 897 897 - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 984 984 + <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 898 985 <polyline points="3 6 5 6 21 6"></polyline> 899 986 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> 900 987 </svg> 988 988 + delete 901 989 </button> 902 990 </div> 903 991 {/if} ··· 1451 1539 cursor: not-allowed; 1452 1540 } 1453 1541 1454 1454 - .file-info { 1455 1455 - margin-top: 0.5rem; 1456 1456 - font-size: var(--text-sm); 1457 1457 - color: var(--text-muted); 1458 1458 - } 1459 1459 - 1460 1460 - button { 1542 1542 + /* form submit buttons only */ 1543 1543 + form button[type="submit"] { 1461 1544 width: 100%; 1462 1545 padding: 0.75rem; 1463 1546 background: var(--accent); ··· 1471 1554 transition: all 0.2s; 1472 1555 } 1473 1556 1474 1474 - button:hover:not(:disabled) { 1557 1557 + form button[type="submit"]:hover:not(:disabled) { 1475 1558 background: var(--accent-hover); 1476 1559 transform: translateY(-1px); 1477 1560 box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); 1478 1561 } 1479 1562 1480 1480 - button:disabled { 1563 1563 + form button[type="submit"]:disabled { 1481 1564 opacity: 0.5; 1482 1565 cursor: not-allowed; 1483 1566 transform: none; 1484 1567 } 1485 1568 1486 1486 - button:active:not(:disabled) { 1569 1569 + form button[type="submit"]:active:not(:disabled) { 1487 1570 transform: translateY(0); 1488 1571 } 1489 1572 ··· 1787 1870 align-self: flex-start; 1788 1871 } 1789 1872 1790 1790 - .action-btn { 1791 1791 - display: flex; 1873 1873 + /* track action buttons (edit/delete in non-editing state) */ 1874 1874 + .track-action-btn { 1875 1875 + display: inline-flex; 1792 1876 align-items: center; 1793 1793 - justify-content: center; 1794 1794 - width: 32px; 1795 1795 - height: 32px; 1796 1796 - padding: 0; 1877 1877 + gap: 0.35rem; 1878 1878 + padding: 0.4rem 0.65rem; 1797 1879 background: transparent; 1798 1880 border: 1px solid var(--border-default); 1799 1799 - border-radius: var(--radius-base); 1881 1881 + border-radius: var(--radius-full); 1800 1882 color: var(--text-tertiary); 1883 1883 + font-size: var(--text-sm); 1884 1884 + font-family: inherit; 1885 1885 + font-weight: 500; 1801 1886 cursor: pointer; 1802 1887 transition: all 0.15s; 1803 1803 - flex-shrink: 0; 1888 1888 + white-space: nowrap; 1889 1889 + width: auto; 1890 1890 + } 1891 1891 + 1892 1892 + .track-action-btn:hover { 1893 1893 + transform: none; 1894 1894 + box-shadow: none; 1895 1895 + border-color: var(--border-emphasis); 1896 1896 + color: var(--text-secondary); 1897 1897 + } 1898 1898 + 1899 1899 + .track-action-btn.delete:hover { 1900 1900 + color: var(--text-secondary); 1901 1901 + } 1902 1902 + 1903 1903 + /* edit mode action buttons */ 1904 1904 + .edit-actions { 1905 1905 + display: flex; 1906 1906 + gap: 0.75rem; 1907 1907 + justify-content: flex-end; 1908 1908 + padding-top: 0.75rem; 1909 1909 + border-top: 1px solid var(--border-subtle); 1910 1910 + margin-top: 0.5rem; 1804 1911 } 1805 1912 1806 1806 - .action-btn svg { 1807 1807 - flex-shrink: 0; 1913 1913 + .edit-cancel-btn { 1914 1914 + padding: 0.6rem 1.25rem; 1915 1915 + background: transparent; 1916 1916 + border: 1px solid var(--border-default); 1917 1917 + border-radius: var(--radius-base); 1918 1918 + color: var(--text-secondary); 1919 1919 + font-size: var(--text-base); 1920 1920 + font-weight: 500; 1921 1921 + font-family: inherit; 1922 1922 + cursor: pointer; 1923 1923 + transition: all 0.15s; 1924 1924 + width: auto; 1808 1925 } 1809 1926 1810 1810 - .action-btn:hover { 1927 1927 + .edit-cancel-btn:hover { 1928 1928 + border-color: var(--text-tertiary); 1929 1929 + background: var(--bg-hover); 1811 1930 transform: none; 1812 1931 box-shadow: none; 1813 1932 } 1814 1933 1815 1815 - .edit-btn:hover { 1816 1816 - background: color-mix(in srgb, var(--accent) 12%, transparent); 1817 1817 - border-color: var(--accent); 1934 1934 + .edit-save-btn { 1935 1935 + padding: 0.6rem 1.25rem; 1936 1936 + background: transparent; 1937 1937 + border: 1px solid var(--accent); 1938 1938 + border-radius: var(--radius-base); 1818 1939 color: var(--accent); 1940 1940 + font-size: var(--text-base); 1941 1941 + font-weight: 500; 1942 1942 + font-family: inherit; 1943 1943 + cursor: pointer; 1944 1944 + transition: all 0.15s; 1945 1945 + width: auto; 1819 1946 } 1820 1947 1821 1821 - .delete-btn:hover { 1822 1822 - background: color-mix(in srgb, var(--error) 12%, transparent); 1823 1823 - border-color: var(--error); 1824 1824 - color: var(--error); 1948 1948 + .edit-save-btn:hover:not(:disabled) { 1949 1949 + background: color-mix(in srgb, var(--accent) 8%, transparent); 1825 1950 } 1826 1951 1827 1827 - .save-btn:hover { 1828 1828 - background: color-mix(in srgb, var(--success) 12%, transparent); 1829 1829 - border-color: var(--success); 1830 1830 - color: var(--success); 1831 1831 - } 1832 1832 - 1833 1833 - .cancel-btn:hover { 1834 1834 - background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); 1835 1835 - border-color: var(--text-tertiary); 1836 1836 - color: var(--text-secondary); 1952 1952 + .edit-save-btn:disabled { 1953 1953 + opacity: 0.5; 1954 1954 + cursor: not-allowed; 1837 1955 } 1838 1956 1839 1957 .edit-input { ··· 1847 1965 font-family: inherit; 1848 1966 } 1849 1967 1850 1850 - .current-image-preview { 1968 1968 + /* artwork editor */ 1969 1969 + .artwork-editor { 1851 1970 display: flex; 1852 1971 align-items: center; 1853 1853 - gap: 0.75rem; 1854 1854 - padding: 0.5rem; 1972 1972 + gap: 1rem; 1973 1973 + padding: 0.75rem; 1855 1974 background: var(--bg-primary); 1856 1975 border: 1px solid var(--border-default); 1857 1857 - border-radius: var(--radius-sm); 1858 1858 - margin-bottom: 0.5rem; 1976 1976 + border-radius: var(--radius-base); 1859 1977 } 1860 1978 1861 1861 - .current-image-preview img { 1862 1862 - width: 48px; 1863 1863 - height: 48px; 1864 1864 - border-radius: var(--radius-sm); 1979 1979 + .artwork-preview { 1980 1980 + position: relative; 1981 1981 + width: 80px; 1982 1982 + height: 80px; 1983 1983 + border-radius: var(--radius-base); 1984 1984 + overflow: hidden; 1985 1985 + flex-shrink: 0; 1986 1986 + } 1987 1987 + 1988 1988 + .artwork-preview img { 1989 1989 + width: 100%; 1990 1990 + height: 100%; 1865 1991 object-fit: cover; 1866 1992 } 1867 1993 1868 1868 - .current-image-label { 1994 1994 + .artwork-preview-overlay { 1995 1995 + position: absolute; 1996 1996 + inset: 0; 1997 1997 + background: rgba(0, 0, 0, 0.5); 1998 1998 + display: flex; 1999 1999 + align-items: center; 2000 2000 + justify-content: center; 2001 2001 + opacity: 0; 2002 2002 + transition: opacity 0.15s; 2003 2003 + } 2004 2004 + 2005 2005 + .artwork-preview:hover .artwork-preview-overlay { 2006 2006 + opacity: 1; 2007 2007 + } 2008 2008 + 2009 2009 + .artwork-action-btn { 2010 2010 + display: flex; 2011 2011 + align-items: center; 2012 2012 + justify-content: center; 2013 2013 + width: 32px; 2014 2014 + height: 32px; 2015 2015 + padding: 0; 2016 2016 + background: rgba(255, 255, 255, 0.15); 2017 2017 + border: none; 2018 2018 + border-radius: var(--radius-full); 2019 2019 + color: white; 2020 2020 + cursor: pointer; 2021 2021 + transition: all 0.15s; 2022 2022 + } 2023 2023 + 2024 2024 + .artwork-action-btn:hover { 2025 2025 + background: var(--error); 2026 2026 + transform: scale(1.1); 2027 2027 + box-shadow: none; 2028 2028 + } 2029 2029 + 2030 2030 + .artwork-status { 2031 2031 + font-size: var(--text-sm); 2032 2032 + color: var(--accent); 2033 2033 + font-weight: 500; 2034 2034 + } 2035 2035 + 2036 2036 + .artwork-status.current { 1869 2037 color: var(--text-tertiary); 2038 2038 + font-weight: 400; 2039 2039 + } 2040 2040 + 2041 2041 + .artwork-removed { 2042 2042 + display: flex; 2043 2043 + flex-direction: column; 2044 2044 + align-items: center; 2045 2045 + gap: 0.5rem; 2046 2046 + padding: 0.75rem 1rem; 2047 2047 + color: var(--text-tertiary); 2048 2048 + } 2049 2049 + 2050 2050 + .artwork-removed span { 1870 2051 font-size: var(--text-sm); 2052 2052 + } 2053 2053 + 2054 2054 + .undo-remove-btn { 2055 2055 + padding: 0.25rem 0.75rem; 2056 2056 + background: transparent; 2057 2057 + border: 1px solid var(--border-default); 2058 2058 + border-radius: var(--radius-full); 2059 2059 + color: var(--accent); 2060 2060 + font-size: var(--text-sm); 2061 2061 + font-family: inherit; 2062 2062 + cursor: pointer; 2063 2063 + transition: all 0.15s; 2064 2064 + width: auto; 2065 2065 + } 2066 2066 + 2067 2067 + .undo-remove-btn:hover { 2068 2068 + border-color: var(--accent); 2069 2069 + background: color-mix(in srgb, var(--accent) 10%, transparent); 2070 2070 + transform: none; 2071 2071 + box-shadow: none; 2072 2072 + } 2073 2073 + 2074 2074 + .artwork-empty { 2075 2075 + display: flex; 2076 2076 + flex-direction: column; 2077 2077 + align-items: center; 2078 2078 + gap: 0.5rem; 2079 2079 + padding: 0.75rem 1rem; 2080 2080 + color: var(--text-muted); 2081 2081 + } 2082 2082 + 2083 2083 + .artwork-empty span { 2084 2084 + font-size: var(--text-sm); 2085 2085 + } 2086 2086 + 2087 2087 + .artwork-upload-btn { 2088 2088 + display: inline-flex; 2089 2089 + align-items: center; 2090 2090 + gap: 0.4rem; 2091 2091 + padding: 0.5rem 0.85rem; 2092 2092 + background: transparent; 2093 2093 + border: 1px solid var(--accent); 2094 2094 + border-radius: var(--radius-full); 2095 2095 + color: var(--accent); 2096 2096 + font-size: var(--text-sm); 2097 2097 + font-weight: 500; 2098 2098 + cursor: pointer; 2099 2099 + transition: all 0.15s; 2100 2100 + margin-left: auto; 2101 2101 + } 2102 2102 + 2103 2103 + .artwork-upload-btn:hover { 2104 2104 + background: color-mix(in srgb, var(--accent) 12%, transparent); 2105 2105 + } 2106 2106 + 2107 2107 + .artwork-upload-btn input { 2108 2108 + display: none; 1871 2109 } 1872 2110 1873 2111 .edit-input:focus { ··· 2424 2662 .track-actions { 2425 2663 margin-left: 0.5rem; 2426 2664 gap: 0.35rem; 2665 2665 + flex-direction: column; 2427 2666 } 2428 2667 2429 2429 - .action-btn { 2430 2430 - width: 30px; 2431 2431 - height: 30px; 2668 2668 + .track-action-btn { 2669 2669 + padding: 0.35rem 0.55rem; 2670 2670 + font-size: var(--text-xs); 2432 2671 } 2433 2672 2434 2434 - .action-btn svg { 2435 2435 - width: 14px; 2436 2436 - height: 14px; 2673 2673 + .track-action-btn svg { 2674 2674 + width: 12px; 2675 2675 + height: 12px; 2437 2676 } 2438 2677 2439 2678 /* edit mode mobile */ ··· 2455 2694 } 2456 2695 2457 2696 .edit-actions { 2458 2458 - gap: 0.35rem; 2697 2697 + gap: 0.5rem; 2698 2698 + flex-direction: column; 2699 2699 + } 2700 2700 + 2701 2701 + .edit-cancel-btn, 2702 2702 + .edit-save-btn { 2703 2703 + width: 100%; 2704 2704 + padding: 0.6rem; 2705 2705 + font-size: var(--text-sm); 2706 2706 + } 2707 2707 + 2708 2708 + /* artwork editor mobile */ 2709 2709 + .artwork-editor { 2710 2710 + flex-direction: column; 2711 2711 + gap: 0.75rem; 2712 2712 + padding: 0.65rem; 2713 2713 + } 2714 2714 + 2715 2715 + .artwork-preview { 2716 2716 + width: 64px; 2717 2717 + height: 64px; 2718 2718 + } 2719 2719 + 2720 2720 + .artwork-upload-btn { 2721 2721 + margin-left: 0; 2459 2722 } 2460 2723 2461 2724 /* data section mobile */

+51 -4

frontend/src/routes/track/[id]/+page.svelte

··· 1 1 <script lang="ts"> 2 2 import { fade } from 'svelte/transition'; 3 3 + import { onMount } from 'svelte'; 3 4 import { browser } from '$app/environment'; 5 5 + import { page } from '$app/stores'; 4 6 import type { PageData } from './$types'; 5 7 import { APP_NAME, APP_CANONICAL_URL } from '$lib/branding'; 6 8 import { API_URL } from '$lib/config'; ··· 231 233 } 232 234 } 233 235 236 236 + async function copyCommentLink(timestampMs: number) { 237 237 + const seconds = Math.floor(timestampMs / 1000); 238 238 + const url = `${window.location.origin}/track/${track.id}?t=${seconds}`; 239 239 + await navigator.clipboard.writeText(url); 240 240 + toast.success('link copied'); 241 241 + } 242 242 + 234 243 function formatRelativeTime(isoString: string): string { 235 244 const date = new Date(isoString); 236 245 const now = new Date(); ··· 308 317 // track if we've loaded liked state for this track (separate from general load) 309 318 let likedStateLoadedForTrackId = $state<number | null>(null); 310 319 320 320 + // pending seek time from ?t= URL param (milliseconds) 321 321 + let pendingSeekMs = $state<number | null>(null); 322 322 + 311 323 // reload data when navigating between track pages 312 324 // watch data.track.id (from server) not track.id (local state) 313 325 $effect(() => { ··· 324 336 editingCommentId = null; 325 337 editingCommentText = ''; 326 338 likedStateLoadedForTrackId = null; // reset liked state tracking 339 339 + pendingSeekMs = null; // reset pending seek 327 340 328 341 // sync track from server data 329 342 track = data.track; ··· 355 368 shareUrl = `${window.location.origin}/track/${track.id}`; 356 369 } 357 370 }); 371 371 + 372 372 + // handle ?t= timestamp param for deep linking (youtube-style) 373 373 + onMount(() => { 374 374 + const t = $page.url.searchParams.get('t'); 375 375 + if (t) { 376 376 + const seconds = parseInt(t, 10); 377 377 + if (!isNaN(seconds) && seconds >= 0) { 378 378 + pendingSeekMs = seconds * 1000; 379 379 + // load the track without auto-playing (browser blocks autoplay without interaction) 380 380 + if (track.gated) { 381 381 + void playTrack(track); 382 382 + } else { 383 383 + queue.playNow(track, false); 384 384 + } 385 385 + } 386 386 + } 387 387 + }); 388 388 + 389 389 + // perform pending seek once track is loaded and ready 390 390 + $effect(() => { 391 391 + if ( 392 392 + pendingSeekMs !== null && 393 393 + player.currentTrack?.id === track.id && 394 394 + player.audioElement && 395 395 + player.audioElement.readyState >= 1 396 396 + ) { 397 397 + const seekTo = pendingSeekMs / 1000; 398 398 + pendingSeekMs = null; 399 399 + player.audioElement.currentTime = seekTo; 400 400 + // don't auto-play - browser policy blocks it without user interaction 401 401 + // user will click play themselves 402 402 + } 403 403 + }); 358 404 </script> 359 405 360 406 <svelte:head> ··· 647 693 </div> 648 694 {:else} 649 695 <p class="comment-text">{#each parseTextWithLinks(comment.text) as segment}{#if segment.type === 'link'}<a href={segment.url} target="_blank" rel="noopener noreferrer" class="comment-link">{segment.url}</a>{:else}{segment.content}{/if}{/each}</p> 650 650 - {#if auth.user?.did === comment.user_did} 651 651 - <div class="comment-actions"> 696 696 + <div class="comment-actions"> 697 697 + <button class="comment-action-btn" onclick={() => copyCommentLink(comment.timestamp_ms)}>share</button> 698 698 + {#if auth.user?.did === comment.user_did} 652 699 <button class="comment-action-btn" onclick={() => startEditing(comment)}>edit</button> 653 700 <button class="comment-action-btn delete" onclick={() => deleteComment(comment.id)}>delete</button> 654 654 - </div> 655 655 - {/if} 701 701 + {/if} 702 702 + </div> 656 703 {/if} 657 704 </div> 658 705 </div>