:bug: #51 | clearing and resetting hero for every page/post load

vue-theme/src/components/hero.vue

@@ -1,14 +1,17 @@
 <template lang="pug">
 .hero.f-col(v-if="showHero")
-    iframe(
-        v-if="isPlaying"
-        :src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
-        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope"
-        allowfullscreen
-    ).embedded
-    .blank.f-col(v-else)
-        h3(v-if="heroText") {{ heroText }}
-        button(v-if="showPlaybutton" @click="isPlaying = true") play
+    .hero--video(v-if="heroType === 'video'")
+        iframe(
+            v-if="isPlaying"
+            :src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
+            frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope"
+            allowfullscreen
+        ).embedded
+        .blank.f-col(v-else)
+            h3(v-if="heroText") {{ heroText }}
+            button(v-if="showPlaybutton" @click="isPlaying = true") play
+    .hero--image(v-else)
+        img(:src="showHero" alt="hero image")
 </template>
 
 <script>
@@ -25,9 +28,11 @@ export default {
         ...mapState({
             showHero: state => state.hero.url,
             heroText: state => state.hero.text,
+            heroType: state => state.hero.type,
             showPlaybutton: state => state.hero.playbutton,
         }),
         heroIdFromUrl() {
+            console.log()
             const url = this.showHero.split('/')
             return url.pop()
         }
@@ -42,7 +47,14 @@ export default {
         this.$nextTick(() => { window.addEventListener('resize', this.onResize) })
     },
     watch: {
+        $route() {
+            console.log('remounting hero')
+            console.log(this.$store)
+            // Clear the hero between pages
+            this.$store.commit('CLEAR_HERO')
+        },
         heroHeight() {
+            if(!this.showHero) return
             Object.assign(this.$el.style, {height: this.heroHeight + 'px'})
         }
     },

vue-theme/src/pages/single.vue

@@ -148,9 +148,12 @@ export default {
          * @param {object} posts
          */
         checkAndSetHero(post) {
-            if(!post || !post.hero) return
-
-            const json = JSON.parse(post.hero)
+            if(!post) return
+            const json = { url: post.featured, heroType: 'image' }
+            if(post.hero && JSON.parse(post.hero).url) {
+                json = JSON.parse(post.hero)
+                json.heroType = 'video'
+            }
             this.$store.commit('SET_HERO', json)
         },
 

vue-theme/src/store/index.js

@@ -20,7 +20,8 @@ const debug = process.env.NODE_ENV !== 'production'
 const state = {
     title: wp.site_name,
     hero: {
-        url: 'http://sample-image-url/',
+        url: null,
+        type: null,
         text: 'sample hero text',
         playbutton: true,
     },
@@ -31,13 +32,24 @@ const state = {
 const mutations = {
     SET_HERO(state, hero) {
         if (!hero) return
-
+        console.log(hero)
         if (hero.url) {
             state.hero.text = state.hero.url = hero.url
+            state.hero.type = hero.type
+
+            state.hero.playbutton = hero.type === 'video' ? true : false
         } else {
             state.hero.text = hero
         }
     },
+    CLEAR_HERO(state) {
+        state.hero = {
+            url: null,
+            type: null,
+            text: 'sample hero text',
+            playbutton: false,
+        }
+    },
     SET_GALLERY(state, idList) {
         state.gallery = idList
     },