fix: group sorting logic

package-lock.json

@@ -39,7 +39,7 @@
         "date-fns": "2.29.3",
         "dplayer": "1.27.1",
         "epg-parser": "0.1.6",
-        "hls.js": "1.6.0",
+        "hls.js": "1.6.1",
         "iptv-playlist-parser": "github:4gray/iptv-playlist-parser",
         "lodash": "4.17.21",
         "moment": "2.30.1",
@@ -12527,9 +12527,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.0.tgz",
-      "integrity": "sha512-AlW8ymcDKZuKtzXCUmEy4nOcHRkebnShH6t6hC2+QJQP0WXlTUSSO9Kp22uSEYdCgpwkXEJsfOhqxrgO2tDctQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.1.tgz",
+      "integrity": "sha512-7GOkcqn0Y9EqU2OJZlzkwxj9Uynuln7URvr7dRjgqNJNZ5UbbjL/v1BjAvQogy57Psdd/ek1u2s6IDEFYlabrA==",
       "license": "Apache-2.0"
     },
     "node_modules/hmac-drbg": {

package.json

@@ -66,7 +66,7 @@
     "date-fns": "2.29.3",
     "dplayer": "1.27.1",
     "epg-parser": "0.1.6",
-    "hls.js": "1.6.0",
+    "hls.js": "1.6.1",
     "iptv-playlist-parser": "github:4gray/iptv-playlist-parser",
     "lodash": "4.17.21",
     "moment": "2.30.1",

src/app/player/components/channel-list-container/channel-list-container.component.html

@@ -57,7 +57,7 @@
             </ng-template>
             <mat-nav-list id="groups-list">
                 <mat-accordion multi>
-                    @for (groups of groupedChannels | keyvalue; track $index) {
+                    @for (groups of groupedChannels | keyvalue: groupsComparator; track $index) {
                         @if (groups.value.length > 0) {
                             <mat-expansion-panel>
                                 <mat-expansion-panel-header>

src/app/player/components/channel-list-container/channel-list-container.component.ts

@@ -4,7 +4,7 @@ import {
     moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CommonModule, TitleCasePipe } from '@angular/common';
+import { CommonModule, TitleCasePipe, KeyValue } from '@angular/common';
 import {
     Component,
     ElementRef,
@@ -171,4 +171,15 @@ export class ChannelListContainerComponent {
     ngOnDestroy() {
         this.store.dispatch(PlaylistActions.setChannels({ channels: [] }));
     }
+
+    groupsComparator = (a: KeyValue<string, any[]>, b: KeyValue<string, any[]>): number => {
+        const numA = parseInt(a.key.replace(/\D/g, ''));
+        const numB = parseInt(b.key.replace(/\D/g, ''));
+
+        if (!isNaN(numA) && !isNaN(numB)) {
+            return numA - numB;
+        }
+
+        return a.key.localeCompare(b.key);
+    }
 }