vue-wp/vue-theme/src/components/hero.vue

<template lang="pug">
.hero.w-max.f-col(v-if="showHero")
    .hero--video.w-max(v-if="heroType === 'video'")
        iframe(
            v-if="isPlaying"
            :src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
            frameborder="0"
            allowfullscreen
        ).embedded.w-max
        .blank.f-col(v-else)
            h3(v-if="heroText") {{ heroText }}
            img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
            //- button(v-if="showPlaybutton" @click="isPlaying = true") play
            button(v-if="showPlaybutton" @click="isPlaying = true")
    .hero--image.w-max(v-else-if="heroType === 'image'")
        .hero--image--overlay.w-max.f-col
            h2.t-up.t-cntr(v-html="heroText")
        img.w-max(:src="showHero" alt="hero alt image")
    .hero--image(v-else)
        .hero--image--overlay.w-max.f-col
            div(v-html="heroText")
    //- if not hero image then heading overlay to show only in main article

</template>

<script>
import { ytThumbnail } from '@/utils/helpers'
import { mapState } from 'vuex'

export default {
    data() {
        return {
            heroHeight: 0,
            isPlaying: false
        }
    },
    computed: {
        ...mapState({
            showHero: state => state.hero.url,
            heroText: state => state.hero.text,
            heroType: state => state.hero.type,
            showPlaybutton: state => state.hero.playbutton,
        }),
        heroIdFromUrl() {
            const url = this.showHero.split('/')
            return url.pop()
        }
    },
    methods: {
        onResize() {
            this.heroHeight = this.$el.offsetWidth / 1.8
        },
        getThumbnailFromYt(url) {
            return ytThumbnail(url, 'max')
        }
    },
    mounted() {
        this.heroHeight = this.$el.offsetWidth / 1.8
        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'})
        }
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.onResize)
    },
    
}
</script>

<style lang="postcss">
@import './../sss/theme.sss'
@import './../sss/variables.sss'

.hero
    background-color: rebeccapurple
    min-height: 35%
    &--image
        &--overlay
            color: $cia_white
            position: absolute
            /* top: 30% */
            margin: 20% 0
            h2 
                /* need better responsive solution for heading size  */
                /* font-size: 1.5vh */
                color: $cia_white
                text-shadow: 1px 1px $cia_black
                max-width: 70vw
    &--video
        width: 100vw
        height: 100%

    .embedded
        min-height: 210px
        height: 100%
        
    .blank
        button 
            position: absolute
            height: $ms-8
            width: $ms-8
            background-color: rgba(170,17,0,0.4)
            border-radius: 50%
            border-width: 3px
            border-color: white
            border-style: solid
            &:after 
                content: ""
                position: absolute
                top: 20%
                left: 30%
                border-style: solid
                border-width: 1.2em 0 1.2em 2.1em
                border-color: transparent transparent transparent white

        @media (min-width: $medium)     
            button 
                height: $ms-9
                width: $ms-9
                border-width: 4px

                &:after 
                    top: 18%
                    left: 30%
                    border-width: 1.5em 0 1.5em 2.5em
            
</style>