antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve responsive styles for playerbar

Browse source
This commit is contained in:
jeffvli 2023-06-04 16:02:40 -07:00 • committed by Jeff
parent cf43bf360e
commit f380eccc68
5 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/renderer/features/player/components/right-controls.tsx
View file

@ -1,6 +1,6 @@
import { MouseEvent } from 'react';
import { Flex, Group } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { useHotkeys, useMediaQuery } from '@mantine/hooks';
import { HiOutlineQueueList } from 'react-icons/hi2';
import {
RiVolumeUpFill,
@ -26,6 +26,7 @@ import { Rating } from '/@/renderer/components';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
export const RightControls = () => {
const isMinWidth = useMediaQuery('(max-width: 480px)');
const volume = useVolume();
const muted = useMuted();
const server = useCurrentServer();
@ -181,16 +182,19 @@ export const RightControls = () => {
tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
variant="secondary"
onClick={handleMute}
/>
<PlayerbarSlider
max={100}
min={0}
size={6}
value={volume}
w="60px"
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
/>
{!isMinWidth ? (
<PlayerbarSlider
max={100}
min={0}
size={6}
value={volume}
w="60px"
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
/>
) : null}
</Group>
</Group>
<Group h="calc(100% / 3)" />