Xtream Code Club -

.channel-actions button:first-child { background: #667eea; color: white; }

.login-box { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); width: 350px; } xtream code club

class XtreamClient { constructor(server, port, user, pass) { this.baseUrl = http://${server}:${port} ; this.username = user; this.password = pass; this.sessionId = null; } '★' : '☆'} &lt

return ( <div className="app"> {!connected ? ( <div className="login-container"> <div className="login-box"> <h1>Xtream Codes Player</h1> <input type="text" placeholder="Server URL" value={credentials.server} onChange={(e) => setCredentials({...credentials, server: e.target.value})} /> <input type="text" placeholder="Port" value={credentials.port} onChange={(e) => setCredentials({...credentials, port: e.target.value})} /> <input type="text" placeholder="Username" value={credentials.username} onChange={(e) => setCredentials({...credentials, username: e.target.value})} /> <input type="password" placeholder="Password" value={credentials.password} onChange={(e) => setCredentials({...credentials, password: e.target.value})} /> <button onClick={connectToServer}>Connect</button> </div> </div> ) : ( <div className="main-container"> <div className="sidebar"> <div className="user-info"> <h3>Xtream Player</h3> </div> <div className="categories"> <div className="category-group"> <h4>Live TV</h4> {categories.live.map(cat => ( <div key={cat.category_id} className={`category-item ${activeCategory === 'live' && selectedCategoryId === cat.category_id ? 'active' : ''}`} onClick={() => handleCategoryChange('live', cat.category_id)} > {cat.category_name} </div> ))} </div> <div className="category-group"> <h4>Movies (VOD)</h4> {categories.vod.map(cat => ( <div key={cat.category_id} className={`category-item ${activeCategory === 'vod' && selectedCategoryId === cat.category_id ? 'active' : ''}`} onClick={() => handleCategoryChange('vod', cat.category_id)} > {cat.category_name} </div> ))} </div> <div className="category-group"> <h4>TV Series</h4> {categories.series.map(cat => ( <div key={cat.category_id} className={`category-item ${activeCategory === 'series' && selectedCategoryId === cat.category_id ? 'active' : ''}`} onClick={() => handleCategoryChange('series', cat.category_id)} > {cat.category_name} </div> ))} </div> </div> </div> <div className="content-area"> <div className="search-bar"> <input type="text" placeholder="Search channels..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> </div> <div className="video-container"> {selectedStream && ( <div className="player"> <video ref={videoRef} controls autoPlay className="video-player" /> <div className="stream-info"> <h3>{selectedStream.name}</h3> <button onClick={() => toggleFavorite(selectedStream)}> {favorites.find(f => f.stream_id === selectedStream.stream_id) ? '★' : '☆'} Favorite </button> </div> </div> )} </div> <div className="channels-grid"> {filteredStreams.map(stream => ( <div key={stream.stream_id} className="channel-card"> {stream.stream_icon && ( <img src={stream.stream_icon} alt={stream.name} /> )} <div className="channel-info"> <h4>{stream.name}</h4> <p>{stream.epg_channel_id}</p> </div> <div className="channel-actions"> <button onClick={() => playStream(stream, activeCategory)}> Play </button> <button onClick={() => toggleFavorite(stream)}> {favorites.find(f => f.stream_id === stream.stream_id) ? '★' : '☆'} </button> </div> </div> ))} </div> </div> <div className="right-sidebar"> <div className="favorites"> <h3>Favorites</h3> {favorites.map(stream => ( <div key={stream.stream_id} className="favorite-item"> <span>{stream.name}</span> <button onClick={() => playStream(stream, 'live')}>▶</button> </div> ))} </div> <div className="recently-watched"> <h3>Recently Watched</h3> {recentlyWatched.map(stream => ( <div key={stream.stream_id} className="recent-item"> <span>{stream.name}</span> <button onClick={() => playStream(stream, 'live')}>▶</button> </div> ))} </div> </div> </div> )} </div> ); }; div key={stream.stream_id} className="favorite-item"&gt

app.listen(3000, () => { console.log('Xtream Codes API Server running on port 3000'); }); // App.js - Complete React Frontend import React, { useState, useEffect, useRef } from 'react'; import './App.css'; const App = () => { const [connected, setConnected] = useState(false); const [credentials, setCredentials] = useState({ server: '', port: '25461', username: '', password: '' }); const [categories, setCategories] = useState({ live: [], vod: [], series: [] }); const [activeCategory, setActiveCategory] = useState('live'); const [selectedCategoryId, setSelectedCategoryId] = useState(null); const [streams, setStreams] = useState([]); const [selectedStream, setSelectedStream] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [favorites, setFavorites] = useState([]); const [recentlyWatched, setRecentlyWatched] = useState([]); const videoRef = useRef(null);

async getStreams(categoryId = null, type = 'live') { try { let action = ''; switch(type) { case 'live': action = 'get_live_streams'; break; case 'vod': action = 'get_vod_streams'; break; case 'series': action = 'get_series'; break; } const params = { username: this.username, password: this.password, action: action }; if (categoryId) params.category_id = categoryId; const response = await axios.get(`${this.baseUrl}/player_api.php`, { params }); return response.data; } catch (error) { throw error; } }

.channel-info h4 { margin-bottom: 5px; font-size: 14px; }