wip

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build",
     "preview": "vite preview"
   },
   "devDependencies": {

src/components/ChannelItem.svelte

@@ -16,7 +16,7 @@
   const { open } = getContext('simple-modal')
   const onOpened = () => {
     currLocation = window.location.href
-    window.history.pushState({}, `${channel.name} • iptv-org`, `/channel?id=${channel.id}`)
+    window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${channel.id}`)
   }
   const onClosed = () => {
     window.history.pushState({}, `iptv-org`, currLocation || '/')
@@ -91,7 +91,7 @@
         <div class="flex space-x-2 items-center">
           <a
             on:click|preventDefault={showChannelData}
-            href="/channel?id={channel.id}"
+            href="/channels/{channel.id}"
             tabindex="0"
             class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
             title={channel.name}

src/components/HTMLPreview.svelte

@@ -4,7 +4,7 @@
   import { query, hasQuery, channels, setSearchParam } from '~/store'
 
   export let data
-  export let close
+  export let close = () => {}
 
   let replaced_by = null
   if (data.replaced_by) {
@@ -110,29 +110,33 @@
           <div class="flex py-1 text-sm text-gray-700 dark:text-gray-100 flex-wrap">
             {#if field.type === 'image'}
               <img
-            src="{field.value}"
-            alt="{field.name}"
+                src={field.value}
+                alt={field.name}
                 loading="lazy"
                 referrerpolicy="no-referrer"
                 class="border rounded-sm overflow-hidden border-gray-200 bg-[#e6e6e6]"
               />
             {:else if field.type === 'link'}
               <button
-            on:click="{() => searchBy(field.value.query)}"
+                on:click={() => searchBy(field.value.query)}
                 class="underline hover:text-blue-500"
               >
                 {field.value.label}
               </button>
-          {:else if field.type === 'link[]'} {#each field.value as value, i} {#if i > 0}<span
-            >,&nbsp;
-          </span>
+            {:else if field.type === 'link[]'}
+              {#each field.value as value, i}
+                {#if i > 0}<span>,&nbsp; </span>
                 {/if}
-          <button on:click="{() => searchBy(value.query)}" class="underline hover:text-blue-500">
+                <button
+                  on:click={() => searchBy(value.query)}
+                  class="underline hover:text-blue-500"
+                >
                   {value.label}
                 </button>
-          {/each} {:else if field.type === 'external_link'}
+              {/each}
+            {:else if field.type === 'external_link'}
               <a
-            href="{field.value}"
+                href={field.value}
                 class="underline hover:text-blue-500 inline-flex align-middle"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -152,9 +156,12 @@
                       stroke-width="2"
                       d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                     ></path>
-              </svg> </span
-          ></a>
-          {:else} {field.value} {/if}
+                  </svg>
+                </span></a
+              >
+            {:else}
+              {field.value}
+            {/if}
           </div>
         </td>
       </tr>

src/pages/channels/[id]/+page.server.js

@@ -0,0 +1,24 @@
+import { get } from 'svelte/store'
+import { fetchChannels, channels } from '~/store'
+import apiChannels from '~/data/channels.json'
+
+export async function entries() {
+  return apiChannels
+}
+
+export async function load({ params }) {
+  const id = params.id
+
+  await fetchChannels()
+
+  const channel = get(channels).find(c => c.id === id)
+  let streams = []
+  if (channel) {
+    streams = channel._streams
+  }
+
+  return {
+    channel,
+    streams
+  }
+}

src/pages/channels/[id]/+page.svelte

@@ -4,27 +4,12 @@
   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 = []
+  export let data
 
-  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
-  })
+  let isLoading = false
+  let channel = data.channel
+  let streams = data.streams
 </script>
 
 <svelte:head>

src/store.js

@@ -2,14 +2,6 @@ import { writable, get } from 'svelte/store'
 import { Playlist, Link } from 'iptv-playlist-generator'
 import sj from '@freearhey/search-js'
 import _ from 'lodash'
-import api_channels from '~/data/channels.json'
-import api_regions from '~/data/regions.json'
-import api_countries from '~/data/countries.json'
-import api_languages from '~/data/languages.json'
-import api_streams from '~/data/streams.json'
-import api_subdivisions from '~/data/subdivisions.json'
-import api_blocklist from '~/data/blocklist.json'
-import api_categories from '~/data/categories.json'
 
 export const query = writable('')
 export const hasQuery = writable(false)
@@ -112,33 +104,8 @@ export function setPageTitle(value) {
 async function loadAPI() {
   const api = {}
 
-  api.countries = _.keyBy(
-    api_countries.map(i => {
-      i.expanded = false
-      return i
-    }),
-    'code'
-  )
-
-  api.regions = _.keyBy(api_regions, 'code')
-  api.subdivisions = _.keyBy(api_subdivisions, 'code')
-  api.languages = _.keyBy(api_languages, 'code')
-  api.categories = _.keyBy(api_categories, 'id')
-  api.streams = _.keyBy(api_streams, 'channel')
-  api.blocklist = _.keyBy(api_blocklist, 'channel')
-  api.guides = {}
-
-  api.channels = api_channels
-
-  return api
-}
-
-async function _loadAPI() {
-  const api = {}
-
-  api.countries = await fetch('https://iptv-org.github.io/api/countries.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.countries = await import('~/data/countries.json')
+    .then(m => m.default)
     .then(data =>
       data.map(i => {
         i.expanded = false
@@ -148,46 +115,40 @@ async function _loadAPI() {
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.regions = await fetch('https://iptv-org.github.io/api/regions.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.regions = await import('~/data/regions.json')
+    .then(m => m.default)
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.subdivisions = await fetch('https://iptv-org.github.io/api/subdivisions.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.subdivisions = await import('~/data/subdivisions.json')
+    .then(m => m.default)
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.languages = await fetch('https://iptv-org.github.io/api/languages.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.languages = await import('~/data/languages.json')
+    .then(m => m.default)
     .then(data => _.keyBy(data, 'code'))
     .catch(console.error)
 
-  api.categories = await fetch('https://iptv-org.github.io/api/categories.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.categories = await import('~/data/categories.json')
+    .then(m => m.default)
     .then(data => _.keyBy(data, 'id'))
     .catch(console.error)
 
-  api.streams = await fetch('https://iptv-org.github.io/api/streams.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.streams = await import('~/data/streams.json')
+    .then(m => m.default)
     .then(data => _.groupBy(data, 'channel'))
     .catch(console.error)
 
-  api.blocklist = await fetch('https://iptv-org.github.io/api/blocklist.json')
-    .then(r => r.json())
-    .then(data => (data.length ? data : []))
+  api.blocklist = await import('~/data/blocklist.json')
+    .then(m => m.default)
     .then(data => _.groupBy(data, 'channel'))
     .catch(console.error)
 
   api.guides = {}
 
-  api.channels = await fetch('https://iptv-org.github.io/api/channels.json')
-    .then(r => r.json())
+  api.channels = await import('~/data/channels.json')
+    .then(m => m.default)
     .catch(err => {
       console.error(err)
       return []

svelte.config.js

@@ -13,7 +13,7 @@ const config = {
     adapter: adapter({
       pages: 'docs',
       assets: 'docs',
-      precompress: true
+      precompress: false
     })
   },
   preprocess: vitePreprocess()