Transcription - DsfrTranscription

🏅 La documentation sur la transcription sur le DSFR

La story sur la transcription sur le storybook de VueDsfr

🌟 Introduction

Le composant DsfrTranscription est conçu pour afficher la transcription du contenu d'une vidéo. Il permet aux utilisateurs d'accéder facilement au texte de la vidéo, offrant ainsi une meilleure accessibilité. Le composant peut afficher la transcription dans une section extensible ou dans une fenêtre modale pour une lecture plus confortable.

Le DsfrTranscription peut afficher la transcription dans une section extensible ou la charger dans une fenêtre modale grâce à l'utilisation du composant DsfrModal et du Teleport pour un rendu à l'extérieur de la hiérarchie DOM parent.

📐 Structure

• <DsfrTranscription> : Le composant principal.
  • Contient un bouton pour afficher ou masquer la transcription.
  • Affiche la transcription dans une section extensible ou une fenêtre modale.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
id	string	ID unique pour le composant, utilisé pour l'accessibilité.	getRandomId('transcription')
title	string	Titre de la transcription.	'Titre de la vidéo'
content	string	Contenu de la transcription.	'Transcription du contenu de la vidéo'

📡 Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

• default : Slot pour insérer du contenu personnalisé à la place de la transcription par défaut.

📝 Exemples

Démo

Code de la démo

<script lang="ts" setup>
import DsfrTranscription from '../DsfrTranscription.vue'

const title = 'Titre de la transcription'
const content = 'Contenu de la transcription'
</script>

<template>
  <DsfrTranscription
    :title="title"
    :content="content"
  />
</template>

⚙️ Code source du composant

DsfrTranscription.vue

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import DsfrModal from '../DsfrModal/DsfrModal.vue'

import type { DsfrTranscriptionProps } from './DsfrTranscription.types'

export type { DsfrTranscriptionProps }

const props = withDefaults(defineProps<DsfrTranscriptionProps>(), {
  id: () => getRandomId('transcription'),
  title: 'Titre de la vidéo',
  content: 'Transcription du contenu de la vidéo',
})

const {
  collapse,
  collapsing,
  cssExpanded,
  doExpand,
  onTransitionEnd,
} = useCollapsable()

const opened = ref(false)
const expanded = ref(false)

const modalId = computed(() => {
  return `fr-transcription__modal-${props.id}`
})
const collapseId = computed(() => {
  return `fr-transcription__collapse-${props.id}`
})

watch(expanded, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    doExpand(newValue)
  }
})
</script>

<template>
  <div class="fr-transcription">
    <button
      class="fr-transcription__btn"
      :aria-expanded="expanded"
      :aria-controls="collapseId"
      @click="expanded = !expanded"
    >
      Transcription
    </button>
    <div
      :id="collapseId"
      ref="collapse"
      class="fr-collapse"
      :class="{ 'fr-collapse--expanded': cssExpanded, 'fr-collapsing': collapsing }"
      @transitionend="onTransitionEnd(expanded)"
    >
      <dialog
        :id="modalId"
        class="fr-modal"
        role="dialog"
        :aria-labelledby="`${modalId}-title`"
      >
        <div class="fr-container fr-container--fluid fr-container-md">
          <div class="fr-grid-row fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
              <div class="fr-modal__body">
                <div class="fr-modal__header">
                  <button
                    class="fr-btn--close fr-btn"
                    :aria-controls="modalId"
                    title="Fermer"
                  >
                    Fermer
                  </button>
                </div>
                <div class="fr-modal__content">
                  <h1
                    :id="`${modalId}-title`"
                    class="fr-modal__title"
                  >
                    {{ title }}
                  </h1>
                  {{ content }}
                </div>
                <div class="fr-transcription__footer">
                  <div class="fr-transcription__actions-group">
                    <button
                      class="fr-btn fr-btn--fullscreen"
                      :aria-controls="modalId"
                      data-fr-opened="false"
                      title=""
                      @click="opened = true"
                    >
                      Agrandir
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dialog>
    </div>
    <Teleport to="body">
      <DsfrModal
        :title="title"
        :opened="opened"
        @close="opened = false"
      >
        <slot>
          {{ content }}
        </slot>
      </DsfrModal>
    </Teleport>
  </div>
</template>

DsfrTranscription.types.ts

export type DsfrTranscriptionProps = {
  id?: string
  title?: string
  content?: string
}