hw-gs-player

commit 50e2672ea3b79d990a2ab6c9336ec461c56b4a22
parent 5d25be2fca1df689251dd953c893d453780e9c6a
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date:   Tue, 25 Mar 2025 14:57:59 +0900

Dev 10 (#24)

* transform to fit the screen

* delete defineEmits
Diffstat:
M
src/App.vue
 | 
6
++++--
M
src/components/Player.vue
 | 
40
++++++++++++++++++++++++++++++++++++++--
M
src/components/TrackList.vue
 | 
2
+-
M
src/player-style.css
 | 
5
+----
M
src/style.css
 | 
5
+++--

5 files changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n';
 import { screenSaver } from "./screen-saver";
 
 const MenuButton = ref(false);
+const isFullscreen = ref(false);
+
 const closeMenu = (event: Event) => {
   const target = event.target as HTMLElement;
   if (!target.closest(".menu") && !target.closest(".hamburger_btn")) {
@@ -42,7 +44,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <header>
+  <header v-if="!isFullscreen">
     <nav>
       <div class="title_bar">
         <p><router-link to="/">{{ $t('appTitle.name') }}</router-link></p>
@@ -76,5 +78,5 @@ onBeforeUnmount(() => {
   <div id="screenSaver" class="screen-saver">
   </div>
   <router-view />
-  <Player/>
+  <Player :isFullscreen="isFullscreen" @update:isFullscreen="isFullscreen = $event" />
 </template>
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { YoutubeIframe } from '@vue-youtube/component';
-import { ref, computed, onUnmounted, watch } from 'vue';
+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';
 
+// define Emit event
+const emit = defineEmits(["update:isFullscreen"]);
+
 // YouTube player instance
 const player = ref<any>(null);
 
@@ -25,10 +28,12 @@ let albumTitle = queue.get_albumTitle();
 // Fullscreen mode
 const isFullscreen = ref(false);
 const animationClass = ref("");
+const fscontainer = ref<HTMLDivElement | null>(null);
 
 // Toggle fullscreen mode
 const toggleFullscreen = () => {
   isFullscreen.value = !isFullscreen.value;
+  emit("update:isFullscreen", isFullscreen.value);
 };
 
 // Watch fullscreen state changes
@@ -40,6 +45,7 @@ watch(isFullscreen, (newVal, oldVal) => {
     setTimeout(() => {
       animationClass.value = "";
     }, 250);
+    adjustScale();
   }
 });
 
@@ -88,8 +94,37 @@ const formatTime = (time: number) => {
 const formattedNowTime = computed(() => formatTime(nowTime.value));
 const formattedEndTime = computed(() => formatTime(endTime.value));
 
-// Clear interval on component unmount
+// Adjust scale
+const adjustScale = async () => {
+  await nextTick();
+
+  if (!isFullscreen.value) { // Reset scale if not full screen
+    document.body.style.transform = "";
+    document.body.style.transformOrigin = "";
+    return;
+  }
+
+  if (fscontainer.value) {
+    const containerHeight = fscontainer.value.offsetHeight;
+    const windowHeight = window.innerHeight;
+    const scaleFactor = Math.min(1, windowHeight / containerHeight);
+
+    document.body.style.transform = `scale(${scaleFactor})`; // Apply scale to body
+    document.body.style.transformOrigin = "top center"; // scaling origin point
+  }
+};
+
+// Add event listeners for resize and orientation change
+onMounted(() => {
+  window.addEventListener("resize", adjustScale); // Recalculate scale when resizing window
+  window.addEventListener("orientationchange", adjustScale); // R-s-w changing screen orientation
+  adjustScale();
+});
+
+// Remove event listeners on unmount
 onUnmounted(() => {
+  window.removeEventListener("resize", adjustScale);
+  window.removeEventListener("orientationchange", adjustScale);
   if (intervalId.value !== null) {
     clearInterval(intervalId.value);
   }
@@ -102,6 +137,7 @@ const renderKey = queue.get_playerRenderKey();
 <template>
   <div class="layout">
     <div 
+      ref="fscontainer" 
       :class="[
         isFullscreen ? 'fscontainer' : 'container',
         animationClass
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
@@ -35,7 +35,7 @@
   padding: 30px;
   z-index: 30;
   width: calc(50vw - 60px);
-  height: calc(100vh - 60px);
+  height: calc(100% - 60px);
   background: #000000;
 }
 }
diff --git a/src/player-style.css b/src/player-style.css
@@ -30,7 +30,6 @@
   margin-left: 10px;
   padding: 0px 10px 0px 0px;
   width: 70vw;
-  max-width: 300px;
 }
 
 .fscontainer .info_box {
@@ -38,7 +37,6 @@
   top: 10px;
   margin: 5px;
   width: 100%;
-  max-width: 500px;
 }
 
 
@@ -150,7 +148,6 @@ svg {
 .fscontainer .control_box {
   position: relative;
   width: 100%;
-  max-width: 500px;
   display: flex;
   justify-content: center;
 }
@@ -174,7 +171,7 @@ svg {
   font-size: clamp(2px, 4vw, 20px);
   position: relative;
   top: 35px;
-  padding-bottom: 30px;
+  padding-bottom: 70px;
 }
 
 .play-pause-icon {
diff --git a/src/style.css b/src/style.css
@@ -14,6 +14,7 @@ body {
   user-select: none;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
 }
 
 /* font for language */
@@ -199,8 +200,8 @@ body {
   position: relative;
   margin-bottom: 5px;
   width: 100%;
-  max-width: 500px;
-  height: 100%;
+
+  height: auto;
   aspect-ratio: 1/1;
 }