finish home page, refactoring ✨

main/background.ts

@@ -13,6 +13,7 @@ import {
   getLibraryStats,
   getPlaylistWithSongs,
   getPlaylists,
+  getRandomLibraryItems,
   getSettings,
   initializeData,
   isSongFavorite,
@@ -24,6 +25,9 @@ import {
 import { initDatabase } from "./helpers/db/createDB";
 import { parseFile, selectCover } from "music-metadata";
 import fs from "fs";
+import log from "electron-log/main";
+
+log.initialize();
 
 const isProd = process.env.NODE_ENV === "production";
 
@@ -137,7 +141,10 @@ ipcMain.handle("setMusicFolder", async () => {
 // @hiaaryan: Set Tray for Wora
 let tray = null;
 app.whenReady().then(() => {
-  tray = new Tray("./resources/TrayTemplate.png");
+  const trayIconPath = !isProd
+    ? path.join(__dirname, `../renderer/public/assets/TrayTemplate.png`)
+    : path.join(__dirname, `../app/assets/TrayTemplate.png`);
+  tray = new Tray(trayIconPath);
   const contextMenu = Menu.buildFromTemplate([
     { label: "About", type: "normal", role: "about" },
     {
@@ -206,6 +213,11 @@ ipcMain.handle("getLibraryStats", async () => {
   return stats;
 });
 
+ipcMain.handle("getRandomLibraryItems", async () => {
+  const libraryItems = await getRandomLibraryItems();
+  return libraryItems;
+});
+
 ipcMain.handle("updatePlaylist", async (_, data: any) => {
   const playlist = await updatePlaylist(data);
   return playlist;

main/helpers/db/connectDB.ts

@@ -261,6 +261,25 @@ export const removeSongFromPlaylist = async (
   return true;
 };
 
+export const getRandomLibraryItems = async () => {
+  const randomAlbums = await db
+    .select()
+    .from(albums)
+    .orderBy(sql`RANDOM()`)
+    .limit(20);
+
+  const randomSongs = await db.query.songs.findMany({
+    with: { album: true },
+    limit: 20,
+    orderBy: sql`RANDOM()`,
+  });
+
+  return {
+    albums: randomAlbums,
+    songs: randomSongs,
+  };
+};
+
 const audioExtensions = [
   ".mp3",
   ".mpeg",

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "wora",
   "description": "🎧 A beautiful player for audiophiles.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "author": {
     "name": "Aaryan Kapoor",
     "email": "[email protected]"
@@ -37,9 +37,10 @@
     "cmdk": "^1.0.0",
     "discord-auto-rpc": "^1.0.17",
     "drizzle-orm": "^0.31.2",
+    "electron-log": "^5.1.5",
     "electron-serve": "^1.3.0",
     "electron-store": "^8.2.0",
-    "embla-carousel-react": "^8.1.5",
+    "embla-carousel-react": "^8.1.6",
     "eslint-config-next": "^14.2.4",
     "howler": "^2.2.4",
     "music-metadata": "^7.14.0",

renderer/components/ui/carousel.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "ghost", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <IconArrowLeft stroke={2} size={24} />
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "ghost", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <IconArrowRight stroke={2} size={24} />
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};