fix table html & more rigorous formatSeconds variable use

This commit is contained in:
2025-02-07 12:35:52 +01:00
parent 24e977572f
commit 23bc02f180
2 changed files with 26 additions and 24 deletions

View File

@@ -132,12 +132,12 @@
muted = false;
}
function formatSeconds(seconds) {
if (isNaN(seconds)) return 'No Data';
var sec_num = parseInt(seconds, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor(sec_num / 60) % 60;
var seconds = sec_num % 60;
function formatSeconds(totalSeconds) {
if (isNaN(totalSeconds)) return 'No Data';
totalSeconds = parseInt(totalSeconds, 10);
var hours = Math.floor(totalSeconds / 3600);
var minutes = Math.floor(totalSeconds / 60) % 60;
var seconds = totalSeconds % 60;
return [hours, minutes, seconds]
.map((v) => (v < 10 ? '0' + v : v))

View File

@@ -30,24 +30,26 @@
<div id="table-container">
<table>
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
{#each $currentStream.tracks as track, i}
<tr class:current={i == $currentSongIndex}>
<td class="timestamp-field"
><div class="timestamp-field-flex">
{formatTrackTime(track[0])}
<button
on:click={() => jumpToTrack(track[0])}
class="material-icons"
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
>fast_forward</button
>
</div>
</td>
<td class="artist-field">{track[1]}</td>
<td class="track-field">{track[2]}</td>
</tr>
{/each}
<tbody>
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
{#each $currentStream.tracks as track, i}
<tr class:current={i == $currentSongIndex}>
<td class="timestamp-field"
><div class="timestamp-field-flex">
{formatTrackTime(track[0])}
<button
on:click={() => jumpToTrack(track[0])}
class="material-icons"
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
>fast_forward</button
>
</div>
</td>
<td class="artist-field">{track[1]}</td>
<td class="track-field">{track[2]}</td>
</tr>
{/each}
</tbody>
</table>
</div>