feat(card-image): remove domain from URL and use settings.currentInst…

…ance

src/components/Card.tsx

@@ -28,6 +28,7 @@ import {
 } from "../providers/Player";
 import { useTranslation } from "react-i18next";
 import { CardImage } from "./CardImage";
+import { useSettings } from "../providers/Settings";
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -82,6 +83,7 @@ export const Card: React.FC<CardProps> = memo(
     const { handlePlay, loading } = usePlayVideo();
     const { classes } = useStyles();
     const { t } = useTranslation();
+    const { currentInstance } = useSettings();
 
     const image = video.videoThumbnails.find(
       (thumbnail) => thumbnail.quality === "maxresdefault"
@@ -102,7 +104,11 @@ export const Card: React.FC<CardProps> = memo(
           style={{ width: "100%" }}
           onClick={() => handlePlay(video.videoId)}
         >
-          <CardImage image={image} title={video.title}>
+          <CardImage
+            image={image}
+            domain={currentInstance?.uri}
+            title={video.title}
+          >
             <Flex
               align="center"
               gap="xs"

src/components/CardImage.tsx

@@ -23,24 +23,28 @@ const useStyles = createStyles((theme) => ({
 interface CardImageProps {
   image: VideoThumbnail;
   title: string;
+  domain?: string;
   children?: React.ReactNode;
 }
 
 export const CardImage: React.FC<CardImageProps> = ({
   image,
   title,
+  domain = "",
   children,
 }) => {
   const { classes } = useStyles();
 
+  const domainUrl = image.url.startsWith("https") ? "" : domain;
+
   return (
     <Flex
       className={classes.imageContainer}
       align="flex-end"
       justify="flex-end"
     >
       <Image
-        src={image?.url as string}
+        src={`${domainUrl}${image.url}`}
         alt={title}
         className={classes.image}
         loading="lazy"

src/components/Image.tsx

@@ -1,9 +1,7 @@
 import { Skeleton } from "@mantine/core";
-import { memo, useState } from "react";
+import { FC, ImgHTMLAttributes, memo, useState } from "react";
 
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
-
-export const Image: React.FC<ImageProps> = memo(
+export const Image: FC<ImgHTMLAttributes<HTMLImageElement>> = memo(
   ({ className, alt, ...props }) => {
     const [loading, setLoading] = useState(true);
 

src/components/SearchBar.tsx

@@ -85,9 +85,6 @@ export const SearchBar = memo(() => {
     handleSubmit({ q: value });
   };
 
-  console.log(searchValues);
-  console.log(form.getInputProps("q"));
-
   return (
     <Flex align="center" gap={16} className={classes.container}>
       <Form

src/database/13102023_migrate_remove_card_image_url_domain.ts

@@ -0,0 +1,35 @@
+import { db } from ".";
+import { Playlist } from "../types/interfaces/Playlist";
+
+const DOMAIN_REGEX =
+  /^(?:https?:\/\/)?(?:[^@/\n]+@)?(?:www\.)?([^:/?\n]+\.+[^:/?\n]+)/gm;
+
+const migration = () => {
+  const favoritePlaylist = db.queryAll("playlists", {
+    query: { title: "Favorites" },
+  })[0] as Playlist;
+
+  try {
+    const updatedVideos = favoritePlaylist.videos.map((video) => {
+      if (video.videoThumbnails) {
+        return {
+          ...video,
+          videoThumbnails: video.videoThumbnails?.map((thumbnail) => ({
+            ...thumbnail,
+            url: thumbnail.url.replace(DOMAIN_REGEX, ""),
+          })),
+        };
+      }
+      return video;
+    });
+
+    favoritePlaylist.videos = updatedVideos;
+
+    db.update("playlists", { title: "Favorites" }, () => favoritePlaylist);
+    db.commit();
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export default migration;

src/database/migrations.ts

@@ -20,4 +20,13 @@ export default (() => {
       saveMigration("05092023_migrate_custom_instance");
     } catch {}
   }
+
+  if (
+    !migrationsName.includes("13102023_migrate_remove_card_image_url_domain")
+  ) {
+    try {
+      require("./13102023_migrate_remove_card_image_url_domain").default();
+      saveMigration("13102023_migrate_remove_card_image_url_domain");
+    } catch {}
+  }
 })();