Merge pull request #4 from MatthewSummers05/feature/update-queue

Changes to the queue page and add history page.

Author: booploops

components/History.tsx

@@ -0,0 +1,33 @@
+import { getQueueHistory } from "@/lib/history";
+import { queueItems } from "@/lib/queue";
+import { useAtom, useAtomValue } from "jotai";
+import { FlatList, View } from "react-native";
+import { UIQueueItem } from "./Queue";
+
+export default function History() {
+  const history = useAtomValue(getQueueHistory);
+  const [queue] = useAtom(queueItems);
+
+  return (
+    <View style={{ flex: 1, width: "100%" }}>
+      <FlatList
+        data={history}
+        keyExtractor={(_, idx) => idx.toString()}
+        renderItem={({ item, index }) => (
+          <UIQueueItem
+            item={item}
+            idx={index}
+          />
+        )}
+        contentContainerStyle={{ paddingBottom: 32 }}
+        initialNumToRender={10}
+        windowSize={5}
+        getItemLayout={(_, index) => ({
+          length: 80,
+          offset: 80 * index,
+          index,
+        })}
+      />
+    </View>
+  );
+}

components/NowPlayingView.tsx

@@ -5,6 +5,7 @@ import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { Dimensions, View } from "react-native";
 import { SegmentedButtons } from "react-native-paper";
+import History from "./History";
 import Lyrics from "./Lyrics";
 import { NowPlayingArtwork } from "./NowPlayingArtwork";
 import { NowPlayingMetadata } from "./NowPlayingMetadata";
@@ -43,7 +44,7 @@ export function NowPlayingView() {
   }, [isPlayingB]);
 
 
-  const [playerMode, setPlayerMode] = useState<"player" | "queue" | "lyrics">(
+  const [playerMode, setPlayerMode] = useState<"player" | "queue" | "history" | "lyrics">(
     "player"
   );
 
@@ -95,6 +96,11 @@ export function NowPlayingView() {
                   label: "Queue",
                   icon: "playlist-music",
                 },
+                {
+                  value: "history",
+                  label: "History",
+                  icon: "playlist-music",
+                },
                 {
                   value: "lyrics",
                   label: "Lyrics",
@@ -153,6 +159,19 @@ export function NowPlayingView() {
                 <Queue />
               </View>
             )}
+            {playerMode === "history" && (
+              <View
+                style={{
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flex: 1,
+                  width: "100%",
+                  display: "flex",
+                }}
+              >
+                <History />
+              </View>
+            )}
             {playerMode === "lyrics" && (
               <View
                 style={{

components/Queue.tsx

@@ -1,4 +1,4 @@
-import { changeToIndex, fetchQueue, moveToPosition, queueItems, removeByIndex } from "@/lib/queue";
+import { changeToIndex, fetchQueue, modifiedQueueItems, moveToPosition, queueItems, removeByIndex } from "@/lib/queue";
 import { QueueItem } from "@/types/musickit";
 import { useIsFocused } from "@react-navigation/native";
 import { useAtom } from "jotai";
@@ -9,7 +9,7 @@ import { Button, Dialog, IconButton, List, Portal, useTheme } from "react-native
 
 export default function Queue() {
   const isFocused = useIsFocused();
-  const [queue, setQueue] = useAtom(queueItems);
+  const [queue, setQueue] = useAtom(modifiedQueueItems);
   const theme = useTheme();
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
 
@@ -58,7 +58,7 @@ type UIQueueItemProps = {
   onDragEnd?: () => void;
 };
 
-function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueItemProps) {
+export function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueItemProps) {
   const [queue, setQueue] = useAtom(queueItems);
   const [showActions, setShowActions] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -85,14 +85,23 @@ function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueIt
         toValue: 1.05,
         useNativeDriver: true,
       }).start();
-    } else if (event.nativeEvent.state === State.END || event.nativeEvent.state === State.CANCELLED) {
+  } else if (event.nativeEvent.state === State.END || event.nativeEvent.state === State.CANCELLED) {
       const { translationY } = event.nativeEvent;
-      const itemHeight = 80; // Approximate height of each item
+      const itemHeight = 80;
       const moveDistance = Math.round(translationY / itemHeight);
-      const newIndex = Math.max(0, Math.min(idx + moveDistance, queue.length - 1));
-
-      if (newIndex !== idx && event.nativeEvent.state === State.END) {
-        moveToPosition(idx, newIndex);
+      const originalIdx = item.originalIndex;
+      const newOriginalIndex =
+        originalIdx !== undefined
+          ? Math.max(0, Math.min(originalIdx + moveDistance, queue.length - 1))
+          : undefined;
+
+      if (
+        newOriginalIndex !== undefined &&
+        originalIdx !== undefined &&
+        newOriginalIndex !== originalIdx &&
+        event.nativeEvent.state === State.END
+      ) {
+        moveToPosition(originalIdx, newOriginalIndex);
       }
 
       Animated.parallel([
@@ -106,7 +115,6 @@ function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueIt
         }),
       ]).start();
 
-      // Delay resetting isDragging to prevent menu from showing
       setTimeout(() => {
         setIsDragging(false);
       }, 100);
@@ -115,7 +123,6 @@ function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueIt
     }
   };
 
-  // Move PanGestureHandler to wrap only the drag handle
   return (
     <>
       <Animated.View
@@ -132,7 +139,7 @@ function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueIt
           title={item.attributes.name ?? "Untitled"}
           description={item.attributes.artistName ?? ""}
           onPress={() => {
-            changeToIndex(idx);
+            changeToIndex(item.originalIndex ?? idx);
           }}
           left={(props) =>
             item.attributes.artwork?.url ? (
@@ -179,7 +186,7 @@ function UIQueueItem({ item, idx, isDragged, onDragStart, onDragEnd }: UIQueueIt
               <Button
                 icon="close"
                 onPress={() => {
-                  removeByIndex(idx);
+                  removeByIndex(item.originalIndex ?? idx);
                   setShowActions(false);
                 }}>Remove From Queue</Button>
             </Dialog.Content>

lib/history.ts

@@ -0,0 +1,22 @@
+import { atom } from "jotai";
+import { nowPlayingItem } from "./playback-control";
+import { queueItems } from "./queue";
+
+export const getQueueHistory = atom((get) => {
+  const queue = get(queueItems);
+  const nowPlaying = get(nowPlayingItem);
+
+  if (!queue || !nowPlaying) return [];
+
+  const nowPlayingId = nowPlaying.playParams?.id;
+  if (!nowPlayingId) return [];
+
+  const nowPlayingIndex = queue.findIndex(item =>
+    item.id === nowPlayingId ||
+    item.attributes?.playParams?.id === nowPlayingId ||
+    item._container?.id === nowPlayingId
+  );
+
+  if (nowPlayingIndex === -1) return [];
+  return queue.slice(0, nowPlayingIndex);
+});

lib/io.ts

@@ -17,7 +17,7 @@ import {
   UpdateNotificationMinimal,
   volume
 } from "./playback-control";
-import { fetchQueue } from "./queue";
+import { fetchModifiedQueue, fetchQueue } from "./queue";
 
 export class IOState {
   static instance: Socket;
@@ -96,6 +96,7 @@ export class IOState {
 
     await getStorefront();
     getNowPlayingItem();
+    fetchModifiedQueue()
     fetchQueue();
   }
 
@@ -135,6 +136,7 @@ export class IOState {
         }
         getNowPlayingItem();
         console.log(msg);
+        fetchModifiedQueue()
         fetchQueue();
         try{
           UpdateNotification(msg.data);

lib/queue.ts

@@ -6,6 +6,33 @@ const store = getDefaultStore();
 export const queueItems = atom<QueueItem[]>([]);
 export const queuePosition = atom(0);
 
+export const modifiedQueueItems = atom<QueueItem[]>([]);
+
+export async function fetchModifiedQueue() {
+  await fetchQueue();
+  const nowPlayingRes = await CiderFetch<{ info: { playParams: { id: string } } }>("/api/v1/playback/now-playing");
+  if (!nowPlayingRes?.info?.playParams.id) return;
+  const nowPlayingId = nowPlayingRes?.info?.playParams.id;
+
+  const queueRes = await CiderFetch<QueueItem[]>("/api/v1/playback/queue");
+  if (!queueRes) return;
+
+  const nowPlayingIndex = queueRes.findIndex((item) => {
+    const id = item._container?.id || item.id || item._songId;
+    return id === nowPlayingId;
+  });
+  const modifiedQueue = (nowPlayingIndex >= 0 ? queueRes.slice(nowPlayingIndex) : queueRes)
+    .map((item, i) => {
+      const itemId = item._container?.id || item.id || item._songId;
+      const originalIndex = queueRes.findIndex((q) => (q._container?.id || q.id || q._songId) === itemId);
+      if (originalIndex === -1) {
+        queueRes.forEach(q => console.log('  queueRes id:', q._container?.id || q.id || q._songId));
+      }
+      return { ...item, originalIndex };
+    });
+  store.set(modifiedQueueItems, modifiedQueue);
+}
+
 export async function fetchQueue() {
   const res = await CiderFetch<QueueItem[]>("/api/v1/playback/queue");
   if (!res) return;
@@ -18,6 +45,7 @@ export async function clearQueue() {
   });
   if (!res) return;
   await fetchQueue();
+  await fetchModifiedQueue();
 }
 
 export async function changeToIndex(index: number) {
@@ -26,6 +54,7 @@ export async function changeToIndex(index: number) {
   });
   if (!res) return;
   await fetchQueue();
+  await fetchModifiedQueue();
 }
 
 export async function removeByIndex(index: number) {
@@ -40,6 +69,7 @@ export async function removeByIndex(index: number) {
   );
   if (!res) return;
   await fetchQueue();
+  await fetchModifiedQueue();
 }
 
 export async function moveToPosition(
@@ -55,4 +85,5 @@ export async function moveToPosition(
   );
   if (!res) return;
   await fetchQueue();
+  await fetchModifiedQueue();
 }