ui

firofame · Jul 5, 2024 · c4c0f97 · c4c0f97
1 parent 007b967
commit c4c0f97
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube Live Stream Viewer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="app">
+        <div id="video-container">
+            <iframe id="youtube-iframe" allow="autoplay; fullscreen" allowfullscreen></iframe>
+            <button id="fullscreen-btn">⛶</button>
+        </div>
+        <div id="button-container">
+          <!-- Buttons will be dynamically generated here -->
+      </div>
+    </div>
+
+    <script src="youtube-player.js"></script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,60 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: Arial, sans-serif;
+}
+#app {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+#video-container {
+    flex-grow: 1;
+    position: relative;
+}
+iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+#button-container {
+    padding: 10px;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-height: 30%;
+    overflow-y: auto;
+}
+button {
+    margin: 5px;
+    padding: 10px;
+    font-size: 14px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+button:hover {
+    background-color: #45a049;
+}
+button.active {
+    background-color: #007bff;
+}
+#fullscreen-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+}
diff --git a/youtube-player.js b/youtube-player.js
@@ -0,0 +1,46 @@
+const iframe = document.getElementById('youtube-iframe');
+const buttons = document.querySelectorAll('#button-container button');
+const fullscreenBtn = document.getElementById('fullscreen-btn');
+
+function changeChannel(channelId) {
+    console.log(`Changing channel to ${channelId}`);
+    iframe.src = `https://www.youtube.com/embed/live_stream?channel=${channelId}&autoplay=1`;
+    localStorage.setItem('lastChannel', channelId);
+    updateActiveButton(channelId);
+}
+
+function updateActiveButton(channelId) {
+    buttons.forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.channel === channelId);
+    });
+}
+
+buttons.forEach(btn => {
+    console.log('btn: ', btn);
+    btn.addEventListener('click', () => changeChannel(btn.dataset.channel));
+});
+
+fullscreenBtn.addEventListener('click', () => {
+    if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+    } else {
+        document.exitFullscreen();
+    }
+});
+
+// Load last viewed channel or default to the first channel
+const lastChannel = localStorage.getItem('lastChannel') || buttons[0].dataset.channel;
+changeChannel(lastChannel);
+
+fetch('https://raw.githubusercontent.com/firofame/iptv-playlist/main/playlist.json')
+    .then(response => response.json())
+    .then(data => {
+        const buttonContainer = document.getElementById('button-container');
+        data.forEach(channel => {
+            const button = document.createElement('button');
+            // button.dataset.channel = channel.channel_id;
+            button.textContent = channel.channel_name;
+            button.addEventListener('click', () => changeChannel(channel.channel_id));
+            buttonContainer.appendChild(button);
+        });
+    });