hw-gs-player

commit 8403f9348854dd2a3c892babb70ded31e20304d5
parent 121942256b49be59da3dd3c6ab9411533464d641
Author: Sunny <kajimalu10@gmail.com>
Date:   Sat, 29 Mar 2025 19:36:46 +0900

add tracklist button

Diffstat:
M
src/App.vue
 | 
8
+++++---
M
src/components/AlbumList.vue
 | 
1
-
M
src/components/Player.vue
 | 
4
++--
M
src/components/TrackList.vue
 | 
5
+++++
M
src/style.css
 | 
31
++++++++++++++++++++++++-------

5 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -4,6 +4,8 @@ import Player from "./components/Player.vue";
 import FlagIcon from 'vue3-flag-icons'
 import { useI18n } from 'vue-i18n';
 import { screenSaver } from "./screen-saver";
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiPlaylistMusic } from '@mdi/js';
 
 const MenuButton = ref(false);
 const isFullscreen = ref(false);
@@ -49,6 +51,9 @@ onBeforeUnmount(() => {
       <div class="title_bar">
         <p><router-link to="/">{{ $t('appTitle.name') }}</router-link></p>
       </div>
+      <div class="tracklist_btn">
+        <router-link to="/tracklist"><SvgIcon type="mdi" :path="mdiPlaylistMusic" /></router-link>
+      </div>
       <div class="hamburger_btn" @click.stop="MenuButton = !MenuButton">
         <span class="line line_01" :class="{ 'btn_line01': MenuButton }"></span>
         <span class="line line_02" :class="{ 'btn_line02': MenuButton }"></span>
@@ -56,9 +61,6 @@ onBeforeUnmount(() => {
       </div>
       <div class="menu" :class="{ open: MenuButton }">
         <ul>
-          <li><router-link to="/" @click="MenuButton = false">{{ $t('menu.top') }}</router-link></li>
-          <li><router-link to="/tracklist" @click="MenuButton = false">{{ $t('menu.tracklist') }}</router-link></li>
-          <hr>
           <li><router-link to="/about" @click="MenuButton = false">{{ $t('menu.about') }}</router-link></li>
           <li><router-link to="/terms" @click="MenuButton = false">{{ $t('menu.terms') }}</router-link></li>
           <li><router-link to="/policy" @click="MenuButton = false">{{ $t('menu.policy') }}</router-link></li>
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -36,7 +36,6 @@ function add_play_album(albumIndex: number) {
 
 <template>
   <div class="page">
-    <h1>Album List</h1>
     <div class="album-container">
       <div v-for="(AlbumList, index) in AlbumList">
         <button
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -169,11 +169,11 @@ const renderKey = queue.get_playerRenderKey();
         <div class="time_container">
           <div class="nowtime">{{ formattedNowTime }}</div>
           <div class="endtime">{{ formattedEndTime }}</div>
-          <div class="album">{{ albumTitle }}</div>
+          <div class="album" @click="toggleFullscreen">{{ albumTitle }}</div>
         </div> 
 
         <div class="fs_album_container">
-          <div class="fs_album">{{ albumTitle }}</div>
+          <div class="fs_album" @click="toggleFullscreen">{{ albumTitle }}</div>
           <div class="fs_loop" @click="queue.onLoopButton()">
             <SvgIcon type="mdi" :path="queue.isLoop.value ? mdiRepeatOnce : mdiRepeatOff" />
           </div>
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
@@ -21,6 +21,11 @@ const queueTitleList = computed(() => queue.get_queueTitleList());
 
 <style scoped>
 /* default style */
+.page{
+  padding: 20px;
+  transition: opacity 0.3s ease-in-out;
+}
+
 h1{
   font-size: 24px;
   padding-bottom: 10px;
diff --git a/src/style.css b/src/style.css
@@ -36,7 +36,7 @@ body {
 .page {
   position: absolute;
   top: 55px;
-  padding: 20px;
+  padding: 10px;
   z-index: -100;
 }
 
@@ -88,12 +88,30 @@ body {
 }
 
 
+.tracklist_btn {
+  position: fixed;
+  top: 0;
+  right: 50px;
+  width: 60px;
+  height: 5px;
+  cursor: pointer;
+  z-index: -10;
+  padding: 5.5px;
+}
+
+.tracklist_btn svg {
+  width: 40px;
+  height: 40px;
+  color: #999999;
+}
+
+
 /* hamburger button */
 .hamburger_btn {
   position: fixed;
   top: 0;
   right: 0;
-  width: 80px;
+  width: 70px;
   height: 55px;
   cursor: pointer;
   z-index: -10;
@@ -104,7 +122,7 @@ body {
   top: 0;
   right: 25px;
   width: 28px;
-  height: 2px;
+  height: 3.5px;
   background: #999999;
   text-align: center;
   transition: 0.4s ease;
@@ -115,8 +133,7 @@ body {
 }
 
 .hamburger_btn .line_02 {
-  top: 26px;
-  height: 2.5px;
+  top: 25.5px;
 }
 
 .hamburger_btn .line_03 {
@@ -125,7 +142,7 @@ body {
 
 /* hamburger button -transform */
 .btn_line01 {
-  transform: translateY(10px) rotate(-45deg)
+  transform: translateY(10px) rotate(-45deg) scale(1.1);
 }
 
 .btn_line02 {
@@ -133,7 +150,7 @@ body {
 }
 
 .btn_line03 {
-  transform: translateY(-10px) rotate(45deg);
+  transform: translateY(-10px) rotate(45deg) scale(1.1);
 }