spotify state resume/capture

src/features/spotify/components/spotify-controls-bar.tsx

@@ -7,6 +7,8 @@ import {
   SkipForwardIcon,
   GearIcon,
   SpotifyLogoIcon,
+  FloppyDiskIcon,
+  ClockCounterClockwiseIcon,
 } from '@phosphor-icons/react';
 import { useSpotify } from '@/lib/spotify/hooks';
 import { useAuth } from '@/contexts/auth-context';
@@ -28,6 +30,11 @@ const SpotifyControlsBar = () => {
     skipNext,
     skipPrevious,
     activeDevice,
+    capturedState,
+    isCaptureLoading,
+    isResumeLoading,
+    capturePlaybackState,
+    resumePlaybackState,
   } = useSpotify();
 
   if (!isAdmin) return null;
@@ -129,6 +136,34 @@ const SpotifyControlsBar = () => {
           </Tooltip>
         </Group>
 
+        <Group gap="xs">
+          <Tooltip label={'Capture current state'}>
+            <ActionIcon
+              variant="light"
+              color={capturedState ? 'blue' : 'gray'}
+              size="lg"
+              onClick={capturePlaybackState}
+              disabled={!hasActiveDevice || isLoading || isCaptureLoading}
+              loading={isCaptureLoading}
+            >
+              <FloppyDiskIcon size={18} />
+            </ActionIcon>
+          </Tooltip>
+
+          <Tooltip label={capturedState ? 'Restore captured state' : 'No state captured'}>
+            <ActionIcon
+              variant="light"
+              color={capturedState ? 'blue' : 'gray'}
+              size="lg"
+              onClick={resumePlaybackState}
+              disabled={!capturedState || !hasActiveDevice || isLoading || isResumeLoading}
+              loading={isResumeLoading}
+            >
+              <ClockCounterClockwiseIcon size={18} />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+
         <Group gap="xs">
           {activeDevice && (
             <Box>
@@ -149,10 +184,6 @@ const SpotifyControlsBar = () => {
             </ActionIcon>
           </Tooltip>
         </Group>
-
-        {isLoading && (
-          <Loader size="sm" color="green" />
-        )}
       </Group>
 
       {error && (