Improve history status display and added button to play the video incase thumbnail is hidden.

ui/components/History.vue

@@ -86,6 +86,10 @@
             </div>
 
             <div class="card-header-icon">
+              <a v-if="hideThumbnail && 'finished' === item.status" href="#" @click.prevent="playVideo(item)"
+                v-tooltip="'Play video.'">
+                <span class="icon"><i class="fa-solid fa-play" /></span>
+              </a>
               <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
                 <span class="icon"><i class="fa-solid fa-copy" /></span>
               </a>
@@ -118,11 +122,6 @@
           </div>
           <div class="card-content">
             <div class="columns is-mobile is-multiline">
-              <div class="column is-12" v-if="item.live_in">
-                <span class="has-text-info">
-                  Live stream is scheduled to start at {{ moment(item.live_in).format() }}
-                </span>
-              </div>
               <div class="column is-12" v-if="item.error">
                 <span class="has-text-danger">{{ item.error }}</span>
               </div>
@@ -130,23 +129,16 @@
                 <span class="has-text-danger">{{ item.msg }}</span>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow">
-                <span v-if="!item.live_in && !item.is_live">
+                <span class="icon-text">
-                  <span class="icon-text">
+                  <span class="icon" :class="setIconColor(item)"><i :class="setIcon(item)" /></span>
-                    <span class="icon"
+                  <span>{{ setStatus(item) }}</span>
-                      :class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
-                      <i :class="setIcon(item)" />
-                    </span>
-                    <span v-if="item.status == 'finished' && item.is_live">Live Ended</span>
-                    <span v-else>{{ ucFirst(item.status) }}</span>
-                  </span>
                 </span>
-                <span v-else>
+              </div>
-                  <span class="icon-text">
+              <div class="column is-half-mobile has-text-centered is-text-overflow"
-                    <span class="icon has-text-info">
+                v-if="item.live_in && 'not_live' === item.status">
-                      <i class="fa-solid fa-calendar" />
+                <span :date-datetime="item.live_in" class="user-hint"
-                    </span>
+                  v-tooltip="'Starts at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
-                    <span>Live</span>
+                  {{ moment(item.live_in).fromNow() }}
-                  </span>
                 </span>
               </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow">
@@ -155,13 +147,6 @@
                   {{ moment(item.datetime).fromNow() }}
                 </span>
               </div>
-              <div class="column is-half-mobile has-text-centered is-text-overflow"
-                v-if="item.live_in && item.status != 'finished'">
-                <span :date-datetime="item.live_in"
-                  v-tooltip="'Starts at: ' + moment(item.live_in).format('YYYY-M-DD H:mm Z')">
-                  {{ moment(item.live_in).fromNow() }}
-                </span>
-              </div>
               <div class="column is-half-mobile has-text-centered is-text-overflow" v-if="item.file_size">
                 {{ formatBytes(item.file_size) }}
               </div>
@@ -400,25 +385,61 @@ const clearIncomplete = () => {
 }
 
 const setIcon = item => {
-  if (item.status === 'finished' && item.is_live) {
+  if ('finished' === item.status) {
-    return 'fa-solid fa-globe'
+    return item.is_live ? 'fa-solid fa-globe' : 'fa-solid fa-circle-check'
   }
 
-  if (item.status === 'finished') {
+  if ('error' === item.status) {
-    return 'fa-solid fa-circle-check'
-  }
-
-  if (item.status === 'error') {
     return 'fa-solid fa-circle-xmark'
   }
 
-  if (item.status === 'cancelled') {
+  if ('cancelled' === item.status) {
     return 'fa-solid fa-eject'
   }
 
+  if ('not_live' === item.status) {
+    return 'fa-solid fa-hourglass-half fa-spin'
+  }
+
   return 'fa-solid fa-circle'
 }
 
+const setIconColor = item => {
+  if (item.status === 'finished') {
+    return 'has-text-success'
+  }
+
+  if ('not_live' === item.status) {
+    return 'has-text-info'
+  }
+
+  if ('cancelled' === item.status) {
+    return 'has-text-warning'
+  }
+
+  return 'has-text-danger'
+}
+
+const setStatus = item => {
+  if ('finished' === item.status) {
+    return item.is_live ? 'Live Ended' : 'Completed'
+  }
+
+  if ('error' === item.status) {
+    return 'Error'
+  }
+
+  if ('cancelled' === item.status) {
+    return 'User Cancelled'
+  }
+
+  if ('not_live' === item.status) {
+    return 'Live Stream'
+  }
+
+  return item.status
+}
+
 const requeueIncomplete = () => {
   if (false === confirm('Are you sure you want to re-queue all incomplete downloads?')) {
     return false