apt-get/strimserve
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

mess around

Browse Source
This commit is contained in:
apt-get
2024-01-04 00:20:20 +01:00
parent febab6e561
commit 09a943bc6c
10 changed files with 750 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/streams/Sidebar.svelte
+91 -84
View File
@@ -1,107 +1,114 @@
<script>
import { goto } from '$app/navigation';
import TagSelect from './TagSelect.svelte';
import { goto } from '$app/navigation';
import TagSelect from './TagSelect.svelte';
export let streams;
let filteredTags = [];
let listOpen;
export let streams;
let filteredTags = [];
let listOpen;
$: displayedStreams = streamsToDisplay(filteredTags);
$: remainingTags = getRemainingTags(displayedStreams);
$: displayedStreams = streamsToDisplay(filteredTags);
$: remainingTags = getRemainingTags(displayedStreams);
function formatSecondsToHms(s) {
s = Number(s);
var h = Math.floor(s / 3600);
var m = Math.ceil((s % 3600) / 60);
function formatSecondsToHms(s) {
s = Number(s);
var h = Math.floor(s / 3600);
var m = Math.ceil((s % 3600) / 60);
var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
return hDisplay + mDisplay;
}
var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
return hDisplay + mDisplay;
}
function formatDate(unix_timestamp) {
const date = new Date(unix_timestamp);
const formattedDate = date.toISOString().split('T')[0];
return formattedDate;
}
function formatDate(unix_timestamp) {
const date = new Date(unix_timestamp);
const formattedDate = date.toISOString().split('T')[0];
return formattedDate;
}
function streamsToDisplay(filteredTags) {
const displayedStreams = streams.filter(
(stream) =>
!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
);
function streamsToDisplay(filteredTags) {
const displayedStreams = streams.filter(
(stream) =>
!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
);
// close tagselect dropdown if we can't select anything else
if (displayedStreams.length == 1) {
listOpen = !listOpen;
}
// close tagselect dropdown if we can't select anything else
if (displayedStreams.length == 1) {
listOpen = !listOpen;
}
return displayedStreams;
}
return displayedStreams;
}
function getRemainingTags(displayedStreams) {
let tagCounts = displayedStreams.reduce((tags, stream) => {
stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
return tags;
}, {});
return Object.entries(tagCounts)
.filter((el) => el[1] != displayedStreams.length)
.map((el) => el[0]);
}
function getRemainingTags(displayedStreams) {
let tagCounts = displayedStreams.reduce((tags, stream) => {
stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
return tags;
}, {});
return Object.entries(tagCounts)
.filter((el) => el[1] != displayedStreams.length)
.map((el) => el[0]);
}
function getDisplayedTagsInList(streamTags, remainingTags) {
return streamTags.filter((tag) => remainingTags.includes(tag));
}
function getDisplayedTagsInList(streamTags, remainingTags) {
return streamTags.filter((tag) => remainingTags.includes(tag));
}
</script>
<h1>streams</h1>
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
<div id="tagSelect">
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
</div>
<div>
<ul class="stream-list">
{#each streams as stream}
<li
hidden={!displayedStreams.includes(stream)}
class="stream-item"
id="stream-{stream['id']}"
>
<button
class="stream-item-button"
on:click={() => goto('/streams/' + stream['id'])}
>
<span class="stream-item-title">{stream['title']}</span>
<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
<span class="stream-item-length"
>{formatSecondsToHms(stream['length_seconds'])}</span
>
<span class="stream-item-data">title: {stream['title']}</span>
<span class="stream-item-data"
>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
>
</button>
</li>
{/each}
</ul>
<ul class="stream-list">
{#each streams as stream}
<li
hidden={!displayedStreams.includes(stream)}
class="stream-item"
id="stream-{stream['id']}"
>
<button
class="stream-item-button"
on:click={() => goto('/streams/' + stream['id'])}
>
<span class="stream-item-title">{stream['title']}</span>
<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
<span class="stream-item-length"
>{formatSecondsToHms(stream['length_seconds'])}</span
>
<span class="stream-item-data">title: {stream['title']}</span>
<span class="stream-item-data"
>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
>
</button>
</li>
{/each}
</ul>
</div>
<style>
.stream-list {
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid black;
}
.stream-list {
list-style-type: none;
padding: 0;
margin: 0;
border: 1px solid black;
}
.stream-item {
width: 100%;
overflow-wrap: anywhere;
border-bottom: 1px solid black;
}
.stream-item {
width: 100%;
overflow-wrap: anywhere;
border-bottom: 1px solid black;
}
.stream-item-button {
border-radius: 0;
min-width: 100%;
border: none;
}
.stream-item-button {
border-radius: 0;
min-width: 100%;
border: none;
}
#tagSelect {
text-align: left;
color: black;
}
</style>