SoomiTV | Ultra-Premium Twitch Hub<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* * SOOMITV ULTRA-PREMIUM : RED & BLACK EDITION *\/\r\n :root {\r\n --bg-void: #000000;\r\n --bg-surface: #0a0002;\r\n --bg-panel: rgba(15, 0, 4, 0.7);\r\n --bg-glass: rgba(25, 0, 5, 0.4);\r\n \r\n --st-red: #ff0033;\r\n --st-red-dark: #99001f;\r\n --st-red-glow: rgba(255, 0, 51, 0.5);\r\n \r\n --text-main: #ffffff;\r\n --text-muted: #888899;\r\n --border-subtle: rgba(255, 0, 51, 0.2);\r\n --border-glow: rgba(255, 0, 51, 0.4);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n background-color: var(--bg-void);\r\n color: var(--text-main);\r\n font-family: 'Inter', sans-serif;\r\n overflow-x: hidden;\r\n background-image: \r\n radial-gradient(circle at 15% 50%, rgba(255, 0, 51, 0.08), transparent 40%),\r\n radial-gradient(circle at 85% 30%, rgba(255, 0, 51, 0.05), transparent 40%);\r\n }\r\n\r\n ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--bg-void); }\r\n ::-webkit-scrollbar-thumb { background: var(--st-red-dark); border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--st-red); }\r\n\r\n a { color: var(--text-main); text-decoration: none; transition: 0.3s; }\r\n a:hover { color: var(--st-red); text-shadow: 0 0 10px var(--st-red-glow); }\r\n .text-red { color: var(--st-red); }\r\n \r\n .app-container {\r\n display: grid;\r\n grid-template-columns: 80px 1fr;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* SIDEBAR *\/\r\n .sidebar {\r\n background: var(--bg-surface);\r\n border-right: 1px solid var(--border-subtle);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px 0;\r\n z-index: 100;\r\n position: sticky;\r\n top: 0;\r\n height: 100vh;\r\n }\r\n .brand-logo {\r\n width: 45px; height: 45px;\r\n background: url('Gemini_Generated_Image_.jpg') center\/cover no-repeat;\r\n border-radius: 12px;\r\n box-shadow: 0 0 20px var(--st-red-glow);\r\n margin-bottom: 40px;\r\n animation: pulse-glow 3s infinite alternate;\r\n }\r\n .side-icons { display: flex; flex-direction: column; gap: 30px; width: 100%; align-items: center; }\r\n .side-icon {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n display: flex; justify-content: center; align-items: center;\r\n color: var(--text-muted); cursor: pointer; transition: 0.3s; position: relative;\r\n }\r\n .side-icon:hover, .side-icon.active {\r\n color: var(--text-main); background: rgba(255, 0, 51, 0.1);\r\n box-shadow: inset 0 0 0 1px var(--st-red);\r\n }\r\n\r\n \/* MAIN CONTENT AREA *\/\r\n .main-content {\r\n padding: 0 20px 20px 20px; \/* Reduced padding to shift content left *\/\r\n max-width: 100%; \/* Removed 1800px limit to fill screen *\/\r\n margin: 0; \/* Aligns left to the sidebar *\/\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* Top Nav & View Controls *\/\r\n .top-nav {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 20px 0; backdrop-filter: blur(10px);\r\n position: sticky; top: 0; z-index: 90;\r\n }\r\n \r\n .view-toggles {\r\n display: flex;\r\n gap: 10px;\r\n background: var(--bg-surface);\r\n border: 1px solid var(--border-subtle);\r\n padding: 5px;\r\n border-radius: 8px;\r\n }\r\n .view-btn {\r\n background: transparent; color: var(--text-muted);\r\n border: none; padding: 8px 16px; border-radius: 6px;\r\n cursor: pointer; font-weight: 800; letter-spacing: 1px;\r\n transition: 0.3s;\r\n }\r\n .view-btn.active {\r\n background: var(--st-red); color: white;\r\n box-shadow: 0 0 15px var(--st-red-glow);\r\n }\r\n\r\n .user-actions { display: flex; align-items: center; gap: 20px; }\r\n .avatar {\r\n width: 45px; height: 45px; border-radius: 12px;\r\n border: 2px solid var(--st-red);\r\n background: url('https:\/\/images.unsplash.com\/photo-1534423861386-85a16f5d13fd?auto=format&fit=crop&w=100&q=80') center\/cover;\r\n }\r\n\r\n \/* =========================================\r\n CAROUSEL VIEW\r\n ========================================= *\/\r\n #carouselView { display: block; flex-grow: 1; }\r\n \r\n .theater-container {\r\n display: grid;\r\n grid-template-columns: 1fr 350px;\r\n gap: 20px;\r\n margin-top: 20px;\r\n height: 80vh; \/* Increased height to make player larger *\/\r\n min-height: 600px;\r\n width: 100%; \/* Ensure it spans the full available width *\/\r\n }\r\n \r\n .player-wrapper {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n overflow: hidden;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(255,0,51,0.1);\r\n }\r\n \r\n .chat-wrapper {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n overflow: hidden;\r\n }\r\n\r\n iframe { width: 100%; height: 100%; border: none; }\r\n\r\n \/* Carousel Selector *\/\r\n .carousel-selector {\r\n display: flex; gap: 15px; margin-top: 20px;\r\n overflow-x: auto; padding-bottom: 15px;\r\n justify-content: center; \/* Center the buttons below the massive player *\/\r\n }\r\n .streamer-btn {\r\n background: var(--bg-panel);\r\n border: 1px solid var(--border-subtle);\r\n color: var(--text-main);\r\n padding: 15px 25px; border-radius: 12px;\r\n cursor: pointer; font-weight: 800; font-size: 1.1rem;\r\n display: flex; align-items: center; gap: 10px;\r\n transition: 0.3s; white-space: nowrap;\r\n }\r\n .streamer-btn::before {\r\n content: ''; width: 10px; height: 10px;\r\n background: #555; border-radius: 50%;\r\n }\r\n .streamer-btn:hover {\r\n border-color: var(--st-red); transform: translateY(-3px);\r\n }\r\n .streamer-btn.active {\r\n border-color: var(--st-red);\r\n background: rgba(255,0,51,0.1);\r\n box-shadow: inset 0 0 15px rgba(255,0,51,0.2);\r\n }\r\n .streamer-btn.active::before {\r\n background: var(--st-red);\r\n box-shadow: 0 0 10px var(--st-red);\r\n }\r\n\r\n \/* =========================================\r\n GRID VIEW\r\n ========================================= *\/\r\n #gridView { display: none; margin-top: 20px; }\r\n \r\n .multi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));\r\n gap: 20px;\r\n width: 100%;\r\n }\r\n\r\n .grid-item {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n display: flex; height: 450px; overflow: hidden; \/* Made grid players a bit taller *\/\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.6);\r\n transition: 0.3s;\r\n }\r\n .grid-item:hover {\r\n border-color: var(--st-red);\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255,0,51,0.2);\r\n }\r\n\r\n .grid-video { flex: 1; border-right: 1px solid var(--border-subtle); position: relative; }\r\n .grid-chat { width: 300px; background: #0e0e10; } \/* Matches Twitch dark mode *\/\r\n\r\n .grid-header {\r\n position: absolute; padding: 10px 15px;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);\r\n color: white; font-weight: 800; font-size: 1.2rem;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.8); z-index: 10;\r\n pointer-events: none; width: 100%;\r\n }\r\n\r\n @keyframes pulse-glow {\r\n 0% { box-shadow: 0 0 10px var(--st-red-glow); }\r\n 100% { box-shadow: 0 0 30px var(--st-red); }\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n .theater-container { grid-template-columns: 1fr; height: auto; }\r\n .chat-wrapper { height: 500px; }\r\n .multi-grid { grid-template-columns: 1fr; }\r\n .grid-item { flex-direction: column; height: 600px; }\r\n .grid-video { height: 400px; flex: none; border-right: none; border-bottom: 1px solid var(--border-subtle); }\r\n .grid-chat { width: 100%; height: 200px; }\r\n }\r\n @media (max-width: 768px) {\r\n .app-container { grid-template-columns: 1fr; }\r\n .sidebar { display: none; }\r\n .main-content { padding: 20px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"app-container\">\r\n \r\n <nav class=\"sidebar\">\r\n <div class=\"brand-logo\"><\/div>\r\n <div class=\"side-icons\">\r\n <div class=\"side-icon active\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path><polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline><\/svg><\/div>\r\n <div class=\"side-icon\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"side-icon live\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg><\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <main class=\"main-content\">\r\n \r\n \r\n <header class=\"top-nav\">\r\n <div style=\"font-size: 1.5rem; font-weight: 900; letter-spacing: 1px;\">\r\n SOOMI<span class=\"text-red\">TV<\/span>\r\n <\/div>\r\n \r\n <div class=\"view-toggles\">\r\n <button class=\"view-btn active\" id=\"btnCarousel\">CAROUSEL<\/button>\r\n <button class=\"view-btn\" id=\"btnGrid\">MULTI-GRID<\/button>\r\n <\/div>\r\n\r\n <div class=\"user-actions\">\r\n <div class=\"avatar\"><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section id=\"carouselView\">\r\n <div class=\"theater-container\">\r\n <div class=\"player-wrapper\" id=\"carouselVideoContainer\">\r\n \r\n <\/div>\r\n <div class=\"chat-wrapper\" id=\"carouselChatContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"carousel-selector\" id=\"carouselSelector\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gridView\">\r\n <div class=\"multi-grid\" id=\"gridContainer\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Data: Streamers Array\r\n const streamers = [\r\n 'igrewsum', \r\n 'grinnnbearrit', \r\n 'thegamefreak', \r\n 'cainguardian46', \r\n 'rentalpenguin'\r\n ];\r\n\r\n \/\/ State\r\n let currentStreamer = streamers[0];\r\n \/\/ Twitch requires a parent domain. Dynamically grabbing hostname, fallback to localhost.\r\n const parentDomain = window.location.hostname || 'localhost';\r\n\r\n \/\/ Helper: Generate Twitch URLs\r\n function getTwitchVideoUrl(channel, muted = false) {\r\n return `https:\/\/player.twitch.tv\/?channel=${channel}&parent=${parentDomain}&autoplay=true&muted=${muted}`;\r\n }\r\n function getTwitchChatUrl(channel) {\r\n return `https:\/\/www.twitch.tv\/embed\/${channel}\/chat?parent=${parentDomain}&darkpopout`;\r\n }\r\n\r\n \/\/ --- View Toggling Logic ---\r\n const btnCarousel = document.getElementById('btnCarousel');\r\n const btnGrid = document.getElementById('btnGrid');\r\n const carouselView = document.getElementById('carouselView');\r\n const gridView = document.getElementById('gridView');\r\n\r\n btnCarousel.addEventListener('click', () => {\r\n btnCarousel.classList.add('active');\r\n btnGrid.classList.remove('active');\r\n carouselView.style.display = 'block';\r\n gridView.style.display = 'none';\r\n \/\/ Render Carousel, clear Grid to save memory\/bandwidth\r\n renderCarousel();\r\n document.getElementById('gridContainer').innerHTML = ''; \r\n });\r\n\r\n btnGrid.addEventListener('click', () => {\r\n btnGrid.classList.add('active');\r\n btnCarousel.classList.remove('active');\r\n gridView.style.display = 'block';\r\n carouselView.style.display = 'none';\r\n \/\/ Render Grid, clear Carousel to save memory\/bandwidth\r\n renderGrid();\r\n document.getElementById('carouselVideoContainer').innerHTML = '';\r\n document.getElementById('carouselChatContainer').innerHTML = '';\r\n });\r\n\r\n \/\/ --- Carousel Logic ---\r\n function renderCarousel() {\r\n \/\/ Update Iframes\r\n document.getElementById('carouselVideoContainer').innerHTML = `<iframe src=\"${getTwitchVideoUrl(currentStreamer, false)}\" allowfullscreen><\/iframe>`;\r\n document.getElementById('carouselChatContainer').innerHTML = `<iframe src=\"${getTwitchChatUrl(currentStreamer)}\"><\/iframe>`;\r\n \r\n \/\/ Render Selector Buttons\r\n const selector = document.getElementById('carouselSelector');\r\n selector.innerHTML = '';\r\n \r\n streamers.forEach(streamer => {\r\n const btn = document.createElement('button');\r\n btn.className = `streamer-btn ${streamer === currentStreamer ? 'active' : ''}`;\r\n btn.innerText = `@${streamer}`;\r\n btn.onclick = () => {\r\n currentStreamer = streamer;\r\n renderCarousel(); \/\/ Re-render with new streamer\r\n };\r\n selector.appendChild(btn);\r\n });\r\n }\r\n\r\n \/\/ --- Grid Logic ---\r\n function renderGrid() {\r\n const container = document.getElementById('gridContainer');\r\n container.innerHTML = ''; \/\/ Clear existing\r\n \r\n streamers.forEach(streamer => {\r\n const gridItem = document.createElement('div');\r\n gridItem.className = 'grid-item';\r\n \r\n \/\/ Note: Muting the grid videos by default so 5 streams don't play audio at once\r\n gridItem.innerHTML = `\r\n <div style=\"position: relative;\" class=\"grid-video\">\r\n <div class=\"grid-header\">@${streamer}<\/div>\r\n <iframe src=\"${getTwitchVideoUrl(streamer, true)}\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <div class=\"grid-chat\">\r\n <iframe src=\"${getTwitchChatUrl(streamer)}\"><\/iframe>\r\n <\/div>\r\n `;\r\n container.appendChild(gridItem);\r\n });\r\n }\r\n\r\n \/\/ Initialize default view\r\n renderCarousel();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SoomiTV | Ultra-Premium Twitch Hub SOOMITV CAROUSEL MULTI-GRID<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soomitv.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SoomiTV | Ultra-Premium Twitch Hub<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* * SOOMITV ULTRA-PREMIUM : RED & BLACK EDITION *\/\r\n :root {\r\n --bg-void: #000000;\r\n --bg-surface: #0a0002;\r\n --bg-panel: rgba(15, 0, 4, 0.7);\r\n --bg-glass: rgba(25, 0, 5, 0.4);\r\n \r\n --st-red: #ff0033;\r\n --st-red-dark: #99001f;\r\n --st-red-glow: rgba(255, 0, 51, 0.5);\r\n \r\n --text-main: #ffffff;\r\n --text-muted: #888899;\r\n --border-subtle: rgba(255, 0, 51, 0.2);\r\n --border-glow: rgba(255, 0, 51, 0.4);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n body {\r\n background-color: var(--bg-void);\r\n color: var(--text-main);\r\n font-family: 'Inter', sans-serif;\r\n overflow-x: hidden;\r\n background-image: \r\n radial-gradient(circle at 15% 50%, rgba(255, 0, 51, 0.08), transparent 40%),\r\n radial-gradient(circle at 85% 30%, rgba(255, 0, 51, 0.05), transparent 40%);\r\n }\r\n\r\n ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--bg-void); }\r\n ::-webkit-scrollbar-thumb { background: var(--st-red-dark); border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--st-red); }\r\n\r\n a { color: var(--text-main); text-decoration: none; transition: 0.3s; }\r\n a:hover { color: var(--st-red); text-shadow: 0 0 10px var(--st-red-glow); }\r\n .text-red { color: var(--st-red); }\r\n \r\n .app-container {\r\n display: grid;\r\n grid-template-columns: 80px 1fr;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* SIDEBAR *\/\r\n .sidebar {\r\n background: var(--bg-surface);\r\n border-right: 1px solid var(--border-subtle);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px 0;\r\n z-index: 100;\r\n position: sticky;\r\n top: 0;\r\n height: 100vh;\r\n }\r\n .brand-logo {\r\n width: 45px; height: 45px;\r\n background: url('Gemini_Generated_Image_.jpg') center\/cover no-repeat;\r\n border-radius: 12px;\r\n box-shadow: 0 0 20px var(--st-red-glow);\r\n margin-bottom: 40px;\r\n animation: pulse-glow 3s infinite alternate;\r\n }\r\n .side-icons { display: flex; flex-direction: column; gap: 30px; width: 100%; align-items: center; }\r\n .side-icon {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n display: flex; justify-content: center; align-items: center;\r\n color: var(--text-muted); cursor: pointer; transition: 0.3s; position: relative;\r\n }\r\n .side-icon:hover, .side-icon.active {\r\n color: var(--text-main); background: rgba(255, 0, 51, 0.1);\r\n box-shadow: inset 0 0 0 1px var(--st-red);\r\n }\r\n\r\n \/* MAIN CONTENT AREA *\/\r\n .main-content {\r\n padding: 0 20px 20px 20px; \/* Reduced padding to shift content left *\/\r\n max-width: 100%; \/* Removed 1800px limit to fill screen *\/\r\n margin: 0; \/* Aligns left to the sidebar *\/\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* Top Nav & View Controls *\/\r\n .top-nav {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 20px 0; backdrop-filter: blur(10px);\r\n position: sticky; top: 0; z-index: 90;\r\n }\r\n \r\n .view-toggles {\r\n display: flex;\r\n gap: 10px;\r\n background: var(--bg-surface);\r\n border: 1px solid var(--border-subtle);\r\n padding: 5px;\r\n border-radius: 8px;\r\n }\r\n .view-btn {\r\n background: transparent; color: var(--text-muted);\r\n border: none; padding: 8px 16px; border-radius: 6px;\r\n cursor: pointer; font-weight: 800; letter-spacing: 1px;\r\n transition: 0.3s;\r\n }\r\n .view-btn.active {\r\n background: var(--st-red); color: white;\r\n box-shadow: 0 0 15px var(--st-red-glow);\r\n }\r\n\r\n .user-actions { display: flex; align-items: center; gap: 20px; }\r\n .avatar {\r\n width: 45px; height: 45px; border-radius: 12px;\r\n border: 2px solid var(--st-red);\r\n background: url('https:\/\/images.unsplash.com\/photo-1534423861386-85a16f5d13fd?auto=format&fit=crop&w=100&q=80') center\/cover;\r\n }\r\n\r\n \/* =========================================\r\n CAROUSEL VIEW\r\n ========================================= *\/\r\n #carouselView { display: block; flex-grow: 1; }\r\n \r\n .theater-container {\r\n display: grid;\r\n grid-template-columns: 1fr 350px;\r\n gap: 20px;\r\n margin-top: 20px;\r\n height: 80vh; \/* Increased height to make player larger *\/\r\n min-height: 600px;\r\n width: 100%; \/* Ensure it spans the full available width *\/\r\n }\r\n \r\n .player-wrapper {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n overflow: hidden;\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(255,0,51,0.1);\r\n }\r\n \r\n .chat-wrapper {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n overflow: hidden;\r\n }\r\n\r\n iframe { width: 100%; height: 100%; border: none; }\r\n\r\n \/* Carousel Selector *\/\r\n .carousel-selector {\r\n display: flex; gap: 15px; margin-top: 20px;\r\n overflow-x: auto; padding-bottom: 15px;\r\n justify-content: center; \/* Center the buttons below the massive player *\/\r\n }\r\n .streamer-btn {\r\n background: var(--bg-panel);\r\n border: 1px solid var(--border-subtle);\r\n color: var(--text-main);\r\n padding: 15px 25px; border-radius: 12px;\r\n cursor: pointer; font-weight: 800; font-size: 1.1rem;\r\n display: flex; align-items: center; gap: 10px;\r\n transition: 0.3s; white-space: nowrap;\r\n }\r\n .streamer-btn::before {\r\n content: ''; width: 10px; height: 10px;\r\n background: #555; border-radius: 50%;\r\n }\r\n .streamer-btn:hover {\r\n border-color: var(--st-red); transform: translateY(-3px);\r\n }\r\n .streamer-btn.active {\r\n border-color: var(--st-red);\r\n background: rgba(255,0,51,0.1);\r\n box-shadow: inset 0 0 15px rgba(255,0,51,0.2);\r\n }\r\n .streamer-btn.active::before {\r\n background: var(--st-red);\r\n box-shadow: 0 0 10px var(--st-red);\r\n }\r\n\r\n \/* =========================================\r\n GRID VIEW\r\n ========================================= *\/\r\n #gridView { display: none; margin-top: 20px; }\r\n \r\n .multi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));\r\n gap: 20px;\r\n width: 100%;\r\n }\r\n\r\n .grid-item {\r\n background: #000; border-radius: 12px;\r\n border: 1px solid var(--border-subtle);\r\n display: flex; height: 450px; overflow: hidden; \/* Made grid players a bit taller *\/\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.6);\r\n transition: 0.3s;\r\n }\r\n .grid-item:hover {\r\n border-color: var(--st-red);\r\n box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255,0,51,0.2);\r\n }\r\n\r\n .grid-video { flex: 1; border-right: 1px solid var(--border-subtle); position: relative; }\r\n .grid-chat { width: 300px; background: #0e0e10; } \/* Matches Twitch dark mode *\/\r\n\r\n .grid-header {\r\n position: absolute; padding: 10px 15px;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);\r\n color: white; font-weight: 800; font-size: 1.2rem;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.8); z-index: 10;\r\n pointer-events: none; width: 100%;\r\n }\r\n\r\n @keyframes pulse-glow {\r\n 0% { box-shadow: 0 0 10px var(--st-red-glow); }\r\n 100% { box-shadow: 0 0 30px var(--st-red); }\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n .theater-container { grid-template-columns: 1fr; height: auto; }\r\n .chat-wrapper { height: 500px; }\r\n .multi-grid { grid-template-columns: 1fr; }\r\n .grid-item { flex-direction: column; height: 600px; }\r\n .grid-video { height: 400px; flex: none; border-right: none; border-bottom: 1px solid var(--border-subtle); }\r\n .grid-chat { width: 100%; height: 200px; }\r\n }\r\n @media (max-width: 768px) {\r\n .app-container { grid-template-columns: 1fr; }\r\n .sidebar { display: none; }\r\n .main-content { padding: 20px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"app-container\">\r\n \r\n <nav class=\"sidebar\">\r\n <div class=\"brand-logo\"><\/div>\r\n <div class=\"side-icons\">\r\n <div class=\"side-icon active\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path><polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline><\/svg><\/div>\r\n <div class=\"side-icon\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline><\/svg><\/div>\r\n <div class=\"side-icon live\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg><\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <main class=\"main-content\">\r\n \r\n \r\n <header class=\"top-nav\">\r\n <div style=\"font-size: 1.5rem; font-weight: 900; letter-spacing: 1px;\">\r\n SOOMI<span class=\"text-red\">TV<\/span>\r\n <\/div>\r\n \r\n <div class=\"view-toggles\">\r\n <button class=\"view-btn active\" id=\"btnCarousel\">CAROUSEL<\/button>\r\n <button class=\"view-btn\" id=\"btnGrid\">MULTI-GRID<\/button>\r\n <\/div>\r\n\r\n <div class=\"user-actions\">\r\n <div class=\"avatar\"><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section id=\"carouselView\">\r\n <div class=\"theater-container\">\r\n <div class=\"player-wrapper\" id=\"carouselVideoContainer\">\r\n \r\n <\/div>\r\n <div class=\"chat-wrapper\" id=\"carouselChatContainer\">\r\n \r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"carousel-selector\" id=\"carouselSelector\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gridView\">\r\n <div class=\"multi-grid\" id=\"gridContainer\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Data: Streamers Array\r\n const streamers = [\r\n 'igrewsum', \r\n 'grinnnbearrit', \r\n 'thegamefreak', \r\n 'cainguardian46', \r\n 'rentalpenguin'\r\n ];\r\n\r\n \/\/ State\r\n let currentStreamer = streamers[0];\r\n \/\/ Twitch requires a parent domain. Dynamically grabbing hostname, fallback to localhost.\r\n const parentDomain = window.location.hostname || 'localhost';\r\n\r\n \/\/ Helper: Generate Twitch URLs\r\n function getTwitchVideoUrl(channel, muted = false) {\r\n return `https:\/\/player.twitch.tv\/?channel=${channel}&parent=${parentDomain}&autoplay=true&muted=${muted}`;\r\n }\r\n function getTwitchChatUrl(channel) {\r\n return `https:\/\/www.twitch.tv\/embed\/${channel}\/chat?parent=${parentDomain}&darkpopout`;\r\n }\r\n\r\n \/\/ --- View Toggling Logic ---\r\n const btnCarousel = document.getElementById('btnCarousel');\r\n const btnGrid = document.getElementById('btnGrid');\r\n const carouselView = document.getElementById('carouselView');\r\n const gridView = document.getElementById('gridView');\r\n\r\n btnCarousel.addEventListener('click', () => {\r\n btnCarousel.classList.add('active');\r\n btnGrid.classList.remove('active');\r\n carouselView.style.display = 'block';\r\n gridView.style.display = 'none';\r\n \/\/ Render Carousel, clear Grid to save memory\/bandwidth\r\n renderCarousel();\r\n document.getElementById('gridContainer').innerHTML = ''; \r\n });\r\n\r\n btnGrid.addEventListener('click', () => {\r\n btnGrid.classList.add('active');\r\n btnCarousel.classList.remove('active');\r\n gridView.style.display = 'block';\r\n carouselView.style.display = 'none';\r\n \/\/ Render Grid, clear Carousel to save memory\/bandwidth\r\n renderGrid();\r\n document.getElementById('carouselVideoContainer').innerHTML = '';\r\n document.getElementById('carouselChatContainer').innerHTML = '';\r\n });\r\n\r\n \/\/ --- Carousel Logic ---\r\n function renderCarousel() {\r\n \/\/ Update Iframes\r\n document.getElementById('carouselVideoContainer').innerHTML = `<iframe src=\"${getTwitchVideoUrl(currentStreamer, false)}\" allowfullscreen><\/iframe>`;\r\n document.getElementById('carouselChatContainer').innerHTML = `<iframe src=\"${getTwitchChatUrl(currentStreamer)}\"><\/iframe>`;\r\n \r\n \/\/ Render Selector Buttons\r\n const selector = document.getElementById('carouselSelector');\r\n selector.innerHTML = '';\r\n \r\n streamers.forEach(streamer => {\r\n const btn = document.createElement('button');\r\n btn.className = `streamer-btn ${streamer === currentStreamer ? 'active' : ''}`;\r\n btn.innerText = `@${streamer}`;\r\n btn.onclick = () => {\r\n currentStreamer = streamer;\r\n renderCarousel(); \/\/ Re-render with new streamer\r\n };\r\n selector.appendChild(btn);\r\n });\r\n }\r\n\r\n \/\/ --- Grid Logic ---\r\n function renderGrid() {\r\n const container = document.getElementById('gridContainer');\r\n container.innerHTML = ''; \/\/ Clear existing\r\n \r\n streamers.forEach(streamer => {\r\n const gridItem = document.createElement('div');\r\n gridItem.className = 'grid-item';\r\n \r\n \/\/ Note: Muting the grid videos by default so 5 streams don't play audio at once\r\n gridItem.innerHTML = `\r\n <div style=\"position: relative;\" class=\"grid-video\">\r\n <div class=\"grid-header\">@${streamer}<\/div>\r\n <iframe src=\"${getTwitchVideoUrl(streamer, true)}\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <div class=\"grid-chat\">\r\n <iframe src=\"${getTwitchChatUrl(streamer)}\"><\/iframe>\r\n <\/div>\r\n `;\r\n container.appendChild(gridItem);\r\n });\r\n }\r\n\r\n \/\/ Initialize default view\r\n renderCarousel();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SoomiTV | Ultra-Premium Twitch Hub SOOMITV CAROUSEL MULTI-GRID<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soomitv.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/soomitv.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/soomitv.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}