inputnoise/youclonedl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minimal UX pass: cut action clutter, more breathing room

Browse Source 
- VideoCard: actions now hover-only everywhere (was always-visible on mobile)
- Watch: remove Good/Bad rating chips — Like covers positive signal,
  dismiss/skip covers negative. Fewer buttons, same data.
- Watch: PiP and Theater are now icon-only (no label)
- Watch: increase content gap to gap-4/gap-5 for more breathing room

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mattias Tall
2026-05-26 17:01:50 +02:00
parent d6035e6f1f
commit ed55478599
2 changed files with 6 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/pages/Watch.jsx
View File

@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
getVideoByYtId, updateProgress, createDownload, getDownload, deleteDownload,
followChannelByUrl, toggleQueue, toggleLike, getChannelVideos, getChannel,
getSettings, updateSettings, getRelatedVideos, getDownloads, rateVideo,
getSettings, updateSettings, getRelatedVideos, getDownloads,
getBookmarks, createBookmark, updateBookmark, deleteBookmark, importChapters, clearChapters,
getCollections, addToCollection, getQueue,
getVideoComments, refreshVideoComments,
@@ -561,7 +561,6 @@ export default function Watch() {
const [currentTime, setCurrentTime] = useState(0);
const [queued, setQueued] = useState(null);
const [liked, setLiked] = useState(null);
const [rating, setRating] = useState(null);
const [selectedQuality, setSelectedQuality] = useState(null);
const [speed, setSpeed] = useState(1);
const [autoplay, setAutoplay] = useState(false);
@@ -773,11 +772,6 @@ export default function Watch() {
onSuccess: (res) => { setLiked(res.data.liked); qc.invalidateQueries({ queryKey: ["liked-videos"] }); },
});
const rateMut = useMutation({
mutationFn: (r) => rateVideo(video.id, r),
onSuccess: (res) => setRating(res.data.rating),
});
const handlePiP = useCallback(async () => {
if (!videoRef.current) return;
try {
@@ -793,7 +787,6 @@ export default function Watch() {
const startAt = video?.watch_progress_seconds ?? 0;
const isQueued = queued ?? video?.queued ?? false;
const isLiked = liked ?? video?.liked ?? false;
const currentRating = rating ?? video?.rating ?? null;
const dlComplete = dlStatus?.status === "complete" || video?.is_downloaded;
const isFollowed = followMut.isSuccess || video?.channel_followed;
const subs = formatSubs(channel?.subscriber_count);
@@ -844,7 +837,7 @@ export default function Watch() {
<div className={theater ? "flex flex-col gap-6" : "flex flex-col xl:flex-row gap-6"}>
{/* ── Left: video + info ───────────────────────────────────────────── */}
<div className={theater ? "w-full flex flex-col gap-3 sm:gap-4" : "flex-1 min-w-0 flex flex-col gap-3 sm:gap-4"}>
<div className={theater ? "w-full flex flex-col gap-4 sm:gap-5" : "flex-1 min-w-0 flex flex-col gap-4 sm:gap-5"}>
{/* Player */}
<div className={theater ? "w-full aspect-video bg-black overflow-hidden shadow-2xl" : "w-full aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl"}>
@@ -981,32 +974,6 @@ export default function Watch() {
</Chip>
)}
{video?.id && (
<>
<Chip
active={currentRating === 1}
onClick={() => rateMut.mutate(currentRating === 1 ? 0 : 1)}
disabled={rateMut.isPending}
>
<svg className="w-4 h-4" fill={currentRating === 1 ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"/>
</svg>
Good
</Chip>
<Chip
active={currentRating === -1}
onClick={() => rateMut.mutate(currentRating === -1 ? 0 : -1)}
disabled={rateMut.isPending}
>
<svg className="w-4 h-4" fill={currentRating === -1 ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17"/>
</svg>
Not for me
</Chip>
</>
)}
{video?.id && (
<Chip active={isQueued} onClick={() => queueMut.mutate()} disabled={queueMut.isPending}>
@@ -1018,16 +985,15 @@ export default function Watch() {
)}
{fileReady && document.pictureInPictureEnabled && (
<Chip onClick={handlePiP}>
<Chip onClick={handlePiP} title="Picture in picture">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<rect x="2" y="4" width="20" height="16" rx="2" strokeWidth="2"/>
<rect x="12" y="12" width="8" height="6" rx="1.5" strokeWidth="2"/>
</svg>
Mini
</Chip>
)}
<Chip active={theater} onClick={() => setTheater(t => !t)}>
<Chip active={theater} onClick={() => setTheater(t => !t)} title={theater ? "Exit theater" : "Theater mode"}>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{theater ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9L4 4m0 5V4h5M15 9l5-5m0 5V4h-5M9 15l-5 5m0-5v5h5M15 15l5 5m0-5v5h-5" />
@@ -1035,7 +1001,6 @@ export default function Watch() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V5a1 1 0 011-1h3M4 16v3a1 1 0 001 1h3m10-4v3a1 1 0 01-1 1h-3M20 8V5a1 1 0 00-1-1h-3" />
)}
</svg>
Theater
</Chip>
</div>
</div>