strimserve/src/routes/streams/Sidebar.svelte

<script lang="ts">
    import { goto } from '$app/navigation';
    import { favoritedStreams, tagList, MAX_TAG_WEIGHT } 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 { shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
    import TagSelect from './TagSelect.svelte';
    import WeightedTags from '$lib/components/WeightedTags.svelte';

    const ctx = getStreamContext();
    // map of tag -> minimum weight
    // a stream shows if it has every tag with at least the minimum weight
    let filteredTags: Record<string, number> = $state({});
    let favoritesOnly = $state(false);
    let cachedOnly = $state(false);
    let listOpen = $state(false);
    let displayedStreams = $derived.by(streamsToDisplay);

    // how many displayed streams have each unselected tag, at each weight?
    // used in the tag select dropdown
    let dropdownCounts = $derived.by(getDropdownCounts);

    // how many displayed streams would be shown
    // if filtered per each of this tag's weights,
    // all other filters unchanged?
    // used for the selected tag pills
    let pillCounts = $derived.by(getPillCounts);

    // which tags can still alter the displayed streams if selected?
    // we eliminate either those which aren't present in the displayed streams
    // or those present (at the same weight) in every displayed stream
    // decides which tags are visible in the selection dropdown
    let remainingTags = $derived(
        Object.keys(dropdownCounts).filter((tag) =>
            dropdownCounts[tag].some((count) => count > 0 && count < displayedStreams.size)
        )
    );

    let cacheUsage = $derived(streamCache.usage.bytes);

    $effect(() => {
        if (displayedStreams.size == 1) {
            listOpen = false;
        }
    });

    function matchesFilter(stream: StreamSummary, filters: Record<string, number>) {
        return Object.entries(filters).every(([tag, min]) => (stream.tags[tag] ?? 0) >= min);
    }

    function streamsToDisplay() {
        return new Set(ctx.streams.filter((stream) => matchesFilter(stream, filteredTags)));
    }

    // how many of these streams have the tag at weight 1+, 2+ and 3+
    // e.g. dark at weights [1, 3, 3, None] on four streams gives [3, 2, 2]
    function weightCounts(streams: Iterable<StreamSummary>, tag: string) {
        const counts = new Array(MAX_TAG_WEIGHT).fill(0);
        for (const stream of streams) {
            const weight = stream.tags[tag] ?? 0;
            for (let i = 0; i < weight; i++) counts[i]++;
        }
        return counts;
    }

    function getDropdownCounts() {
        const unselected = tagList.filter((tag) => !(tag in filteredTags));
        return Object.fromEntries(
            unselected.map((tag) => [tag, weightCounts(displayedStreams, tag)])
        );
    }

    function getPillCounts() {
        return Object.fromEntries(
            Object.keys(filteredTags).map((tag) => {
                const otherFilters = { ...filteredTags };
                delete otherFilters[tag];

                const candidates = ctx.streams.filter((stream) =>
                    matchesFilter(stream, otherFilters)
                );
                return [tag, weightCounts(candidates, 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}
        {dropdownCounts}
        {pillCounts}
    />
    <button
        onclick={() => (cachedOnly = !cachedOnly)}
        aria-label="Downloaded only"
        aria-pressed={cachedOnly}
        class="material-icons filter-download {cachedOnly
            ? 'select-faves-star'
            : 'unselect-faves-star'}">file_download</button
    >
    <button
        onclick={() => (favoritesOnly = !favoritesOnly)}
        aria-label="Favorites only"
        aria-pressed={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 isPartial = streamCache.partials.has(stream.id)}
        {@const current = ctx.current?.id === stream.id}
        <li
            hidden={!displayedStreams.has(stream) ||
                (favoritesOnly && !favorited) ||
                (cachedOnly && !(isCached || isPartial))}
            class="stream-item {current ? 'current-stream' : ''}"
            id="stream-{stream.id}"
        >
            <button
                class="stream-item-button"
                aria-current={current ? 'page' : undefined}
                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>

                <span class="stream-item-tags" hidden={!Object.keys(stream.tags).length}>
                    <span class="stream-item-tags-label">Tags:</span>
                    <span class="stream-item-tags-list"
                        ><WeightedTags tags={stream.tags} highlighted={filteredTags} /></span
                    >
                </span>
            </button>

            <button
                onclick={(e) => {
                    e.stopPropagation();
                    updateFavorites(stream);
                }}
                aria-label="Favorite"
                aria-pressed={favorited}
                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);
                    }}
                    aria-label="Delete download"
                    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);
                    }}
                    aria-label={partial ? 'Resume download' : 'Download'}
                    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>

{#if cachedOnly && (streamCache.cached.size || streamCache.partials.size)}
    <p class="cache-usage">
        {#if cacheUsage !== undefined}
            {cacheUsage > 1_000_000_000
                ? (cacheUsage / 1_000_000_000).toFixed(1) + ' GB'
                : Math.round(cacheUsage / 1_000_000) + ' MB'} of cached streams
        {:else}
            Calculating…
        {/if}
    </p>
{/if}

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

    .stream-item-tags {
        display: flex;
        clear: both;
        gap: 0.3em;
        margin: 0;
        font-family: Tahoma;
        font-size: smaller;
    }

    .stream-item-tags[hidden] {
        display: none;
    }

    .stream-item-tags-label {
        flex-shrink: 0;
    }

    .stream-item-tags-list {
        flex-grow: 1;
        text-align: center;
    }

    .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;
    }

    .cache-usage {
        margin: 0;
        padding: 4px 5px;
        font-family: Tahoma;
        font-size: smaller;
    }

    .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;
    }

    .stream-item .stream-item-star:focus-visible,
    .stream-item .stream-item-cached-btn:focus-visible {
        opacity: 1;
    }

    /* touch screens can't hover, so always display */
    @media (hover: none) {
        .stream-item-star {
            opacity: 0.5;
        }

        .stream-item-cached {
            opacity: 0.4;
        }
    }

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