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

add share feature

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-09 14:29:01 +04:00
parent 9eeba1e0b4
commit f794e06bde
2 changed files with 225 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/video-page.css
+98
View File
@@ -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);
}
}
video.php
+127 -8
View File
@@ -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>