Album blur, allow clicking the playerbar to toggle the player, misc changes (#717)

* Album blur, allow clicking the playerbar to toggle the player

* Fix stopProporagion, sync package with upsteam, update translation

* recommit my existing changes

* Update default albumBackgroundBlur to 6

* according to git this commit resets the package files

* merge with our fork because pyx forgot to add it

* try adding a setting

* change the playerbar animation

* make the animation quicker bc its choppy

* change playerbar to use a bool instead

* requested opacity fix

* Refactor classes to use clsx

---------

Co-authored-by: iiPython <ben@iipython.dev>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
This commit is contained in:
Pyx 2024-09-01 19:42:01 -04:00 committed by GitHub
parent b93ad40571
commit eb50c69a35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 197 additions and 29 deletions

View file

@ -1,6 +1,10 @@
import { useCallback } from 'react';
import { useCallback, MouseEvent } from 'react';
import styled from 'styled-components';
import { usePlaybackType, useSettingsStore } from '/@/renderer/store/settings.store';
import {
usePlaybackType,
useSettingsStore,
useGeneralSettings,
} from '/@/renderer/store/settings.store';
import { PlaybackType } from '/@/renderer/types';
import { AudioPlayer } from '/@/renderer/components';
import {
@ -11,6 +15,8 @@ import {
usePlayer2Data,
usePlayerControls,
useVolume,
useSetFullScreenPlayerStore,
useFullScreenPlayerStore,
} from '/@/renderer/store';
import { CenterControls } from './center-controls';
import { LeftControls } from './left-controls';
@ -62,6 +68,7 @@ const CenterGridItem = styled.div`
export const Playerbar = () => {
const playersRef = PlayersRef;
const settings = useSettingsStore((state) => state.playback);
const { playerbarOpenDrawer } = useGeneralSettings();
const playbackType = usePlaybackType();
const volume = useVolume();
const player1 = usePlayer1Data();
@ -70,6 +77,13 @@ export const Playerbar = () => {
const player = useCurrentPlayer();
const muted = useMuted();
const { autoNext } = usePlayerControls();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
e?.stopPropagation();
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
const autoNextFn = useCallback(() => {
const playerData = autoNext();
@ -77,7 +91,9 @@ export const Playerbar = () => {
}, [autoNext]);
return (
<PlayerbarContainer>
<PlayerbarContainer
onClick={playerbarOpenDrawer ? handleToggleFullScreenPlayer : undefined}
>
<PlayerbarControlsGrid>
<LeftGridItem>
<LeftControls />