{{ (video_name[:50] + '...') if video_name|length > 50 else video_name }} - GammaTube"> <link rel="icon" type="image/png" sizes="32x32" href="https://gammatubecdn.vercel.app/favicon.png"> <style> :root { --background-light: #f4f4f4; --background-dark: #181818; --text-light: #000; --text-dark: #fff; --primary-light: #ff4d4d; --primary-dark: #e60000; --card-bg-light: #fff; --card-bg-dark: #222; } body { font-family: 'Roboto', sans-serif; background-color: var(--background-light); color: var(--text-light); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; height: 100vh; overflow: auto; /* Allow scrolling */ } body.dark-mode { background-color: var(--background-dark); color: var(--text-dark); } .content { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; overflow: auto; /* Allow scrolling in content */ flex-grow: 1; padding-top: 60px; /* Ensure suggested videos don't overlap with menu */ } #menu-button { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background-color: var(--primary-light); color: var(--text-light); display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: pointer; font-size: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: background-color 0.3s; } #menu-button:hover { background-color: var(--primary-dark); } .menu { position: absolute; top: 50px; right: 10px; display: none; flex-direction: column; align-items: flex-end; background-color: var(--card-bg-light); border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); padding: 10px; } .menu.dark-mode { background-color: var(--card-bg-dark); } .menu button { background: none; border: none; color: var(--text-light); font-size: 16px; padding: 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .menu button.dark-mode { color: var(--text-dark); } .menu button:hover { background-color: var(--primary-light); } .menu button.dark-mode:hover { background-color: var(--primary-dark); } #search-container { margin-top: 20px; display: flex; align-items: center; width: 100%; max-width: 800px; } #search-bar { flex: 1; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } #search-button { padding: 10px 20px; margin-left: 10px; background: var(--primary-light); border: none; color: #fff; border-radius: 4px; cursor: pointer; font-size: 16px; } #search-button:hover { background: var(--primary-dark); } .video-player { width: 100%; max-width: 800px; aspect-ratio: 16 / 9; background-color: #000; margin-top: 20px; border-radius: 8px; overflow: hidden; height: 450px; /* Fixed height for the iframe */ } .video-player iframe { width: 100%; height: 100%; border: none; } .video-info { margin-top: 20px; width: 100%; max-width: 800px; color: var(--text-light); } .video-info .channel { display: flex; align-items: center; margin-top: 10px; } .video-info .channel img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .video-info .channel a { color: var(--text-light); font-size: 18px; text-decoration: none; } .video-info .stats { margin-top: 10px; display: flex; justify-content: space-between; } .video-info .stats span { font-size: 16px; } .comments-section { margin-top: 30px; width: 100%; max-width: 800px; } .comments-section h2 { font-size: 24px; color: var(--text-light); } .comment { margin-top: 15px; padding: 10px; background-color: var(--card-bg-light); border-radius: 8px; } .comment.dark-mode { background-color: var(--card-bg-dark); } .comment .author { font-weight: bold; } .suggested-videos { width: 300px; margin-left: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: calc(100vh - 80px); } .suggested-video-card { display: flex; flex-direction: column; align-items: center; } .suggested-video-card img { width: 100%; height: auto; border-radius: 8px; } .suggested-video-card a { color: var(--text-light); font-size: 14px; text-align: center; margin-top: 10px; } .suggested-video-card a:hover { color: var(--primary-light); } @media (max-width: 768px) { .content { flex-direction: column; align-items: center; } .video-player { max-width: 100%; height: auto; aspect-ratio: 16 / 9; } .suggested-videos { display: none; } } </style> </head> <body> <div id="menu-button">⋮</div> <div class="menu"> <button id="toggle-dark-mode">Toggle Dark Mode</button> <button onclick="window.location.href='https://gammatube.koyeb.app/login'">Login</button> <button onclick="window.location.href='https://gammatube.koyeb.app/watch_history'">History</button> <button onclick="window.location.href='https://gammatube.koyeb.app/'">Home</button> <button id="download-button">Download Video</button> </div> <div id="search-container"> <input type="text" id="search-bar" placeholder="Search for videos or playlists..."> <button id="search-button">Search</button> </div> <div class="content"> <div id="video-player" class="video-player">  </div> <div class="video-info"> <div class="channel"> <img src="https://i.ytimg.com/vi/{{ video_id }}/hqdefault.jpg" alt="Channel Logo"> <a href="/channel/{{ channel_id }}">{{ channel_name }}</a> </div> <div class="stats"> <span id="views">Views: {{ views_count }}</span> <span id="likes">Likes: {{ likes_count }}</span> <span id="dislikes">Dislikes: {{ dislikes_count }}</span> </div> </div> <div class="comments-section"> <h2>Comments</h2> <div id="comments-list">  </div> </div> <div id="suggested-videos" class="suggested-videos">  </div> </div> <script src="https://gammatubecdn.vercel.app/translate.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const menuButton = document.getElementById('menu-button'); const menu = document.querySelector('.menu'); const toggleDarkModeButton = document.getElementById('toggle-dark-mode'); const searchButton = document.getElementById('search-button'); const searchBar = document.getElementById('search-bar'); const videoPlayer = document.getElementById('video-player'); const suggestedVideosContainer = document.getElementById('suggested-videos'); const commentsList = document.getElementById('comments-list'); const videoId = new URLSearchParams(window.location.search).get('v'); if (videoId) { videoPlayer.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`; fetchVideoInfo(videoId); fetchSuggestedVideos(videoId); fetchComments(videoId); } menuButton.addEventListener('click', () => { menu.style.display = menu.style.display === 'none' || menu.style.display === '' ? 'flex' : 'none'; }); toggleDarkModeButton.addEventListener('click', toggleDarkMode); searchButton.addEventListener('click', () => { searchVideos(); }); searchBar.addEventListener('keypress', (event) => { if (event.key === 'Enter') { searchVideos(); } }); function searchVideos() { const query = searchBar.value.trim(); if (query) { window.location.href = `/search?query=${encodeURIComponent(query)}`; } } async function fetchVideoInfo(videoId) { try { const response = await fetch(`/watch/video_info/${videoId}`); const data = await response.json(); document.getElementById('views').innerText = `Views: ${data.views}`; document.getElementById('likes').innerText = `Likes: ${data.likes}`; document.getElementById('dislikes').innerText = `Dislikes: ${data.dislikes}`; } catch (error) { console.error("Error fetching video info:", error); } } async function fetchSuggestedVideos(videoId) { try { const response = await fetch(`/watch/suggested_videos/${videoId}`); const suggestedVideos = await response.json(); suggestedVideosContainer.innerHTML = suggestedVideos.map(video => ` <div class="suggested-video-card"> <img src="https://i.ytimg.com/vi/${video.id}/hqdefault.jpg" alt="${video.title}"> <a href="/watch?v=${video.id}">${video.title}</a> </div> `).join(''); } catch (error) { console.error("Error fetching suggested videos:", error); } } async function fetchComments(videoId) { try { const response = await fetch(`/watch/comments/${videoId}`); const comments = await response.json(); commentsList.innerHTML = comments.map(comment => ` <div class="comment"> <div class="author">${comment.author}</div> <div class="content">${comment.content}</div> </div> `).join(''); } catch (error) { console.error("Error fetching comments:", error); } } function toggleDarkMode() { document.body.classList.toggle('dark-mode'); const menuButtons = document.querySelectorAll('.menu button'); menuButtons.forEach(button => button.classList.toggle('dark-mode')); } }); </script> </body> </html>