From f794e06bde0aa47bc4774861816a471efe3f990c 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 14:29:01 +0400
Subject: [PATCH] add share feature

---
 css/video-page.css |  98 ++++++++++++++++++++++++++++++++
 video.php          | 135 ++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 225 insertions(+), 8 deletions(-)

diff --git a/css/video-page.css b/css/video-page.css
index b820773..4bc2a9b 100644
--- a/css/video-page.css
+++ b/css/video-page.css
@@ -1088,3 +1088,101 @@
         padding: 10px;
     }
 }
+
+/* Modal de partage */
+.share-link-container {
+    margin-bottom: 20px;
+}
+
+.share-link-box {
+    display: flex;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 8px;
+}
+
+.share-link-box input {
+    flex: 1;
+    padding: 10px 12px;
+    border: none;
+    font-size: 14px;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+.share-link-box input:focus {
+    outline: none;
+    background-color: #fff;
+}
+
+.copy-btn {
+    background-color: #f5f5f5;
+    border: none;
+    border-left: 1px solid #ddd;
+    color: #555;
+    padding: 0 15px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.copy-btn:hover {
+    background-color: #e5e5e5;
+}
+
+.copy-btn.copied {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.share-platforms-title {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+
+.share-platforms {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.share-platform-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+    padding: 15px 10px;
+    border-radius: 8px;
+    background-color: #f5f5f5;
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.share-platform-btn:hover {
+    background-color: #e0e0e0;
+    transform: translateY(-2px);
+}
+
+.share-platform-btn i {
+    font-size: 1.5rem;
+    margin-bottom: 8px;
+    color: var(--primary-red);
+}
+
+.share-platform-btn span {
+    font-size: 0.875rem;
+}
+
+.share-embed {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+}
+
+@media (max-width: 576px) {
+    .share-platforms {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
diff --git a/video.php b/video.php
index 5091cd1..660ced3 100644
--- a/video.php
+++ b/video.php
@@ -238,7 +238,7 @@ if (empty($videoData) || isset($videoData['error'])) {
                                 <i class="fas fa-thumbs-up"></i>
                                 <span><?php echo formatViewCount($video['likes']); ?></span>
                             </button>
-                            <button class="action-button">
+                            <button class="action-button" id="share-btn">
                                 <i class="fas fa-share"></i>
                                 <span>Partager</span>
                             </button>
@@ -483,34 +483,153 @@ if (empty($videoData) || isset($videoData['error'])) {
         </div>
     </div>
     
+    <!-- Modal de partage -->
+    <div id="share-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Partager la vidéo</h3>
+                <button class="modal-close"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <div class="share-link-container">
+                    <p>Lien de la vidéo :</p>
+                    <div class="share-link-box">
+                        <input type="text" id="share-link" value="<?php echo (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>" readonly>
+                        <button id="copy-link-btn" class="copy-btn" title="Copier le lien">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <p class="share-platforms-title">Partager sur :</p>
+                <div class="share-platforms">
+                    <a href="mailto:?subject=<?php echo urlencode($video['title']); ?>&body=<?php echo urlencode($video['title'] . ' - ' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" class="share-platform-btn" title="Partager par e-mail">
+                        <i class="fas fa-envelope"></i>
+                        <span>E-mail</span>
+                    </a>
+                    
+                    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur Facebook">
+                        <i class="fab fa-facebook-f"></i>
+                        <span>Facebook</span>
+                    </a>
+                    
+                    <a href="https://twitter.com/intent/tweet?text=<?php echo urlencode($video['title']); ?>&url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur X/Twitter">
+                        <i class="fab fa-x-twitter"></i>
+                        <span>X</span>
+                    </a>
+                    
+                    <a href="https://wa.me/?text=<?php echo urlencode($video['title'] . ' - ' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur WhatsApp">
+                        <i class="fab fa-whatsapp"></i>
+                        <span>WhatsApp</span>
+                    </a>
+                    
+                    <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" class="share-platform-btn" title="Partager sur LinkedIn">
+                        <i class="fab fa-linkedin-in"></i>
+                        <span>LinkedIn</span>
+                    </a>
+                    
+                    <a href="https://t.me/share/url?url=<?php echo urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>&text=<?php echo urlencode($video['title']); ?>" target="_blank" class="share-platform-btn" title="Partager sur Telegram">
+                        <i class="fab fa-telegram-plane"></i>
+                        <span>Telegram</span>
+                    </a>
+                </div>
+                
+                <div class="share-embed">
+                    <p>Intégrer la vidéo :</p>
+                    <div class="share-link-box">
+                        <input type="text" id="embed-code" value='<iframe width="560" height="315" src="<?php echo $video['url']; ?>" frameborder="0" allowfullscreen></iframe>' readonly>
+                        <button id="copy-embed-btn" class="copy-btn" title="Copier le code d'intégration">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                </div>
+            </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 downloadModal = document.getElementById('download-modal');
             const downloadBtn = document.getElementById('download-btn');
-            const closeBtn = modal.querySelector('.modal-close');
+            const downloadCloseBtn = downloadModal.querySelector('.modal-close');
             
             // Ouvrir la modal
             downloadBtn.addEventListener('click', function() {
-                modal.classList.add('show');
+                downloadModal.classList.add('show');
                 document.body.style.overflow = 'hidden'; // Empêcher le défilement
             });
             
             // Fermer la modal
-            closeBtn.addEventListener('click', function() {
-                modal.classList.remove('show');
+            downloadCloseBtn.addEventListener('click', function() {
+                downloadModal.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');
+                if (event.target === downloadModal) {
+                    downloadModal.classList.remove('show');
                     document.body.style.overflow = '';
                 }
             });
+            
+            // Script pour la modal de partage
+            const shareModal = document.getElementById('share-modal');
+            const shareBtn = document.getElementById('share-btn');
+            const shareCloseBtn = shareModal.querySelector('.modal-close');
+            const copyLinkBtn = document.getElementById('copy-link-btn');
+            const copyEmbedBtn = document.getElementById('copy-embed-btn');
+            const shareLink = document.getElementById('share-link');
+            const embedCode = document.getElementById('embed-code');
+            
+            // Ouvrir la modal de partage
+            shareBtn.addEventListener('click', function() {
+                shareModal.classList.add('show');
+                document.body.style.overflow = 'hidden';
+            });
+            
+            // Fermer la modal de partage
+            shareCloseBtn.addEventListener('click', function() {
+                shareModal.classList.remove('show');
+                document.body.style.overflow = '';
+            });
+            
+            // Fermer la modal si on clique en dehors
+            window.addEventListener('click', function(event) {
+                if (event.target === shareModal) {
+                    shareModal.classList.remove('show');
+                    document.body.style.overflow = '';
+                }
+            });
+            
+            // Copier le lien
+            copyLinkBtn.addEventListener('click', function() {
+                shareLink.select();
+                document.execCommand('copy');
+                showCopySuccess(copyLinkBtn);
+            });
+            
+            // Copier le code d'intégration
+            copyEmbedBtn.addEventListener('click', function() {
+                embedCode.select();
+                document.execCommand('copy');
+                showCopySuccess(copyEmbedBtn);
+            });
+            
+            // Afficher un message de succès après la copie
+            function showCopySuccess(button) {
+                const originalIcon = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check"></i>';
+                button.classList.add('copied');
+                
+                setTimeout(function() {
+                    button.innerHTML = originalIcon;
+                    button.classList.remove('copied');
+                }, 2000);
+            }
         });
     </script>
 </body>