fixed webpack rmSync is not a function & added cached playback

src/app.tsx

@@ -14,17 +14,10 @@ import spotifyApi from "./initializations/spotifyApi";
 import showError from "./helpers/showError";
 import fs from "fs";
 import path from "path";
-import { confDir } from "./conf";
+import { confDir, LocalStorageKeys } from "./conf";
 import spotubeIcon from "../assets/icon.svg";
 import preferencesContext, { PreferencesContextProperties } from "./context/preferencesContext";
 
-export enum LocalStorageKeys {
-  credentials = "credentials",
-  refresh_token = "refresh_token",
-  preferences = "user-preferences",
-  volume = "volume",
-}
-
 export interface Credentials {
   clientId: string;
   clientSecret: string;

src/components/Player.tsx

@@ -4,14 +4,14 @@ import React, { ReactElement, useContext, useEffect, useRef, useState } from "re
 import playerContext, { CurrentPlaylist } from "../context/playerContext";
 import { shuffleArray } from "../helpers/shuffleArray";
 import NodeMpv from "node-mpv";
-import { getYoutubeTrack } from "../helpers/getYoutubeTrack";
+import { getYoutubeTrack, YoutubeTrack } from "../helpers/getYoutubeTrack";
 import PlayerProgressBar from "./PlayerProgressBar";
 import { random as shuffleIcon, play, pause, backward, forward, stop, heartRegular, heart, musicNode } from "../icons";
 import IconButton from "./shared/IconButton";
 import showError from "../helpers/showError";
 import useTrackReaction from "../hooks/useTrackReaction";
 import ManualLyricDialog from "./ManualLyricDialog";
-import { LocalStorageKeys } from "../app";
+import { LocalStorageKeys } from "../conf";
 
 export const audioPlayer = new NodeMpv(
   {
@@ -35,6 +35,7 @@ function Player(): ReactElement {
   const [realPlaylist, setRealPlaylist] = useState<CurrentPlaylist["tracks"]>([]);
   const [isStopped, setIsStopped] = useState<boolean>(false);
   const [openLyrics, setOpenLyrics] = useState<boolean>(false);
+  const [currentYtTrack, setCurrentYtTrack] = useState<YoutubeTrack>();
   const playlistTracksIds = currentPlaylist?.tracks.map((t) => t.track.id);
   const volumeHandler = useEventHandler<QAbstractSliderSignals>(
     {
@@ -49,6 +50,8 @@ function Player(): ReactElement {
   );
   const playerRunning = audioPlayer.isRunning();
   const titleRef = useRef<QLabel>();
+  const cachedPlaylist = localStorage.getItem(LocalStorageKeys.cachedPlaylist);
+  const cachedTrack = localStorage.getItem(LocalStorageKeys.cachedTrack);
 
   // initial Effect
   useEffect(() => {
@@ -61,21 +64,31 @@ function Player(): ReactElement {
       } catch (error) {
         showError(error, "[Failed starting audio player]: ");
       }
-    })();
+    })().then(() => {
+      if (cachedPlaylist && !currentPlaylist) {
+        setCurrentPlaylist(JSON.parse(cachedPlaylist));
+      }
+      if (cachedTrack && !currentTrack) {
+        setCurrentTrack(JSON.parse(cachedTrack));
+      }
+    });
 
     return () => {
       if (playerRunning) {
-        audioPlayer.quit().catch((e: any) => console.log(e));
+        audioPlayer.quit().catch((e: unknown) => console.log(e));
       }
     };
   }, []);
 
   // track change effect
   useEffect(() => {
+    // caching current track
+    localStorage.setItem(LocalStorageKeys.cachedTrack, JSON.stringify(currentTrack ?? ""));
     (async () => {
       try {
         if (currentTrack && playerRunning) {
           const youtubeTrack = await getYoutubeTrack(currentTrack);
+          setCurrentYtTrack(youtubeTrack);
           await audioPlayer.load(youtubeTrack.youtube_uri, "replace");
           await audioPlayer.play();
           setIsPaused(false);
@@ -94,6 +107,8 @@ function Player(): ReactElement {
   // changing shuffle to default
   useEffect(() => {
     setShuffle(false);
+    // caching playlist
+    localStorage.setItem(LocalStorageKeys.cachedPlaylist, JSON.stringify(currentPlaylist ?? ""));
   }, [currentPlaylist]);
 
   useEffect(() => {
@@ -191,10 +206,10 @@ function Player(): ReactElement {
     <GridView enabled={!!currentTrack} style="flex: 1; max-height: 120px;">
       <GridRow>
         <GridColumn width={2}>
-          <Text ref={titleRef} wordWrap>
+          <Text ref={titleRef} wordWrap openExternalLinks>
             {artistsNames && currentTrack
               ? `
-            <p><b>${currentTrack.name}</b> - ${artistsNames[0]} ${artistsNames.length > 1 ? "feat. " + artistsNames.slice(1).join(", ") : ""}</p>
+            <p><b><a href="${currentYtTrack?.youtube_uri}"}>${currentTrack.name}</a></b> - ${artistsNames[0]} ${artistsNames.length > 1 ? "feat. " + artistsNames.slice(1).join(", ") : ""}</p>
             `
               : `<b>Oh, dear don't waste time</b>`}
           </Text>

src/conf.ts

@@ -1,23 +1,32 @@
-import dotenv from "dotenv"
+import dotenv from "dotenv";
 import { homedir } from "os";
 import { join } from "path";
 
-const env = dotenv.config({path: join(process.cwd(), ".env")}).parsed as any
+const env = dotenv.config({ path: join(process.cwd(), ".env") }).parsed as any;
 export const clientId = "";
-export const trace = process.argv.find(arg => arg === "--trace") ?? false;
+export const trace = process.argv.find((arg) => arg === "--trace") ?? false;
-export const redirectURI = "http://localhost:4304/auth/spotify/callback"
+export const redirectURI = "http://localhost:4304/auth/spotify/callback";
-export const confDir = join(homedir(), ".config", "spotube")
+export const confDir = join(homedir(), ".config", "spotube");
-export const cacheDir = join(homedir(), ".cache", "spotube")
+export const cacheDir = join(homedir(), ".cache", "spotube");
 
-export enum QueryCacheKeys{
+export enum QueryCacheKeys {
-  categories="categories",
+  categories = "categories",
   categoryPlaylists = "categoryPlaylists",
   featuredPlaylists = "featuredPlaylists",
-  genrePlaylists="genrePlaylists",
+  genrePlaylists = "genrePlaylists",
-  playlistTracks="playlistTracks",
+  playlistTracks = "playlistTracks",
   userPlaylists = "user-palylists",
   userSavedTracks = "user-saved-tracks",
   search = "search",
   searchPlaylist = "searchPlaylist",
-  searchSongs = "searchSongs"
+  searchSongs = "searchSongs",
-}
+}
+
+export enum LocalStorageKeys {
+  credentials = "credentials",
+  refresh_token = "refresh_token",
+  preferences = "user-preferences",
+  volume = "volume",
+  cachedPlaylist = "cached-playlist",
+  cachedTrack = "cached-track"
+}

src/helpers/getCachedImageBuffer.ts

@@ -1,6 +1,6 @@
 import path from "path";
 import isUrl from "is-url";
-import * as fs from "fs"
+import fs from "fs";
 import axios from "axios";
 import { Stream } from "stream";
 import { streamToBuffer } from "./streamToBuffer";
@@ -8,7 +8,6 @@ import Jimp from "jimp";
 import du from "du";
 import { cacheDir } from "../conf";
 
-
 interface ImageDimensions {
   height: number;
   width: number;
@@ -22,20 +21,20 @@ export async function getCachedImageBuffer(name: string, dims?: ImageDimensions)
     const cacheImgFolder = path.join(cacheDir, "images");
     // for clearing up the cache if it reaches out of the size
     const cacheName = `${isUrl(name) ? name.split("/").slice(-1)[0] : name}.cnim`;
-    const cachePath = path.join(cacheImgFolder, cacheName);
+    const cacheImgPath = path.join(cacheImgFolder, cacheName);
     // checking if the cached image already exists or not
-    if (fs.existsSync(cachePath)) {
+    if (fs.existsSync(cacheImgPath)) {
       // automatically removing cache after a certain 50 MB oversize
       if ((await du(cacheImgFolder)) > MB_5) {
-        fs.rmSync(cacheImgFolder, { recursive: true, force: true });
+        fs.rmdirSync(cacheImgFolder, { recursive: true });
       }
-      const cachedImg = await fsm.readFile(cachePath);
+      const cachedImg = await fsm.readFile(cacheImgPath);
       const cachedImgMeta = (await Jimp.read(cachedImg)).bitmap;
 
       // if the dimensions are changed then the previously cached
       // images are removed and replaced with a new one
       if (dims && (cachedImgMeta.height !== dims.height || cachedImgMeta.width !== dims?.width)) {
-        fs.rmSync(cachePath);
+        fs.unlinkSync(cacheImgPath);
         return await imageResizeAndWrite(cachedImg, { cacheFolder: cacheImgFolder, cacheName, dims });
       }
       return cachedImg;
@@ -61,7 +60,7 @@ export async function getCachedImageBuffer(name: string, dims?: ImageDimensions)
 async function imageResizeAndWrite(img: Buffer, { cacheFolder, cacheName, dims }: { dims: ImageDimensions; cacheFolder: string; cacheName: string }): Promise<Buffer> {
   // caching the images by resizing if the max/fixed (Width/Height)
   // is available in the args
-  const resizedImg = (await Jimp.read(img)).resize(dims.width, dims.height)
+  const resizedImg = (await Jimp.read(img)).resize(dims.width, dims.height);
   const resizedImgBuffer = await resizedImg.getBufferAsync(resizedImg._originalMime);
   await fsm.writeFile(path.join(cacheFolder, cacheName), resizedImgBuffer);
   return resizedImgBuffer;

src/hooks/useSpotifyApi.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk";
 import { useContext, useEffect } from "react";
-import { LocalStorageKeys } from "../app";
+import { LocalStorageKeys } from "../conf";
 import authContext from "../context/authContext";
 import showError from "../helpers/showError";
 import spotifyApi from "../initializations/spotifyApi";