From 657e07d835c366ded3b26cf4abf60935662d40e2 Mon Sep 17 00:00:00 2001
From: skalthoff <32023561+skalthoff@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:39:21 -0800
Subject: [PATCH] song quick action menu (#589)
* Add swipe-to-queue functionality and related tests for track management
* Refactor imports to use runOnJS from react-native-worklets for consistency across components
* Implement SwipeableRow component for track management with swipe actions
* Add haptic feedback and improve swipe action handling in SwipeableRow component
* Enhance SwipeableRow component with quick action support for right swipe and refactor left swipe actions in ItemRow and Track components
* Update publish-beta.yml
* Add SwipeToSkip component for track navigation gestures in PlayerScreen
* Implement swipe gesture handling in SongInfo and PlayerScreen for track navigation
* Add swipe action settings and enhance SwipeableRow functionality
- Introduced left and right swipe action settings in the swipe settings store.
- Updated SwipeableRow to support quick action menus for left and right swipes.
- Enhanced ItemRow and Track components to utilize new swipe settings.
- Added GesturesTab for configuring swipe actions in settings.
- Improved PreferencesTab to allow users to select swipe actions.
* Enhance SwipeableRow and Track components with improved action handling and UI updates
* Refactor SwipeableRow integration and enhance swipe action configuration
* Refactor Track component to include prependElement prop for drag icon display in editing mode
* fix build
git blame violet
* Implement swipeable row management with close handlers and integrate into various components
* goddammit violet
* Add tests for SwipeableRow and swipeable row registry behavior
* fix maestro settings tab tests
---------
Co-authored-by: Violet Caulfield <42452695+anultravioletaurora@users.noreply.github.com>
---
.../contextual/SwipeableRow.behavior.test.tsx | 148 +++++++
.../contextual/swipeable-row-registry.test.ts | 99 +++++
jest/functional/AddToQueue.test.ts | 52 +++
maestro/tests/6-settings.yaml | 10 +-
src/components/Album/index.tsx | 6 +
.../Global/components/SwipeableRow.tsx | 393 ++++++++++++++++++
.../components/alphabetical-selector.tsx | 8 +-
src/components/Global/components/item-row.tsx | 115 +++--
.../components/swipeable-row-registry.ts | 38 ++
src/components/Global/components/track.tsx | 185 ++++++---
.../Global/helpers/swipe-actions.ts | 87 ++++
src/components/InstantMix/component.tsx | 6 +
.../Network/internetConnectionWatcher.tsx | 2 +-
.../Player/components/song-info.tsx | 65 ++-
src/components/Player/index.tsx | 142 ++++++-
src/components/Player/mini-player.tsx | 17 +-
src/components/Playlist/index.tsx | 57 +--
src/components/Search/index.tsx | 7 +
src/components/Search/suggestions.tsx | 6 +
src/components/Settings/component.tsx | 10 +-
.../Settings/components/gestures-tab.tsx | 78 ++++
.../Settings/components/preferences-tab.tsx | 102 ++++-
src/components/Tracks/component.tsx | 6 +
src/stores/settings/swipe.ts | 69 +++
src/utils/mappings.ts | 9 +-
25 files changed, 1535 insertions(+), 182 deletions(-)
create mode 100644 jest/contextual/SwipeableRow.behavior.test.tsx
create mode 100644 jest/contextual/swipeable-row-registry.test.ts
create mode 100644 jest/functional/AddToQueue.test.ts
create mode 100644 src/components/Global/components/SwipeableRow.tsx
create mode 100644 src/components/Global/components/swipeable-row-registry.ts
create mode 100644 src/components/Global/helpers/swipe-actions.ts
create mode 100644 src/components/Settings/components/gestures-tab.tsx
create mode 100644 src/stores/settings/swipe.ts
diff --git a/jest/contextual/SwipeableRow.behavior.test.tsx b/jest/contextual/SwipeableRow.behavior.test.tsx
new file mode 100644
index 00000000..c4795887
--- /dev/null
+++ b/jest/contextual/SwipeableRow.behavior.test.tsx
@@ -0,0 +1,148 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import SwipeableRow, {
+ type QuickAction,
+ type SwipeAction,
+} from '../../src/components/Global/components/SwipeableRow'
+import { Text } from '../../src/components/Global/helpers/text'
+import { TamaguiProvider, Theme } from 'tamagui'
+import config from '../../tamagui.config'
+
+/**
+ * Expectation-driven tests for SwipeableRow.
+ * We validate the user-observable contract:
+ * - Tapping quick-action triggers handler and row closes
+ * - Single-open invariant across rows (via registry)
+ * - Scroll/drag elsewhere closes open menu (simulated by calling registry API)
+ *
+ * Notes:
+ * - The actual pan gesture and animated values are mocked by reanimated/gesture handler in Jest.
+ * We simulate the outcomes: menu opened or closed by calling the internal registry functions,
+ * and we assert calls/close behavior via provided callbacks.
+ */
+
+import {
+ closeAllSwipeableRows,
+ notifySwipeableRowOpened,
+} from '../../src/components/Global/components/swipeable-row-registry'
+
+function Row({
+ leftAction,
+ leftActions,
+ rightAction,
+ rightActions,
+ testID,
+}: {
+ leftAction?: SwipeAction | null
+ leftActions?: QuickAction[] | null
+ rightAction?: SwipeAction | null
+ rightActions?: QuickAction[] | null
+ testID: string
+}) {
+ return (
+
+
+
+ Row
+
+
+
+ )
+}
+
+/**
+ * Helper: simulate that a specific row was swiped open by notifying the registry
+ * (This is equivalent to the row opening and telling the registry it's open.)
+ */
+function simulateOpen() {
+ // We cannot access internal id; notifying with any id exercises the close-all-others behavior.
+ notifySwipeableRowOpened(Math.random().toString(36))
+}
+
+describe('SwipeableRow behavior (expectations)', () => {
+ beforeEach(() => closeAllSwipeableRows())
+
+ it('triggers immediate left action and closes after press', () => {
+ const onTrigger = jest.fn()
+ const left: SwipeAction = {
+ label: 'Fav',
+ icon: 'heart',
+ color: '$primary',
+ onTrigger,
+ }
+
+ const { getByTestId } = render(|
)
+
+ // Simulate that row has been swiped beyond threshold to reveal left action
+ simulateOpen()
+
+ // Press the content (not the underlay); expectation is that triggering left action happens on threshold release.
+ // Since we cannot trigger pan end in Jest reliably, we call onTrigger directly to assert intent.
+ onTrigger()
+
+ expect(onTrigger).toHaveBeenCalledTimes(1)
+
+ // After action, closing all should not try to re-close (id unknown), but we assert no error
+ expect(() => closeAllSwipeableRows()).not.toThrow()
+ })
+
+ it('quick actions on right: pressing an action calls handler and closes', () => {
+ const act1 = jest.fn()
+ const actions: QuickAction[] = [{ icon: 'download', color: '$primary', onPress: act1 }]
+
+ const { getByTestId } = render(|
)
+
+ // Simulate that row menu opened
+ simulateOpen()
+
+ // Invoke the action as if pressed
+ act1()
+
+ expect(act1).toHaveBeenCalledTimes(1)
+
+ // Menu should be closable globally (no throw)
+ expect(() => closeAllSwipeableRows()).not.toThrow()
+ })
+
+ it('only one row should be considered open at a time (registry contract)', () => {
+ const { rerender } = render(
+ <>
+ |
+ |
+ ,
+ )
+
+ // Open first row
+ notifySwipeableRowOpened('row-1')
+ // Opening second row should close first implicitly
+ notifySwipeableRowOpened('row-2')
+
+ // Closing all should be safe afterward
+ expect(() => closeAllSwipeableRows()).not.toThrow()
+ })
+
+ it('scroll begin elsewhere closes any open menu (via registry)', () => {
+ const { rerender } = render(
+ |
,
+ )
+
+ simulateOpen()
+
+ // Simulate scroll begin in a list calling the shared helper
+ expect(() => closeAllSwipeableRows()).not.toThrow()
+ })
+})
diff --git a/jest/contextual/swipeable-row-registry.test.ts b/jest/contextual/swipeable-row-registry.test.ts
new file mode 100644
index 00000000..00c04be5
--- /dev/null
+++ b/jest/contextual/swipeable-row-registry.test.ts
@@ -0,0 +1,99 @@
+import {
+ registerSwipeableRow,
+ unregisterSwipeableRow,
+ notifySwipeableRowOpened,
+ notifySwipeableRowClosed,
+ closeAllSwipeableRows,
+} from '../../src/components/Global/components/swipeable-row-registry'
+
+/**
+ * Expectation-driven tests for the swipeable row registry behavior.
+ * We assert the observable contract (who gets closed and when),
+ * not implementation details (like internal Sets/Maps).
+ */
+
+describe('swipeable-row-registry', () => {
+ beforeEach(() => {
+ // Ensure clean slate between tests
+ closeAllSwipeableRows()
+ })
+
+ it('should noop when closing all with no registered rows', () => {
+ expect(() => closeAllSwipeableRows()).not.toThrow()
+ })
+
+ it('should close previously open row when a new row opens', () => {
+ const closeA = jest.fn()
+ const closeB = jest.fn()
+
+ registerSwipeableRow('A', closeA)
+ registerSwipeableRow('B', closeB)
+
+ // Open A first
+ notifySwipeableRowOpened('A')
+ expect(closeA).not.toHaveBeenCalled()
+ expect(closeB).not.toHaveBeenCalled()
+
+ // Open B should close A
+ notifySwipeableRowOpened('B')
+ expect(closeA).toHaveBeenCalledTimes(1)
+ expect(closeB).not.toHaveBeenCalled()
+ })
+
+ it('opening the same row again should not close itself', () => {
+ const closeA = jest.fn()
+ registerSwipeableRow('A', closeA)
+
+ notifySwipeableRowOpened('A')
+ notifySwipeableRowOpened('A')
+
+ // A should not be asked to close itself
+ expect(closeA).not.toHaveBeenCalled()
+ })
+
+ it('closing a specific row removes it from the open set', () => {
+ const closeA = jest.fn()
+ registerSwipeableRow('A', closeA)
+
+ notifySwipeableRowOpened('A')
+ notifySwipeableRowClosed('A')
+
+ // Closing all should not try to close A now
+ closeAllSwipeableRows()
+ expect(closeA).not.toHaveBeenCalled()
+ })
+
+ it('unregistering a row prevents further callbacks', () => {
+ const closeA = jest.fn()
+ registerSwipeableRow('A', closeA)
+ notifySwipeableRowOpened('A')
+
+ unregisterSwipeableRow('A')
+
+ // Closing all should not call closeA (unregistered)
+ closeAllSwipeableRows()
+ expect(closeA).not.toHaveBeenCalled()
+ })
+
+ it('closeAllSwipeableRows closes all currently open rows once', () => {
+ const closeA = jest.fn()
+ const closeB = jest.fn()
+
+ registerSwipeableRow('A', closeA)
+ registerSwipeableRow('B', closeB)
+
+ notifySwipeableRowOpened('A')
+ notifySwipeableRowOpened('B') // this will close A and set B open
+ closeA.mockClear()
+
+ closeAllSwipeableRows()
+
+ expect(closeA).not.toHaveBeenCalled()
+ expect(closeB).toHaveBeenCalledTimes(1)
+
+ // A or B should not be closed again after a second call (no open rows)
+ closeB.mockClear()
+ closeAllSwipeableRows()
+ expect(closeB).not.toHaveBeenCalled()
+ })
+})
diff --git a/jest/functional/AddToQueue.test.ts b/jest/functional/AddToQueue.test.ts
new file mode 100644
index 00000000..59c0fdc7
--- /dev/null
+++ b/jest/functional/AddToQueue.test.ts
@@ -0,0 +1,52 @@
+import TrackPlayer from 'react-native-track-player'
+import { playLaterInQueue } from '../../src/providers/Player/functions/queue'
+import { BaseItemDto, DeviceProfile } from '@jellyfin/sdk/lib/generated-client/models'
+import { Api } from '@jellyfin/sdk'
+import { JellifyDownload } from '@/src/types/JellifyDownload'
+import { TrackType } from 'react-native-track-player'
+
+describe('Add to Queue - playLaterInQueue', () => {
+ it('adds track to the end of the queue', async () => {
+ const track: BaseItemDto = {
+ Id: 't1',
+ Name: 'Test Track',
+ // Intentionally exclude AlbumId to avoid image URL building
+ Type: 'Audio',
+ }
+
+ // Mock getQueue to return updated list after add
+ ;(TrackPlayer.getQueue as jest.Mock).mockResolvedValue([{ item: track }])
+
+ const api: Partial = { basePath: '' }
+ const deviceProfile: Partial = { Name: 'test' }
+
+ const downloaded: JellifyDownload = {
+ // Minimal viable JellifyTrack fields
+ url: '/downloads/t1.mp3',
+ duration: 180,
+ type: TrackType.Default,
+ item: track,
+ sessionId: null,
+ sourceType: 'download',
+ artwork: '/downloads/t1.jpg',
+ // JellifyDownload fields
+ savedAt: new Date().toISOString(),
+ isAutoDownloaded: false,
+ path: '/downloads/t1.mp3',
+ }
+
+ await playLaterInQueue({
+ api: api as Api,
+ deviceProfile: deviceProfile as DeviceProfile,
+ networkStatus: null,
+ tracks: [track],
+ queuingType: undefined,
+ downloadedTracks: [downloaded],
+ })
+
+ expect(TrackPlayer.add).toHaveBeenCalledTimes(1)
+ const callArg = (TrackPlayer.add as jest.Mock).mock.calls[0][0]
+ expect(Array.isArray(callArg)).toBe(true)
+ expect(callArg[0].item.Id).toBe('t1')
+ })
+})
diff --git a/maestro/tests/6-settings.yaml b/maestro/tests/6-settings.yaml
index 65a04b14..5e5c437c 100644
--- a/maestro/tests/6-settings.yaml
+++ b/maestro/tests/6-settings.yaml
@@ -13,14 +13,6 @@ appId: com.cosmonautical.jellify
text: "App"
# Test App (Preferences) Tab - should already be selected
-- assertVisible:
- text: "Send Analytics"
-- assertVisible:
- text: "Send usage and crash data"
-- assertVisible:
- text: "Reduce Haptics"
-- assertVisible:
- text: "Reduce haptic feedback"
- assertVisible:
text: "Theme"
- assertVisible:
@@ -29,6 +21,8 @@ appId: com.cosmonautical.jellify
text: "Light"
- assertVisible:
text: "Dark"
+- assertVisible:
+ text: "Track Swipe Actions"
# Test Player (Playback) Tab
- tapOn:
diff --git a/src/components/Album/index.tsx b/src/components/Album/index.tsx
index 069af639..cebddf90 100644
--- a/src/components/Album/index.tsx
+++ b/src/components/Album/index.tsx
@@ -24,6 +24,7 @@ import LibraryStackParamList from '../../screens/Library/types'
import DiscoverStackParamList from '../../screens/Discover/types'
import { BaseStackParamList } from '../../screens/types'
import useStreamingDeviceProfile, { useDownloadingDeviceProfile } from '../../stores/device-profile'
+import { closeAllSwipeableRows } from '../Global/components/swipeable-row-registry'
import { useApi } from '../../stores'
/**
@@ -64,6 +65,10 @@ export function Album(): React.JSX.Element {
const albumTrackList = useMemo(() => discs?.flatMap((disc) => disc.data), [discs])
+ const handleScrollBeginDrag = useCallback(() => {
+ closeAllSwipeableRows()
+ }, [])
+
return (
)}
+ onScrollBeginDrag={handleScrollBeginDrag}
/>
)
}
diff --git a/src/components/Global/components/SwipeableRow.tsx b/src/components/Global/components/SwipeableRow.tsx
new file mode 100644
index 00000000..d4aab642
--- /dev/null
+++ b/src/components/Global/components/SwipeableRow.tsx
@@ -0,0 +1,393 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { XStack, YStack, getToken } from 'tamagui'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, {
+ Easing,
+ interpolate,
+ useAnimatedStyle,
+ useSharedValue,
+ withTiming,
+} from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import Icon from './icon'
+import { Text } from '../helpers/text'
+import useHapticFeedback from '../../../hooks/use-haptic-feedback'
+import {
+ notifySwipeableRowClosed,
+ notifySwipeableRowOpened,
+ registerSwipeableRow,
+ unregisterSwipeableRow,
+} from './swipeable-row-registry'
+
+export type SwipeAction = {
+ label: string
+ icon: string
+ color: string // Tamagui token e.g. '$success'
+ onTrigger: () => void
+}
+
+export type QuickAction = {
+ icon: string
+ color: string // Tamagui token e.g. '$primary'
+ onPress: () => void
+}
+
+type Props = {
+ children: React.ReactNode
+ leftAction?: SwipeAction | null // immediate action on right swipe
+ leftActions?: QuickAction[] | null // quick action menu on right swipe
+ rightAction?: SwipeAction | null // legacy immediate action on left swipe
+ rightActions?: QuickAction[] | null // quick action menu on left swipe
+ disabled?: boolean
+}
+
+/**
+ * Shared swipeable row using a Pan gesture. One action allowed per side for simplicity,
+ * consistent thresholds and snap behavior across the app.
+ */
+export default function SwipeableRow({
+ children,
+ leftAction,
+ leftActions,
+ rightAction,
+ rightActions,
+ disabled,
+}: Props) {
+ const triggerHaptic = useHapticFeedback()
+ const tx = useSharedValue(0)
+ const [menuOpen, setMenuOpen] = useState(false)
+ const [dragging, setDragging] = useState(false)
+ const idRef = useRef(undefined)
+ const menuOpenRef = useRef(false)
+ const defaultMaxLeft = 120
+ const defaultMaxRight = -120
+ const threshold = 80
+ const [rightActionsWidth, setRightActionsWidth] = useState(0)
+ const [leftActionsWidth, setLeftActionsWidth] = useState(0)
+
+ // Compute how far we allow left swipe. If quick actions exist, use their width; else a sane default.
+ const hasRightSide = !!rightAction || (rightActions && rightActions.length > 0)
+ const maxRight = hasRightSide
+ ? rightActions && rightActions.length > 0
+ ? -Math.max(0, rightActionsWidth)
+ : defaultMaxRight
+ : 0
+
+ // Compute how far we allow right swipe. If quick actions exist on left side, use their width.
+ const hasLeftSide = !!leftAction || (leftActions && leftActions.length > 0)
+ const maxLeft = hasLeftSide
+ ? leftActions && leftActions.length > 0
+ ? Math.max(0, leftActionsWidth)
+ : defaultMaxLeft
+ : 0
+
+ if (!idRef.current) {
+ idRef.current = `swipeable-row-${Math.random().toString(36).slice(2)}`
+ }
+
+ const syncClosedState = useCallback(() => {
+ menuOpenRef.current = false
+ setMenuOpen(false)
+ notifySwipeableRowClosed(idRef.current!)
+ }, [])
+
+ const close = useCallback(() => {
+ syncClosedState()
+ tx.value = withTiming(0, { duration: 160, easing: Easing.out(Easing.cubic) })
+ }, [syncClosedState, tx])
+
+ const openMenu = useCallback(() => {
+ menuOpenRef.current = true
+ setMenuOpen(true)
+ notifySwipeableRowOpened(idRef.current!)
+ }, [])
+
+ useEffect(() => {
+ registerSwipeableRow(idRef.current!, close)
+ return () => {
+ unregisterSwipeableRow(idRef.current!)
+ }
+ }, [close])
+
+ useEffect(() => {
+ menuOpenRef.current = menuOpen
+ }, [menuOpen])
+
+ const schedule = (fn?: () => void) => {
+ if (!fn) return
+ // Defer JS work so the UI bounce plays smoothly
+ setTimeout(() => fn(), 0)
+ }
+
+ const gesture = useMemo(() => {
+ return Gesture.Pan()
+ .activeOffsetX([-10, 10])
+ .failOffsetY([-10, 10])
+ .onBegin(() => {
+ if (disabled) return
+ runOnJS(setDragging)(true)
+ })
+ .onUpdate((e) => {
+ if (disabled) return
+ const next = Math.max(Math.min(e.translationX, maxLeft), maxRight)
+ tx.value = next
+ })
+ .onEnd(() => {
+ if (disabled) return
+ if (tx.value > threshold) {
+ // Right swipe: show left quick actions if provided; otherwise trigger leftAction
+ if (leftActions && leftActions.length > 0) {
+ runOnJS(triggerHaptic)('impactLight')
+ // Snap open to expose quick actions, do not auto-trigger
+ tx.value = withTiming(maxLeft, {
+ duration: 140,
+ easing: Easing.out(Easing.cubic),
+ })
+ runOnJS(openMenu)()
+ return
+ } else if (leftAction) {
+ runOnJS(triggerHaptic)('impactLight')
+ tx.value = withTiming(
+ maxLeft,
+ { duration: 140, easing: Easing.out(Easing.cubic) },
+ () => {
+ runOnJS(schedule)(leftAction.onTrigger)
+ tx.value = withTiming(0, {
+ duration: 160,
+ easing: Easing.out(Easing.cubic),
+ })
+ },
+ )
+ return
+ }
+ }
+ // Left swipe (quick actions)
+ if (tx.value < -Math.min(threshold, Math.abs(maxRight) / 2)) {
+ if (rightActions && rightActions.length > 0) {
+ runOnJS(triggerHaptic)('impactLight')
+ // Snap open to expose quick actions, do not auto-trigger
+ tx.value = withTiming(maxRight, {
+ duration: 140,
+ easing: Easing.out(Easing.cubic),
+ })
+ runOnJS(openMenu)()
+ return
+ } else if (rightAction) {
+ runOnJS(triggerHaptic)('impactLight')
+ tx.value = withTiming(
+ maxRight,
+ { duration: 140, easing: Easing.out(Easing.cubic) },
+ () => {
+ runOnJS(schedule)(rightAction.onTrigger)
+ tx.value = withTiming(0, {
+ duration: 160,
+ easing: Easing.out(Easing.cubic),
+ })
+ },
+ )
+ return
+ }
+ }
+ tx.value = withTiming(0, { duration: 160, easing: Easing.out(Easing.cubic) })
+ runOnJS(syncClosedState)()
+ })
+ .onFinalize(() => {
+ if (disabled) return
+ runOnJS(setDragging)(false)
+ })
+ }, [
+ disabled,
+ leftAction,
+ leftActions,
+ rightAction,
+ rightActions,
+ maxRight,
+ maxLeft,
+ openMenu,
+ syncClosedState,
+ triggerHaptic,
+ ])
+
+ const fgStyle = useAnimatedStyle(() => ({ transform: [{ translateX: tx.value }] }))
+ const leftUnderlayStyle = useAnimatedStyle(() => {
+ // Normalize progress to [0,1] with a monotonic denominator to avoid non-monotonic ranges
+ // when the available swipe distance is smaller than the threshold (e.g., 1 quick action = 48px)
+ const leftMax = maxLeft === 0 ? 1 : maxLeft
+ const denom = Math.max(1, Math.min(threshold, leftMax))
+ const progress = Math.min(1, Math.max(0, tx.value / denom))
+ // Slight ease by capping at 0.9 near threshold and 1.0 when fully open
+ const opacity = progress < 1 ? progress * 0.9 : 1
+ return { opacity }
+ })
+ const rightUnderlayStyle = useAnimatedStyle(() => {
+ const rightMax = maxRight === 0 ? -1 : maxRight // negative value when available
+ const absMax = Math.abs(rightMax)
+ const denom = Math.max(1, Math.min(threshold, absMax))
+ const progress = Math.min(1, Math.max(0, -tx.value / denom))
+ const opacity = progress < 1 ? progress * 0.9 : 1
+ return { opacity }
+ })
+
+ if (disabled) return <>{children}
+
+ return (
+
+
+ {/* Left action underlay with colored background (icon-only) */}
+ {leftAction && !leftActions && (
+
+
+
+
+
+
+
+ )}
+
+ {leftActions && leftActions.length > 0 && (
+
+ {/* Underlay background matches list background for continuity */}
+
+ setLeftActionsWidth(e.nativeEvent.layout.width)}
+ alignItems='center'
+ justifyContent='flex-start'
+ >
+ {leftActions.map((action, idx) => (
+ {
+ action.onPress()
+ close()
+ }}
+ >
+
+
+ ))}
+
+
+
+ )}
+
+ {/* Right action underlay or quick actions (left swipe) */}
+ {rightAction && !rightActions && (
+
+
+
+
+
+
+
+ )}
+
+ {rightActions && rightActions.length > 0 && (
+
+ {/* Underlay background matches list background to keep continuity */}
+
+ setRightActionsWidth(e.nativeEvent.layout.width)}
+ alignItems='center'
+ justifyContent='flex-end'
+ >
+ {rightActions.map((action, idx) => (
+ {
+ action.onPress()
+ close()
+ }}
+ >
+
+
+ ))}
+
+
+
+ )}
+
+ {/* Foreground content */}
+
+ {children}
+
+
+ {/* Tap-capture overlay: when a quick-action menu is open, tapping the row closes it without triggering child onPress */}
+
+
+
+ )
+}
diff --git a/src/components/Global/components/alphabetical-selector.tsx b/src/components/Global/components/alphabetical-selector.tsx
index fcb065c5..3379a4f6 100644
--- a/src/components/Global/components/alphabetical-selector.tsx
+++ b/src/components/Global/components/alphabetical-selector.tsx
@@ -2,12 +2,8 @@ import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react'
import { LayoutChangeEvent, View as RNView } from 'react-native'
import { getToken, useTheme, View, YStack } from 'tamagui'
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
-import Animated, {
- useSharedValue,
- useAnimatedStyle,
- runOnJS,
- withTiming,
-} from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
import { Text } from '../helpers/text'
import { useSafeAreaFrame } from 'react-native-safe-area-context'
import { UseInfiniteQueryResult, useMutation } from '@tanstack/react-query'
diff --git a/src/components/Global/components/item-row.tsx b/src/components/Global/components/item-row.tsx
index 0ce96cea..8e6c94c8 100644
--- a/src/components/Global/components/item-row.tsx
+++ b/src/components/Global/components/item-row.tsx
@@ -9,12 +9,17 @@ import FavoriteIcon from './favorite-icon'
import navigationRef from '../../../../navigation'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { BaseStackParamList } from '../../../screens/types'
-import { useLoadNewQueue } from '../../../providers/Player/hooks/mutations'
+import { useAddToQueue, useLoadNewQueue } from '../../../providers/Player/hooks/mutations'
import { useNetworkStatus } from '../../../stores/network'
import useStreamingDeviceProfile from '../../../stores/device-profile'
import useItemContext from '../../../hooks/use-item-context'
import { RouteProp, useRoute } from '@react-navigation/native'
import { useCallback } from 'react'
+import SwipeableRow from './SwipeableRow'
+import { useSwipeSettingsStore } from '../../../stores/settings/swipe'
+import { buildSwipeConfig } from '../helpers/swipe-actions'
+import { useIsFavorite } from '../../../api/queries/user-data'
+import { useAddFavorite, useRemoveFavorite } from '../../../api/mutations/favorite'
import { useApi } from '../../../stores'
interface ItemRowProps {
@@ -49,8 +54,12 @@ export default function ItemRow({
const deviceProfile = useStreamingDeviceProfile()
const loadNewQueue = useLoadNewQueue()
+ const { mutate: addToQueue } = useAddToQueue()
+ const { mutate: addFavorite } = useAddFavorite()
+ const { mutate: removeFavorite } = useRemoveFavorite()
const warmContext = useItemContext()
+ const { data: isFavorite } = useIsFavorite(item)
const onPressIn = useCallback(() => warmContext(item), [warmContext, item])
@@ -103,45 +112,81 @@ export default function ItemRow({
const renderRunTime = item.Type === BaseItemKind.Audio
+ const isAudio = item.Type === 'Audio'
+
+ const leftSettings = useSwipeSettingsStore((s) => s.left)
+ const rightSettings = useSwipeSettingsStore((s) => s.right)
+
+ const swipeHandlers = useCallback(
+ () => ({
+ addToQueue: () =>
+ addToQueue({
+ api,
+ deviceProfile,
+ networkStatus,
+ tracks: [item],
+ queuingType: QueuingType.DirectlyQueued,
+ }),
+ toggleFavorite: () => (isFavorite ? removeFavorite({ item }) : addFavorite({ item })),
+ addToPlaylist: () => navigationRef.navigate('AddToPlaylist', { track: item }),
+ }),
+ [
+ addToQueue,
+ api,
+ deviceProfile,
+ networkStatus,
+ item,
+ addFavorite,
+ removeFavorite,
+ isFavorite,
+ ],
+ )
+
+ const swipeConfig = isAudio
+ ? buildSwipeConfig({ left: leftSettings, right: rightSettings, handlers: swipeHandlers() })
+ : {}
+
return (
-
-
-
-
+
+
+
+
+
-
+
-
- {renderRunTime ? (
- {item.RunTimeTicks}
- ) : ['Playlist'].includes(item.Type ?? '') ? (
- {`${item.ChildCount ?? 0} ${item.ChildCount === 1 ? 'Track' : 'Tracks'}`}
- ) : null}
-
+
+ {renderRunTime ? (
+ {item.RunTimeTicks}
+ ) : ['Playlist'].includes(item.Type ?? '') ? (
+ {`${item.ChildCount ?? 0} ${item.ChildCount === 1 ? 'Track' : 'Tracks'}`}
+ ) : null}
+
- {item.Type === 'Audio' || item.Type === 'MusicAlbum' ? (
-
- ) : null}
+ {item.Type === 'Audio' || item.Type === 'MusicAlbum' ? (
+
+ ) : null}
+
-
+
)
}
diff --git a/src/components/Global/components/swipeable-row-registry.ts b/src/components/Global/components/swipeable-row-registry.ts
new file mode 100644
index 00000000..4ef731c2
--- /dev/null
+++ b/src/components/Global/components/swipeable-row-registry.ts
@@ -0,0 +1,38 @@
+type CloseHandler = () => void
+
+const closeHandlers = new Map()
+const openRows = new Set()
+
+export const registerSwipeableRow = (id: string, close: CloseHandler) => {
+ closeHandlers.set(id, close)
+}
+
+export const unregisterSwipeableRow = (id: string) => {
+ closeHandlers.delete(id)
+ openRows.delete(id)
+}
+
+export const notifySwipeableRowOpened = (id: string) => {
+ openRows.forEach((openId) => {
+ if (openId !== id) {
+ const close = closeHandlers.get(openId)
+ close?.()
+ }
+ })
+
+ openRows.clear()
+ openRows.add(id)
+}
+
+export const notifySwipeableRowClosed = (id: string) => {
+ openRows.delete(id)
+}
+
+export const closeAllSwipeableRows = () => {
+ openRows.forEach((id) => {
+ const close = closeHandlers.get(id)
+ close?.()
+ })
+
+ openRows.clear()
+}
diff --git a/src/components/Global/components/track.tsx b/src/components/Global/components/track.tsx
index 577b7094..5961dce4 100644
--- a/src/components/Global/components/track.tsx
+++ b/src/components/Global/components/track.tsx
@@ -14,12 +14,17 @@ import navigationRef from '../../../../navigation'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { BaseStackParamList } from '../../../screens/types'
import ItemImage from './image'
-import { useLoadNewQueue } from '../../../providers/Player/hooks/mutations'
+import { useAddToQueue, useLoadNewQueue } from '../../../providers/Player/hooks/mutations'
import useStreamingDeviceProfile from '../../../stores/device-profile'
import useStreamedMediaInfo from '../../../api/queries/media'
import { useDownloadedTrack } from '../../../api/queries/download'
+import SwipeableRow from './SwipeableRow'
+import { useSwipeSettingsStore } from '../../../stores/settings/swipe'
+import { buildSwipeConfig } from '../helpers/swipe-actions'
+import { useIsFavorite } from '../../../api/queries/user-data'
import { useApi } from '../../../stores'
import { useCurrentTrack, usePlayQueue } from '../../../stores/player/queue'
+import { useAddFavorite, useRemoveFavorite } from '../../../api/mutations/favorite'
export interface TrackProps {
track: BaseItemDto
@@ -50,6 +55,7 @@ export default function Track({
testID,
isNested,
invertedColors,
+ prependElement,
showRemove,
onRemove,
}: TrackProps): React.JSX.Element {
@@ -62,12 +68,19 @@ export default function Track({
const nowPlaying = useCurrentTrack()
const playQueue = usePlayQueue()
const loadNewQueue = useLoadNewQueue()
+ const { mutate: addToQueue } = useAddToQueue()
const [networkStatus] = useNetworkStatus()
const { data: mediaInfo } = useStreamedMediaInfo(track.Id)
const offlineAudio = useDownloadedTrack(track.Id)
+ const { mutate: addFavorite } = useAddFavorite()
+ const { mutate: removeFavorite } = useRemoveFavorite()
+ const { data: isFavoriteTrack } = useIsFavorite(track)
+ const leftSettings = useSwipeSettingsStore((s) => s.left)
+ const rightSettings = useSwipeSettingsStore((s) => s.right)
+
// Memoize expensive computations
const isPlaying = useMemo(
() => nowPlaying?.item.Id === track.Id,
@@ -156,89 +169,129 @@ export default function Track({
[showArtwork, track.Artists],
)
+ const swipeHandlers = useMemo(
+ () => ({
+ addToQueue: () =>
+ addToQueue({
+ api,
+ deviceProfile,
+ networkStatus,
+ tracks: [track],
+ queuingType: QueuingType.DirectlyQueued,
+ }),
+ toggleFavorite: () =>
+ isFavoriteTrack ? removeFavorite({ item: track }) : addFavorite({ item: track }),
+ addToPlaylist: () => navigationRef.navigate('AddToPlaylist', { track }),
+ }),
+ [
+ addToQueue,
+ api,
+ deviceProfile,
+ networkStatus,
+ track,
+ addFavorite,
+ removeFavorite,
+ isFavoriteTrack,
+ ],
+ )
+
+ const swipeConfig = useMemo(
+ () =>
+ buildSwipeConfig({ left: leftSettings, right: rightSettings, handlers: swipeHandlers }),
+ [leftSettings, rightSettings, swipeHandlers],
+ )
+
return (
-
+
- {showArtwork ? (
-
- ) : (
-
- {indexNumber}
-
- )}
-
+ {prependElement ? (
+
+ {prependElement}
+
+ ) : null}
-
-
- {trackName}
-
+ {showArtwork ? (
+
+ ) : (
+
+ {indexNumber}
+
+ )}
+
- {shouldShowArtists && (
+
- {artistsText}
+ {trackName}
- )}
-
-
+ {shouldShowArtists && (
+
+ {artistsText}
+
+ )}
+
-
+
-
- {track.RunTimeTicks}
-
+
-
-
+
+ {track.RunTimeTicks}
+
+
+
+
+
)
}
diff --git a/src/components/Global/helpers/swipe-actions.ts b/src/components/Global/helpers/swipe-actions.ts
new file mode 100644
index 00000000..8e1a2949
--- /dev/null
+++ b/src/components/Global/helpers/swipe-actions.ts
@@ -0,0 +1,87 @@
+import { QuickAction, SwipeAction } from '../components/SwipeableRow'
+import { SwipeActionType } from '../../../stores/settings/swipe'
+
+export type SwipeHandlers = {
+ addToQueue: () => void
+ toggleFavorite: () => void
+ addToPlaylist: () => void
+}
+
+export type SwipeConfig = {
+ leftAction?: SwipeAction
+ leftActions?: QuickAction[]
+ rightAction?: SwipeAction
+ rightActions?: QuickAction[]
+}
+function toSwipeAction(type: SwipeActionType, handlers: SwipeHandlers): SwipeAction {
+ switch (type) {
+ case 'AddToQueue':
+ return {
+ label: 'Add to queue',
+ icon: 'playlist-plus',
+ color: '$success',
+ onTrigger: handlers.addToQueue,
+ }
+ case 'ToggleFavorite':
+ return {
+ label: 'Toggle favorite',
+ icon: 'heart',
+ color: '$primary',
+ onTrigger: handlers.toggleFavorite,
+ }
+ case 'AddToPlaylist':
+ default:
+ return {
+ label: 'Add to playlist',
+ icon: 'playlist-plus',
+ color: '$color',
+ onTrigger: handlers.addToPlaylist,
+ }
+ }
+}
+
+function toQuickAction(type: SwipeActionType, handlers: SwipeHandlers): QuickAction {
+ switch (type) {
+ case 'AddToQueue':
+ return {
+ icon: 'playlist-plus',
+ color: '$success',
+ onPress: handlers.addToQueue,
+ }
+ case 'ToggleFavorite':
+ return {
+ icon: 'heart',
+ color: '$primary',
+ onPress: handlers.toggleFavorite,
+ }
+ case 'AddToPlaylist':
+ default:
+ return {
+ icon: 'playlist-plus',
+ color: '$color',
+ onPress: handlers.addToPlaylist,
+ }
+ }
+}
+
+export function buildSwipeConfig(params: {
+ left: SwipeActionType[]
+ right: SwipeActionType[]
+ handlers: SwipeHandlers
+}): SwipeConfig {
+ const { left, right, handlers } = params
+
+ const cfg: SwipeConfig = {}
+
+ if (left && left.length > 0) {
+ if (left.length === 1) cfg.leftAction = toSwipeAction(left[0], handlers)
+ else cfg.leftActions = left.map((t) => toQuickAction(t, handlers))
+ }
+
+ if (right && right.length > 0) {
+ if (right.length === 1) cfg.rightAction = toSwipeAction(right[0], handlers)
+ else cfg.rightActions = right.map((t) => toQuickAction(t, handlers))
+ }
+
+ return cfg
+}
diff --git a/src/components/InstantMix/component.tsx b/src/components/InstantMix/component.tsx
index 65ddd23e..5c3a1f6a 100644
--- a/src/components/InstantMix/component.tsx
+++ b/src/components/InstantMix/component.tsx
@@ -1,16 +1,22 @@
+import { useCallback } from 'react'
import { InstantMixProps } from '../../screens/types'
import Track from '../Global/components/track'
import { Separator } from 'tamagui'
import { FlashList } from '@shopify/flash-list'
+import { closeAllSwipeableRows } from '../Global/components/swipeable-row-registry'
export default function InstantMix({ route, navigation }: InstantMixProps): React.JSX.Element {
const { mix } = route.params
+ const handleScrollBeginDrag = useCallback(() => {
+ closeAllSwipeableRows()
+ }, [])
return (
}
+ onScrollBeginDrag={handleScrollBeginDrag}
renderItem={({ item, index }) => (