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

<template lang="pug">
.hero.w-max.f-col(v-if="heroUrl && !loading")
    .tint.w-max
    // youTube thumb with text and embedded video
    .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(heroUrl)" alt="hero youTube image")
            button(v-if="showPlaybutton" @click="isPlaying = true").z-top
    // Featured image with text
    .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="heroUrl" alt="hero alt image")
    // Blank just text
    .hero--image(v-else)
        .hero--image--overlay.w-max.f-col
            div(v-html="heroText")

.hero.loading.w-max.f-col(v-else-if="heroUrl && loading")
    .tint.w-max
    p loading... show hero: {{heroUrl}}
</template>

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

export default {
    data() {
        return {
            heroHeight: 0,
            isPlaying: false,
        }
    },
    computed: {
        ...mapState({
            heroUrl: state => state.hero.url,
            heroText: state => state.hero.text,
            loading: state => state.loading,
            heroType: state => state.hero.type,
            showPlaybutton: state => state.hero.playbutton,
        }),
        heroIdFromUrl() {
            const url = this.heroUrl.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.heroUrl) 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
    min-height: 54vw
    position: relative
    overflow: hidden
    justify-content: flex-start !important
    &.loading
        justify-content: center !important
    .tint
        position: absolute
        height: 100%
        background-color: #00000055
        z-index: 0

    &--image
        min-width: 360px
        max-height: 50vh
        img
            position: relative
            min-width: 100vw
            height: auto
            z-index: -1
        &--overlay
            position: absolute
            height: 100%
            width: 100vw
            right: 0
            left: 0
            overflow: clip
            h2
                font-size: $ms-2
                margin: 0
                color: $cia_white
                text-shadow: 1px 1px $cia_black
                max-width: 90vw
            p 
                display: none
            a 
                color: inherit 
                text-decoration: none

    &--video
        width: 100vw
        height: 100%

    .embedded
        /* min-height: 25vh */
        min-height: 54vw
        height: 100%
        position: relative
        z-index: 10002

    .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.5)
            border-radius: 50%
            border: 2px white solid
            &:hover
                background-color: rgba(170,17,0,0.8)
            &:after
                content: ""
                position: absolute
                top: 19%
                left: 31%
                border-style: solid
                border-width: 1em 0 1em 1.6em
                border-color: transparent transparent transparent rgba(255, 255, 255, 0.7)

@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
        /* min-height: 50vh */
        .embedded
            /* min-height: 50vh */
            min-height: 54vw
        .blank
            button
                &:after
                    top: 19%
                    left: 34%
                    border-width: 1.4em 2.2em 1.5em
        &--image
            &--overlay
                h2
                    font-size: 4vw
                    margin-bottom: $ms--7
                    max-width: 70vw
                p 
                    display: block
                    font-size: $ms--5
</style>