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>