handle licence in video page

css/video-page.css

@@ -239,6 +239,51 @@
     white-space: pre-line;
 }
 
+/* Licence de la vidéo */
+.video-licence {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid #eee;
+}
+
+.licence-title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: #333;
+}
+
+.licence-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.licence-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity 0.2s;
+}
+
+.licence-link:hover {
+    opacity: 0.8;
+}
+
+.licence-logo {
+    height: 31px;
+    width: auto;
+}
+
+.licence-label {
+    font-size: 0.875rem;
+    color: #555;
+}
+
 .video-tags {
     display: flex;
     flex-wrap: wrap;
@@ -741,17 +786,17 @@
 
 @media (max-width: 576px) {
     .video-page {
-        gap: 20px;
+        grid-template-columns: 1fr;
-        margin-top: 10px;
+        padding: 0;
     }
     
     .video-player-container {
-        margin-bottom: 0;
+        margin-bottom: 1rem;
     }
     
     .video-content, 
     .video-suggestions {
-        width: 100%;
+        padding: 1rem;
     }
     
     .video-title {
@@ -759,17 +804,17 @@
     }
     
     .video-actions {
-        justify-content: space-around;
+        justify-content: flex-start;
     }
     
     .action-button {
-        font-size: 0.75rem;
+        padding: 0.4rem 0.6rem;
-        min-width: 60px;
+        min-width: auto;
-        padding: 0.5rem 0.25rem;
+        gap: 0.3rem;
     }
     
     .video-views, .video-date {
-        font-size: 0.8125rem;
+        font-size: 0.75rem;
     }
     
     .comment {
@@ -777,22 +822,30 @@
     }
     
     .comment-avatar {
-        margin-bottom: 10px;
+        margin-bottom: 0.75rem;
     }
     
     .suggested-video {
-        display: flex;
         flex-direction: column;
     }
     
     .suggested-video-thumbnail {
         width: 100%;
-        height: auto;
-        padding-top: 56.25%; /* Maintien du ratio 16:9 */
     }
     
     .suggested-video-title {
-        font-size: 0.875rem;
+        font-size: 0.9375rem;
+    }
+    
+    /* Licence responsive */
+    .licence-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .licence-logo {
+        height: 28px;
     }
 }
 

video.php

@@ -32,7 +32,8 @@ if (empty($videoData) || isset($videoData['error'])) {
         'views' => $videoData['views'],
         'likes' => $videoData['likes'],
         'date' => $videoData['publishedAt'],
-        'tags' => $videoData['tags'] ?? []
+        'tags' => $videoData['tags'] ?? [],
+        'licence' => $videoData['licence'] ?? null
     ];
 
     // Récupérer l'image de la chaîne
@@ -182,6 +183,61 @@ if (empty($videoData) || isset($videoData['error'])) {
                             </button>
                         </div>
                     </div>
+                    
+                    <?php if (!empty($video['licence'])): ?>
+                    <div class="video-licence">
+                        <h4 class="licence-title">Licence</h4>
+                        <?php 
+                        $licenceLabels = [
+                            1 => "Attribution", 
+                            2 => "Attribution - Share Alike", 
+                            3 => "Attribution - No Derivatives", 
+                            4 => "Attribution - Non Commercial", 
+                            5 => "Attribution - Non Commercial - Share Alike", 
+                            6 => "Attribution - Non Commercial - No Derivatives", 
+                            7 => "Public Domain Dedication"
+                        ];
+                        
+                        $licenceUrls = [
+                            1 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png",
+                            2 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-sa.png",
+                            3 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nd.png",
+                            4 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc.png",
+                            5 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png",
+                            6 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-nd.png",
+                            7 => "https://mirrors.creativecommons.org/presskit/buttons/88x31/png/cc-zero.png"
+                        ];
+                        
+                        $licenceInfoUrls = [
+                            1 => "https://creativecommons.org/licenses/by/4.0/deed.fr",
+                            2 => "https://creativecommons.org/licenses/by-sa/4.0/deed.fr",
+                            3 => "https://creativecommons.org/licenses/by-nd/4.0/deed.fr",
+                            4 => "https://creativecommons.org/licenses/by-nc/4.0/deed.fr",
+                            5 => "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr",
+                            6 => "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr",
+                            7 => "https://creativecommons.org/publicdomain/zero/1.0/deed.fr"
+                        ];
+                        
+                        $licenceId = $video['licence']['id'];
+                        $licenceLabel = isset($licenceLabels[$licenceId]) ? $licenceLabels[$licenceId] : "Licence inconnue";
+                        $licenceUrl = isset($licenceUrls[$licenceId]) ? $licenceUrls[$licenceId] : "";
+                        $licenceInfoUrl = isset($licenceInfoUrls[$licenceId]) ? $licenceInfoUrls[$licenceId] : "";
+                        ?>
+                        <div class="licence-info">
+                            <?php if (!empty($licenceUrl) && !empty($licenceInfoUrl)): ?>
+                            <a href="<?php echo $licenceInfoUrl; ?>" target="_blank" rel="noopener noreferrer" class="licence-link" title="En savoir plus sur cette licence">
+                                <img src="<?php echo $licenceUrl; ?>" alt="<?php echo $licenceLabel; ?>" class="licence-logo">
+                                <span class="licence-label"><?php echo $licenceLabel; ?></span>
+                            </a>
+                            <?php else: ?>
+                            <?php if (!empty($licenceUrl)): ?>
+                            <img src="<?php echo $licenceUrl; ?>" alt="<?php echo $licenceLabel; ?>" class="licence-logo">
+                            <?php endif; ?>
+                            <span class="licence-label"><?php echo $licenceLabel; ?></span>
+                            <?php endif; ?>
+                        </div>
+                    </div>
+                    <?php endif; ?>
                 </div>
                 
                 <div class="video-secondary-info">