You've already forked fm-dx-webserver
mirror of
https://github.com/KubaPro010/fm-dx-webserver.git
synced 2026-02-26 22:13:53 +01:00
ui changes, playback bugfixes
This commit is contained in:
@@ -97,8 +97,7 @@
|
||||
}
|
||||
|
||||
.modal-panel-content .version-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-top: 75px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -250,10 +250,16 @@
|
||||
</form>
|
||||
<% } %>
|
||||
<div id="login-message"></div>
|
||||
|
||||
<h2>Time:</h2>
|
||||
<p class="m-0">Server: <span class="color-3" id="server-time"></span></p>
|
||||
<p class="m-0">Local: <span class="color-3" id="client-time"></span></p>
|
||||
|
||||
<p class="text-small" id="current-ping"></p>
|
||||
|
||||
<div class="version-info">
|
||||
<p class="text-small">FM-DX WebServer <br>by <a href="https://noobish.eu" target="_blank">Noobish</a> & the OpenRadio community.</p>
|
||||
<span style="color: var(--color-3);">v1.0.4 [8/2/2024]</span>
|
||||
<span style="color: var(--color-3);">v1.0.5 [10/2/2024]</span>
|
||||
<p class="text-small bottom-50">
|
||||
<span class="text-smaller">librds & maps.fmdx.pl by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a></span><br>
|
||||
<span class="text-smaller">3LAS by <a href="https://github.com/JoJoBond/3LAS" target="_blank">JoJoBond</a></span><br>
|
||||
|
||||
@@ -74,13 +74,17 @@ var AudioFormatReader_MPEG = /** @class */ (function (_super) {
|
||||
// the full frame length by adding zeros.
|
||||
var bufferLength = 0;
|
||||
var expectedTotalPlayTime_1 = 0;
|
||||
expectedTotalPlayTime_1 += this.Frames[0].SampleCount / this.Frames[0].SampleRate / 2.0; // Only half of data is usable due to overlap
|
||||
var firstGranulePlayTime_1 = 0;
|
||||
var lastGranulePlayTime_1 = 0;
|
||||
firstGranulePlayTime_1 = this.Frames[0].SampleCount / this.Frames[0].SampleRate / 2.0; // Only half of data is usable due to overlap
|
||||
expectedTotalPlayTime_1 += firstGranulePlayTime_1;
|
||||
bufferLength += this.Frames[0].Data.length;
|
||||
for (var i = 1; i < this.Frames.length - 1; i++) {
|
||||
expectedTotalPlayTime_1 += this.Frames[i].SampleCount / this.Frames[i].SampleRate;
|
||||
bufferLength += this.Frames[i].Data.length;
|
||||
}
|
||||
expectedTotalPlayTime_1 += this.Frames[this.Frames.length - 1].SampleCount / this.Frames[this.Frames.length - 1].SampleRate / 2.0; // Only half of data is usable due to overlap
|
||||
lastGranulePlayTime_1 = this.Frames[this.Frames.length - 1].SampleCount / this.Frames[this.Frames.length - 1].SampleRate / 2.0; // Only half of data is usable due to overlap
|
||||
expectedTotalPlayTime_1 += lastGranulePlayTime_1;
|
||||
bufferLength += this.Frames[this.Frames.length - 1].Data.length;
|
||||
// If needed, add some space for the ID3v2 tag
|
||||
if (this.AddId3Tag) {
|
||||
@@ -110,7 +114,9 @@ var AudioFormatReader_MPEG = /** @class */ (function (_super) {
|
||||
this.Audio.decodeAudioData(decodeBuffer.buffer, (function (decodedData) {
|
||||
var _id = id_1;
|
||||
var _expectedTotalPlayTime = expectedTotalPlayTime_1;
|
||||
this._OnDecodeSuccess(decodedData, _id, _expectedTotalPlayTime);
|
||||
var _firstGranulePlayTime = firstGranulePlayTime_1;
|
||||
var _lastGranulePlayTime = lastGranulePlayTime_1;
|
||||
this._OnDecodeSuccess(decodedData, _id, _expectedTotalPlayTime, _firstGranulePlayTime, _lastGranulePlayTime);
|
||||
}).bind(this), this._OnDecodeError.bind(this));
|
||||
}
|
||||
};
|
||||
@@ -187,9 +193,10 @@ var AudioFormatReader_MPEG = /** @class */ (function (_super) {
|
||||
return new MPEGFrameInfo(new Uint8Array(frameArray), this.FrameSamples, this.FrameSampleRate);
|
||||
};
|
||||
// Is called if the decoding of the window succeeded
|
||||
AudioFormatReader_MPEG.prototype.OnDecodeSuccess = function (decodedData, id, expectedTotalPlayTime) {
|
||||
AudioFormatReader_MPEG.prototype.OnDecodeSuccess = function (decodedData, id, expectedTotalPlayTime, firstGranulePlayTime, lastGranulePlayTime) {
|
||||
var extractSampleCount;
|
||||
var extractSampleOffset;
|
||||
var delta = 0.001;
|
||||
// Check if we got the expected number of samples
|
||||
if (expectedTotalPlayTime > decodedData.duration) {
|
||||
// We got less samples than expect, we suspect that they were truncated equally at start and end.
|
||||
@@ -210,7 +217,34 @@ var AudioFormatReader_MPEG = /** @class */ (function (_super) {
|
||||
extractSampleCount += budgetSamples;
|
||||
this.TimeBudget -= (budgetSamples / decodedData.sampleRate);
|
||||
}
|
||||
extractSampleOffset = Math.floor((decodedData.length - extractSampleCount) / 2);
|
||||
var diff = decodedData.duration - expectedTotalPlayTime;
|
||||
if ((diff - firstGranulePlayTime - lastGranulePlayTime) >= -delta) {
|
||||
// Both first and last granule are present. Cut out middle section.
|
||||
extractSampleOffset = Math.floor((decodedData.length - extractSampleCount) / 2);
|
||||
}
|
||||
if (Math.abs(firstGranulePlayTime - lastGranulePlayTime) <= delta) {
|
||||
// First and last granule are equal. We need to make an educated guess which one is present.
|
||||
if (isIOS || isIPadOS) {
|
||||
// I don't know why, but Apple does things differently.
|
||||
extractSampleOffset = Math.floor((decodedData.length - extractSampleCount) / 2);
|
||||
}
|
||||
else {
|
||||
// Assume last granule is present.
|
||||
extractSampleOffset = decodedData.length - extractSampleCount;
|
||||
}
|
||||
}
|
||||
else if (Math.abs(diff - firstGranulePlayTime) <= delta) {
|
||||
// Last granule is present.
|
||||
extractSampleOffset = decodedData.length - extractSampleCount;
|
||||
}
|
||||
else if (Math.abs(diff - lastGranulePlayTime) <= delta) {
|
||||
// First granule is present.
|
||||
extractSampleOffset = 0;
|
||||
}
|
||||
else {
|
||||
// The difference is not equal to neither the first, the last nor the sum of both granule. So we just use the middle.
|
||||
extractSampleOffset = Math.floor((decodedData.length - extractSampleCount) / 2);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// We got the expected number of samples, no adaption needed
|
||||
|
||||
@@ -123,6 +123,11 @@ $(document).ready(function () {
|
||||
return false;
|
||||
});
|
||||
|
||||
setInterval(getServerTime, 10000);
|
||||
getServerTime();
|
||||
setInterval(sendPingRequest, 5000);
|
||||
sendPingRequest();
|
||||
|
||||
var freqUpButton = $('#freq-up')[0];
|
||||
var freqDownButton = $('#freq-down')[0];
|
||||
var psContainer = $('#ps-container')[0];
|
||||
@@ -167,6 +172,55 @@ function getInitialSettings() {
|
||||
});
|
||||
}
|
||||
|
||||
function getLocalizedTime(serverTime) {
|
||||
// Convert server time to a Date object
|
||||
const serverDate = new Date(serverTime);
|
||||
|
||||
// Get local time zone offset
|
||||
const localOffset = serverDate.getTimezoneOffset() * 60000; // Convert minutes to milliseconds
|
||||
|
||||
// Calculate local time by adding the offset
|
||||
const localTime = new Date(serverDate.getTime() - localOffset);
|
||||
|
||||
// Format local time
|
||||
const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
|
||||
const formattedLocalTime = localTime.toLocaleString('en-US', options);
|
||||
|
||||
return formattedLocalTime;
|
||||
}
|
||||
|
||||
function getServerTime() {
|
||||
$.ajax({
|
||||
url: './server_time',
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
// Convert server time to local time format
|
||||
const localizedTimeServer = getLocalizedTime(data.serverTime);
|
||||
const localizedTimeClient = getLocalizedTime(new Date().toISOString());
|
||||
|
||||
$('#server-time').text(localizedTimeServer);
|
||||
$('#client-time').text(localizedTimeClient);
|
||||
},
|
||||
error: function (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sendPingRequest() {
|
||||
const startTime = new Date().getTime();
|
||||
|
||||
fetch('/ping')
|
||||
.then(response => {
|
||||
const endTime = new Date().getTime();
|
||||
const pingTime = endTime - startTime;
|
||||
$('#current-ping').text(`Ping: ${pingTime}ms`);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching ping:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function initCanvas(parsedData) {
|
||||
signalToggle = $("#signal-units-toggle");
|
||||
|
||||
@@ -329,9 +383,8 @@ function getCurrentFreq() {
|
||||
function checkKey(e) {
|
||||
e = e || window.event;
|
||||
|
||||
// Check if any input element is focused using jQuery
|
||||
if ($('input:focus').length > 0) {
|
||||
return; // Do nothing if an input is focused
|
||||
if ($('#password:focus').length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
getCurrentFreq();
|
||||
@@ -538,7 +591,8 @@ function updateDataElements(parsedData) {
|
||||
$('#data-ant input').val($('#data-ant li[data-value="' + parsedData.ant + '"]').text());
|
||||
|
||||
if (parsedData.txInfo.station.length > 1) {
|
||||
$('#data-station-name').text(decodeURIComponent(parsedData.txInfo.station.replace(/\u009e/g, '\u017E')));
|
||||
const sanitizedStation = parsedData.txInfo.station.replace(/%/g, '%25');
|
||||
$('#data-station-name').text(decodeURIComponent(sanitizedStation.replace(/\u009e/g, '\u017E')));
|
||||
$('#data-station-erp').text(parsedData.txInfo.erp);
|
||||
$('#data-station-city').text(parsedData.txInfo.city);
|
||||
$('#data-station-itu').text(parsedData.txInfo.itu);
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
theme4: ['#0c1c1b', '#68f7ee'],
|
||||
theme5: ['#171106', '#f5b642'],
|
||||
theme6: ['#21091d', '#ed51d3'],
|
||||
theme7: ['#1d1838', '#8069fa'],
|
||||
theme7: ['#0d0b1a', '#8069fa'],
|
||||
theme8: ['#000', '#888'],
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user