antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

In the fullscreen player use dynamic resolution for the main image (#290)

Browse source 
* In the fullscreen player use dynamic resolution for the main image

* Use ceil instead of round

* Add types and lint

---------

Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
This commit is contained in:
TacoCake 2023-10-17 09:47:50 -04:00 • committed by GitHub
parent f4f73289c9
commit c7aa5d09c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/renderer/features/player/components/full-screen-player-image.tsx
View file

@ -1,7 +1,7 @@
import { Flex, Stack, Group, Center } from '@mantine/core';
import { useSetState } from '@mantine/hooks';
import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'framer-motion';
import { useEffect } from 'react';
import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
@ -89,11 +89,11 @@ const imageVariants: Variants = {
},
};
const scaleImageUrl = (url?: string | null) => {
const scaleImageUrl = (imageSize: number, url?: string | null) => {
return url
?.replace(/&size=\d+/, '&size=500')
.replace(/\?width=\d+/, '?width=500')
.replace(/&height=\d+/, '&height=500');
?.replace(/&size=\d+/, `&size=${imageSize}`)
.replace(/\?width=\d+/, `?width=${imageSize}`)
.replace(/&height=\d+/, `&height=${imageSize}`);
};
const ImageWithPlaceholder = ({
@ -127,6 +127,9 @@ const ImageWithPlaceholder = ({
};
export const FullScreenPlayerImage = () => {
const mainImageRef = useRef<HTMLImageElement | null>(null);
const [mainImageDimensions, setMainImageDimensions] = useState({ idealSize: 1 });
const { queue } = usePlayerData();
const { opacity, useImageAspectRatio } = useFullScreenPlayerStore();
const currentSong = queue.current;
@ -136,13 +139,31 @@ export const FullScreenPlayerImage = () => {
srcLoaded: true,
});
const imageKey = `image-${background}`;
const [imageState, setImageState] = useSetState({
bottomImage: scaleImageUrl(queue.next?.imageUrl),
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
current: 0,
topImage: scaleImageUrl(queue.current?.imageUrl),
topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
});
const updateImageSize = useCallback(() => {
if (mainImageRef.current) {
setMainImageDimensions({
idealSize:
Math.ceil((mainImageRef.current as HTMLDivElement).offsetHeight / 100) * 100,
});
setImageState({
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
current: 0,
topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
});
}
}, [mainImageDimensions.idealSize, queue, setImageState]);
useLayoutEffect(() => {
updateImageSize();
}, [updateImageSize]);
useEffect(() => {
const unsubSongChange = usePlayerStore.subscribe(
(state) => [state.current.song, state.actions.getPlayerData().queue],
@ -150,8 +171,14 @@ export const FullScreenPlayerImage = () => {
const isTop = imageState.current === 0;
const queue = state[1] as PlayerData['queue'];
const currentImageUrl = scaleImageUrl(queue.current?.imageUrl);
const nextImageUrl = scaleImageUrl(queue.next?.imageUrl);
const currentImageUrl = scaleImageUrl(
mainImageDimensions.idealSize,
queue.current?.imageUrl,
);
const nextImageUrl = scaleImageUrl(
mainImageDimensions.idealSize,
queue.next?.imageUrl,
);
setImageState({
bottomImage: isTop ? currentImageUrl : nextImageUrl,
@ -165,7 +192,7 @@ export const FullScreenPlayerImage = () => {
return () => {
unsubSongChange();
};
}, [imageState, queue, setImageState]);
}, [imageState, mainImageDimensions.idealSize, queue, setImageState]);
return (
<PlayerContainer
@ -175,7 +202,10 @@ export const FullScreenPlayerImage = () => {
justify="flex-start"
p="1rem"
>
<ImageContainer>
<ImageContainer
ref={mainImageRef}
onLoad={updateImageSize}
>
<AnimatePresence
initial={false}
mode="sync"