v3.0.0

Author: Tamwyn001

CrazyMusicLibrary/src/GlobalAudioProvider.jsx

@@ -922,7 +922,7 @@ export const AudioPlayerProvider = ({ children }) => {
             setEditingAlbum({
                 id: playlistInfos.id,
                 type : "playlist",
-                coverURL: `${apiBase}/covers/${playlistInfos.cover}`,
+                coverURL: playlistInfos.cover ? `${apiBase}/covers/${playlistInfos.cover}` : null,
                 name: playlistInfos.title,
                 description: playlistInfos.description,
                 collaborators : collaborators

CrazyMusicLibrary/src/components/AddMusic.css

@@ -13,6 +13,18 @@
     top:0;
     z-index: 20;
 }
+.addMusicRoot[data-minimized="true"]{
+    display: none;
+}
+#upload-progress-tiny{
+    position: absolute;
+    bottom : -30px;
+    padding : 2px 7px;
+    border-radius: 10px;
+    background-color:var(--cards-background);
+    text-align: center;
+}
+
 .addMusicContainer{
     --width: 820px;
     --height: 700px;

CrazyMusicLibrary/src/components/AddMusic.jsx

@@ -479,9 +479,8 @@ const AddMusic = ({ closeOverlay, uploadPercent, uploadProgress, uploadFinished,
             setActiveIndex(0);
             setEditingAlbum(null);
             setPercentageUpload(0);
-            console.log("Closing overlay");
             emit("musicUploaded");
-            closeOverlay();
+
         }, 750);
 
     }
@@ -520,8 +519,8 @@ const AddMusic = ({ closeOverlay, uploadPercent, uploadProgress, uploadFinished,
         }
     }
     return (
-        <div className='addMusicRoot'>
-            <div className="addMusicContainer" style={(isMinimize) ? { display: "none" } : {}}>
+        <div className='addMusicRoot' data-minimized={isMinimize}>
+            <div className="addMusicContainer">
                 <AddMusicContext.Provider value={{ albums, moveTrackToNewAlbum, editingAlbum, moveTrackToAlbum, setEditingAlbum }}>
                     <IconX className="buttonRound closeOverlay" onClick={handleClose} />
                     <h2>Add Music</h2>

CrazyMusicLibrary/src/components/AddMusic/AlbumCard.css

@@ -1,7 +1,6 @@
 :root{
     --card-border-radius: 15px;
 }
-
 .album-card{
     display: flex;
     flex-direction: column;
@@ -12,7 +11,21 @@
     position: relative;
     box-shadow: var(--box-shadow-small);
 }
-
+.skeleton-loader-album{
+    background-color: var(--cards-background);
+    width: 100%;
+    aspect-ratio:1;
+    border-radius: 10px;
+    animation: loadAlbum 0.4s ease-in-out alternate infinite;
+}
+@keyframes loadAlbum{
+    from{
+        opacity: 0.8;
+    }
+    to{
+        opacity: 1;
+    }
+}
 .album-card[context="add"]{
     width: 150px;
 }
@@ -76,7 +89,7 @@
     width: 100%;
     height: auto;
     aspect-ratio: 1;
-    border-radius:  var( --card-border-radius) ;
+    border-radius:  var( --card-border-radius) var( --card-border-radius)  0px 0px;
 }
 
 .album-card-overview-button{

CrazyMusicLibrary/src/components/AudioControls.jsx

@@ -17,14 +17,15 @@ const AudioControls = ({context}) => {
         playPreviousSong();
     }
     return(
-        <div className="audio-controls" data-mobile-context={context.mobile}>
+        <div className="audio-controls" data-mobile-context={context.mobile} 
+            data-preserv-width={context.preserv}>
             {(!context.mobile || context.maximize) ? <SvgHoverToggle iconHovered={IconPlayerTrackPrevFilled} 
                 iconDefault={IconPlayerTrackPrev} onClick={handlePreviousNextSong}/> : null}
             <SvgHoverToggle iconHovered={ (isPlaying) ? IconPlayerPauseFilled : IconPlayerPlayFilled} 
                             iconDefault={(isPlaying) ? IconPlayerPause : IconPlayerPlay} 
                             onClick={handleToggleTrackPaused}/>
-            <SvgHoverToggle iconHovered={IconPlayerTrackNextFilled} iconDefault={IconPlayerTrackNext}
-             onClick={handlePlayNextSong}/>
+            {!(context.radio && context.mobile) && <SvgHoverToggle iconHovered={IconPlayerTrackNextFilled} iconDefault={IconPlayerTrackNext}
+             onClick={handlePlayNextSong}/>}
         </div>
     )
 }

CrazyMusicLibrary/src/components/CreatePlaylist.jsx

@@ -12,11 +12,13 @@ const CreatePlaylist = ({closeOverlay, applyCanges, editPlaylistClass}) => { //p
     const [playlistClass, setPlaylistClass] = useState((editPlaylistClass) ? editPlaylistClass : {id : uuidv4()});
     const [possibleCollaborators, setPossibleCollaborators] = useState([])
     const [collaborators, setCollaborators] = useState([]);
+    // const []
 
     //only load when the playlistClass is set
     useEffect(() => {
         if (playlistClass) {
-            setCoverURL(playlistClass.coverURL);
+            // const isValid = playlistClass.coverURL.split('/').pop() !== "null";
+            setCoverURL(playlistClass.coverUR);
 
         }
         if(playlistClass.collaborators){
@@ -90,7 +92,8 @@ const CreatePlaylist = ({closeOverlay, applyCanges, editPlaylistClass}) => { //p
                 </div>
                 <form className="albumDetails" id='editAlbumInfos' >
                     <label htmlFor="playlistName">Playlist name</label>
-                    <input type="text" id="playlistName" placeholder="Enter playlist name" defaultValue={playlistClass?.name} />
+                    <input type="text" id="playlistName" placeholder="Enter playlist name"
+                     defaultValue={playlistClass.name ? playlistClass.name : ''} />
                     <div className="albumTypeOption">
                         <label htmlFor="description">Description</label>
                         <textarea id="description" 

CrazyMusicLibrary/src/components/Header.css

@@ -111,6 +111,9 @@
     flex-direction: row;
     gap: 10px;
 }
+.audio-controls[data-preserv-width="true"]{
+    min-width: 80px;
+}
 .audio-controls > div {
     height: 35px;
 }
@@ -229,7 +232,7 @@
 }
 #add-radio-fav{
     position: absolute;
-    top: 20px;
+    top: 16px;
     right:20px;
     cursor: pointer;
 }

CrazyMusicLibrary/src/components/Header.jsx

@@ -86,6 +86,8 @@ const Header = () => {
     }, []);
 
     const onUploadFished = () => {
+        setIsAddMusicMinimized(false);
+        closeNewMusic();
 
     }
     const handleClicNewMusic = () => {
@@ -150,7 +152,7 @@ const Header = () => {
                         : <SmallFFTVisualizer/>}
                     <div className='trackinfo-mobile'>
                         <span id="songTitle">{currentTrackData.title}</span>
-                        <AudioControls context={{mobile : true}}/>
+                        <AudioControls context={{mobile : true, radio : currentTrackData?.type === "radio" , preserv : true}}/>
                     </div>
                 </div>
 
@@ -186,8 +188,7 @@ const Header = () => {
                 <RadialProgressBar percent={uploadPercent} size={44} useText={false} style={{position: "absolute", transform:"translate(-1px, -5.5px)"}}/>}
                 <IconMusicPlus style={{zIndex:"10", position: "relative"}}className="addMusicButton buttonRound" onClick={handleClicNewMusic}/>
 
-                {(uploadProgress) && <span 
-                    style={{position: "absolute", bottom : "-30px", padding : "2px 7px", borderRadius: "10px",backgroundColor:"rgba(255, 255, 255, 0.7)", textAlign : "center"}}>{uploadProgress.done}/{uploadProgress.total}</span>
+                {(uploadProgress) && <span id="upload-progress-tiny">{uploadProgress.done}/{uploadProgress.total}</span>
                 }
             </div>
             <UserDropdown />
@@ -197,7 +198,7 @@ const Header = () => {
             uploadFinished={onUploadFished} 
             uploadProgress={setUploadProgress}
             isMinimize={isAddMusicMinimized}
-            setMinimized={ setIsAddMusicMinimized}
+            setMinimized={setIsAddMusicMinimized}
             closeOverlay={closeNewMusic} />) }
 
       </header>    

CrazyMusicLibrary/src/components/LibAlbumCard.jsx

@@ -4,21 +4,35 @@ import {trimString} from '../../lib';
 import './AddMusic/AlbumCard.css';
 import { useNavigate } from 'react-router-dom';
 import CML_logo from './CML_logo';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 const LibAlbumCard = ({album, hideArtist = false}) => {
     const navigate = useNavigate();
     const [artists, setArtists] = useState([]);
+    const [imgLoaded, setImgLoaded] = useState(false);
+    const imgRef = useRef(null);
     const viewAlbum = (id) => {
         navigate(`/albums/${id}`);
     }
     useEffect(() => {
         if(!album.artists){ return;}
         setArtists(JSON.parse(album.artists).map((artist) => artist.name));
     },[album]);
+
     return(
         <div className="album-card" onClick={()=> viewAlbum(album.id)}>
             {(album.cover)?
-            <img src={`${apiBase}/covers/${album.cover}`} alt={`${trimString(album.title, 25)} cover`} className="album-card-cover" />
+            <div className="">
+                {!imgLoaded && <div className="skeleton-loader-album" />}
+                <img
+                className='album-card-cover'
+                ref={imgRef}
+                src={`${apiBase}/covers/${album.cover}`}
+                onLoad={() => setImgLoaded(true)}
+                alt={album.title}
+                style={{ display: imgLoaded ? "block" : "none" }}
+                />
+            </div>
+
             : <CML_logo className="cover-image" />}
             <h3 className="album-name">{trimString(album.title, 40)}</h3>
             {!hideArtist && <p className="album-artist">{ trimString(artists.toString().replace(/,/g, ', '), 25) || "No artist"}</p>}

CrazyMusicLibrary/src/components/LibArtistsCard.jsx

@@ -2,15 +2,22 @@ import apiBase from '../../APIbase';
 // import './AddMusic/artistCard.css';
 import { useNavigate } from 'react-router-dom';
 import CML_logo from './CML_logo';
+import { useState } from 'react';
 const LibArtistsCard = ({artist}) => {
     const navigate = useNavigate();
+    const [imgLoaded, setImgLoaded] = useState(false);
+    
     const viewArtist = (id) => {
         navigate(`/artists/${id}`);
     }
     return(
         <div className="artist-card" onClick={()=> viewArtist(artist.id)}>
-            {(artist.picture)?
-            <img src={`${apiBase}/covers/artists/${artist.picture}`} alt={`${artist.name} cover`} className="artist-card-cover" />
+            {(artist.picture)?<>
+            {!imgLoaded && <div className="skeleton-loader-album" />}
+            <img src={`${apiBase}/covers/artists/${artist.picture}`}
+             alt={`${artist.name} cover`} 
+             onLoad={() => setImgLoaded(true)}
+             className="artist-card-cover" /></>
             : <CML_logo className="cover-image" />}
             <h3 className="artist-name">{artist.name}</h3>
         </div>