Replace ajax calls with fetch

This commit is contained in:
Jafea7 2025-10-05 17:49:24 +11:00
parent a9fa16051e
commit 23cf5e127a
6 changed files with 1139 additions and 978 deletions

View File

@ -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"

View File

@ -1,16 +1,22 @@
function loadConfig() {
try {
$.ajax({
type : 'GET',
url : '../config',
dataType : 'json',
async : true,
timeout : 60000,
headers : {
'CTBREC-HMAC' : CryptoJS.HmacSHA256('', hmac)
const headers = {};
if (hmac && hmac.length > 0) {
headers['CTBREC-HMAC'] = CryptoJS.HmacSHA256('', hmac).toString(CryptoJS.enc.Base64);
}
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
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();
}
@ -19,50 +25,73 @@ function loadConfig() {
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(error => {
if (console) console.log('Failed to load config:', error);
});
} catch (e) {
if (console)
console.log('Unexpected error', 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,
// 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)
},
data : msg
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
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();
});
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');
})
.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(errorThrown + ': ' + jqXHR.responseText, 'error');
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);
}

View File

@ -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);
!(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);

View File

@ -1,85 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<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" />
<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>
<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>
<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>
-->
<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;">
@ -92,12 +71,13 @@
<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>
<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">
@ -106,15 +86,12 @@
<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)">
<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>
<button class="btn btn-primary" type="button" onclick="addModel()"> Add </button>
</div>
</div>
</div>
@ -146,27 +123,39 @@
<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>
<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>
<a data-bind="attr: { href: ko_url, title: ko_name }, text: ko_name"></a>
</td>
<td>
<button class="btn btn-secondary fa fa-trash" title="Remove model" data-bind="click: ctbrec.stop"></button>
<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>
@ -179,14 +168,12 @@
<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>
<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>
text: space.percent() + '%'"></span>
</span>
</div>
</div>
@ -197,10 +184,18 @@
<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>
<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>
@ -210,7 +205,9 @@
</thead>
<tbody data-bind="foreach: recordings">
<tr>
<td><a data-bind="attr: { href: model.url, title: model.name }, text: model.name"></a></td>
<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>
@ -221,17 +218,14 @@
<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>
<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'),
<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'),
<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>
@ -260,12 +254,7 @@
<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>
<input class="form-control" data-bind="value: ko_value, valueUpdate: 'input'" style="width: 100%" />
</td>
</tr>
</tbody>
@ -282,45 +271,35 @@
</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>
<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;
@ -342,46 +321,102 @@
text: ko.observable('')
};
let hmac;
// Toggle visibility of stopAt options
$(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);
}
}).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();
}
});
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}`);
}
});
});
// 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() {
add(val, undefined, function() {
console.log("Model added successfully");
$('#addModelByUrl').val('');
if (useStopAt) {
// Step 2: After a delay, set stopAt parameters
setTimeout(function() {
@ -392,78 +427,74 @@
} 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 };
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) {
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');
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}).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
@ -473,212 +504,15 @@
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:"]
source: ["BongaCams:", "Cam4:", "Camsoda:", "Chaturbate:", "Dreamcam:", "Fc2Live:", "Flirt4Free:", "MyFreeCams:", "Showup:", "Streamate:", "Streamray:", "Stripchat:", "XloveCam:"]
});
}
}
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) {
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);
$.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();
}
});
loadConfig();
$('#dark-mode-toggle').click(toggleDarkMode);
if (cookieJar.get('darkMode') === 'true') {
toggleDarkMode();
}
});
function toggleDarkMode() {
darkMode = !darkMode;
var newCss = document.createElement("link");
@ -694,7 +528,5 @@
cookieJar.set("darkMode", darkMode);
}
</script>
</body>
</html>

View File

@ -1,31 +1,203 @@
function add(input, duration, onsuccess) {
try {
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);
}
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 {
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) {
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);
if (console) console.log('Request failed:', data);
}
updateModels();
}).fail(function(jqXHR, textStatus, errorThrown) {
if (console)
console.log(jqXHR, textStatus, errorThrown);
})
.catch(error => {
if (console) console.log('Failed to fetch online models:', error);
});
} catch (e) {
if (console)
console.log('Unexpected error', e);
if (console) console.log('Unexpected error:', e);
}
setTimeout(updateOnlineModels, 3000);
}
@ -66,7 +238,6 @@ function syncModels(models) {
}
}
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;
@ -94,7 +265,6 @@ function syncModels(models) {
}
}
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;
@ -112,30 +282,36 @@ function syncModels(models) {
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) {
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);
if (console) console.log('Request failed:', data);
}
}).fail(function(jqXHR, textStatus, errorThrown) {
if (console)
console.log(textStatus, errorThrown);
})
.catch(error => {
if (console) console.log('Failed to fetch models:', error);
});
} catch (e) {
if (console)
console.log('Unexpected error', e);
if (console) console.log('Unexpected error:', e);
}
}

View File

@ -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);
@ -61,48 +97,78 @@ 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
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);
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
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
})
.done(function(data) {
.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');
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
if (console) console.log(textStatus, errorThrown);
$.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);
if (console) console.log('Unexpected error:', e);
$.notify(`Removing recording ${name} failed: ${e.message}`, 'error');
}
}
@ -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(
@ -224,49 +268,68 @@ 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) {
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);
}
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);
if (console) console.log('Request failed:', data);
}
}).fail(function(jqXHR, textStatus, errorThrown) {
if (console)
console.log(textStatus, errorThrown);
})
.catch(error => {
if (console) console.log('Failed to fetch recordings:', error);
});
} catch (e) {
if (console)
console.log('Unexpected error', 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) {
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);
@ -277,13 +340,15 @@ function updateDiskSpace() {
let bytesPerSecond = data.throughput / data.throughputTimeframe * 1000;
throughput.text(calculateSize(bytesPerSecond) + '/s');
} else {
if (console)
console.log('request failed', data);
if (console) console.log('Request failed:', data);
}
}).fail(function(jqXHR, textStatus, errorThrown) {
if (console)
console.log(textStatus, errorThrown);
})
.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
}