From 7ad5582c884b984228ccc639d0a029c56ed0fdcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 9 Apr 2025 13:46:25 +0400
Subject: [PATCH] add download feature

---
 css/video-page.css  | 172 ++++++++++++++++++++++++++++++++++++++++++++
 includes/config.php |  63 ++++++++++++++++
 video.php           |  69 +++++++++++++++++-
 3 files changed, 303 insertions(+), 1 deletion(-)

diff --git a/css/video-page.css b/css/video-page.css
index 7c0048a..b820773 100644
--- a/css/video-page.css
+++ b/css/video-page.css
@@ -121,6 +121,11 @@
     background-color: #f5f5f5;
 }
 
+.download-button {
+    text-decoration: none;
+    color: inherit;
+}
+
 .disabled-button {
     opacity: 0.6;
     cursor: not-allowed;
@@ -916,3 +921,170 @@
 .logo img {
     height: 40px;
 }
+
+/* Modal de téléchargement */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    overflow: auto;
+    padding: 20px;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: #fff;
+    border-radius: 8px;
+    max-width: 500px;
+    width: 100%;
+    position: relative;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    animation: modalShow 0.3s ease;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+@keyframes modalShow {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: #333;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    color: #888;
+    cursor: pointer;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    transition: background-color 0.2s;
+}
+
+.modal-close:hover {
+    background-color: #f3f3f3;
+    color: #333;
+}
+
+.modal-body {
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.modal-body p {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #666;
+}
+
+.download-options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.download-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.download-option:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+}
+
+.download-resolution {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.download-resolution i {
+    color: var(--primary-red);
+    font-size: 1.1rem;
+}
+
+.download-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #666;
+    font-size: 0.875rem;
+}
+
+.download-info i {
+    color: #444;
+}
+
+.modal-footer {
+    padding: 15px 20px;
+    border-top: 1px solid #eee;
+}
+
+.download-info-text {
+    margin: 0;
+    color: #888;
+    font-size: 0.8125rem;
+    text-align: center;
+}
+
+.no-download-options {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+}
+
+/* Adaptations responsives */
+@media (max-width: 576px) {
+    .modal-content {
+        max-width: 100%;
+    }
+    
+    .download-option {
+        padding: 10px;
+    }
+}
diff --git a/includes/config.php b/includes/config.php
index 62e265c..f11089d 100644
--- a/includes/config.php
+++ b/includes/config.php
@@ -406,4 +406,67 @@ function getVideoComments($videoId) {
     
     return $response['data'];
 }
+
+/**
+ * Récupère les options de téléchargement pour une vidéo
+ * @param string $videoId ID de la vidéo
+ * @return array Options de téléchargement
+ */
+function getVideoDownloadOptions($videoId) {
+    // Récupérer les informations complètes de la vidéo
+    $videoData = callPeerTubeApi('videos/' . $videoId);
+    
+    $downloadOptions = [];
+    
+    // Ajouter les fichiers directs s'ils existent
+    if (isset($videoData['files']) && !empty($videoData['files'])) {
+        foreach ($videoData['files'] as $file) {
+            if (isset($file['fileDownloadUrl']) && !empty($file['fileDownloadUrl'])) {
+                $downloadOptions[] = [
+                    'type' => 'direct',
+                    'url' => PEERTUBE_URL . $file['fileDownloadUrl'],
+                    'resolution' => isset($file['resolution']['label']) ? $file['resolution']['label'] : 'Original',
+                    'size' => isset($file['size']) ? formatFileSize($file['size']) : 'Inconnu'
+                ];
+            }
+        }
+    }
+    
+    // Ajouter les playlists de streaming s'ils existent
+    if (isset($videoData['streamingPlaylists']) && !empty($videoData['streamingPlaylists'])) {
+        foreach ($videoData['streamingPlaylists'] as $playlist) {
+            if (isset($playlist['files']) && !empty($playlist['files'])) {
+                foreach ($playlist['files'] as $file) {
+                    if (isset($file['fileDownloadUrl']) && !empty($file['fileDownloadUrl'])) {
+                        $downloadOptions[] = [
+                            'type' => 'hls',
+                            'url' => $file['fileDownloadUrl'],
+                            'resolution' => isset($file['resolution']['label']) ? $file['resolution']['label'] : 'Original',
+                            'size' => isset($file['size']) ? formatFileSize($file['size']) : 'Inconnu'
+                        ];
+                    }
+                }
+            }
+        }
+    }
+    
+    return $downloadOptions;
+}
+
+/**
+ * Formate la taille d'un fichier en format lisible
+ * @param int $bytes Taille en octets
+ * @return string Taille formatée
+ */
+function formatFileSize($bytes) {
+    $units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    
+    $bytes = max($bytes, 0);
+    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
+    $pow = min($pow, count($units) - 1);
+    
+    $bytes /= (1 << (10 * $pow));
+    
+    return round($bytes, 2) . ' ' . $units[$pow];
+}
 ?> 
\ No newline at end of file
diff --git a/video.php b/video.php
index db95121..8e78e6b 100644
--- a/video.php
+++ b/video.php
@@ -224,7 +224,7 @@ if (empty($videoData) || isset($videoData['error'])) {
                                 <i class="fas fa-share"></i>
                                 <span>Partager</span>
                             </button>
-                            <button class="action-button">
+                            <button class="action-button" id="download-btn">
                                 <i class="fas fa-download"></i>
                                 <span>Télécharger</span>
                             </button>
@@ -426,7 +426,74 @@ if (empty($videoData) || isset($videoData['error'])) {
         </a>
     </div>
     
+    <!-- Modal de téléchargement -->
+    <div id="download-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Télécharger la vidéo</h3>
+                <button class="modal-close"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <p>Choisissez la résolution souhaitée :</p>
+                <div class="download-options">
+                    <?php 
+                    $downloadOptions = getVideoDownloadOptions($videoData['uuid']);
+                    if (!empty($downloadOptions)):
+                        foreach ($downloadOptions as $option):
+                    ?>
+                    <a href="<?php echo $option['url']; ?>" class="download-option" download>
+                        <div class="download-resolution">
+                            <i class="fas fa-film"></i>
+                            <span><?php echo $option['resolution']; ?></span>
+                        </div>
+                        <div class="download-info">
+                            <span class="download-size"><?php echo $option['size']; ?></span>
+                            <i class="fas fa-download"></i>
+                        </div>
+                    </a>
+                    <?php 
+                        endforeach;
+                    else:
+                    ?>
+                    <p class="no-download-options">Aucune option de téléchargement disponible pour cette vidéo.</p>
+                    <?php endif; ?>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <p class="download-info-text">Le téléchargement démarrera automatiquement après avoir cliqué sur une résolution.</p>
+            </div>
+        </div>
+    </div>
+    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="js/main.js"></script>
+    <script>
+        // Script pour la modal de téléchargement
+        document.addEventListener('DOMContentLoaded', function() {
+            const modal = document.getElementById('download-modal');
+            const downloadBtn = document.getElementById('download-btn');
+            const closeBtn = modal.querySelector('.modal-close');
+            
+            // Ouvrir la modal
+            downloadBtn.addEventListener('click', function() {
+                modal.classList.add('show');
+                document.body.style.overflow = 'hidden'; // Empêcher le défilement
+            });
+            
+            // Fermer la modal
+            closeBtn.addEventListener('click', function() {
+                modal.classList.remove('show');
+                document.body.style.overflow = ''; // Réactiver le défilement
+            });
+            
+            // Fermer la modal si on clique en dehors
+            window.addEventListener('click', function(event) {
+                if (event.target === modal) {
+                    modal.classList.remove('show');
+                    document.body.style.overflow = '';
+                }
+            });
+        });
+    </script>
 </body>
 </html> 
\ No newline at end of file