Adds country name to channel name

src/components/ChannelItem.svelte

@@ -16,7 +16,11 @@
   let prevUrl = '/'
   const onOpened = () => {
     prevUrl = window.location.href
-    window.history.pushState({}, `${channel.name} • iptv-org`, `/channels/${country}/${name}`)
+    window.history.pushState(
+      {},
+      `${channel.displayName} • iptv-org`,
+      `/channels/${country}/${name}`
+    )
   }
   const onClose = () => {
     window.history.pushState({}, `iptv-org`, prevUrl)
@@ -24,7 +28,7 @@
   const showStreams = () =>
     open(
       StreamsPopup,
-      { streams, title: channel.name },
+      { streams, title: channel.displayName },
       { transitionBgProps: { duration: 0 }, transitionWindowProps: { duration: 0 } }
     )
   const showChannelData = () => {
@@ -74,7 +78,7 @@
           loading="lazy"
           referrerpolicy="no-referrer"
           src={channel.logo}
-          alt={channel.name}
+          alt={channel.displayName}
         />
       {/if}
     </div>
@@ -88,9 +92,9 @@
             href="/channels/{country}/{name}"
             tabindex="0"
             class="font-normal text-gray-600 dark:text-white hover:underline hover:text-blue-500 line-clamp-1"
-            title={channel.name}
+            title={channel.displayName}
           >
-            {channel.name}
+            {channel.displayName}
           </a>
           {#if channel.is_closed}
             <div

src/components/ChannelPopup.svelte

@@ -22,7 +22,7 @@
       class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
     >
       <div class="w-2/3 overflow-hidden">
-        <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h3>
+        <h3 class="text-l font-medium text-gray-900 dark:text-white">{channel.displayName}</h3>
       </div>
 
       <div class="inline-flex w-1/3 justify-end space-x-3 items-center">

src/components/EditButton.svelte

@@ -4,7 +4,7 @@
   export let channel
 
   const endpoint = 'https://github.com/iptv-org/database/issues/new'
-  const title = `Edit: ${channel.name}`
+  const title = `Edit: ${channel.displayName}`
   const labels = 'channels:edit'
   const template = '__channels_edit.yml'
 

src/pages/channels/[country]/[name]/+page.server.js

@@ -21,6 +21,7 @@ data.categories = _.keyBy(categories, 'id')
 data.streams = _.groupBy(_streams, 'channel')
 data.blocklist = _.groupBy(blocklist, 'channel')
 data.channels = _.keyBy(channels, channel => channel.id.toLowerCase())
+data.nameIndex = _.groupBy(channels, channel => channel.name.toLowerCase())
 
 export const csr = true
 export const ssr = true

src/pages/channels/[country]/[name]/+page.svelte

@@ -26,8 +26,8 @@
 </script>
 
 <svelte:head>
-  <title>{channel && channel.name ? `${channel.name} • iptv-org` : 'iptv-org'}</title>
-  <meta name="description" content="Detailed description of {channel.name}." />
+  <title>{channel && channel.displayName ? `${channel.displayName} • iptv-org` : 'iptv-org'}</title>
+  <meta name="description" content="Detailed description of {channel.displayName}." />
   {@html schema()}
 </svelte:head>
 
@@ -50,7 +50,7 @@
           class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
         >
           <div class="w-1/3 overflow-hidden">
-            <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.name}</h1>
+            <h1 class="text-l font-medium text-gray-900 dark:text-white">{channel.displayName}</h1>
           </div>
           <div class="inline-flex w-1/3 justify-end space-x-3">
             <EditButton {channel} />

src/store.js

@@ -139,6 +139,8 @@ async function loadAPI() {
       return []
     })
 
+  api.nameIndex = _.groupBy(api.channels, channel => channel.name.toLowerCase())
+
   return api
 }
 
@@ -163,6 +165,11 @@ export function transformChannel(channel, data) {
   channel.is_blocked = !!data.blocklist[channel.id]
   channel.streams = channel._streams.length
 
+  const isChannelNameRepeated = data.nameIndex[channel.name.toLowerCase()].length > 1
+  channel.displayName = isChannelNameRepeated
+    ? `${channel.name} (${channel._country.name})`
+    : channel.name
+
   return channel
 }