davidl/IPTV-Restream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial frontend implementation

Browse Source
This commit is contained in:
Ante Brähler
2024-11-17 20:15:14 +01:00
parent 2a199cca88
commit 6e5bb56da2
22 changed files with 7479 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,6 +1,9 @@
# Node Modules
node_modules/
/build/
/dist/
# Logs
logs
*.log

24
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

28
frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

13
frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/ressources/radio.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StreamHub</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

6704
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

34
frontend/package.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "vite-react-typescript-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"hls.js": "^1.4.0"
},
"devDependencies": {
"@eslint/js": "^9.9.1",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.18",
"eslint": "^9.9.1",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.11",
"globals": "^15.9.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.5.3",
"typescript-eslint": "^8.3.0",
"vite": "^5.4.2"
}
}

6
frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

1
frontend/ressources/radio.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-radio"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

162
frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,162 @@
import React, { useState, useEffect } from 'react';
import { Search, Plus, Settings, Users, Radio, MessageSquare, Tv2 } from 'lucide-react';
import VideoPlayer from './components/VideoPlayer';
import ChannelList from './components/ChannelList';
import Chat from './components/Chat';
import AddChannelModal from './components/AddChannelModal';
import { Channel } from './types';
function App() {
const [channels, setChannels] = useState<Channel[]>([
{
id: 1,
name: 'Das Erste',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: true,
avatar: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=64&h=64&fit=crop&crop=faces'
},
{
id: 2,
name: 'ZDF',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: true,
avatar: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?w=64&h=64&fit=crop&crop=faces'
},
{
id: 3,
name: 'Creative Studio',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: false,
avatar: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?w=64&h=64&fit=crop&crop=faces'
},
{
id: 4,
name: 'Creative Studio',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: false,
avatar: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?w=64&h=64&fit=crop&crop=faces'
},
{
id: 5,
name: 'Creative Studio',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: false,
avatar: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?w=64&h=64&fit=crop&crop=faces'
},
{
id: 6,
name: 'Creative Studio',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: false,
avatar: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?w=64&h=64&fit=crop&crop=faces'
},
{
id: 7,
name: 'Creative Studio',
url: 'https://mcdn.daserste.de/daserste/de/master1080p5000.m3u8',
isLive: false,
avatar: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?w=64&h=64&fit=crop&crop=faces'
},
]);
const [selectedChannel, setSelectedChannel] = useState<Channel>(channels[0]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const addChannel = (channel: Omit<Channel, 'id' | 'avatar'>) => {
const newChannel = {
...channel,
id: channels.length + 1,
avatar: `https://images.unsplash.com/photo-${Math.floor(Math.random() * 1000)}?w=64&h=64&fit=crop&crop=faces`,
};
setChannels([...channels, newChannel]);
};
const handleChannelChange = (channel: Channel) => {
setSelectedChannel(channel);
};
useEffect(() => {
const systemMessage = {
id: Date.now(),
user: {
name: 'System',
avatar: ''
},
message: `Switched to ${selectedChannel.name}'s stream`,
timestamp: new Date().toISOString()
};
window.dispatchEvent(new CustomEvent('newChatMessage', { detail: systemMessage }));
}, [selectedChannel]);
const filteredChannels = channels.filter(channel =>
channel.name.toLowerCase().includes(searchQuery.toLowerCase())
);
return (
<div className="min-h-screen bg-gray-900 text-gray-100">
<div className="container mx-auto py-4">
<header className="flex items-center justify-between mb-6">
<div className="flex items-center space-x-2">
<Radio className="w-8 h-8 text-blue-500" />
<h1 className="text-2xl font-bold">StreamHub</h1>
</div>
<div className="relative max-w-md w-full">
<input
type="text"
placeholder="Search channels..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-gray-800 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" />
</div>
<div className="flex items-center space-x-4">
<Users className="w-6 h-6 text-blue-500" />
<Settings className="w-6 h-6 text-blue-500" />
</div>
</header>
<div className="grid grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-8 space-y-4">
<div className="bg-gray-800 rounded-lg p-4">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-2">
<Tv2 className="w-5 h-5 text-blue-500" />
<h2 className="text-xl font-semibold">Live Channels</h2>
</div>
<button
onClick={() => setIsModalOpen(true)}
className="p-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
>
<Plus className="w-5 h-5" />
</button>
</div>
<ChannelList
channels={filteredChannels}
selectedChannel={selectedChannel}
onSelectChannel={handleChannelChange}
/>
</div>
<VideoPlayer channel={selectedChannel} />
</div>
<div className="col-span-12 lg:col-span-4">
<Chat />
</div>
</div>
</div>
<AddChannelModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onAdd={addChannel}
/>
</div>
);
}
export default App;

95
frontend/src/components/AddChannelModal.tsx Normal file
View File

@@ -0,0 +1,95 @@
import React, { useState } from 'react';
import { X } from 'lucide-react';
import { Channel } from '../types';
interface AddChannelModalProps {
isOpen: boolean;
onClose: () => void;
onAdd: (channel: Omit<Channel, 'id'>) => void;
}
function AddChannelModal({ isOpen, onClose, onAdd }: AddChannelModalProps) {
const [name, setName] = useState('');
const [url, setUrl] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim() || !url.trim()) return;
onAdd({
name: name.trim(),
url: url.trim(),
isLive: true,
});
setName('');
setUrl('');
onClose();
};
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div className="bg-gray-800 rounded-lg w-full max-w-md">
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<h2 className="text-xl font-semibold">Add New Channel</h2>
<button
onClick={onClose}
className="p-1 hover:bg-gray-700 rounded-full transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-4 space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium mb-1">
Channel Name
</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter channel name"
/>
</div>
<div>
<label htmlFor="url" className="block text-sm font-medium mb-1">
Stream URL
</label>
<input
type="url"
id="url"
value={url}
onChange={(e) => setUrl(e.target.value)}
className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter stream URL"
/>
</div>
<div className="flex justify-end space-x-3">
<button
type="button"
onClick={onClose}
className="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors"
>
Cancel
</button>
<button
type="submit"
className="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
>
Add Channel
</button>
</div>
</form>
</div>
</div>
);
}
export default AddChannelModal;

41
frontend/src/components/ChannelList.tsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import { Channel } from '../types';
interface ChannelListProps {
channels: Channel[];
selectedChannel: Channel;
onSelectChannel: (channel: Channel) => void;
}
function ChannelList({ channels, selectedChannel, onSelectChannel }: ChannelListProps) {
return (
<div className="flex space-x-3 hover:overflow-x-auto overflow-hidden pb-2 px-1 pt-1 scroll-container">
{channels.map((channel) => (
<button
key={channel.id}
onClick={() => onSelectChannel(channel)}
className={`group relative p-2 rounded-lg transition-all ${
selectedChannel.id === channel.id
? 'bg-blue-500 bg-opacity-20 ring-2 ring-blue-500'
: 'hover:bg-gray-700'
}`}
>
<div className="h-20 w-20 mb-2 flex items-center justify-center rounded-lg overflow-hidden mx-auto">
<img
src={channel.avatar}
alt={channel.name}
className="w-full h-full object-cover rounded-lg transition-transform group-hover:scale-105"
/>
</div>
<p className="text-sm font-medium truncate text-center">
{channel.name}
</p>
</button>
))}
</div>
);
}
export default ChannelList;

112
frontend/src/components/Chat.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React, { useState, useEffect } from 'react';
import { Send, MessageSquare } from 'lucide-react';
import { ChatMessage } from '../types';
function Chat() {
const [messages, setMessages] = useState<ChatMessage[]>([
{
id: 1,
user: {
name: 'Alex Thompson',
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=faces',
},
message: 'Amazing stream today! 🔥',
timestamp: new Date().toISOString(),
},
{
id: 2,
user: {
name: 'Sarah Chen',
avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces',
},
message: 'The quality is incredible!',
timestamp: new Date().toISOString(),
},
]);
const [newMessage, setNewMessage] = useState('');
useEffect(() => {
const handleNewMessage = (event: CustomEvent<ChatMessage>) => {
setMessages(prev => [...prev, event.detail]);
};
window.addEventListener('newChatMessage', handleNewMessage as EventListener);
return () => {
window.removeEventListener('newChatMessage', handleNewMessage as EventListener);
};
}, []);
const handleSendMessage = (e: React.FormEvent) => {
e.preventDefault();
if (!newMessage.trim()) return;
const message: ChatMessage = {
id: messages.length + 1,
user: {
name: 'You',
avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop&crop=faces',
},
message: newMessage,
timestamp: new Date().toISOString(),
};
setMessages([...messages, message]);
setNewMessage('');
};
return (
<div className="bg-gray-800 rounded-lg h-full">
<div className="flex items-center space-x-2 p-4 border-b border-gray-700">
<MessageSquare className="w-5 h-5 text-blue-500" />
<h2 className="text-xl font-semibold">Live Chat</h2>
</div>
<div className="h-[calc(100vh-13rem)] overflow-y-auto p-4 space-y-4 scroll-container vertical-scroll-container">
{messages.map((msg) => (
<div key={msg.id} className="flex items-start space-x-3">
{msg.user.avatar ? (
<img
src={msg.user.avatar}
alt={msg.user.name}
className="w-8 h-8 rounded-full"
/>
) : (
<div className="w-8" /> // Spacer for system messages
)}
<div>
<div className="flex items-center space-x-2">
<span className={`font-medium ${msg.user.name === 'System' ? 'text-blue-400' : ''}`}>
{msg.user.name}
</span>
<span className="text-xs text-gray-400">
{new Date(msg.timestamp).toLocaleTimeString()}
</span>
</div>
<p className="text-gray-300">{msg.message}</p>
</div>
</div>
))}
</div>
<form onSubmit={handleSendMessage} className="p-4 border-t border-gray-700">
<div className="relative">
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message..."
className="w-full bg-gray-700 rounded-lg pl-4 pr-12 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-500 hover:bg-blue-600 p-1.5 rounded-lg transition-colors"
>
<Send className="w-4 h-4" />
</button>
</div>
</form>
</div>
);
}
export default Chat;

113
frontend/src/components/VideoPlayer.tsx Normal file
View File

@@ -0,0 +1,113 @@
import React, { useEffect, useRef } from 'react';
import Hls from 'hls.js';
import { Channel } from '../types';
interface VideoPlayerProps {
channel: Channel;
}
function VideoPlayer({ channel }: VideoPlayerProps) {
const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null);
useEffect(() => {
if (!videoRef.current) return;
const video = videoRef.current;
if (Hls.isSupported()) {
if (hlsRef.current) {
hlsRef.current.destroy();
}
const hls = new Hls({
autoStartLoad: true,
liveDurationInfinity: true,
});
hlsRef.current = hls;
hls.loadSource(channel.url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
const now = new Date().getTime();
const fragments = data.levels[0].details?.fragments;
if(!fragments || !fragments.length) {
console.error("Could not parse manifest details or fragments are missing.");
return;
}
const lastFragment = fragments[fragments.length - 1];
if(!lastFragment.programDateTime) {
console.warn("No programDateTime found in fragment. Can't sync video playback.");
return;
}
const timeDiff = (now - lastFragment.programDateTime) / 1000;
hls.config.liveSyncDuration = 40 - timeDiff;
//hls.startLoad(timeDiff);
video.play();
});
hls.on(Hls.Events.FRAG_CHANGED, (event, data) => {
const now = new Date().getTime();
const newFrag = data.frag;
if(!newFrag.programDateTime) return;
const timeDiff = (now - newFrag.programDateTime) / 1000;
const videoDiff = newFrag.end - video.currentTime;
const delay = timeDiff + videoDiff;
const targetDelay = 40;
const tolerance = 1;
const maxDeviation = 5;
const deviation = delay - targetDelay;
if (Math.abs(deviation) > maxDeviation) {
video.currentTime += deviation;
video.playbackRate = 1.0;
console.warn("Significant deviation detected. Adjusting current time.");
} else if (Math.abs(deviation) > tolerance) {
const adjustmentFactor = 0.08;
const speedAdjustment = 1 + adjustmentFactor * deviation;
video.playbackRate = speedAdjustment;
} else {
video.playbackRate = 1.0;
}
});
}
return () => {
if (hlsRef.current) {
hlsRef.current.destroy();
}
};
}, [channel.url]);
const handleVideoClick = (event: React.MouseEvent<HTMLVideoElement>) => {
if (videoRef.current?.muted) {
event.preventDefault();
videoRef.current.muted = false;
videoRef.current.play();
}
};
return (
<div className="relative bg-gray-800 rounded-lg overflow-hidden">
<video
ref={videoRef}
className="w-full aspect-video bg-black"
muted
autoPlay
playsInline
controls
onClick={handleVideoClick}
/>
</div>
);
}
export default VideoPlayer;

39
frontend/src/index.css Normal file
View File

@@ -0,0 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.scroll-container::-webkit-scrollbar {
height: 10px; /* Höhe für horizontale Scrollbar */
width: 15px;
}
/* Scrollbar-Thumb (Daumen) */
.scroll-container::-webkit-scrollbar-thumb {
background-color: transparent; /* Transparenter Hintergrund */
border: 1.5px solid #3b83f663; /* Blaue Umrandung */
border-radius: 10px;
transition: border-color 0.3s ease; /* Sanfter Übergang für Hover */
}
/* Scrollbar-Thumb Hover */
.scroll-container::-webkit-scrollbar-thumb:hover {
border-color: #2563eb; /* Dunkleres Blau beim Hover */
}
/* Scrollbar Track */
.scroll-container::-webkit-scrollbar-track {
background-color: #2d3748; /* Dunkelgrauer Hintergrund */
border-radius: 10px; /* Runde Ecken */
margin-block: 10px;
}
.vertical-scroll-container {
margin-right: 8px;
}
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button {
display: none;
}

10
frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

19
frontend/src/types.ts Normal file
View File

@@ -0,0 +1,19 @@
export interface User {
name: string;
avatar: string;
}
export interface Channel {
id: number;
name: string;
url: string;
isLive: boolean;
avatar: string;
}
export interface ChatMessage {
id: number;
user: User;
message: string;
timestamp: string;
}

1
frontend/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

11
frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

24
frontend/tsconfig.app.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

7
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

22
frontend/tsconfig.node.json Normal file
View File

@@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}

10
frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
optimizeDeps: {
exclude: ['lucide-react'],
},
})