feat: add accessibility
This commit is contained in:
@@ -162,52 +162,58 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
<?php include 'includes/sidebar.php'; ?>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<div class="main-content">
|
||||
<main class="main-content" id="main-content" role="main">
|
||||
<?php include 'includes/header.php'; ?>
|
||||
|
||||
<?php if (isset($videoNotFound)): ?>
|
||||
<!-- Message d'erreur si la vidéo n'existe pas -->
|
||||
<div class="error-message">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<h2>Vidéo non trouvée</h2>
|
||||
<section class="error-message" role="alert" aria-labelledby="error-heading">
|
||||
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
||||
<h1 id="error-heading">Vidéo non trouvée</h1>
|
||||
<p>La vidéo que vous recherchez n'existe pas ou a été supprimée.</p>
|
||||
<a href="index.php" class="btn-primary">Retour à l'accueil</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php else: ?>
|
||||
<!-- Section vidéo -->
|
||||
<div class="video-page">
|
||||
<div class="video-player-container">
|
||||
<article class="video-page" itemscope itemtype="https://schema.org/VideoObject">
|
||||
<section class="video-player-container">
|
||||
<div class="video-player">
|
||||
<iframe src="<?php echo htmlspecialchars($video['url']); ?>?warningTitle='0'" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" title="<?php echo htmlspecialchars($video['title']); ?>"></iframe>
|
||||
<iframe src="<?php echo htmlspecialchars($video['url']); ?>?warningTitle='0'"
|
||||
frameborder="0"
|
||||
allowfullscreen="allowfullscreen"
|
||||
allow="autoplay; fullscreen"
|
||||
title="Lecteur vidéo: <?php echo htmlspecialchars($video['title']); ?>"
|
||||
aria-describedby="video-description">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="video-content">
|
||||
<div class="video-primary-info">
|
||||
<h1 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h1>
|
||||
<header class="video-primary-info">
|
||||
<h1 id="video-description" class="video-title" itemprop="name"><?php echo htmlspecialchars($video['title']); ?></h1>
|
||||
|
||||
<div class="video-info">
|
||||
<div class="video-metadata">
|
||||
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
|
||||
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
|
||||
<span class="video-views"><i class="fas fa-eye" aria-hidden="true"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
|
||||
<span class="video-date"><i class="far fa-calendar-alt" aria-hidden="true"></i> <time datetime="<?php echo $video['date']; ?>"><?php echo formatDate($video['date']); ?></time></span>
|
||||
</div>
|
||||
|
||||
<div class="video-actions">
|
||||
<button class="action-button" id="share-btn">
|
||||
<i class="fas fa-share"></i>
|
||||
<button class="action-button" id="share-btn" aria-label="Partager cette vidéo">
|
||||
<i class="fas fa-share" aria-hidden="true"></i>
|
||||
<span>Partager</span>
|
||||
</button>
|
||||
<button class="action-button" id="download-btn">
|
||||
<i class="fas fa-download"></i>
|
||||
<button class="action-button" id="download-btn" aria-label="Télécharger cette vidéo">
|
||||
<i class="fas fa-download" aria-hidden="true"></i>
|
||||
<span>Télécharger</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($video['licence'])): ?>
|
||||
<div class="video-licence">
|
||||
<h4 class="licence-title">Licence</h4>
|
||||
<section class="video-licence">
|
||||
<h2 class="licence-title">Licence</h2>
|
||||
<?php
|
||||
$licenceLabels = [
|
||||
1 => "CC BY (Attribution)",
|
||||
@@ -257,36 +263,36 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
<span class="licence-label"><?php echo $licenceLabel; ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="video-secondary-info">
|
||||
<section class="video-secondary-info">
|
||||
<div class="channel-info">
|
||||
<?php
|
||||
$channelUrl = PEERTUBE_URL . '/c/' . $video['channelHandle'];
|
||||
?>
|
||||
<?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?>
|
||||
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link">
|
||||
<div class="channel-avatar-placeholder">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link" aria-label="Voir la chaîne <?php echo htmlspecialchars($video['channel']); ?>">
|
||||
<div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
|
||||
<i class="fas fa-user-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link">
|
||||
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-avatar-link" aria-label="Voir la chaîne <?php echo htmlspecialchars($video['channel']); ?>">
|
||||
<div class="channel-avatar">
|
||||
<img src="<?php echo $channelAvatar; ?>" alt="<?php echo $video['channel']; ?>">
|
||||
<img src="<?php echo $channelAvatar; ?>" alt="Avatar de la chaîne <?php echo htmlspecialchars($video['channel']); ?>">
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<div class="channel-details">
|
||||
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-name-link">
|
||||
<h3 class="channel-name"><?php echo $video['channel']; ?></h3>
|
||||
<h2 class="channel-name"><?php echo htmlspecialchars($video['channel']); ?></h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-description">
|
||||
<div class="video-description" itemprop="description">
|
||||
<?php
|
||||
// Vérifier si on a une description tronquée et si la description complète est plus longue
|
||||
$hasTruncatedDesc = !empty($video['truncatedDescription']) &&
|
||||
@@ -296,16 +302,16 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
?>
|
||||
<div class="truncated-description">
|
||||
<?php echo markdown_to_html($video['truncatedDescription']); ?>
|
||||
<button class="show-more-btn">
|
||||
<button class="show-more-btn" aria-expanded="false" aria-controls="full-description">
|
||||
<span>Voir plus</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
<i class="fas fa-chevron-down" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="full-description" style="display: none;">
|
||||
<div id="full-description" class="full-description" style="display: none;">
|
||||
<?php echo markdown_to_html($video['description']); ?>
|
||||
<button class="show-less-btn">
|
||||
<button class="show-less-btn" aria-expanded="true" aria-controls="full-description">
|
||||
<span>Voir moins</span>
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
<i class="fas fa-chevron-up" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
@@ -320,50 +326,50 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Commentaires -->
|
||||
<div class="comments-section">
|
||||
<div class="section-header">
|
||||
<section class="comments-section" aria-labelledby="comments-heading">
|
||||
<header class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<h2 class="section-title">Commentaires</h2>
|
||||
<h2 id="comments-heading" class="section-title">Commentaires</h2>
|
||||
</div>
|
||||
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="view-on-peertube">
|
||||
<i class="fas fa-external-link-alt"></i> Voir sur <?php echo PEERTUBE_DISPLAY_NAME; ?>
|
||||
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="view-on-peertube" aria-label="Voir cette vidéo sur <?php echo PEERTUBE_DISPLAY_NAME; ?>">
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i> Voir sur <?php echo PEERTUBE_DISPLAY_NAME; ?>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="comments-list">
|
||||
<?php
|
||||
$comments = getVideoComments($videoData['uuid']);
|
||||
if (!empty($comments)):
|
||||
foreach ($comments as $comment):
|
||||
?>
|
||||
<div class="comment">
|
||||
<article class="comment">
|
||||
<div class="comment-avatar">
|
||||
<?php if (isset($comment['account']['avatar']) && !empty($comment['account']['avatar']['path'])): ?>
|
||||
<img src="<?php echo PEERTUBE_URL . $comment['account']['avatar']['path']; ?>" alt="<?php echo htmlspecialchars($comment['account']['displayName']); ?>">
|
||||
<?php else: ?>
|
||||
<div class="channel-avatar-placeholder mini">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<div class="channel-avatar-placeholder mini" role="img" aria-label="Avatar par défaut">
|
||||
<i class="fas fa-user-circle" aria-hidden="true"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-header">
|
||||
<header class="comment-header">
|
||||
<span class="comment-author"><?php echo htmlspecialchars($comment['account']['displayName']); ?></span>
|
||||
<span class="comment-date"><?php echo formatDate($comment['createdAt']); ?></span>
|
||||
</div>
|
||||
<time class="comment-date" datetime="<?php echo $comment['createdAt']; ?>"><?php echo formatDate($comment['createdAt']); ?></time>
|
||||
</header>
|
||||
<div class="comment-text"><?php echo nl2br(htmlspecialchars($comment['text'])); ?></div>
|
||||
|
||||
<?php if (isset($comment['totalReplies']) && $comment['totalReplies'] > 0): ?>
|
||||
<div class="comment-replies-toggle">
|
||||
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies">
|
||||
<i class="fas fa-reply"></i> Voir les <?php echo $comment['totalReplies']; ?> réponse<?php echo $comment['totalReplies'] > 1 ? 's' : ''; ?>
|
||||
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies" aria-label="Voir les réponses sur PeerTube">
|
||||
<i class="fas fa-reply" aria-hidden="true"></i> Voir les <?php echo $comment['totalReplies']; ?> réponse<?php echo $comment['totalReplies'] > 1 ? 's' : ''; ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endforeach;
|
||||
?>
|
||||
@@ -383,19 +389,20 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-suggestions">
|
||||
<h3>Vidéos suggérées</h3>
|
||||
<aside class="video-suggestions" aria-labelledby="suggestions-heading">
|
||||
<h2 id="suggestions-heading">Vidéos suggérées</h2>
|
||||
|
||||
<?php if (!empty($suggestedVideos)): ?>
|
||||
<div class="suggestion-list">
|
||||
<?php foreach ($suggestedVideos as $suggestedVideo): ?>
|
||||
<a href="video.php?id=<?php echo $suggestedVideo['id']; ?>" class="suggested-video">
|
||||
<article class="suggested-video">
|
||||
<a href="video.php?id=<?php echo $suggestedVideo['id']; ?>" class="suggested-video-link" aria-labelledby="suggestion-title-<?php echo $suggestedVideo['id']; ?>">
|
||||
<div class="suggested-video-thumbnail">
|
||||
<img src="<?php echo $suggestedVideo['thumbnail']; ?>" alt="<?php echo $suggestedVideo['title']; ?>">
|
||||
</div>
|
||||
<div class="suggested-video-info">
|
||||
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span>
|
||||
<h4 class="suggested-video-title"><?php echo $suggestedVideo['title']; ?></h4>
|
||||
<h3 id="suggestion-title-<?php echo $suggestedVideo['id']; ?>" class="suggested-video-title"><?php echo htmlspecialchars($suggestedVideo['title']); ?></h3>
|
||||
<div class="suggested-video-channel">
|
||||
<?php
|
||||
// Vérifier si un avatar de chaîne est disponible pour la vidéo suggérée
|
||||
@@ -416,16 +423,17 @@ if (empty($videoData) || isset($videoData['error'])) {
|
||||
<span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p>Aucune vidéo suggérée disponible</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</main>
|
||||
<?php include 'includes/footer.php'; ?>
|
||||
<?php include 'includes/mobile-menu.php'; ?>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user