wait for container station on start, web panel update

2026-04-15 03:12:19 +02:00
parent a1fc9585d3
commit 1222396af4
9 changed files with 224 additions and 153 deletions
--- a/QPKG/shared/RoonServer.sh
+++ b/QPKG/shared/RoonServer.sh
@@ -4,10 +4,10 @@ QPKG_NAME="RoonServer"
 QPKG_ROOT=`/sbin/getcfg $QPKG_NAME Install_Path -f ${CONF}`

 QCS_NAME="container-station"
-QCS_QPKG_DIR=$(/sbin/getcfg $QCS_NAME Install_Path -f $CONF)
-DOCKER_CMD=$QCS_QPKG_DIR/bin/system-docker
+QCS_QPKG_DIR=$(/sbin/getcfg $QCS_NAME Install_Path -f ${CONF})
+DOCKER_CMD="${QCS_QPKG_DIR}/bin/system-docker"
 CONTAINER_NAME=roonserver
-COMPOSE_YML_DIR=$QPKG_ROOT/docker/compose
+COMPOSE_YML_DIR="${QPKG_ROOT}/docker/compose"
 ROONSERVER_OPTIONS=(`/sbin/getcfg $QPKG_NAME options -f ${CONF}`)
 ROON_CHANNEL="production"

@@ -34,6 +34,9 @@ ROON_DATABASE_DIR_FREE_INODES=`df -PThi "${ROON_DATAROOT}" | awk '{print $5}' |
 ROON_FFMPEG_DIR="${ROON_DATAROOT}/bin"
 ROON_LOG_FILE="${ROON_DATAROOT}/RoonOnNAS.log.txt"

+echo $(basename "$0") >> ${ROON_LOG_FILE}
+echo $@ >> ${ROON_LOG_FILE}
+
 ST_COLOR="\033[38;5;34m"
 HL_COLOR="\033[38;5;197m"
 REG_COLOR="\033[0m"
@@ -44,22 +47,6 @@ do
   declare $i=true
 done

-
-compose_docker_yml_files () {
-COMPOSE_FILES="\
- -f ${COMPOSE_YML_DIR}/roonserver.yml \
- -f ${COMPOSE_YML_DIR}/platform_specific.yml "
-
-[ -z ${smb_cifs+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/smb_cifs_support.yml"
-
-( [ -z ${usb_audio+x} ] && [ -z ${hdmi_audio+x} ] ) || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio.yml"
-
-[ -z ${usb_audio+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio_usb.yml"
-
-[ -z ${hdmi_audio+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio_hdmi.yml"
-}
-
-
 ## Log Function
 echolog () {
    TIMESTAMP=$(date +%d.%m.%y-%H:%M:%S)
@@ -77,8 +64,18 @@ echolog () {
    fi
 }

-info ()
-{
+compose_docker_yml_files () {
+  COMPOSE_FILES="\
+  -f ${COMPOSE_YML_DIR}/roonserver.yml \
+  -f ${COMPOSE_YML_DIR}/platform_specific.yml "
+  
+  [ -z ${smb_cifs+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/smb_cifs_support.yml"
+  ( [ -z ${usb_audio+x} ] && [ -z ${hdmi_audio+x} ] ) || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio.yml"
+  [ -z ${usb_audio+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio_usb.yml"
+  [ -z ${hdmi_audio+x} ] || COMPOSE_FILES="${COMPOSE_FILES} -f $COMPOSE_YML_DIR/audio_hdmi.yml"
+}
+
+info () {
   ## Echoing System Info
   echolog "ROON_DATABASE_DIR" "${ROON_DATAROOT} - [`[ -d \"${ROON_DATAROOT}\" ] && echo \"available\" || echo \"not available\"`]"
   echolog "ROON_DATABASE_DIR_FS" "${ROON_DATABASE_DIR_FS}"
@@ -95,30 +92,42 @@ info ()
   echolog "Roon-Channel" "${ROON_CHANNEL}"
 }

-RoonOnNAS_folderCheck ()
-{
+RoonOnNAS_folderCheck () {
  if [ -d "${ROONONNAS_DIR}" ]; then
    [ -d "${ROONONNAS_DIR}/RoonOnNAS" ] || mkdir "${ROONONNAS_DIR}/RoonOnNAS"
    [ -d "${ROONONNAS_DIR}/RoonOnNAS/bin" ] || mkdir "${ROONONNAS_DIR}/RoonOnNAS/bin"
  fi
 }

-start_RoonServer () {
-  if [ "${ROON_DATAROOT}" != "/RoonOnNAS" ] && [ -d "${ROON_DATAROOT}" ]; then
-      compose_docker_yml_files
-      export_vars
-
-      ## Creating required directories, if they do not exist
-      [ -d "$ROON_ID_HOST_DIR" ] || mkdir "$ROON_ID_HOST_DIR"
-      [ -d "$ROON_TMP_DIR" ] || mkdir "$ROON_TMP_DIR"
-
-      ${DOCKER_CMD} compose ${COMPOSE_FILES} up -d
-      
-  fi
+getCSStatus () {
+   echo "$(/sbin/getcfg container-station status -f /etc/qpkg_run_status)"
+}  

+checkCS () {
+  case $(getCSStatus) in
+    0)
+      echolog "Container Station down."
+      exit 1;
+      ;;
+    1)
+      echolog "Container Station is starting..."
+      SECONDS=0
+      until [[  $(getCSStatus) == "2" ]]; do
+        if (( SECONDS > 120 )); then
+          echolog "Giving up..."
+          exit 1
+        fi
+        echolog "($SECONDS) Container Station is not up yet. Waiting..."
+        sleep 5
+      done 
+      ;;
+    2)
+      echolog "Container Station is up."
+      ;;
+  esac
 }
-export_vars ()
-{
+
+export_vars () {
  export ROON_DATAROOT
  export QPKG_ROOT
  export QNAP_MODEL
@@ -128,55 +137,90 @@ export_vars ()
  export ROON_CHANNEL
 }

-start_daemon ()
-{
+start_webpanel () {
        [ -f ${ROON_DATAROOT}/earlyaccess.txt ] && ROON_CHANNEL="earlyaccess"
-        info
        #Launch the service in the background if RoonServer share exists.
        ln -sfn "${QPKG_ROOT}/web" "${WEB_PATH}${WEBUI}"
-        start_RoonServer
-        }
+}
+
+start_roonserver () {
+  if [ "${ROON_DATAROOT}" != "/RoonOnNAS" ] && [ -d "${ROON_DATAROOT}" ]; then
+      compose_docker_yml_files
+      export_vars
+
+      ## Creating required directories, if they do not exist
+      [ -d "$ROON_ID_HOST_DIR" ] || mkdir "$ROON_ID_HOST_DIR"
+      [ -d "$ROON_TMP_DIR" ] || mkdir "$ROON_TMP_DIR"
+
+        echo "Docker Command: $(ls -lha ${DOCKER_CMD})" 2>&1 >> ${ROON_LOG_FILE}
+        echo "Docker CMD: $(${DOCKER_CMD} --version)" 2>&1 >> ${ROON_LOG_FILE}
+        echo "COMPOSE_FILES: ${COMPOSE_FILES}" 2>&1 >> ${ROON_LOG_FILE}
+        echo "CS Run-Status: $(/sbin/getcfg container-station status -f /etc/qpkg_run_status)" >> ${ROON_LOG_FILE}
+        sleep 60
+        ${DOCKER_CMD} compose ${COMPOSE_FILES} up -d 2>&1 >> ${ROON_LOG_FILE}
+
+      ${DOCKER_CMD} compose ${COMPOSE_FILES} up -d  
+  fi
+}

 case "$1" in
  start)
-    ENABLED=$(/sbin/getcfg $QPKG_NAME Enable -u -d FALSE -f $CONF)
-    RoonOnNAS_folderCheck
-    if [ "$ENABLED" != "TRUE" ]; then
-        echolog "$QPKG_NAME is disabled."
-        exit 1
-    fi
-    CONTAINER_ID=$(${DOCKER_CMD} ps -a -q -f name=$CONTAINER_NAME)
-    if [ ! "$CONTAINER_ID" ]; then
-        echo "not running"
-        start_daemon
-    else
-        echolog "${QPKG_NAME} is already running (ID: $CONTAINER_ID)"
-    fi
+    RS_ENABLED=$(/sbin/getcfg $QPKG_NAME Enable -u -d FALSE -f $CONF)
+    CS_ENABLED=$(/sbin/getcfg "container-station" Enable -u -d FALSE -f $CONF)
+
+      if [ "$RS_ENABLED" != "TRUE" ]; then
+          echolog "$QPKG_NAME is disabled."
+          exit 1
+      fi
+      if [ "$CS_ENABLED" != "TRUE" ]; then
+          echolog "Container Station is disabled."
+          exit 1
+      fi
+      
+      CONTAINER_ID=$(${DOCKER_CMD} ps -a -q -f name=$CONTAINER_NAME)
+      if [ ! "$CONTAINER_ID" ]; then     
+          echolog "Starting Roon Server..."
+          info
+          checkCS
+          RoonOnNAS_folderCheck
+          start_webpanel
+          start_roonserver
+      else
+          echolog "${QPKG_NAME} is already running (ID: $CONTAINER_ID)"
+      fi
    ;;

  stop)
-    CONTAINER_ID=$(${DOCKER_CMD} ps -a -q -f name=$CONTAINER_NAME)
-    if [ ! "$CONTAINER_ID" ]; then
+    CS_ENABLED=$(/sbin/getcfg "container-station" Enable -u -d FALSE -f $CONF)
+
+    # Check if CS has not been stopped before Roon Server
+    if [ "$CS_ENABLED" == "TRUE" ]; then
+      # -->  CS is still up.
+      CONTAINER_ID=$(${DOCKER_CMD} ps -a -q -f name=$CONTAINER_NAME)
+      if [ ! "$CONTAINER_ID" ]; then
+        # --> No roonserver conatiner running
        echolog "${QPKG_NAME} is not running."
-    else
+      else
+        # --> Stopping roonserver conatiner
        echolog "Stopping RoonServer..."
        compose_docker_yml_files
        export_vars
        ${DOCKER_CMD} compose ${COMPOSE_FILES} down
-        if [[ $2 != "keepwebalive" ]]; then
-           rm -rf "${QPKG_ROOT}/web/tmp"/*
-           rm  "${WEB_PATH}${WEBUI}"
-        fi
+        [ -d "${WEB_PATH}${WEBUI}" ] && rm  "${WEB_PATH}${WEBUI}"
        echolog "RoonServer has been stopped."
+      fi
+    else
+      # -> CS is disabled:
+      # Edge case: CS has been stopped before RoonServer. We can assume RoonServer docker is down. Only the web-panel needs to be removed
+      [ -d "${WEB_PATH}${WEBUI}" ] && rm  "${WEB_PATH}${WEBUI}"
+      echolog "RoonServer is not running."
    fi
    ;;

  restart)
-    isRestart=true
    $0 stop
    $0 start
    ;;
-
  *)
    echo "Usage: $0 {start|stop|restart}"
    exit 1
--- a/QPKG/shared/web/content/about.php
+++ b/QPKG/shared/web/content/about.php
@@ -90,7 +90,7 @@ $ContributorsManual = array(
        <br><br>


-        <div id="about-github" style="background-color: #d7d7d7; padding: 20px; text-align: center;">
+        <div id="about-github" style="padding: 20px; text-align: center;">
            <div>
                <?php echo localize("MODAL_ABOUT_GITHUB"); ?><br>
                <div style="text-align: center; font-size: 50px;">
--- a/QPKG/shared/web/content/info.php
+++ b/QPKG/shared/web/content/info.php
@@ -28,7 +28,7 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
        <p class="lead"><?php echo localize("OVERVIEW_TEXT1"); ?><br>
            <?php echo localize("OVERVIEW_TEXT2"); ?></p>-->
        <div class="row">
-            <div class="col-sm-6">
+            <div class="col-sm-8">
                <div class="card">
                    <div class="card-body">
                        <span class="fa-stack fa-2x">
@@ -39,7 +39,7 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                        <p class="card-text">
                            <b><?php echo localize("OVERVIEW_ROONSERVER_PANEL_STATUS"); ?>
                                :</b> <?php if (strlen(isRunning()) > 1 ) {
-                                echo '<span data-bs-toggle="tooltip" title="' . localize("OVERVIEW_ROONSERVER_PANEL_CONTAINER_ID") .': ' . isRunning() . '" style="color: green;">' . localize("OVERVIEW_ROONSERVER_PANEL_STATUS_RUNNING") . '</span>';
+                                echo '<span data-bs-toggle="tooltip" data-bs-title="' . localize("OVERVIEW_ROONSERVER_PANEL_CONTAINER_ID") .': ' . isRunning() . '" style="color: green;">' . localize("OVERVIEW_ROONSERVER_PANEL_STATUS_RUNNING") . '</span>';
                            } else {
                                echo '<span style="color: red;">' . localize("OVERVIEW_ROONSERVER_PANEL_STATUS_STOPPED") . '</span>';
                            } ?><br>
@@ -49,7 +49,7 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                                :</b> <?php echo $qpkg_conf['RoonServer']['Version']; ?></span>
                        </p>
                            <h5><?php echo localize("OVERVIEW_ROONSERVER_PANEL_SUBHEAD_DATABASE"); ?></h5>
-                            <span data-bs-toggle="tooltip" title="<?php echo $dblocation; ?>">
+                            <span data-bs-toggle="tooltip" data-bs-title="<?php echo $dblocation; ?>">
                                <b><?php echo localize("OVERVIEW_ROONSERVER_PANEL_LOCATION"); ?>: </b><?php echo $dblocation; ?>
                            </span>
                            <div class="progress" style="height: 20px;">
@@ -59,19 +59,21 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                            <?php echo $db_perc . '% ' . localize("OVERVIEW_ROONSERVER_PANEL_SPACE_OF") . ' ' . displayStorage($db_vol_cap) . ' ' . localize("OVERVIEW_ROONSERVER_PANEL_SPACE_USED") . '.'; ?>
                        </p>
                        <div class="row">
-                            <span id="log" class="col getModal d-flex justify-content-start">
+                            <span id="log" class="col-2 getModal d-flex justify-content-start">
                                <a href="#"
-                                class="btn btn-light btn-icon float-left"
+                                class="btn btn-outline-danger"
+                                data-bs-theme="dark"
                                data-bs-toggle="tooltip"
-                                title="<?php echo localize("MODAL_LOGFILES_ICON_TOOLTIP"); ?>">
+                                data-bs-title="<?php echo localize("MODAL_LOGFILES_ICON_TOOLTIP"); ?>">
                                    <i class="fas fa-ambulance"></i>
                                </a>
                            </span>
-                            <span id="setStorage" class="col-6 getModal float-right">
+                            <span id="setStorage" class="col-9 getModal ms-auto float-end">
                                <a href="#"
                                class="btn btn-primary"
+                                data-bs-theme="dark"
                                data-bs-toggle="tooltip"
-                                title="<?php echo localize("OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION_TOOLTIP"); ?>">
+                                data-bs-title="<?php echo localize("OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION_TOOLTIP"); ?>">
                                    <?php echo localize("OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION"); ?>
                                </a>
                            </span>
@@ -79,23 +81,22 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                    </div>
                </div>
            </div>
-            <div class="col-sm-6">
+            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <span class="fa-stack fa-2x">
                            <i class="fa fa-circle fa-stack-2x" style="color: #222222;"></i>
                            <i class="fas fa-cog fa-stack-1x" style="color: #ffffff;"></i>
                        </span>
-                        <h5>Settings</h5>
-                        <div class=" d-grid gap-3 w-50">
-                            
+                        <h5><?php echo localize("OVERVIEW_OPTIONS_PANEL_TITLE"); ?></h5>
+
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="smb_cifs" onchange="changeSettings(this)">
                                <label class="form-check-label justify-content-start" for="flexSwitchCheckChecked">SMB/CIFS mount support</label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="usb_audio" onchange="changeSettings(this)">
-                                <label class="form-check-label justify-content-start" for="flexSwitchCheckChecked">USB audio (DAC)</label>
+                                <label class="form-check-label justify-content-start" for="flexSwitchCheckChecked" data-bs-toggle="tooltip" data-bs-title="<?php echo localize("OVERVIEW_OPTIONS_PANEL_USB_AUDIO_TOOLTIP"); ?>">USB audio (DAC)</label>
                            </div>
                            
                            <div class="form-check form-switch">
@@ -103,14 +104,15 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                                <label class="form-check-label justify-content-start text-left" for="flexSwitchCheckChecked">HDMI audio</label>
                            </div>
                            
-                        </div>
-                        <span id="saveOptions" class="getModal">
+                        <span id="save" class="getModal">
                            <a href="#"
-                               class="btn btn-primary float-right"
+                               id="saveButton"
+                               class="btn btn-primary float-right disabled"
                               data-bs-toggle="tooltip"
                               onclick="saveOptions()"
-                               title="Save Options">
-                                Save
+                               data-bs-title="Save & Restart"
+                               data-bs-theme="dark"
+                               ><?php echo localize("OVERVIEW_OPTIONS_PANEL_SAVE_BTN"); ?>
                            </a>
                        </span>
                    </div>
@@ -127,11 +129,6 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
        echo "false";
    } ?>;

-    // Enable Tooltips
-    $(function () {
-        document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    });
-
    // Action when button for Modal is clicked
    $('.getModal').on('click', function (e) {

@@ -149,20 +146,42 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
        $('#modal').modal('show');
        return false;
    });
-    function changeSettings(el) {
-        // add code to guide user to press save next
-        //console.log(el.id + ": " + el.checked);
+    function changeSettings() {
+        var qpkg_options_str = "<?php echo $qpkg_conf_options ?>";
+        var qpkg_options_arr = qpkg_options_str.split(' ');
+        
+        var qnap_opt_arr = [];
+        document.getElementById('smb_cifs').checked && qnap_opt_arr.push("smb_cifs");
+        document.getElementById('usb_audio').checked && qnap_opt_arr.push("usb_audio");
+        document.getElementById('hdmi_audio').checked && qnap_opt_arr.push("hdmi_audio");
+        
+        console.log(qnap_opt_arr.join(' ') == qpkg_options_arr.join(' '));
+        
+            console.log(qnap_opt_arr.join(' ') == qpkg_options_arr.join(' '));
+        
+        if ( qnap_opt_arr.join(' ') == qpkg_options_arr.join(' ') ) {
+            $("#saveButton").addClass("disabled");
+        } else {
+            $("#saveButton").removeClass("disabled");
+        }        
    }
    
 $( document ).ready(function() {
     var qpkg_options_str = "<?php echo $qpkg_conf_options ?>";
-     var qpkg_options_arr = qpkg_options_str.split(' ');
     
-     for (let conf_option of qpkg_options_arr) {
-     document.getElementById(conf_option).checked = true;
-     }
+     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+     
+     if ( qpkg_options_str.length > 0 ) {
+        var qpkg_options_arr = qpkg_options_str.split(' ');
+        
+        for (let conf_option of qpkg_options_arr) {
+            document.getElementById(conf_option).checked = true;
+        }
+    }
 });

+
 // Function to download log files
 function saveOptions () {
        var qnap_options = "";
@@ -170,6 +189,8 @@ function saveOptions () {
        qnap_options += document.getElementById('usb_audio').checked ? "usb_audio;" : "" ;
        qnap_options += document.getElementById('hdmi_audio').checked ? "hdmi_audio;" : "" ;
        
+        $("#saveButton").addClass("disabled");
+
        document.getElementById('smb_cifs').checked 
        var strUrl = '<?php echo NASHOST;?>/cgi-bin/qpkg/RoonServer/ajax/ajax.php?a=setOptions&o=' + qnap_options;
     
--- a/QPKG/shared/web/content/setup.php
+++ b/QPKG/shared/web/content/setup.php
@@ -57,6 +57,7 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                imageCssClassField: 'faCssClass',
                uiLibrary: 'bootstrap5',
                cascadeSelection: false,
+                cascadeCheck: false,
                selectionType: 'single',
                icons: {
                    expand: '<i class="fas fa-angle-right" />',
@@ -121,10 +122,11 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
                <div class="input-group">
                    <span class="input-group-btn">
                        <span class="form form-control"
-                              style="background: #F5F5F5; border-radius: 0.25em 0 0 0.25em !important;"
+                              style="background: var(--bs-dark-bg-subtle); border-radius: 0.25em 0 0 0.25em !important;"
                              readonly><?php echo localize("MODAL_SETUP_DB_LOCATION"); ?></span>
                        </span>
-                    <input id="dblocform" type="text" class="form-control" style="background: #ffffff;" value="<?php
+                    <input id="dblocform" type="text" class="form-control" style="background: var(--bs-dark
+); color: var(--bs-dark-text-emphasis)" value="<?php
                    if (isset($dblocation)) {
                        echo $dblocation;
                    } else {
--- a/QPKG/shared/web/i18n/locale-eng.json
+++ b/QPKG/shared/web/i18n/locale-eng.json
@@ -38,13 +38,16 @@
  "OVERVIEW_ROONSERVER_PANEL_STATUS_STOPPED": "Stopped",
  "OVERVIEW_ROONSERVER_PANEL_VERSION": "Version",
  "OVERVIEW_ROONSERVER_PANEL_QPKG_VERSION": "QPKG-Version",
-  "OVERVIEW_ROONSERVER_PANEL_PID": "Process ID",
  "OVERVIEW_ROONSERVER_PANEL_SUBHEAD_DATABASE": "Database",
  "OVERVIEW_ROONSERVER_PANEL_LOCATION": "Location",
  "OVERVIEW_ROONSERVER_PANEL_SPACE_OF": "of",
  "OVERVIEW_ROONSERVER_PANEL_SPACE_USED": "used",
+  "OVERVIEW_ROONSERVER_PANEL_CONTAINER_ID": "ID",
  "OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION": "Change database location",
  "OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION_TOOLTIP": "Change the location, where Roon Server stores its database.",
+  "OVERVIEW_OPTIONS_PANEL_USB_AUDIO_TOOLTIP": "Enable this, if you want to connect usb audio devices directly to your QNAP NAS.",
+  "OVERVIEW_OPTIONS_PANEL_TITLE": "Settings",
+  "OVERVIEW_OPTIONS_PANEL_SAVE_BTN": "Save & Restart",
  "OVERVIEW_AUDIO_PANEL_HEADLINE": "Connected Audio Devices",
  "OVERVIEW_AUDIO_PANEL_NO_MULTIMEDIA_HEADLINE": "Multimedia Functions disabled",
  "OVERVIEW_AUDIO_PANEL_NO_MULTIMEDIA_DESCRIPTION1": "To use audio devices on your NAS, you'll need to turn them on in the General section of the QNAP ControlPanel.",
--- a/QPKG/shared/web/i18n/locale-ger.json
+++ b/QPKG/shared/web/i18n/locale-ger.json
@@ -39,28 +39,17 @@
  "OVERVIEW_ROONSERVER_PANEL_STATUS_STOPPED": "Angehalten",
  "OVERVIEW_ROONSERVER_PANEL_VERSION": "Version",
  "OVERVIEW_ROONSERVER_PANEL_QPKG_VERSION": "QPKG-Version",
-  "OVERVIEW_ROONSERVER_PANEL_PID": "Prozess ID",
+  "OVERVIEW_ROONSERVER_PANEL_CONTAINER_ID": "ID",
  "OVERVIEW_ROONSERVER_PANEL_SUBHEAD_DATABASE": "Datenbank",
  "OVERVIEW_ROONSERVER_PANEL_LOCATION": "Speicherort",
  "OVERVIEW_ROONSERVER_PANEL_SPACE_OF": "von",
  "OVERVIEW_ROONSERVER_PANEL_SPACE_USED": "belegt",
  "OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION": "Speicherort ändern",
  "OVERVIEW_ROONSERVER_PANEL_CHANGE_DB_LOCATION_TOOLTIP": "Speicherort ändern, an dem Roon Server seine Datenbank sichert.",
-  "OVERVIEW_AUDIO_PANEL_NO_MULTIMEDIA_HEADLINE": "Multimediafunktionen deaktiviert",
-  "OVERVIEW_AUDIO_PANEL_NO_MULTIMEDIA_DESCRIPTION1": "Zur Verwendung von lokalen Audiogeräten am QNAP, aktiviere Multimediafunktionen in den allgemeinen Einstellungen der QNAP Systemsteuerung.",
+  "OVERVIEW_OPTIONS_PANEL_USB_AUDIO_TOOLTIP": "Zur Verwendung von lokalen Audiogeräten direkt am QNAP.",
+  "OVERVIEW_OPTIONS_PANEL_TITLE": "Einstellungen",
+  "OVERVIEW_OPTIONS_PANEL_SAVE_BTN": "Speichern & Neustarten",
  "OVERVIEW_AUDIO_PANEL_NO_MULTIMEDIA_DESCRIPTION2": "Um Audiogeräte direkt an deinem QNAP zu verwenden, muss Roon Server neu gestartet werden.",
-  "OVERVIEW_AUDIO_PANEL_HEADLINE": "Verbundene Audiogeräte",
-  "OVERVIEW_AUDIO_PANEL_BTN_AUDIO_DEVICES": "Audiogeräte",
-  "OVERVIEW_AUDIO_PANEL_BTN_AUDIO_DEVICES_TOOLTIP": "Zeigt den Inhalt der Datei '<i>/proc/asound/cards</i>'",
-  "MODAL_REINSTALL_HEADLINE": "Roon Server erneut installieren?",
-  "MODAL_REINSTALL_DESCRIPTION_1": "Möchtest du die aktuelle Version von Roon Server installieren?",
-  "MODAL_REINSTALL_DESCRIPTION_2": "Bei diesem Vorgang werden die Programmdateien, durch die aktuelle Version von der Roon Labs Webseite ersetzt.",
-  "MODAL_REINSTALL_LOADING": "Laden...",
-  "MODAL_REINSTALL_ICON_TOOLTIP": "Aktuelle Version des Roon Server erneut von der Roon Labs Webseite laden.",
-  "MODAL_REINSTALL_DB_UNTOUCHED": "Deine Roon Datanbank bleibt dabei unberührt.",
-  "MODAL_REINSTALL_ROONSERVER_WILL_STOP": "Roon Server wird für diesen Vorgang kurzzeitig beendet.",
-  "MODAL_REINSTALL_PROCEED_TEXT": "Ja, mein QNAP soll die aktuelle Roon Server Version laden und installieren",
-  "MODAL_REINSTALL_DONE": "Roon Server wurde durch die aktuelle Version von der Roon Labs Webseite ersetzt.",
  "MODAL_LOGFILES_HEADLINE": "Log-Dateien laden",
  "MODAL_LOGFILES_ICON_TOOLTIP": "Sämtliche Log-Dateien als .zip-Datei laden.",
  "MODAL_LOGFILES_CHECK_DOWNLOAD_FOLDER": "Bitte schaue in deinen Download-Ordner.",
--- a/QPKG/shared/web/index.php
+++ b/QPKG/shared/web/index.php
@@ -4,7 +4,7 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");
 ?>

 <!DOCTYPE html>
-<html>
+<html data-bs-theme="dark">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -73,44 +73,56 @@ include_once("/home/httpd/cgi-bin/qpkg/RoonServer/__functions.php");

    }
    ?>
-    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light"> -->
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-        <a class="navbar-brand " href="index.php">
-            <img src="img/roonIcon.svg" alt="Roon Icon" style="height: 40px;">
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarsExampleDefault"
-                aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
+    
+<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+                <img src="img/roonIcon.svg" alt="Roon Icon" style="height: 40px;">
+            Roon Server</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
        </button>
-        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-            <ul class="navbar-nav mr-auto">
-                <li class="nav-item">
-                    <a class="nav-link active" href="index.php"><?php echo localize("NAV_MENU_ROONSERVER"); ?></a>
-                </li>
-            </ul>
-            ';
-
-            <ul class="navbar-nav ml-auto">
-                <li class="nav-item dropdown pull-right dropdown-menu-right">
-                    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown"
-                       aria-haspopup="true" aria-expanded="false"><?php echo localize("NAV_MENU_MORE"); ?></a>
-                    <div class="dropdown-menu pull-right" aria-labelledby="dropdown01">
-                        <a class="dropdown-item" href="https://roon.app/de/downloads" target="_blank">
-                            <?php echo localize("NAV_MENU_DOWNLOADS"); ?></a>
-                        <a class="dropdown-item" href="https://community.roonlabs.com"
-                           target="_blank"><?php echo localize("NAV_MENU_COMMUNITY"); ?></a>
-                        <a class="dropdown-item" href="https://kb.roonlabs.com/Roon_Server_on_NAS"
-                           target="_blank"><?php echo localize("NAV_MENU_ROON_ON_NAS"); ?></a>
-                        <a class="dropdown-item" href="https://roon.app/de/pricing" target="_blank">
-                            <?php echo localize("NAV_MENU_TRY_ROON"); ?></a>
-                    </div>
-                </li>
-                <li class="nav-item">
-                    <a id="about" class="getModal nav-link float-right" href="#"><i class="fas fa-info-circle"></i> <?php echo localize('NAV_MENU_INFO'); ?></a>
-                </li>
-            </ul>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto">
+              <li class="nav-item dropdown pull-right dropdown-menu-right">
+                  <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown"
+                     aria-haspopup="true" aria-expanded="false"><?php echo localize("NAV_MENU_MORE"); ?></a>
+                  <div class="dropdown-menu pull-right" aria-labelledby="dropdown01">
+                      <a class="dropdown-item" href="https://roon.app/de/downloads" target="_blank">
+                          <?php echo localize("NAV_MENU_DOWNLOADS"); ?></a>
+                      <a class="dropdown-item" href="https://community.roonlabs.com"
+                         target="_blank"><?php echo localize("NAV_MENU_COMMUNITY"); ?></a>
+                      <a class="dropdown-item" href="https://kb.roonlabs.com/Roon_Server_on_NAS"
+                         target="_blank"><?php echo localize("NAV_MENU_ROON_ON_NAS"); ?></a>
+                      <a class="dropdown-item" href="https://roon.app/de/pricing" target="_blank">
+                          <?php echo localize("NAV_MENU_TRY_ROON"); ?></a>
+                  </div>
+              </li>
+              <li class="nav-item">
+                  <a id="about" class="getModal nav-link float-right" href="#"><i class="fas fa-info-circle"></i> <?php echo localize('NAV_MENU_INFO'); ?></a>
+              </li>
+          </ul>
+          
+          <!--
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item me-auto dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown
+              </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+          </ul>-->
+          
        </div>
+      </div>
    </nav>
+    
+    
    <div id="contentblock">
        <?php
        $section = "info";