Add per-instance configs (#165)

OwnTube.tv/api/queries/categories.ts

@@ -5,15 +5,15 @@ import { QUERY_KEYS } from "../constants";
 import { CategoriesApiImpl } from "../categoriesApi";
 import { retry } from "../helpers";
 
-export const useGetCategoriesQuery = () => {
+export const useGetCategoriesQuery = ({ enabled = true }: { enabled?: boolean }) => {
   const { backend } = useLocalSearchParams<RootStackParams["index"]>();
 
   return useQuery({
     queryKey: [QUERY_KEYS.categories, backend],
     queryFn: async () => {
       return await CategoriesApiImpl.getCategories(backend!);
     },
-    enabled: !!backend,
+    enabled: !!backend && enabled,
     refetchOnWindowFocus: false,
     retry,
   });

OwnTube.tv/api/queries/channels.ts

@@ -22,7 +22,7 @@ export const useGetChannelInfoQuery = (channelHandle?: string) => {
   });
 };
 
-export const useGetChannelsQuery = () => {
+export const useGetChannelsQuery = ({ enabled = true }: { enabled?: boolean }) => {
   const { backend } = useLocalSearchParams<RootStackParams["index"]>();
 
   return useQuery({
@@ -31,7 +31,7 @@ export const useGetChannelsQuery = () => {
       return await ChannelsApiImpl.getChannels(backend!);
     },
     select: ({ data }) => data.filter(({ isLocal }) => isLocal),
-    enabled: !!backend,
+    enabled: !!backend && enabled,
     refetchOnWindowFocus: false,
     retry,
   });

OwnTube.tv/api/queries/playlists.ts

@@ -6,7 +6,13 @@ import { PlaylistsApiImpl } from "../playlistsApi";
 import { retry } from "../helpers";
 import { GetVideosVideo } from "../models";
 
-export const useGetPlaylistsQuery = () => {
+export const useGetPlaylistsQuery = ({
+  enabled = true,
+  hiddenPlaylists,
+}: {
+  enabled?: boolean;
+  hiddenPlaylists?: string[];
+}) => {
   const { backend } = useLocalSearchParams<RootStackParams["index"]>();
 
   return useQuery({
@@ -15,7 +21,10 @@ export const useGetPlaylistsQuery = () => {
       const data = await PlaylistsApiImpl.getPlaylists(backend!);
       return { ...data, data: data.data.filter(({ isLocal, videosLength }) => isLocal && videosLength > 0) };
     },
-    enabled: !!backend,
+    enabled: !!backend && enabled,
+    select: (queryData) => {
+      return { ...queryData, data: queryData.data.filter(({ id }) => !hiddenPlaylists?.includes(String(id))) };
+    },
     refetchOnWindowFocus: false,
     retry,
   });

OwnTube.tv/api/queries/videos.ts

@@ -40,22 +40,28 @@ export const useGetVideosQuery = <TResult = GetVideosVideo[]>({
 };
 
 export const useInfiniteVideosQuery = (
-  queryArg: Partial<{ pageSize: number; uniqueQueryKey: string; queryParams: VideosCommonQuery }>,
+  queryArg: Partial<{
+    firstPageSize?: number;
+    pageSize: number;
+    uniqueQueryKey: string;
+    queryParams: VideosCommonQuery;
+  }>,
 ) => {
   const { backend } = useLocalSearchParams<RootStackParams["index"]>();
-  const { pageSize = 4, uniqueQueryKey, queryParams } = queryArg;
+  const { pageSize = 4, uniqueQueryKey, queryParams, firstPageSize } = queryArg;
+  const _0PageSize = firstPageSize ?? pageSize * 4;
 
   return useInfiniteQuery({
     initialPageParam: 0,
     getNextPageParam: (lastPage: { data: GetVideosVideo[]; total: number }, _nextPage, lastPageParam) => {
-      const nextCount = (lastPageParam === 0 ? pageSize * 4 : lastPageParam) + (lastPageParam ? pageSize : 0);
+      const nextCount = (lastPageParam === 0 ? _0PageSize : lastPageParam) + (lastPageParam ? pageSize : 0);
 
       return nextCount >= lastPage.total ? null : nextCount;
     },
     queryKey: [QUERY_KEYS.videos, backend, "infinite", uniqueQueryKey],
     queryFn: async ({ pageParam }) => {
       return await ApiServiceImpl.getVideos(backend!, {
-        count: pageParam === 0 ? pageSize * 4 : pageSize,
+        count: pageParam === 0 ? _0PageSize : pageSize,
         start: pageParam,
         sort: "-publishedAt",
         ...queryParams,

OwnTube.tv/app.json

@@ -11,7 +11,9 @@
       "resizeMode": "contain",
       "backgroundColor": "#F95F1E"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "experiments": {
       "baseUrl": "/web-client"
     },
@@ -37,7 +39,9 @@
       [
         "expo-font",
         {
-          "fonts": ["assets/fonts/icomoon.ttf"]
+          "fonts": [
+            "assets/fonts/icomoon.ttf"
+          ]
         }
       ],
       "expo-localization",
@@ -46,7 +50,8 @@
         {
           "initialOrientation": "DEFAULT"
         }
-      ]
+      ],
+      "expo-asset"
     ]
   }
 }

OwnTube.tv/app/(home)/index.tsx

@@ -6,7 +6,7 @@ import { useCallback, useState } from "react";
 import Head from "expo-router/head";
 import { HomeScreen, LandingScreen } from "../../screens";
 import { Platform } from "react-native";
-import { useRecentInstances } from "../../hooks";
+import { useInstanceConfig, useRecentInstances } from "../../hooks";
 import { RootStackParams } from "../_layout";
 import { useTranslation } from "react-i18next";
 
@@ -16,6 +16,7 @@ export default function index() {
   const [isGettingStoredBackend, setIsGettingStoredBackend] = useState(true);
   const { recentInstances, addRecentInstance } = useRecentInstances();
   const { t } = useTranslation();
+  const { currentInstanceConfig } = useInstanceConfig();
 
   const getSourceAndRedirect = async () => {
     if (backend) {
@@ -56,8 +57,7 @@ export default function index() {
         web: (
           <Head>
             <title>
-              {t("appName")}
-              {backend ? "@" + backend : ""}
+              {currentInstanceConfig?.customizations?.pageTitle ?? `${t("appName")}${backend ? "@" + backend : ""}`}
             </title>
             <meta name="description" content="OwnTube.tv homepage" />
           </Head>

OwnTube.tv/components/InstanceInfo.tsx

@@ -3,6 +3,10 @@ import { Image, StyleSheet, View } from "react-native";
 import { Typography } from "./Typography";
 import { useTheme } from "@react-navigation/native";
 import { useGetInstanceInfoQuery } from "../api";
+import { useMemo } from "react";
+import { useInstanceConfig } from "../hooks";
+import { PeertubeLogo } from "./Svg";
+import { SvgUri } from "react-native-svg";
 
 const fallbackLogo = require("../public/logo192.png");
 
@@ -14,6 +18,17 @@ interface InstanceInfoProps {
 export const InstanceInfo = ({ backend, showText = true }: InstanceInfoProps) => {
   const { colors } = useTheme();
   const { data } = useGetInstanceInfoQuery(backend);
+  const { currentInstanceConfig } = useInstanceConfig();
+
+  const logoSrc = useMemo(() => {
+    return currentInstanceConfig?.iconUrl
+      ? { uri: currentInstanceConfig?.iconUrl }
+      : data?.avatars?.[0]
+        ? { uri: `https://${backend}${data?.avatars[0]?.path}` }
+        : fallbackLogo;
+  }, [currentInstanceConfig, data, backend]);
+
+  const isLogoSvg = logoSrc?.uri?.endsWith("svg");
 
   return (
     <View
@@ -25,11 +40,11 @@ export const InstanceInfo = ({ backend, showText = true }: InstanceInfoProps) =>
         },
       ]}
     >
-      <Image
-        style={[styles.image, { backgroundColor: colors.theme950 }]}
-        resizeMode="cover"
-        source={data?.avatars?.[0] ? { uri: `https://${backend}${data?.avatars[0]?.path}` } : fallbackLogo}
-      />
+      {isLogoSvg ? (
+        <SvgUri uri={logoSrc?.uri} width={32} height={32} fallback={<PeertubeLogo width={32} height={32} />} />
+      ) : (
+        <Image style={[styles.image, { backgroundColor: colors.theme950 }]} resizeMode="cover" source={logoSrc} />
+      )}
       {showText && (
         <Typography fontSize="sizeSm" fontWeight="SemiBold" color={colors.theme950} numberOfLines={1}>
           {data?.name}

OwnTube.tv/components/PlatformCard.tsx

@@ -11,18 +11,18 @@ import { SvgUri } from "react-native-svg";
 interface PlatformCardProps {
   name: string;
   description: string;
-  url: string;
-  logoUrl: string;
+  hostname: string;
+  logoUrl?: string;
 }
 
-export const PlatformCard = ({ name, description, url, logoUrl }: PlatformCardProps) => {
+export const PlatformCard = ({ name, description, hostname, logoUrl }: PlatformCardProps) => {
   const { colors } = useTheme();
   const { isHovered, hoverHandlers } = useHoverState();
   const { isDesktop } = useBreakpoints();
-  const isLogoSvg = logoUrl.endsWith("svg");
+  const isLogoSvg = logoUrl?.endsWith("svg");
 
   return (
-    <Link href={{ pathname: "./", params: { backend: url } }} asChild>
+    <Link href={{ pathname: "./", params: { backend: hostname } }} asChild>
       <Pressable style={styles.pressableContainer} {...hoverHandlers}>
         <View
           style={[

OwnTube.tv/components/Sidebar.tsx

@@ -9,7 +9,7 @@ import { StyleSheet, View } from "react-native";
 import { Button, Separator } from "./shared";
 import { spacing } from "../theme";
 import { Spacer } from "./shared/Spacer";
-import { useBreakpoints } from "../hooks";
+import { useBreakpoints, useInstanceConfig } from "../hooks";
 import { InstanceInfo } from "./InstanceInfo";
 import { Settings } from "./VideoControlsOverlay/components/modals";
 
@@ -58,6 +58,7 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
   const breakpoints = useBreakpoints();
   const shouldExpand = breakpoints.isDesktop || breakpoints.isMobile;
   const { toggleModal, setContent } = useFullScreenModalContext();
+  const { currentInstanceConfig } = useInstanceConfig();
 
   const handleOpenSettings = () => {
     toggleModal(true);
@@ -89,7 +90,20 @@ export const Sidebar: FC<SidebarProps> = ({ backend, ...navigationProps }) => {
         <InstanceInfo backend={backend} showText={false} />
       )}
       <View style={styles.routesContainer}>
-        {SIDEBAR_ROUTES.map(({ nameKey, icon, href, routeName }) => {
+        {SIDEBAR_ROUTES.filter(({ nameKey }) => {
+          switch (nameKey) {
+            case "history":
+              return !currentInstanceConfig?.customizations?.menuHideHistoryButton;
+            case "channels":
+              return !currentInstanceConfig?.customizations?.menuHideChannelsButton;
+            case "playlistsPageTitle":
+              return !currentInstanceConfig?.customizations?.menuHidePlaylistsButton;
+            case "categories":
+              return !currentInstanceConfig?.customizations?.menuHideCategoriesButton;
+            default:
+              return true;
+          }
+        }).map(({ nameKey, icon, href, routeName }) => {
           const isActive =
             navigationProps.state.index === navigationProps.state.routes.findIndex(({ name }) => name === routeName);
 

OwnTube.tv/contexts/AppConfigContext.tsx

@@ -1,11 +1,14 @@
 import { createContext, PropsWithChildren, useContext, useState, Dispatch, SetStateAction } from "react";
-import { DeviceCapabilities, useDeviceCapabilities } from "../hooks";
+import { DeviceCapabilities, useDeviceCapabilities, useFeaturedInstancesData } from "../hooks";
+
+import { InstanceConfig } from "../instanceConfigs";
 
 interface IAppConfigContext {
   isDebugMode: boolean;
   setIsDebugMode: Dispatch<SetStateAction<boolean>>;
   deviceCapabilities: DeviceCapabilities;
   setPlayerImplementation: Dispatch<SetStateAction<string>>;
+  featuredInstances?: InstanceConfig[];
 }
 
 const AppConfigContext = createContext<IAppConfigContext>({
@@ -18,10 +21,19 @@ const AppConfigContext = createContext<IAppConfigContext>({
 export const AppConfigContextProvider = ({ children }: PropsWithChildren) => {
   const [isDebugMode, setIsDebugMode] = useState(false);
   const { deviceCapabilities, setPlayerImplementation } = useDeviceCapabilities();
+  const { featuredInstances } = useFeaturedInstancesData();
 
   return (
-    <AppConfigContext.Provider value={{ isDebugMode, setIsDebugMode, deviceCapabilities, setPlayerImplementation }}>
-      {children}
+    <AppConfigContext.Provider
+      value={{
+        isDebugMode,
+        setIsDebugMode,
+        deviceCapabilities,
+        setPlayerImplementation,
+        featuredInstances,
+      }}
+    >
+      {!featuredInstances?.length ? null : children}
     </AppConfigContext.Provider>
   );
 };