feat(main): initial commit

2026-03-08 11:28:59 -04:00
commit 458ceb31b1
66 changed files with 7885 additions and 0 deletions
--- a/frontend/src/components/Guide.jsx
+++ b/frontend/src/components/Guide.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { useRemoteControl } from '../hooks/useRemoteControl';
+import { fetchChannels } from '../api';
+
+export default function Guide({ onClose, onSelectChannel }) {
+  const [channels, setChannels] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useRemoteControl({
+    onUp: () => setSelectedIndex(prev => (prev - 1 + channels.length) % channels.length),
+    onDown: () => setSelectedIndex(prev => (prev + 1) % channels.length),
+    onSelect: () => onSelectChannel(channels[selectedIndex].id),
+    onBack: onClose
+  });
+
+  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+
+  useEffect(() => {
+    fetchChannels().then(data => {
+      // Map channels securely, providing a fallback block if properties are missing
+      const mapped = data.map(ch => ({
+        ...ch,
+        currentlyPlaying: ch.currentlyPlaying || { title: 'Live Broadcast', time: 'Now Playing' }
+      }));
+      if (mapped.length > 0) {
+        setChannels(mapped);
+      } else {
+        setChannels([{id: 99, channel_number: '99', name: 'No Channels Found', currentlyPlaying: {title: 'Empty Database', time: '--'}}]);
+      }
+    }).catch(err => {
+      console.error(err);
+      setChannels([{id: 99, channel_number: '99', name: 'Network Error', currentlyPlaying: {title: 'Could not reach PyTV server', time: '--'}}]);
+    });
+  }, []);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+    }, 60000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="guide-container open">
+      <div className="guide-header">
+        <h1>PYTV Guide</h1>
+        <div className="guide-clock">{currentTime}</div>
+      </div>
+      
+      <div className="guide-grid">
+        {channels.length === 0 ? <p style={{color: 'white'}}>Loading TV Guide...</p> : 
+         channels.map((chan, idx) => (
+          <div key={chan.id} className={`guide-row ${idx === selectedIndex ? 'active' : ''}`}>
+            <div className="guide-ch-col">
+              {chan.channel_number}
+            </div>
+            <div className="guide-prog-col">
+              <div className="guide-prog-title">{chan.name} - {chan.currentlyPlaying.title}</div>
+              <div className="guide-prog-time">{chan.currentlyPlaying.time}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      <div style={{ marginTop: '2rem', color: 'var(--pytv-text-dim)', textAlign: 'center' }}>
+        Press <span style={{color: '#fff'}}>Enter</span> to tune to the selected channel. Press <span style={{color: '#fff'}}>Escape</span> to exit guide.
+      </div>
+    </div>
+  );
+}