commit 5d25be2fca1df689251dd953c893d453780e9c6a
parent 082052776c6d4c7d5734d4868f25c9790077892e
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date: Mon, 24 Mar 2025 11:33:06 +0900
Dev 9 (#23)
* disable zoom
* add tracklist
* Dev (combine favoritelist to albumlist) (#22)
* delete vue3-cookies
* favoritelist combined to albumlist
* adjust tracklist
---------
Co-authored-by: Minerva_juppiter
Diffstat:
7 files changed, 166 insertions(+), 61 deletions(-)
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" name="hw-gs-player" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>GS Player</title>
</head>
diff --git a/src/App.vue b/src/App.vue
@@ -55,7 +55,8 @@ onBeforeUnmount(() => {
<div class="menu" :class="{ open: MenuButton }">
<ul>
<li><router-link to="/" @click="MenuButton = false">{{ $t('menu.top') }}</router-link></li>
- <li><router-link to="/favorite" @click="MenuButton = false">{{ $t('menu.tracklist') }}</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/Enquiries.vue b/src/components/Enquiries.vue
@@ -1,7 +1,6 @@
<template>
<div class="page">
<h1>お問い合わせ</h1>
- <!-- URLは仮のものです -->
<iframe class="enquiries" src="https://docs.google.com/forms/d/e/1FAIpQLSd8s1R7Tvz4ZuguqhmZS0cUHpLHmm1DJus-pwVr6LR0XYRJMA/viewform?embedded=true">読み込んでいます…</iframe>
</div>
</template>
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -2,6 +2,7 @@
import { YoutubeIframe } from '@vue-youtube/component';
import { ref, computed, onUnmounted, watch } 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';
@@ -99,70 +100,78 @@ const renderKey = queue.get_playerRenderKey();
</script>
<template>
- <div
- :class="[
- isFullscreen ? 'fscontainer' : 'container',
- animationClass
- ]"
- :key="renderKey"
- >
- <youtube-iframe
- :video-id="queue.get_nowSong().videoId"
- :player-vars="{
- autoplay: 1,
- iv_load_policy: 3,
- loop: 0,
- controls: 0,
- playsinline: 1,
- rel: 0
- }"
- ref="player"
- @ready="onReady"
- @state-change="onStateChange"
- />
-
- <div class="info_box">
- <!-- Video title -->
- <div class="title" @click="toggleFullscreen">
- {{ titleName }}
- </div>
+ <div class="layout">
+ <div
+ :class="[
+ isFullscreen ? 'fscontainer' : 'container',
+ animationClass
+ ]"
+ :key="renderKey"
+ >
+ <youtube-iframe
+ :video-id="queue.get_nowSong().videoId"
+ :player-vars="{
+ autoplay: 1,
+ iv_load_policy: 3,
+ loop: 0,
+ controls: 0,
+ playsinline: 1,
+ rel: 0
+ }"
+ ref="player"
+ @ready="onReady"
+ @state-change="onStateChange"
+ />
+
+ <div class="info_box">
+ <!-- Video title -->
+ <div class="title" @click="toggleFullscreen">
+ {{ titleName }}
+ </div>
- <!-- Time and album info -->
- <div class="time_container">
- <div class="nowtime">{{ formattedNowTime }}</div>
- <div class="endtime">{{ formattedEndTime }}</div>
- <div class="album">{{ albumTitle }}</div>
- </div>
-
- <div class="fs_album_container">
- <div class="fs_album">{{ albumTitle }}</div>
- <div class="fs_loop" @click="queue.onLoopButton()">
- <SvgIcon type="mdi" :path="queue.isLoop.value ? mdiRepeatOnce : mdiRepeatOff" />
+ <!-- Time and album info -->
+ <div class="time_container">
+ <div class="nowtime">{{ formattedNowTime }}</div>
+ <div class="endtime">{{ formattedEndTime }}</div>
+ <div class="album">{{ albumTitle }}</div>
+ </div>
+
+ <div class="fs_album_container">
+ <div class="fs_album">{{ albumTitle }}</div>
+ <div class="fs_loop" @click="queue.onLoopButton()">
+ <SvgIcon type="mdi" :path="queue.isLoop.value ? mdiRepeatOnce : mdiRepeatOff" />
+ </div>
+ <div class="fs_fav" @click="queue.event_favorite(queue.get_nowSong())">
+ <SvgIcon type="mdi" :path="queue.isFavorite.value ? mdiStarCheck : mdiStarPlusOutline" />
+ </div>
</div>
- <div class="fs_fav" @click="queue.event_favorite(queue.get_nowSong())">
- <SvgIcon type="mdi" :path="queue.isFavorite.value ? mdiStarCheck : mdiStarPlusOutline" />
+
+ <div class="fs_time_container">
+ <div class="nowtime">{{ formattedNowTime }}</div>
+ <div class="endtime">{{ formattedEndTime }}</div>
</div>
</div>
- <div class="fs_time_container">
- <div class="nowtime">{{ formattedNowTime }}</div>
- <div class="endtime">{{ formattedEndTime }}</div>
+ <div class="control_box">
+ <!-- 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>
</div>
</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>
- </div>
-
- <!-- song list
- <div class="song_list">
+ <div
+ :class="[
+ isFullscreen ? 'fstracklist-container' : 'tracklist-container',
+ animationClass
+ ]"
+ >
+ <Tracklist />
+ </div>
</div>
- -->
</template>
<style scoped>
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
@@ -0,0 +1,42 @@
+<template>
+ <div class="page">
+ <h1>Tracklist</h1>
+ <table>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Track1</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Track2</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Track3</td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td>Track4</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</template>
+
+<style scoped>
+/* default style (mobile) */
+
+/* 2column style (PC) */
+@media (min-aspect-ratio: 1/1) {
+ .fstracklist-container .page {
+ position: block;
+ top: 0;
+ padding: 30px;
+ z-index: 30;
+ width: calc(50vw - 60px);
+ height: calc(100vh - 60px);
+ background: #000000;
+}
+}
+</style>+
\ No newline at end of file
diff --git a/src/player-style.css b/src/player-style.css
@@ -115,13 +115,15 @@
.fscontainer .fs_album_container {
display: flex;
- justify-content: flex-start;
+ justify-content: space-between;
align-items: center;
+ margin-top: 4px;
+ width: 100%;
font-size: clamp(2px, calc(4vw - 1.3px), 20px);
}
.fscontainer .fs_album {
- margin-right: clamp(2px, calc(2vw), 12px);
+ margin-right: auto;
cursor: pointer;
}
@@ -134,7 +136,7 @@
.fs_loop,
.fs_fav {
cursor: pointer;
- padding-left: clamp(2px, calc(3vw), 16px);
+ padding-left: clamp(2px, 4vw, 20px);
margin-top: 4px;
}
@@ -144,6 +146,16 @@ svg {
}
+/* control box */
+.fscontainer .control_box {
+ position: relative;
+ width: 100%;
+ max-width: 500px;
+ display: flex;
+ justify-content: center;
+}
+
+
/* control button */
.play-pause-button {
background: none;
@@ -257,4 +269,43 @@ svg {
.fs_album::-webkit-scrollbar {
/* Scrollbar hidden (Chrome・Safari) */
display: none;
+}
+
+
+/* default style (mobile) */
+.layout {
+ flex: none;
+}
+
+.tracklist-container {
+ display: none;
+}
+
+.fstracklist-container {
+ display: none;
+}
+
+/* 2column style (PC) */
+@media (min-aspect-ratio: 1/1) {
+ .layout {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .fscontainer {
+ flex: none;
+ width: calc(50vw - 60px);
+ margin: 0;
+ margin-left: auto;
+ align-items: end;
+ }
+
+ .tracklist-container {
+ display: none;
+ }
+
+ .fstracklist-container {
+ display: flex;
+ flex: 1;
+ }
}
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
@@ -5,6 +5,7 @@ import Enquiries from './components/Enquiries.vue';
import Info from './components/Info.vue';
import Policy from './components/Policy.vue';
import Terms from './components/Terms.vue';
+import TrackList from './components/TrackList.vue';
const routes = [
{ path: '/', name: 'top', component: Top },
@@ -13,6 +14,7 @@ const routes = [
{ path: '/info', name: 'info', component: Info },
{ path: '/policy', name: 'policy', component: Policy },
{ path: '/terms', name: 'terms', component: Terms },
+ { path: '/tracklist', name: 'tracklist', component: TrackList },
]
const router = createRouter({
