Merge pull request #178 from mykhailodanilenko/feature/design-additions

List/Grid switch + empty state (#156, #175)

OwnTube.tv/api/constants.ts

@@ -1,6 +1,6 @@
-// Common query parameters for fetching videos that are classified as "local", "non-live", and "Safe-For-Work"
 import { VideosCommonQuery } from "@peertube/peertube-types";
 
+// Common query parameters for fetching videos that are classified as "local", "non-live", and "Safe-For-Work"
 export const commonQueryParams: VideosCommonQuery = {
   start: 0,
   count: 15,
@@ -18,10 +18,13 @@ export enum QUERY_KEYS {
   instance = "instance",
   channel = "channel",
   channels = "channels",
+  channelsCollection = "channelsCollection",
   channelVideos = "channelVideos",
   channelPlaylists = "channelPlaylists",
   categories = "categories",
+  categoriesCollection = "categoriesCollection",
   playlists = "playlists",
   playlistVideos = "playlistVideos",
   playlistInfo = "playlistInfo",
+  playlistsCollection = "playlistsCollection",
 }

OwnTube.tv/api/helpers.ts

@@ -1,5 +1,6 @@
-import { OwnTubeError } from "./models";
+import { GetVideosVideo, OwnTubeError } from "./models";
 import { QUERY_KEYS } from "./constants";
+import { UseQueryResult } from "@tanstack/react-query";
 
 const jsonPaths: Record<keyof typeof QUERY_KEYS, string> = {
   videos: require("./../assets/testResponse-videos.json"),
@@ -16,3 +17,12 @@ export const retry = (failureCount: number, error: OwnTubeError) => {
   }
   return failureCount < 5;
 };
+
+export const combineCollectionQueryResults = <T>(
+  result: UseQueryResult<{ data: Array<GetVideosVideo>; total: number } & T, OwnTubeError>[],
+) => {
+  return {
+    data: result.map(({ data }) => data).filter((item) => Number(item?.total) > 0),
+    isFetching: result.some(({ isFetching }) => isFetching),
+  };
+};

OwnTube.tv/api/queries/categories.ts

@@ -1,9 +1,10 @@
 import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../../app/_layout";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 import { QUERY_KEYS } from "../constants";
 import { CategoriesApiImpl } from "../categoriesApi";
-import { retry } from "../helpers";
+import { combineCollectionQueryResults, retry } from "../helpers";
+import { ApiServiceImpl } from "../peertubeVideosApi";
 
 export const useGetCategoriesQuery = ({ enabled = true }: { enabled?: boolean }) => {
   const { backend } = useLocalSearchParams<RootStackParams["index"]>();
@@ -18,3 +19,26 @@ export const useGetCategoriesQuery = ({ enabled = true }: { enabled?: boolean })
     retry,
   });
 };
+
+export const useGetCategoriesCollectionQuery = (categories: Array<{ name: string; id: number }> = []) => {
+  const { backend } = useLocalSearchParams<RootStackParams["categories"]>();
+
+  return useQueries({
+    queries: categories?.map(({ name, id }) => ({
+      queryKey: [QUERY_KEYS.categoriesCollection, id, backend],
+      queryFn: async () => {
+        const res = await ApiServiceImpl.getVideos(backend!, {
+          categoryOneOf: [id],
+          count: 4,
+          sort: "-publishedAt",
+        });
+
+        return { ...res, name, id };
+      },
+      retry,
+      refetchOnWindowFocus: false,
+      enabled: !!backend,
+    })),
+    combine: combineCollectionQueryResults<{ name: string; id: number }>,
+  });
+};

OwnTube.tv/api/queries/channels.ts

@@ -1,6 +1,6 @@
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQueries, useQuery } from "@tanstack/react-query";
 import { ChannelsApiImpl } from "../channelsApi";
-import { retry } from "../helpers";
+import { combineCollectionQueryResults, retry } from "../helpers";
 import { VideosCommonQuery } from "@peertube/peertube-types";
 import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../../app/_layout";
@@ -94,3 +94,21 @@ export const useGetChannelPlaylistsQuery = (channelHandle?: string) => {
     retry,
   });
 };
+
+export const useGetChannelsCollectionQuery = (channelIds: string[] = []) => {
+  const { backend } = useLocalSearchParams<RootStackParams["channels"]>();
+
+  return useQueries({
+    queries: channelIds?.map((id) => ({
+      queryKey: [QUERY_KEYS.channelsCollection, backend, id],
+      queryFn: async () => {
+        const res = await ChannelsApiImpl.getChannelVideos(backend!, id, { count: 4 });
+        return { ...res, id };
+      },
+      retry,
+      refetchOnWindowFocus: false,
+      enabled: !!backend,
+    })),
+    combine: combineCollectionQueryResults<{ id: string }>,
+  });
+};

OwnTube.tv/api/queries/playlists.ts

@@ -1,10 +1,11 @@
 import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../../app/_layout";
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQueries, useQuery } from "@tanstack/react-query";
 import { QUERY_KEYS } from "../constants";
 import { PlaylistsApiImpl } from "../playlistsApi";
-import { retry } from "../helpers";
+import { combineCollectionQueryResults, retry } from "../helpers";
 import { GetVideosVideo } from "../models";
+import { VideoPlaylist } from "@peertube/peertube-types";
 
 export const useGetPlaylistsQuery = ({
   enabled = true,
@@ -80,3 +81,25 @@ export const useGetPlaylistInfoQuery = (playlistId?: number) => {
     retry,
   });
 };
+
+export const useGetPlaylistsCollectionQuery = (playlists: Array<VideoPlaylist> = []) => {
+  const { backend } = useLocalSearchParams<RootStackParams["index"]>();
+
+  return useQueries({
+    queries: playlists.map(({ displayName, id, videoChannel }) => ({
+      queryKey: [QUERY_KEYS.playlistsCollection, id, backend],
+      queryFn: async () => {
+        const res = await PlaylistsApiImpl.getPlaylistVideos(backend, id, { count: 4 });
+        return { ...res, id, displayName, videoChannel };
+      },
+      retry,
+      refetchOnWindowFocus: false,
+      enabled: !!backend,
+    })),
+    combine: combineCollectionQueryResults<{
+      id: number;
+      displayName: string;
+      videoChannel: VideoPlaylist["videoChannel"];
+    }>,
+  });
+};

OwnTube.tv/components/EmptyPage.tsx

@@ -0,0 +1,31 @@
+import { LogoQuestionMarks } from "./Svg";
+import { StyleSheet, View } from "react-native";
+import { Typography } from "./Typography";
+import { useTheme } from "@react-navigation/native";
+
+interface EmptyPageProps {
+  text: string;
+}
+
+export const EmptyPage = ({ text }: EmptyPageProps) => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <LogoQuestionMarks />
+      <Typography fontWeight="Medium" style={styles.text} color={colors.theme800}>
+        {text}
+      </Typography>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    gap: 12,
+    justifyContent: "center",
+  },
+  text: { fontSize: 18 },
+});