Merge pull request #2038 from iptv-org/patch-2025.02.2

Patch 2025.02.2

src/components/ChannelGrid.svelte

@@ -2,22 +2,30 @@
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
+
+  let limit = 100
+
+  $: channelsDisplay = channels.slice(0, limit)
+
+  function showMore() {
+    limit += 100
+  }
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col bg-white dark:bg-gray-800">
   <div class="overflow-y-auto scrollbar-hide">
-    <div class="inline-block min-w-full align-middle overflow-hidden">
+    <div class="inline-block min-w-full align-middle">
       <div class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
         <div class="bg-gray-50 dark:bg-gray-700">
           <div class="flex">
-            <div class="w-36 sm:w-52 shrink-0"></div>
+            <div class="w-36 sm:w-[200px] shrink-0"></div>
             <div
-              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-52 sm:w-80 shrink-0"
+              class="w-[216px] sm:w-80 py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 shrink-0"
             >
               Name
             </div>
             <div
-              class="py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400 w-48 sm:w-80"
+              class="w-52 sm:w-[280px] py-3 px-2 text-xs font-semibold tracking-wider text-left text-gray-400 uppercase dark:text-gray-400"
             >
               ID
             </div>
@@ -26,12 +34,18 @@
             </div>
           </div>
         </div>
-        <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
+        <div>
+          {#each channelsDisplay as channel (channel.id)}
             <ChannelItem bind:channel />
           {/each}
         </div>
       </div>
     </div>
   </div>
+  {#if channelsDisplay.length < channels.length}
+    <button
+      class="flex border-t border-gray-200 dark:border-gray-700 items-center justify-center h-12 w-full text-blue-500 dark:text-blue-400 hover:bg-gray-50 hover:dark:bg-gray-700 focus-visible:outline-0"
+      on:click={showMore}>Show More</button
+    >
+  {/if}
 </div>

src/components/ChannelItem.svelte

@@ -6,7 +6,7 @@
   import Checkbox from './Checkbox.svelte'
   import BlockedBadge from './BlockedBadge.svelte'
   import ClosedBadge from './ClosedBadge.svelte'
-  import { downloadMode, selected, query } from '~/store'
+  import { downloadMode, selected } from '~/store'
   import { fade } from 'svelte/transition'
 
   export let channel
@@ -81,7 +81,7 @@
 <div
   class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
 >
-  <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
+  <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-[200px] flex shrink-0 items-center justify-center">
     <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
       {#if channel.logo}
         <img
@@ -94,7 +94,7 @@
       {/if}
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-80 shrink-0">
+  <div class="w-[216px] sm:w-80 px-2 shrink-0">
     <div>
       <div class="text-left">
         <div class="flex space-x-2 items-center">
@@ -102,7 +102,7 @@
             on:click|preventDefault={showChannelData}
             href="/channels/{country}/{name}"
             tabindex="0"
-            class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
+            class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 truncate whitespace-nowrap"
             title={channel.displayName}
           >
             {channel.displayName}
@@ -127,7 +127,7 @@
       </div>
     </div>
   </div>
-  <div class="w-52 px-2 sm:w-80">
+  <div class="w-52 sm:w-[280px] px-2">
     <div>
       <code
         class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
@@ -135,7 +135,7 @@
       >
     </div>
   </div>
-  <div class="w-40 px-6 sm:w-[150px]">
+  <div class="w-56 pr-5 sm:w-[206px]">
     <div class="text-right flex justify-end space-x-3 items-center">
       {#if guides.length}
         <button

src/components/ChannelPopup.svelte

@@ -19,12 +19,12 @@
 </script>
 
 <div
-  class="relative px-2 py-24 flex justify-center"
+  class="relative px-2 pt-20 pb-24 flex justify-center"
   role="presentation"
   on:keypress
   on:click|self={close}
 >
-  <div class="relative bg-white rounded-md shadow dark:bg-gray-800 w-full max-w-[820px]">
+  <div class="relative bg-white rounded-lg shadow dark:bg-gray-800 w-full max-w-[820px]">
     <div
       class="flex justify-between items-center py-3 pl-5 pr-3 md:pr-4 rounded-t border-b dark:border-gray-700"
     >
@@ -48,8 +48,8 @@
         <CloseButton on:click={close} />
       </div>
     </div>
-    <div class="overflow-y-auto overflow-x-scroll w-full scrollbar-hide">
-      <div class="inline-table p-12 pt-10">
+    <div class="overflow-y-auto overflow-x-scroll max-w-full scrollbar-hide">
+      <div class="inline-table px-5 py-5 sm:py-10 sm:px-12">
         <HTMLPreview data={channel} {close} />
       </div>
     </div>

src/components/HTMLPreview.svelte

@@ -86,17 +86,17 @@
   }
 </script>
 
-<table class="table-fixed">
+<table class="table-fixed w-full">
   <tbody>
     {#each fieldset as field}
-      <tr>
-        <td class="align-top w-[11rem]">
-          <div class="flex pr-4 pb-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+      <tr class="overflow-hidden">
+        <td class="align-top w-[140px] sm:w-[180px]">
+          <div class="flex pr-5 pb-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
             {field.name}
           </div>
         </td>
-        <td class="align-top">
-          <div class="flex pb-3 text-sm text-gray-800 dark:text-gray-100 flex-wrap">
+        <td class="align-top w-full overflow-hidden">
+          <div class="flex pb-3 text-sm text-gray-800 dark:text-gray-100">
             {#if field.type === 'image'}
               <img
                 src={field.value}
@@ -110,6 +110,7 @@
                 href="/?q={field.value.query}"
                 on:click={() => close()}
                 class="underline hover:text-blue-500"
+                title={field.value.label}
               >
                 {field.value.label}
               </a>
@@ -121,6 +122,7 @@
                   href="/?q={value.query}"
                   on:click={() => close()}
                   class="underline hover:text-blue-500"
+                  title={value.label}
                 >
                   {value.label}
                 </a>
@@ -128,30 +130,15 @@
             {:else if field.type === 'external_link'}
               <a
                 href={field.value}
-                class="underline hover:text-blue-500 inline-flex align-middle whitespace-nowrap"
+                class="underline hover:text-blue-500 truncate"
                 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"
-                    />
-                  </svg>
-                </span></a
+                title={field.value}>{field.value}</a
               >
+            {:else if field.name === 'id'}
+              <span class="truncate" title={field.value}>{field.value}</span>
             {:else}
-              {field.value}
+              <span title={field.value}>{field.value}</span>
             {/if}
           </div>
         </td>

src/components/SearchSyntaxPopup.svelte

@@ -62,9 +62,9 @@
       </h3>
       <CloseButton on:click={close} />
     </div>
-    <div class="overflow-y-auto overflow-x-hidden w-full">
-      <div class="p-6 text-gray-800 dark:text-white">
-        <table class="w-full">
+    <div class="overflow-y-auto overflow-x-scroll w-full scrollbar-hide">
+      <div class="text-gray-800 dark:text-white p-6 inline-block">
+        <table>
           <thead>
             <tr>
               <th class="border p-2 dark:border-gray-700 font-semibold">Query</th>
@@ -74,13 +74,14 @@
           <tbody class="text-left">
             {#each examples as example}
               <tr class="even:bg-gray-50 even:dark:bg-gray-700">
-                <td class="border dark:border-gray-700 px-3 py-3 whitespace-nowrap">
+                <td class="border dark:border-gray-700 px-3 py-3 whitespace-nowrap min-w-[220px]">
                   <code
                     class="break-words text-sm text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-2 py-1 rounded-sm select-all cursor-text font-mono"
                     >{example.query}</code
                   >
                 </td>
-                <td class="border dark:border-gray-700 px-4 py-3">{example.result}</td>
+                <td class="border dark:border-gray-700 px-4 py-3 min-w-[260px]">{example.result}</td
+                >
               </tr>
             {/each}
           </tbody>

src/components/StreamItem.svelte

@@ -18,7 +18,7 @@
     <div class="flex space-x-3 items-center max-w-[90%] w-full">
       <ExpandButton on:click={event => (expanded = event.detail.state)} />
       <a
-        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[85%] w-full"
+        class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-100 hover:text-blue-500 hover:underline inline-flex align-middle max-w-[80%] w-full"
         href={stream.url}
         title={stream.url}
         target="_blank"