Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 08:52:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Exclude thumbnail from fade effect

Browse source
This commit is contained in:
Isra 2025-11-11 09:26:31 +08:00
parent 02c2dcb4c9
commit 8ee39a2774
4 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/assets/css/index.css
View file

@ -428,18 +428,15 @@ input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
@apply brightness-[500]; @apply brightness-[500];
} }
/* Image fade-in on load */ img:not(.no-fade):not([src=""]) {
img:not([src=""]) {
opacity: 0; opacity: 0;
transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;
} }
/* Fade in when image has loaded class */ img.loaded:not(.no-fade) {
img.loaded {
opacity: 1; opacity: 1;
} }
/* For images that are already cached/loaded, show them immediately */ img[complete]:not(.no-fade):not([src=""]) {
img[complete]:not([src=""]) {
opacity: 1; opacity: 1;
} }

2
src/components/player/atoms/ProgressBar.tsx
View file

@ -59,7 +59,7 @@ function ThumbnailDisplay(props: { at: number; show: boolean }) {
{currentThumbnail && ( {currentThumbnail && (
<img <img
src={currentThumbnail.data} src={currentThumbnail.data}
className="h-24 border rounded-xl border-gray-800" className="h-24 border rounded-xl border-gray-800 no-fade"
/> />
)} )}
<p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max"> <p className="mt-1 mx-auto text-center border rounded-xl border-gray-800 px-3 py-1 backdrop-blur-lg bg-black bg-opacity-20 w-max">

4
src/components/player/internals/KeyboardEvents.tsx
View file

@ -178,7 +178,7 @@ export function KeyboardEvents() {
if (evt.repeat) { if (evt.repeat) {
return; return;
} }
// Skip if a button is targeted // Skip if a button is targeted
if ( if (
evt.target && evt.target &&
@ -243,7 +243,7 @@ export function KeyboardEvents() {
if (evt.repeat) { if (evt.repeat) {
return; return;
} }
// Skip if a button is targeted // Skip if a button is targeted
if ( if (
evt.target && evt.target &&

4
src/setup/imageFadeIn.ts
View file

@ -5,7 +5,7 @@
export function initializeImageFadeIn() { export function initializeImageFadeIn() {
// Handle images that are already loaded (cached) // Handle images that are already loaded (cached)
const handleExistingImages = () => { const handleExistingImages = () => {
const images = document.querySelectorAll("img:not(.loaded)"); const images = document.querySelectorAll(`img:not(.no-fade):not([src=""]`);
images.forEach((img) => { images.forEach((img) => {
const htmlImg = img as HTMLImageElement; const htmlImg = img as HTMLImageElement;
if (htmlImg.complete && htmlImg.naturalHeight !== 0) { if (htmlImg.complete && htmlImg.naturalHeight !== 0) {
@ -35,7 +35,7 @@ export function initializeImageFadeIn() {
// Also check periodically for images that might have loaded // Also check periodically for images that might have loaded
// This handles edge cases where the load event might not fire // This handles edge cases where the load event might not fire
const checkInterval = setInterval(() => { const checkInterval = setInterval(() => {
const images = document.querySelectorAll("img:not(.loaded)"); const images = document.querySelectorAll(`img:not(.no-fade):not([src=""]`);
if (images.length === 0) { if (images.length === 0) {
clearInterval(checkInterval); clearInterval(checkInterval);
return; return;