필수:- VLC 다운로드 (VLC 미디어 플레이어 다운로드)- 32비트 VM용 32비트 vlc 또는 64비트 JVM용 64비트 vlc 설치 VMJava로 100% 만든 미디어 플레이어< / iframe>< / div><span 스타일 = "글꼴 - 가족 :" 아리알" , " 헬베티카" , 산세리프;" ><br /></span><span style="글꼴 패밀리: " 아리알" , " 헬베티카" , 산세리프;" > 사용할 수 있습니다. <b>JMF 라이브러리</b>, 하지만 구식이고 오래된 것 같아서 개발자는 C ++의 유명한 VLC 라이브러리에서 <i>vlcj </i>(Java의 경우 j).</span><br /><a name='more'></a><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >이 멋진 라이브러리를 사용하는 방법에 대한 간단한 예를 보여 드리겠습니다. 아래 예제에 있는 코드를 복사하여 원하는 IDE에 붙여넣기만 하면 됩니다. Elipse 또는 Netbeans. </span><a href="https://www.iotools.net/download/java-apis/vlcj" style="font-family: Arial, Helvetica, sans-serif;" target="_blank">download vlcj 라이브러리</a><span style="font-family:" 아리알" , " 헬베티카" , 산세리프;" > 프로젝트와 클래스 패스에 통합하십시오.</span><br /><div><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" ><br /></span></div><div><span 스타일 = "글꼴 패밀리 :" 아리알" , " 헬베티카" , 산세리프;" >목표는 작업 환경을 갖추는 것입니다. 이 단계는 vlcj를 사용하는 모든 애플리케이션을 코딩하는 데 중요합니다. 이 간단한 응용 프로그램이 작동하지 않으면 Java로 코딩되고 vlcj를 통합하는 나머지 모든 응용 프로그램이 작동하지 않습니다.</span> </div><div><h2><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >네이티브 라이브러리 찾기</span></h2><span style="font-family:" 아리알" , " 헬베티카" , 산세리프;" >네이티브 라이브러리의 경로는 두 파일이 포함된 폴더를 가리켜야 합니다 <a href="http://www.telecharger-dll.fr/dll-libvlc.dll.html"><b>libvlc.dll</b> </a>및 <b><a href="http://opendll.com/index.php?file-download=libvlccore.dll&arch=32bit&version=2.0.0.0&dsc=#">libvlccore.dll</a></b>. Linux에서 파일 이름은 libvlc.so 및 libvlccore.so 입니다. 이 두 dll 파일은 VLC 폴더에 있으며, 찾을 수 없으면 다운로드하여 폴더에 추가하십시오. VLC가 설치되었습니다.</span><br /><br /><div class="MsoNormal" style="background-color: #eeeeee; 마진 하단 : 0.0001pt;" ><span 스타일 = "글꼴 패밀리 :" 콘솔라스";" >NativeLibrary.</span><i style="font-family: 콘솔라;" >addSearchPath</i><span 스타일="글꼴 패밀리: " 콘솔라스";" >(</span></div><div class="MsoNormal" style="배경색: #eeeeee; 여백 하단: 0.0001pt;" ><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" > 런타임 유틸리티.<i>getLibVlcLibraryName</i>(), </span><span lang="EN-US" style="색상: 파란색; 글꼴 패밀리 : " 콘솔라"; 글꼴 크기: 10.0pt;" >"</span><span lang="EN-US" 스타일="글꼴 패밀리:" 콘솔라스";" ><span style="색상: 파란색; 글꼴 패밀리 : " 타임즈 뉴 로마";" >C:/프로그램 파일/VideoLAN/VLC</span>); </span></div></div><div><br /><span 스타일 = "글꼴 패밀리 :" 아리알" , " 헬베티카" , 산세리프;" >한 가지 실수는 Java VM이 32비트 버전의 VLC와 함께 사용된다는 것입니다. 64 비트 JDK와 함께 64 비트 VLC 버전을 사용하고 32 비트 JDK와 함께 32 비트 VLC 버전을 사용해야하기 때문에 작동하지 않습니다.</span> <br /><h2><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >기본 라이브러리 로드</span></h2></div><div><span style="font-family:" 아리알" , " 헬베티카" , 산세리프;" >vlcj API는 VLC를 라이브러리에 연결하는 JNA를 사용합니다. 이것은 다음을 의미합니다 환경 반드시 잘 구성된 그래서 Java 응용 프로그램은 서점 native.</span><br /><span lang="EN-US" style="배경색: #eeeeee; 글꼴 패밀리 : " 콘솔라스";" >Native.loadLibrary(RuntimeUtil.getLibVlcLibraryName(), LibVlc.</span><b style="배경색: #eeeeee;" ><span lang="EN-US" style="색상: #741b47; 글꼴 패밀리 : " 콘솔라"; 글꼴 크기: 10.0pt;" >class</span></b><span lang="EN-US" style="배경색: #eeeeee; 글꼴 패밀리 : " 콘솔라스";" >); </span></div><div><br /></div><table 테두리="1" cellpadding="10" style="배경색: #eeeeee; 국경 붕괴 : 붕괴; 폭: 100%;" ><tbody 스타일 = "여백 왼쪽 : 5px;" ><tr><td><span lang="EN-US" style="color: #741b47; 글꼴 패밀리 : " 콘솔라"; 글꼴 크기: 10.0pt;" >void</span><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" ><span style="색상: #741b47;" > </span>chargerLibrary(){</span><br /><div class="MsoNormal" 스타일="여백 하단: 0.0001pt;" ><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" > NativeLibrary.addSearchPath</span></div><div class="MsoNormal" style="여백 하단: 0.0001pt;" ><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" > RuntimeUtil.getLibVlcLibraryName(), </span><span lang="EN-US" style="color: blue; 글꼴 패밀리 : " 콘솔라"; 글꼴 크기: 10.0pt;" >"C:/Program Files/VideoLAN/VLC"</span><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" >); </span><span lang="EN-US" 스타일="글꼴 패밀리:" 콘솔라"; 글꼴 크기: 10.0pt;" ><o:p></o:p></span></div><div class="MsoNormal" style="여백 하단: 0.0001pt;" ><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" > Native.loadLibrary(RuntimeUtil.getLibVlcLibraryName(), LibVlc.</span><span lang="EN-US" style="color: #741b47; font-family: " 콘솔라"; 글꼴 크기: 10.0pt;" >class</span><span lang="EN-US" 스타일="글꼴 패밀리: " 콘솔라스";" >); </span></div><div 클래스 = "MsoNormal"><span 스타일 = "글꼴 패밀리 :" 콘솔라"; 줄 높이: 115%;" >}</span></div></td></tr></tbody></table><div><br /><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >두 가지 필수 클래스:</span><br /><ul><li><span style="font-family:" 아리알" , " 헬베티카" , 산세리프;" >MediaPlayerFactory</span><span 스타일 = "글꼴 패밀리 :" 아리알" , " 헬베티카" , 산세리프;" >: libvlc의 단일 인스턴스를 초기화하고 드라이브 인스턴스를 만듭니다. 멀티미디어. 우리는 할 수 있습니다 각 비디오에 대해 여러 패널을 만듭니다(예: </span><li><li><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >EmbeddedMediaPlayer</span><span 스타일 = "글꼴 패밀리 :" 아리알" , " 헬베티카" , 산세리프;" >: 미디어 플레이어의 구성요소를 UI 구성요소에 통합합니다. 할 수 있을 때 이 클래스와 함께 control</span><span 스타일 = "글꼴 패밀리 :" 아리알" , " 헬베티카" , 산세리프;" > 와 관계가 있는 모든 것 재생 준비 또는 시작, 전체 화면 등과 같은 사용자 인터페이스</span></li></ul><h2><span style="font-size: large;" >예시</span></h2><pre class="prettyprint lang-java">import java.awt.BorderLayout; <br />import java.awt.Canvas 입니다. <br />import java.awt.Color; <br />import javax.swing.JFrame; <br />import javax.swing.JPanel; <br />import javax.swing.SwingUtilities; <br />import com.sun.jna.Native; <br />import com.sun.jna.NativeLibrary; <br />import uk.co.caprica.vlcj.binding.LibVlc; <br />import uk.co.caprica.vlcj.player.MediaPlayerFactory; <br />import uk.co.caprica.vlcj.player.embedded.EmbeddedMediaPlayer를 참조하십시오. <br />import uk.co.caprica.vlcj.player.embedded.windows.Win32FullScreenStrategy; <br />import uk.co.caprica.vlcj.runtime.RuntimeUtil; <br />import uk.co.caprica.vlcj.runtime.x.LibXUtil; <br /><br />/*www.codeurjava.com*/<br /><br /> public class MediaPanel {<br /><br /> public static void main(final String[] args) {<br /> SwingUtilities.invokeLater(new Runnable() {<br /> @Override<br /> public void run() {<br /> chargerLibrary(); <br /> 새로운 MediaPanel(인수); <br /> }<br /> }); <br /> }<br /><br /> void chargerLibrary(){<br /> NativeLibrary.addSearchPath(<br /> RuntimeUtil.getLibVlcLibraryName(), "C:/Program Files/VideoLAN/VLC"); <br /> Native.loadLibrary(RuntimeUtil.getLibVlcLibraryName(), LibVlc.class); <br /> LibXUtil.초기화(); <br /> }<br /> <br /> private MediaPanel(String[] args) {<br /> JFrame frame = new JFrame("vlcj tutorial"); <br /> frame.setLocation(100, 100); <br /> frame.setSize(1050, 600); <br /> frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); <br /> frame.setVisible(true); <br /><br /> //Canvas의 인스턴스 만들기<br /> Canvas c = new Canvas(); <br /> //비디오의 배경은 기본적으로 검은색입니다<br /> c.setBackground(Color.black); <br /> JPanel p = 새로운 JPanel(); <br /> p.setLayout(new BorderLayout()); <br /> //비디오가 전체 표면을 차지합니다<br /> p.add(c, BorderLayout.CENTER); <br /> frame.add(p, BorderLayout.CENTER); <br /><br /> //팩토리 생성<br /> MediaPlayerFactory mediaPlayerFactory = new MediaPlayerFactory(); <br /> //미디어 플레이어 인스턴스 생성<br /> EmbeddedMediaPlayer mediaPlayer = mediaPlayerFactory.newEmbeddedMediaPlayer(new Win32FullScreenStrategy(frame)); <br /> mediaPlayer.setVideoSurface(mediaPlayerFactory.newVideoSurface(c)); <br /> //전체 화면<br /> mediaPlayer.toggleFullScreen(); <br /> //JFrame<br 안에 마우스 커서 숨기기 /> mediaPlayer.setEnableMouseInputHandling(false); <br /> //JFrame<br 내부에서 키보드 비활성화 /> mediaPlayer.setEnableKeyInputHandling(true); <br /> <br /> //파일 준비 <br /> mediaPlayer.prepareMedia("vidéo.mp4"); <br /> //<br /> mediaPlayer.play() 파일을 재생합니다. <br /> }<br /> }</pre></div><div><span style="font-family: " 아리알" , " 헬베티카" , 산세리프;" >됐어! 이제 몇 줄의 코드만으로 자신만의 미디어 플레이어를 가질 수 있습니다. <a href="http://caprica.github.io/vlcj/javadoc/2.1.0/" target="_blank">vlcj documentation</a> 온라인 탐색을 시작하여 필요에 따라 고유한 앱을 개발하십시오.</span></div></div> </article> <!-- Système de commentaires - Option 1 : Authentification requise --> <!-- Section des commentaires --> <section class="comments-section"> <div class="comments-header"> <h3 class="comments-count">Commentaires (<span id="commentCount">0</span>)</h3> </div> <!-- Messages d'alerte --> <div id="alertMessage" class="alert"></div> <!-- Formulaire pour les utilisateurs connectés --> <div id="commentForm" class="comment-form hidden"> <h4>Laisser un commentaire</h4> <textarea id="commentContent" class="comment-textarea" placeholder="Écrivez votre commentaire ici..." maxlength="1000" ></textarea> <div style="display: flex; justify-content: space-between; align-items: center;"> <span style="font-size: 0.85rem; color: #64748b;"> <span id="charCount">0</span>/1000 caractères </span> <button class="btn btn-primary" onclick="submitComment()"> Publier le commentaire </button> </div> </div> <!-- Message pour les utilisateurs non connectés --> <div id="authRequired" class="comment-auth-required"> <h4>Connectez-vous pour commenter</h4> <p>Rejoignez la discussion et partagez vos connaissances avec la communauté</p> <div class="auth-buttons"> <a href="/login" class="btn btn-secondary">Se connecter</a> <a href="/register" class="btn btn-primary">Créer un compte</a> </div> </div> <!-- Liste des commentaires --> <div id="commentsList" class="comments-list"> <div class="loading"> <div class="spinner"></div> <p>Chargement des commentaires...</p> </div> </div> <!-- Pagination --> <div id="pagination" class="pagination"></div> </section> </main> <!-- Right Sidebar --> <aside class="aside"> <!-- Author Box --> <div class="aside-section"> <h3>À propos de l'auteur</h3> <div class="author-box"> <div class="author-avatar">CJ</div> <div class="author-info"> <h4>CodeurJava</h4> <p>Passionné de Java et de développement</p> </div> </div> </div> <!-- Related Articles --> <div class="aside-section"> <h3>Articles similaires</h3> <a href="https://www.codeurjava.com/ko/java/java에서-해시-맵을-탐색하는-방법.html" class="related-article">Java에서 HashMap을 탐색하는 방법</a> <a href="https://www.codeurjava.com/ko/java/java-소켓-클라이언트mini-채팅-서버.html" class="related-article">Java 소켓: 클라이언트/서버 채팅 응용 프로그램 만들기</a> <a href="https://www.codeurjava.com/ko/java/난수-생성.html" class="related-article">Java에서 두 터미널 사이에 난수 생성</a> <a href="https://www.codeurjava.com/ko/java/정규식을-사용한-정규식.html" class="related-article">정규식을 사용한 java의 정규식</a> </div> <!-- Tags --> <div class="aside-section"> <h3>Tags</h3> <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;"> <span style="background: var(--gradient-soft); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem;">API</span><span style="background: var(--gradient-soft); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem;"> 자바</span><span style="background: var(--gradient-soft); padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem;"> 멀티미디어</span> </div> </div> <!-- Newsletter --> <div class="aside-section aside-section-subscribe" style="background: var(--gradient); color: white;"> <h3>Newsletter</h3> <p style="margin-bottom: 1rem; font-size: 0.9rem;">Recevez nos derniers articles directement dans votre boîte mail</p> <input type="email" id="newsletter-email" placeholder="Votre email" style="width: 100%; padding: 0.8rem; border-radius: 10px; border: none; margin-bottom: 1rem;"> <button id="newsletter-submit" type="submit" style="width: 100%; background: white; color: var(--primary-color); border: none; padding: 0.8rem; border-radius: 10px; font-weight: 600; cursor: pointer;">S'inscrire</button> </div> </aside> </div> <!-- Footer --> <footer class="article-footer"> <p>© 2025 CodeurJava. Tous droits réservés.</p> </footer> <script src="/assets/js/newsletter.js"></script> <script> // Configuration const API_BASE = '/api'; const ARTICLE_ID = 1; // À remplacer par l'ID réel de l'article let currentPage = 1; let totalPages = 1; let isAuthenticated = false; let currentUser = null; let csrfToken = ''; // Generate Table of Contents dynamically function generateTOC() { const tocList = document.getElementById('toc-list'); const headings = document.querySelectorAll('.article-content h2'); headings.forEach((heading, index) => { // Ensure heading has an ID if (!heading.id) { heading.id = 'section-' + index; } // Create TOC item const li = document.createElement('li'); const a = document.createElement('a'); a.href = '#' + heading.id; a.textContent = heading.textContent; if (index === 0) a.classList.add('active'); li.appendChild(a); tocList.appendChild(li); }); } // Call on page load document.addEventListener('DOMContentLoaded', generateTOC); // Progress Bar window.addEventListener('scroll', () => { const winScroll = document.body.scrollTop || document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (winScroll / height) * 100; document.getElementById('progressBar').style.width = scrolled + '%'; }); // Table of Contents Active State window.addEventListener('scroll', () => { const sections = document.querySelectorAll('.article-content h2[id]'); const tocLinks = document.querySelectorAll('.toc-list a'); let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; if (scrollY >= (sectionTop - 200)) { current = section.getAttribute('id'); } }); tocLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href').slice(1) === current) { link.classList.add('active'); } }); }); // Smooth scrolling for TOC links document.addEventListener('click', (e) => { if (e.target.matches('.toc-list a')) { e.preventDefault(); const targetId = e.target.getAttribute('href').slice(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Update URL without jumping history.pushState(null, null, '#' + targetId); } } }); // Header Scroll Effect window.addEventListener('scroll', () => { const header = document.querySelector('header'); if (window.scrollY > 100) { header.style.background = 'rgba(255, 255, 255, 0.98)'; header.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.08)'; } else { header.style.background = 'rgba(255, 255, 255, 0.95)'; header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.05)'; } }); // Fonction pour initialiser prettyprint function initializePrettyPrint() { // Wrapper automatique des balises pre.prettyprint document.querySelectorAll('pre.prettyprint').forEach(pre => { if (!pre.parentElement.classList.contains('code-wrapper')) { const wrapper = document.createElement('div'); wrapper.className = 'code-wrapper'; const header = document.createElement('div'); header.className = 'code-header'; // Détecter le langage const langClass = Array.from(pre.classList).find(c => c.startsWith('lang-')); const lang = langClass ? langClass.replace('lang-', '').toUpperCase() : 'CODE'; header.innerHTML = ` <span class="code-language" data-lang="${lang.toLowerCase()}">${lang}</span> <button class="copy-button" onclick="copyCode(this)">Copier</button> `; pre.parentNode.insertBefore(wrapper, pre); wrapper.appendChild(header); wrapper.appendChild(pre); } }); // Si vous utilisez Google Prettify, décommentez cette ligne // PR.prettyPrint(); } // Fonction de copie du code function copyCode(button) { const codeBlock = button.closest('.code-wrapper').querySelector('pre'); const textArea = document.createElement('textarea'); textArea.value = codeBlock.textContent; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); button.textContent = 'Copié !'; button.classList.add('copied'); setTimeout(() => { button.textContent = 'Copier'; button.classList.remove('copied'); }, 2000); } // Coloration syntaxique simple (sans Google Prettify) function applySyntaxHighlighting() { document.querySelectorAll('pre.prettyprint').forEach(pre => { let code = pre.innerHTML; // Java keywords const javaKeywords = [ 'public', 'private', 'protected', 'class', 'interface', 'extends', 'implements', 'static', 'final', 'void', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'new', 'this', 'super', 'import', 'package', 'try', 'catch', 'finally', 'throw', 'throws', 'abstract', 'synchronized', 'volatile' ]; // Types const types = [ 'String', 'int', 'boolean', 'double', 'float', 'long', 'char', 'byte', 'short', 'Integer', 'Boolean', 'Double', 'Float', 'Long', 'Character', 'Byte', 'Short', 'List', 'ArrayList', 'Map', 'HashMap', 'Set', 'HashSet' ]; // Literals const literals = ['true', 'false', 'null']; // Apply highlighting // Comments code = code.replace(/(\/\/.*$)/gm, '<span class="com">$1</span>'); code = code.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="com">$1</span>'); // Strings code = code.replace(/(".*?")/g, '<span class="str">$1</span>'); code = code.replace(/('.')/g, '<span class="str">$1</span>'); // Numbers code = code.replace(/\b(\d+)\b/g, '<span class="lit">$1</span>'); // Keywords javaKeywords.forEach(keyword => { const regex = new RegExp('\\b(' + keyword + ')\\b', 'g'); code = code.replace(regex, '<span class="kwd">$1</span>'); }); // Types types.forEach(type => { const regex = new RegExp('\\b(' + type + ')\\b', 'g'); code = code.replace(regex, '<span class="typ">$1</span>'); }); // Literals literals.forEach(literal => { const regex = new RegExp('\\b(' + literal + ')\\b', 'g'); code = code.replace(regex, '<span class="lit">$1</span>'); }); pre.innerHTML = code; }); } // ======================================== // SYSTÈME DE COMMENTAIRES // ======================================== // Initialisation document.addEventListener('DOMContentLoaded', function() { checkAuthentication(); loadComments(); // Compteur de caractères document.getElementById('commentContent').addEventListener('input', function() { document.getElementById('charCount').textContent = this.value.length; }); }); // Vérifier l'authentification async function checkAuthentication() { try { const response = await fetch(`${API_BASE}/auth.php?action=check`); const data = await response.json(); isAuthenticated = data.loggedIn; currentUser = data.user; csrfToken = data.csrf_token || ''; // Afficher/masquer les éléments selon l'état d'authentification document.getElementById('commentForm').classList.toggle('hidden', !isAuthenticated); document.getElementById('authRequired').classList.toggle('hidden', isAuthenticated); } catch (error) { console.error('Erreur lors de la vérification d\'authentification:', error); } } // Charger les commentaires async function loadComments(page = 1) { try { const response = await fetch( `${API_BASE}/comments.php?action=get&article_id=${ARTICLE_ID}&page=${page}` ); const data = await response.json(); if (data.success) { renderComments(data.comments); updatePagination(data.pagination); document.getElementById('commentCount').textContent = data.pagination.total; } else { showAlert('Erreur lors du chargement des commentaires', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Afficher les commentaires function renderComments(comments) { const container = document.getElementById('commentsList'); if (comments.length === 0) { container.innerHTML = ` <div style="text-align: center; padding: 3rem; color: #64748b;"> Aucun commentaire pour le moment. Soyez le premier à commenter ! </div> `; return; } container.innerHTML = comments.map(comment => renderComment(comment)).join(''); } // Rendre un commentaire function renderComment(comment, isReply = false) { const initials = comment.username.substring(0, 2).toUpperCase(); const statusBadge = comment.status === 'pending' ? '<span class="comment-status status-pending">En attente</span>' : ''; return ` <div class="comment${isReply ? '-reply' : ''}" data-id="${comment.id}"> <div class="comment-header"> <div class="comment-author"> <div class="comment-avatar">${initials}</div> <div class="comment-author-info"> <span class="comment-author-name"> ${escapeHtml(comment.username)} ${comment.role === 'admin' || comment.role === 'moderator' ? `<span style="color: #10b981; font-size: 0.8rem;">✓ ${comment.role}</span>` : ''} </span> <span class="comment-date">${comment.formatted_date}</span> </div> </div> ${statusBadge} </div> <div class="comment-content"> ${escapeHtml(comment.content)} ${comment.is_edited ? '<span style="font-size: 0.8rem; color: #64748b;"> (modifié)</span>' : ''} </div> ${!isReply ? ` <div class="comment-actions"> <button class="comment-action ${comment.user_liked ? 'liked' : ''}" onclick="likeComment(${comment.id})"> <span>${comment.user_liked ? '❤️' : '🤍'}</span> <span>${comment.likes}</span> </button> <button class="comment-action" onclick="toggleReplyForm(${comment.id})"> 💬 Répondre </button> <button class="comment-action" onclick="reportComment(${comment.id})"> 🚩 Signaler </button> ${comment.can_edit ? ` <button class="comment-action" onclick="editComment(${comment.id})"> ✏️ Modifier </button> ` : ''} ${comment.can_delete ? ` <button class="comment-action" onclick="deleteComment(${comment.id})"> 🗑️ Supprimer </button> ` : ''} </div> <div id="replyForm${comment.id}" class="reply-form"> <textarea id="replyContent${comment.id}" class="comment-textarea" placeholder="Votre réponse..." style="min-height: 80px;" ></textarea> <div style="display: flex; gap: 1rem; justify-content: flex-end;"> <button class="btn btn-secondary" onclick="toggleReplyForm(${comment.id})"> Annuler </button> <button class="btn btn-primary" onclick="submitReply(${comment.id})"> Répondre </button> </div> </div> ` : ''} ${comment.replies && comment.replies.length > 0 ? ` <div class="comment-replies"> ${comment.replies.map(reply => renderComment(reply, true)).join('')} </div> ` : ''} ${comment.has_more_replies ? ` <button class="comment-action" style="margin-left: 3rem; margin-top: 0.5rem;" onclick="loadMoreReplies(${comment.id})"> Voir plus de réponses (${comment.reply_count - 3}) </button> ` : ''} </div> `; } // Soumettre un commentaire async function submitComment() { const content = document.getElementById('commentContent').value.trim(); if (content.length < 3) { showAlert('Le commentaire doit contenir au moins 3 caractères', 'error'); return; } try { const formData = new FormData(); formData.append('action', 'add'); formData.append('article_id', ARTICLE_ID); formData.append('content', content); formData.append('csrf_token', csrfToken); const response = await fetch(`${API_BASE}/comments.php`, { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { document.getElementById('commentContent').value = ''; document.getElementById('charCount').textContent = '0'; showAlert(data.message || 'Commentaire publié', 'success'); loadComments(1); // Recharger la première page } else { showAlert(data.error || 'Erreur lors de la publication', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Soumettre une réponse async function submitReply(parentId) { const content = document.getElementById(`replyContent${parentId}`).value.trim(); if (content.length < 3) { showAlert('La réponse doit contenir au moins 3 caractères', 'error'); return; } try { const formData = new FormData(); formData.append('action', 'add'); formData.append('article_id', ARTICLE_ID); formData.append('content', content); formData.append('parent_id', parentId); formData.append('csrf_token', csrfToken); const response = await fetch(`${API_BASE}/comments.php`, { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { toggleReplyForm(parentId); showAlert(data.message || 'Réponse publiée', 'success'); loadComments(currentPage); } else { showAlert(data.error || 'Erreur lors de la publication', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Liker un commentaire async function likeComment(commentId) { if (!isAuthenticated) { showAlert('Vous devez être connecté pour liker', 'info'); return; } try { const formData = new FormData(); formData.append('action', 'like'); formData.append('comment_id', commentId); formData.append('csrf_token', csrfToken); const response = await fetch(`${API_BASE}/comments.php`, { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { loadComments(currentPage); } else { showAlert(data.error || 'Erreur', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Signaler un commentaire async function reportComment(commentId) { if (!isAuthenticated) { showAlert('Vous devez être connecté pour signaler', 'info'); return; } const reason = prompt('Raison du signalement:\n1. spam\n2. inappropriate\n3. harassment\n4. other'); if (!reason) return; const details = prompt('Détails supplémentaires (optionnel):'); try { const formData = new FormData(); formData.append('action', 'report'); formData.append('comment_id', commentId); formData.append('reason', reason); formData.append('details', details || ''); formData.append('csrf_token', csrfToken); const response = await fetch(`${API_BASE}/comments.php`, { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { showAlert(data.message || 'Commentaire signalé', 'success'); } else { showAlert(data.error || 'Erreur', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Supprimer un commentaire async function deleteComment(commentId) { if (!confirm('Êtes-vous sûr de vouloir supprimer ce commentaire ?')) { return; } try { const formData = new FormData(); formData.append('action', 'delete'); formData.append('comment_id', commentId); formData.append('csrf_token', csrfToken); const response = await fetch(`${API_BASE}/comments.php`, { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { showAlert('Commentaire supprimé', 'success'); loadComments(currentPage); } else { showAlert(data.error || 'Erreur', 'error'); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur de connexion au serveur', 'error'); } } // Afficher/masquer le formulaire de réponse function toggleReplyForm(commentId) { const form = document.getElementById(`replyForm${commentId}`); form.classList.toggle('active'); if (form.classList.contains('active')) { document.getElementById(`replyContent${commentId}`).focus(); } } // Charger plus de réponses async function loadMoreReplies(commentId) { try { const response = await fetch( `${API_BASE}/comments.php?action=replies&comment_id=${commentId}` ); const data = await response.json(); if (data.success) { // Recharger les commentaires pour afficher toutes les réponses loadComments(currentPage); } } catch (error) { console.error('Erreur:', error); showAlert('Erreur lors du chargement des réponses', 'error'); } } // Pagination function updatePagination(pagination) { currentPage = pagination.current_page; totalPages = pagination.total_pages; const container = document.getElementById('pagination'); if (totalPages <= 1) { container.innerHTML = ''; return; } let html = ''; // Bouton précédent html += ` <button class="pagination-btn" onclick="loadComments(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}> ← Précédent </button> `; // Numéros de page for (let i = 1; i <= Math.min(totalPages, 5); i++) { html += ` <button class="pagination-btn ${i === currentPage ? 'active' : ''}" onclick="loadComments(${i})"> ${i} </button> `; } if (totalPages > 5) { html += `<span>...</span>`; html += ` <button class="pagination-btn ${totalPages === currentPage ? 'active' : ''}" onclick="loadComments(${totalPages})"> ${totalPages} </button> `; } // Bouton suivant html += ` <button class="pagination-btn" onclick="loadComments(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}> Suivant → </button> `; container.innerHTML = html; } // Afficher une alerte function showAlert(message, type = 'info') { const alert = document.getElementById('alertMessage'); alert.className = `alert alert-${type} show`; alert.textContent = message; setTimeout(() => { alert.classList.remove('show'); }, 5000); } // Échapper le HTML function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } </script>
