From ca35be9dd115fe60b62715be3619fe88ec2f52bd Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Sun, 24 Dec 2023 10:50:25 +0100
Subject: [PATCH] mobile improvements

---
 src/components/Player/Bar.vue      | 14 ++++++++++++--
 src/components/Player/Controls.vue | 12 +++++++++---
 src/components/Player/Infos.vue    | 10 ++++++++--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/Player/Bar.vue b/src/components/Player/Bar.vue
index 030f70a..3c81298 100644
--- a/src/components/Player/Bar.vue
+++ b/src/components/Player/Bar.vue
@@ -4,8 +4,8 @@
 		<ProgressBar v-if="player.loaded" />
 		<div v-if="player.loaded" class="player">
 			<img :src="player.episode.episodeImage">
-			<Infos />
-			<Controls />
+			<Infos class="infos" />
+			<Controls class="controls" />
 			<Timer class="timer" />
 			<Volume class="volume" />
 		</div>
@@ -63,4 +63,14 @@ export default {
 	.volume {
 		width: 10%;
 	}
+
+	@media only screen and (max-width: 768px) {
+		.infos {
+			flex: 2;
+		}
+
+		.timer, .volume {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/components/Player/Controls.vue b/src/components/Player/Controls.vue
index 58c2c24..c620226 100644
--- a/src/components/Player/Controls.vue
+++ b/src/components/Player/Controls.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="controls">
 		<PauseButton v-if="!player.paused"
-			class="pointer"
+			class="pointer pause"
 			:size="50"
 			@click="$store.dispatch('player/pause')" />
 		<PlayButton v-if="player.paused"
-			class="pointer"
+			class="pointer play"
 			:size="50"
 			@click="$store.dispatch('player/play')" />
-		<StopButton class="pointer"
+		<StopButton class="pointer stop"
 			:size="30"
 			@click="$store.dispatch('player/stop')" />
 	</div>
@@ -42,4 +42,10 @@ export default {
 	.pointer {
 		cursor: pointer;
 	}
+
+	@media only screen and (max-width: 768px) {
+		.stop {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/components/Player/Infos.vue b/src/components/Player/Infos.vue
index 8d883cd..cba8d9c 100644
--- a/src/components/Player/Infos.vue
+++ b/src/components/Player/Infos.vue
@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<a :href="player.episode.episodeLink" target="_blank">
+		<a class="episode" :href="player.episode.episodeLink" target="_blank">
 			<strong>{{ player.episode.episodeName }}</strong>
 		</a>
-		<router-link :to="player.podcastUrl">
+		<router-link class="podcast" :to="player.podcastUrl">
 			<i>{{ player.episode.podcastName }}</i>
 		</router-link>
 	</div>
@@ -27,4 +27,10 @@ export default {
 		justify-content: center;
 		width: 40%;
     }
+
+	@media only screen and (max-width: 768px) {
+		.podcast {
+			display: none;
+		}
+	}
 </style>