Load next videos in the queue

src/components/card.tsx

@@ -4,7 +4,7 @@ import { useDispatch } from "react-redux";
 
 import { joinArtists } from "../utils";
 import { setQueue } from "../store/queue/actions";
-import { Post } from "../store/list/types";
+import { FeedListType, Post } from "../store/list/types";
 
 import { Heart } from "react-feather";
 
@@ -17,6 +17,7 @@ type CardProps = {
   onClick?: Function;
   gkey?: string;
   listName?: string;
+  type: FeedListType;
 };
 
 export default function Card(props: CardProps) {
@@ -30,7 +31,7 @@ export default function Card(props: CardProps) {
         if (props.onClick !== undefined) {
           props.onClick();
         } else if (props.redirect === true) {
-          dispatch(setQueue(props.queue));
+          dispatch(setQueue(props.queue, props.type));
           history.push("/video?=" + props.id);
         }
       }}

src/components/feed-card.tsx

@@ -5,7 +5,7 @@ import { useDispatch } from "react-redux";
 
 import { joinArtists } from "../utils";
 import { setQueue } from "../store/queue/actions";
-import { Post } from "../store/list/types";
+import { FeedListType, Post } from "../store/list/types";
 
 import { Heart } from "react-feather";
 
@@ -29,7 +29,7 @@ export default function FeedCard(props: CardProps) {
     if (props.onClick !== undefined) {
       props.onClick();
     } else if (props.redirect === true) {
-      dispatch(setQueue(props.queue));
+      dispatch(setQueue(props.queue, FeedListType.latest));
       history.push("/video?=" + props.id);
     }
   };

src/components/list.tsx

@@ -86,7 +86,14 @@ export const List = ({ title, type, redirect }: ListProps) => {
       ) : (
         <VArray className="array" id={title.trim()} len={videoList.length}>
           {videoList.map((vid) => (
-            <Card id={vid.id} key={vid.id + title.trim()} data={vid} queue={videoList} redirect={redirect} />
+            <Card
+              id={vid.id}
+              key={vid.id + title.trim()}
+              data={vid}
+              queue={videoList}
+              redirect={redirect}
+              type={type}
+            />
           ))}
         </VArray>
       )}

src/components/video.tsx

@@ -18,10 +18,10 @@ interface VideoProps {
 }
 
 export const Video = (props: VideoProps) => {
-  let preQueue = useSelector((state: FalconRootState) => state.queue.posts);
-  let [queue] = useState(preQueue);
+  let { type, posts } = useSelector((state: FalconRootState) => state.queue);
+  let [queue] = useState(posts);
 
-  if (preQueue.length === 0) {
+  if (posts.length === 0) {
     if (window !== undefined) {
       var home = window.location.protocol + "//" + window.location.host;
       if (window.history.pushState) {
@@ -42,7 +42,7 @@ export const Video = (props: VideoProps) => {
   let [currentIndex, changeIndex] = useState(
     (() => {
       if (props.id) {
-        return preQueue.map((e) => e.id).indexOf(props.id);
+        return posts.map((e) => e.id).indexOf(props.id);
       }
       return 0;
     })()
@@ -105,9 +105,15 @@ export const Video = (props: VideoProps) => {
   }, [currentIndex]);
 
   let playNextVideo = useCallback(() => {
-    if (queue.length > 0 && currentIndex + 1 < queue.length) {
-      changeURLid(queue[currentIndex + 1].id);
-      changeIndex(currentIndex + 1);
+    if (queue.length > 0) {
+      if (currentIndex + 1 < queue.length) {
+        changeURLid(queue[currentIndex + 1].id);
+        changeIndex(currentIndex + 1);
+      } else {
+        // Fetch the songs of the current list type
+        // append the songs to the queue
+        // Play the next song
+      }
     }
   }, [queue, currentIndex]);
 
@@ -235,6 +241,7 @@ export const Video = (props: VideoProps) => {
                 id={vid.id}
                 key={vid.id + "Queue-xyppu"}
                 data={vid}
+                type={type}
                 className={"queueCard" + selectClass}
                 redirect={false}
                 onClick={() => {

src/store/queue/action.types.ts

@@ -1,6 +1,9 @@
-import { Post } from "../list/types";
+import { FeedListType, Post } from "../list/types";
 
 export type QueueAction = {
   type: string;
-  payload: Post[];
+  payload: {
+    type: FeedListType;
+    posts: Post[];
+  };
 };

src/store/queue/actions.ts

@@ -1,9 +1,9 @@
 import { QueueAction } from "./action.types";
-import { Post } from "../list/types";
+import { FeedListType, Post } from "../list/types";
 
-export const setQueue = (list: Post[]): QueueAction => {
+export const setQueue = (list: Post[], type: FeedListType): QueueAction => {
   return {
     type: "new queue",
-    payload: list,
+    payload: { type, posts: list },
   };
 };

src/store/queue/reducer.ts

@@ -1,19 +1,23 @@
 import { Reducer } from "redux";
+import { FeedListType } from "../list/types";
 
 import { QueueAction } from "./action.types";
 import { QUEUE_ADD, QUEUE_RESET } from "./constants";
 import { QueueState } from "./types";
 
 let initialQueueState: QueueState = {
+  // TODO: Find a better way to represent no type state
+  // (Although this gets overwritten in the first update)
+  type: FeedListType.latest,
   posts: [],
 };
 
 export const queueReducer: Reducer<QueueState, QueueAction> = (state = initialQueueState, action): QueueState => {
   switch (action.type) {
     case QUEUE_ADD:
-      return { posts: [...state.posts, ...action.payload] };
+      return { type: action.payload.type, posts: [...state.posts, ...action.payload.posts] };
     case QUEUE_RESET:
-      return { posts: action.payload };
+      return { type: action.payload.type, posts: action.payload.posts };
     default:
       return state;
   }

src/store/queue/types.ts

@@ -1,5 +1,6 @@
-import { Post } from "../list/types";
+import { FeedListType, Post } from "../list/types";
 
 export interface QueueState {
+  type: FeedListType;
   posts: Post[];
 }