pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
dont show watched toggle button on unreleased episodes
+76
-68
+20
-18
src/components/overlays/details/EpisodeCarousel.tsx
+20
-18
src/components/overlays/details/EpisodeCarousel.tsx
···
423
423
</div>
424
424
425
425
{/* Mark as watched button */}
426
-
<div className="absolute top-2 right-2">
427
-
<button
428
-
type="button"
429
-
onClick={(e) => toggleWatchStatus(episode.id, e)}
430
-
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
431
-
title={
432
-
isWatched
433
-
? t("player.menus.episodes.markAsUnwatched")
434
-
: t("player.menus.episodes.markAsWatched")
435
-
}
436
-
>
437
-
<Icon
438
-
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
439
-
className="h-4 w-4 text-white/80"
440
-
/>
441
-
</button>
442
-
</div>
426
+
{isAired && (
427
+
<div className="absolute top-2 right-2">
428
+
<button
429
+
type="button"
430
+
onClick={(e) => toggleWatchStatus(episode.id, e)}
431
+
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
432
+
title={
433
+
isWatched
434
+
? t("player.menus.episodes.markAsUnwatched")
435
+
: t("player.menus.episodes.markAsWatched")
436
+
}
437
+
>
438
+
<Icon
439
+
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
440
+
className="h-4 w-4 text-white/80"
441
+
/>
442
+
</button>
443
+
</div>
444
+
)}
443
445
</div>
444
446
)}
445
447
···
454
456
<h3 className="font-bold text-white line-clamp-1">
455
457
{episode.name}
456
458
</h3>
457
-
{isExpanded && (
459
+
{isExpanded && isAired && (
458
460
<button
459
461
type="button"
460
462
onClick={(e) => toggleWatchStatus(episode.id, e)}
+56
-50
src/components/player/atoms/Episodes.tsx
+56
-50
src/components/player/atoms/Episodes.tsx
···
367
367
clickable={isAired}
368
368
rightSide={
369
369
<div className="flex items-center gap-2">
370
-
<button
371
-
type="button"
372
-
onClick={(e) => toggleWatchStatus(ep.id, e)}
373
-
className="p-1.5 rounded-full hover:bg-white/20 transition-colors"
374
-
title={
375
-
isWatched
376
-
? t("player.menus.episodes.markAsUnwatched")
377
-
: t("player.menus.episodes.markAsWatched")
378
-
}
379
-
>
380
-
<Icon
381
-
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
382
-
className="h-4 w-4 text-white/80"
383
-
/>
384
-
</button>
370
+
{isAired && (
371
+
<button
372
+
type="button"
373
+
onClick={(e) => toggleWatchStatus(ep.id, e)}
374
+
className="p-1.5 rounded-full hover:bg-white/20 transition-colors"
375
+
title={
376
+
isWatched
377
+
? t("player.menus.episodes.markAsUnwatched")
378
+
: t("player.menus.episodes.markAsWatched")
379
+
}
380
+
>
381
+
<Icon
382
+
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
383
+
className="h-4 w-4 text-white/80"
384
+
/>
385
+
</button>
386
+
)}
385
387
{episodeProgress && (
386
388
<ProgressRing
387
389
className="h-[18px] w-[18px] text-white"
···
454
456
</div>
455
457
456
458
{/* Mark as watched button */}
457
-
<div className="absolute top-2 right-2">
458
-
<button
459
-
type="button"
460
-
onClick={(e) => toggleWatchStatus(ep.id, e)}
461
-
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
462
-
title={
463
-
isWatched
464
-
? t("player.menus.episodes.markAsUnwatched")
465
-
: t("player.menus.episodes.markAsWatched")
466
-
}
467
-
>
468
-
<Icon
469
-
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
470
-
className="h-4 w-4 text-white/80"
471
-
/>
472
-
</button>
473
-
</div>
459
+
{isAired && (
460
+
<div className="absolute top-2 right-2">
461
+
<button
462
+
type="button"
463
+
onClick={(e) => toggleWatchStatus(ep.id, e)}
464
+
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
465
+
title={
466
+
isWatched
467
+
? t("player.menus.episodes.markAsUnwatched")
468
+
: t("player.menus.episodes.markAsWatched")
469
+
}
470
+
>
471
+
<Icon
472
+
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
473
+
className="h-4 w-4 text-white/80"
474
+
/>
475
+
</button>
476
+
</div>
477
+
)}
474
478
</div>
475
479
476
480
{/* Content */}
···
580
584
</div>
581
585
582
586
{/* Mark as watched button */}
583
-
<div className="absolute top-2 right-2">
584
-
<button
585
-
type="button"
586
-
onClick={(e) => toggleWatchStatus(ep.id, e)}
587
-
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
588
-
title={
589
-
isWatched
590
-
? t("player.menus.episodes.markAsUnwatched")
591
-
: t("player.menus.episodes.markAsWatched")
592
-
}
593
-
>
594
-
<Icon
595
-
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
596
-
className="h-4 w-4 text-white/80"
597
-
/>
598
-
</button>
599
-
</div>
587
+
{isAired && (
588
+
<div className="absolute top-2 right-2">
589
+
<button
590
+
type="button"
591
+
onClick={(e) => toggleWatchStatus(ep.id, e)}
592
+
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
593
+
title={
594
+
isWatched
595
+
? t("player.menus.episodes.markAsUnwatched")
596
+
: t("player.menus.episodes.markAsWatched")
597
+
}
598
+
>
599
+
<Icon
600
+
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
601
+
className="h-4 w-4 text-white/80"
602
+
/>
603
+
</button>
604
+
</div>
605
+
)}
600
606
</div>
601
607
)}
602
608
···
613
619
<h3 className="font-bold text-white line-clamp-1">
614
620
{ep.title}
615
621
</h3>
616
-
{expandedEpisodes[`large-${ep.id}`] && (
622
+
{expandedEpisodes[`large-${ep.id}`] && isAired && (
617
623
<button
618
624
type="button"
619
625
onClick={(e) => toggleWatchStatus(ep.id, e)}