add share feature
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user