[Android] Add a play item to the browsable audio items

[Nicolas Pomepuy]

vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Thu Feb 22 11:12:56 2024 +0100| [06aff35902883edb6500717808ccf299f0d477a9] | committer: Nicolas Pomepuy

Add a play item to the browsable audio items

> https://code.videolan.org/videolan/vlc-android/commit/06aff35902883edb6500717808ccf299f0d477a9
---

 .../public/icons/play_item.svg                     |  1 +
 .../src/components/MediaItem.vue                   | 26 ++++++++++++++++++++++
 .../network-sharing-server/src/scss/app.scss       |  6 ++---
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/buildsystem/network-sharing-server/public/icons/play_item.svg b/buildsystem/network-sharing-server/public/icons/play_item.svg
new file mode 100644
index 0000000000..27c9f624c5
--- /dev/null
+++ b/buildsystem/network-sharing-server/public/icons/play_item.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/src/components/MediaItem.vue b/buildsystem/network-sharing-server/src/components/MediaItem.vue
index c41b3a51fa..33a4812c78 100644
--- a/buildsystem/network-sharing-server/src/components/MediaItem.vue
+++ b/buildsystem/network-sharing-server/src/components/MediaItem.vue
@@ -14,6 +14,9 @@
                 <div class="card-progress full"></div>
                 <div class="card-progress" v-bind:style="(getProgressStyle())"></div>
             </div>
+            <div class="item-play" v-show="isPlayable()" v-on:click.stop="$play(media, this.mediaType, false, false)">
+                <img class="image-button-image" :src="(`./icons/play_item.svg`)"  :title="$t('PLAY')"/>
+            </div>
         </div>
         <div class="d-flex align-items-end">
 
@@ -105,6 +108,9 @@ export default {
         isBrowse() {
             return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream')
         },
+        isPlayable() {
+            return (this.mediaType == 'album' || this.mediaType == 'artist')
+        },
         isOpenable() {
             return ['video-group', 'video-folder', 'artist', 'album'].includes(this.mediaType)
         },
@@ -182,6 +188,26 @@ export default {
     float: left;
 }
 
+.item-play {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    top: auto;
+    left: auto;
+    margin-bottom: 8px;
+    margin-right: 8px;
+    width: 32px;
+    height: 32px;
+    background-color: white;
+    border-radius: 50%;
+    padding: 4px;
+    display: flex;
+}
+
+.item-play:hover {
+    background-color: $primary-color;
+}
+
 /* animation */
 
 @keyframes slide {
diff --git a/buildsystem/network-sharing-server/src/scss/app.scss b/buildsystem/network-sharing-server/src/scss/app.scss
index 45ed28f36a..cc6c488ff0 100644
--- a/buildsystem/network-sharing-server/src/scss/app.scss
+++ b/buildsystem/network-sharing-server/src/scss/app.scss
@@ -211,10 +211,9 @@ body {
   border: none;
 }
 
-//medias
+//medias 
 
 .media-overlay {
-  visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 0;
@@ -265,8 +264,7 @@ body {
 }
 
 .media-img-list-tr:hover .media-overlay,
-.audio-img-container:hover .media-overlay {
-  visibility: visible;
+.media-overlay:hover {
   opacity: 1;
 }