paimaide/src/components/TutorialModal.vue

<template>
    <ion-modal
        :is-open="show"
        ref="modalRef"
        class="open-modal"
        @didDismiss="show = false"
        :enter-animation="enterAnimation"
        :leave-animation="leaveAnimation"
    >
        <ion-content>
            <ion-header>
                <ion-toolbar>
                    <ion-buttons slot="end">
                        <ion-button @click="dismiss()">{{
                            showClose ? $t('common.close') : $t('common.skip')
                        }}</ion-button>
                    </ion-buttons>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <video
                    ref="videoRef"
                    class="video"
                    webkit-playsinline="true"
                    x5-video-player-type="h5"
                    x5-video-orientation="portraint"
                    autoplay
                    loop
                    controls
                >
                    <source
                        src="https://paimaide.s3.ap-northeast-1.amazonaws.com/video/2023-01-30-07-43-43NAoUVgVk.mp4"
                        type="video/mp4"
                    />
                </video>
            </ion-content>

            <!-- <van-button class="back" v-if="showClose" round @click="show = false">{{ $t('common.close') }}</van-button>
            <van-button class="back" v-else round @click="show = false">{{ $t('common.skip') }}</van-button> -->
        </ion-content>
    </ion-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createAnimation } from '@ionic/vue'

const show = ref(false)
const modalRef = ref(false)
const videoRef = ref(false)
const showClose = ref(true)

function dismiss() {
    modalRef.value.$el.dismiss()
}

const enterAnimation = baseEl => {
    const root = baseEl.shadowRoot

    const backdropAnimation = createAnimation()
        .addElement(root.querySelector('ion-backdrop'))
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)')

    const wrapperAnimation = createAnimation()
        .addElement(root.querySelector('.modal-wrapper'))
        .keyframes([
            { offset: 0, opacity: '0', transform: 'scale(0)' },
            { offset: 1, opacity: '0.99', transform: 'scale(1)' }
        ])

    return createAnimation()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation])
}

const leaveAnimation = baseEl => {
    return enterAnimation(baseEl).direction('reverse')
}

function init() {
    showClose.value = true
    show.value = true
}

defineExpose({
    init
})
</script>

<style lang="less" scoped>
.video {
    width: 100vw;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.back {
    position: fixed;
    right: 30px;
    top: calc(var(--ion-safe-area-top) + 30px);
    z-index: 999;
    width: 60px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.1);
    border-width: 0;
    color: #fff;
}
</style>