Merge pull request #553 from Kif-Fando/group-sort

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.spec.ts

@@ -24,6 +24,7 @@ import { ElectronServiceStub } from '../../../services/electron.service.stub';
 import { createChannel } from '../../../shared/channel.model';
 import { FilterPipe } from '../../../shared/pipes/filter.pipe';
 import { ChannelListContainerComponent } from './channel-list-container.component';
+import { KeyValue } from '@angular/common';
 
 class MatSnackBarStub {
     open(): void {}
@@ -187,4 +188,48 @@ describe('ChannelListContainerComponent', () => {
         });
         expect(mockStore.dispatch).toHaveBeenCalledTimes(1);
     });
+
+    describe('groupsComparator', () => {
+        it('should sort numeric groups in correct order', () => {
+            const groups: KeyValue<string, any[]>[] = [
+                { key: '10', value: [] },
+                { key: '2', value: [] },
+                { key: '1', value: [] }
+            ];
+
+            const sorted = [...groups].sort(component.groupsComparator);
+
+            expect(sorted[0].key).toBe('1');
+            expect(sorted[1].key).toBe('2');
+            expect(sorted[2].key).toBe('10');
+        });
+
+        it('should sort mixed text and numeric groups', () => {
+            const groups: KeyValue<string, any[]>[] = [
+                { key: 'Group 10', value: [] },
+                { key: 'Group 2', value: [] },
+                { key: 'Group A', value: [] }
+            ];
+
+            const sorted = [...groups].sort(component.groupsComparator);
+
+            expect(sorted[0].key).toBe('Group 2');
+            expect(sorted[1].key).toBe('Group 10');
+            expect(sorted[2].key).toBe('Group A');
+        });
+
+        it('should fall back to alphabetical sort for non-numeric groups', () => {
+            const groups: KeyValue<string, any[]>[] = [
+                { key: 'C', value: [] },
+                { key: 'A', value: [] },
+                { key: 'B', value: [] }
+            ];
+
+            const sorted = [...groups].sort(component.groupsComparator);
+
+            expect(sorted[0].key).toBe('A');
+            expect(sorted[1].key).toBe('B');
+            expect(sorted[2].key).toBe('C');
+        });
+    });
 });

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);
+    }
 }