From eee668400516b9dd17b534e2ebab62d11dd2f982 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Fri, 27 Dec 2024 18:38:27 +0300
Subject: [PATCH] added small play button overlay

---
 ui/assets/css/style.css        |  29 ++++++++++++++++++++++
 ui/components/History.vue      |  44 +++++++++------------------------
 ui/public/images/play-icon.png | Bin 0 -> 1721 bytes
 3 files changed, 41 insertions(+), 32 deletions(-)
 create mode 100644 ui/public/images/play-icon.png

diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index e655e006..634eff5d 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -213,3 +213,32 @@ hr {
   cursor: pointer;
   padding-top: 0.5em;
 }
+
+.play-overlay {
+  cursor: pointer;
+}
+
+.play-icon {
+  position: absolute;
+  z-index: 2;
+
+  width: 100px;
+  height: 100px;
+
+  background-image: url(/images/play-icon.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  cursor: pointer;
+  opacity: 0.4;
+}
+
+.play-icon:hover,
+.play-icon:focus,
+.play-active {
+  opacity: 1;
+}
diff --git a/ui/components/History.vue b/ui/components/History.vue
index 1bc77fc7..b62d415a 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -96,40 +96,20 @@
                     :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
               </button>
             </div>
-
           </header>
           <div v-if="false === hideThumbnail" class="card-image">
-            <figure class="image is-3by1" v-if="item.thumbnail">
-              <template v-if="item.status === 'finished'">
-                <a v-tooltip="`Play: ${item.title}`" :href="makeDownload(config, item, 'm3u8')"
-                  @click.prevent="playVideo(item)">
-                  <img
-                    :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)"
-                    :alt="item.title" />
-                </a>
-              </template>
-              <template v-else>
-                <NuxtLink target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`">
-                  <img
-                    :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)"
-                    :alt="item.title" />
-                </NuxtLink>
-              </template>
-            </figure>
-            <figure class="image is-3by1" v-else>
-              <template v-if="item.status === 'finished'">
-                <a v-tooltip="`Play: ${item.title}`" :href="makeDownload(config, item, 'm3u8')"
-                  @click.prevent="playVideo(item)">
-                  <img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'"
-                    :alt="item.title" />
-                </a>
-              </template>
-              <template v-else>
-                <NuxtLink target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`">
-                  <img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'"
-                    :alt="item.title" />
-                </NuxtLink>
-              </template>
+            <figure class="image is-3by1">
+              <span v-if="'finished' === item.status" @click="playVideo(item)" class="play-overlay">
+                <div class="play-icon"></div>
+                <img :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)"
+                  :alt="item.title" v-if="item.thumbnail" />
+                <img v-else src="/images/placeholder.png" :alt="item.title" />
+              </span>
+              <NuxtLink v-else target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`">
+                <img :alt="item.title" v-if="item.thumbnail"
+                  :src="config.app.url_host + config.app.url_prefix + 'thumbnail?url=' + encodePath(item.thumbnail)" />
+                <img v-else src="/images/placeholder.png" :alt="item.title" />
+              </NuxtLink>
             </figure>
           </div>
           <div class="card-content">
diff --git a/ui/public/images/play-icon.png b/ui/public/images/play-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0850e4927d52708f9e6b3fe8c9a031a03d201164
GIT binary patch
literal 1721
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
P00000NkvXXu0mjf0f#VG

literal 0
HcmV?d00001