From 8e8bd7fb9fcb1100f76b02decfd38de1c68cc349 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 5 Nov 2023 23:45:37 +0100
Subject: [PATCH] [`media UI`] Fixing/refactoring media UI.

- Fixed broken elements in the media control view.
- Fixed volume bar.
---
 .../webapp/src/components/Media/Controls.vue  | 82 ++++++++-----------
 .../http/webapp/src/components/Media/View.vue | 19 ++++-
 .../src/components/Media/VolumeSlider.vue     | 72 ++++++++++++++++
 .../src/components/elements/DropdownItem.vue  |  3 +-
 .../src/components/panels/Media/Index.vue     |  7 +-
 .../components/panels/Media/Players/Mixin.vue |  4 +
 6 files changed, 137 insertions(+), 50 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Media/VolumeSlider.vue

diff --git a/platypush/backend/http/webapp/src/components/Media/Controls.vue b/platypush/backend/http/webapp/src/components/Media/Controls.vue
index 14da132755..5ec4f0150a 100644
--- a/platypush/backend/http/webapp/src/components/Media/Controls.vue
+++ b/platypush/backend/http/webapp/src/components/Media/Controls.vue
@@ -22,15 +22,9 @@
 
     <div class="row">
       <div class="col-9 volume-container">
-        <div class="col-1">
-          <button :disabled="status.muted == null" @click="$emit(status.muted ? 'unmute' : 'mute')">
-            <i class="icon fa fa-volume-up"></i>
-          </button>
-        </div>
-        <div class="col-11 volume-slider">
-          <Slider :value="status.volume" :range="volumeRange" :disabled="status.volume == null"
-                  @mouseup="$emit('set-volume', $event.target.value)" />
-        </div>
+        <VolumeSlider :value="status.volume" :range="volumeRange" :status="status"
+          @mute="$emit('mute')" @unmute="$emit('unmute')"
+          @set-volume="$emit('set-volume', $event)" />
       </div>
 
       <div class="col-3 list-controls">
@@ -68,7 +62,7 @@
   </div>
 
   <div class="controls">
-    <div class="playback-controls mobile tablet col-2">
+    <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>
@@ -90,7 +84,7 @@
       </div>
     </div>
 
-    <div class="playback-controls desktop col-6">
+    <div class="playback-controls from desktop col-6">
       <div class="row buttons">
         <button @click="$emit('previous')" title="Play previous track" v-if="buttons_.previous">
           <i class="icon fa fa-step-backward"></i>
@@ -124,13 +118,18 @@
       </div>
     </div>
 
-    <div class="col-2 pull-right mobile tablet right-buttons">
+    <div class="col-2 pull-right until tablet right-buttons">
       <button @click="expanded = !expanded" :title="expanded ? 'Show more controls' : 'Hide extra controls'">
         <i class="fas" :class="[`fa-chevron-${expanded ? 'down' : 'up'}`]" />
       </button>
     </div>
 
-    <div class="col-3 pull-right desktop">
+    <div class="col-3 pull-right from desktop">
+      <div class="row volume-container">
+        <VolumeSlider :value="status.volume" :range="volumeRange" :status="status"
+          @mute="$emit('mute')" @unmute="$emit('unmute')"
+          @set-volume="$emit('set-volume', $event)" />
+      </div>
       <div class="row list-controls">
         <button @click="$emit('consume')" :class="{enabled: status.consume}" title="Toggle consume mode" v-if="buttons_.consume">
           <i class="icon fa fa-utensils"></i>
@@ -143,17 +142,6 @@
         </button>
       </div>
 
-      <div class="row volume-container">
-        <div class="col-2">
-          <button :disabled="status.muted == null" @click="$emit(status.muted ? 'unmute' : 'mute')">
-            <i class="icon fa fa-volume-up"></i>
-          </button>
-        </div>
-        <div class="col-10">
-          <Slider :value="status.volume" :range="volumeRange" :disabled="status.volume == null"
-                  @mouseup="$emit('set-volume', $event.target.value)" />
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -162,13 +150,26 @@
 import Utils from "@/Utils"
 import MediaUtils from "@/components/Media/Utils";
 import Slider from "@/components/elements/Slider";
+import VolumeSlider from "./VolumeSlider";
 
 export default {
-  name: "Controls",
-  components: {Slider},
+  components: {Slider, VolumeSlider},
   mixins: [Utils, MediaUtils],
-  emits: ['search', 'previous', 'next', 'play', 'pause', 'stop', 'seek', 'consume', 'random', 'repeat',
-    'set-volume', 'mute', 'unmute'],
+  emits: [
+    'consume',
+    'mute',
+    'next',
+    'pause',
+    'play',
+    'previous',
+    'random',
+    'repeat',
+    'search',
+    'seek',
+    'set-volume',
+    'stop',
+    'unmute',
+  ],
 
   props: {
     track: {
@@ -320,10 +321,6 @@ button {
       margin-right: .25em;
     }
   }
-
-  .volume-slider {
-    flex-grow: 1;
-  }
 }
 
 .controls {
@@ -332,12 +329,19 @@ button {
   display: flex;
   padding: 1em .5em;
   overflow: hidden;
+  align-items: center;
 
   .row {
     width: 100%;
     display: flex;
   }
 
+  .volume-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .track-container {
     display: flex;
     flex-direction: column;
@@ -441,25 +445,11 @@ button {
     button {
       padding: 0.5em;
     }
-
-    .volume-container {
-      align-items: center;
-      margin-top: -1.25em;
-
-      button {
-        background: none;
-      }
-    }
   }
 
   .seek-slider {
     width: 75%;
   }
-
-  .volume-slider {
-    width: 75%;
-    margin-right: .5em;
-  }
 }
 
 .time {
diff --git a/platypush/backend/http/webapp/src/components/Media/View.vue b/platypush/backend/http/webapp/src/components/Media/View.vue
index 7591061d4a..ad326d617e 100644
--- a/platypush/backend/http/webapp/src/components/Media/View.vue
+++ b/platypush/backend/http/webapp/src/components/Media/View.vue
@@ -8,7 +8,7 @@
                 @pause="$emit('pause', $event)" @stop="$emit('stop')" @previous="$emit('previous')"
                 @next="$emit('next')" @seek="$emit('seek', $event)" @set-volume="$emit('set-volume', $event)"
                 @consume="$emit('consume', $event)" @repeat="$emit('repeat', $event)" @random="$emit('random', $event)"
-                @search="$emit('search', $event)"/>
+                @search="$emit('search', $event)" @mute="$emit('mute')" @unmute="$emit('unmute')" />
     </div>
   </div>
 </template>
@@ -19,7 +19,22 @@ import Controls from "@/components/Media/Controls";
 export default {
   name: "View",
   components: {Controls},
-  emits: ['play', 'pause', 'stop', 'next', 'previous', 'set-volume', 'seek', 'consume', 'random', 'repeat', 'search'],
+  emits: [
+    'consume',
+    'mute',
+    'next',
+    'pause',
+    'play',
+    'previous',
+    'random',
+    'repeat',
+    'search',
+    'seek',
+    'set-volume',
+    'stop',
+    'unmute',
+  ],
+
   props: {
     pluginName: {
       type: String,
diff --git a/platypush/backend/http/webapp/src/components/Media/VolumeSlider.vue b/platypush/backend/http/webapp/src/components/Media/VolumeSlider.vue
new file mode 100644
index 0000000000..1b2a201507
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/Media/VolumeSlider.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="volume-slider-container">
+    <div class="col-1">
+      <button
+        :disabled="status.mute == null"
+        :title="status.mute ? 'Muted' : 'Unmuted'"
+        @click="$emit(status.mute ? 'unmute' : 'mute')">
+        <i class="icon fa fa-volume-xmark" v-if="status.mute" />
+        <i class="icon fa fa-volume-up" v-else />
+      </button>
+    </div>
+
+    <div class="col-11 volume-slider">
+      <Slider :value="status.volume" :range="volumeRange" :disabled="status.volume == null"
+              @input="$emit('set-volume', $event.target.value)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Slider from "@/components/elements/Slider";
+
+export default {
+  components: {Slider},
+  emits: ['set-volume', 'mute', 'unmute'],
+
+  props: {
+    // Volume range
+    volumeRange: {
+      type: Array,
+      default: () => [0, 100],
+    },
+
+    // Current player status
+    status: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'vars.scss';
+
+.volume-slider-container {
+  min-width: 15em;
+  display: inline-flex;
+  align-items: center;
+
+  .volume-slider {
+    margin: 0;
+    padding: 0 .5em 0 1em;
+    flex-grow: 1;
+  }
+
+  button {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+
+    &:disabled {
+      cursor: default;
+    }
+
+    &:not(:disabled):hover {
+      color: $default-hover-fg;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
index 691b15a3f7..30998a821c 100644
--- a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
+++ b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
@@ -50,11 +50,12 @@ export default {
 <style lang="scss" scoped>
 .item {
   display: flex;
+  min-width: 7.5em;
   padding: 0.75em 0.5em;
   cursor: pointer;
   align-items: center;
   color: $default-fg-2;
-  border: 0;
+  border: 0 !important;
   box-shadow: none;
 
   &:hover {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
index 324685880d..4e4611b9e6 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -5,7 +5,7 @@
 
       <MediaView :plugin-name="pluginName" :status="selectedPlayer?.status || {}" :track="selectedPlayer?.status || {}"
                  :buttons="mediaButtons" @play="pause" @pause="pause" @stop="stop" @set-volume="setVolume"
-                 @seek="seek" @search="search">
+                 @seek="seek" @search="search" @mute="toggleMute" @unmute="toggleMute">
         <main>
           <div class="nav-container">
             <Nav :selected-view="selectedView" @input="selectedView = $event" />
@@ -183,6 +183,11 @@ export default {
       await this.refresh()
     },
 
+    async toggleMute() {
+      await this.selectedPlayer.component.toggleMute(this.selectedPlayer)
+      await this.refresh()
+    },
+
     async seek(position) {
       await this.selectedPlayer.component.seek(position, this.selectedPlayer)
       await this.refresh()
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Players/Mixin.vue b/platypush/backend/http/webapp/src/components/panels/Media/Players/Mixin.vue
index 9f6bc16ce0..2dee88fd74 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Players/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Players/Mixin.vue
@@ -56,6 +56,10 @@ export default {
       return await this.request(`${this.pluginName}.set_volume`, {volume: volume})
     },
 
+    async toggleMute() {
+      return await this.request(`${this.pluginName}.mute`)
+    },
+
     async seek(position) {
       return await this.request(`${this.pluginName}.seek`, {position: position})
     },