added small play button overlay

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;
+}

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">