Feat: Fav channel in localstorage

src/js/epg.js

@@ -10,24 +10,35 @@ function makePlaceholder(name) {
   return el;
 }
 
+function makeChannelCell(ch) {
+  const cell = document.createElement('div');
+  cell.className = 'channel-cell';
+  if (ch.icon) {
+    const img = document.createElement('img');
+    img.className = 'channel-logo'; img.src = ch.icon;
+    img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
+    cell.appendChild(img);
+  } else { cell.appendChild(makePlaceholder(ch.name)); }
+  const name = document.createElement('div');
+  name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
+  cell.appendChild(name);
+  cell.appendChild(makeFavBtn(ch.id));
+  cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
+  return cell;
+}
+
 function renderChannels() {
   const list = document.getElementById('channelsList');
   list.innerHTML = '';
-  channels.forEach(ch => {
-    const cell = document.createElement('div');
-    cell.className = 'channel-cell';
-    if (ch.icon) {
-      const img = document.createElement('img');
-      img.className = 'channel-logo'; img.src = ch.icon;
-      img.onerror = () => img.replaceWith(makePlaceholder(ch.name));
-      cell.appendChild(img);
-    } else { cell.appendChild(makePlaceholder(ch.name)); }
-    const name = document.createElement('div');
-    name.className = 'channel-name'; name.textContent = ch.name; name.title = ch.name;
-    cell.appendChild(name);
-    cell.addEventListener('click', () => openPip(ch.name, getNowPlaying(ch.id)));
-    list.appendChild(cell);
-  });
+  const { favs, rest } = sortedChannels(channels);
+
+  if (favs.length) {
+    favs.forEach(ch => list.appendChild(makeChannelCell(ch)));
+    const sep = document.createElement('div');
+    sep.className = 'fav-separator';
+    list.appendChild(sep);
+  }
+  rest.forEach(ch => list.appendChild(makeChannelCell(ch)));
 }
 
 function renderRuler() {
@@ -70,7 +81,9 @@ function renderPrograms() {
 
   const now = new Date();
 
-  channels.forEach((ch, i) => {
+  const { favs: _f, rest: _r } = sortedChannels(channels);
+  const orderedChannels = [..._f, ..._r];
+  orderedChannels.forEach((ch, i) => {
     const row = document.createElement('div');
     row.className = 'program-row';
     row.style.cssText = `top:${i*ROW_H}px;position:absolute;left:0;right:0;`;