svelte5 migration, formatting cleanup
This commit is contained in:
+170
-171
@@ -1,209 +1,208 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { currentStream, favoritedStreams } from '$lib/stores.js';
|
||||
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
|
||||
import TagSelect from './TagSelect.svelte';
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { currentStream, favoritedStreams } from '$lib/stores.js';
|
||||
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
|
||||
import TagSelect from './TagSelect.svelte';
|
||||
|
||||
export let streams;
|
||||
let filteredTags = [];
|
||||
let listOpen;
|
||||
let favoritesOnly = false;
|
||||
let { streams } = $props();
|
||||
let filteredTags = $state([]);
|
||||
let listOpen = $state();
|
||||
let favoritesOnly = $state(false);
|
||||
|
||||
$: displayedStreams = streamsToDisplay(filteredTags);
|
||||
$: remainingTags = getRemainingTags(displayedStreams);
|
||||
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));
|
||||
}
|
||||
|
||||
function updateFavorites(stream) {
|
||||
$favoritedStreams.has(stream['id'])
|
||||
? $favoritedStreams.delete(stream['id'])
|
||||
: $favoritedStreams.add(stream['id']);
|
||||
$favoritedStreams = $favoritedStreams; // for reactivity
|
||||
}
|
||||
function updateFavorites(stream) {
|
||||
$favoritedStreams.has(stream['id'])
|
||||
? $favoritedStreams.delete(stream['id'])
|
||||
: $favoritedStreams.add(stream['id']);
|
||||
$favoritedStreams = $favoritedStreams; // for reactivity
|
||||
}
|
||||
let displayedStreams = $derived(streamsToDisplay(filteredTags));
|
||||
let remainingTags = $derived(getRemainingTags(displayedStreams));
|
||||
</script>
|
||||
|
||||
<div class="tag-select">
|
||||
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
|
||||
<button
|
||||
on:click={() => (favoritesOnly = !favoritesOnly)}
|
||||
class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
|
||||
>
|
||||
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
|
||||
<button
|
||||
onclick={() => (favoritesOnly = !favoritesOnly)}
|
||||
class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="stream-list">
|
||||
{#each streams as stream}
|
||||
{@const favorited = $favoritedStreams.has(stream['id'])}
|
||||
{@const current = $currentStream['id'] === stream['id']}
|
||||
<li
|
||||
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
|
||||
class="stream-item {current ? 'current-stream' : ''}"
|
||||
id="stream-{stream['id']}"
|
||||
>
|
||||
<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
|
||||
<span class="stream-item-id">
|
||||
ID:
|
||||
{shorthandCode(stream['id'])}</span
|
||||
>
|
||||
{#each streams as stream}
|
||||
{@const favorited = $favoritedStreams.has(stream['id'])}
|
||||
{@const current = $currentStream['id'] === stream['id']}
|
||||
<li
|
||||
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
|
||||
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-date">{formatDate(stream['stream_date'])}</span>
|
||||
|
||||
<span class="stream-item-length"
|
||||
>{formatSecondsToHms(stream['length_seconds'])}</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>
|
||||
<p class="stream-item-tags" hidden={!remainingTags.length}>
|
||||
Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
|
||||
stream['tags'],
|
||||
remainingTags
|
||||
).join(', ')}
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
updateFavorites(stream);
|
||||
}}
|
||||
class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
|
||||
>{favorited ? 'star' : 'star_border'}</button
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
<button
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateFavorites(stream);
|
||||
}}
|
||||
class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
|
||||
>{favorited ? 'star' : 'star_border'}</button
|
||||
>
|
||||
</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-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-tags {
|
||||
margin: 0;
|
||||
font-family: Tahoma;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.stream-item-id {
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.stream-item-id {
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.stream-item-date {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
.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 {
|
||||
background-color: #add8e6;
|
||||
}
|
||||
|
||||
.current-stream > .stream-item-button:hover {
|
||||
background-color: #87c5d9;
|
||||
}
|
||||
.current-stream > .stream-item-button:hover {
|
||||
background-color: #87c5d9;
|
||||
}
|
||||
|
||||
.current-stream > .stream-item-button:active {
|
||||
background-color: #7aa8b8;
|
||||
}
|
||||
.current-stream > .stream-item-button:active {
|
||||
background-color: #7aa8b8;
|
||||
}
|
||||
|
||||
.tag-select {
|
||||
text-align: left;
|
||||
color: black;
|
||||
display: flex;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.select-faves-star {
|
||||
color: rgba(255, 219, 88, 1);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.unselect-faves-star {
|
||||
color: #bbbbbb;
|
||||
font-size: 24px;
|
||||
}
|
||||
.unselect-faves-star {
|
||||
color: #bbbbbb;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stream-item-star {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.stream-item-star {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.stream-item-star-faved {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.stream-item:hover .stream-item-star {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.stream-item-star-faved {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.stream-item:hover .stream-item-star {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stream-item:hover .stream-item-star:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.stream-item:hover .stream-item-star:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.stream-item-star {
|
||||
opacity: 0.5;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.stream-item-star {
|
||||
opacity: 0.5;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user