ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add accessibility

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-07-22 11:54:05 +04:00
parent d40bd43d7b
commit 65b8753c82
5 changed files with 217 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+45
View File
@@ -5,6 +5,19 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Accessibilité - Classes utilitaires */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
:root { :root {
--primary-red: #FF0000; --primary-red: #FF0000;
--primary-green: #008000; --primary-green: #008000;
@@ -42,6 +55,38 @@ a {
color: var(--text-color); color: var(--text-color);
} }
/* Amélioration du focus pour l'accessibilité */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--primary-red);
outline-offset: 2px;
border-radius: 2px;
}
/* Support pour les préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Support pour le contraste élevé */
@media (prefers-contrast: high) {
:root {
--text-color: #000000;
--primary-red: #CC0000;
--card-bg: #FFFFFF;
--sidebar-bg: #F0F0F0;
--tag-bg: #E8E8E8;
--search-bg: #D0D0D0;
}
}
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
includes/header.php
+34 -22
View File
@@ -1,38 +1,50 @@
<!-- Header avec barre de recherche et icônes --> <!-- Header avec barre de recherche et icônes -->
<div class="header"> <header class="header" role="banner">
<div class="search-container"> <div class="search-container">
<form action="recherche.php" method="get"> <form action="recherche.php" method="get" role="search" aria-label="Recherche de vidéos">
<input type="text" name="q" placeholder="Rechercher..."> <label for="search-input" class="sr-only">Rechercher des vidéos</label>
<button type="submit"><i class="fas fa-search"></i></button> <input type="text" id="search-input" name="q" placeholder="Rechercher..." aria-describedby="search-help">
<button type="submit" aria-label="Lancer la recherche">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
<div id="search-help" class="sr-only">Tapez vos mots-clés pour rechercher des vidéos</div>
</form> </form>
</div> </div>
<div class="social-icons"> <nav class="social-icons" aria-label="Réseaux sociaux">
<a target="_blank" rel="me noreferrer" href="<?php echo MASTODON_URL; ?>" class="icon-button"><i class="fab fa-mastodon icon-mastodon"></i></a> <a target="_blank" rel="me noreferrer" href="<?php echo MASTODON_URL; ?>" class="icon-button" aria-label="Suivre sur Mastodon">
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button"><i class="fab fa-instagram icon-instagram"></i></a> <i class="fab fa-mastodon icon-mastodon" aria-hidden="true"></i>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button"><i class="fab fa-tiktok icon-tiktok"></i></a> </a>
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button" aria-label="Suivre sur Instagram">
<i class="fab fa-instagram icon-instagram" aria-hidden="true"></i>
</a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button" aria-label="Suivre sur TikTok">
<i class="fab fa-tiktok icon-tiktok" aria-hidden="true"></i>
</a>
<div class="more-social-container"> <div class="more-social-container">
<a href="#" class="icon-button more-social-toggle"><i class="fas fa-ellipsis-h"></i></a> <button type="button" class="icon-button more-social-toggle" aria-expanded="false" aria-controls="social-dropdown" aria-label="Voir plus de réseaux sociaux">
<div class="more-social-dropdown"> <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item"> </button>
<i class="fab fa-facebook icon-facebook"></i> Facebook <div id="social-dropdown" class="more-social-dropdown" role="menu">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item" role="menuitem">
<i class="fab fa-facebook icon-facebook" aria-hidden="true"></i> Facebook
</a> </a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item"> <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item" role="menuitem">
<i class="fab fa-youtube icon-youtube"></i> YouTube <i class="fab fa-youtube icon-youtube" aria-hidden="true"></i> YouTube
</a> </a>
<a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>" class="more-social-item"> <a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>" class="more-social-item" role="menuitem">
<i class="fab fa-x-twitter icon-x"></i> X <i class="fab fa-x-twitter icon-x" aria-hidden="true"></i> X
</a> </a>
</div> </div>
</div> </div>
</div> </nav>
<div class="action-icons"> <div class="action-icons">
<button id="install-pwa" class="icon-button install-pwa-button" style="display: none;" title="Installer l'application"> <button id="install-pwa" class="icon-button install-pwa-button" style="display: none;" aria-label="Installer l'application">
<i class="fas fa-download"></i> <i class="fas fa-download" aria-hidden="true"></i>
</button> </button>
<button class="mobile-menu-toggle"> <button class="mobile-menu-toggle" aria-expanded="false" aria-controls="mobile-menu" aria-label="Ouvrir le menu de navigation">
<i class="fas fa-bars"></i> <i class="fas fa-bars" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div> </header>
includes/sidebar.php
+16 -16
View File
@@ -1,7 +1,7 @@
<!-- Sidebar de navigation --> <!-- Sidebar de navigation -->
<div class="sidebar"> <nav class="sidebar" role="navigation" aria-label="Navigation principale">
<a href="/" class="logo"> <a href="/" class="logo" aria-label="Retour à l'accueil">
<img src="img/logo.png" alt="kaubuntu.re"> <img src="img/logo.png" alt="Logo kaubuntu.re">
</a> </a>
<?php <?php
@@ -13,12 +13,12 @@
$currentTag = $isTagSearch ? substr($currentQuery, 1) : ''; $currentTag = $isTagSearch ? substr($currentQuery, 1) : '';
?> ?>
<nav class="sidebar-nav"> <div class="sidebar-nav">
<a href="/" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>" data-title="Accueil"> <a href="/" class="nav-item <?php echo ($currentPage === 'index.php') ? 'active' : ''; ?>" data-title="Accueil" aria-current="<?php echo ($currentPage === 'index.php') ? 'page' : 'false'; ?>">
<i class="fas fa-home"></i> <span>Accueil</span> <i class="fas fa-home" aria-hidden="true"></i> <span>Accueil</span>
</a> </a>
<a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>" data-title="Direct"> <a href="direct.php" class="nav-item <?php echo ($currentPage === 'direct.php') ? 'active' : ''; ?>" data-title="Direct" aria-current="<?php echo ($currentPage === 'direct.php') ? 'page' : 'false'; ?>">
<i class="fas fa-broadcast-tower"></i> <span>Direct</span> <i class="fas fa-broadcast-tower" aria-hidden="true"></i> <span>Direct</span>
</a> </a>
<div class="nav-divider"></div> <div class="nav-divider"></div>
@@ -51,8 +51,8 @@
foreach (PRIORITY_CATEGORIES as $id => $name) { foreach (PRIORITY_CATEGORIES as $id => $name) {
$isActive = ($currentPage === 'categories.php' && $currentCategoryId === $id); $isActive = ($currentPage === 'categories.php' && $currentCategoryId === $id);
$icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder'; $icon = isset($categoryIcons[$id]) ? $categoryIcons[$id] : 'fas fa-folder';
echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '" data-title="' . htmlspecialchars($name) . '">'; echo '<a href="categories.php?id=' . $id . '" class="nav-item ' . ($isActive ? 'active' : '') . '" data-title="' . htmlspecialchars($name) . '" aria-current="' . ($isActive ? 'page' : 'false') . '">';
echo '<i class="' . $icon . '"></i> <span>' . htmlspecialchars($name) . '</span>'; echo '<i class="' . $icon . '" aria-hidden="true"></i> <span>' . htmlspecialchars($name) . '</span>';
echo '</a>'; echo '</a>';
} }
} }
@@ -60,8 +60,8 @@
<div class="nav-divider"></div> <div class="nav-divider"></div>
<div class="category-title"> <div class="category-title" role="heading" aria-level="2">
<i class="fas fa-hashtag"></i> <span>Hashtags</span> <i class="fas fa-hashtag" aria-hidden="true"></i> <span>Hashtags</span>
</div> </div>
<?php <?php
@@ -70,12 +70,12 @@
$encodedTag = urlencode('#' . $tag); $encodedTag = urlencode('#' . $tag);
$isActive = ($isTagSearch && strtolower($currentTag) === strtolower($tag)); $isActive = ($isTagSearch && strtolower($currentTag) === strtolower($tag));
?> ?>
<a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item <?php echo $isActive ? 'active' : ''; ?>" data-title="<?php echo htmlspecialchars($tag); ?>"> <a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag-item <?php echo $isActive ? 'active' : ''; ?>" data-title="<?php echo htmlspecialchars($tag); ?>" aria-current="<?php echo $isActive ? 'page' : 'false'; ?>">
<i class="fas fa-hashtag tag-icon"></i> <span><?php echo htmlspecialchars($tag); ?></span> <i class="fas fa-hashtag tag-icon" aria-hidden="true"></i> <span><?php echo htmlspecialchars($tag); ?></span>
</a> </a>
<?php <?php
endforeach; endforeach;
endif; endif;
?> ?>
</nav> </div>
</div> </nav>
index.php
+56 -49
View File
@@ -65,12 +65,13 @@ setSecurityHeaders();
<body> <body>
<?php include 'includes/sidebar.php'; ?> <?php include 'includes/sidebar.php'; ?>
<!-- Contenu principal --> <!-- Contenu principal -->
<div class="main-content"> <main class="main-content" id="main-content" role="main">
<?php include 'includes/header.php'; ?> <?php include 'includes/header.php'; ?>
<!-- Hero and Mastodon container --> <!-- Hero and Mastodon container -->
<div class="hero-mastodon-wrapper"> <div class="hero-mastodon-wrapper">
<!-- Hero Banner --> <!-- Hero Banner -->
<div class="hero"> <section class="hero" aria-labelledby="live-section-title">
<h2 id="live-section-title" class="sr-only">Diffusion en direct</h2>
<?php <?php
// Vérifier s'il y a un direct en cours // Vérifier s'il y a un direct en cours
$liveStream = getLiveStream(); $liveStream = getLiveStream();
@@ -87,20 +88,24 @@ setSecurityHeaders();
frameborder="0" frameborder="0"
allowfullscreen="allowfullscreen" allowfullscreen="allowfullscreen"
allow="autoplay; fullscreen" allow="autoplay; fullscreen"
title="<?php echo htmlspecialchars($liveStream['title']); ?>"> title="Diffusion en direct: <?php echo htmlspecialchars($liveStream['title']); ?>"
aria-describedby="live-description">
</iframe> </iframe>
<div id="live-description" class="sr-only">
Lecteur vidéo pour la diffusion en direct de <?php echo htmlspecialchars($liveStream['channel']); ?>
</div>
</div> </div>
<div class="hero-video-info"> <div class="hero-video-info">
<h2><?php echo htmlspecialchars($liveStream['title']); ?></h2> <h2><?php echo htmlspecialchars($liveStream['title']); ?></h2>
<div class="hero-channel-info"> <div class="hero-channel-info">
<?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?> <?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?>
<div class="channel-avatar-placeholder"> <div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
<i class="fas fa-user-circle"></i> <i class="fas fa-user-circle" aria-hidden="true"></i>
</div> </div>
<?php else: ?> <?php else: ?>
<img src="<?php echo $liveStream['channelAvatar']; ?>" alt="<?php echo $liveStream['channel']; ?>" class="channel-avatar"> <img src="<?php echo $liveStream['channelAvatar']; ?>" alt="Avatar de la chaîne <?php echo htmlspecialchars($liveStream['channel']); ?>" class="channel-avatar">
<?php endif; ?> <?php endif; ?>
<span class="channel-name"><?php echo $liveStream['channel']; ?></span> <span class="channel-name"><?php echo htmlspecialchars($liveStream['channel']); ?></span>
</div> </div>
</div> </div>
<?php <?php
@@ -115,7 +120,7 @@ setSecurityHeaders();
<?php <?php
} }
?> ?>
</div> </section>
<div id="mt-container" class="mt-container"> <div id="mt-container" class="mt-container">
<div class="mt-header"> <div class="mt-header">
@@ -146,12 +151,12 @@ setSecurityHeaders();
<hr class="section-divider"> <hr class="section-divider">
<!-- Section Shorts --> <!-- Section Shorts -->
<div class="video-section"> <section class="video-section" aria-labelledby="shorts-heading">
<div class="section-header"> <div class="section-header">
<div class="section-logo"> <div class="section-logo">
<img src="img/logo.png" alt="kaubuntu.re"> <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
</div> </div>
<h2 class="section-title">Shorts</h2> <h2 id="shorts-heading" class="section-title">Shorts</h2>
</div> </div>
<div class="carousel"> <div class="carousel">
@@ -167,7 +172,7 @@ setSecurityHeaders();
foreach ($shorts as $video): foreach ($shorts as $video):
?> ?>
<div class="carousel-item"> <div class="carousel-item">
<div class="video-card" data-video-id="<?php echo $video['id']; ?>"> <article class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail"> <div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>"> <img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
<div class="video-play-icon"> <div class="video-play-icon">
@@ -190,19 +195,19 @@ setSecurityHeaders();
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </section>
<!-- Séparateur stylisé --> <!-- Séparateur stylisé -->
<hr class="section-divider"> <hr class="section-divider">
<!-- Section Dernières vidéos --> <!-- Section Dernières vidéos -->
<div class="video-section"> <section class="video-section" aria-labelledby="recent-videos-heading">
<div class="section-header"> <header class="section-header">
<div class="section-logo"> <div class="section-logo">
<img src="img/logo.png" alt="kaubuntu.re"> <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
</div> </div>
<h2 class="section-title">Dernières vidéos</h2> <h2 id="recent-videos-heading" class="section-title">Dernières vidéos</h2>
</div> </header>
<div class="video-grid"> <div class="video-grid">
<?php <?php
@@ -215,16 +220,18 @@ setSecurityHeaders();
} else { } else {
foreach ($recentVideos as $video): foreach ($recentVideos as $video):
?> ?>
<div class="video-card" data-video-id="<?php echo $video['id']; ?>"> <article class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail"> <div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>"> <img src="<?php echo $video['thumbnail']; ?>" alt="Miniature de la vidéo: <?php echo htmlspecialchars($video['title']); ?>">
<div class="video-play-icon"> <div class="video-play-icon" aria-hidden="true">
<i class="fas fa-play-circle"></i> <i class="fas fa-play-circle"></i>
</div> </div>
<div class="video-duration"><?php echo formatDuration($video['duration']); ?></div> <div class="video-duration" aria-label="Durée: <?php echo formatDuration($video['duration']); ?>">
<?php echo formatDuration($video['duration']); ?>
</div>
</div> </div>
<div class="video-info"> <div class="video-info">
<h3 class="video-title"><?php echo $video['title']; ?></h3> <h3 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h3>
<div class="video-channel"> <div class="video-channel">
<?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== false || empty($video['channelAvatar'])): ?> <?php if (strpos($video['channelAvatar'], 'default-avatar.png') !== false || empty($video['channelAvatar'])): ?>
<div class="channel-avatar-placeholder"> <div class="channel-avatar-placeholder">
@@ -240,7 +247,7 @@ setSecurityHeaders();
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span> <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div> </div>
</div> </div>
</div> </article>
<?php <?php
endforeach; endforeach;
} }
@@ -248,19 +255,19 @@ setSecurityHeaders();
</div> </div>
<button class="view-more">Voir plus</button> <button class="view-more">Voir plus</button>
</div> </section>
<!-- Séparateur stylisé --> <!-- Séparateur stylisé -->
<hr class="section-divider"> <hr class="section-divider">
<!-- Section Tendances --> <!-- Section Tendances -->
<div class="video-section"> <section class="video-section" aria-labelledby="trending-videos-heading">
<div class="section-header"> <header class="section-header">
<div class="section-logo"> <div class="section-logo">
<img src="img/logo.png" alt="kaubuntu.re"> <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
</div> </div>
<h2 class="section-title">Tendances</h2> <h2 id="trending-videos-heading" class="section-title">Tendances</h2>
</div> </header>
<div class="video-grid"> <div class="video-grid">
<?php <?php
@@ -273,7 +280,7 @@ setSecurityHeaders();
} else { } else {
foreach ($trendingVideos as $video): foreach ($trendingVideos as $video):
?> ?>
<div class="video-card" data-video-id="<?php echo $video['id']; ?>"> <article class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail"> <div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>"> <img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
<div class="video-play-icon"> <div class="video-play-icon">
@@ -298,7 +305,7 @@ setSecurityHeaders();
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span> <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div> </div>
</div> </div>
</div> </article>
<?php <?php
endforeach; endforeach;
} }
@@ -306,7 +313,7 @@ setSecurityHeaders();
</div> </div>
<button class="view-more">Voir plus</button> <button class="view-more">Voir plus</button>
</div> </section>
<!-- Séparateur stylisé --> <!-- Séparateur stylisé -->
<hr class="section-divider"> <hr class="section-divider">
@@ -321,17 +328,17 @@ setSecurityHeaders();
if (!empty($category['videos'])): if (!empty($category['videos'])):
?> ?>
<!-- Section Catégorie: <?php echo $category['name']; ?> --> <!-- Section Catégorie: <?php echo $category['name']; ?> -->
<div class="video-section" data-category-id="<?php echo $category['id']; ?>"> <section class="video-section" data-category-id="<?php echo $category['id']; ?>" aria-labelledby="category-heading-<?php echo $category['id']; ?>">
<div class="section-header"> <header class="section-header">
<div class="section-logo"> <div class="section-logo">
<img src="img/logo.png" alt="kaubuntu.re"> <img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
</div> </div>
<h2 class="section-title"><?php echo $category['name']; ?></h2> <h2 id="category-heading-<?php echo $category['id']; ?>" class="section-title"><?php echo htmlspecialchars($category['name']); ?></h2>
</div> </header>
<div class="video-grid"> <div class="video-grid">
<?php foreach ($category['videos'] as $video): ?> <?php foreach ($category['videos'] as $video): ?>
<div class="video-card" data-video-id="<?php echo $video['id']; ?>"> <article class="video-card" data-video-id="<?php echo $video['id']; ?>">
<div class="video-thumbnail"> <div class="video-thumbnail">
<img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>"> <img src="<?php echo $video['thumbnail']; ?>" alt="<?php echo $video['title']; ?>">
<div class="video-play-icon"> <div class="video-play-icon">
@@ -356,12 +363,12 @@ setSecurityHeaders();
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span> <span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div> </div>
</div> </div>
</div> </article>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<button class="view-more">Voir plus</button> <button class="view-more">Voir plus</button>
</div> </section>
<!-- Séparateur stylisé --> <!-- Séparateur stylisé -->
<hr class="section-divider"> <hr class="section-divider">
@@ -372,10 +379,10 @@ setSecurityHeaders();
?> ?>
<!-- Section Flexbox pour Informations et Tendances Hashtags --> <!-- Section Flexbox pour Informations et Tendances Hashtags -->
<div class="info-tags-container"> <section class="info-tags-container">
<?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?> <?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
<!-- Section Informations --> <!-- Section Informations -->
<div class="info-section"> <article class="info-section">
<h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2> <h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
<?php if (defined('MOVEMENT_IMAGE') && !empty(MOVEMENT_IMAGE)): ?> <?php if (defined('MOVEMENT_IMAGE') && !empty(MOVEMENT_IMAGE)): ?>
@@ -388,12 +395,12 @@ setSecurityHeaders();
<?php endif; ?> <?php endif; ?>
</figure> </figure>
<?php endif; ?> <?php endif; ?>
</div> </article>
<?php endif; ?> <?php endif; ?>
<!-- Section Tendances Hashtags --> <!-- Section Tendances Hashtags -->
<div class="tags-section-container"> <aside class="tags-section-container" aria-labelledby="hashtags-heading">
<h2 class="section-title centered">Tendances</h2> <h2 id="hashtags-heading" class="section-title centered">Tendances</h2>
<div class="tags-section"> <div class="tags-section">
<?php <?php
@@ -407,9 +414,9 @@ setSecurityHeaders();
endif; endif;
?> ?>
</div> </div>
</div> </aside>
</div> </section>
</div> </main>
<?php include 'includes/footer.php'; ?> <?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?> <?php include 'includes/mobile-menu.php'; ?>
<script src="js/main.js"></script> <script src="js/main.js"></script>
video.php
+66 -58
View File
@@ -162,52 +162,58 @@ if (empty($videoData) || isset($videoData['error'])) {
<?php include 'includes/sidebar.php'; ?> <?php include 'includes/sidebar.php'; ?>
<!-- Contenu principal --> <!-- Contenu principal -->
<div class="main-content"> <main class="main-content" id="main-content" role="main">
<?php include 'includes/header.php'; ?> <?php include 'includes/header.php'; ?>
<?php if (isset($videoNotFound)): ?> <?php if (isset($videoNotFound)): ?>
<!-- Message d'erreur si la vidéo n'existe pas --> <!-- Message d'erreur si la vidéo n'existe pas -->
<div class="error-message"> <section class="error-message" role="alert" aria-labelledby="error-heading">
<i class="fas fa-exclamation-triangle"></i> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
<h2>Vidéo non trouvée</h2> <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> <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> <a href="index.php" class="btn-primary">Retour à l'accueil</a>
</div> </section>
<?php else: ?> <?php else: ?>
<!-- Section vidéo --> <!-- Section vidéo -->
<div class="video-page"> <article class="video-page" itemscope itemtype="https://schema.org/VideoObject">
<div class="video-player-container"> <section class="video-player-container">
<div class="video-player"> <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>
</div> </section>
<div class="video-content"> <div class="video-content">
<div class="video-primary-info"> <header class="video-primary-info">
<h1 class="video-title"><?php echo htmlspecialchars($video['title']); ?></h1> <h1 id="video-description" class="video-title" itemprop="name"><?php echo htmlspecialchars($video['title']); ?></h1>
<div class="video-info"> <div class="video-info">
<div class="video-metadata"> <div class="video-metadata">
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</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"></i> <?php echo formatDate($video['date']); ?></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>
<div class="video-actions"> <div class="video-actions">
<button class="action-button" id="share-btn"> <button class="action-button" id="share-btn" aria-label="Partager cette vidéo">
<i class="fas fa-share"></i> <i class="fas fa-share" aria-hidden="true"></i>
<span>Partager</span> <span>Partager</span>
</button> </button>
<button class="action-button" id="download-btn"> <button class="action-button" id="download-btn" aria-label="Télécharger cette vidéo">
<i class="fas fa-download"></i> <i class="fas fa-download" aria-hidden="true"></i>
<span>Télécharger</span> <span>Télécharger</span>
</button> </button>
</div> </div>
</div> </div>
<?php if (!empty($video['licence'])): ?> <?php if (!empty($video['licence'])): ?>
<div class="video-licence"> <section class="video-licence">
<h4 class="licence-title">Licence</h4> <h2 class="licence-title">Licence</h2>
<?php <?php
$licenceLabels = [ $licenceLabels = [
1 => "CC BY (Attribution)", 1 => "CC BY (Attribution)",
@@ -257,36 +263,36 @@ if (empty($videoData) || isset($videoData['error'])) {
<span class="licence-label"><?php echo $licenceLabel; ?></span> <span class="licence-label"><?php echo $licenceLabel; ?></span>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </section>
<?php endif; ?> <?php endif; ?>
</div> </header>
<div class="video-secondary-info"> <section class="video-secondary-info">
<div class="channel-info"> <div class="channel-info">
<?php <?php
$channelUrl = PEERTUBE_URL . '/c/' . $video['channelHandle']; $channelUrl = PEERTUBE_URL . '/c/' . $video['channelHandle'];
?> ?>
<?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?> <?php if (strpos($channelAvatar, 'default-avatar') !== false || empty($channelAvatar)): ?>
<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-placeholder"> <div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
<i class="fas fa-user-circle"></i> <i class="fas fa-user-circle" aria-hidden="true"></i>
</div> </div>
</a> </a>
<?php else: ?> <?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"> <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> </div>
</a> </a>
<?php endif; ?> <?php endif; ?>
<div class="channel-details"> <div class="channel-details">
<a href="<?php echo $channelUrl; ?>" target="_blank" rel="noopener noreferrer" class="channel-name-link"> <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> </a>
</div> </div>
</div> </div>
<div class="video-description"> <div class="video-description" itemprop="description">
<?php <?php
// Vérifier si on a une description tronquée et si la description complète est plus longue // Vérifier si on a une description tronquée et si la description complète est plus longue
$hasTruncatedDesc = !empty($video['truncatedDescription']) && $hasTruncatedDesc = !empty($video['truncatedDescription']) &&
@@ -296,16 +302,16 @@ if (empty($videoData) || isset($videoData['error'])) {
?> ?>
<div class="truncated-description"> <div class="truncated-description">
<?php echo markdown_to_html($video['truncatedDescription']); ?> <?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> <span>Voir plus</span>
<i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-down" aria-hidden="true"></i>
</button> </button>
</div> </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']); ?> <?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> <span>Voir moins</span>
<i class="fas fa-chevron-up"></i> <i class="fas fa-chevron-up" aria-hidden="true"></i>
</button> </button>
</div> </div>
<?php else: ?> <?php else: ?>
@@ -320,50 +326,50 @@ if (empty($videoData) || isset($videoData['error'])) {
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </section>
<!-- Commentaires --> <!-- Commentaires -->
<div class="comments-section"> <section class="comments-section" aria-labelledby="comments-heading">
<div class="section-header"> <header class="section-header">
<div class="section-title-wrapper"> <div class="section-title-wrapper">
<h2 class="section-title">Commentaires</h2> <h2 id="comments-heading" class="section-title">Commentaires</h2>
</div> </div>
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="view-on-peertube"> <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"></i> Voir 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> </a>
</div> </header>
<div class="comments-list"> <div class="comments-list">
<?php <?php
$comments = getVideoComments($videoData['uuid']); $comments = getVideoComments($videoData['uuid']);
if (!empty($comments)): if (!empty($comments)):
foreach ($comments as $comment): foreach ($comments as $comment):
?> ?>
<div class="comment"> <article class="comment">
<div class="comment-avatar"> <div class="comment-avatar">
<?php if (isset($comment['account']['avatar']) && !empty($comment['account']['avatar']['path'])): ?> <?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']); ?>"> <img src="<?php echo PEERTUBE_URL . $comment['account']['avatar']['path']; ?>" alt="<?php echo htmlspecialchars($comment['account']['displayName']); ?>">
<?php else: ?> <?php else: ?>
<div class="channel-avatar-placeholder mini"> <div class="channel-avatar-placeholder mini" role="img" aria-label="Avatar par défaut">
<i class="fas fa-user-circle"></i> <i class="fas fa-user-circle" aria-hidden="true"></i>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div class="comment-content"> <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-author"><?php echo htmlspecialchars($comment['account']['displayName']); ?></span>
<span class="comment-date"><?php echo formatDate($comment['createdAt']); ?></span> <time class="comment-date" datetime="<?php echo $comment['createdAt']; ?>"><?php echo formatDate($comment['createdAt']); ?></time>
</div> </header>
<div class="comment-text"><?php echo nl2br(htmlspecialchars($comment['text'])); ?></div> <div class="comment-text"><?php echo nl2br(htmlspecialchars($comment['text'])); ?></div>
<?php if (isset($comment['totalReplies']) && $comment['totalReplies'] > 0): ?> <?php if (isset($comment['totalReplies']) && $comment['totalReplies'] > 0): ?>
<div class="comment-replies-toggle"> <div class="comment-replies-toggle">
<a href="<?php echo PEERTUBE_URL; ?>/videos/watch/<?php echo $videoData['uuid']; ?>" target="_blank" class="show-replies"> <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"></i> Voir les <?php echo $comment['totalReplies']; ?> réponse<?php echo $comment['totalReplies'] > 1 ? 's' : ''; ?> <i class="fas fa-reply" aria-hidden="true"></i> Voir les <?php echo $comment['totalReplies']; ?> réponse<?php echo $comment['totalReplies'] > 1 ? 's' : ''; ?>
</a> </a>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </article>
<?php <?php
endforeach; endforeach;
?> ?>
@@ -383,19 +389,20 @@ if (empty($videoData) || isset($videoData['error'])) {
</div> </div>
</div> </div>
<div class="video-suggestions"> <aside class="video-suggestions" aria-labelledby="suggestions-heading">
<h3>Vidéos suggérées</h3> <h2 id="suggestions-heading">Vidéos suggérées</h2>
<?php if (!empty($suggestedVideos)): ?> <?php if (!empty($suggestedVideos)): ?>
<div class="suggestion-list"> <div class="suggestion-list">
<?php foreach ($suggestedVideos as $suggestedVideo): ?> <?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"> <div class="suggested-video-thumbnail">
<img src="<?php echo $suggestedVideo['thumbnail']; ?>" alt="<?php echo $suggestedVideo['title']; ?>"> <img src="<?php echo $suggestedVideo['thumbnail']; ?>" alt="<?php echo $suggestedVideo['title']; ?>">
</div> </div>
<div class="suggested-video-info"> <div class="suggested-video-info">
<span class="suggested-video-duration"><?php echo formatDuration($suggestedVideo['duration']); ?></span> <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"> <div class="suggested-video-channel">
<?php <?php
// Vérifier si un avatar de chaîne est disponible pour la vidéo suggérée // 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> <span class="suggested-video-date"><?php echo formatDate($suggestedVideo['date']); ?></span>
</div> </div>
</div> </div>
</a> </a>
</article>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php else: ?> <?php else: ?>
<p>Aucune vidéo suggérée disponible</p> <p>Aucune vidéo suggérée disponible</p>
<?php endif; ?> <?php endif; ?>
</div> </aside>
</div> </article>
<?php endif; ?> <?php endif; ?>
</div> </main>
<?php include 'includes/footer.php'; ?> <?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?> <?php include 'includes/mobile-menu.php'; ?>