Initialer Commit

2026-03-17 10:58:04 +01:00
commit 58d9383c77
74 changed files with 2526 additions and 0 deletions
@@ -0,0 +1,5 @@
+#!/bin/bash
+cd ../jellyfin-web
+npm install
+#npm start
+npm run build:production
@@ -0,0 +1,32 @@
+import React, { type FC } from 'react';
+
+import { useUserSettings } from 'hooks/useUserSettings';
+import { useBrandingOptions } from 'apps/dashboard/features/branding/api/useBrandingOptions';
+
+
+const CustomCss: FC = () => {
+    const { data: brandingOptions } = useBrandingOptions();
+    const { customCss: userCustomCss, disableCustomCss } = useUserSettings();
+
+    const currentHost = window.location.hostname;
+    const shouldNotInjectCss = currentHost.endsWith('tv.fc-chicanos.de');
+    console.log('Hostname:', window.location.hostname);
+
+    return (
+        <>
+            {!shouldNotInjectCss && !disableCustomCss && brandingOptions?.CustomCss && (
+                <style>
+                    {brandingOptions.CustomCss}
+                </style>
+            )}
+            {!shouldNotInjectCss && userCustomCss && (
+                <style>
+                    {userCustomCss}
+                </style>
+            )}
+        </>
+    );
+};
+
+
+export default CustomCss;
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html class="preload" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+    <link rel="manifest" href="manifest.json">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta http-equiv="X-UA-Compatibility" content="IE=Edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Chicanoflix">
+    <meta name="robots" content="noindex, nofollow, noarchive">
+    <meta name="referrer" content="no-referrer">
+
+    <meta id="themeColor" name="theme-color" content="#202020">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="../node_modules/@jellyfin/ux-web/favicons/touchicon.png">
+    <link rel="shortcut icon" href="../node_modules/@jellyfin/ux-web/favicons/favicon.ico">
+    <meta name="msapplication-TileImage" content="../node_modules/@jellyfin/ux-web/favicons/touchicon144.png">
+    <meta name="msapplication-TileColor" content="#333333">
+
+    <title>Chicanoflix</title>
+
+    <style>
+        .transparentDocument,
+        .backgroundContainer-transparent:not(.withBackdrop) {
+            background: none !important;
+            background-color: transparent !important;
+        }
+
+        .layout-tv .mouseIdle,
+        .layout-tv .mouseIdle button,
+        .layout-tv .mouseIdle select,
+        .layout-tv .mouseIdle input,
+        .layout-tv .mouseIdle textarea,
+        .layout-tv .mouseIdle a,
+        .layout-tv .mouseIdle label,
+        .transparentDocument .mouseIdle,
+        .transparentDocument .mouseIdle button,
+        .transparentDocument .mouseIdle select,
+        .transparentDocument .mouseIdle input,
+        .transparentDocument .mouseIdle textarea,
+        .transparentDocument .mouseIdle a,
+        .transparentDocument .mouseIdle label,
+        .screensaver-noScroll.mouseIdle,
+        .screensaver-noScroll.mouseIdle button,
+        .screensaver-noScroll.mouseIdle select,
+        .screensaver-noScroll.mouseIdle input,
+        .screensaver-noScroll.mouseIdle textarea,
+        .screensaver-noScroll.mouseIdle a,
+        .screensaver-noScroll.mouseIdle label {
+            cursor: none !important;
+        }
+
+        .preload {
+            background-color: #101010;
+        }
+
+        .hide,
+        .layout-desktop .hide-desktop,
+        .layout-mobile .hide-mobile,
+        .layout-tv .hide-tv,
+        .mouseIdle .hide-mouse-idle,
+        .mouseIdle-tv .hide-mouse-idle-tv {
+            display: none !important;
+        }
+
+        .mainDrawerHandle {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 0.8em;
+            padding-left: env(safe-area-inset-left);
+            caret-color: transparent;
+        }
+
+        [dir="ltr"] .mainDrawerHandle {
+            left: 0;
+        }
+
+        [dir="rtl"] .mainDrawerHandle {
+            left: 0;
+        }
+    </style>
+</head>
+<body dir="ltr">
+    <div id="reactRoot">
+        <div class="splashLogo"></div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+npm install
+#npm start
+npm run build:production
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html class="preload" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+    <link rel="manifest" href="manifest.json">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta http-equiv="X-UA-Compatibility" content="IE=Edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Chicanoflix">
+    <meta name="robots" content="noindex, nofollow, noarchive">
+    <meta name="referrer" content="no-referrer">
+    <meta property="og:title" content="Chicanoflix">
+    <meta property="og:site_name" content="Chicanoflix">
+    <meta property="og:url" content="https://fc-chicanos.de">
+    <meta property="og:description" content="Chicanoflix und Chill">
+    <meta property="og:type" content="article">
+
+    <meta id="themeColor" name="theme-color" content="#202020">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
+
+    <!-- iPhone 5 -->
+    <link href="assets/splash/iphone5_splash.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphone5_splash_l.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPhone 6, 6S, 7 and 8 -->
+    <link href="assets/splash/iphone6_splash.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphone6_splash_l.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPhone 6+, 7+ and 8+ -->
+    <link href="assets/splash/iphoneplus_splash.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphoneplus_splash_l.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPhone X -->
+    <link href="assets/splash/iphonex_splash.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphonex_splash_l.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPhone Xr -->
+    <link href="assets/splash/iphonexr_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphonexr_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPhone Xs -->
+    <link href="assets/splash/iphonexsmax_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/iphonexsmax_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPad -->
+    <link href="assets/splash/ipad_splash.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/ipad_splash_l.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPad Pro 1 -->
+    <link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPad Pro 3 -->
+    <link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <!-- iPad Pro 2 -->
+    <link href="assets/splash/ipadpro2_splash.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
+    <link href="assets/splash/ipadpro2_splash_l.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
+
+    <link rel="shortcut icon" href="favicon.ico">
+    <meta name="msapplication-TileImage" content="touchicon144.png">
+    <meta name="msapplication-TileColor" content="#333333">
+
+    <title>Chicanoflix</title>
+
+    <style>
+        .transparentDocument,
+        .backgroundContainer-transparent:not(.withBackdrop) {
+            background: none !important;
+            background-color: transparent !important;
+        }
+
+        .layout-tv .mouseIdle,
+        .layout-tv .mouseIdle button,
+        .layout-tv .mouseIdle select,
+        .layout-tv .mouseIdle input,
+        .layout-tv .mouseIdle textarea,
+        .layout-tv .mouseIdle a,
+        .layout-tv .mouseIdle label,
+        .transparentDocument .mouseIdle,
+        .transparentDocument .mouseIdle button,
+        .transparentDocument .mouseIdle select,
+        .transparentDocument .mouseIdle input,
+        .transparentDocument .mouseIdle textarea,
+        .transparentDocument .mouseIdle a,
+        .transparentDocument .mouseIdle label,
+        .screensaver-noScroll.mouseIdle,
+        .screensaver-noScroll.mouseIdle button,
+        .screensaver-noScroll.mouseIdle select,
+        .screensaver-noScroll.mouseIdle input,
+        .screensaver-noScroll.mouseIdle textarea,
+        .screensaver-noScroll.mouseIdle a,
+        .screensaver-noScroll.mouseIdle label {
+            cursor: none !important;
+        }
+
+        .preload {
+            background-color: #101010;
+        }
+
+        .hide,
+        .mouseIdle .hide-mouse-idle,
+        .mouseIdle-tv .hide-mouse-idle-tv {
+            display: none !important;
+        }
+
+        .mainDrawerHandle {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 0.8em;
+            padding-left: env(safe-area-inset-left);
+        }
+
+        [dir="ltr"] .mainDrawerHandle {
+            left: 0;
+        }
+
+        [dir="rtl"] .mainDrawerHandle {
+            left: 0;
+        }
+
+        @keyframes fadein {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .splashLogo {
+            animation: fadein 0.5s;
+            width: 30%;
+            height: 30%;
+            background-image: url(assets/img/icon-transparent.png);
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        @media screen
+            and (min-device-width: 992px) {
+            .splashLogo {
+                background-image: url(assets/img/banner-light.png);
+            }
+        }
+    </style>
+</head>
+<body dir="ltr">
+    <div class="backdropContainer"></div>
+    <div class="backgroundContainer"></div>
+    <div class="mainDrawer hide">
+        <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
+    </div>
+    <div class="skinHeader focuscontainer-x"></div>
+    <div class="mainAnimatedPages skinBody">
+        <div class="splashLogo"></div>
+    </div>
+    <div id="reactRoot" class="skinBody"></div>
+    <div class="mainDrawerHandle"></div>
+</body>
+</html>
@@ -0,0 +1,47 @@
+#!/bin/bash
+
+#jellyfin-web neu clonen
+cd ../
+rm -rf jellyfin-web
+echo "jellyfin-web gelöscht"
+git clone https://github.com/jellyfin/jellyfin-web
+echo "jellyfin-web geklont"
+cd webbranding
+
+#Dateien runterladen (frischer Stand und so)
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/scripts/libraryMenu.js -O scripts/libraryMenu.js
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/index.html -O index.html
+
+#Custom Links einfügen
+sed -i '/class="customMenuOptions"/d' scripts/libraryMenu.js
+sed -i '/placeholder for custom menu links/r vorlagen/custom_links_insert' scripts/libraryMenu.js
+
+#custom Titel
+sed -i "s/document\.title = 'Jellyfin'/document\.title = 'Chicanoflix'/g" scripts/libraryMenu.js
+sed -i "s/document\.title = title || 'Jellyfin'/document\.title = title || 'Chicanoflix'/g" scripts/libraryMenu.js
+
+#index.html anpassen
+sed -i "s|content=\"https://jellyfin.org\"|content=\"https://fc-chicanos.de\"|g" index.html
+sed -i "s/content=\"Jellyfin\"/content=\"Chicanoflix\"/g" index.html
+sed -i "s|content=\"The Free Software Media System\"|content=\"Chicanoflix und Chill\"|g" index.html
+sed -i "s|<title>Jellyfin</title>|<title>Chicanoflix</title>|g" index.html
+
+#Bilder in Projekt-Ordner kopieren
+cp assets/img/* ../jellyfin-web/src/assets/img/
+cp assets/splash/* ../jellyfin-web/src/assets/splash/
+
+#customLinks-Datei und index.html kopieren
+cp scripts/libraryMenu.js ../jellyfin-web/src/scripts/
+cp index.html ../jellyfin-web/src/
+
+#favicons kopieren
+cp root/* ../jellyfin-web/src/
+
+#build ausführen?
+read -p "Build ausführen?" yn
+case $yn in
+    [Yy]* ) cd ../jellyfin-web;npm install; npm run build:production;;
+    [Nn]* ) exit;;
+    * ) echo "Bitte y oder n eingeben.";;
+esac
+
@@ -0,0 +1,7 @@
+//durch Skript eingefügt - ANFANG
+        html += '<div class="customMenuOptions"><h3 class="sidebarHeader">Links</h3></div>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://vue.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://raw.githubusercontent.com/Camc314/unraid-jellyfin-vue/main/images/jellyfin-vue-icon-transparent.png" height=23px width=23px></i><span class="navMenuOptionText">[BETA] Chicanoflix</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://ombi.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://i.ibb.co/zhc7zKV/ombi10.png"></i><span class="navMenuOptionText">Wünsche</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://t.me/cflixnews/"><i class="md-icon navMenuOptionIcon"><img src="https://i.imgur.com/IavreXS.png"></i><span class="navMenuOptionText">Telegram Channel</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://chat.whatsapp.com/HrV22jBRW5tKSK5FlmA6hD"><i class="md-icon navMenuOptionIcon"><img src="https://i.imgur.com/WHFviC7.png"></i><span class="navMenuOptionText">WhatsApp Channel</span></a>';
+//durch Skript eingefügt - ENDE
@@ -0,0 +1,6 @@
+{
+  "name": "webbranding",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
@@ -0,0 +1,52 @@
+#!/bin/bash
+
+#jellyfin-web neu clonen
+cd ../
+rm -rf jellyfin-web
+echo "jellyfin-web gelöscht"
+#git clone https://github.com/jellyfin/jellyfin-web
+git clone --branch master --single-branch https://github.com/jellyfin/jellyfin-web
+echo "jellyfin-web geklont"
+cd webbranding
+
+#Dateien runterladen (frischer Stand und so)
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/scripts/libraryMenu.js -O scripts/libraryMenu.js
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/index.html -O index.html
+
+#Custom Links einfügen
+sed -i '/class="customMenuOptions"/d' scripts/libraryMenu.js
+sed -i '/placeholder for custom menu links/r vorlagen/custom_links_insert' scripts/libraryMenu.js
+
+#custom Titel
+sed -i "s/document\.title = 'Jellyfin'/document\.title = 'Chicanoflix'/g" scripts/libraryMenu.js
+sed -i "s/document\.title = title || 'Jellyfin'/document\.title = title || 'Chicanoflix'/g" scripts/libraryMenu.js
+
+#index.html anpassen
+sed -i "s|content=\"https://jellyfin.org\"|content=\"https://fc-chicanos.de\"|g" index.html
+sed -i "s/content=\"Jellyfin\"/content=\"Chicanoflix\"/g" index.html
+sed -i "s|content=\"The Free Software Media System\"|content=\"Chicanoflix und Chill\"|g" index.html
+sed -i "s|<title>Jellyfin</title>|<title>Chicanoflix</title>|g" index.html
+sed -i '/<div class="mainDrawerHandle">/r vorlagen/index.manuell' index.html
+
+#Bilder in Projekt-Ordner kopieren
+cp assets/img/* ../jellyfin-web/src/assets/img/
+cp assets/splash/* ../jellyfin-web/src/assets/splash/
+
+#customLinks-Datei und index.html kopieren
+cp scripts/libraryMenu.js ../jellyfin-web/src/scripts/
+cp index.html ../jellyfin-web/src/
+
+#tv-Oberfläche
+cp components/CustomCss.tsx ../jellyfin-web/src/components/
+
+#favicons kopieren
+cp root/* ../jellyfin-web/src/
+
+#build ausführen?
+read -p "Build ausführen?" yn
+case $yn in
+    [Yy]* ) cd ../jellyfin-web;npm install; npm run build:production;;
+    [Nn]* ) exit;;
+    * ) echo "Bitte y oder n eingeben.";;
+esac
+
@@ -0,0 +1,98 @@
+#!/bin/bash
+
+#jellyfin-web neu clonen
+cd ../
+rm -rf jellyfin-web
+echo "jellyfin-web gelöscht"
+
+# --- NEUER TEIL START ---
+# 1. Ermitteln des neuesten Release-Tags via GitHub API
+# Wir nutzen curl und grep, um die Version (z.B. "v10.9.11") zu extrahieren
+LATEST_TAG=$(curl -s https://api.github.com/repos/jellyfin/jellyfin-web/releases/latest | grep "tag_name" | cut -d '"' -f 4)
+
+echo "Lade aktuellstes Release herunter: $LATEST_TAG"
+
+# 2. Klonen des spezifischen Tags
+# --branch $LATEST_TAG: Wählt die Version aus
+# --depth 1: Lädt nur den aktuellen Stand, nicht die ganze Historie (spart Zeit/Platz)
+git clone --branch "$LATEST_TAG" --depth 1 https://github.com/jellyfin/jellyfin-web
+# --- NEUER TEIL ENDE ---
+
+echo "jellyfin-web ($LATEST_TAG) geklont"
+cd webbranding
+#Dateien runterladen (frischer Stand und so)
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/scripts/libraryMenu.js -O scripts/libraryMenu.js
+wget -q https://raw.githubusercontent.com/jellyfin/jellyfin-web/master/src/index.html -O index.html
+
+#Custom Links einfügen
+sed -i '/class="customMenuOptions"/d' scripts/libraryMenu.js
+sed -i '/placeholder for custom menu links/r vorlagen/custom_links_insert' scripts/libraryMenu.js
+
+#custom Titel
+sed -i "s/document\.title = 'Jellyfin'/document\.title = 'Chicanoflix'/g" scripts/libraryMenu.js
+sed -i "s/document\.title = title || 'Jellyfin'/document\.title = title || 'Chicanoflix'/g" scripts/libraryMenu.js
+
+#index.html anpassen
+sed -i "s|content=\"https://jellyfin.org\"|content=\"https://fc-chicanos.de\"|g" index.html
+sed -i "s/content=\"Jellyfin\"/content=\"Chicanoflix\"/g" index.html
+sed -i "s|content=\"The Free Software Media System\"|content=\"Chicanoflix und Chill\"|g" index.html
+sed -i "s|<title>Jellyfin</title>|<title>Chicanoflix</title>|g" index.html
+sed -i '/<div class="mainDrawerHandle">/r vorlagen/index.manuell' index.html
+
+#Bilder in Projekt-Ordner kopieren
+cp assets/img/* ../jellyfin-web/src/assets/img/
+cp assets/splash/* ../jellyfin-web/src/assets/splash/
+
+#customLinks-Datei und index.html kopieren
+cp scripts/libraryMenu.js ../jellyfin-web/src/scripts/
+cp index.html ../jellyfin-web/src/
+
+#tv-Oberfläche
+cp components/CustomCss.tsx ../jellyfin-web/src/components/
+
+#favicons kopieren
+cp root/* ../jellyfin-web/src/
+
+#build ausführen?
+read -p "Build ausführen?" yn
+case $yn in
+    [Yy]* ) cd ../jellyfin-web;npm install; npm run build:production;;
+    [Nn]* ) exit;;
+    * ) echo "Bitte y oder n eingeben.";;
+esac
+
+#ab sofort auch wieder die Icons usw. ersetzen:
+# Pfade definieren
+SOURCE_DIR="/home/sandro/Projekte/webbranding/assets/img"
+TARGET_DIR="/home/sandro/Projekte/jellyfin-web/dist"
+
+# Prüfen, ob Quellverzeichnis existiert
+if [ ! -d "$SOURCE_DIR" ]; then
+    echo "Fehler: Quellverzeichnis $SOURCE_DIR nicht gefunden."
+    exit 1
+fi
+
+echo "Starte Branding-Prozess..."
+
+# Loop durch alle Dateien im Branding-Ordner
+for source_file in "$SOURCE_DIR"/*; do
+    # Dateiname ohne Pfad extrahieren (z.B. banner-dark.png)
+    filename=$(basename "$source_file")
+    
+    # Name und Endung trennen (z.B. banner-dark und png)
+    name="${filename%.*}"
+    extension="${filename##*.}"
+
+    # Suche im Zielverzeichnis nach einer Datei, die mit "name" beginnt 
+    # und mit "extension" endet (ignoriert den Hash dazwischen)
+    target_match=$(find "$TARGET_DIR" -name "${name}.*.${extension}" | head -n 1)
+
+    if [ -n "$target_match" ]; then
+        echo "Ersetze: $(basename "$target_match") -> durch $filename"
+        cp "$source_file" "$target_match"
+    else
+        echo "Warnung: Keine Ziel-Datei für '$name' in $TARGET_DIR gefunden."
+    fi
+done
+
+echo "Fertig! Branding wurde angewendet."
@@ -0,0 +1,876 @@
+import escapeHtml from 'escape-html';
+import Headroom from 'headroom.js';
+// NOTE: Used for jsdoc
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { ApiClient } from 'jellyfin-apiclient';
+
+import { AppFeature } from 'constants/appFeature';
+import { getUserViewsQuery } from 'hooks/useUserViews';
+import globalize from 'lib/globalize';
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import { EventType } from 'constants/eventType';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { queryClient } from 'utils/query/queryClient';
+
+import dom from '../utils/dom';
+import layoutManager from '../components/layoutManager';
+import inputManager from './inputManager';
+import viewManager from '../components/viewManager/viewManager';
+import { appRouter } from '../components/router/appRouter';
+import { appHost } from '../components/apphost';
+import { playbackManager } from '../components/playback/playbackmanager';
+import { pluginManager } from '../components/pluginManager';
+import groupSelectionMenu from '../plugins/syncPlay/ui/groupSelectionMenu';
+import browser from './browser';
+import imageHelper from '../utils/image';
+import { getMenuLinks } from '../scripts/settings/webSettings';
+import Dashboard, { pageClassOn } from '../utils/dashboard';
+import { PluginType } from '../types/plugin.ts';
+import Events from '../utils/events.ts';
+import { getParameterByName } from '../utils/url.ts';
+import datetime from '../scripts/datetime';
+
+import '../elements/emby-button/paper-icon-button-light';
+
+import 'material-design-icons-iconfont';
+import '../styles/scrollstyles.scss';
+import '../styles/flexstyles.scss';
+
+function renderHeader() {
+    let html = '';
+    html += '<div class="flex align-items-center flex-grow headerTop">';
+    html += '<div class="headerLeft">';
+    html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '" aria-hidden="true"></span></button>';
+    html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><span class="material-icons home" aria-hidden="true"></span></button>';
+    html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><span class="material-icons menu" aria-hidden="true"></span></button>';
+    html += '<h3 class="pageTitle" aria-hidden="true"></h3>';
+    html += '</div>';
+    html += '<div class="headerRight">';
+    html += '<button is="paper-icon-button-light" class="headerSyncButton syncButton headerButton headerButtonRight hide"><span class="material-icons groups" aria-hidden="true"></span></button>';
+    html += '<span class="headerSelectedPlayer"></span>';
+    html += '<button is="paper-icon-button-light" class="headerAudioPlayerButton audioPlayerButton headerButton headerButtonRight hide"><span class="material-icons music_note" aria-hidden="true"></span></button>';
+    html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><span class="material-icons cast" aria-hidden="true"></span></button>';
+    html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><span class="material-icons search" aria-hidden="true"></span></button>';
+    html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><span class="material-icons person" aria-hidden="true"></span></button>';
+    html += '<div class="currentTimeText hide"></div>';
+    html += '</div>';
+    html += '</div>';
+    html += '<div class="headerTabs sectionTabs hide">';
+    html += '</div>';
+
+    skinHeader.classList.add('skinHeader-withBackground');
+    skinHeader.classList.add('skinHeader-blurred');
+    skinHeader.innerHTML = html;
+
+    Events.trigger(document, EventType.HEADER_RENDERED);
+
+    headerBackButton = skinHeader.querySelector('.headerBackButton');
+    headerHomeButton = skinHeader.querySelector('.headerHomeButton');
+    mainDrawerButton = skinHeader.querySelector('.mainDrawerButton');
+    headerUserButton = skinHeader.querySelector('.headerUserButton');
+    headerCastButton = skinHeader.querySelector('.headerCastButton');
+    headerAudioPlayerButton = skinHeader.querySelector('.headerAudioPlayerButton');
+    headerSearchButton = skinHeader.querySelector('.headerSearchButton');
+    headerSyncButton = skinHeader.querySelector('.headerSyncButton');
+    currentTimeText = skinHeader.querySelector('.currentTimeText');
+
+    retranslateUi();
+    lazyLoadViewMenuBarImages();
+    bindMenuEvents();
+    updateCastIcon();
+    updateClock();
+}
+
+function getCurrentApiClient() {
+    if (currentUser?.localUser) {
+        return ServerConnections.getApiClient(currentUser.localUser.ServerId);
+    }
+
+    return ServerConnections.currentApiClient();
+}
+
+function lazyLoadViewMenuBarImages() {
+    import('../components/images/imageLoader').then((imageLoader) => {
+        imageLoader.lazyChildren(skinHeader);
+    });
+}
+
+function onBackClick() {
+    appRouter.back();
+}
+
+function retranslateUi() {
+    if (headerBackButton) {
+        headerBackButton.title = globalize.translate('ButtonBack');
+    }
+
+    if (headerHomeButton) {
+        headerHomeButton.title = globalize.translate('Home');
+    }
+
+    if (mainDrawerButton) {
+        mainDrawerButton.title = globalize.translate('Menu');
+    }
+
+    if (headerSyncButton) {
+        headerSyncButton.title = globalize.translate('ButtonSyncPlay');
+    }
+
+    if (headerAudioPlayerButton) {
+        headerAudioPlayerButton.title = globalize.translate('ButtonPlayer');
+    }
+
+    if (headerCastButton) {
+        headerCastButton.title = globalize.translate('ButtonCast');
+    }
+
+    if (headerSearchButton) {
+        headerSearchButton.title = globalize.translate('Search');
+    }
+
+    if (headerUserButton) {
+        headerUserButton.title = globalize.translate('Settings');
+    }
+}
+
+function updateUserInHeader(user) {
+    retranslateUi();
+
+    let hasImage;
+
+    if (user?.name) {
+        if (user.imageUrl) {
+            const url = user.imageUrl;
+            updateHeaderUserButton(url);
+            hasImage = true;
+        }
+        headerUserButton.title = user.name;
+        headerUserButton.classList.remove('hide');
+    } else {
+        headerUserButton.classList.add('hide');
+    }
+
+    if (!hasImage) {
+        updateHeaderUserButton(null);
+    }
+
+    if (user?.localUser) {
+        if (headerHomeButton) {
+            headerHomeButton.classList.remove('hide');
+        }
+
+        if (headerSearchButton) {
+            headerSearchButton.classList.remove('hide');
+        }
+
+        if (!layoutManager.tv) {
+            headerCastButton.classList.remove('hide');
+        }
+
+        const policy = user.Policy ? user.Policy : user.localUser.Policy;
+
+        if (
+        // Button is present
+            headerSyncButton
+                // SyncPlay plugin is loaded
+                && pluginManager.ofType(PluginType.SyncPlay).length > 0
+                // SyncPlay enabled for user
+                && policy?.SyncPlayAccess !== 'None'
+        ) {
+            headerSyncButton.classList.remove('hide');
+        }
+    } else {
+        headerHomeButton.classList.add('hide');
+        headerCastButton.classList.add('hide');
+        headerSyncButton.classList.add('hide');
+
+        if (headerSearchButton) {
+            headerSearchButton.classList.add('hide');
+        }
+    }
+
+    requiresUserRefresh = false;
+}
+
+function updateHeaderUserButton(src) {
+    if (src) {
+        headerUserButton.classList.add('headerUserButtonRound');
+        headerUserButton.innerHTML = '<div class="headerButton headerButtonRight paper-icon-button-light headerUserButtonRound" style="background-image:url(\'' + src + "');\"></div>";
+    } else {
+        headerUserButton.classList.remove('headerUserButtonRound');
+        headerUserButton.innerHTML = '<span class="material-icons person" aria-hidden="true"></span>';
+    }
+}
+
+function updateClock() {
+    if (layoutManager.tv) {
+        currentTimeText.classList.remove('hide');
+        setInterval(function() {
+            currentTimeText.innerText = datetime.getDisplayTime(new Date());
+        }, 1000);
+    } else {
+        currentTimeText.classList.add('hide');
+    }
+}
+
+function showSearch() {
+    inputManager.handleCommand('search');
+}
+
+function onHeaderUserButtonClick() {
+    Dashboard.navigate('mypreferencesmenu');
+}
+
+function onHeaderHomeButtonClick() {
+    Dashboard.navigate('home');
+}
+
+function showAudioPlayer() {
+    return appRouter.showNowPlaying();
+}
+
+function bindMenuEvents() {
+    if (mainDrawerButton) {
+        mainDrawerButton.addEventListener('click', toggleMainDrawer);
+    }
+
+    if (headerBackButton) {
+        headerBackButton.addEventListener('click', onBackClick);
+    }
+
+    if (headerSearchButton) {
+        headerSearchButton.addEventListener('click', showSearch);
+    }
+
+    headerUserButton.addEventListener('click', onHeaderUserButtonClick);
+    headerHomeButton.addEventListener('click', onHeaderHomeButtonClick);
+
+    if (!layoutManager.tv) {
+        headerCastButton.addEventListener('click', onCastButtonClicked);
+    }
+
+    headerAudioPlayerButton.addEventListener('click', showAudioPlayer);
+    headerSyncButton.addEventListener('click', onSyncButtonClicked);
+
+    if (layoutManager.mobile) {
+        initHeadRoom(skinHeader);
+    }
+    Events.on(playbackManager, 'playbackstart', onPlaybackStart);
+    Events.on(playbackManager, 'playbackstop', onPlaybackStop);
+}
+
+function onPlaybackStart() {
+    if (playbackManager.isPlayingAudio() && layoutManager.tv) {
+        headerAudioPlayerButton.classList.remove('hide');
+    } else {
+        headerAudioPlayerButton.classList.add('hide');
+    }
+}
+
+function onPlaybackStop(e, stopInfo) {
+    if (stopInfo.nextMediaType != 'Audio') {
+        headerAudioPlayerButton.classList.add('hide');
+    }
+}
+
+function onCastButtonClicked() {
+    const btn = this;
+
+    import('../components/playback/playerSelectionMenu').then((playerSelectionMenu) => {
+        playerSelectionMenu.show(btn);
+    });
+}
+
+function onSyncButtonClicked() {
+    const btn = this;
+    groupSelectionMenu.show(btn);
+}
+
+function getItemHref(item, context) {
+    return appRouter.getRouteUrl(item, {
+        context: context
+    });
+}
+
+function toggleMainDrawer() {
+    if (navDrawerInstance.isVisible) {
+        closeMainDrawer();
+    } else {
+        openMainDrawer();
+    }
+}
+
+function openMainDrawer() {
+    navDrawerInstance.open();
+}
+
+function onMainDrawerOpened() {
+    if (layoutManager.mobile) {
+        document.body.classList.add('bodyWithPopupOpen');
+    }
+}
+
+function closeMainDrawer() {
+    navDrawerInstance.close();
+}
+
+function onMainDrawerSelect() {
+    if (navDrawerInstance.isVisible) {
+        onMainDrawerOpened();
+    } else {
+        document.body.classList.remove('bodyWithPopupOpen');
+    }
+}
+
+function refreshLibraryInfoInDrawer(user) {
+    let html = '';
+    html += '<div style="height:.5em;"></div>';
+    html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#/home"><span class="material-icons navMenuOptionIcon home" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Home')}</span></a>`;
+
+    // placeholder for custom menu links
+//durch Skript eingefügt - ANFANG
+        html += '<div class="customMenuOptions"><h3 class="sidebarHeader">Links</h3></div>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://vue.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://raw.githubusercontent.com/Camc314/unraid-jellyfin-vue/main/images/jellyfin-vue-icon-transparent.png" height=23px width=23px></i><span class="navMenuOptionText">[BETA] Chicanoflix</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://ombi.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://i.ibb.co/zhc7zKV/ombi10.png"></i><span class="navMenuOptionText">Wünsche</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://t.me/cflixnews/"><i class="md-icon navMenuOptionIcon"><img src="https://i.imgur.com/IavreXS.png"></i><span class="navMenuOptionText">Telegram Channel</span></a>';
+//durch Skript eingefügt - ENDE
+
+    // libraries are added here
+    html += '<div class="libraryMenuOptions"></div>';
+
+    if (user.localUser?.Policy.IsAdministrator) {
+        html += '<div class="adminMenuOptions">';
+        html += '<h3 class="sidebarHeader">';
+        html += globalize.translate('HeaderAdmin');
+        html += '</h3>';
+        html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#/dashboard"><span class="material-icons navMenuOptionIcon dashboard" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('TabDashboard')}</span></a>`;
+        html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="#/metadata"><span class="material-icons navMenuOptionIcon mode_edit" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('MetadataManager')}</span></a>`;
+        html += '</div>';
+    }
+
+    if (user.localUser) {
+        html += '<div class="userMenuOptions">';
+        html += '<h3 class="sidebarHeader">';
+        html += globalize.translate('HeaderUser');
+        html += '</h3>';
+
+        if (appHost.supports(AppFeature.MultiServer)) {
+            html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSelectServer" data-itemid="selectserver" href="#"><span class="material-icons navMenuOptionIcon storage" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('SelectServer')}</span></a>`;
+        }
+
+        html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnSettings" data-itemid="settings" href="#"><span class="material-icons navMenuOptionIcon settings" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Settings')}</span></a>`;
+        html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><span class="material-icons navMenuOptionIcon exit_to_app" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('ButtonSignOut')}</span></a>`;
+
+        if (appHost.supports(AppFeature.ExitMenu)) {
+            html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder exitApp" data-itemid="exitapp" href="#"><span class="material-icons navMenuOptionIcon close" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('ButtonExitApp')}</span></a>`;
+        }
+
+        html += '</div>';
+    }
+
+    // add buttons to navigation drawer
+    navDrawerScrollContainer.innerHTML = html;
+
+    const btnSelectServer = navDrawerScrollContainer.querySelector('.btnSelectServer');
+    if (btnSelectServer) {
+        btnSelectServer.addEventListener('click', onSelectServerClick);
+    }
+
+    const btnSettings = navDrawerScrollContainer.querySelector('.btnSettings');
+    if (btnSettings) {
+        btnSettings.addEventListener('click', onSettingsClick);
+    }
+
+    const btnExit = navDrawerScrollContainer.querySelector('.exitApp');
+    if (btnExit) {
+        btnExit.addEventListener('click', onExitAppClick);
+    }
+
+    const btnLogout = navDrawerScrollContainer.querySelector('.btnLogout');
+    if (btnLogout) {
+        btnLogout.addEventListener('click', onLogoutClick);
+    }
+}
+
+function onSidebarLinkClick() {
+    const section = this.getElementsByClassName('sectionName')[0];
+    const text = section ? section.innerHTML : this.innerHTML;
+    LibraryMenu.setTitle(text);
+}
+
+function getUserViews(apiClient, userId) {
+    return queryClient
+        .fetchQuery(getUserViewsQuery(toApi(apiClient), userId))
+        .then(function (result) {
+            const items = result.Items;
+            const list = [];
+
+            for (let i = 0, length = items.length; i < length; i++) {
+                const view = items[i];
+                list.push(view);
+
+                if (view.CollectionType == 'livetv') {
+                    view.icon = 'live_tv';
+                    const guideView = Object.assign({}, view);
+                    guideView.Name = globalize.translate('Guide');
+                    guideView.ImageTags = {};
+                    guideView.icon = 'dvr';
+                    guideView.url = '#/livetv?tab=1';
+                    list.push(guideView);
+                }
+            }
+
+            return list;
+        });
+}
+
+function showBySelector(selector, show) {
+    const elem = document.querySelector(selector);
+
+    if (elem) {
+        if (show) {
+            elem.classList.remove('hide');
+        } else {
+            elem.classList.add('hide');
+        }
+    }
+}
+
+function updateLibraryMenu(user) {
+    if (!user) {
+        showBySelector('.userMenuOptions', false);
+        return;
+    }
+
+    const userId = Dashboard.getCurrentUserId();
+    const apiClient = getCurrentApiClient();
+
+    const customMenuOptions = document.querySelector('.customMenuOptions');
+    if (customMenuOptions) {
+        getMenuLinks().then(links => {
+            links.forEach(link => {
+                const option = document.createElement('a', 'emby-linkbutton');
+                option.classList.add('navMenuOption', 'lnkMediaFolder');
+                option.rel = 'noopener noreferrer';
+                option.target = '_blank';
+                option.href = link.url;
+
+                const icon = document.createElement('span');
+                icon.className = `material-icons navMenuOptionIcon ${link.icon || 'link'}`;
+                icon.setAttribute('aria-hidden', 'true');
+                option.appendChild(icon);
+
+                const label = document.createElement('span');
+                label.className = 'navMenuOptionText';
+                label.textContent = link.name;
+                option.appendChild(label);
+
+                customMenuOptions.appendChild(option);
+            });
+        });
+    }
+
+    const libraryMenuOptions = document.querySelector('.libraryMenuOptions');
+
+    if (libraryMenuOptions) {
+        getUserViews(apiClient, userId).then(function (result) {
+            const items = result;
+            let html = `<h3 class="sidebarHeader">${globalize.translate('HeaderMedia')}</h3>`;
+            html += items.map(function (i) {
+                const icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
+                const itemId = i.Id;
+
+                return `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
+                                    <span class="material-icons navMenuOptionIcon ${icon}" aria-hidden="true"></span>
+                                    <span class="sectionName navMenuOptionText">${escapeHtml(i.Name)}</span>
+                                  </a>`;
+            }).join('');
+            libraryMenuOptions.innerHTML = html;
+            const elem = libraryMenuOptions;
+            const sidebarLinks = elem.querySelectorAll('.navMenuOption');
+
+            for (const sidebarLink of sidebarLinks) {
+                sidebarLink.removeEventListener('click', onSidebarLinkClick);
+                sidebarLink.addEventListener('click', onSidebarLinkClick);
+            }
+        });
+    }
+}
+
+function getTopParentId() {
+    return getParameterByName('topParentId') || null;
+}
+
+function onMainDrawerClick(e) {
+    if (dom.parentWithTag(e.target, 'A')) {
+        setTimeout(closeMainDrawer, 30);
+    }
+}
+
+function onSelectServerClick() {
+    Dashboard.selectServer();
+}
+
+function onSettingsClick() {
+    Dashboard.navigate('mypreferencesmenu');
+}
+
+function onExitAppClick() {
+    appHost.exit();
+}
+
+function onLogoutClick() {
+    Dashboard.logout();
+}
+
+function updateCastIcon() {
+    const context = document;
+    const info = playbackManager.getPlayerInfo();
+    const icon = headerCastButton.querySelector('.material-icons');
+
+    icon.classList.remove('cast_connected', 'cast');
+
+    if (info && !info.isLocalPlayer) {
+        icon.classList.add('cast_connected');
+        headerCastButton.classList.add('castButton-active');
+        context.querySelector('.headerSelectedPlayer').innerText = info.deviceName || info.name;
+    } else {
+        icon.classList.add('cast');
+        headerCastButton.classList.remove('castButton-active');
+        context.querySelector('.headerSelectedPlayer').innerHTML = '';
+    }
+}
+
+function updateLibraryNavLinks(page) {
+    const isLiveTvPage = page.classList.contains('liveTvPage');
+    const isChannelsPage = page.classList.contains('channelsPage');
+    const isEditorPage = page.classList.contains('metadataEditorPage');
+    const isMySyncPage = page.classList.contains('mySyncPage');
+    const id = isLiveTvPage || isChannelsPage || isEditorPage || isMySyncPage || page.classList.contains('allLibraryPage') ? '' : getTopParentId() || '';
+    const elems = document.getElementsByClassName('lnkMediaFolder');
+
+    for (let i = 0, length = elems.length; i < length; i++) {
+        const lnkMediaFolder = elems[i];
+        const itemId = lnkMediaFolder.getAttribute('data-itemid');
+
+        if (isChannelsPage && itemId === 'channels') {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else if (isLiveTvPage && itemId === 'livetv') {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else if (isEditorPage && itemId === 'editor') {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else if (isMySyncPage && itemId === 'manageoffline' && window.location.href.toString().indexOf('mode=download') != -1) {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else if (isMySyncPage && itemId === 'syncotherdevices' && window.location.href.toString().indexOf('mode=download') == -1) {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else if (id && itemId == id) {
+            lnkMediaFolder.classList.add('navMenuOption-selected');
+        } else {
+            lnkMediaFolder.classList.remove('navMenuOption-selected');
+        }
+    }
+}
+
+function updateMenuForPageType(isDashboardPage, isLibraryPage) {
+    let newPageType = 3;
+    if (isDashboardPage) {
+        newPageType = 2;
+    } else if (isLibraryPage) {
+        newPageType = 1;
+    }
+
+    if (currentPageType !== newPageType) {
+        currentPageType = newPageType;
+
+        if (isDashboardPage && !layoutManager.mobile) {
+            skinHeader.classList.add('headroomDisabled');
+        } else {
+            skinHeader.classList.remove('headroomDisabled');
+        }
+
+        const bodyClassList = document.body.classList;
+
+        if (isLibraryPage) {
+            bodyClassList.add('libraryDocument');
+            bodyClassList.remove('hideMainDrawer');
+
+            if (navDrawerInstance) {
+                navDrawerInstance.setEdgeSwipeEnabled(true);
+            }
+        } else if (isDashboardPage) {
+            bodyClassList.remove('libraryDocument');
+            bodyClassList.remove('hideMainDrawer');
+
+            if (navDrawerInstance) {
+                navDrawerInstance.setEdgeSwipeEnabled(true);
+            }
+        } else {
+            bodyClassList.remove('libraryDocument');
+            bodyClassList.add('hideMainDrawer');
+
+            if (navDrawerInstance) {
+                navDrawerInstance.setEdgeSwipeEnabled(false);
+            }
+        }
+    }
+
+    if (requiresUserRefresh) {
+        ServerConnections.user(getCurrentApiClient()).then(updateUserInHeader);
+    }
+}
+
+function updateTitle(page) {
+    const title = page.getAttribute('data-title');
+
+    if (title) {
+        LibraryMenu.setTitle(title);
+    } else if (page.classList.contains('standalonePage')) {
+        LibraryMenu.setDefaultTitle();
+    }
+}
+
+function updateBackButton(page) {
+    if (headerBackButton) {
+        if (page.getAttribute('data-backbutton') !== 'false' && appRouter.canGoBack()) {
+            headerBackButton.classList.remove('hide');
+        } else {
+            headerBackButton.classList.add('hide');
+        }
+    }
+}
+
+function initHeadRoom(elem) {
+    const headroom = new Headroom(elem);
+    headroom.init();
+}
+
+function refreshLibraryDrawer(user) {
+    loadNavDrawer();
+    currentDrawerType = 'library';
+
+    if (user) {
+        Promise.resolve(user);
+    } else {
+        ServerConnections.user(getCurrentApiClient()).then(function (userResult) {
+            refreshLibraryInfoInDrawer(userResult);
+            updateLibraryMenu(userResult.localUser);
+        });
+    }
+}
+
+function getNavDrawerOptions() {
+    let drawerWidth = window.screen.availWidth - 50;
+    drawerWidth = Math.max(drawerWidth, 240);
+    drawerWidth = Math.min(drawerWidth, 320);
+    return {
+        target: navDrawerElement,
+        onChange: onMainDrawerSelect,
+        width: drawerWidth
+    };
+}
+
+function loadNavDrawer() {
+    if (navDrawerInstance) {
+        return Promise.resolve(navDrawerInstance);
+    }
+
+    navDrawerElement = document.querySelector('.mainDrawer');
+    navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
+    navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
+    return new Promise(function (resolve) {
+        import('../lib/navdrawer/navdrawer').then(({ default: NavDrawer }) => {
+            navDrawerInstance = new NavDrawer(getNavDrawerOptions());
+
+            if (!layoutManager.tv) {
+                navDrawerElement.classList.remove('hide');
+            }
+
+            resolve(navDrawerInstance);
+        });
+    });
+}
+
+let navDrawerElement;
+let navDrawerScrollContainer;
+let navDrawerInstance;
+let mainDrawerButton;
+let headerHomeButton;
+let currentDrawerType;
+let documentTitle = 'Jellyfin';
+let pageTitleElement;
+let headerBackButton;
+let headerUserButton;
+let currentUser;
+let headerCastButton;
+let headerSearchButton;
+let headerAudioPlayerButton;
+let headerSyncButton;
+let currentTimeText;
+const enableLibraryNavDrawer = layoutManager.desktop;
+const enableLibraryNavDrawerHome = !layoutManager.tv;
+const skinHeader = document.querySelector('.skinHeader');
+let requiresUserRefresh = true;
+
+function setTabs (type, selectedIndex, builder) {
+    Events.trigger(document, EventType.SET_TABS, type ? [ type, selectedIndex, builder()] : []);
+
+    import('../components/maintabsmanager').then((mainTabsManager) => {
+        if (type) {
+            mainTabsManager.setTabs(viewManager.currentView(), selectedIndex, builder, function () {
+                return [];
+            });
+        } else {
+            mainTabsManager.setTabs(null);
+        }
+    });
+}
+
+/**
+ * Fetch the server name and update the document title.
+ * @param {ApiClient} [_apiClient] The current api client.
+ */
+const fetchServerName = (_apiClient) => {
+    _apiClient
+        ?.getPublicSystemInfo()
+        .then(({ ServerName }) => {
+            documentTitle = ServerName || documentTitle;
+            document.title = documentTitle;
+        })
+        .catch(err => {
+            console.error('[LibraryMenu] failed to fetch system info', err);
+        });
+};
+
+function setDefaultTitle () {
+    if (!pageTitleElement) {
+        pageTitleElement = document.querySelector('.pageTitle');
+    }
+
+    if (pageTitleElement) {
+        pageTitleElement.classList.add('pageTitleWithLogo');
+        pageTitleElement.classList.add('pageTitleWithDefaultLogo');
+        pageTitleElement.style.backgroundImage = null;
+        pageTitleElement.innerHTML = '';
+    }
+
+    document.title = documentTitle;
+}
+
+function setTitle (title) {
+    if (title == null) {
+        LibraryMenu.setDefaultTitle();
+        return;
+    }
+
+    if (title === '-') {
+        title = '';
+    }
+
+    const html = title;
+
+    if (!pageTitleElement) {
+        pageTitleElement = document.querySelector('.pageTitle');
+    }
+
+    if (pageTitleElement) {
+        pageTitleElement.classList.remove('pageTitleWithLogo');
+        pageTitleElement.classList.remove('pageTitleWithDefaultLogo');
+        pageTitleElement.style.backgroundImage = null;
+        pageTitleElement.innerText = html || '';
+    }
+
+    document.title = title || documentTitle;
+}
+
+function setTransparentMenu (transparent) {
+    if (transparent) {
+        skinHeader.classList.add('semiTransparent');
+    } else {
+        skinHeader.classList.remove('semiTransparent');
+    }
+}
+
+let currentPageType;
+pageClassOn('pagebeforeshow', 'page', function () {
+    if (!this.classList.contains('withTabs')) {
+        LibraryMenu.setTabs(null);
+    }
+});
+
+pageClassOn('pageshow', 'page', function (e) {
+    const page = this;
+    const isDashboardPage = page.classList.contains('type-interior');
+    const isHomePage = page.classList.contains('homePage');
+    const isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
+
+    if (!isDashboardPage) {
+        if (mainDrawerButton) {
+            if (enableLibraryNavDrawer || (isHomePage && enableLibraryNavDrawerHome)) {
+                mainDrawerButton.classList.remove('hide');
+            } else {
+                mainDrawerButton.classList.add('hide');
+            }
+        }
+
+        if (currentDrawerType !== 'library') {
+            refreshLibraryDrawer();
+        }
+    }
+
+    updateMenuForPageType(isDashboardPage, isLibraryPage);
+
+    // TODO: Seems to do nothing? Check if needed (also in other views).
+    if (!e.detail.isRestored) {
+        window.scrollTo(0, 0);
+    }
+
+    updateTitle(page);
+    updateBackButton(page);
+    updateLibraryNavLinks(page);
+});
+
+Events.on(ServerConnections, 'apiclientcreated', (e, newApiClient) => {
+    fetchServerName(newApiClient);
+});
+
+Events.on(ServerConnections, 'localusersignedin', function (e, user) {
+    const currentApiClient = ServerConnections.getApiClient(user.ServerId);
+
+    currentDrawerType = null;
+    currentUser = {
+        localUser: user
+    };
+
+    loadNavDrawer();
+
+    ServerConnections.user(currentApiClient).then(function (userResult) {
+        currentUser = userResult;
+        updateUserInHeader(userResult);
+    });
+});
+
+Events.on(ServerConnections, 'localusersignedout', function () {
+    currentUser = {};
+    updateUserInHeader();
+});
+
+Events.on(playbackManager, 'playerchange', updateCastIcon);
+
+fetchServerName(getCurrentApiClient());
+loadNavDrawer();
+
+const LibraryMenu = {
+    getTopParentId,
+    onHardwareMenuButtonClick: function () {
+        toggleMainDrawer();
+    },
+    setTabs,
+    setDefaultTitle,
+    setTitle,
+    setTransparentMenu
+};
+
+window.LibraryMenu = LibraryMenu;
+renderHeader();
+
+export default LibraryMenu;
@@ -0,0 +1,6 @@
+//durch Skript eingefügt - ANFANG
+        html += '<div class="customMenuOptions"><h3 class="sidebarHeader">Links</h3></div>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://vue.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://raw.githubusercontent.com/Camc314/unraid-jellyfin-vue/main/images/jellyfin-vue-icon-transparent.png" height=23px width=23px></i><span class="navMenuOptionText">[BETA] Chicanoflix</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://ombi.fc-chicanos.de"><i class="md-icon navMenuOptionIcon"><img src="https://i.ibb.co/zhc7zKV/ombi10.png"></i><span class="navMenuOptionText">Wünsche</span></a>';
+        html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" target="_blank" href="https://t.me/cflixnews/"><i class="md-icon navMenuOptionIcon"><img src="https://i.imgur.com/IavreXS.png"></i><span class="navMenuOptionText">Telegram Channel</span></a>';
+//durch Skript eingefügt - ENDE
@@ -0,0 +1,23 @@
+<!-- Footer einfügen ANFANG -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+<script>
+var timedelay = 1;
+function delayCheck()
+{
+if(timedelay == 5)
+{
+$('#footer').fadeOut();
+timedelay = 1;
+}
+timedelay = timedelay+1;
+}
+$(document).mousemove(function() {
+$('#footer').fadeIn();
+timedelay = 1;
+clearInterval(_delay);
+_delay = setInterval(delayCheck, 500);
+});
+// page loads starts delay timer
+_delay = setInterval(delayCheck, 500)
+</script><div id="footer">Tipp: Benutze den Microsoft Edge-Browser für das beste und flüssigste Erlebnis (ja, ohne Scheiß).</div>
+<!-- Footer einfügen ENDE -->