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 = () => {
-    window.history.pushState({}, `iptv-org`, currLocation || '/')
+  const onClose = () => {
+    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,59 +33,59 @@
   }
 </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}}"
-      class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
-    >
-      <Checkbox
-        selected="{isSelected}"
-        indeterminate="{isIndeterminate}"
-        on:change="{onCheckboxChange}"
-      />
-    </div>
+      <div
+        transition:fade={{ duration: 200 }}
+        class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
+      >
+        <Checkbox
+          selected={isSelected}
+          indeterminate={isIndeterminate}
+          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-md="{!expanded}"
-      class:border-b-0="{expanded}"
-      aria-expanded="{expanded}"
+      class:rounded-t-md={expanded}
+      class:rounded-md={!expanded}
+      class:border-b-0={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="w-6 h-6 shrink-0"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          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"
-          clip-rule="evenodd"
-        ></path>
-      </svg>
+        <svg
+          class:rotate-180={expanded}
+          class="w-6 h-6 shrink-0"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            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"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
       {/if}
     </button>
   </h2>
   {#if expanded}
-  <div
-    class="relative"
-    id="accordion-body-{country.code}"
-    aria-labelledby="accordion-heading-{country.code}"
-  >
     <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>
   {/if}
 </div>

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
-                on:click={() => searchBy(field.value.query)}
+              <a
+                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
-                  on:click={() => searchBy(value.query)}
+                <a
+                  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)
-
-  $: grouped = _.groupBy($filteredChannels, 'country')
+  $: visibleCountries = _countries.slice(0, limit)
+  $: groupedByCountry = _.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 => {
-      const q = event.state.q
-      if (q) {
-        setPageTitle(q)
-        query.set(q)
-        hasQuery.set(true)
-        search($query)
-      } else {
-        setPageTitle(null)
-        hasQuery.set(false)
-      }
-    }
+    search($query)
   })
 
   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)
   })
 
@@ -121,9 +104,12 @@
           loading...
         </div>
       {/if}
-      {#each visible as country (country.code)}
-        {#if grouped[country.code] && grouped[country.code].length > 0}
-          <CountryItem bind:country bind:channels={grouped[country.code]} bind:hasQuery={$hasQuery}
+      {#each visibleCountries as country (country.code)}
+        {#if groupedByCountry[country.code] && groupedByCountry[country.code].length > 0}
+          <CountryItem
+            bind:country
+            bind:channels={groupedByCountry[country.code]}
+            bind:hasQuery={$hasQuery}
           ></CountryItem>
         {/if}
       {/each}