banu-front/src/features/auth/components/studentRegister/SkillAssessmentPart6.vue

<template>
  <form class="skill-six" @submit.prevent="onSubmit">
    <div class="skill-six__grid">
      <div class="skill-six__media-col">
        <MediaRecorder
          v-model="audio"
          kind="audio"
          sub-type="audio"
          context="verification"
          :max-seconds="180"
          :error="errors.faithProductionAudio"
          @uploaded="onUploaded"
        />
      </div>
      <div class="skill-six__content-col">
        <LineTitleBlock title="مهارت‌ها و تخصص‌ها" title-en="Skills & Expertise" />
        <p class="skill-six__intro">
          لطفا ویدئو را مشاهده نمایید و در قالب صوت نظرات و تحلیل خود را بیان کرده و بفرمایید چگونه
          می‌توان از سرمایه ایمان الهی، عمل صالح تولید نمود؟
        </p>
        <div v-if="videoUrl" class="skill-six__video-wrap">
          <video :src="videoUrl" controls playsinline class="skill-six__video" />
        </div>
        <div v-else class="skill-six__video-placeholder">
          <p>ویدیویی در دسترس نیست</p>
        </div>
      </div>
    </div>

    <div class="skill-six__divider" />
    <StepActions @back="store.goToPrevStep()" />
  </form>
</template>

<script setup>
import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue'
import { STUDENT_REGISTRATION } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { useGetRegistrationVideoQuery } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { skillAssessmentPart6Schema } from '@/features/auth/schema/student-register'
import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'

const store = useStudentRegistrationStore()

const audio = ref(store.skill6.faithProductionAudio || null)

const form = ref({
  faithProductionAudio: store.skill6.faithProductionAudio || null,
  faithProductionId: store.skill6.faithProductionId || '',
})

const { validate, errors } = useYup(skillAssessmentPart6Schema)

const onUploaded = (value) => {
  form.value.faithProductionAudio = value
  form.value.faithProductionId = value?.uploadId || ''
}

const { data: media } = useGetRegistrationVideoQuery()

const videoUrl = computed(
  () =>
    media.value?.faithProductionVideoUrl || store.registrationMedia.faithProductionVideoUrl || ''
)

watch(media, (val) => {
  if (val) store.registrationMedia = { ...store.registrationMedia, ...val }
})

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  store.skill6 = { ...store.skill6, ...payload }
  store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
  store.goToNextStep()
}

store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
</script>

<style lang="scss" scoped>
.skill-six {
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    @media (min-width: 1024px) {
      grid-template-columns: 3fr 9fr;
    }
  }

  &__media-col {
    order: 2;

    @media (min-width: 1024px) {
      order: 1;
      padding: 0.5rem;
    }
  }

  &__content-col {
    order: 1;

    @media (min-width: 1024px) {
      order: 2;
      padding-inline-start: 1.25rem;
    }
  }

  &__intro {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0 0 0.75rem;
    text-align: justify;
  }

  &__video-wrap {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
  }

  &__video {
    width: 100%;
    height: auto;
    display: block;
  }

  &__video-placeholder {
    border-radius: 1rem;
    background: #f3f4f6;
    color: var(--color-thd-gray);
    padding: 2rem;
    text-align: center;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
  }

  &__divider {
    border-block-end: 1px solid var(--color-thd-gray);
    margin: 1rem 0 1.5rem;
  }
}
</style>