useVideoPlayer

Este composable gestiona la lógica para reproducir videos en un modal y controlar el estado de visibilidad del modal. También gestiona el comportamiento del scroll del documento cuando el modal está abierto o cerrado.

Implementación del Composable:

const root = document.documentElement.style;
const { showModal, useToggleModal } = useModal();

export function useVideoPlayer() {
  const videoURL = shallowRef("");

  /**
   * Alterna la visibilidad del modal de video y actualiza la URL del video.
   * Además, bloquea o desbloquea el scroll del documento dependiendo del estado del modal.
   *
   * @param {string} [url=''] - La URL del video que se desea reproducir.
   */
  const toogleModal = async (url: string = "") => {
    // Bloquear el scroll cuando el modal está abierto, habilitarlo cuando está cerrado
    root.overflow = showModal.value ? "auto" : "hidden";
    // Establece la URL del video
    videoURL.value = url;
    // Espera a que el DOM se actualice
    await nextTick();
    // Alterna la visibilidad del modal
    useToggleModal();
  };

  return {
    videoURL,
    toogleModal,
    showModal,
    useToggleModal,
  };
}

Descripción de las Funciones:

1. toogleModal(url: string = ''):

   • Descripción: Alterna la visibilidad del modal y establece la URL del video. Además, controla si el documento permite hacer scroll cuando el modal está abierto o cerrado.
   • Parámetro:
     • url (opcional): La URL del video a reproducir. Si no se proporciona, no se asigna ninguna URL nueva.
   • Comportamiento:
     • Bloquea el scroll del documento cuando el modal está abierto estableciendo overflow: hidden.
     • Desbloquea el scroll cuando el modal está cerrado estableciendo overflow: auto.
     • Cambia la visibilidad del modal usando useToggleModal.
     • Actualiza la URL del video y asegura que el DOM se ha actualizado antes de mostrar el modal.

2. videoURL: Es una referencia (shallowRef) que contiene la URL actual del video a reproducir.

3. showModal: Estado que indica si el modal está visible o no. Este estado es proporcionado por useModal.

4. useToggleModal: Función que alterna el estado de showModal para mostrar u ocultar el modal. Esta función también es proporcionada por useModal.

---

Uso en el Componente Vue

En este componente, se maneja una lista de tarjetas (CardTalk), donde al hacer clic en una tarjeta, se abre un modal que reproduce un video. El modal utiliza la animación de transición y controla el estado de visibilidad con showModal.

<script setup lang="ts">
import type { TalksCard } from "@/interfaces/api/talks";
import CardTalk from "@/components/alebat-talks/CardTalk.vue";

const Modal = defineAsyncComponent(
  () => import("@/components/common/Modal.vue")
);
const VideoPlayer = defineAsyncComponent(
  () => import("@/components/common/VideoPlayer.vue")
);

defineProps<{
  cards: TalksCard[];
}>();

const { videoURL, toogleModal, showModal } = useVideoPlayer();

const CLASS_MAP = ["start", "center", "end"];

const styles = (index: number) => {
  return { justifySelf: CLASS_MAP[index % CLASS_MAP.length] };
};
</script>
<template>
  <ol class="grid">
    <CardTalk
      v-for="(card, index) in cards"
      :key="index"
      v-bind="{ ...card, id: index + 1 }"
      :style="styles(index)"
      @click="toogleModal(card.video.url)"
    />
  </ol>
  <Transition name="fade">
    <Modal v-if="showModal" @hide-modal="toogleModal()">
      <VideoPlayer class="talks-video-player" :url-video="videoURL" />
    </Modal>
  </Transition>
</template>