docs: describe current state of application

README.md

@@ -1,14 +1,34 @@
+# IPTV StreamHub
+
+A simple IPTV restream and synchronization application with web frontend.
+
 ## Use Cases
-- Connect with multiple Devices to 1 Stream IPTV Stream.
-- Proxy all Requests through 1 IP.
-- Synchronize watching IPTV (PLANNED).
+- Connect with multiple Devices to 1 IPTV Stream, if your provider limits current devices.
+- Proxy all Requests through one IP.
+- Synchronize IPTV streaming with multiple devices: Synchronized playback and channel selection.
 
 ## Running
-You can run this on your local linux pc/server to expose the stream to all devices in your home network. For test purposes you can also try it with WSL.
+You can run this on your local linux pc/server to expose the stream to all devices in your home network. For test purposes you can also try it with WSL. You can also run this external server.
+
+### Run with Docker
+
+⚠️ A docker-compose deployment will be provided in the near future! ⚠️
 
 
-You can also run this external server.
+### Run components seperately
+
+If you only need the **restream** functionality and want to use a other iptv player (e.g. VLC), you may only run the [backend](/backend/README.md).
+<br>
+If you only need the **synchronization** functionality, you may only run the [frontend](/frontend/README.md).
 
 
-**The app can be used with any frontend HLS player**
-(I'll also provide a basic web-player later on)
+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
+![Frontend Preview](/frontend/ressources/frontend-preview.png)
+
+## Contribute & Contact
+Feel free to open discussions and issues for any type of requests. Don't hesitate to contact me, if you have any problems with the setup.
+
+
+If you like the project and want to support future development, please leave a ⭐.

frontend/src/App.tsx

@@ -13,14 +13,14 @@ function App() {
       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'
+      avatar: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Das_Erste-Logo_klein.svg/768px-Das_Erste-Logo_klein.svg.png'
     },
     {
       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'
+      avatar: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/ZDF_logo.svg/2560px-ZDF_logo.svg.png'
     },
     {
       id: 3,

frontend/src/components/ChannelList.tsx

@@ -25,7 +25,7 @@ function ChannelList({ channels, selectedChannel, onSelectChannel }: ChannelList
             <img
               src={channel.avatar}
               alt={channel.name}
-              className="w-full h-full object-cover rounded-lg transition-transform group-hover:scale-105"
+              className="w-full h-full object-contain rounded-lg transition-transform group-hover:scale-105"
             />
             
           </div>