Xtream Code Club Direct

const filteredStreams = streams.filter(stream => stream.name.toLowerCase().includes(searchTerm.toLowerCase()) );

async getCategories() { try { const [live, vod, series] = await Promise.all([ axios.get(`${this.baseUrl}/player_api.php`, { params: { username: this.username, password: this.password, action: 'get_live_categories' } }), axios.get(`${this.baseUrl}/player_api.php`, { params: { username: this.username, password: this.password, action: 'get_vod_categories' } }), axios.get(`${this.baseUrl}/player_api.php`, { params: { username: this.username, password: this.password, action: 'get_series_categories' } }) ]); return { live: live.data, vod: vod.data, series: series.data }; } catch (error) { throw error; } } xtream code club

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> ); }; const filteredStreams = streams

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); '★' : '☆'} &lt

getStreamUrl(streamId, type = 'live', extension = 'ts') { return `${this.baseUrl}/${type}/${this.username}/${this.password}/${streamId}.${extension}`; }

::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

async authenticate() { try { const response = await axios.get(`${this.baseUrl}/player_api.php`, { params: { username: this.username, password: this.password } }); if (response.data.user_info) { this.sessionId = response.data.user_info.session_id; return { success: true, data: response.data }; } return { success: false, error: 'Authentication failed' }; } catch (error) { return { success: false, error: error.message }; } }