From 09f6d1208534f4cd14304a9f7175e19823dfc355 Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Mon, 9 Oct 2023 10:03:28 +0300
Subject: [PATCH] wip

---
 package.json                                  |   2 +-
 src/components/ChannelItem.svelte             |   4 +-
 src/components/HTMLPreview.svelte             | 123 +++++++++---------
 src/pages/channels/[id]/+page.server.js       |  24 ++++
 .../{channel => channels/[id]}/+page.svelte   |  23 +---
 src/store.js                                  |  71 +++-------
 svelte.config.js                              |   2 +-
 7 files changed, 113 insertions(+), 136 deletions(-)
 create mode 100644 src/pages/channels/[id]/+page.server.js
 rename src/pages/{channel => channels/[id]}/+page.svelte (85%)

diff --git a/package.json b/package.json
index 7e7f40b7d..cebcb1ae1 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 590935ba7..6af31d615 100644
--- a/src/components/ChannelItem.svelte
+++ b/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}
diff --git a/src/components/HTMLPreview.svelte b/src/components/HTMLPreview.svelte
index d80c9c16a..20405871a 100644
--- a/src/components/HTMLPreview.svelte
+++ b/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) {
@@ -100,64 +100,71 @@
 <table class="table-fixed w-full">
   <tbody>
     {#each fieldset as field}
-    <tr>
-      <td class="align-top w-[11rem]">
-        <div class="flex pr-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400">
-          {field.name}
-        </div>
-      </td>
-      <td class="align-top">
-        <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}"
-            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)}"
-            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>
-          {/if}
-          <button on:click="{() => searchBy(value.query)}" class="underline hover:text-blue-500">
-            {value.label}
-          </button>
-          {/each} {:else if field.type === 'external_link'}
-          <a
-            href="{field.value}"
-            class="underline hover:text-blue-500 inline-flex align-middle"
-            target="_blank"
-            rel="noopener noreferrer"
-            >{field.value}<span
-              class="inline-flex items-center pl-1 text-sm font-semibold text-gray-400 rounded-full"
-            >
-              <svg
-                class="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
+      <tr>
+        <td class="align-top w-[11rem]">
+          <div class="flex pr-4 py-1 text-sm text-gray-400 whitespace-nowrap dark:text-gray-400">
+            {field.name}
+          </div>
+        </td>
+        <td class="align-top">
+          <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}
+                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)}
+                class="underline hover:text-blue-500"
               >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  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}
-        </div>
-      </td>
-    </tr>
+                {field.value.label}
+              </button>
+            {: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"
+                >
+                  {value.label}
+                </button>
+              {/each}
+            {:else if field.type === 'external_link'}
+              <a
+                href={field.value}
+                class="underline hover:text-blue-500 inline-flex align-middle"
+                target="_blank"
+                rel="noopener noreferrer"
+                >{field.value}<span
+                  class="inline-flex items-center pl-1 text-sm font-semibold text-gray-400 rounded-full"
+                >
+                  <svg
+                    class="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      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}
+          </div>
+        </td>
+      </tr>
     {/each}
   </tbody>
 </table>
diff --git a/src/pages/channels/[id]/+page.server.js b/src/pages/channels/[id]/+page.server.js
new file mode 100644
index 000000000..a871086aa
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/pages/channel/+page.svelte b/src/pages/channels/[id]/+page.svelte
similarity index 85%
rename from src/pages/channel/+page.svelte
rename to src/pages/channels/[id]/+page.svelte
index 537412f9c..d9e15405f 100644
--- a/src/pages/channel/+page.svelte
+++ b/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>
diff --git a/src/store.js b/src/store.js
index 741fdfff6..06969f260 100644
--- a/src/store.js
+++ b/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 []
diff --git a/svelte.config.js b/svelte.config.js
index 0a1524206..7e18db315 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,7 +13,7 @@ const config = {
     adapter: adapter({
       pages: 'docs',
       assets: 'docs',
-      precompress: true
+      precompress: false
     })
   },
   preprocess: vitePreprocess()