Merge pull request #40 from muzik-apps/create-playlist-bug-fix

Add loading state and fix image display issues in CreatePlaylistModal
muzik-apps · Feb 6, 2024 · 3a403ef · 3a403ef
2 parents a2230a8 + 5605427
commit 3a403ef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/muzik-offline/src/interface/components/modals/CreatePlaylistModal.tsx b/muzik-offline/src/interface/components/modals/CreatePlaylistModal.tsx
@@ -7,6 +7,7 @@ import "@styles/components/modals/CreatePlaylistModal.scss";
 import { invoke } from "@tauri-apps/api";
 import { useToastStore } from "store";
 import { modal_variants } from "@content/index";
+import { AppLogo } from "@logos/index";
 
 type CreatePlaylistModalProps = {
     isOpen: boolean;
@@ -15,6 +16,7 @@ type CreatePlaylistModalProps = {
 
 const CreatePlaylistModal : FunctionComponent<CreatePlaylistModalProps> = (props: CreatePlaylistModalProps) => {
     const [playlistObj, setPlaylistObj] = useState<playlist>({key: 0,cover: null,title: "",dateCreated: "",dateEdited: "",tracksPaths: []});
+    const [isloading, setIsLoading] = useState<boolean>(false);
     const { setToast } = useToastStore((state) => { return { setToast: state.setToast }; });
 
     function uploadImg(e: React.ChangeEvent<HTMLInputElement>){
@@ -23,7 +25,7 @@ const CreatePlaylistModal : FunctionComponent<CreatePlaylistModalProps> = (props
         const reader = new FileReader();
 
         reader.onload = async (e) => {
-            if (e.target?.result) {
+            if(e.target?.result){
                 const originalDataUrl = e.target.result as string;
                 let toSend = "";
 
@@ -42,12 +44,16 @@ const CreatePlaylistModal : FunctionComponent<CreatePlaylistModalProps> = (props
                 }
 
                 // Compress the image to a maximum size of 250x250
-                const compressedDataUrl = await invoke("resize_frontend_image_to_fixed_height",{imageAsStr: originalDataUrl, height: 250});
-                if(compressedDataUrl === "FAILED"){
-                    setToast({title: "Processing error...", message: "Could not process this image, please try another image", type: toastType.error, timeout: 3000});
+                invoke("resize_frontend_image_to_fixed_height",{imageAsStr: toSend, height: 250})
+                .then((compressedDataUrl) => {
+                    setIsLoading(false);
+                    setPlaylistObj({ ... playlistObj, cover : compressedDataUrl});
+                })
+                .catch(() => {
+                    setToast({title: "Internal Processing error...", message: "Could not process this image, please try another image", type: toastType.error, timeout: 3000});
+                    setIsLoading(false);
                     return;
-                }
-                setPlaylistObj({ ... playlistObj, cover : compressedDataUrl});
+                });
             }
         };
 
@@ -67,6 +73,7 @@ const CreatePlaylistModal : FunctionComponent<CreatePlaylistModalProps> = (props
 
     useEffect(() => {   
         setPlaylistObj({key: 0,cover: null,title: "",dateCreated: "",dateEdited: "",tracksPaths: []});
+        setIsLoading(false);
     }, [props.isOpen])
 
     return (
@@ -81,8 +88,19 @@ const CreatePlaylistModal : FunctionComponent<CreatePlaylistModalProps> = (props
                 <div className="playlist_image">
                     <div className="playlist_img">
                         {
+                            isloading ? <motion.div className='svg-container'initial={{ scale: 1}}animate={{ scale: 1.3 }} 
+                                transition={{
+                                    duration: 1,
+                                    ease: "easeInOut",
+                                    repeat: Infinity,
+                                    repeatType: "reverse"
+                                }}>
+                                <AppLogo/>
+                            </motion.div>
+                            :
                             playlistObj.cover === null ? <div className="blank_cover"/> :
-                            <img src={playlistObj.cover} alt="playlist_img"/>
+                            <img src={playlistObj.cover.startsWith("data:image/png;base64,") || playlistObj.cover.startsWith("data:image/jpeg;base64,") ? 
+                            playlistObj.cover :`data:image/png;base64,${playlistObj.cover}`} alt="playlist_img"/>
                         }
                     </div>
                     <motion.label className="EditImageicon" whileTap={{scale: 0.97}}>

diff --git a/muzik-offline/src/interface/components/modals/EditPlaylistModal.tsx b/muzik-offline/src/interface/components/modals/EditPlaylistModal.tsx
@@ -28,7 +28,7 @@ const EditPlaylistModal: FunctionComponent<EditPlaylistModalProps> = (props: Edi
         const reader = new FileReader();
 
         reader.onload = async (e) => {
-            if (e.target?.result) {
+            if(e.target?.result){
                 const originalDataUrl = e.target.result as string;
                 let toSend = "";
 
@@ -98,7 +98,8 @@ const EditPlaylistModal: FunctionComponent<EditPlaylistModalProps> = (props: Edi
                             </motion.div>
                             :
                             playlistObj.cover === null ? (getRandomCover(playlistObj.key))() :
-                            <img src={`data:image/png;base64,${playlistObj.cover}`} alt="playlist_img"/>
+                            <img src={playlistObj.cover.startsWith("data:image/png;base64,") || playlistObj.cover.startsWith("data:image/jpeg;base64,") ? 
+                                playlistObj.cover :`data:image/png;base64,${playlistObj.cover}`} alt="playlist_img"/>
                         }
                     </div>
                     <motion.label className="EditImageicon" whileHover={{scale: 1.03}} whileTap={{scale: 0.97}}>

diff --git a/muzik-offline/src/interface/pages/AllPlaylists.tsx b/muzik-offline/src/interface/pages/AllPlaylists.tsx
@@ -55,7 +55,7 @@ const AllPlaylists = () => {
         });
     }
 
-    useEffect(() => { setList(); }, [state.sort])
+    useEffect(() => { setList(); }, [state.sort, state.isCreatePlaylistModalOpen])
 
     return (
         <motion.div className="AllPlaylists"