javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loop a single song (closes #139)

Browse Source
This commit is contained in:
Lei Nelissen
2023-04-27 13:19:12 +02:00
parent e140a0e487
commit fb4d3932e5
2 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/repeat.1.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7979 6.36914C19.4131 6.36914 19.7734 6.03516 19.7734 5.36719V1.24512C19.7734 0.541992 19.3076 0.0761719 18.6133 0.0761719C18.0508 0.0761719 17.708 0.251953 17.2598 0.585938L16.126 1.44727C15.8623 1.64941 15.7656 1.84277 15.7656 2.08008C15.7656 2.43164 16.0205 2.7041 16.416 2.7041C16.5918 2.7041 16.7412 2.64258 16.8906 2.52832L17.7344 1.84277H17.8047V5.36719C17.8047 6.03516 18.1738 6.36914 18.7979 6.36914ZM0.121094 7.89844C0.121094 8.52246 0.595703 8.99707 1.21973 8.99707C1.85254 8.99707 2.31836 8.52246 2.31836 7.89844V7.32715C2.31836 5.89453 3.30273 4.97168 4.79688 4.97168H9.24414V6.80859C9.24414 7.33594 9.57812 7.66992 10.1055 7.66992C10.3428 7.66992 10.5713 7.58203 10.7471 7.44141L14.21 4.55859C14.6318 4.20703 14.6318 3.63574 14.21 3.28418L10.7471 0.392578C10.5713 0.243164 10.3428 0.155273 10.1055 0.155273C9.57812 0.155273 9.24414 0.489258 9.24414 1.0166V2.80957H4.97266C1.99316 2.80957 0.121094 4.4707 0.121094 7.11621V7.89844ZM8.58496 10.3066C8.58496 9.7793 8.25098 9.43652 7.72363 9.43652C7.48633 9.43652 7.25781 9.5332 7.08203 9.67383L3.62793 12.5566C3.19727 12.8994 3.19727 13.4707 3.62793 13.8311L7.08203 16.7227C7.25781 16.8721 7.48633 16.96 7.72363 16.96C8.25098 16.96 8.58496 16.626 8.58496 16.0986V14.2969H15.0186C17.998 14.2969 19.8613 12.627 19.8613 9.99023V9.20801C19.8613 8.5752 19.3867 8.10059 18.7627 8.10059C18.1387 8.10059 17.6641 8.5752 17.6641 9.20801V9.7793C17.6641 11.2031 16.6885 12.1348 15.1855 12.1348H8.58496V10.3066Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

41
src/screens/modals/Player/components/Queue.tsx
View File

@@ -9,6 +9,7 @@ import { t } from '@localisation';
import useDefaultStyles from 'components/Colors';
import { Text } from 'components/Typography';
import RepeatIcon from 'assets/icons/repeat.svg';
import RepeatSingleIcon from 'assets/icons/repeat.1.svg';
import Button from 'components/Button';
import { THEME_COLOR } from 'CONSTANTS';
import DownloadIcon from 'components/DownloadIcon';
@@ -74,7 +75,7 @@ interface Props {
export default function Queue({ header }: Props) {
const defaultStyles = useDefaultStyles();
const queue = useQueue();
const [isRepeating, setIsRepeating] = useState(false);
const [repeatMode, setRepeatMode] = useState(RepeatMode.Off);
const { index: currentIndex } = useCurrentTrack();
const playTrack = useCallback(async (index: number) => {
@@ -86,19 +87,25 @@ export default function Queue({ header }: Props) {
await TrackPlayer.reset();
}, []);
const toggleLoop = useCallback(() => {
setIsRepeating((prev) => {
TrackPlayer.setRepeatMode(prev ? RepeatMode.Off : RepeatMode.Queue);
return !prev;
const toggleQueueLoop = useCallback(() => {
setRepeatMode((currentMode) => {
const newMode = currentMode === RepeatMode.Queue ? RepeatMode.Off : RepeatMode.Queue;
TrackPlayer.setRepeatMode(newMode);
return newMode;
});
}, []);
const toggleTrackLoop = useCallback(() => {
setRepeatMode((currentMode) => {
const newMode = currentMode === RepeatMode.Track ? RepeatMode.Off : RepeatMode.Track;
TrackPlayer.setRepeatMode(newMode);
return newMode;
});
}, []);
// Retrieve the repeat mode and assign it to the state on component mount
useEffect(() => {
TrackPlayer.getRepeatMode()
.then((mode) => {
setIsRepeating(mode === RepeatMode.Queue);
});
TrackPlayer.getRepeatMode().then(setRepeatMode);
}, []);
return (
@@ -112,11 +119,21 @@ export default function Queue({ header }: Props) {
<Text>{t('queue')}</Text>
<Divider style={{ marginHorizontal: 18 }} />
<IconButton
style={isRepeating ? defaultStyles.activeBackground : undefined}
onPress={toggleLoop}
style={repeatMode === RepeatMode.Track ? defaultStyles.activeBackground : undefined}
onPress={toggleTrackLoop}
>
<RepeatSingleIcon
fill={repeatMode === RepeatMode.Track ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
width={ICON_SIZE}
height={ICON_SIZE}
/>
</IconButton>
<IconButton
style={repeatMode === RepeatMode.Queue ? defaultStyles.activeBackground : undefined}
onPress={toggleQueueLoop}
>
<RepeatIcon
fill={isRepeating ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
fill={repeatMode === RepeatMode.Queue ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
width={ICON_SIZE}
height={ICON_SIZE}
/>