remove playlist description from playlist model

README.md

@@ -26,7 +26,7 @@ This page lists all the playlists you have created. More features will be added
 ### 4. The Playlist page
 
 ![](./images/2.png)
-This page shows the details of the playlist. It includes the playlist name, description, and the songs in the playlist. You can update your playlist details from this page.
+This page shows the details of the playlist. It includes the playlist name, and the songs in the playlist. You can update your playlist details from this page.
 
 ### A little narration
 

src/assets/scss/Global/basic.scss

@@ -36,7 +36,7 @@
 }
 
 .circular {
-  border-radius: 20px;
+  border-radius: 50%;
 }
 
 .flex {

src/components/AlbumView/Header.vue

@@ -10,9 +10,9 @@
   >
     <div class="art rounded">
       <img
-        :src="imguri + album.image"
+        :src="imguri.artist + album.artistimg"
         alt=""
-        class="rounded shadow-lg"
+        class="circular shadow-lg"
         loading="lazy"
       />
     </div>
@@ -30,9 +30,8 @@
       </div>
       <div class="bottom">
         <div class="stats">
-          {{ album.artist }} •
+          {{ album.artist }} • {{ album.date }} • {{ album.count }} Tracks •
-          {{ album.date }} •
+          {{ formatSeconds(album.duration, true) }}
-          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }}
         </div>
         <PlayBtnRect
           :source="playSources.album"
@@ -41,6 +40,9 @@
         />
       </div>
     </div>
+    <div class="bigimg">
+      <img class="rounded" :src="imguri.thumb + album.image" alt="" />
+    </div>
   </div>
 </template>
 
@@ -67,7 +69,7 @@ const emit = defineEmits<{
 }>();
 
 const albumheaderthing = ref<any>(null);
-const imguri = paths.images.thumb;
+const imguri = paths.images;
 const nav = useNavStore();
 
 /**
@@ -90,14 +92,26 @@ useVisibility(albumheaderthing, handleVisibilityState);
 <style lang="scss">
 .a-header {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas: "artist thumbnail" "tags thumbnail";
   gap: 1rem;
   padding: 1rem;
   height: 100% !important;
   background-color: $black;
   background-image: linear-gradient(37deg, $black 20%, $gray, $black 90%);
 
+  .bigimg {
+    grid-area: thumbnail;
+    width: 16rem;
+
+    img {
+      height: 100%;
+    }
+  }
+
   .art {
+    grid-area: artist;
     display: flex;
     align-items: flex-end;
     position: relative;
@@ -116,6 +130,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
   }
 
   .info {
+    grid-area: tags;
     width: 100%;
     display: flex;
     flex-direction: column;

src/components/PlaylistView/Header.vue

@@ -26,9 +26,6 @@
           <span v-else>{{ props.info.count }} Tracks</span> •
           {{ formatSeconds(props.info.duration, true) }}
         </div>
-        <div class="desc">
-          {{ props.info.description }}
-        </div>
         <div class="title ellip">{{ props.info.name }}</div>
         <div class="type">Playlist</div>
       </div>
@@ -88,7 +85,6 @@ function showDropdown(e: any) {
   position: relative;
   color: $white;
   background-color: transparent;
-  z-index: 0;
 
   .gradient {
     position: absolute;
@@ -97,10 +93,10 @@ function showDropdown(e: any) {
     width: 100%;
     height: 100%;
     background-image: linear-gradient(
-      37deg,
+      20deg,
-      $black 20%,
+      rgba(0, 0, 0, 0.25) 40%,
-      transparent,
+      rgba(0, 0, 0, 0.1),
-      $black 90%
+      rgba(0, 0, 0, 0.1) 70%
     );
   }
 

src/components/modals/NewPlaylist.vue

@@ -9,9 +9,7 @@
       id="modal-playlist-name-input"
     />
     <br />
-    <div class="submit">
+    <button type="submit">Create</button>
-      <input type="submit" class="rounded" value="Create" />
-    </div>
   </form>
 </template>
 
@@ -94,19 +92,24 @@ function create(e: Event) {
     justify-content: flex-end;
   }
 
-  input[type="submit"] {
+  button {
-    margin: $small 0;
+    margin: 0 auto;
-    background-color: rgba(40, 132, 252, 0.884) !important;
+    width: 6rem;
-    color: $white;
-    padding: $small 1rem;
-    font-size: 1rem;
-    border: solid 2px transparent !important;
-    outline: none;
-    cursor: pointer;
-
-    &:focus {
-      border: 2px solid $gray1 !important;
-    }
   }
+
+  // input[type="submit"] {
+  //   margin: $small 0;
+  //   background-color: rgba(40, 132, 252, 0.884) !important;
+  //   color: $white;
+  //   padding: $small 1rem;
+  //   font-size: 1rem;
+  //   border: solid 2px transparent !important;
+  //   outline: none;
+  //   cursor: pointer;
+
+  //   &:focus {
+  //     border: 2px solid $gray1 !important;
+  //   }
+  // }
 }
 </style>

src/components/modals/updatePlaylist.vue

@@ -8,19 +8,11 @@
     <br />
     <input
       type="text"
-      class="rounded"
+      class="rounded-sm"
       name="name"
       id="modal-playlist-name-input"
       :value="props.playlist.name"
     />
-    <label for="name">Description</label>
-    <br />
-    <textarea
-      name="description"
-      id=""
-      class="rounded"
-      :value="props.playlist.description"
-    ></textarea>
     <br />
     <input
       type="file"
@@ -30,8 +22,8 @@
       style="display: none"
       @change="handleUpload"
     />
-    <div id="upload" class="rounded" @click="selectFiles">
+    <div id="upload" class="rounded-sm" @click="selectFiles">
-      <div>Click to upload image</div>
+      <div>Click to upload cover image</div>
       <div
         id="update-pl-img-preview"
         class="image"
@@ -40,15 +32,7 @@
         }"
       />
     </div>
-    <div class="submit">
+    <button type="submit" id="updateplaylistsubmit">Update</button>
-      <input
-        type="submit"
-        id="updateplaylistsubmit"
-        class="rounded"
-        value="Update"
-        @click=""
-      />
-    </div>
   </form>
 </template>
 
@@ -89,7 +73,9 @@ function handleUpload() {
     "update-pl-image-upload"
   ) as HTMLInputElement;
 
-  handleFile(input.files[0]);
+  if (input.files) {
+    handleFile(input.files[0]);
+  }
 }
 
 function handleFile(file: File) {
@@ -99,7 +85,10 @@ function handleFile(file: File) {
 
   const preview = document.getElementById("update-pl-img-preview");
   const obj_url = URL.createObjectURL(file);
-  preview.style.backgroundImage = `url(${obj_url})`;
+
+  if (preview) {
+    preview.style.backgroundImage = `url(${obj_url})`;
+  }
 
   image = file;
 }
@@ -113,8 +102,8 @@ function update_playlist(e: Event) {
     clicked = true;
     const elem = document.getElementById(
       "updateplaylistsubmit"
-    ) as HTMLFormElement;
+    ) as HTMLButtonElement;
-    elem.value = "Updating";
+    elem.innerText = "Updating";
   } else {
     return;
   }
@@ -159,15 +148,14 @@ function update_playlist(e: Event) {
     max-width: 28rem;
     max-height: 5rem;
     color: $white;
-    background-color: transparent;
+    background-color: $gray2;
-    border: solid 2px $gray3;
+    border: none;
     font-family: inherit;
     padding: $small;
     outline: none;
     margin: $small 0;
 
     &:focus {
-      border: 2px solid transparent;
       outline: solid 2px $gray1;
     }
   }

src/interfaces.ts

@@ -36,6 +36,7 @@ export interface AlbumInfo {
   duration: number;
   date: string;
   image: string;
+  artistimg: string;
   is_compilation: boolean;
   is_soundtrack: boolean;
   is_single: boolean;
@@ -61,7 +62,6 @@ export interface Option {
 export interface Playlist {
   playlistid: string;
   name: string;
-  description?: string;
   image: string | FormData;
   tracks: Track[];
   count: number;

src/stores/pages/playlist.ts

@@ -33,7 +33,9 @@ export default defineStore("playlist-tracks", {
      * @param info Playlist info
      */
     updatePInfo(info: Playlist) {
+      const duration = this.info.duration;
       this.info = info;
+      this.info.duration = duration;
     },
     resetArtists() {
       this.artists = [];