Duration (Durée)

Le composant durée sert à indiquer sur l’image fixe d’un média (vidéo, podcast) la durée totale de celui-ci.

Usage

la Durée est une métadonnée qui a un comportement un peu particulier : elle peut changer d’apparence et de position (visuelle et dans le DOM). En effet, en fonction des cas elle peut être affichée avec les autres métadonnées ou bien sur la vignette du média. En fonction de cette position son apparence s’adaptera donc.

Cas de la liste d’articles

En liste d’articles, la durée est présente sur la photo illustrant un média. L’information n’est donc pas visible sur un média présenté sans photo.
Il n’est pas possible d’utiliser ce composant sur une vignette trop petite et donc sur les teasers ou les focus image.

Cas du détail article

En détail d’article, la durée est présente avec les autres métadonnées (source, auteur…).

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Picture (image),
composant Article-in-list (article dans une liste),
composant Focus (focus),
composant Card (carte),
composant Teaser (teaser).

Standard

Pour créer ce composant, il faut une balise <time> avec la classe su-duration et l’attribut datetime défini avec une valeur valide. Par défaut, il n’a pas d’apparence particulière.

<time class="su-duration" datetime="2m 25s">2:25</time>

En liste d’articles

Pour ajouter un badge de durée, sur une vignette dans une liste d’articles, il qu’il soit ajouté dans un parent portant la classe su-media-container.

<div class="su-media-container">
    <time class="su-duration" datetime="2m 25s">2:25</time>
</div>

En détail d’article

Dans ce cas, le fait de positionner ce composant dans un élément portant la classe su-metadata suffit à lui donner l’apparence voulue.

<div class="su-metadata">
    <time class="su-duration" datetime="2m 25s">2:25</time>
</div>

Intégré dans un article d’une liste d’article

Pour positionner la durée par-dessus la photo du média il doit être intégré sous l’élément <figure> dans le media-container.

Focus

<div class="su-row su-articles-list">
    <article class="su-col-md-8 su-articles-list-item su-focus">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-16-9 su-main-picture">
                    <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <time class="su-duration" datetime="4m 32s">4:32</time>
        </div>
    </article>
</div>

Focus image

Faute de place, la durée ne peut être affichée sur un focus image. Dans l’idéal elle devra donc être absente du DOM, mais si elle y est, elle sera masquée.

<div class="su-row su-articles-list">
    <article class="su-col-md-8 su-articles-list-item su-focus-image">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-16-9 su-main-picture">
                    <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <time class="su-duration" datetime="4m 32s">4:32</time>
        </div>
    </article>
</div>

Carte

<div class="su-row su-articles-list">
    <article class="su-col-md-8 su-articles-list-item su-card">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-16-9 su-main-picture">
                    <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <time class="su-duration" datetime="4m 32s">4:32</time>
        </div>
    </article>
</div>

Teaser standard.

Comme pour le focus image, la durée ne devrait pas être affichée sur un teaser. Mais là-aussi, si elle est quand même présente, elle sera masquée.

<div class="su-row su-articles-list">
    <article class="su-col-md-18 su-articles-list-item su-teaser">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-1-1 su-main-picture">
                    <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <time class="su-duration" datetime="4m 32s">4:32</time>
        </div>
    </article>
</div>

Teaser big

Pour ce type d’article, le badge de durée ne sera visible qu’en desktop, où la taille de la photo le permet.

<div class="su-row su-articles-list">
    <article class="su-col-md-18 su-articles-list-item su-teaser-big">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
                    <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <time class="su-duration" datetime="4m 32s">4:32</time>
        </div>
    </article>
</div>

Intégré dans un détail article

Dans un détail article, ce composant étant mêlé à d’autres métadonnées, il faut rajouter un texte expliquant sa nature. On peut donc rajouter « Durée : »

<div class="su-article">
    <div class="su-metadata">
        <span class="su-duration">Durée&nbsp;: <time datetime="2m 25s">2:25</time>
    </div>
</div>

Accessibilité

Dans une liste d’articles, il faut rajouter du contexte pour offrir la compréhension aux mal-voyants. L’attribut aria-description="Durée" permettra de le faire.

<div class="su-media-container">
    <time class="su-duration" aria-description="Durée" datetime="2m 25s">2:25</time>
</div>

Liste des classes disponibles

su-duration

Classes annexes

su-media-container (dépendant du composant Picture (image))
su-metadata (dépendant du composant Article-in-list (article dans une liste))
su-focus (dépendant du composant Focus (focus))
su-focus-image (dépendant du composant Focus (focus))
su-card (dépendant du composant Card (carte))
su-teaser (dépendant du composant Teaser (teaser))
su-teaser-big (dépendant du composant Teaser (teaser))