From 3ff963f0076627e319b1390671dba6bd1bf4226f Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Mon, 25 Nov 2019 23:11:59 +0100
Subject: [PATCH] Implemented download activity overlay on movielistitems if
 progress movie object key exists.

---
 src/components/MoviesListItem.vue | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/MoviesListItem.vue b/src/components/MoviesListItem.vue
index aa8364d..a78b01d 100644
--- a/src/components/MoviesListItem.vue
+++ b/src/components/MoviesListItem.vue
@@ -6,6 +6,11 @@
       <figure class="movies-item__poster">
         <img v-if="!noImage" class="movies-item__img" src="~assets/placeholder.png" v-img="poster()" alt="">
         <img v-if="noImage" class="movies-item__img is-loaded" src="~assets/no-image.png" alt="">
+
+        <div v-if="movie.download" class="progress">
+          <progress :value="movie.download.progress" max="100"></progress>
+          <span>{{ movie.download.state }}: {{ movie.download.progress }}%</span>
+        </div>
       </figure>
       <div class="movies-item__content">
         <p class="movies-item__title">{{ movie.title }}</p>
@@ -115,3 +120,46 @@ export default {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+
+.progress {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.8rem;
+
+  > progress {
+    width: 95%;
+  }
+
+  > span {
+    position: absolute;
+    font-size: 1rem;
+    line-height: 1.4rem;
+    color: $white;
+  }
+
+  progress {
+    border-radius: 4px;
+    height: 1.4rem;
+  }
+  progress::-webkit-progress-bar {
+    background-color: rgba($black, 0.55);
+    border-radius: 4px;
+  }
+  progress::-webkit-progress-value {
+    background-color: $green-70;
+    border-radius: 4px;
+
+  }
+  progress::-moz-progress-bar {
+    /* style rules */
+    background-color: green;
+  }
+}
+</style>
\ No newline at end of file