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

Fixes navigation

Browse source
This commit is contained in:
freearhey 2023-10-10 08:17:49 +03:00
parent 486bbf9a60
commit f377009397
5 changed files with 71 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/ChannelItem.svelte
View file

@ -4,7 +4,7 @@
import GuidesPopup from './GuidesPopup.svelte' import GuidesPopup from './GuidesPopup.svelte'
import ChannelPopup from './ChannelPopup.svelte' import ChannelPopup from './ChannelPopup.svelte'
import Checkbox from './Checkbox.svelte' import Checkbox from './Checkbox.svelte'
import { downloadMode, selected } from '~/store' import { downloadMode, selected, query } from '~/store'
import { fade } from 'svelte/transition' import { fade } from 'svelte/transition'
export let channel export let channel
@ -13,14 +13,14 @@
const [name, country] = channel.id.split('.') const [name, country] = channel.id.split('.')
let currLocation
const { open } = getContext('simple-modal') const { open } = getContext('simple-modal')
let prevUrl = '/'
const onOpened = () => { const onOpened = () => {
currLocation = window.location.href prevUrl = window.location.href
window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${country}/${name}`) window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${country}/${name}`)
} }
const onClosed = () => { const onClose = () => {
window.history.pushState({}, `iptv-org`, currLocation || '/') window.history.pushState({}, `iptv-org`, prevUrl)
} }
const showGuides = () => const showGuides = () =>
open( open(
@ -39,7 +39,7 @@
ChannelPopup, ChannelPopup,
{ channel }, { channel },
{ transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }, { transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } },
{ onOpened, onClosed } { onOpened, onClose }
) )
} }

3
src/components/ChannelPopup.svelte
View file

@ -4,10 +4,11 @@
import Divider from '~/components/Divider.svelte' import Divider from '~/components/Divider.svelte'
import SquareButton from '~/components/SquareButton.svelte' import SquareButton from '~/components/SquareButton.svelte'
import { getContext } from 'svelte' import { getContext } from 'svelte'
const { close } = getContext('simple-modal')
export let channel export let channel
const { close } = getContext('simple-modal')
const closePopup = () => { const closePopup = () => {
close() close()
} }

74
src/components/CountryItem.svelte
View file

@ -33,59 +33,59 @@
} }
</script> </script>
<div class="mb-2 md:mb-3" class:pl-14="{$downloadMode}" style="transition: padding-left 100ms"> <div class="mb-2 md:mb-3" class:pl-14={$downloadMode} style="transition: padding-left 100ms">
<h2 id="accordion-heading-{country.code}" class="flex relative"> <h2 id="accordion-heading-{country.code}" class="flex relative">
{#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 <Checkbox
selected="{isSelected}" selected={isSelected}
indeterminate="{isIndeterminate}" indeterminate={isIndeterminate}
on:change="{onCheckboxChange}" on:change={onCheckboxChange}
/> />
</div> </div>
{/if} {/if}
<button <button
on:click="{onExpand}" on:click={onExpand}
type="button" type="button"
class="flex items-center focus:ring-0 dark:focus:ring-gray-800 justify-between p-4 w-full font-medium text-left border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800" class="flex items-center focus:ring-0 dark:focus:ring-gray-800 justify-between p-4 w-full font-medium text-left border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800"
class:rounded-t-md="{expanded}" class:rounded-t-md={expanded}
class:rounded-md="{!expanded}" class:rounded-md={!expanded}
class:border-b-0="{expanded}" class:border-b-0={expanded}
aria-expanded="{expanded}" aria-expanded={expanded}
aria-controls="accordion-body-{country.code}" aria-controls="accordion-body-{country.code}"
> >
<span>{country.flag}&nbsp;{country.name}</span> <span>{country.flag}&nbsp;{country.name}</span>
{#if !hasQuery} {#if !hasQuery}
<svg <svg
class:rotate-180="{expanded}" class:rotate-180={expanded}
class="w-6 h-6 shrink-0" class="w-6 h-6 shrink-0"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" clip-rule="evenodd"
></path> ></path>
</svg> </svg>
{/if} {/if}
</button> </button>
</h2> </h2>
{#if expanded} {#if expanded}
<div
class="relative"
id="accordion-body-{country.code}"
aria-labelledby="accordion-heading-{country.code}"
>
<div <div
class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden" class="relative"
id="accordion-body-{country.code}"
aria-labelledby="accordion-heading-{country.code}"
> >
<ChannelGrid bind:channels="{channels}" /> <div
class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden"
>
<ChannelGrid bind:channels />
</div>
</div> </div>
</div>
{/if} {/if}
</div> </div>

25
src/components/HTMLPreview.svelte
View file

@ -82,17 +82,6 @@
function norm(value) { function norm(value) {
return value.includes(' ') ? `"${value}"` : value return value.includes(' ') ? `"${value}"` : value
} }
function searchBy(q) {
if ($query !== q) {
query.set(q)
hasQuery.set(true)
setTimeout(() => {
goto('/')
}, 0)
}
close()
}
</script> </script>
<table class="table-fixed w-full"> <table class="table-fixed w-full">
@ -115,22 +104,24 @@
class="border rounded-sm overflow-hidden border-gray-200 bg-[#e6e6e6]" class="border rounded-sm overflow-hidden border-gray-200 bg-[#e6e6e6]"
/> />
{:else if field.type === 'link'} {:else if field.type === 'link'}
<button <a
on:click={() => searchBy(field.value.query)} href="/?q={field.value.query}"
on:click={() => close()}
class="underline hover:text-blue-500" class="underline hover:text-blue-500"
> >
{field.value.label} {field.value.label}
</button> </a>
{:else if field.type === 'link[]'} {:else if field.type === 'link[]'}
{#each field.value as value, i} {#each field.value as value, i}
{#if i > 0}<span>,&nbsp; </span> {#if i > 0}<span>,&nbsp; </span>
{/if} {/if}
<button <a
on:click={() => searchBy(value.query)} href="/?q={value.query}"
on:click={() => close()}
class="underline hover:text-blue-500" class="underline hover:text-blue-500"
> >
{value.label} {value.label}
</button> </a>
{/each} {/each}
{:else if field.type === 'external_link'} {:else if field.type === 'external_link'}
<a <a

50
src/pages/+page.svelte
View file

@ -31,9 +31,8 @@
const unsubscribe = filteredChannels.subscribe(reset) const unsubscribe = filteredChannels.subscribe(reset)
onDestroy(unsubscribe) onDestroy(unsubscribe)
$: visible = _countries.slice(0, limit) $: visibleCountries = _countries.slice(0, limit)
$: groupedByCountry = _.groupBy($filteredChannels, 'country')
$: grouped = _.groupBy($filteredChannels, 'country')
function loadMore({ detail }) { function loadMore({ detail }) {
let { loaded, complete } = detail let { loaded, complete } = detail
@ -51,40 +50,24 @@
} }
onMount(async () => { onMount(async () => {
const params = new URLSearchParams(window.location.search)
const q = params.get('q')
if (q) {
setPageTitle(q)
query.set(q)
hasQuery.set(true)
}
if (!$channels.length) { if (!$channels.length) {
await fetchChannels() await fetchChannels()
} }
_countries = Object.values($countries) _countries = Object.values($countries)
isLoading = false isLoading = false
search($query)
if ($hasQuery) {
search($query)
}
window.onpopstate = event => {
const q = event.state.q
if (q) {
setPageTitle(q)
query.set(q)
hasQuery.set(true)
search($query)
} else {
setPageTitle(null)
hasQuery.set(false)
}
}
}) })
afterNavigate(() => { afterNavigate(() => {
setSearchParam('q', $query) const q = $page.url.searchParams.get('q')
if (q) {
setPageTitle(q)
query.set(q)
hasQuery.set(true)
} else {
setPageTitle(null)
hasQuery.set(false)
}
search($query) search($query)
}) })
@ -121,9 +104,12 @@
loading... loading...
</div> </div>
{/if} {/if}
{#each visible as country (country.code)} {#each visibleCountries as country (country.code)}
{#if grouped[country.code] && grouped[country.code].length > 0} {#if groupedByCountry[country.code] && groupedByCountry[country.code].length > 0}
<CountryItem bind:country bind:channels={grouped[country.code]} bind:hasQuery={$hasQuery} <CountryItem
bind:country
bind:channels={groupedByCountry[country.code]}
bind:hasQuery={$hasQuery}
></CountryItem> ></CountryItem>
{/if} {/if}
{/each} {/each}