Merge pull request #188 from mykhailodanilenko/feature/featured-icons

Add icons for featured sites (#183)
OwnTube-tv · Oct 18, 2024 · 9727c52 · 9727c52
2 parents 03b2fed + 77b10bd
commit 9727c52
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 60 deletions.
diff --git a/OwnTube.tv/components/InstanceInfo.tsx b/OwnTube.tv/components/InstanceInfo.tsx
@@ -1,14 +1,10 @@
-import { borderRadius, spacing } from "../theme";
-import { Image, StyleSheet, View } from "react-native";
+import { spacing } from "../theme";
+import { 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");
+import { InstanceLogo } from "./InstanceLogo";
 
 interface InstanceInfoProps {
   backend?: string;
@@ -18,17 +14,10 @@ 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 data?.avatars?.[0] ? `https://${backend}${data?.avatars[0]?.path}` : "";
+  }, [data, backend]);
 
   return (
     <View
@@ -40,11 +29,7 @@ export const InstanceInfo = ({ backend, showText = true }: InstanceInfoProps) =>
         },
       ]}
     >
-      {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} />
-      )}
+      <InstanceLogo logoUrl={logoSrc} size={32} />
       {showText && (
         <Typography fontSize="sizeSm" fontWeight="SemiBold" color={colors.theme950} numberOfLines={1}>
           {data?.name}
@@ -56,5 +41,4 @@ export const InstanceInfo = ({ backend, showText = true }: InstanceInfoProps) =>
 
 const styles = StyleSheet.create({
   container: { alignItems: "center", flexDirection: "row", gap: spacing.md },
-  image: { borderRadius: borderRadius.radiusMd, height: 32, width: 32 },
 });
diff --git a/OwnTube.tv/components/InstanceLogo.tsx b/OwnTube.tv/components/InstanceLogo.tsx
@@ -0,0 +1,47 @@
+import { PeertubeLogo } from "./Svg";
+import { Image, Platform, StyleSheet } from "react-native";
+import { SvgUri } from "react-native-svg";
+import { borderRadius } from "../theme";
+
+interface InstanceLogoProps {
+  size: number;
+  logoUrl?: string;
+}
+
+const fallbackLogo = require("../public/logo192.png");
+
+export const InstanceLogo = ({ size, logoUrl = "" }: InstanceLogoProps) => {
+  const isLogoSvg = logoUrl?.endsWith("svg");
+
+  if (!logoUrl) {
+    return (
+      <Image source={fallbackLogo} width={size} height={size} style={[styles.image, { height: size, width: size }]} />
+    );
+  }
+
+  if (isLogoSvg && Platform.OS !== "web") {
+    return (
+      <SvgUri
+        style={[styles.image, { height: size, width: size }]}
+        uri={logoUrl}
+        width={size}
+        height={size}
+        fallback={<PeertubeLogo width={size} height={size} />}
+      />
+    );
+  }
+
+  return (
+    <Image
+      style={[styles.image, { height: size, width: size }]}
+      source={{ uri: logoUrl }}
+      resizeMode="cover"
+      width={size}
+      height={size}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  image: { borderRadius: borderRadius.radiusMd },
+});
diff --git a/OwnTube.tv/components/PlatformCard.tsx b/OwnTube.tv/components/PlatformCard.tsx
@@ -1,12 +1,11 @@
-import { View, Image, StyleSheet, Pressable } from "react-native";
+import { View, StyleSheet, Pressable } from "react-native";
 import { Typography } from "./Typography";
 import { Link } from "expo-router";
 import { borderRadius, spacing } from "../theme";
 import { useTheme } from "@react-navigation/native";
 import { useBreakpoints, useHoverState } from "../hooks";
 import { IcoMoonIcon } from "./IcoMoonIcon";
-import { PeertubeLogo } from "./Svg";
-import { SvgUri } from "react-native-svg";
+import { InstanceLogo } from "./InstanceLogo";
 
 interface PlatformCardProps {
   name?: string;
@@ -19,7 +18,6 @@ export const PlatformCard = ({ name, description, hostname, logoUrl }: PlatformC
   const { colors } = useTheme();
   const { isHovered, hoverHandlers } = useHoverState();
   const { isDesktop } = useBreakpoints();
-  const isLogoSvg = logoUrl?.endsWith("svg");
 
   return (
     <Link href={{ pathname: "./", params: { backend: hostname } }} asChild>
@@ -34,21 +32,8 @@ export const PlatformCard = ({ name, description, hostname, logoUrl }: PlatformC
             },
           ]}
         >
-          <View
-            style={[
-              styles.imageContainer,
-              {
-                backgroundColor: colors.white94,
-              },
-            ]}
-          >
-            {!logoUrl ? (
-              <PeertubeLogo width={40} height={40} />
-            ) : isLogoSvg ? (
-              <SvgUri uri={logoUrl} width={40} height={40} fallback={<PeertubeLogo width={40} height={40} />} />
-            ) : (
-              <Image source={{ uri: logoUrl }} resizeMode="cover" style={styles.image} />
-            )}
+          <View style={styles.imageContainer}>
+            <InstanceLogo logoUrl={logoUrl} size={40} />
           </View>
           <View style={styles.textsContainer}>
             <View
@@ -108,7 +93,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     width: "100%",
   },
-  image: { height: 40, width: 40 },
   imageContainer: { borderRadius: borderRadius.radiusMd, height: 40, overflow: "hidden", width: 40 },
   nameTextContainer: { width: "85%" },
   pressableContainer: {

diff --git a/OwnTube.tv/components/index.ts b/OwnTube.tv/components/index.ts
@@ -32,3 +32,4 @@ export * from "./ErrorPage";
 export * from "./OfflineToast";
 export * from "./OnlineToast";
 export * from "./ErrorTextWithRetry";
+export * from "./InstanceLogo";
diff --git a/OwnTube.tv/instanceConfigs.ts b/OwnTube.tv/instanceConfigs.ts
@@ -26,8 +26,6 @@ export const instanceConfigSchema = z.object({
   hostname: z.string(),
   logoUrl: z.string().url().optional(),
   customizations: customizationsSchema.optional(),
-  iconUrl: z.string().url().optional(),
-  logoExtension: z.string().optional(),
 });
 
 export type InstanceConfig = z.infer<typeof instanceConfigSchema>;
diff --git a/OwnTube.tv/public/featured-instances.json5 b/OwnTube.tv/public/featured-instances.json5
@@ -3,7 +3,7 @@
     name: "XR Tube",
     description: "The PeerTube platform of Extinction Rebellion.",
     hostname: "tube.rebellion.global",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/extinction-rebellion.jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/tube.rebellion.global.png",
     customizations: {
       // Override default page title
       pageTitle: "XR Tube @ OwnTube.tv",
@@ -20,9 +20,7 @@
     description: "Svensk /.../ politiska och andra makthavare.",
     hostname: "swebbtv.se",
     // Logo to display when listing things by logo
-    logoUrl: "https://nyheter.swebbtv.se/wp-content/uploads/2022/10/logoblack_narduvillveta_portrait.png",
-    // Icon to use in the top-left corner of the site, for example
-    iconUrl: "https://swebbtv.se/client/assets/images/logo.svg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/swebbtv.se.png",
     customizations: {
       // Override default page title
       pageTitle: "Swebbtv @ OwnTube.tv",
@@ -65,6 +63,9 @@
         "4535",
         "4536",
         "253",
+        "156",
+        "672",
+        "646",
       ],
       // On the Playlists page, show a button to show all playlists (even hidden ones)
       playlistsShowHiddenButton: true,
@@ -81,39 +82,37 @@
     name: "Blender",
     description: "Videos presenting the evolutions of the 3D creation software, tutorials and animated films supported by the Blender Foundation.",
     hostname: "video.blender.org",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/blender.jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/video.blender.org.jpg",
   },
   {
     name: "TILvids",
     description: "A video community focused on sharing best content at the crossroads of education and entertainment, made by some of the best independent creators.",
     hostname: "tilvids.com",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/tilvids.jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/tilvids.com.jpg",
   },
   {
     name: "Beeld & Geluid",
     description: "Netherland Museum for media culture, Beeld & Geluid offers online access to audiovisual archive collections to stimulate creative reuse.",
     hostname: "peertube.beeldengeluid.nl",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/beeldengeluid.jpg",
-    logoExtension: "jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/peertube.beeldengeluid.nl.jpg",
   },
   {
     name: "Privacy International Media Server",
     description: "Videos presenting excessive state and corporate surveillance issues and advices on how to increase security and freedom through better privacy.",
     hostname: "media.privacyinternational.org",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/privacy-international.jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/media.privacyinternational.org.jpg",
   },
   {
     name: "Basspistol",
     description: "Video platform for the Underground Artists sharing their music under free license.",
     hostname: "v.basspistol.org",
-    logoUrl: "https://joinpeertube.org/img/content-selection-thumbnails/basspistol.jpg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/v.basspistol.org.png",
   },
   {
     name: "PeerTube Nightly",
     description: "PeerTube instance with the bleeding edge changes",
     hostname: "peertube2.cpy.re",
-    logoUrl: "https://peertube2.cpy.re/plugins/logo-framasoft/0.0.1/static/images/framasoft-logo.png",
-    logoExtension: "png",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/peertube2.cpy.re.png",
   },
   {
     name: "Fedi.Video",
@@ -129,12 +128,12 @@
     name: "urbanists.video",
     description: "Showing is more effective than telling. Check out where people are championing walkable, livable places through video around the world. \uD83C\uDF0D",
     hostname: "urbanists.video",
-    logoUrl: "https://urbanists.video/static-extra/logo.svg",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/urbanists.video.png",
   },
   {
     name: "Swebbtube",
     description: "Svensk Webbtelevision är ett medborgarfinansierat initiativ för att skapa en regelbunden och allsidig nyhets- och informationsförmedling som ger uttryck för ett breddat utbud av ämnen och perspektiv samt granskning av för demokratin grundläggande skeenden. Därför tror vi på en fri och öppen debatt där olika åsikter får komma till uttryck.",
     hostname: "swebbtube.se",
-    logoUrl: "https://swebbtube.se/client/assets/images/logo.svg?cec19af8690344cefefeecddc5a123f4ebd980c9",
+    logoUrl: "https://owntube-tv.github.io/web-client/logos/swebbtube.se.png",
   },
 ]
diff --git a/OwnTube.tv/public/logos/peertube2.cpy.re.png b/OwnTube.tv/public/logos/peertube2.cpy.re.png
diff --git a/docs/tech.md b/docs/tech.md
@@ -89,8 +89,7 @@ Each instance in the configuration file is represented by an object with the fol
 2. `description`: A brief description of the instance's content or purpose.
 3. `hostname`: The domain name where the instance is hosted.
 4. `logoUrl`: URL to the instance's logo image.
-5. `iconUrl` (optional): URL to an icon, typically used in the site's header.
-6. `customizations`: An object containing various customization options.
+5. `customizations`: An object containing various customization options.
 
 The `customizations` object allows for fine-tuning of the instance's appearance and behavior within the OwnTube.tv client. Some key customization options include: