From 74d5868a5c83a523d3cfad3b5dcb047835662726 Mon Sep 17 00:00:00 2001
From: Kevin <Kevin.Midboe@gmail.com>
Date: Mon, 15 Aug 2022 21:12:50 +0200
Subject: [PATCH] Tried setting backdrop too fast, tries after mount & api
 response (#78)

* Tried setting backdrop too fast, tries after mount & api response

* Resolved linting issues
---
 src/components/header/NavigationIcons.vue |  2 +-
 src/components/popup/Movie.vue            | 27 ++++++++++++++---------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/header/NavigationIcons.vue b/src/components/header/NavigationIcons.vue
index bd9be52..4289c38 100644
--- a/src/components/header/NavigationIcons.vue
+++ b/src/components/header/NavigationIcons.vue
@@ -5,7 +5,7 @@
       :key="_route.route"
       :route="_route"
       :active="activeRoute"
-      :useStroke="_route?.useStroke"
+      :use-stroke="_route?.useStroke"
     />
     <slot></slot>
   </ul>
diff --git a/src/components/popup/Movie.vue b/src/components/popup/Movie.vue
index e4d129a..50a620b 100644
--- a/src/components/popup/Movie.vue
+++ b/src/components/popup/Movie.vue
@@ -165,7 +165,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps } from "vue";
+  import { ref, computed, defineProps, onMounted } from "vue";
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
@@ -245,6 +245,18 @@
     requested.value = status;
   }
 
+  function setBackdrop(): void {
+    if (
+      !media.value?.backdrop ||
+      !backdropElement.value?.style ||
+      backdropElement.value?.style?.backgroundImage !== ""
+    )
+      return;
+
+    const backdropURL = `${ASSET_URL}${ASSET_SIZES[1]}${media.value.backdrop}`;
+    backdropElement.value.style.backgroundImage = `url(${backdropURL})`;
+  }
+
   function getCredits(
     type: MediaTypes.Movie | MediaTypes.Show
   ): Promise<IMediaCredits> {
@@ -289,14 +301,8 @@
       .then(() => getCredits(props.type))
       .then(credits => setCast(credits?.cast || []))
       .then(() => getRequestStatus(props.id, props.type))
-      .then(requestStatus => setRequested(requestStatus || false));
-  }
-
-  function setBackdrop(): void {
-    if (!media.value?.backdrop || !backdropElement.value?.style) return;
-
-    const backdropURL = `${ASSET_URL}${ASSET_SIZES[1]}${media.value.backdrop}`;
-    backdropElement.value.style.backgroundImage = `url(${backdropURL})`;
+      .then(requestStatus => setRequested(requestStatus || false))
+      .then(setBackdrop);
   }
 
   function sendRequest() {
@@ -318,9 +324,10 @@
 
   // On created functions
   fetchMedia();
-  setBackdrop();
   store.dispatch("torrentModule/setResultCount", null);
   // End on create functions
+
+  onMounted(setBackdrop);
 </script>
 
 <style lang="scss" scoped>