From a939cb648c291d162c9faba9a3aa21de1ddd1571 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 6 Nov 2023 21:22:35 +0100
Subject: [PATCH] [`media` UI] Extracted `PlayPauseButton` into its own
 component.

---
 .../webapp/src/components/Media/Controls.vue  | 16 +++------
 .../src/components/Media/PlayPauseButton.vue  | 33 +++++++++++++++++++
 .../http/webapp/src/style/themes/light.scss   |  1 +
 3 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Media/PlayPauseButton.vue

diff --git a/platypush/backend/http/webapp/src/components/Media/Controls.vue b/platypush/backend/http/webapp/src/components/Media/Controls.vue
index 36db1d6243..2692f4714a 100644
--- a/platypush/backend/http/webapp/src/components/Media/Controls.vue
+++ b/platypush/backend/http/webapp/src/components/Media/Controls.vue
@@ -38,11 +38,7 @@
 
   <div class="controls">
     <div class="playback-controls until tablet col-2">
-      <button @click="$emit(status.state === 'play' ? 'pause' : 'play')"
-              :title="status.state === 'play' ? 'Pause' : 'Play'">
-        <i class="icon play-pause fa fa-pause" v-if="status.state === 'play'"></i>
-        <i class="icon play-pause fa fa-play" v-else></i>
-      </button>
+      <PlayPauseButton :status="status" @play="$emit('play')" @pause="$emit('pause')" />
     </div>
 
     <div class="track-container col-s-9 col-m-9 col-l-3">
@@ -64,11 +60,7 @@
         <button @click="$emit('previous')" title="Play previous track" v-if="buttons_.previous">
           <i class="icon fa fa-step-backward"></i>
         </button>
-        <button @click="$emit(status.state === 'play' ? 'pause' : 'play')"
-                :title="status.state === 'play' ? 'Pause' : 'Play'">
-          <i class="icon play-pause fa fa-pause" v-if="status.state === 'play'"></i>
-          <i class="icon play-pause fa fa-play" v-else></i>
-        </button>
+        <PlayPauseButton :status="status" @play="$emit('play')" @pause="$emit('pause')" />
         <button @click="$emit('stop')" v-if="buttons_.stop && status.state !== 'stop'" title="Stop playback">
           <i class="icon fa fa-stop"></i>
         </button>
@@ -105,11 +97,12 @@
 import Utils from "@/Utils"
 import MediaUtils from "@/components/Media/Utils";
 import ExtraControls from "./ExtraControls";
+import PlayPauseButton from "./PlayPauseButton";
 import ProgressBar from "./ProgressBar";
 import VolumeSlider from "./VolumeSlider";
 
 export default {
-  components: {ExtraControls, ProgressBar, VolumeSlider},
+  components: {ExtraControls, PlayPauseButton, ProgressBar, VolumeSlider},
   mixins: [Utils, MediaUtils],
   emits: [
     'consume',
@@ -316,7 +309,6 @@ button {
     }
 
     .buttons {
-      height: 50%;
       margin-bottom: .5em;
       align-items: center;
     }
diff --git a/platypush/backend/http/webapp/src/components/Media/PlayPauseButton.vue b/platypush/backend/http/webapp/src/components/Media/PlayPauseButton.vue
new file mode 100644
index 0000000000..7e09efd712
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Media/PlayPauseButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <button @click="$emit(status.state === 'play' ? 'pause' : 'play')"
+          :title="status.state === 'play' ? 'Pause' : 'Play'">
+    <i class="icon play-pause fa fa-pause" v-if="status.state === 'play'"></i>
+    <i class="icon play-pause fa fa-play" v-else></i>
+  </button>
+</template>
+
+<script>
+export default {
+  emits: ['play', 'pause'],
+  props: {
+    status: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+button {
+  font-size: 1.75em;
+  background: transparent;
+  color: $play-btn-fg;
+  padding: 0 !important;
+  border: none;
+
+  &:hover {
+    color: $play-btn-hover-fg;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index 4254e270ac..4271627144 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -152,6 +152,7 @@ $input-icon-hover-border: 1px solid rgba(159, 180, 152, 0.83);
 
 //// Media elements
 $play-btn-fg: #27ee5e !default;
+$play-btn-hover-fg: #5cfd88 !default;
 
 //// Dropdown element
 $dropdown-bg: rgb(241, 243, 242) !default;