mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-13 18:40:06 -04:00
Creates /channel page
This commit is contained in:
Arhey
parent
677365c6da
commit
33d6a13667
6 changed files with 456 additions and 347 deletions
|
|
@ -1,12 +1,7 @@
|
|||
<script>
|
||||
import '~/app.css'
|
||||
import NavBar from '~/components/NavBar.svelte'
|
||||
import Modal from 'svelte-simple-modal'
|
||||
|
||||
let scrollTop = 0
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY="{scrollTop}" />
|
||||
<svelte:head>
|
||||
<script>
|
||||
if (document) {
|
||||
|
|
@ -22,20 +17,4 @@
|
|||
</script>
|
||||
</svelte:head>
|
||||
|
||||
<header
|
||||
class:absolute="{scrollTop <= 150}"
|
||||
class:fixed="{scrollTop > 150}"
|
||||
class="z-40 w-full min-w-[360px]"
|
||||
style="top: {scrollTop > 150 && scrollTop <= 210 ? scrollTop-210: 0}px"
|
||||
>
|
||||
<NavBar withSearch="{scrollTop > 150}" />
|
||||
</header>
|
||||
|
||||
<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen pt-10 min-w-[360px]">
|
||||
<Modal
|
||||
unstyled="{true}"
|
||||
classBg="fixed top-0 left-0 z-40 w-screen h-screen flex flex-col bg-black/[.7] overflow-y-scroll"
|
||||
closeButton="{false}"
|
||||
><slot
|
||||
/></Modal>
|
||||
</main>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<script>
|
||||
import NavBar from '~/components/NavBar.svelte'
|
||||
import Modal from 'svelte-simple-modal'
|
||||
import { page } from '$app/stores'
|
||||
import InfiniteLoading from 'svelte-infinite-loading'
|
||||
import {
|
||||
fetchChannels,
|
||||
channels,
|
||||
hasQuery,
|
||||
countries,
|
||||
filteredChannels,
|
||||
|
|
@ -14,6 +18,7 @@
|
|||
import CountryItem from '~/components/CountryItem.svelte'
|
||||
import SearchField from '~/components/SearchField.svelte'
|
||||
import _ from 'lodash'
|
||||
import { afterNavigate } from '$app/navigation'
|
||||
|
||||
let _countries = []
|
||||
const initLimit = 10
|
||||
|
|
@ -52,7 +57,9 @@
|
|||
hasQuery.set(true)
|
||||
}
|
||||
|
||||
await fetchChannels()
|
||||
if (!$channels.length) {
|
||||
await fetchChannels()
|
||||
}
|
||||
_countries = Object.values($countries)
|
||||
isLoading = false
|
||||
|
||||
|
|
@ -73,34 +80,62 @@
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
afterNavigate(() => {
|
||||
setSearchParam('q', $query)
|
||||
search($query)
|
||||
})
|
||||
|
||||
let scrollTop = 0
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY="{scrollTop}" />
|
||||
<svelte:head>
|
||||
<title>iptv-org</title>
|
||||
<meta name="description" content="Collection of resources dedicated to IPTV" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="container max-w-5xl mx-auto px-2 py-20">
|
||||
<SearchField bind:isLoading="{isLoading}" bind:found="{$filteredChannels.length}"></SearchField>
|
||||
{#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"
|
||||
<header
|
||||
class:absolute="{scrollTop <= 150}"
|
||||
class:fixed="{scrollTop > 150}"
|
||||
class="z-40 w-full min-w-[360px]"
|
||||
style="top: {scrollTop > 150 && scrollTop <= 210 ? scrollTop-210: 0}px"
|
||||
>
|
||||
<NavBar withSearch="{scrollTop > 150}" />
|
||||
</header>
|
||||
|
||||
<main class="bg-slate-50 dark:bg-[#1d232e] min-h-screen pt-10 min-w-[360px]">
|
||||
<Modal
|
||||
unstyled="{true}"
|
||||
classBg="fixed top-0 left-0 z-40 w-screen h-screen flex flex-col bg-black/[.7] overflow-y-scroll"
|
||||
closeButton="{false}"
|
||||
>
|
||||
loading...
|
||||
</div>
|
||||
{/if} {#each visible as country (country.code)} {#if grouped[country.code] &&
|
||||
grouped[country.code].length > 0}
|
||||
<CountryItem
|
||||
bind:country="{country}"
|
||||
bind:channels="{grouped[country.code]}"
|
||||
bind:hasQuery="{$hasQuery}"
|
||||
></CountryItem>
|
||||
{/if} {/each} {#if !isLoading}
|
||||
<InfiniteLoading on:infinite="{loadMore}" identifier="{infiniteId}" distance="{500}">
|
||||
<div slot="noResults"></div>
|
||||
<div slot="noMore"></div>
|
||||
<div slot="error"></div>
|
||||
<div slot="spinner"></div>
|
||||
</InfiniteLoading>
|
||||
{/if}
|
||||
</section>
|
||||
<section class="container max-w-5xl mx-auto px-2 py-20">
|
||||
<SearchField
|
||||
bind:isLoading="{isLoading}"
|
||||
bind:found="{$filteredChannels.length}"
|
||||
></SearchField>
|
||||
{#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} {#each visible as country (country.code)} {#if grouped[country.code] &&
|
||||
grouped[country.code].length > 0}
|
||||
<CountryItem
|
||||
bind:country="{country}"
|
||||
bind:channels="{grouped[country.code]}"
|
||||
bind:hasQuery="{$hasQuery}"
|
||||
></CountryItem>
|
||||
{/if} {/each} {#if !isLoading}
|
||||
<InfiniteLoading on:infinite="{loadMore}" identifier="{infiniteId}" distance="{500}">
|
||||
<div slot="noResults"></div>
|
||||
<div slot="noMore"></div>
|
||||
<div slot="error"></div>
|
||||
<div slot="spinner"></div>
|
||||
</InfiniteLoading>
|
||||
{/if}
|
||||
</section>
|
||||
</Modal>
|
||||
</main>
|
||||
|
|
|
|||
94
src/pages/channel/+page.svelte
Normal file
94
src/pages/channel/+page.svelte
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script>
|
||||
import GuideItem from '~/components/GuideItem.svelte'
|
||||
import StreamItem from '~/components/StreamItem.svelte'
|
||||
import HTMLPreview from '~/components/HTMLPreview.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>
|
||||
<div class="overflow-y-scroll 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-scroll overflow-x-hidden w-full p-6">
|
||||
<div class="space-y-2">
|
||||
{#each streams as stream}
|
||||
<StreamItem stream="{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-scroll 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue