mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-12 18:10:06 -04:00
101 lines
3.3 KiB
Svelte
101 lines
3.3 KiB
Svelte
<script>
|
|
import GuideItem from '~/components/GuideItem.svelte'
|
|
import StreamItem from '~/components/StreamItem.svelte'
|
|
import HTMLPreview from '~/components/HTMLPreview.svelte'
|
|
import EditButton from '~/components/EditButton.svelte'
|
|
import NavBar from '~/components/NavBar.svelte'
|
|
import { onMount } from 'svelte'
|
|
import { fetchChannels, channels } from '~/store'
|
|
import { page } from '$app/stores'
|
|
|
|
let channel
|
|
let isLoading = true
|
|
let streams = []
|
|
let guides = []
|
|
|
|
onMount(async () => {
|
|
const id = $page.url.searchParams.get('id')
|
|
if (id && !$channels.length) {
|
|
await fetchChannels()
|
|
}
|
|
channel = $channels.find(c => c.id === id)
|
|
if (channel) {
|
|
streams = channel._streams
|
|
guides = channel._guides
|
|
}
|
|
isLoading = false
|
|
})
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{channel && channel.name ? `${channel.name} • iptv-org` : 'iptv-org'}</title>
|
|
</svelte:head>
|
|
|
|
<header class="fixed z-40 w-full min-w-[360px] top-0">
|
|
<NavBar withSearch />
|
|
</header>
|
|
|
|
<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen min-w-[360px] pt-16">
|
|
<section class="container max-w-[820px] mx-auto px-2 pt-6 pb-20 flex-col space-y-4">
|
|
{#if isLoading}
|
|
<div
|
|
class="flex items-center justify-center w-full pt-1 pb-6 tracking-tight text-sm text-gray-500 dark:text-gray-400 font-mono"
|
|
>
|
|
loading...
|
|
</div>
|
|
{/if}
|
|
{#if channel}
|
|
<div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
|
|
<div
|
|
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
|
>
|
|
<div class="w-1/3 overflow-hidden">
|
|
<h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
|
|
</div>
|
|
<div class="inline-flex w-1/3 justify-end space-x-3">
|
|
<EditButton {channel} />
|
|
</div>
|
|
</div>
|
|
<div class="overflow-y-auto overflow-x-hidden w-full p-10">
|
|
<HTMLPreview data={channel} />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if streams.length}
|
|
<div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
|
|
<div
|
|
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
|
>
|
|
<div class="w-1/3 overflow-hidden">
|
|
<h3 class="text-l font-medium text-gray-900 dark:text-white">Streams</h3>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-y-auto overflow-x-hidden w-full p-6">
|
|
<div class="space-y-2">
|
|
{#each streams as stream}
|
|
<StreamItem {stream} />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<!-- {#if guides.length}
|
|
<div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
|
|
<div
|
|
class="flex justify-between items-center py-4 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
|
|
>
|
|
<div class="w-1/3 overflow-hidden">
|
|
<h3 class="text-l font-medium text-gray-900 dark:text-white">Guides</h3>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-y-auto overflow-x-hidden w-full p-6">
|
|
<div class="space-y-2">
|
|
{#each guides as guide}
|
|
<GuideItem guide="{guide}" />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if} -->
|
|
</section>
|
|
</main>
|