hw-gs-player

commit 121942256b49be59da3dd3c6ab9411533464d641
parent 4cf6dcd3b7f5e3ffe90b98416ef2f098203c585d
Author: Sunny <kajimalu10@gmail.com>
Date:   Sat, 29 Mar 2025 12:12:39 +0900

add prev next

Diffstat:
M
src/components/Player.vue
 | 
14
++++++++++++--
M
src/components/TrackList.vue
 | 
30
+++++++++++++++++++++++++++---
M
src/player-style.css
 | 
42
++++++++++++++++++++++++++++++------------
M
src/style.css
 | 
2
+-

4 files changed, 70 insertions(+), 18 deletions(-)
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -4,7 +4,7 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick} from 'vue';
 import queue from '../queue';
 import Tracklist from './TrackList.vue';
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiRepeatOnce, mdiRepeatOff, mdiStarCheck, mdiStarPlusOutline } from '@mdi/js';
+import { mdiRepeatOnce, mdiRepeatOff, mdiStarCheck, mdiStarPlusOutline, mdiSkipPrevious, mdiSkipNext } from '@mdi/js';
 
 // define Emit event
 const emit = defineEmits(["update:isFullscreen"]);
@@ -189,13 +189,23 @@ const renderKey = queue.get_playerRenderKey();
       </div>
 
       <div class="control_box">
-      <!-- Play/Pause button -->
+        <!-- Prev button -->
+        <div class="prev-button" @click="queue.get_next()">
+          <SvgIcon type="mdi" :path="mdiSkipPrevious" />
+        </div>
+
+        <!-- Play/Pause button -->
         <button @click="togglePlay" class="play-pause-button">
           <div class="play-pause-icon" :class="{ playing: isPlaying }">
             <div class="bar bar-left"></div>
             <div class="bar bar-right"></div>
           </div>
         </button>
+
+        <!-- Next button -->
+        <div class="next-button" @click="queue.get_next()">
+          <SvgIcon type="mdi" :path="mdiSkipNext" />
+        </div>
       </div>
     </div>
 
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
@@ -11,8 +11,8 @@ const queueTitleList = computed(() => queue.get_queueTitleList());
     <table>
       <tbody>
         <tr v-for="(Title, index) in queueTitleList" :key="index">
-          <td>{{ index }}</td>
-          <td>{{ Title }}</td>
+          <td class="index">{{ String(index).padStart(3, '0') }}</td>
+          <td class="title">{{ Title }}</td>
         </tr>
       </tbody>
     </table>
@@ -20,7 +20,30 @@ const queueTitleList = computed(() => queue.get_queueTitleList());
 </template>
 
 <style scoped>
-/* default style (mobile) */
+/* default style */
+h1{
+  font-size: 24px;
+  padding-bottom: 10px;
+}
+
+.index{
+  font-family: "Lekton", monospace;
+  font-size: 14px;
+}
+
+.index::after {
+  content: "\00A0";
+}
+
+.title {
+  font-size: 20px;
+}
+
+table td {
+  display: table-cell;
+  vertical-align: middle; /* 上下中央揃え */
+  padding: 1px; /* セル内の余白を調整 */
+}
 
 /* 2column style (PC) */
 @media (min-aspect-ratio: 1/1) {
@@ -32,6 +55,7 @@ const queueTitleList = computed(() => queue.get_queueTitleList());
     width: calc(50vw - 60px);
     height: calc(100% - 60px);
     background: #000000;
+    font-size: 20px;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/src/player-style.css b/src/player-style.css
@@ -139,8 +139,8 @@
 }
 
 svg {
-  width: clamp(2px, calc(6vw), 30px);
-  height: clamp(2px, calc(6vw), 30px);
+  width: clamp(2px, 6vw, 30px);
+  height: clamp(2px, 6vw, 30px);
 }
 
 
@@ -150,31 +150,49 @@ svg {
   width: 100%;
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: clamp(6px, 12vw, 60px);
 }
 
+.control_box .prev-button,
+.control_box .next-button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container .control_box .prev-button,
+.container .control_box .next-button {
+  display: none;
+}
+
+.control_box svg {
+  width: clamp(3px, 8vw, 40px);
+  height: clamp(3px, 8vw, 40px);
+}
 
-/* control button */
-.play-pause-button {
+.control_box .play-pause-button {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
 }
 
-.container .play-pause-button {
+.container .control_box .play-pause-button {
   font-size: clamp(1.5px, 3vw, 15px);
   padding-left: clamp(1px, 1vw, 5px);
   padding-right: clamp(1px, 1vw, 5px);
 }
 
-.fscontainer .play-pause-button {
+.fscontainer .control_box .play-pause-button {
   font-size: clamp(2px, 4vw, 20px);
   position: relative;
   top: 35px;
   padding-bottom: 70px;
 }
 
-.play-pause-icon {
+.control_box .play-pause-icon {
   position: relative;
   width: 8vw;
   max-width: 2em;
@@ -182,7 +200,7 @@ svg {
   max-height: 2.2em;
 }
 
-.bar {
+.control_box .bar {
   position: absolute;
   background: white;
   width: 0.9em;
@@ -190,18 +208,18 @@ svg {
   transition: all 0.3s ease-in-out;
 }
 
-.bar-left {
+.control_box .bar-left {
   left: 0.12em;
   clip-path: polygon(0% 0%, 100% 26%, 100% 74%, 0% 100%);
 }
 
-.bar-right {
+.control_box .bar-right {
   right: 0.12em;
   clip-path: polygon(0% 25%, 100% 50%, 0% 75%);
 }
 
-.playing .bar-left,
-.playing .bar-right {
+.control_box .playing .bar-left,
+.control_box .playing .bar-right {
   clip-path: inset(0 0 0 0);
   width: 0.5em;
 }
diff --git a/src/style.css b/src/style.css
@@ -36,7 +36,7 @@ body {
 .page {
   position: absolute;
   top: 55px;
-  padding: 10px;
+  padding: 20px;
   z-index: -100;
 }