From daa93f599413ab2e746272e96dada1c50f5e2d44 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 5 Nov 2023 12:19:36 +0100
Subject: [PATCH] [`media` UI] Fixed style of the Play URL modal.

---
 .../src/components/panels/Media/Header.vue       |  2 +-
 .../webapp/src/components/panels/Media/Index.vue | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
index b138797561..1bd7168f41 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
@@ -40,7 +40,7 @@
                  @status="$emit('player-status', $event)" />
 
         <button title="Play URL" @click="$emit('play-url')">
-          <i class="fa fa-plus-circle" />
+          <i class="fas fa-play" />
         </button>
       </div>
     </div>
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 0432eace86..324685880d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -18,7 +18,7 @@
                       ? selectedPlayer.status : results[selectedResult]" :selected-subtitles="selectedSubtitles"
                     :browser-filter="browserFilter" @search="search" @select-player="selectedPlayer = $event"
                     @player-status="onStatusUpdate" @torrent-add="downloadTorrent($event)"
-                    @show-subtitles="showSubtitlesModal = !showSubtitlesModal" @play-url="$refs.playUrlModal.show()"
+                    @show-subtitles="showSubtitlesModal = !showSubtitlesModal" @play-url="showPlayUrlModal"
                     @filter="browserFilter = $event" @source-toggle="sources[$event] = !sources[$event]" />
 
             <div class="body-container" :class="{'expanded-header': $refs.header?.filterVisible}">
@@ -64,7 +64,9 @@
             </div>
 
             <div class="row footer">
-              <button type="submit" :disabled="!urlPlay?.length">Play</button>
+              <button type="submit" :disabled="!urlPlay?.length">
+                <i class="fa fa-play"></i> Play
+              </button>
             </div>
           </form>
         </Modal>
@@ -309,6 +311,15 @@ export default {
       }
     },
 
+    showPlayUrlModal() {
+      this.$refs.playUrlModal.show()
+      this.$refs.playUrlInput.value = ''
+      this.$nextTick(() => {
+        this.$refs.playUrlInput.value = ''
+        this.$refs.playUrlInput.focus()
+      })
+    },
+
     async playUrl(url) {
       this.loading = true
 
@@ -456,6 +467,7 @@ export default {
     display: flex;
     justify-content: right;
     padding: 0;
+    margin-top: 1em;
   }
 }