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

<template lang="pug">
.hero.w-max.f-col(v-if="showHero")
    .tint
    .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)
            .hero--image--overlay.w-max.f-col
                h2.t-up.t-cntr(v-if="heroText") {{ heroText }}
            img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
            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">
// prettier-ignore
@import './../sss/theme.sss'
@import './../sss/variables.sss'

.hero
    /* background-color: rebeccapurple */
    min-height: 25vh
    position: relative
    overflow: hidden
    .tint
        position: absolute
        height: 100%
        width: 100%
        background-color: #00000055

    &--image
        &--overlay
            /* color: $cia_white */
            position: absolute
            margin: 19% 0
            h2 
                /* need better responsive solution for heading size  */
                font-size: 3vw
                color: $cia_white
                text-shadow: 1px 1px $cia_black
                max-width: 70vw
    &--video
        width: 100vw
        height: 100%

    .embedded
        min-height: 25vh
        height: 100%
        
    .blank
        position: absolute
        height: inherit
        width: inherit

        button 
            position: absolute
            min-height: $ms-7
            min-width: $ms-7
            background-color: rgba(170,17,0,0.4)
            border-radius: 50%
            border: 2px white solid
            &:hover 
                border: 2px #DDD solid
                background-color: rgba(170,170,170,0.7)
            &:after 
                content: ""
                position: absolute
                top: 20%
                left: 35%
                border-style: solid
                border-width: 1em 0 1em 1.6em
                border-color: transparent transparent transparent white

@media (min-width: $medium)     
    button 
        height: $ms-9
        width: $ms-9
        border-width: 3px
        &:after 
            top: 18%
            left: 30%
            border-width: 1.5em 0 1.5em 2.5em

    .hero .embedded
        min-height: 70vh
    
</style>