strimserve/src/routes/streams/Sidebar.svelte

<script lang="ts">
    import { untrack } from 'svelte';
    import { goto } from '$app/navigation';
    import { favoritedStreams } from '$lib/stores.svelte.ts';
    import * as streamCache from '$lib/streamCache.svelte.ts';
    import { getStreamContext } from '$lib/streamContext.svelte.ts';
    import type { StreamSummary } from '$lib/types';
    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
    import TagSelect from './TagSelect.svelte';

    const ctx = getStreamContext();
    let filteredTags = $state([]);
    let favoritesOnly = $state(false);
    let cachedOnly = $state(false);
    let listOpen = $state();
    let displayedStreams = $derived.by(streamsToDisplay);
    let remainingTags = $derived.by(getRemainingTags);

    $effect(() => {
        if (displayedStreams.length == 1) {
            listOpen = untrack(() => !listOpen);
        }
    });

    function streamsToDisplay() {
        return ctx.streams.filter(
            (stream) =>
                !('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
        );
    }

    function getRemainingTags() {
        let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
            stream.tags.forEach((tag) => (tags[tag] ? (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: string[], remainingTags: string[]) {
        return streamTags.filter((tag) => remainingTags.includes(tag));
    }

    function updateFavorites(stream: StreamSummary) {
        favoritedStreams.has(stream.id)
            ? favoritedStreams.delete(stream.id)
            : favoritedStreams.add(stream.id);
    }
</script>

<div class="tag-select">
    <TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
    <button
        onclick={() => (cachedOnly = !cachedOnly)}
        class="material-icons filter-download {cachedOnly
            ? 'select-faves-star'
            : 'unselect-faves-star'}">file_download</button
    >
    <button
        onclick={() => (favoritesOnly = !favoritesOnly)}
        class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
    >
</div>

<ul class="stream-list">
    {#each ctx.streams as stream}
        {@const favorited = favoritedStreams.has(stream.id)}
        {@const isCached = streamCache.cached.has(stream.id)}
        {@const current = ctx.current?.id === stream.id}
        <li
            hidden={!displayedStreams.includes(stream) ||
                (favoritesOnly && !favorited) ||
                (cachedOnly && !isCached)}
            class="stream-item {current ? 'current-stream' : ''}"
            id="stream-{stream.id}"
        >
            <button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
                <span class="stream-item-id">
                    ID:
                    {shorthandCode(stream.id)}</span
                >

                <span class="stream-item-date">{formatDate(stream.stream_date)}</span>

                <span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>

                <p class="stream-item-tags" hidden={!remainingTags.length}>
                    Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
                        stream.tags,
                        remainingTags
                    ).join(', ')}
                </p>
            </button>

            <button
                onclick={(e) => {
                    e.stopPropagation();
                    updateFavorites(stream);
                }}
                class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
                >{favorited ? 'star' : 'star_border'}</button
            >
            {#if streamCache.downloading.has(stream.id)}
                <span class="stream-item-cached">{streamCache.downloading.get(stream.id)}%</span>
            {:else if isCached}
                <button
                    onclick={(e) => {
                        e.stopPropagation();
                        streamCache.remove(stream.id);
                    }}
                    class="material-icons stream-item-cached stream-item-cached-btn">delete</button
                >
            {:else}
                {@const partial = streamCache.partials.get(stream.id)}
                <button
                    onclick={(e) => {
                        e.stopPropagation();
                        streamCache.download(stream);
                    }}
                    title={partial
                        ? `Partially downloaded (${Math.round((partial.received / partial.total) * 100)}%). Click to resume.`
                        : undefined}
                    class="material-icons filter-download stream-item-cached stream-item-cached-btn {partial
                        ? 'stream-item-partial'
                        : ''}">file_download</button
                >
            {/if}
        </li>
    {/each}
</ul>

<style>
    .stream-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        border: 1px solid black;
        border-top: 0;
        border-bottom: 0;
    }

    .stream-item-tags {
        margin: 0;
        font-family: Tahoma;
        font-size: smaller;
    }

    .stream-item-id {
        float: left;
        font-family: monospace;
        text-decoration: underline;
    }

    .stream-item-date {
        float: right;
        font-weight: bold;
    }

    .stream-item {
        width: 100%;
        overflow-wrap: anywhere;
        border-bottom: 1px solid black;
        position: relative;
        color: black;
    }

    .stream-item-button {
        border-radius: 0;
        min-width: 100%;
        border: none;
        padding: 5px;
    }

    .current-stream > .stream-item-button {
        background-color: #add8e6;
    }

    .current-stream > .stream-item-button:hover {
        background-color: #87c5d9;
    }

    .current-stream > .stream-item-button:active {
        background-color: #7aa8b8;
    }

    .tag-select {
        text-align: left;
        color: black;
        display: flex;
        margin-bottom: 1px;
    }

    .material-icons {
        margin-bottom: 0px;
        color: black;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        transition: 0.3s;
        border: none;
    }

    .select-faves-star {
        color: rgba(255, 219, 88, 1);
        font-size: 24px;
        transform: translateX(-1px);
    }

    .unselect-faves-star {
        color: #bbbbbb;
        font-size: 24px;
        transform: translateX(-1px);
    }

    .filter-download {
        transform: translateY(1px);
    }

    .stream-item-star {
        font-size: 18px;
        position: absolute;
        bottom: 2px;
        right: 2px;
        opacity: 0;
    }

    .stream-item-star-faved {
        opacity: 0.5;
    }

    .stream-item-cached {
        font-size: 18px;
        position: absolute;
        bottom: 2px;
        right: 22px;
        opacity: 0;
    }

    .stream-item-cached-btn {
        cursor: pointer;
    }

    .stream-item:hover .stream-item-cached {
        opacity: 0.5;
    }

    .stream-item:hover .stream-item-cached-btn:hover {
        opacity: 1;
    }

    .stream-item:hover .stream-item-star {
        opacity: 0.5;
    }

    .stream-item:hover .stream-item-star:hover {
        opacity: 1;
    }

    .stream-item-cached.stream-item-partial {
        color: #c8a415;
        opacity: 0.75;
    }

    .material-icons::-moz-focus-inner {
        border: 0;
    }

    @media (max-width: 575px) {
        .stream-item-star {
            opacity: 0.5;
            font-size: 24px;
            bottom: 4px;
            right: 4px;
        }

        .stream-item-cached {
            opacity: 0.4;
            font-size: 24px;
            bottom: 4px;
            right: 30px;
        }
    }
</style>