From 23cf5e127ada287749e61dc323b430f025e43505 Mon Sep 17 00:00:00 2001
From: Jafea7 <73450040+Jafea7@users.noreply.github.com>
Date: Sun, 5 Oct 2025 17:49:24 +1100
Subject: [PATCH] Replace ajax calls with fetch

---
 common/src/main/resources/docs/header.html    |    2 +-
 .../src/main/resources/html/static/config.js  |  151 ++-
 .../resources/html/static/freelancer.min.js   |   62 +-
 .../src/main/resources/html/static/index.html | 1158 +++++++----------
 .../src/main/resources/html/static/models.js  |  420 ++++--
 .../main/resources/html/static/recordings.js  |  324 +++--
 6 files changed, 1139 insertions(+), 978 deletions(-)
diff --git a/common/src/main/resources/docs/header.html b/common/src/main/resources/docs/header.html
index 6f0c6b45..2e21e04f 100644
--- a/common/src/main/resources/docs/header.html
+++ b/common/src/main/resources/docs/header.html
@@ -47,7 +47,7 @@
 <body id="page-top">
 
 <!-- Navigation -->
-<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav" style="padding-bottom: 3rem">
+<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav" style="padding-bottom: 0rem">
     <div class="container">
         <a class="navbar-brand js-scroll-trigger" href="@{/docs/index.md}"><img src="@{/static/icon64.png}" alt="Logo"/>CTB Recorder</a>
         <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse"
diff --git a/server/src/main/resources/html/static/config.js b/server/src/main/resources/html/static/config.js
index 780207be..e9b7ed79 100644
--- a/server/src/main/resources/html/static/config.js
+++ b/server/src/main/resources/html/static/config.js
@@ -1,68 +1,97 @@
 function loadConfig() {
-    try {
-        $.ajax({
-            type : 'GET',
-            url : '../config',
-            dataType : 'json',
-            async : true,
-            timeout : 60000,
-            headers : {
-                'CTBREC-HMAC' : CryptoJS.HmacSHA256('', hmac)
-            }
-        }).done(function(data, textStatus, jqXHR) {
-            if (textStatus === 'success') {
-                while (observableSettingsArray().length > 0) {
-                    observableSettingsArray.pop();
-                }
-                for (let i = 0; i < data.length; i++) {
-                    let param = data[i];
-                    param.ko_value = ko.observable(param.value);
-                    observableSettingsArray.push(param);
-                }
-            } else {
-                if (console)
-                    console.log('request failed', data);
-            }
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (console)
-                console.log(jqXHR, textStatus, errorThrown);
-        });
-    } catch (e) {
-        if (console)
-            console.log('Unexpected error', e);
+  try {
+    const headers = {};
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256('', hmac).toString(CryptoJS.enc.Base64);
     }
+
+    fetch('../config', {
+        method: 'GET',
+        headers: headers,
+        cache: 'no-cache'
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        while (observableSettingsArray().length > 0) {
+          observableSettingsArray.pop();
+        }
+        for (let i = 0; i < data.length; i++) {
+          let param = data[i];
+          param.ko_value = ko.observable(param.value);
+          observableSettingsArray.push(param);
+        }
+      })
+      .catch(error => {
+        if (console) console.log('Failed to load config:', error);
+      });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
 }
 
 function saveConfig() {
-    try {
-        let msg = JSON.stringify(observableSettingsArray());
-        $.ajax({
-            type : 'POST',
-            url : '../config',
-            dataType : 'json',
-            async : true,
-            timeout : 60000,
-            headers : {
-                'CTBREC-HMAC' : CryptoJS.HmacSHA256(msg, hmac)
-            },
-            data : msg
-        }).done(function(data, textStatus, jqXHR) {
-            if (textStatus === 'success') {
-                loadConfig();
-                $.notify('Configuration saved. You might have to restart the server.', 'info');
-            } else {
-                if (console)
-                    console.log('request failed', data);
-                $.notify('Error: ' + jqXHR.responseText, 'error');
-            }
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (console)
-                console.log(jqXHR, textStatus, errorThrown);
-            $.notify(errorThrown + ': ' + jqXHR.responseText, 'error');
+  try {
+    // Create new array with updated values
+    let settings = observableSettingsArray().map(param => ({
+      key: param.key,
+      type: param.type,
+      value: param.ko_value() // Use observable value
+    }));
+    let msg = JSON.stringify(settings);
+    console.log('Saving config JSON:', msg);
+
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 60000); // 60 seconds timeout
+
+    fetch('../config', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'CTBREC-HMAC': CryptoJS.HmacSHA256(msg, hmac)
+        },
+        body: msg,
+        signal: abortController.signal
+      })
+      .then(response => {
+        clearTimeout(timeoutId); // Clear timeout on success
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        // Update param.value to reflect saved values
+        observableSettingsArray().forEach(param => {
+          param.value = param.ko_value();
         });
-    } catch (e) {
-        if (console)
-            console.log('Unexpected error', e);
-        $.notify(errorThrown + ': ' + jqXHR.responseText, 'error');
-    }
+        loadConfig();
+        $.notify('Configuration saved. You might have to restart the server.', 'info');
+      })
+      .catch(error => {
+        clearTimeout(timeoutId); // Clear timeout on error
+        if (console) console.log('Request failed:', error);
+        $.notify(error.message || 'Unknown error: ' + (error.responseText || 'No response'), 'error');
+      });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    $.notify('Unexpected error: ' + e.message, 'error');
+  }
+}
+
+function notify(msg, type = 'info') {
+  const toastEl = document.getElementById('toast');
+  toastEl.querySelector('.toast-body').textContent = msg;
+  toastEl.classList.remove('bg-success', 'bg-danger', 'bg-info');
+  toastEl.classList.add(type === 'error' ? 'bg-danger' : type === 'info' ? 'bg-info' : 'bg-success', 'text-white');
+  const toast = new bootstrap.Toast(toastEl, {
+    autohide: true,
+    delay: 5000
+  });
+  toast.show();
+  document.getElementById('alert-container').appendChild(toastEl.parentElement);
 }
\ No newline at end of file
diff --git a/server/src/main/resources/html/static/freelancer.min.js b/server/src/main/resources/html/static/freelancer.min.js
index 8d2c92de..426467b8 100644
--- a/server/src/main/resources/html/static/freelancer.min.js
+++ b/server/src/main/resources/html/static/freelancer.min.js
@@ -1 +1,61 @@
-!function(o){"use strict";o('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=o(this.hash);if((t=t.length?t:o("[name="+this.hash.slice(1)+"]")).length)return o("html, body").animate({scrollTop:t.offset().top-70},1e3,"easeInOutExpo"),!1}}),o(document).scroll(function(){o(this).scrollTop()>100?o(".scroll-to-top").fadeIn():o(".scroll-to-top").fadeOut()}),o(".js-scroll-trigger").click(function(){o(".navbar-collapse").collapse("hide")}),o("body").scrollspy({target:"#mainNav",offset:80});var t=function(){o("#mainNav").offset().top>100?o("#mainNav").addClass("navbar-shrink"):o("#mainNav").removeClass("navbar-shrink")};t(),o(window).scroll(t),o(".portfolio-item").magnificPopup({type:"inline",preloader:!1,focus:"#username",modal:!0}),o(document).on("click",".portfolio-modal-dismiss",function(t){t.preventDefault(),o.magnificPopup.close()}),o(function(){o("body").on("input propertychange",".floating-label-form-group",function(t){o(this).toggleClass("floating-label-form-group-with-value",!!o(t.target).val())}).on("focus",".floating-label-form-group",function(){o(this).addClass("floating-label-form-group-with-focus")}).on("blur",".floating-label-form-group",function(){o(this).removeClass("floating-label-form-group-with-focus")})})}(jQuery);
\ No newline at end of file
+!(function (o) {
+  "use strict";
+  o('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
+    if (
+      location.pathname.replace(/^\//, "") ==
+        this.pathname.replace(/^\//, "") &&
+      location.hostname == this.hostname
+    ) {
+      var t = o(this.hash);
+      if ((t = t.length ? t : o("[name=" + this.hash.slice(1) + "]")).length)
+        return (
+          o("html, body").animate(
+            { scrollTop: t.offset().top - 70 },
+            1e3,
+            "easeInOutExpo",
+          ),
+          !1
+        );
+    }
+  }),
+    o(document).scroll(function () {
+      o(this).scrollTop() > 100
+        ? o(".scroll-to-top").fadeIn()
+        : o(".scroll-to-top").fadeOut();
+    }),
+    o(".js-scroll-trigger").click(function () {
+      o(".navbar-collapse").collapse("hide");
+    }),
+    o("body").scrollspy({ target: "#mainNav", offset: 80 });
+  var t = function () {
+    o("#mainNav").offset().top > 100
+      ? o("#mainNav").addClass("navbar-shrink")
+      : o("#mainNav").removeClass("navbar-shrink");
+  };
+  t(),
+    o(window).scroll(t),
+    o(".portfolio-item").magnificPopup({
+      type: "inline",
+      preloader: !1,
+      focus: "#username",
+      modal: !0,
+    }),
+    o(document).on("click", ".portfolio-modal-dismiss", function (t) {
+      t.preventDefault(), o.magnificPopup.close();
+    }),
+    o(function () {
+      o("body")
+        .on("input propertychange", ".floating-label-form-group", function (t) {
+          o(this).toggleClass(
+            "floating-label-form-group-with-value",
+            !!o(t.target).val(),
+          );
+        })
+        .on("focus", ".floating-label-form-group", function () {
+          o(this).addClass("floating-label-form-group-with-focus");
+        })
+        .on("blur", ".floating-label-form-group", function () {
+          o(this).removeClass("floating-label-form-group-with-focus");
+        });
+    });
+})(jQuery);
diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html
index ffe0ec1a..4fbaae7e 100644
--- a/server/src/main/resources/html/static/index.html
+++ b/server/src/main/resources/html/static/index.html
@@ -1,700 +1,532 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-
+  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
     <meta name="description" content="CTB Recorder is a free recording software for Chaturbate">
     <meta name="author" content="">
     <meta name="version" content="${project.version}">
-
     <title>CTB Recorder ${project.version}</title>
-
     <!-- Bootstrap core CSS -->
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-
     <!-- Custom fonts for this template -->
     <link href="vendor/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
-
     <!-- Plugin CSS -->
     <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
     <link href="vendor/jquery-ui/jquery-ui-1.12.1.css" rel="stylesheet" type="text/css">
-
     <link id="mainTheme" href="freelancer.css" rel="stylesheet">
-
     <!-- Flowplayer -->
     <link rel="stylesheet" href="vendor/flowplayer/skin/skin.css">
-
     <!-- custom css -->
     <link rel="stylesheet" href="custom.css">
-
-    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon"/>
-
+    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
     <style>
-        .ui-front {
-          z-index: 2000;
-        }
-    </style>
-
-</head>
-
-<body id="page-top">
-
-<!-- Navigation -->
-<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
-    <div class="container">
-        <a class="navbar-brand js-scroll-trigger" href="index.html"><img src="ctbrec.svg" alt="Logo" height="56"/></a>
-        <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse"
-                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-            Menu <i class="fa fa-bars"></i>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarResponsive">
-            <ul class="navbar-nav nav ml-auto" role="tablist">
-                <!--
-                  <li class="nav-item mx-0 mx-lg-1">
-                    <div class="ui-widget">
-                      <label for="search">Search: </label>
-                        <input id="search" style="margin-top: .7rem" placeholder="Search">
-                    </div>
-                    <div class="ui-widget"><input id="search" class="ui-autocomplete-input" autocomplete="off" placeholder="Search" style="margin-top: .7rem"></div>
-                  </li>
-                  -->
-                <li class="nav-item mx-0 mx-lg-1"><a id="models-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded active" href="#models"
-                                                     role="tab" aria-controls="models" aria-selected="true">Models</a></li>
-                <li class="nav-item mx-0 mx-lg-1"><a id="recordings-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded" href="#recordings"
-                                                     role="tab" aria-controls="recordings" aria-selected="false">Recordings</a></li>
-                <li class="nav-item mx-0 mx-lg-1"><a id="configuration-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded" href="#configuration"
-                                                     role="tab" aria-controls="settings" aria-selected="false">Settings</a></li>
-                <li class="nav-item mx-0 mx-lg-1"><a id="help-page" class="nav-link py-3 px-0 px-lg-3 rounded" href="../docs/index.md" target="_blank"
-                                                     aria-controls="help" aria-selected="false">Help</a></li>
-                <li class="mx-0 mx-lg-1"><a id="dark-mode-toggle" class="nav-link py-3 px-0 px-lg-3 rounded fa fa-moon" href="#configuration" role="tab"
-                                            aria-controls="settings" aria-selected="false"></a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
-
-<div id="alert-container"></div>
-
-<!-- Contact sheet modal -->
-<div class="modal fade" id="contactsheetModal" tabindex="-1" aria-labelledby="contactsheetModalLabel" aria-hidden="true">
-  <div class="modal-dialog" style="max-width: 80vw;">
-    <div class="modal-content modal-content-contactsheet">
-      <div class="modal-header">
-        <h6 class="modal-title title-truncate" id="contactsheetModalLabel">Image Title</h6>
-          <button type="button" class="btn btn-danger fa fa-times-circle" data-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body text-center">
-        <img id="imageModalImage" src="" alt="Contact Sheet" class="img-fluid" style="max-width: 100%; height: auto;" />
-      </div>
-      <div class="modal-footer">
-        <button id="deleteRecordingBtn" type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="tab-content" id="myTabContent">
-    <section id="models" class="tab-pane fade active show" role="tabpanel" aria-labelledby="models-tab">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <div class="form-group">
-                        <label for="addModelByUrl">Add Model</label>
-                            <div class="input-group">
-                                <input type="text" class="form-control" id="addModelByUrl"
-                                       placeholder="e.g. MyFreeCams:ModelName or an URL like https://chaturbate.com/modelname/" onKeyUp="addModelKeyPressed(event)">
-                                <div class="input-group-append">
-                                    <button class="btn btn-outline-secondary" type="button" id="toggleStopAtOptions">
-                                        <i class="fa fa-clock"></i>
-                                    </button>
-                                    <button class="btn btn-primary" type="button" onclick="addModel()">
-                                        Add
-                                    </button>
-                                </div>
-                            </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Stop At Options - Initially hidden -->
-            <div class="row" id="stopAtOptionsRow" style="display: none;">
-                <div class="col-lg-10 mx-auto">
-                    <div class="form-group">
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text">Stop at</span>
-                            </div>
-                            <input type="datetime-local" class="form-control" id="recordUntilDate">
-                            <div class="input-group-append">
-                                <select class="form-control" id="recordUntilAction">
-                                    <option value="REMOVE">REMOVE</option>
-                                    <option value="PAUSE">PAUSE</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <p class="lead"></p>
-                    <div class="table-responsive">
-                        <table class="table table-bordered table-hover table-striped">
-                            <thead>
-                            <tr>
-                                <th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_name'}">Model</a></th>
-                                <th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_online'}">Online</a></th>
-                                <th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_recording'}">Recording</a></th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                            </thead>
-                            <tbody data-bind="foreach: models">
-                            <tr>
-                                <td><a data-bind="attr: { href: ko_url, title: ko_name }, text: ko_name"></a></td>
-                                <td><span data-bind="checked: ko_online, class: ko_online() ? `fa fa-check-square checkmark-green` : ``"
-                                          style="font-size: 2em"></span></td>
-                                <td><span data-bind="checked: ko_recording, class: ko_recording() ? `fa fa-circle red` : ``" style="font-size: 2em; width: 40px; display: inline-block; text-align: center;"></span><span data-bind="if: ko_recordUntil && ko_recordUntil() !== undefined && ko_recordUntil() !== null && ko_recordUntil() !== 9000000000000000000"><i class="fa fa-clock" title="Scheduled stop time" style="font-size: 2em; color: #ffffff;"></i></span></td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-play" title="Resume recording"
-                                            data-bind="click: ctbrec.resume, visible: ko_suspended"></button>
-                                    <button class="btn btn-secondary fa fa-pause" title="Pause recording"
-                                            data-bind="click: ctbrec.suspend, hidden: ko_suspended"></button>
-                                </td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-trash" title="Remove model" data-bind="click: ctbrec.stop"></button>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section id="recordings" class="tab-pane fade" role="tabpanel" aria-labelledby="recordings-tab">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-4 mx-auto">
-                    Space left: <span data-bind="text: space.text()"></span>
-                    <span data-bind="text: throughput.text()" style="float:right"></span>
-                    <span class="progress">
-              <span class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" data-bind="attr: {'aria-valuemax': space.total, 'aria-valuenow': space.free},
-                                    style: { width: space.percent() + '%' },
-                                    text: space.percent() + '%'">
-              </span>
-            </span>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-lg-10 mx-auto">
-                    <p class="lead"></p>
-                    <div class="table-responsive">
-                        <table class="table table-bordered table-hover table-striped">
-                            <thead>
-                            <tr>
-                                <th><a href="#" data-bind="orderable: {collection: 'recordings', field: 'model.name'}">Model</a></th>
-                                <th><a href="#" data-bind="orderable: {collection: 'recordings', field: 'startDate'}">Date</a></th>
-                                <th><a href="#" data-bind="orderable: {collection: 'recordings', field: 'ko_status'}">Status</a></th>
-                                <th><a href="#" data-bind="orderable: {collection: 'recordings', field: 'sizeInByte'}">Size</a></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                            </thead>
-                            <tbody data-bind="foreach: recordings">
-                            <tr>
-                                <td><a data-bind="attr: { href: model.url, title: model.name }, text: model.name"></a></td>
-                                <td data-bind="text: ko_date"></td>
-                                <td data-bind="text: ko_status"></td>
-                                <td data-bind="text: ko_size"></td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-image" data-bind="enable: (ko_status() == 'FINISHED' && ko_contactSheet() !== null), click: show, attr: { title: (ko_status() == 'FINISHED' && ko_contactSheet() !== null) ? 'Show contact sheet' : 'No contact sheet' }"></button>
-                                </td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="click: play"></button>
-                                </td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-download" title="Download recording"
-                                            data-bind="enable: ko_status() == 'FINISHED' && singleFile, click: download"></button>
-                                </td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-recycle" title="Rerun processing"
-                                            data-bind="enable: (ko_status() == 'WAITING' || ko_status() == 'FAILED' || ko_status() == 'FINISHED'),
-                                            click: rerunProcessing"></button>
-                                </td>
-                                <td>
-                                    <button class="btn btn-secondary fa fa-trash" title="Delete recording"
-                                            data-bind="enable: (ko_status() == 'FINISHED' || ko_status() == 'WAITING' || ko_status() == 'FAILED'),
-                                            click: deleteRecording"></button>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section id="configuration" class="tab-pane fade" role="tabpanel" aria-labelledby="configuration-tab">
-        <div class="container">
-            <form data-bind="submit: saveConfig">
-                <div class="row">
-                    <div class="col-lg-10 mx-auto">
-                        <p class="lead"></p>
-                        <div class="table-responsive">
-                            <table class="table table-bordered table-hover table-striped">
-                                <thead>
-                                <tr>
-                                    <th>Parameter</th>
-                                    <th>Value</th>
-                                </tr>
-                                </thead>
-                                <tbody data-bind="foreach: settings">
-                                <tr>
-                                    <td data-bind="text: name"></td>
-                                    <td>
-                                      <div data-bind="ifnot: type === 'STRING_LIST'">
-                                        <input class="form-control" data-bind="value: ko_value" style="width: 100%;" />
-                                      </div>
-                                      <div data-bind="if: type === 'STRING_LIST'">
-                                        <textarea rows="3" class="form-control" data-bind="value: ko_value" style="width: 100%;"></textarea>
-                                      </div>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-lg-10 mx-auto">
-                        <button type="submit" class="btn btn-primary btn-lg btn-block" style="margin-bottom: 2em">Save</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </section>
-</div>
-
-<!-- Bootstrap core JavaScript -->
-<script src="vendor/jquery/jquery.min.js"></script>
-<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-
-<!-- Plugin JavaScript -->
-<script src="vendor/jquery-ui/jquery-ui-1.12.1.js"></script>
-<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
-<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
-<script src="vendor/notify.js/notify.min.js"></script>
-<script src="vendor/cookie_js/dist/cookie.umd.min.js"></script>
-
-<!-- knockout -->
-<script src="vendor/knockout/knockout-3.5.0.js"></script>
-<script src="vendor/knockout-orderable/knockout.bindings.orderable.js"></script>
-
-<!-- Custom scripts for this template -->
-<script src="freelancer.min.js"></script>
-
-<div id="player-window" class="modal">
-    <div class="modal-content">
-        <span class="close">&times;</span>
-        <video id="player" preload="none" controls width="100%">
-        </video>
-    </div>
-</div>
-
-<!-- Video Player -->
-<script src="vendor/hls.js/hls.js"></script>
-<script src="modal.js"></script>
-
-<!-- CryptoJS for HMAc authentication -->
-<script src="vendor/CryptoJS/hmac-sha256.js"></script>
-
-<!-- ctbrec stuff -->
-<script src="config.js"></script>
-<script src="recordings.js"></script>
-<script src="models.js"></script>
-
-<script>
-    let cookieJar = cookie.cookie;
-    cookieJar.defaults.expires = 365 * 100;
-    cookieJar.defaults.secure = true;
-    let darkMode = false;
-    let onlineModels = [];
-    let observableModelsArray = ko.observableArray();
-    let observableRecordingsArray = ko.observableArray();
-    let observableSettingsArray = ko.observableArray();
-    let space = {
-      free: ko.observable(0),
-      total: ko.observable(0),
-      percent: ko.observable(0),
-      text: ko.observable('')
-    };
-    let throughput = {
-      bytes: ko.observable(0),
-      timeframe: ko.observable(0),
-      text: ko.observable('')
-    };
-    let hmac;
-
-    // Toggle visibility of stopAt options
-    $(document).ready(function() {
-        $('#toggleStopAtOptions').click(function() {
-            $('#stopAtOptionsRow').toggle();
-            
-            // Set default datetime to current time + 1 hour when showing options
-            if ($('#stopAtOptionsRow').is(':visible') && !$('#recordUntilDate').val()) {
-                let now = new Date();
-                now.setHours(now.getHours() + 1);
-                
-                // Format the date for datetime-local input
-                let year = now.getFullYear();
-                let month = (now.getMonth() + 1).toString().padStart(2, '0');
-                let day = now.getDate().toString().padStart(2, '0');
-                let hours = now.getHours().toString().padStart(2, '0');
-                let minutes = now.getMinutes().toString().padStart(2, '0');
-                
-                $('#recordUntilDate').val(`${year}-${month}-${day}T${hours}:${minutes}`);
-            }
-        });
-    });
-
-    // Function to add model (shared by Enter key and Add button)
-    function addModel() {
-      let val = $('#addModelByUrl').val();
-      
-      if (!val) return; // Don't do anything if the input is empty
-      
-      // Store if we need to add stopAt parameters
-      let useStopAt = $('#stopAtOptionsRow').is(':visible') && $('#recordUntilDate').val();
-      let stopAtDate = useStopAt ? $('#recordUntilDate').val() : null;
-      let stopAtAction = useStopAt ? $('#recordUntilAction').val() : null;
-      let modelInput = val;
-      
-      // Step 1: Add the model using the standard approach
-      ctbrec.add(val, undefined, function() {
-        console.log("Model added successfully");
-        $('#addModelByUrl').val('');
-        
-        if (useStopAt) {
-          // Step 2: After a delay, set stopAt parameters
-          setTimeout(function() {
-            // Extract model name from the input
-            let modelName = modelInput;
-            if (modelName.includes(':')) {
-              modelName = modelName.split(':')[1];
-            } else if (modelName.includes('/')) {
-              modelName = modelName.split('/').filter(Boolean).pop();
-            }
-            
-            console.log("Looking for model: " + modelName);
-            console.log("Models in array:", observableModelsArray());
-            
-            // Try to find the model in the observableModelsArray
-            let existingModel = null;
-            
-            // Try various ways to find the model
-            for (let i = 0; i < observableModelsArray().length; i++) {
-              let model = observableModelsArray()[i];
-              
-              if (model.name === modelName) {
-                existingModel = model;
-                break;
-              }
-              
-              if (model.ko_name && typeof model.ko_name === 'function' && model.ko_name() === modelName) {
-                existingModel = model;
-                break;
-              }
-              
-              // Check if URL contains the model name
-              if (model.url && model.url.includes(modelName)) {
-                existingModel = model;
-                break;
-              }
-            }
-            
-            if (!existingModel) {
-              console.log("Could not find the model. Creating a simple model object instead.");
-              // If we can't find the model, create a simple object with just the necessary properties
-              existingModel = { name: modelName };
-            }
-            
-            // Add stopAt parameters to the model
-            // Always use milliseconds for recordUntil
-            let dateTimestamp = new Date(stopAtDate).getTime();
-            existingModel.recordUntil = dateTimestamp;
-            existingModel.recordUntilSubsequentAction = stopAtAction;
-            
-            console.log("Using milliseconds for recordUntil. Value: " + existingModel.recordUntil);
-            
-            console.log("Model with stopAt parameters:", existingModel);
-            
-            // Send the stopAt action
-            let stopAtMsg = '{"action": "stopAt", "model": ' + JSON.stringify(existingModel) + '}';
-            
-            $.ajax({
-              type: 'POST',
-              url: '../rec',
-              dataType: 'json',
-              async: true,
-              timeout: 60000,
-              headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(stopAtMsg, hmac)},
-              data: stopAtMsg
-            })
-            .done(function(data) {
-              console.log("StopAt response:", data);
-              if (data.status === 'success') {
-                // Use simple date formatting
-                let date = new Date(stopAtDate).toLocaleString();
-                $.notify('Recording will stop at ' + date, 'info');
-                
-                // Reset the datetime input and hide the options
-                $('#recordUntilDate').val('');
-                $('#stopAtOptionsRow').hide();
-              } else {
-                $.notify('Setting stopAt parameters failed', 'error');
-              }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-              console.log(textStatus, errorThrown);
-              $.notify('Setting stopAt parameters failed', 'error');
-            });
-          }, 3000); // Wait 3 seconds to make sure the model is registered
-        }
-      });
-    }
-
-    function addModelKeyPressed(e) {
-      let charCode = (typeof e.which === "number") ? e.which : e.keyCode;
-      
-      if (charCode === 13) {
-      addModel();
-      } else {
-      $('#addModelByUrl').autocomplete({
-        source: ["AmateurTv:", "BongaCams:", "Cam4:", "Camsoda:", "Chaturbate:", "CherryTv:", "Dreamcam:", "Fc2Live:", "Flirt4Free:", "LiveJasmin:", "MVLive:", "MyFreeCams:", "SecretFriends:", "Showup:", "Streamate:", "Streamray:", "Stripchat:", "XloveCam:"]
-      });
+      .ui-front {
+        z-index: 2000;
       }
-    }
-
-    let ctbrec = {
-      add: function(input, duration, onsuccess) {
-        try {
-          let model = {
-            type: null,
-            name: '',
-            url: input
-          };
-
-          if (console) console.log(model);
-          let action = input.startsWith('http') ? 'startByUrl' : 'startByName';
-          let msg = '{"action": "' + action + '", "model": ' + JSON.stringify(model) + '}';
-          $.ajax({
-              type: 'POST',
-              url: '../rec',
-              dataType: 'json',
-              async: true,
-              timeout: 60000,
-              headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(msg, hmac)},
-              data: msg
-            })
-            .done(function(data) {
-              console.log(data);
-              if (data.status === 'success') {
-                if (onsuccess) {
-                  onsuccess.call(data);
-                }
-                $.notify('Model added', 'info');
-              } else {
-                $.notify('Adding model failed', 'error');
-              }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-              if (console) console.log(textStatus, errorThrown);
-              $.notify('Adding model failed', 'error');
-            });
-        } catch (e) {
-          if (console) console.log('Unexpected error', e);
-        }
-      },
-
-      resume: function(model) {
-        try {
-          let action = '{"action": "resume", "model": ' + JSON.stringify(model) + '}';
-          $.ajax({
-              type: 'POST',
-              url: '../rec',
-              dataType: 'json',
-              async: true,
-              timeout: 60000,
-              headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
-              data: action
-            })
-            .done(function(data) {
-              if (data.status === 'success') {
-                $.notify('Recording of ' + model.name + ' resumed', 'info');
-              } else {
-                $.notify('Resuming recording of model ' + model.name + ' failed', 'error');
-              }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-              if (console) console.log(textStatus, errorThrown);
-              $.notify('Resuming recording of model ' + model.name + ' failed', 'error');
-            });
-        } catch (e) {
-          if (console) console.log('Unexpected error', e);
-        }
-      },
-
-      suspend: function(model) {
-        try {
-          let action = '{"action": "suspend", "model": ' + JSON.stringify(model) + '}';
-          $.ajax({
-              type: 'POST',
-              url: '../rec',
-              dataType: 'json',
-              async: true,
-              timeout: 60000,
-              headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
-              data: action
-            })
-            .done(function(data) {
-              if (data.status === 'success') {
-                $.notify('Recording of ' + model.name + ' suspended', 'info');
-              } else {
-                $.notify('Suspending recording of model ' + model.name + ' failed', 'error');
-              }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-              if (console) console.log(textStatus, errorThrown);
-              $.notify('Suspending recording of model ' + model.name + ' failed', 'error');
-            });
-        } catch (e) {
-          if (console) console.log('Unexpected error', e);
-        }
-      },
-
-      stop: function(model) {
-        try {
-          let action = '{"action": "stop", "model": ' + JSON.stringify(model) + '}';
-          $.ajax({
-              type: 'POST',
-              url: '../rec',
-              dataType: 'json',
-              async: true,
-              timeout: 60000,
-              headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
-              data: action
-            })
-            .done(function(data) {
-              if (data.status === 'success') {
-                $.notify('Removed ' + model.name, 'info');
-                observableModelsArray.remove(model);
-              } else {
-                $.notify('Removing model ' + model.name + ' failed', 'error');
-              }
-            })
-            .fail(function(jqXHR, textStatus, errorThrown) {
-              if (console) console.log(textStatus, errorThrown);
-              $.notify('Removing model ' + model.name + ' failed', 'error');
-            });
-        } catch (e) {
-          if (console) console.log('Unexpected error', e);
-        }
-      },
-    };
-
-    $(document).ready(function() {
-      if (localStorage !== undefined && localStorage.hmac !== undefined) {
-        if (console) console.log('using hmac from local storage');
-        hmac = localStorage.hmac;
-      } else {
-        if (console) console.log('hmac not found in local storage. requesting hmac from server');
-        $.ajax({
-            type: 'GET',
-            url: '../secured/hmac',
-            dataType: 'json',
-            async: true,
-            timeout: 60000
-          })
-          .done(function(data) {
+    </style>
+  </head>
+  <body id="page-top">
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
+      <div class="container">
+        <a class="navbar-brand js-scroll-trigger" href="index.html">
+          <img src="ctbrec.svg" alt="Logo" height="56" />
+        </a>
+        <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i class="fa fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+          <ul class="navbar-nav nav ml-auto" role="tablist">
+            <li class="nav-item mx-0 mx-lg-1">
+              <a id="models-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded active" href="#models" role="tab" aria-controls="models" aria-selected="true">Models</a>
+            </li>
+            <li class="nav-item mx-0 mx-lg-1">
+              <a id="recordings-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded" href="#recordings" role="tab" aria-controls="recordings" aria-selected="false">Recordings</a>
+            </li>
+            <li class="nav-item mx-0 mx-lg-1">
+              <a id="configuration-tab" data-toggle="tab" class="nav-link py-3 px-0 px-lg-3 rounded" href="#configuration" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
+            </li>
+            <li class="nav-item mx-0 mx-lg-1">
+              <a id="help-page" class="nav-link py-3 px-0 px-lg-3 rounded" href="../docs/index.md" target="_blank" aria-controls="help" aria-selected="false">Help</a>
+            </li>
+            <li class="mx-0 mx-lg-1">
+              <a id="dark-mode-toggle" class="nav-link py-3 px-0 px-lg-3 rounded fa fa-moon" href="#configuration" role="tab" aria-controls="settings" aria-selected="false"></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div id="alert-container"></div>
+    <!-- Contact sheet modal -->
+    <div class="modal fade" id="contactsheetModal" tabindex="-1" aria-labelledby="contactsheetModalLabel" aria-hidden="true">
+      <div class="modal-dialog" style="max-width: 80vw;">
+        <div class="modal-content modal-content-contactsheet">
+          <div class="modal-header">
+            <h6 class="modal-title title-truncate" id="contactsheetModalLabel">Image Title</h6>
+            <button type="button" class="btn btn-danger fa fa-times-circle" data-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body text-center">
+            <img id="imageModalImage" src="" alt="Contact Sheet" class="img-fluid" style="max-width: 100%; height: auto;" />
+          </div>
+          <div class="modal-footer">
+            <button id="deleteRecordingBtn" type="button" class="btn btn-danger">
+              <i class="fa fa-trash"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-content" id="myTabContent">
+      <section id="models" class="tab-pane fade active show" role="tabpanel" aria-labelledby="models-tab">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-10 mx-auto">
+              <div class="form-group">
+                <label for="addModelByUrl">Add Model</label>
+                <div class="input-group">
+                  <input type="text" class="form-control" id="addModelByUrl" placeholder="e.g. MyFreeCams:ModelName or an URL like https://chaturbate.com/modelname/" onKeyUp="addModelKeyPressed(event)">
+                  <div class="input-group-append">
+                    <button class="btn btn-outline-secondary" type="button" id="toggleStopAtOptions">
+                      <i class="fa fa-clock"></i>
+                    </button>
+                    <button class="btn btn-primary" type="button" onclick="addModel()"> Add </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Stop At Options - Initially hidden -->
+          <div class="row" id="stopAtOptionsRow" style="display: none;">
+            <div class="col-lg-10 mx-auto">
+              <div class="form-group">
+                <div class="input-group">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">Stop at</span>
+                  </div>
+                  <input type="datetime-local" class="form-control" id="recordUntilDate">
+                  <div class="input-group-append">
+                    <select class="form-control" id="recordUntilAction">
+                      <option value="REMOVE">REMOVE</option>
+                      <option value="PAUSE">PAUSE</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-10 mx-auto">
+              <p class="lead"></p>
+              <div class="table-responsive">
+                <table class="table table-bordered table-hover table-striped">
+                  <thead>
+                    <tr>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'models', field: 'ko_name'}">Model</a>
+                      </th>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'models', field: 'ko_online'}">Online</a>
+                      </th>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'models', field: 'ko_recording'}">Recording</a>
+                      </th>
+                      <th></th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody data-bind="foreach: models">
+                    <tr>
+                      <td>
+                        <a data-bind="attr: { href: ko_url, title: ko_name }, text: ko_name"></a>
+                      </td>
+                      <td>
+                        <span data-bind="checked: ko_online, class: ko_online() ? `fa fa-check-square checkmark-green` : ``" style="font-size: 2em"></span>
+                      </td>
+                      <td>
+                        <span data-bind="checked: ko_recording, class: ko_recording() ? `fa fa-circle red` : ``" style="font-size: 2em; width: 40px; display: inline-block; text-align: center;"></span>
+                        <span data-bind="if: ko_recordUntil && ko_recordUntil() !== undefined && ko_recordUntil() !== null && ko_recordUntil() !== 9000000000000000000">
+                          <i class="fa fa-clock" title="Scheduled stop time" style="font-size: 2em; color: #ffffff;"></i>
+                        </span>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-play" title="Resume recording" data-bind="click: resume, visible: ko_suspended"></button>
+                        <button class="btn btn-secondary fa fa-pause" title="Pause recording" data-bind="click: suspend, hidden: ko_suspended"></button>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-trash" title="Remove model" data-bind="click: stop"></button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="recordings" class="tab-pane fade" role="tabpanel" aria-labelledby="recordings-tab">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-4 mx-auto"> Space left: <span data-bind="text: space.text()"></span>
+              <span data-bind="text: throughput.text()" style="float:right"></span>
+              <span class="progress">
+                <span class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" data-bind="attr: {'aria-valuemax': space.total, 'aria-valuenow': space.free},
+                                    style: { width: space.percent() + '%' },
+                                    text: space.percent() + '%'"></span>
+              </span>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-10 mx-auto">
+              <p class="lead"></p>
+              <div class="table-responsive">
+                <table class="table table-bordered table-hover table-striped">
+                  <thead>
+                    <tr>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'recordings', field: 'model.name'}">Model</a>
+                      </th>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'recordings', field: 'startDate'}">Date</a>
+                      </th>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'recordings', field: 'ko_status'}">Status</a>
+                      </th>
+                      <th>
+                        <a href="#" data-bind="orderable: {collection: 'recordings', field: 'sizeInByte'}">Size</a>
+                      </th>
+                      <th></th>
+                      <th></th>
+                      <th></th>
+                      <th></th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody data-bind="foreach: recordings">
+                    <tr>
+                      <td>
+                        <a data-bind="attr: { href: model.url, title: model.name }, text: model.name"></a>
+                      </td>
+                      <td data-bind="text: ko_date"></td>
+                      <td data-bind="text: ko_status"></td>
+                      <td data-bind="text: ko_size"></td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-image" data-bind="enable: (ko_status() == 'FINISHED' && ko_contactSheet() !== null), click: show, attr: { title: (ko_status() == 'FINISHED' && ko_contactSheet() !== null) ? 'Show contact sheet' : 'No contact sheet' }"></button>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="click: play"></button>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-download" title="Download recording" data-bind="enable: ko_status() == 'FINISHED' && singleFile, click: download"></button>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-recycle" title="Rerun processing" data-bind="enable: (ko_status() == 'WAITING' || ko_status() == 'FAILED' || ko_status() == 'FINISHED'),
+                                            click: rerunProcessing"></button>
+                      </td>
+                      <td>
+                        <button class="btn btn-secondary fa fa-trash" title="Delete recording" data-bind="enable: (ko_status() == 'FINISHED' || ko_status() == 'WAITING' || ko_status() == 'FAILED'),
+                                            click: deleteRecording"></button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="configuration" class="tab-pane fade" role="tabpanel" aria-labelledby="configuration-tab">
+        <div class="container">
+          <form data-bind="submit: saveConfig">
+            <div class="row">
+              <div class="col-lg-10 mx-auto">
+                <p class="lead"></p>
+                <div class="table-responsive">
+                  <table class="table table-bordered table-hover table-striped">
+                    <thead>
+                      <tr>
+                        <th>Parameter</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody data-bind="foreach: settings">
+                      <tr>
+                        <td data-bind="text: name"></td>
+                        <td>
+                          <input class="form-control" data-bind="value: ko_value, valueUpdate: 'input'" style="width: 100%" />
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-10 mx-auto">
+                <button type="submit" class="btn btn-primary btn-lg btn-block" style="margin-bottom: 2em">Save</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </section>
+    </div>
+    <!-- Bootstrap core JavaScript -->
+    <script src="vendor/jquery/jquery.min.js"></script>
+    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- Plugin JavaScript -->
+    <script src="vendor/jquery-ui/jquery-ui-1.12.1.js"></script>
+    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+    <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+    <script src="vendor/notify.js/notify.min.js"></script>
+    <script src="vendor/cookie_js/dist/cookie.umd.min.js"></script>
+    <!-- knockout -->
+    <script src="vendor/knockout/knockout-3.5.0.js"></script>
+    <script src="vendor/knockout-orderable/knockout.bindings.orderable.js"></script>
+    <!-- Custom scripts for this template -->
+    <script src="freelancer.min.js"></script>
+    <div id="player-window" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <video id="player" preload="none" controls width="100%"></video>
+      </div>
+    </div>
+    <!-- Video Player -->
+    <script src="vendor/hls.js/hls.js"></script>
+    <script src="modal.js"></script>
+    <!-- CryptoJS for HMAc authentication -->
+    <script src="vendor/CryptoJS/hmac-sha256.js"></script>
+    <!-- ctbrec stuff -->
+    <script src="config.js"></script>
+    <script src="recordings.js"></script>
+    <script src="models.js"></script>
+    <script>
+      let cookieJar = cookie.cookie;
+      cookieJar.defaults.expires = 365 * 100;
+      cookieJar.defaults.secure = true;
+      let darkMode = false;
+      let onlineModels = [];
+      let observableModelsArray = ko.observableArray();
+      let observableRecordingsArray = ko.observableArray();
+      let observableSettingsArray = ko.observableArray();
+      let space = {
+        free: ko.observable(0),
+        total: ko.observable(0),
+        percent: ko.observable(0),
+        text: ko.observable('')
+      };
+      let throughput = {
+        bytes: ko.observable(0),
+        timeframe: ko.observable(0),
+        text: ko.observable('')
+      };
+      let hmac;
+      $(document).ready(function() {
+        if (localStorage !== undefined && localStorage.hmac !== undefined) {
+          if (console) console.log('using hmac from local storage');
+          hmac = localStorage.hmac;
+        } else {
+          if (console) console.log('hmac not found in local storage. requesting hmac from server');
+          const abortController = new AbortController();
+          const timeoutId = setTimeout(() => abortController.abort(), 60000); // 60 seconds timeout
+          fetch('../secured/hmac', {
+            method: 'GET',
+            headers: {
+              'Accept': 'application/json'
+            },
+            signal: abortController.signal
+          }).then(response => {
+            clearTimeout(timeoutId); // Clear timeout on success
+            if (!response.ok) {
+              throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            return response.json();
+          }).then(data => {
             hmac = data.hmac;
             if (localStorage !== undefined) {
               if (console) console.log('saving hmac to local storage');
               localStorage.setItem("hmac", hmac);
             }
-          })
-          .fail(function(jqXHR, textStatus, errorThrown) {
-            if (console) console.log(textStatus, errorThrown);
+          }).catch(error => {
+            clearTimeout(timeoutId); // Clear timeout on error
+            if (console) console.log('Request failed:', error);
             $.notify('Could not get HMAC', 'error');
             hmac = '';
           });
-      }
-
-      function tab(id) {
-        $(id).css('display: block');
-      }
-
-      var navMain = $("#mainNav");
-      navMain.on("click", "a", null, function() {
-        navMain.collapse('hide');
-        $('#navbarResponsive').collapse('hide');
-      });
-
-      ko.applyBindings({
-        models: observableModelsArray,
-        recordings: observableRecordingsArray,
-        settings: observableSettingsArray,
-        space,
-        throughput
-      });
-
-      // Required for contact sheets
-      window.onload = function() {
-        loadConfig();
-      };
-
-      updateOnlineModels();
-      updateRecordings();
-
-      $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
-        let selectedTab = e.target.attributes['id'].value;
-        if (selectedTab === 'configuration-tab') {
-          loadConfig();
         }
+
+        function tab(id) {
+          $(id).css('display: block');
+        }
+        var navMain = $("#mainNav");
+        navMain.on("click", "a", null, function() {
+          navMain.collapse('hide');
+          $('#navbarResponsive').collapse('hide');
+        });
+        ko.applyBindings({
+          models: observableModelsArray,
+          recordings: observableRecordingsArray,
+          settings: observableSettingsArray,
+          space,
+          throughput
+        });
+        // Required for contact sheets
+        window.onload = function() {
+          loadConfig();
+        };
+        updateOnlineModels();
+        updateRecordings();
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+          let selectedTab = e.target.attributes['id'].value;
+          if (selectedTab === 'configuration-tab') {
+            loadConfig();
+          }
+        });
+        loadConfig();
+        $('#dark-mode-toggle').click(toggleDarkMode);
+        if (cookieJar.get('darkMode') === 'true') {
+          toggleDarkMode();
+        }
+        // Toggle visibility of stopAt options
+        $('#toggleStopAtOptions').click(function() {
+          $('#stopAtOptionsRow').toggle();
+          // Set default datetime to current time + 1 hour when showing options
+          if ($('#stopAtOptionsRow').is(':visible') && !$('#recordUntilDate').val()) {
+            let now = new Date();
+            now.setHours(now.getHours() + 1);
+            // Format the date for datetime-local input
+            let year = now.getFullYear();
+            let month = (now.getMonth() + 1).toString().padStart(2, '0');
+            let day = now.getDate().toString().padStart(2, '0');
+            let hours = now.getHours().toString().padStart(2, '0');
+            let minutes = now.getMinutes().toString().padStart(2, '0');
+            $('#recordUntilDate').val(`${year}-${month}-${day}T${hours}:${minutes}`);
+          }
+        });
       });
-      loadConfig();
-
-      $('#dark-mode-toggle').click(toggleDarkMode);
-
-      if (cookieJar.get('darkMode') === 'true') {
-        toggleDarkMode();
+      // Function to add model (shared by Enter key and Add button)
+      function addModel() {
+        let val = $('#addModelByUrl').val();
+        if (!val) return; // Don't do anything if the input is empty
+        // Store if we need to add stopAt parameters
+        let useStopAt = $('#stopAtOptionsRow').is(':visible') && $('#recordUntilDate').val();
+        let stopAtDate = useStopAt ? $('#recordUntilDate').val() : null;
+        let stopAtAction = useStopAt ? $('#recordUntilAction').val() : null;
+        let modelInput = val;
+        // Step 1: Add the model using the standard approach
+        add(val, undefined, function() {
+          console.log("Model added successfully");
+          $('#addModelByUrl').val('');
+          if (useStopAt) {
+            // Step 2: After a delay, set stopAt parameters
+            setTimeout(function() {
+              // Extract model name from the input
+              let modelName = modelInput;
+              if (modelName.includes(':')) {
+                modelName = modelName.split(':')[1];
+              } else if (modelName.includes('/')) {
+                modelName = modelName.split('/').filter(Boolean).pop();
+              }
+              console.log("Looking for model: " + modelName);
+              console.log("Models in array:", observableModelsArray());
+              // Try to find the model in the observableModelsArray
+              let existingModel = null;
+              // Try various ways to find the model
+              for (let i = 0; i < observableModelsArray().length; i++) {
+                let model = observableModelsArray()[i];
+                if (model.name === modelName) {
+                  existingModel = model;
+                  break;
+                }
+                if (model.ko_name && typeof model.ko_name === 'function' && model.ko_name() === modelName) {
+                  existingModel = model;
+                  break;
+                }
+                // Check if URL contains the model name
+                if (model.url && model.url.includes(modelName)) {
+                  existingModel = model;
+                  break;
+                }
+              }
+              if (!existingModel) {
+                console.log("Could not find the model. Creating a simple model object instead.");
+                // If we can't find the model, create a simple object with just the necessary properties
+                existingModel = {
+                  name: modelName
+                };
+              }
+              // Add stopAt parameters to the model
+              // Always use milliseconds for recordUntil
+              let dateTimestamp = new Date(stopAtDate).getTime();
+              existingModel.recordUntil = dateTimestamp;
+              existingModel.recordUntilSubsequentAction = stopAtAction;
+              console.log("Using milliseconds for recordUntil. Value: " + existingModel.recordUntil);
+              console.log("Model with stopAt parameters:", existingModel);
+              // Send the stopAt action
+              let stopAtMsg = '{"action": "stopAt", "model": ' + JSON.stringify(existingModel) + '}';
+              const abortController = new AbortController();
+              const timeoutId = setTimeout(() => abortController.abort(), 60000); // 60 seconds timeout
+              fetch('../rec', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'CTBREC-HMAC': CryptoJS.HmacSHA256(stopAtMsg, hmac)
+                },
+                body: stopAtMsg,
+                signal: abortController.signal
+              }).then(response => {
+                clearTimeout(timeoutId); // Clear timeout on success
+                if (!response.ok) {
+                  throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+              }).then(data => {
+                console.log("StopAt response:", data);
+                if (data.status === 'success') {
+                  // Use simple date formatting
+                  let date = new Date(stopAtDate).toLocaleString();
+                  $.notify('Recording will stop at ' + date, 'info');
+                  // Reset the datetime input and hide the options
+                  $('#recordUntilDate').val('');
+                  $('#stopAtOptionsRow').hide();
+                } else {
+                  $.notify('Setting stopAt parameters failed', 'error');
+                }
+              }).catch(error => {
+                clearTimeout(timeoutId); // Clear timeout on error
+                console.log('Request failed:', error);
+                $.notify('Setting stopAt parameters failed', 'error');
+              });
+            }, 3000); // Wait 3 seconds to make sure the model is registered
+          }
+        });
       }
-    });
 
+      function addModelKeyPressed(e) {
+        let charCode = (typeof e.which === "number") ? e.which : e.keyCode;
+        if (charCode === 13) {
+          addModel();
+        } else {
+          $('#addModelByUrl').autocomplete({
+            source: ["BongaCams:", "Cam4:", "Camsoda:", "Chaturbate:", "Dreamcam:", "Fc2Live:", "Flirt4Free:", "MyFreeCams:", "Showup:", "Streamate:", "Streamray:", "Stripchat:", "XloveCam:"]
+          });
+        }
+      }
 
-    function toggleDarkMode() {
-      darkMode = !darkMode;
-      var newCss = document.createElement("link");
-      newCss.setAttribute("rel", "stylesheet");
-      newCss.setAttribute("type", "text/css");
-      newCss.setAttribute("href", darkMode ? "freelancer-dark.css" : "freelancer.css");
-      console.log(darkMode, newCss);
-      $('#mainTheme').remove();
-      $('head').append(newCss);
-      $('#dark-mode-toggle').removeClass('fa-moon');
-      $('#dark-mode-toggle').removeClass('fa-sun');
-      $('#dark-mode-toggle').addClass(darkMode ? 'fa-sun' : 'fa-moon');
-      cookieJar.set("darkMode", darkMode);
-    }
-</script>
-
-</body>
-
-</html>
+      function toggleDarkMode() {
+        darkMode = !darkMode;
+        var newCss = document.createElement("link");
+        newCss.setAttribute("rel", "stylesheet");
+        newCss.setAttribute("type", "text/css");
+        newCss.setAttribute("href", darkMode ? "freelancer-dark.css" : "freelancer.css");
+        console.log(darkMode, newCss);
+        $('#mainTheme').remove();
+        $('head').append(newCss);
+        $('#dark-mode-toggle').removeClass('fa-moon');
+        $('#dark-mode-toggle').removeClass('fa-sun');
+        $('#dark-mode-toggle').addClass(darkMode ? 'fa-sun' : 'fa-moon');
+        cookieJar.set("darkMode", darkMode);
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/server/src/main/resources/html/static/models.js b/server/src/main/resources/html/static/models.js
index 8244f0c0..1889f004 100644
--- a/server/src/main/resources/html/static/models.js
+++ b/server/src/main/resources/html/static/models.js
@@ -1,141 +1,317 @@
-function updateOnlineModels() {
+function add(input, duration, onsuccess) {
     try {
-        let action = '{"action": "listOnline"}';
-        $.ajax({
-            type : 'POST',
-            url : '../rec',
-            dataType : 'json',
-            async : true,
-            timeout : 60000,
-            headers : {
-                'CTBREC-HMAC' : CryptoJS.HmacSHA256(action, hmac)
-            },
-            data : action
-        }).done(function(data, textStatus, jqXHR) {
-            if (data.status === 'success') {
-                onlineModels = data.models;
-            } else {
-                if (console)
-                    console.log('request failed', data);
-            }
-            updateModels();
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (console)
-                console.log(jqXHR, textStatus, errorThrown);
-        });
-    } catch (e) {
-        if (console)
-            console.log('Unexpected error', e);
+    let model = {
+        type: null,
+        name: '',
+        url: input
+    };
+    if (console) console.log(model);
+    let action = input.startsWith('http') ? 'startByUrl' : 'startByName';
+    const msg = JSON.stringify({ action: action, model: model });
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+        headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(msg, hmac).toString(CryptoJS.enc.Base64);
     }
-    setTimeout(updateOnlineModels, 3000);
+    fetch('../rec', {
+        method: 'POST',
+        headers: headers,
+        body: msg
+    })
+    .then(response => {
+        if (!response.ok) {
+        return response.text().then(text => {
+            throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (console) console.log(data);
+        if (data.status === 'success') {
+        if (onsuccess) {
+            onsuccess.call(data);
+        }
+        $.notify('Model added', 'info');
+        } else {
+        $.notify('Adding model failed', 'error');
+        }
+    })
+    .catch(error => {
+        if (console) console.log('Failed to add model:', error);
+        $.notify('Adding model failed: ' + error.message, 'error');
+    });
+    } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    }
+}
+
+
+function resume(model) {
+    try {
+    const action = JSON.stringify({ action: "resume", model: model });
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+        headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
+    }
+    fetch('../rec', {
+        method: 'POST',
+        headers: headers,
+        body: action
+    })
+    .then(response => {
+        if (!response.ok) {
+        return response.text().then(text => {
+            throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.status === 'success') {
+        $.notify('Recording of ' + model.name + ' resumed', 'info');
+        } else {
+        $.notify('Resuming recording of model ' + model.name + ' failed', 'error');
+        }
+    })
+    .catch(error => {
+        if (console) console.log('Failed to resume recording:', error);
+        $.notify('Resuming recording of model ' + model.name + ' failed: ' + error.message, 'error');
+    });
+    } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    }
+}
+
+function suspend(model) {
+    try {
+    const action = JSON.stringify({ action: "suspend", model: model });
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+        headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
+    }
+    fetch('../rec', {
+        method: 'POST',
+        headers: headers,
+        body: action
+    })
+    .then(response => {
+        if (!response.ok) {
+        return response.text().then(text => {
+            throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.status === 'success') {
+        $.notify('Recording of ' + model.name + ' suspended', 'info');
+        } else {
+        $.notify('Suspending recording of model ' + model.name + ' failed', 'error');
+        }
+    })
+    .catch(error => {
+        if (console) console.log('Failed to suspend recording:', error);
+        $.notify('Suspending recording of model ' + model.name + ' failed: ' + error.message, 'error');
+    });
+    } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    }
+}
+
+function stop(model) {
+    try {
+    const action = JSON.stringify({ action: "stop", model: model });
+    const headers = {
+        'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+        headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
+    }
+    fetch('../rec', {
+        method: 'POST',
+        headers: headers,
+        body: action
+    })
+    .then(response => {
+        if (!response.ok) {
+        return response.text().then(text => {
+            throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+        }
+        return response.json();
+    })
+    .then(data => {
+        if (data.status === 'success') {
+        $.notify('Removed ' + model.name, 'info');
+        observableModelsArray.remove(model);
+        } else {
+        $.notify('Removing model ' + model.name + ' failed', 'error');
+        }
+    })
+    .catch(error => {
+        if (console) console.log('Failed to remove model:', error);
+        $.notify('Removing model ' + model.name + ' failed: ' + error.message, 'error');
+    });
+    } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    }
+}
+
+
+function updateOnlineModels() {
+  try {
+    const action = '{"action": "listOnline"}';
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
+    }
+
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status === 'success') {
+        onlineModels = data.models;
+      } else {
+        if (console) console.log('Request failed:', data);
+      }
+      updateModels();
+    })
+    .catch(error => {
+      if (console) console.log('Failed to fetch online models:', error);
+    });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
+  setTimeout(updateOnlineModels, 3000);
 }
 
 function isModelInArray(array, model) {
-    for ( let idx in array) {
-        let m = array[idx];
-        if (m.url === model.url) {
-            return true;
-        }
+  for (let idx in array) {
+    let m = array[idx];
+    if (m.url === model.url) {
+      return true;
     }
-    return false;
+  }
+  return false;
 }
 
 /**
  * Synchronizes models from the server with the displayed knockout model table
  */
-function syncModels(models) {    
-    // remove models from the observable array, which are not in the updated list
-    var newModelsMap = new Map(models.map(m => [m.url, m]));
-    observableModelsArray.remove(m => !newModelsMap.get(m.ko_url()));
-    
-    var modelsMap = new Map(observableModelsArray().map(m => [m.ko_url(), m]));
-    
-    for (let model of models) {
-        const m = modelsMap.get(model.url);
-        
-        if (!m) {
-            // add models to the observable array, which are new in the updated list
-            model.ko_name = ko.observable(model.name);
-            model.ko_url = ko.observable(model.url);
-            model.ko_online = ko.observable(false);
-            for ( let i in onlineModels) {
-                let onlineModel = onlineModels[i];
-                if (onlineModel.url === model.url) {
-                    model.ko_online(true);
-                    break;
-                }
-            }
-            model.ko_recording = ko.observable(model.online && !model.suspended);
-			//model.ko_recording_class = ko.observable( (model.online && !model.suspended) ? 'fa fa-circle red' : '' );
-            model.ko_suspended = ko.observable(model.suspended);
-			model.ko_recordUntil = ko.observable(model.recordUntil);
-            model.swallowEvents = false;
-            model.ko_suspended.subscribe(function(checked) {
-                if (model.swallowEvents) {
-                    return;
-                }
-                if (!checked) {
-                    ctbrec.resume(model);
-                } else {
-                    ctbrec.suspend(model);
-                }
-            });
-            observableModelsArray.push(model);
-        } else {
-            // update existing models
-            m.ko_name(model.name);
-            m.ko_url(model.url);
-            let onlineState = false;
-            for ( let i in onlineModels) {
-                let onlineModel = onlineModels[i];
-                if (onlineModel.url === model.url) {
-                    onlineState = true;
-                    break;
-                }
-            }
-            m.ko_online(onlineState);
-            //m.ko_recording_class( (model.online && !model.suspended) ? 'fa fa-circle red' : '');
-            m.swallowEvents = true;
-            m.ko_suspended(model.suspended);
-            m.swallowEvents = false;
-            m.ko_recording(m.ko_online() && !m.ko_suspended());
+function syncModels(models) {
+  // remove models from the observable array, which are not in the updated list
+  var newModelsMap = new Map(models.map(m => [m.url, m]));
+  observableModelsArray.remove(m => !newModelsMap.get(m.ko_url()));
 
-            // Update the recordUntil property to ensure clock icon refreshes
-            if (m.ko_recordUntil && typeof m.ko_recordUntil === 'function') {
-                m.ko_recordUntil(model.recordUntil);
-            } else {
-                m.ko_recordUntil = ko.observable(model.recordUntil);
-            }
+  var modelsMap = new Map(observableModelsArray().map(m => [m.ko_url(), m]));
+
+  for (let model of models) {
+    const m = modelsMap.get(model.url);
+
+    if (!m) {
+      // add models to the observable array, which are new in the updated list
+      model.ko_name = ko.observable(model.name);
+      model.ko_url = ko.observable(model.url);
+      model.ko_online = ko.observable(false);
+      for (let i in onlineModels) {
+        let onlineModel = onlineModels[i];
+        if (onlineModel.url === model.url) {
+          model.ko_online(true);
+          break;
         }
+      }
+      model.ko_recording = ko.observable(model.online && !model.suspended);
+      model.ko_suspended = ko.observable(model.suspended);
+      model.ko_recordUntil = ko.observable(model.recordUntil);
+      model.swallowEvents = false;
+      model.ko_suspended.subscribe(function(checked) {
+        if (model.swallowEvents) {
+          return;
+        }
+        if (!checked) {
+          ctbrec.resume(model);
+        } else {
+          ctbrec.suspend(model);
+        }
+      });
+      observableModelsArray.push(model);
+    } else {
+      // update existing models
+      m.ko_name(model.name);
+      m.ko_url(model.url);
+      let onlineState = false;
+      for (let i in onlineModels) {
+        let onlineModel = onlineModels[i];
+        if (onlineModel.url === model.url) {
+          onlineState = true;
+          break;
+        }
+      }
+      m.ko_online(onlineState);
+      m.swallowEvents = true;
+      m.ko_suspended(model.suspended);
+      m.swallowEvents = false;
+      m.ko_recording(m.ko_online() && !m.ko_suspended());
+
+      // Update the recordUntil property to ensure clock icon refreshes
+      if (m.ko_recordUntil && typeof m.ko_recordUntil === 'function') {
+        m.ko_recordUntil(model.recordUntil);
+      } else {
+        m.ko_recordUntil = ko.observable(model.recordUntil);
+      }
     }
+  }
 }
 
 function updateModels() {
-    try {
-        let action = '{"action": "list"}';
-        $.ajax({
-            type : 'POST',
-            url : '../rec',
-            dataType : 'json',
-            async : true,
-            timeout : 60000,
-            headers : {
-                'CTBREC-HMAC' : CryptoJS.HmacSHA256(action, hmac)
-            },
-            data : action
-        }).done(function(data) {
-            if (data.status === 'success') {
-                syncModels(data.models);
-            } else {
-                if (console)
-                    console.log('request failed', data);
-            }
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (console)
-                console.log(textStatus, errorThrown);
-        });
-    } catch (e) {
-        if (console)
-            console.log('Unexpected error', e);
+  try {
+    const action = '{"action": "list"}';
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
     }
+
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status === 'success') {
+        syncModels(data.models);
+      } else {
+        if (console) console.log('Request failed:', data);
+      }
+    })
+    .catch(error => {
+      if (console) console.log('Failed to fetch models:', error);
+    });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
 }
\ No newline at end of file
diff --git a/server/src/main/resources/html/static/recordings.js b/server/src/main/resources/html/static/recordings.js
index 8ef99898..53a7364d 100644
--- a/server/src/main/resources/html/static/recordings.js
+++ b/server/src/main/resources/html/static/recordings.js
@@ -47,6 +47,42 @@ function play(recording) {
     }
 }
 
+function show(recording) {
+  if (console) console.log("Show: " + recording.ko_contactSheet());
+  let localFilePath = recording.ko_contactSheet();
+  let src = getImageUrl(localFilePath);
+
+  if (src) {
+    let localFilePath = recording.ko_contactSheet();
+    let src = getImageUrl(recording.ko_contactSheet());
+    let hmacOfPath = CryptoJS.HmacSHA256(src, hmac);
+    src = '..' + src;
+    if (console) console.log("Path", src, "HMAC", hmacOfPath);
+    if (hmac.length > 0) {
+      src += "?hmac=" + hmacOfPath;
+    }
+    if (console) console.log("Final image URL: " + src);
+    let modalImage = document.getElementById('imageModalImage');
+    modalImage.src = src;
+
+    let fileName = localFilePath.split('\\').pop().split('/').pop();
+
+    let modalTitle = document.getElementById('contactsheetModalLabel');
+    modalTitle.innerText = fileName + " - " + recording.ko_selectedResolution() + "p";
+
+    $('#contactsheetModal').modal('show');
+
+    document.getElementById('deleteRecordingBtn').onclick = function() {
+      $('#contactsheetModal').modal('hide');
+      deleteRecording(recording);
+    };
+  } else {
+    console.log('No contact sheet available');
+    $.notify('No contact sheet available', 'error');
+  }
+  document.activeElement.blur();
+}
+
 function download(recording) {
     let src = recording.singleFile ? '/hls/' + recording.id : recording.playlist;
     let hmacOfPath = CryptoJS.HmacSHA256(src, hmac);
@@ -59,51 +95,81 @@ function download(recording) {
 }
 
 function rerunProcessing(recording) {
-    let name = recording.model.name + ' ' + recording.ko_date();
-    try {
-        let action = '{"action": "rerunPostProcessing", "recording": ' + JSON.stringify(recording) + '}';
-        $.ajax({
-            type: 'POST',
-            url: '../rec',
-            dataType: 'json',
-            async: true,
-            timeout: 60000,
-            headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
-            data: action
-        });
-    } catch (e) {
-        if (console) console.log('Unexpected error', e);
+  let name = recording.model.name + ' ' + recording.ko_date();
+  try {
+    const action = JSON.stringify({ action: "rerunPostProcessing", recording: recording });
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
     }
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status !== 'success') {
+        if (console) console.log('Request failed:', data);
+      }
+    })
+    .catch(error => {
+      if (console) console.log('Failed to rerun post-processing:', error);
+    });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
 }
 
 function deleteRecording(recording) {
-    let name = recording.model.name + ' ' + recording.ko_date();
-    try {
-        let action = '{"action": "delete", "recording": ' + JSON.stringify(recording) + '}';
-        $.ajax({
-            type: 'POST',
-            url: '../rec',
-            dataType: 'json',
-            async: true,
-            timeout: 60000,
-            headers: {'CTBREC-HMAC': CryptoJS.HmacSHA256(action, hmac)},
-            data: action
-        })
-        .done(function(data) {
-            if (data.status === 'success') {
-            $.notify('Removed recording ' + name, 'info');
-            observableRecordingsArray.remove(recording);
-            } else {
-            $.notify('Removing recording ' + name + ' failed', 'error');
-            }
-        })
-        .fail(function(jqXHR, textStatus, errorThrown) {
-            if (console) console.log(textStatus, errorThrown);
-            $.notify('Removing recording ' + name + ' failed', 'error');
-        });
-    } catch (e) {
-        if (console) console.log('Unexpected error', e);
+  let name = recording.model.name + ' ' + recording.ko_date();
+  try {
+    const action = JSON.stringify({ action: "delete", recording: recording });
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
     }
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status === 'success') {
+        $.notify('Removed recording ' + name, 'info');
+        observableRecordingsArray.remove(recording);
+      } else {
+        if (console) console.log('Request failed:', data);
+        $.notify('Removing recording ' + name + ' failed', 'error');
+      }
+    })
+    .catch(error => {
+      if (console) console.log('Failed to delete recording:', error);
+      $.notify(`Removing recording ${name} failed: ${error.message}`, 'error');
+    });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+    $.notify(`Removing recording ${name} failed: ${e.message}`, 'error');
+  }
 }
 
 function calculateSize(sizeInByte) {
@@ -132,32 +198,6 @@ function isRecordingInArray(array, recording) {
     return false;
 }
 
-function show(recording) {
-  if (console) console.log("Show: " + recording.ko_contactSheet());
-  let localFilePath = recording.ko_contactSheet();
-  let src = getImageUrl(recording.ko_contactSheet());
-  if (console) console.log("Show: " + src);
-  if (src) {
-    if (console) console.log("Image: " + src);
-    // Update the modal's image source and display the modal
-    let modalImage = document.getElementById('imageModalImage');
-    modalImage.src = src;
-    let fileName = localFilePath.split('\\').pop().split('/').pop();
-    let modalTitle = document.getElementById('contactsheetModalLabel');
-    modalTitle.innerText = fileName; // Set the title to the file name
-    // Show the modal (assuming you are using Bootstrap's modal)
-    $('#contactsheetModal').modal('show');
-    // Update the delete button to use this recording
-    document.getElementById('deleteRecordingBtn').onclick = function() {
-      $('#contactsheetModal').modal('hide');
-      deleteRecording(recording);
-    };
-  } else {
-    console.log('No contact sheet available');
-  }
-  document.activeElement.blur();
-}
-
 /**
  * Synchronizes recordings from the server with the displayed knockout recordings table
  */
@@ -188,6 +228,8 @@ function syncRecordings(recordings) {
             });
             recording.ko_size = ko.observable(calculateSize(recording.sizeInByte));
             recording.ko_status = ko.observable(recording.status);
+            recording.ko_singleFile = ko.observable(recording.singleFile);
+            recording.ko_selectedResolution = ko.observable(recording.selectedResolution);
             recording.ko_contactSheet = ko.observable(
                 recording.associatedFiles?.find(file => file.endsWith('.jpg') || file.endsWith('.png')) || null
             );
@@ -209,7 +251,9 @@ function syncRecordings(recordings) {
                 r.progress = recording.progress;
                 r.sizeInByte = recording.sizeInByte;
                 r.status = recording.status;
+                r.selectedResolution = recording.selectedResolution;
                 r.startDate = recording.startDate;
+                r.singleFile = recording.singleFile;
                 r.ko_size(calculateSize(recording.sizeInByte));
                 r.ko_status(recording.status);
                 r.ko_contactSheet(
@@ -223,67 +267,88 @@ function syncRecordings(recordings) {
 }
 
 function updateRecordings() {
-    try {
-        let action = '{"action": "recordings"}';
-        $.ajax({
-            type : 'POST',
-            url : '../rec',
-            dataType : 'json',
-            async : true,
-            timeout : 60000,
-            headers : {
-                'CTBREC-HMAC' : CryptoJS.HmacSHA256(action, hmac)
-            },
-            data : action
-        }).done(function(data) {
-            if (data.status === 'success') {
-                syncRecordings(data.recordings);
-                updateDiskSpace();
-            } else {
-                if (console)
-                    console.log('request failed', data);
-            }
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (console)
-                console.log(textStatus, errorThrown);
-        });
-    } catch (e) {
-        if (console)
-            console.log('Unexpected error', e);
+  try {
+    const action = '{"action": "recordings"}';
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
     }
-    setTimeout(updateRecordings, 3000);
+
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status === 'success') {
+        syncRecordings(data.recordings);
+        updateDiskSpace();
+      } else {
+        if (console) console.log('Request failed:', data);
+      }
+    })
+    .catch(error => {
+      if (console) console.log('Failed to fetch recordings:', error);
+    });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
+  setTimeout(updateRecordings, 3000);
 }
 
 function updateDiskSpace() {
-    let action = '{"action": "space"}';
-    $.ajax({
-        type : 'POST',
-        url : '../rec',
-        dataType : 'json',
-        async : true,
-        timeout : 60000,
-        headers : {
-            'CTBREC-HMAC' : CryptoJS.HmacSHA256(action, hmac)
-        },
-        data : action
-    }).done(function(data) {
-        if (data.status === 'success') {
-            space.total(data.spaceTotal);
-            space.free(data.spaceFree);
-            space.percent((data.spaceFree / data.spaceTotal * 100).toFixed(2));
-            space.text(calculateSize(data.spaceFree) + ' / ' + calculateSize(data.spaceTotal));
-            throughput.bytes(data.throughput);
-            throughput.timeframe(data.throughputTimeframe);
-            let bytesPerSecond = data.throughput / data.throughputTimeframe * 1000;
-            throughput.text(calculateSize(bytesPerSecond) + '/s');
-        } else {
-            if (console)
-                console.log('request failed', data);
-        }
-    }).fail(function(jqXHR, textStatus, errorThrown) {
-        if (console)
-            console.log(textStatus, errorThrown);
+  try {
+    const action = '{"action": "space"}';
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+    if (hmac && hmac.length > 0) {
+      headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256(action, hmac).toString(CryptoJS.enc.Base64);
+    }
+
+    fetch('../rec', {
+      method: 'POST',
+      headers: headers,
+      body: action
+    })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP ${response.status}: ${text}`);
+        });
+      }
+      return response.json();
+    })
+    .then(data => {
+      if (data.status === 'success') {
+        space.total(data.spaceTotal);
+        space.free(data.spaceFree);
+        space.percent((data.spaceFree / data.spaceTotal * 100).toFixed(2));
+        space.text(calculateSize(data.spaceFree) + ' / ' + calculateSize(data.spaceTotal));
+        throughput.bytes(data.throughput);
+        throughput.timeframe(data.throughputTimeframe);
+        let bytesPerSecond = data.throughput / data.throughputTimeframe * 1000;
+        throughput.text(calculateSize(bytesPerSecond) + '/s');
+      } else {
+        if (console) console.log('Request failed:', data);
+      }
+    })
+    .catch(error => {
+      if (console) console.log('Failed to fetch disk space:', error);
     });
+  } catch (e) {
+    if (console) console.log('Unexpected error:', e);
+  }
 }
 
 function getImageUrl(localFilePath) {
@@ -292,18 +357,17 @@ function getImageUrl(localFilePath) {
   let recordingsDirEntry = ko.utils.arrayFirst(observableSettingsArray(), item => item.key === 'recordingsDir');
   if (!recordingsDirEntry) return null; // Can be removed since it has to exist in the config
   let recordingsDir = recordingsDirEntry.ko_value();
-  // Normalize paths to use forward slashes
-  const normalizedLocalPath = localFilePath.replace(/\\/g, '/');
-  const normalizedRecordingsDir = recordingsDir.replace(/\\/g, '/');
+  // Normalize paths to use forward slashes and convert to lowercase for comparison
+  const normalizedLocalPath = localFilePath.replace(/\\/g, '/').toLowerCase();
+  const normalizedRecordingsDir = recordingsDir.replace(/\\/g, '/').toLowerCase();
   const basePath = normalizedRecordingsDir.endsWith('/') ?
     normalizedRecordingsDir :
     normalizedRecordingsDir + '/';
-  if (console) console.log("normalizedLocalPath: " + normalizedLocalPath);
-  if (console) console.log("normalizedRecordingsDir: " + normalizedRecordingsDir);
-  if (console) console.log("basePath: " + basePath);
   // Check if localFilePath starts with recordingsDir and replace it
   if (normalizedLocalPath.startsWith(basePath)) {
-    return "/image/recording/" + normalizedLocalPath.substring(basePath.length);
+    // Use original path case for URL
+    const originalNormalizedLocalPath = localFilePath.replace(/\\/g, '/');
+    return "/image/recording/" + originalNormalizedLocalPath.substring(basePath.length);
   }
-  return null; // Return null if the path doesn't match - in theory shouldn't happen
+  return null; // Return null if the path doesn't match
 }
