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-12 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update ChannelItem.svelte

Browse source
This commit is contained in:
Arhey 2022-09-13 22:05:38 +03:00
parent 4f2faf3e8d
commit e88adc6ac9
1 changed files with 74 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/components/ChannelItem.svelte
View file

@ -3,6 +3,7 @@
import StreamsPopup from './StreamsPopup.svelte'
import GuidesPopup from './GuidesPopup.svelte'
import ChannelPopup from './ChannelPopup.svelte'
import { search, query, hasQuery, setSearchParam } from '../store.js'
export let channel
@ -29,6 +30,20 @@
{ transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
)
}
function pluralize(number, word) {
return number > 1 ? word + 's' : word
}
function searchBy(q) {
if ($query !== q) {
query.set(q)
hasQuery.set(true)
search(q)
setSearchParam('q', q)
}
close()
}
</script>
<tr
@ -47,73 +62,88 @@
{/if}
</div>
</td>
<td class="px-2">
<td class="pl-3 pr-2">
<div>
<a
on:click|preventDefault="{showChannelData}"
href="/"
rel="nofollow"
role="button"
tabindex="0"
class="text-left font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500"
>
{channel.name}
</a>
<div class="text-left">
<a
on:click|preventDefault="{showChannelData}"
href="/"
rel="nofollow"
role="button"
tabindex="0"
class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500"
>
{channel.name}
</a>
{#if channel._searchable.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:bg-gray-700 dark:text-gray-300 cursor-default rounded-full"
title="closed: {channel.closed}"
>
Closed
</div>
{/if} {#if channel.native_name}
<div class="text-sm text-gray-400 dark:text-gray-400">{channel.native_name}</div>
{/if}
</div>
</div>
</td>
<td class="px-2">
<div>
<code
class="break-words text-sm text-gray-500 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"
>{channel.id}</code
>
</div>
</td>
<td class="pl-2 pr-5">
<div class="text-right flex justify-end space-x-3 items-center">
{#if streams.length}
<button
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
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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"
></path>
</svg>
<div class="font-semibold">{streams.length}</div>
<div>streams</div>
</button>
{/if}{#if guides.length}
{#if guides.length}
<button
on:click="{showGuides}"
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
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M5.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H6a.75.75 0 01-.75-.75V12zM6 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H6zM7.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H8a.75.75 0 01-.75-.75V12zM8 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H8zM9.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V10zM10 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H10zM9.25 14a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H10a.75.75 0 01-.75-.75V14zM12 9.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V10a.75.75 0 00-.75-.75H12zM11.25 12a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75V12zM12 13.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V14a.75.75 0 00-.75-.75H12zM13.25 10a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75H14a.75.75 0 01-.75-.75V10zM14 11.25a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 00.75-.75V12a.75.75 0 00-.75-.75H14z"
/>
<path
fill-rule="evenodd"
d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
clip-rule="evenodd"
/>
</svg>
<div>{guides.length}</div>
<div>{pluralize(guides.length, 'guide')}</div>
</button>
{/if}{#if streams.length}
<button
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
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
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
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 class="font-semibold">{guides.length}</div>
<div>guides</div>
<div>{streams.length}</div>
<div>{pluralize(streams.length, 'stream')}</div>
</button>
{/if}
</div>