Fixes navigation

src/components/ChannelItem.svelte

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

src/components/ChannelPopup.svelte

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

src/components/CountryItem.svelte

@@ -33,34 +33,34 @@
   }
 </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">
     {#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}"
+          selected={isSelected}
-        indeterminate="{isIndeterminate}"
+          indeterminate={isIndeterminate}
-        on:change="{onCheckboxChange}"
+          on:change={onCheckboxChange}
         />
       </div>
     {/if}
     <button
-      on:click="{onExpand}"
+      on:click={onExpand}
       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: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}"
     >
       <span>{country.flag}&nbsp;{country.name}</span>
       {#if !hasQuery}
         <svg
-        class:rotate-180="{expanded}"
+          class:rotate-180={expanded}
           class="w-6 h-6 shrink-0"
           fill="currentColor"
           viewBox="0 0 20 20"
@@ -84,7 +84,7 @@
       <div
         class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden"
       >
-      <ChannelGrid bind:channels="{channels}" />
+        <ChannelGrid bind:channels />
       </div>
     </div>
   {/if}

src/components/HTMLPreview.svelte

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

src/pages/+page.svelte

@@ -31,9 +31,8 @@
   const unsubscribe = filteredChannels.subscribe(reset)
   onDestroy(unsubscribe)
 
-  $: visible = _countries.slice(0, limit)
+  $: visibleCountries = _countries.slice(0, limit)
-
+  $: groupedByCountry = _.groupBy($filteredChannels, 'country')
-  $: grouped = _.groupBy($filteredChannels, 'country')
 
   function loadMore({ detail }) {
     let { loaded, complete } = detail
@@ -51,40 +50,24 @@
   }
 
   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) {
       await fetchChannels()
     }
     _countries = Object.values($countries)
     isLoading = false
-
-    if ($hasQuery) {
     search($query)
-    }
+  })
 
-    window.onpopstate = event => {
+  afterNavigate(() => {
-      const q = event.state.q
+    const q = $page.url.searchParams.get('q')
     if (q) {
       setPageTitle(q)
       query.set(q)
       hasQuery.set(true)
-        search($query)
     } else {
       setPageTitle(null)
       hasQuery.set(false)
     }
-    }
-  })
-
-  afterNavigate(() => {
-    setSearchParam('q', $query)
     search($query)
   })
 
@@ -121,9 +104,12 @@
           loading...
         </div>
       {/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>
         {/if}
       {/each}