docs: add mode description

README.md

@@ -1,33 +1,21 @@
 # IPTV StreamHub
 
-A simple IPTV `restream` and `synchronization` (watch2gether) application with web frontend. Share your iptv playlist and watch it together with your friends.
+> [!INFO]  
-
+>A simple IPTV `restream` and `synchronization` (watch2gether) application with `web` frontend. Share your iptv playlist and watch it together with your friends.
-## ✨ Features 
+> Actively in devlopment and open your ideas! [Test it out](ante.is-a.dev) (Free channels for testing, use your own channels for production)
-**Restreaming** - Proxy your iptv streams through the backend.
-
-**Synchronization** - The playback of the stream is perfectly synchronized for all viewers.
-
-**Channels** - Add multiple iptv streams, you can switch between.
-
-**Live chat** - chat with other viewers with randomized profile.
-
 
 ## 💡Use Cases
-- Connect with multiple Devices to 1 IPTV Stream, if your provider limits current devices.
+- [x] Connect with **multiple Devices** to 1 IPTV Stream, if your provider limits current streaming devices.
-- Proxy all Requests through one IP.
+- [x] Proxy all Requests through **one IP**.
-  - Helps with CORS issues.
+  - [x] Helps with CORS issues.
-- Synchronize IPTV streaming with multiple devices: Synchronized playback and channel selection.
+- [x] **Synchronize** IPTV streaming with multiple devices: Synchronized playback and channel selection for perfect Watch2Gether.
-- Share your iptv and watch together with your friends.
+- [x] **Share your iptv access** without revealing your actual stream-url (privacy-mode) and watch together with your friends.
-  - The actual iptv stream-url is unvisible to them if you restream [upcomming feature]
-
-## 🛠️ Architecture
-
-### `Frontend`
-A simple React webpage that can stream iptv streams in hls-format. Provides synchronized playback by using a constant delay. Also supports multiple IPTV streams (channel selection) and a chat if using together with the backend.
-
-### `Backend`
-A simple NodeJS web server that retrieves your IPTV stream, caches it, and converts it into an HLS stream, making it accessible via the web. Also supports multiple IPTV streams (channel selection).
 
+## ✨ Features 
+**Restream / Proxy** - Proxy your iptv streams through the backend. <br>
+**Synchronization** - The selection and playback of the stream is perfectly synchronized for all viewers. <br>
+**Channels** - Add multiple iptv streams and playlists, you can switch between. <br>
+**Live chat** - chat with other viewers with a randomized profile.
 
 ## 🚀 Run
 
@@ -58,12 +46,28 @@ If you only need the **synchronization** functionality, you may only run the [fr
 
 Be aware, that this'll require additional configuration/adaption and won't be officially supported. It is recommended to [run the whole project as once](#run-with-docker).
 
-## Preview
+## 🖼️ Preview
 ![Frontend Preview](/frontend/ressources/frontend-preview.png)
 ![Add channel](/frontend/ressources/add-channel.png)
 
+## ⚙️ Settings
+
+### Channel Mode
+#### `Direct`
+Directly uses the source stream. Won't work with most of the streams, because of CORS, IP/Device restrictions. Is also incompatible with custom headers and privacy mode.
+
+#### `Proxy` (Preffered)
+The stream requests are proxied through the backend. Allows to set custom headers and bypass CORS. This mode is preffered. Only switch to restream mode, if proxy mode won't work for your stream or if you have synchronization issues.
+
+#### `Restream`
+The backend service caches the source stream (with ffmpeg) and restreams it. Can help with hard device restrictions of your provider. But it can lead to long initial loading times and performance issues after time.
+
 ## FAQ & Common Mistakes
 
+> Which streaming mode should I choose for the channel?
+
+You should try with direct mode first, switch to proxy mode if it doesn't work and switch to restream mode if this also doesn't work.
+
 > Error: `Bind for 0.0.0.0:80 failed: port is already allocated`
 
 To fix this, change the [port mapping in the docker-compose](docker-compose.yml#L40) to `X:80` e.g. `8080:80`. Make also sure that port X is open in the firewall configuration if you want to expose the application.

backend/README.md

@@ -1,4 +1,6 @@
-# Frontend
+# Backend
+
+A simple NodeJS web server that retrieves your IPTV stream, caches it, and converts it into an HLS stream, making it accessible via the web. Also supports multiple IPTV streams (channel selection).
 
 ## 🚀 Run
 

frontend/README.md

@@ -1,5 +1,7 @@
 # Frontend
 
+A simple React webpage that can stream iptv streams in hls-format. Provides synchronized playback by using a constant delay. Also supports multiple IPTV streams (channel selection) and a chat if using together with the backend.
+
 ## 🚀 Run
 Setup a `.env` file or 
 equivalent environment variables:

frontend/src/components/Tooltip.tsx

@@ -0,0 +1,34 @@
+import { Info } from 'lucide-react';
+
+interface TooltipProps {
+  content: React.ReactNode;
+}
+
+export function Tooltip({ content }: TooltipProps) {
+  return (
+    <div className="group relative inline-flex items-center">
+      <Info className="w-4 h-4 text-blue-400 cursor-help" />
+      <div className="absolute left-0 bottom-full mb-2 w-96 bg-gray-900 p-3 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+        {content}
+        <div className="absolute left-1 bottom-[-6px] w-3 h-3 bg-gray-900 transform rotate-45"></div>
+      </div>
+    </div>
+  );
+}
+
+export const ModeTooltipContent = () => (
+  <div className="space-y-3 text-sm">
+    <div>
+      <span className="font-semibold text-blue-400">Direct</span>
+      <p>Directly uses the source stream. Won't work with most of the streams, because of CORS, IP/Device restrictions. Is also incompatible with custom headers and privacy mode.</p>
+    </div>
+    <div>
+      <span className="font-semibold text-blue-400">Proxy</span>
+      <p>The stream requests are proxied through the backend. Allows to set custom headers and bypass CORS. This mode is preffered. Only switch to restream mode, if proxy mode won't work for your stream or if you have synchronization issues.</p>
+    </div>
+    <div>
+      <span className="font-semibold text-blue-400">Restream</span>
+      <p>The backend service caches the source stream (with ffmpeg) and restreams it. Can help with hard device restrictions of your provider. But it can lead to long initial loading times and performance issues after time.</p>
+    </div>
+  </div>
+);

frontend/src/components/add_channel/ChannelModal.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Plus, Trash2, X } from 'lucide-react';
+import { Info, Plus, Trash2, X } from 'lucide-react';
 import socketService from '../../services/SocketService';
 import { CustomHeader, Channel, ChannelMode } from '../../types';
 import CustomHeaderInput from './CustomHeaderInput';
 import { ToastContext } from '../notifications/ToastContext';
+import { ModeTooltipContent, Tooltip } from '../Tooltip';
 
 interface ChannelModalProps {
   isOpen: boolean;
@@ -228,7 +229,12 @@ function ChannelModal({ isOpen, onClose, channel }: ChannelModalProps) {
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium mb-1">Channel Mode</label>
+                <label className="block text-sm font-medium mb-1">
+                  <span className="inline-flex items-center gap-2">
+                    Channel Mode
+                    <Tooltip content={<ModeTooltipContent />} />
+                  </span>
+                </label>
                 <div className="flex items-center space-x-4">
                   <label className="flex items-center">
                     <input
@@ -286,7 +292,12 @@ function ChannelModal({ isOpen, onClose, channel }: ChannelModalProps) {
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium mb-1">Channel Mode</label>
+                <label className="block text-sm font-medium mb-1">
+                  <span className="inline-flex items-center gap-2">
+                    Channel Mode
+                    <Tooltip content={<ModeTooltipContent />} />
+                  </span>
+                </label>
                 <div className="flex items-center space-x-4">
                 <label className="flex items-center">
                     <input