Layout Improvements

src/components/DraggableBar.vue

@@ -2,18 +2,19 @@
   <div :id="id" class="playbar-clickable cursor-pointer h-3 pt-1" @mousedown="onMyMouseDown">
     <div class="barbg h-1 bg-draggable-bar">
       <div class="cur bg-draggable-bar-current relative h-full" :style="{ width: changingProgress ? cprogress * 100 + '%' : progress + '%' }">
-        <span :class="'btn absolute rounded-full ' + (btnClass ? btnClass : '')">
+        <span class="btn absolute rounded-full" :class="btnClass ? btnClass : ''" :tooltips="tooltips">
           <i />
         </span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-const { id, progress, btnClass } = defineProps<{
+const { id, progress, btnClass, tooltips } = defineProps<{
   id: string;
   progress: number;
   btnClass?: string;
+  tooltips?: string;
 }>();
 
 const emits = defineEmits(['update-progress', 'commit-progress']);
@@ -68,4 +69,21 @@ const onMyMouseDown = (event: MouseEvent) => {
 };
 </script>
 
-<style></style>
+<script lang="ts">
+export default {};
+</script>
+
+<style>
+[tooltips]:hover:after {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(tooltips);
+  color: #fff;
+  background: #1b2735;
+  max-width: 100vw;
+  padding: 0.3rem 0.5rem;
+  border-radius: 1rem;
+}
+</style>

src/components/Modal.vue

@@ -21,7 +21,7 @@ let show = $ref(false);
 let modalType = $ref(DefaultModal);
 let options = $ref({});
 
-const components: Record<string, any> = {
+const components: Record<string, typeof DefaultModal> = {
   DefaultModal,
   CreatePlaylist,
   AddToPlaylist,

src/components/Playerbar.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="footer flex relative z-20 h-20 border-t border-default">
-    <div class="flex flex-none items-center w-80">
-      <span class="icon text-3xl ml-12 li-previous text-prevnext" @click="prevTrack()" />
-      <span
-        class="icon text-3xl ml-6 mr-6 li-play play text-play hover:text-play-hover"
-        :class="isPlaying ? 'li-pause' : 'li-play'"
-        @click="playPauseToggle()" />
-      <span class="icon text-3xl mr-4 li-next text-prevnext" @click="nextTrack()" />
+  <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
+    <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-24 text-4xl">
+      <span class="li-previous text-prevnext cursor-pointer" @click="prevTrack()" />
+      <span class="li-play play text-play hover:text-play-hover cursor-pointer" :class="isPlaying ? 'li-pause' : 'li-play'" @click="playPauseToggle()" />
+      <span class="li-next text-prevnext cursor-pointer" @click="nextTrack()" />
     </div>
-    <div class="main-info flex flex-1 overflow-hidden bg-footer-main z-30">
+    <div class="main-info w-screen md:flex-1 flex overflow-hidden bg-footer-main z-30">
       <div v-if="playlist.length == 0" class="logo-banner text-center flex-1 flex items-center h-20 w-20">
         <svg
           class="logo h-12 w-12"
@@ -25,29 +22,21 @@
           <polygon points="13 4 13 13 16 13 16 4" />
         </svg>
       </div>
-      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-20 w-20 relative group" @click="toggleNowPlaying()">
-        <img class="object-cover h-20 w-20" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-24 w-24 relative group" @click="toggleNowPlaying()">
+        <img class="object-cover h-24 w-24" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
         <div class="mask items-center justify-center absolute inset-0 hidden group-hover:bg-black group-hover:bg-opacity-60 group-hover:flex">
           <vue-feather type="chevrons-up" stroke="#cccccc" />
         </div>
       </div>
       <div v-if="playlist.length > 0" class="detail flex-1 relative overflow-hidden">
-        <div class="ctrl absolute top-1 right-2">
+        <div class="ctrl absolute top-2 right-2">
           <vue-feather
-            v-if="!isRedHeart(currentPlaying?.id)"
-            class="icon opacity-50 hover:opacity-100 cursor-pointer"
+            class="opacity-50 hover:opacity-100 cursor-pointer"
             type="heart"
-            size="1.125rem"
-            stroke-width="1.5"
-            @click="setRedHeart(toRaw(currentPlaying), true)" />
-          <vue-feather
-            v-if="isRedHeart(currentPlaying?.id)"
-            class="heart cursor-pointer"
-            type="heart"
-            fill="red"
-            stroke="red"
-            size="1.125rem"
-            @click="setRedHeart(toRaw(currentPlaying), false)" />
+            :fill="isRedHearted ? 'red' : 'transparent'"
+            :stroke="isRedHearted ? 'red' : 'white'"
+            size="1rem"
+            @click="setRedHeart(toRaw(currentPlaying), !isRedHearted)" />
           <a :title="t('_ADD_TO_PLAYLIST')" @click="showModal('AddToPlaylist', { tracks: [currentPlaying] })">
             <span class="icon opacity-50 hover:opacity-100 li-songlist ml-3" />
           </a>
@@ -58,11 +47,11 @@
           </a>
         </div>
 
-        <div class="title text-center truncate h-8 flex items-end justify-center text-lg">
+        <div class="title text-center truncate flex items-end justify-center text-xl my-2">
           <span v-if="currentPlaying?.source === 'xiami'" style="color: orange; font-size: medium">⚠️</span>
           {{ currentPlaying?.title }}
         </div>
-        <div class="more-info h-6 text-sm flex text-subtitle px-3">
+        <div class="more-info text-sm flex text-subtitle px-3 my-2">
           <div class="current">{{ formatTime(currentPosition) }}</div>
           <div class="singer flex-1 tuncate text-center">
             <a class="cursor-pointer" @click="showPlaylist(currentPlaying?.artist_id)">{{ currentPlaying?.artist }}</a>
@@ -81,7 +70,7 @@
         </div>
       </div>
     </div>
-    <div class="right-control flex flex-none items-center w-80">
+    <div class="right-control flex flex-none items-center w-screen md:w-80 h-24">
       <div class="playlist-toggle cursor-pointer ml-8">
         <span class="icon li-list" @click="togglePlaylist()" />
       </div>
@@ -107,6 +96,7 @@ import useRedHeart from '../composition/redheart';
 import useSettings from '../composition/settings';
 import { l1Player } from '../services/l1_player';
 import { formatTime, isElectron } from '../utils';
+import coverImg from '../images/mycover.jpg';
 
 const { t } = useI18n();
 const { player } = usePlayer();
@@ -208,6 +198,7 @@ let myProgress = $computed(() => player.myProgress);
 let currentDuration = $computed(() => player.currentDuration);
 let currentPosition = $computed(() => player.currentPosition);
 let currentPlaying = $computed(() => player.currentPlaying);
+let isRedHearted = $computed(() => isRedHeart(currentPlaying?.id));
 
 if (isElectron()) {
   window.api?.onLyricWindow((arg: string) => {

src/components/PlayerbarPopup.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-20': !hidden }" @click="close()" />
+  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-24': !hidden }" @click="close()" />
   <div
     class="menu bg-theme fixed overflow-hidden border-default rounded-t-lg h-96"
-    :class="{ 'bottom-20 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
+    :class="{ 'bottom-24 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
     <div class="menu-header text-sm h-10 border-b border-default flex items-center bg-menu">
       <span class="menu-title flex-1 px-4 border-default border-r">{{ t('_TOTAL_SONG_PREFIX') }} {{ playlist.length }} {{ t('_TOTAL_SONG_POSTFIX') }}</span>
       <a class="add-all pr-4 flex items-center cursor-pointer" @click="showModal('AddToPlaylist', { tracks: playlist })">
@@ -18,7 +18,7 @@
         <vue-feather size="1.25rem" type="x"></vue-feather>
       </a>
     </div>
-    <ul class="menu-list overflow-y-scroll text-sm">
+    <ul class="menu-list overflow-y-auto text-sm align-middle h-80">
       <DragDropZone
         v-for="(song, index) in playlist"
         :id="'song_' + song.id"
@@ -32,12 +32,14 @@
         @mouseenter="song.highlight = true"
         @mouseleave="song.highlight = undefined"
         @drop="onCurrentPlayingSongDrop(song, $event)">
-        <div class="song-status-icon w-8">
+        <div class="w-8 flex justify-end">
+          <span>{{ index + 1 }}</span>
+        </div>
+        <div class="song-status-icon w-8 flex justify-center">
           <vue-feather v-show="currentPlaying.id == song.id" size="1rem" type="play"></vue-feather>
         </div>
         <div class="song-title flex-2" :class="song.disabled ? 'text-disabled' : ''">
           <a class="cursor-pointer" @click="playFromPlaylist(song)">
-            <span v-if="song.source === 'xiami'" style="color: orange; border-radius: 12px; border: solid 1px; padding: 0 4px">⚠️ 🦐</span>
             {{ song.title }}
           </a>
         </div>
@@ -109,16 +111,14 @@ let playlist: any = $computed(() => player.playlist.value);
 let currentPlaying: any = $computed(() => player.currentPlaying || {});
 </script>
 <style>
-.footer .menu ul.menu-list {
-  height: 21.5rem;
-}
-.footer .menu {
-  left: 300px;
-  right: 300px;
+.menu {
+  --menu-width: 60rem;
+  width: var(--menu-width);
+  left: calc((100% - var(--menu-width)) / 2);
   -webkit-app-region: no-drag;
 }
 
-.footer .menu ul.menu-list li .song-status-icon svg {
+.song-status-icon svg {
   fill: var(--important-color);
   stroke: var(--important-color);
 }

src/components/PlaylistGrid.vue

@@ -1,16 +1,18 @@
 <template>
-  <ul class="playlist-covers m-0 py-0 flex relative flex-wrap">
-    <li v-for="i in playlists" :key="i.id" class="group w-1/3 md:w-1/5 min-h-40 px-4 sm:w-1/4 mb-3">
-      <div class="u-cover flex relative shadow-lg">
-        <img :src="i.cover_img_url" class="m-auto cursor-pointer w-full object-cover rounded" @click="showPlaylist(i.id)" />
+  <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
+    <li v-for="i in playlists" :key="i.id" class="group min-h-40">
+      <div class="relative shadow-lg">
+        <div class="aspect-square bg-cover" :style="`background-image: url('${bgImage}')`">
+          <img :src="i.cover_img_url" class="m-auto cursor-pointer rounded object-cover w-full" @click="showPlaylist(i.id)" />
+        </div>
         <div
           class="bottom opacity-0 group-hover:opacity-100 cursor-pointer absolute w-8 h-8 bottom-3 right-3 ease-linear duration-200"
           @click="directplaylist(i.id)">
           <vue-feather type="play-circle" size="2rem"></vue-feather>
         </div>
       </div>
       <div class="desc cursor-pointer">
-        <span class="title flex min-h-8 mt-1" @click="showPlaylist(i.id)">{{ i.title }}</span>
+        <div class="min-h-8 mt-1 px-2" @click="showPlaylist(i.id)">{{ i.title }}</div>
       </div>
     </li>
     <!-- <div class="loading_bottom">
@@ -22,6 +24,7 @@
 import { useRouter } from 'vue-router';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
+import bgImage from '../images/placeholder.png';
 
 const router = useRouter();
 

src/components/SettingBlock.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="m-2">
+    <div class="settings-title pb-2 mb-2 mx-8">
+      <span>{{ titleText }}</span>
+    </div>
+    <div class="settings-content mx-7 mb-7 leading-8">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const { title: titleText } = defineProps<{
+  title: string;
+}>();
+</script>
+<style>
+.settings-title {
+  border-bottom: solid 1px var(--line-default-color);
+  font-size: 1.25rem;
+  max-width: 48rem;
+}
+.settings-title:first-of-type {
+  margin-top: 1.25rem;
+}
+.settings-content {
+  max-width: 48rem;
+}
+</style>

src/components/SettingButton.vue

@@ -1,12 +1,15 @@
 <template>
-  <button class="setting-button p-[5px] mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
 defineProps<{
   text: string;
 }>();
 </script>
+<script lang="ts">
+export default {};
+</script>
 <style>
 .setting-button {
   background: var(--button-background-color);

src/components/ToggleButtons.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="toggle overflow-hidden grid grid-flow-col w-fit divide-x divide-y-0 divide-solid rounded-lg">
+    <SettingButton
+      v-for="(button, index) in options"
+      :key="index"
+      class="rounded-none mr-auto decoration-2 underline-offset-4 whitespace-pre"
+      :class="{ underline: selected === index }"
+      :text="button.text"
+      @click="emit('change', button.value)" />
+    <!-- <SettingButton text="No" /> -->
+  </div>
+</template>
+<script setup lang="ts">
+import SettingButton from './SettingButton.vue';
+const emit = defineEmits(['change']);
+const { options, selected } = defineProps<{
+  options: {
+    text: string;
+    value?: any;
+  }[];
+  selected?: number;
+}>();
+</script>
+<script lang="ts">
+export default {};
+</script>
+<style>
+.toggle {
+  border-color: var(--text-default-color);
+  text-decoration-color: var(--text-default-color);
+}
+</style>

src/components/TrackRow.vue

@@ -1,4 +1,7 @@
 <template>
+  <div v-if="index !== undefined" class="flex-none w-8 text-cneter">
+    <span>{{ index + 1 }}</span>
+  </div>
   <div class="title flex-2 flex overflow-hidden items-center max-h-12">
     <!-- <a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()"> song.title </a> -->
     <vue-feather
@@ -48,11 +51,12 @@
   </div>
 </template>
 <script setup lang="ts">
-const { song, isMine, isLocal, listId } = defineProps<{
+const { song, isMine, isLocal, listId, index } = defineProps<{
   song: any;
   isMine?: boolean | string;
   isLocal?: boolean;
   listId?: string;
+  index?: number;
 }>();
 import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';

src/components/Volumebar.vue

@@ -6,6 +6,7 @@
         id="volumebar"
         :progress="volume * 100"
         btn-class="h-4 w-4 bg-white border border-gray-200"
+        :tooltips="(volume * 100).toFixed(0)"
         @update-progress="changeVolume"
         @commit-progress="commitVolume"></DraggableBar>
     </div>