hw-gs-player

commit 79c53357f3cc5b9b649920a6226e3d67287fc297
parent 516474422228855a0315b63bc445aac07c4dbb83
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date:   Tue, 18 Mar 2025 00:01:44 +0900

add small player -dev (#12)

* add small player -dev

* deploy album list & bind player for queue. (#9)

* Dev (#10)

* deploy album list & bind player for queue.

* use interval!!!

* Dev (#11)

* deploy album list & bind player for queue.

* use interval!!!

* routerを本番仕様に変更

* router /player was deleted

* make queue can control player

* install roop button

* deploy queue in player

---------

Co-authored-by: Minerva_juppiter
Diffstat:
M
src/components/AlbumList.vue
 | 
2
+-
M
src/components/Player.vue
 | 
23
++++++++++++++++++++++-
M
src/style.css
 | 
64
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------

3 files changed, 81 insertions(+), 8 deletions(-)
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -11,7 +11,7 @@ function add_play_album(albumIndex: number) {
 </script>
 
 <template>
-  <div class="container">
+  <div class="page">
     <h1>Album List</h1>
     <div v-for="(AlbumList, index) in AlbumList">
       <button
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -22,6 +22,15 @@ const isAnimating = ref(false);
 const SCROLL_SPEED = 40; // px/s
 const WAIT_TIME = 2000; // ms
 
+
+const isFullscreen = ref(false);
+
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+
+
 const togglePlay = async () => {
   player.value?.togglePlay(); // Change play-pause
 };
@@ -98,7 +107,7 @@ const renderKey = queue.get_playerRenderKey();
 </script>
 
 <template>
-  <div class="container" :key="renderKey">
+  <div :class="{ 'container': !isFullscreen, 'fscontainer': isFullscreen }" :key="renderKey">
     <youtube-iframe
       :video-id=queue.get_nowSong()
       :player-vars="{
@@ -146,7 +155,19 @@ const renderKey = queue.get_playerRenderKey();
       {{ index }} : {{ SongName }}
     </div>   
   </div>
+  <button @click="toggleFullscreen" class="toggle-btn">
+        {{ isFullscreen ? '通常表示' : 'フルスクリーン' }}
+      </button>
 </template>
 
 <style scoped>
+.toggle-btn {
+  position: fixed;
+  bottom: 90px;
+  background: #4c4c4c;
+  color: #ffffff;
+  border: none;
+  padding: 5px;
+  cursor: pointer;
+}
 </style>
diff --git a/src/style.css b/src/style.css
@@ -12,7 +12,24 @@ body {
   -webkit-text-size-adjust: none;
 }
 
+.page {
+  height: 70px;
+}
+
 .container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 5em;
+  background: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  flex-direction: row;
+}
+
+.fscontainer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -133,7 +150,13 @@ body {
 }
 
 /* player */
-iframe {
+.container iframe {
+  width: 5em;
+  height: auto;
+  aspect-ratio: 1/1;
+}
+
+.fscontainer iframe {
   margin-bottom: 5px;
   width: 100%;
   height: 100%;
@@ -141,7 +164,17 @@ iframe {
   aspect-ratio: 1/1;
 }
 
-.info_box {
+/* アンダーバー時のinfo_box配置 */
+.container .info_box {
+  margin-left: 10px;
+  padding: 5px;
+  width: 70%;
+  max-width: 300px;
+  color: white;
+}
+
+/* フルスクリーン時のinfo_box */
+.fscontainer .info_box {
   margin: 5px;
   width: 100%;
   max-width: 500px;
@@ -154,7 +187,14 @@ iframe {
   width: 100%;
 }
 
-.scroll-container {
+.container .scroll-container {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  font-size: clamp(2px, calc(4vw - 1.3px), 20px);
+}
+
+.fscontainer .scroll-container {
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -199,15 +239,28 @@ iframe {
   opacity: 1;
 }
 
-.album {
+.container .album {
+  font-size: 0;
+}
+
+.fscontainer .album {
   font-size: clamp(2px, calc(4vw - 1.3px), 20px);
 }
 
-.time_container {
+.container .time_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 0.5em;
+  font-size: clamp(1.5px, calc(3vw - 1px), 15px);
+}
+
+.fscontainer .time_container {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-top: 0.5em;
+  margin-bottom: 2em;
   font-size: clamp(1.5px, calc(3vw - 1px), 15px);
 }
 
@@ -222,7 +275,6 @@ iframe {
   font-size: clamp(2px, 4vw, 20px);
   background: none;
   border: none;
-  margin-top: 2em;
   padding: 0.5em 0.5em 0.5em 1em;
   cursor: pointer;
   display: flex;