mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-12 18:10:06 -04:00
Update components
This commit is contained in:
freearhey
parent
83e29ddefe
commit
8f37488278
8 changed files with 184 additions and 162 deletions
|
|
@ -12,7 +12,7 @@
|
|||
<div class="flex">
|
||||
<div class="w-36 sm:w-52 shrink-0"></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
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<div class="bg-white dark:bg-gray-800">
|
||||
{#each channels as channel (channel.id)}
|
||||
<ChannelItem bind:channel="{channel}" />
|
||||
<ChannelItem bind:channel />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,10 +63,10 @@
|
|||
|
||||
{#if $downloadMode}
|
||||
<div
|
||||
transition:fade="{{duration:200}}"
|
||||
transition:fade={{ duration: 200 }}
|
||||
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>
|
||||
{/if}
|
||||
<div
|
||||
|
|
@ -79,26 +79,26 @@
|
|||
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"
|
||||
referrerpolicy="no-referrer"
|
||||
src="{channel.logo}"
|
||||
alt="{channel.name}"
|
||||
src={channel.logo}
|
||||
alt={channel.name}
|
||||
/>
|
||||
{/if}
|
||||
</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 class="text-left">
|
||||
<div class="flex space-x-2 items-center">
|
||||
<a
|
||||
on:click|preventDefault="{showChannelData}"
|
||||
on:click|preventDefault={showChannelData}
|
||||
href="/channel?id={channel.id}"
|
||||
tabindex="0"
|
||||
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}
|
||||
</a>
|
||||
{#if channel.is === 'closed'}
|
||||
{#if channel.is_closed}
|
||||
<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="closed: {channel.closed}"
|
||||
|
|
@ -106,11 +106,19 @@
|
|||
Closed
|
||||
</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}
|
||||
</div>
|
||||
{#if channel.alt_names.length}
|
||||
<div
|
||||
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(', ')}
|
||||
</div>
|
||||
|
|
@ -118,7 +126,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-52 px-2 sm:w-72">
|
||||
<div class="w-52 px-2 sm:w-80">
|
||||
<div>
|
||||
<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"
|
||||
|
|
@ -126,7 +134,7 @@
|
|||
>
|
||||
</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">
|
||||
<!-- {#if guides.length}
|
||||
<button
|
||||
|
|
@ -155,7 +163,7 @@
|
|||
{/if} -->
|
||||
{#if streams.length}
|
||||
<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"
|
||||
>
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
</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="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">
|
||||
<button
|
||||
on:click="{closePopup}"
|
||||
on:click={closePopup}
|
||||
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"
|
||||
>
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
</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-12 pt-10">
|
||||
<HTMLPreview data="{channel}" close="{closePopup}" />
|
||||
<HTMLPreview data={channel} close={closePopup} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
{#if selected}
|
||||
<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"
|
||||
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
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
</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"
|
||||
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)}"
|
||||
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
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<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)}"
|
||||
on:click={() => toggle(true)}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,13 @@
|
|||
|
||||
<div class="w-14 sm:w-36">
|
||||
{#if $downloadMode}
|
||||
<DefaultButton on:click="{() => {downloadMode.set(false);dispatch('click')}}" area-label="Done">
|
||||
<DefaultButton
|
||||
on:click={() => {
|
||||
downloadMode.set(false)
|
||||
dispatch('click')
|
||||
}}
|
||||
area-label="Done"
|
||||
>
|
||||
<span class="sm:hidden inline">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -29,11 +35,13 @@
|
|||
|
||||
<span class="hidden sm:inline">Done</span>
|
||||
</DefaultButton>
|
||||
|
||||
{:else}
|
||||
<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"
|
||||
on:click="{() => {downloadMode.set(true);dispatch('click')}}"
|
||||
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')
|
||||
}}
|
||||
area-label="Create Playlist"
|
||||
>
|
||||
<span class="sm:hidden inline">
|
||||
|
|
@ -50,7 +58,8 @@
|
|||
/>
|
||||
<path
|
||||
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
|
||||
/></svg
|
||||
></span
|
||||
><span class="hidden sm:inline">Create Playlist</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
|
||||
<div class="w-14 sm:w-44">
|
||||
<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"
|
||||
on:click="{onClick}"
|
||||
disabled="{!$selected.length}"
|
||||
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}
|
||||
disabled={!$selected.length}
|
||||
area-label="Download Playlist"
|
||||
>
|
||||
<span class="sm:hidden inline">
|
||||
|
|
|
|||
|
|
@ -29,17 +29,22 @@
|
|||
{ 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: '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: 'is_nsfw:true', result: 'Finds channels marked as NSFW.' },
|
||||
{
|
||||
query: 'is:closed',
|
||||
query: 'is_closed:true',
|
||||
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.' }
|
||||
]
|
||||
</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="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
||||
|
|
@ -48,7 +53,7 @@
|
|||
{title}
|
||||
</h3>
|
||||
<button
|
||||
on:click="{close}"
|
||||
on:click={close}
|
||||
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"
|
||||
>
|
||||
|
|
@ -66,7 +71,7 @@
|
|||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
export let title = 'Streams'
|
||||
</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="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"
|
||||
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
|
||||
>{title}
|
||||
</svg>
|
||||
</span>{title}
|
||||
</h3>
|
||||
<button
|
||||
on:click="{close}"
|
||||
on:click={close}
|
||||
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"
|
||||
>
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
{#each streams as stream}
|
||||
<StreamItem stream="{stream}" />
|
||||
<StreamItem {stream} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue