iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-13 02:20:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update components

Browse source
This commit is contained in:
freearhey 2023-09-18 19:40:56 +03:00
parent 83e29ddefe
commit 8f37488278
8 changed files with 184 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ChannelGrid.svelte
View file

@ -12,7 +12,7 @@
<div class="flex"> <div class="flex">
<div class="w-36 sm:w-52 shrink-0"></div> <div class="w-36 sm:w-52 shrink-0"></div>
<div <div
class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-72 shrink-0" class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-80 shrink-0"
> >
Name Name
</div> </div>
@ -28,7 +28,7 @@
</div> </div>
<div class="bg-white dark:bg-gray-800"> <div class="bg-white dark:bg-gray-800">
{#each channels as channel (channel.id)} {#each channels as channel (channel.id)}
<ChannelItem bind:channel="{channel}" /> <ChannelItem bind:channel />
{/each} {/each}
</div> </div>
</div> </div>

110
src/components/ChannelItem.svelte
View file

@ -62,12 +62,12 @@
</script> </script>
{#if $downloadMode} {#if $downloadMode}
<div <div
transition:fade="{{duration:200}}" transition:fade={{ duration: 200 }}
class="w-14 h-14 shrink-0 flex items-center absolute -left-14" class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
> >
<Checkbox selected="{isSelected}" on:change="{onCheckboxChange}" /> <Checkbox selected={isSelected} on:change={onCheckboxChange} />
</div> </div>
{/if} {/if}
<div <div
class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative" class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
@ -75,50 +75,58 @@
<div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center"> <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
<div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden"> <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
{#if channel.logo} {#if channel.logo}
<img <img
class="block align-middle mx-auto max-w-[6rem] max-h-[2.75rem] text-sm text-gray-400 dark:text-gray-600 cursor-defaults" class="block align-middle mx-auto max-w-[6rem] max-h-[2.75rem] text-sm text-gray-400 dark:text-gray-600 cursor-defaults"
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="{channel.logo}" src={channel.logo}
alt="{channel.name}" alt={channel.name}
/> />
{/if} {/if}
</div> </div>
</div> </div>
<div class="w-52 px-2 sm:w-72 shrink-0"> <div class="w-52 px-2 sm:w-80 shrink-0">
<div> <div>
<div class="text-left"> <div class="text-left">
<div class="flex space-x-2 items-center"> <div class="flex space-x-2 items-center">
<a <a
on:click|preventDefault="{showChannelData}" on:click|preventDefault={showChannelData}
href="/channel?id={channel.id}" href="/channel?id={channel.id}"
tabindex="0" tabindex="0"
class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1" class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
title="{channel.name}" title={channel.name}
> >
{channel.name} {channel.name}
</a> </a>
{#if channel.is === 'closed'} {#if channel.is_closed}
<div <div
class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full" class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
title="closed: {channel.closed}" title="closed: {channel.closed}"
> >
Closed Closed
</div> </div>
{/if}
{#if channel.is_blocked}
<div
class="text-gray-500 border-[1px] border-gray-200 text-xs inline-flex items-center px-2.5 py-0.5 ml-1 mr-2 dark:text-gray-300 cursor-default rounded-full"
title="The channel has been added to our blocklist due to the claim of the copyright holder"
>
Blocked
</div>
{/if} {/if}
</div> </div>
{#if channel.alt_names.length} {#if channel.alt_names.length}
<div <div
class="text-sm text-gray-400 dark:text-gray-400 line-clamp-1" class="text-sm text-gray-400 dark:text-gray-400 line-clamp-1"
title="{channel.alt_names.join(', ')}" title={channel.alt_names.join(', ')}
> >
{channel.alt_names.join(', ')} {channel.alt_names.join(', ')}
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
<div class="w-52 px-2 sm:w-72"> <div class="w-52 px-2 sm:w-80">
<div> <div>
<code <code
class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono" class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
@ -126,7 +134,7 @@
> >
</div> </div>
</div> </div>
<div class="w-52 px-4 sm:56"> <div class="w-40 px-6 sm:w-[150px]">
<div class="text-right flex justify-end space-x-3 items-center"> <div class="text-right flex justify-end space-x-3 items-center">
<!-- {#if guides.length} <!-- {#if guides.length}
<button <button
@ -154,28 +162,28 @@
</button> </button>
{/if} --> {/if} -->
{#if streams.length} {#if streams.length}
<button <button
on:click="{showStreams}" on:click={showStreams}
class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400" class="text-sm text-gray-500 dark:text-gray-100 inline-flex space-x-1 flex items-center hover:text-blue-500 dark:hover:text-blue-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" class="h-5 w-5"
d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z" fill="none"
/> viewBox="0 0 24 24"
</svg> stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
<div>{streams.length}</div> <div>{streams.length}</div>
<div>{pluralize(streams.length, 'stream')}</div> <div>{pluralize(streams.length, 'stream')}</div>
</button> </button>
{/if} {/if}
</div> </div>
</div> </div>

8
src/components/ChannelPopup.svelte
View file

@ -10,7 +10,7 @@
} }
</script> </script>
<div class="relative px-2 py-24 flex justify-center" on:keypress on:click|self="{closePopup}"> <div class="relative px-2 py-24 flex justify-center" on:keypress on:click|self={closePopup}>
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]"> <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
<div <div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700" class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
@ -21,7 +21,7 @@
<div class="inline-flex w-1/3 justify-end"> <div class="inline-flex w-1/3 justify-end">
<button <button
on:click="{closePopup}" on:click={closePopup}
type="button" type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
> >
@ -40,9 +40,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="overflow-y-scroll overflow-x-hidden w-full"> <div class="overflow-y-auto overflow-x-hidden w-full">
<div class="p-12 pt-10"> <div class="p-12 pt-10">
<HTMLPreview data="{channel}" close="{closePopup}" /> <HTMLPreview data={channel} close={closePopup} />
</div> </div>
</div> </div>
</div> </div>

84
src/components/Checkbox.svelte
View file

@ -12,47 +12,47 @@
</script> </script>
{#if selected} {#if selected}
<button <button
class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center" class="w-12 h-12 rounded-full text-primary-light hover:text-primary-default dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
area-label="Unselect" area-label="Unselect"
on:click="{() => toggle(false)}" on:click={() => toggle(false)}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path
fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else if indeterminate}
<button
class="w-12 h-12 rounded-full text-accent-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click="{() => toggle(false)}"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else}
<button
class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"
area-label="Select"
on:click="{() => toggle(true)}"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
stroke="currentColor"
stroke-width="1.5"
> >
<circle cx="12" cy="12" r="10" fill="none" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
</svg> <path
</button> fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else if indeterminate}
<button
class="w-12 h-12 rounded-full text-primary-default hover:text-primary-dark dark:hover:text-primary-light transition-colors duration-200 flex items-center justify-center"
area-label="Unselect"
on:click={() => toggle(false)}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm3 10.5a.75.75 0 000-1.5H9a.75.75 0 000 1.5h6z"
clip-rule="evenodd"
/>
</svg>
</button>
{:else}
<button
class="w-12 h-12 rounded-full text-gray-200 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-600 transition-colors duration-200 flex items-center justify-center"
area-label="Select"
on:click={() => toggle(true)}
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
stroke="currentColor"
stroke-width="1.5"
>
<circle cx="12" cy="12" r="10" fill="none" />
</svg>
</button>
{/if} {/if}

95
src/components/CreatePlaylistButton.svelte
View file

@ -8,50 +8,59 @@
<div class="w-14 sm:w-36"> <div class="w-14 sm:w-36">
{#if $downloadMode} {#if $downloadMode}
<DefaultButton on:click="{() => {downloadMode.set(false);dispatch('click')}}" area-label="Done"> <DefaultButton
<span class="sm:hidden inline"> on:click={() => {
<svg downloadMode.set(false)
xmlns="http://www.w3.org/2000/svg" dispatch('click')
viewBox="0 0 24 24" }}
fill="currentColor" area-label="Done"
class="w-5 h-5" >
> <span class="sm:hidden inline">
<path <svg
fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg"
d="M9 1.5H5.625c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5zm6.61 10.936a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 14.47a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" viewBox="0 0 24 24"
clip-rule="evenodd" fill="currentColor"
/> class="w-5 h-5"
<path >
d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" <path
/> fill-rule="evenodd"
</svg> d="M9 1.5H5.625c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5zm6.61 10.936a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 14.47a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
</span> clip-rule="evenodd"
/>
<span class="hidden sm:inline">Done</span> <path
</DefaultButton> d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z"
/>
</svg>
</span>
<span class="hidden sm:inline">Done</span>
</DefaultButton>
{:else} {:else}
<button <button
class="rounded-md bg-accent-500 hover:bg-accent-600 transition-colors duration-200 text-sm text-white font-semibold text-center px-4 h-10 flex items-center w-full justify-center" class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold text-center px-4 h-10 flex items-center w-full justify-center"
on:click="{() => {downloadMode.set(true);dispatch('click')}}" on:click={() => {
area-label="Create Playlist" downloadMode.set(true)
> dispatch('click')
<span class="sm:hidden inline"> }}
<svg area-label="Create Playlist"
xmlns="http://www.w3.org/2000/svg" >
viewBox="0 0 24 24" <span class="sm:hidden inline">
fill="currentColor" <svg
class="w-5 h-5" xmlns="http://www.w3.org/2000/svg"
> viewBox="0 0 24 24"
<path fill="currentColor"
fill-rule="evenodd" class="w-5 h-5"
d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zM12.75 12a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V18a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V12z" >
clip-rule="evenodd" <path
/> fill-rule="evenodd"
<path d="M5.625 1.5H9a3.75 3.75 0 013.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 013.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 01-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875zM12.75 12a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V18a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V12z"
d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z" clip-rule="evenodd"
/></svg></span />
><span class="hidden sm:inline">Create Playlist</span> <path
</button> d="M14.25 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0016.5 7.5h-1.875a.375.375 0 01-.375-.375V5.25z"
/></svg
></span
><span class="hidden sm:inline">Create Playlist</span>
</button>
{/if} {/if}
</div> </div>

6
src/components/DownloadButton.svelte
View file

@ -24,9 +24,9 @@
<div class="w-14 sm:w-44"> <div class="w-14 sm:w-44">
<button <button
class="rounded-md bg-accent-500 hover:bg-accent-600 transition-colors duration-200 text-sm text-white font-semibold px-5 h-10 flex items-center disabled:bg-gray-200 dark:disabled:text-gray-500 dark:disabled:bg-gray-700 w-full justify-center" class="rounded-md bg-primary-default hover:bg-primary-dark hover:dark:bg-primary-light transition-colors duration-200 text-sm text-white font-semibold px-5 h-10 flex items-center disabled:bg-gray-200 dark:disabled:text-gray-500 dark:disabled:bg-gray-700 w-full justify-center"
on:click="{onClick}" on:click={onClick}
disabled="{!$selected.length}" disabled={!$selected.length}
area-label="Download Playlist" area-label="Download Playlist"
> >
<span class="sm:hidden inline"> <span class="sm:hidden inline">

27
src/components/SearchSyntaxPopup.svelte
View file

@ -29,17 +29,22 @@
{ query: 'broadcast_area:c/CV', result: 'Finds channels that are broadcast in Cape Verde.' }, { query: 'broadcast_area:c/CV', result: 'Finds channels that are broadcast in Cape Verde.' },
{ query: 'languages:fra', result: 'Find channels that are broadcast in French.' }, { query: 'languages:fra', result: 'Find channels that are broadcast in French.' },
{ query: 'categories:news', result: 'Finds all the news channels.' }, { query: 'categories:news', result: 'Finds all the news channels.' },
{ query: 'is_nsfw:true', result: 'Finds channels marked as NSFW.' },
{ query: 'website:.', result: 'Finds channels that have a link to the official website.' }, { query: 'website:.', result: 'Finds channels that have a link to the official website.' },
{ query: 'is_nsfw:true', result: 'Finds channels marked as NSFW.' },
{ {
query: 'is:closed', query: 'is_closed:true',
result: 'Finds channels that have been closed.' result: 'Finds channels that have been closed.'
}, },
{
query: 'is_blocked:true',
result:
'Finds channels that have been added to our blocklist due to the claim of the copyright holder.'
},
{ query: 'streams:<2', result: 'Finds channels with less than 2 streams.' } { query: 'streams:<2', result: 'Finds channels with less than 2 streams.' }
] ]
</script> </script>
<div class="relative px-2 py-20 flex justify-center" on:keypress on:click|self="{close}"> <div class="relative px-2 py-20 flex justify-center" on:keypress on:click|self={close}>
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl"> <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
<div <div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700" class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
@ -48,7 +53,7 @@
{title} {title}
</h3> </h3>
<button <button
on:click="{close}" on:click={close}
type="button" type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
> >
@ -66,7 +71,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="overflow-y-scroll overflow-x-hidden w-full"> <div class="overflow-y-auto overflow-x-hidden w-full">
<div class="p-6 text-gray-800 dark:text-white"> <div class="p-6 text-gray-800 dark:text-white">
<table class="w-full"> <table class="w-full">
<thead> <thead>
@ -77,12 +82,12 @@
</thead> </thead>
<tbody class="text-left"> <tbody class="text-left">
{#each examples as example} {#each examples as example}
<tr class="even:bg-gray-50 even:dark:bg-gray-700"> <tr class="even:bg-gray-50 even:dark:bg-gray-700">
<td class="border dark:border-gray-700 px-4 py-3 whitespace-nowrap"> <td class="border dark:border-gray-700 px-4 py-3 whitespace-nowrap">
{example.query} {example.query}
</td> </td>
<td class="border dark:border-gray-700 px-4 py-3">{example.result}</td> <td class="border dark:border-gray-700 px-4 py-3">{example.result}</td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>

12
src/components/StreamsPopup.svelte
View file

@ -7,7 +7,7 @@
export let title = 'Streams' export let title = 'Streams'
</script> </script>
<div class="relative px-2 py-32 flex justify-center" on:keypress on:click|self="{close}"> <div class="relative px-2 py-32 flex justify-center" on:keypress on:click|self={close}>
<div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl"> <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-2xl">
<div <div
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700" class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
@ -29,11 +29,11 @@
stroke-linejoin="round" stroke-linejoin="round"
d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
/> />
</svg> </span </svg>
>{title} </span>{title}
</h3> </h3>
<button <button
on:click="{close}" on:click={close}
type="button" type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
> >
@ -51,10 +51,10 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="overflow-y-scroll overflow-x-hidden w-full"> <div class="overflow-y-auto overflow-x-hidden w-full">
<div class="p-6 space-y-2"> <div class="p-6 space-y-2">
{#each streams as stream} {#each streams as stream}
<StreamItem stream="{stream}" /> <StreamItem {stream} />
{/each} {/each}
</div> </div>
</div> </div>