uhtml refactor part 1

index.html

@@ -209,29 +209,6 @@ <h1 data-translation="upcoming_info">Upcoming streams show here</h1>
 
     <section id="library">
 
-      <div id="collections">
-
-        <a class="collectionItem" id="discover" href="/list?collection=discover"
-          data-translation-aria-label="library_discover">
-          <i class="ri-compass-3-line"></i>
-        </a>
-
-        <a class="collectionItem" id="history" href="/list?collection=history"
-          data-translation-aria-label="library_history">
-          <i class="ri-memories-line"></i>
-        </a>
-
-        <a class="collectionItem" id="favorites" href="/list?collection=favorites"
-          data-translation-aria-label="library_favorites">
-          <i class="ri-heart-fill"></i>
-        </a>
-
-        <a class="collectionItem" id="listenLater" href="/list?collection=listenLater"
-          data-translation-aria-label="library_listen_later">
-          <i class="ri-calendar-schedule-line"></i>
-        </a>
-      </div>
-
       <div id="superCollectionSelector">
         <input type="radio" id="r.featured" name="superCollectionChips" value="featured" checked>
         <label data-translation="library_featured" for="r.featured">Featured</label>
@@ -364,4 +341,4 @@ <h1 data-translation="list_info">Playlist, channel or your collection items show
   <script src="/src/main.ts" type="module"></script>
 </body>
 
-</html>
+</html>

package.json

@@ -1,31 +1,30 @@
 {
   "name": "ytify",
   "type": "module",
-  "version": "7.8",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
-    "update": "npx npm-check-updates -u"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "hls.js": "^1.5.20",
-    "solid-js": "^1.9.4",
-    "sortablejs": "^1.15.6"
+    "hls.js": "^1.6.2",
+    "solid-js": "^1.9.6",
+    "sortablejs": "^1.15.6",
+    "uhtml": "^4.7.1"
   },
   "devDependencies": {
-    "@netlify/blobs": "^8.1.0",
-    "@netlify/edge-functions": "^2.11.1",
-    "@types/node": "^22.13.1",
+    "@netlify/blobs": "^9.1.1",
+    "@netlify/edge-functions": "^2.12.0",
+    "@types/node": "^22.15.17",
     "@types/sortablejs": "^1.15.8",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "eruda": "^3.4.1",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0",
-    "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-solid": "^2.11.1"
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.0",
+    "vite-plugin-solid": "^2.11.6"
   },
   "browserslist": [
     "defaults"
   ]
-}
+}

src/components/ActionsMenu.css

@@ -56,4 +56,4 @@
   font-size: inherit;
   margin-left: -3px;
   width: 9ch;
-}
+}

src/components/ItemsLoader.tsx

@@ -1,11 +1,17 @@
 import { createEffect, createSignal, For, Show } from "solid-js";
 import { generateImageUrl, getThumbIdFromLink } from "../lib/imageUtils";
-import { convertSStoHHMMSS, hostResolver } from "../lib/utils";
+import { convertSStoHHMMSS, hostResolver, i18n } from "../lib/utils";
 import ListItem from "./ListItem";
 import StreamItem from "./StreamItem";
 
 const numFormatter = (num: number): string => Intl.NumberFormat('en', { notation: 'compact' }).format(num);
 
+const reservedCollections = {
+  discover: ['ri-compass-3-line', 'library_discover'],
+  history: ['ri-memories-line', 'library_history'],
+  favorites: ['ri-heart-fill', 'library_favorites'],
+  listenLater: ['ri-calendar-schedule-line', 'library_listen_later']
+}
 
 export default function ItemsLoader(data: { itemsArray: StreamItem[] }) {
   const [items, setItems] = createSignal(data.itemsArray);
@@ -23,7 +29,16 @@ export default function ItemsLoader(data: { itemsArray: StreamItem[] }) {
           item.type === 'collection' ?
 
             <a href={'./list?collection=' + item.name} class={'clxn_item'} >
-              <i class='ri-play-list-2-fill'></i>{item.name}
+
+              <Show when={item.name in reservedCollections} fallback={
+                <>
+                  <i class='ri-play-list-2-fill'></i>{item.name}
+                </>
+              }>
+                <i class={reservedCollections[item.name as 'history'][0]
+                }></i>
+                {i18n(reservedCollections[item.name as 'history'][1] as 'library_history')}
+              </Show>
             </a> :
 
             (item.type === 'stream' || item.type === 'video') ?

src/components/Settings.tsx

@@ -182,6 +182,7 @@ export default function() {
           }}
         >
           <option value='play'>{i18n('settings_pwa_play')}</option>
+          <option value='watch'>{i18n('settings_pwa_watch')}</option>
           <option value='dl'>{i18n('settings_pwa_download')}</option>
           <option value='ask'>{i18n('settings_pwa_always_ask')}</option>
         </Selector>

src/components/SuperCollectionList.tsx

@@ -75,11 +75,12 @@ function loadForYou(db: Library) {
 
 function loadCollections(db: Library) {
   const keys = Object.keys(db);
-  return keys.length ?
-    keys
-      .filter(v => !reservedCollections.includes(v))
-      .map(v => ({ type: 'collection', name: v })) :
-    'No Collections in Library';
+  return (keys.length ?
+    keys : reservedCollections)
+    .filter(v => v !== 'channels' && v !== 'playlists')
+    .map(v => ({ type: 'collection', name: v }));
+
+
 }
 
 // APAC : artists | playlists | albums | channels

src/components/UpdatePrompt.ts

@@ -0,0 +1,32 @@
+import './UpdatePrompt.css';
+import { i18n } from "../lib/utils";
+import { html } from 'uhtml';
+
+export default async function UpdatePrompt() {
+
+  const commitsSrc = 'https://api.github.com/repos/n-ce/ytify/commits/main';
+  const commitsLink = 'https://github.com/n-ce/ytify/commits';
+
+  const list = await fetch(commitsSrc)
+    .then(res => res.json())
+    .then(data => data.commit.message.split('-'))
+    .then(data => data.map((text: string) => (html`<li>${text}</li>`)))
+    .catch(() => html`<li>Failed to load update data from Github.</li>`);
+
+
+  return html`
+    <ul>
+      ${list}
+      <hr />
+      <li @click=${() => { open(commitsLink) }}>
+        ${i18n('updater_changelog_full')}
+      </li>
+    </ul>
+    <span>
+      <button id="updateBtn" autofocus>
+      ${i18n('updater_update')}
+      </button>
+      <button id="laterBtn">${i18n('updater_later')}</button>
+    </span>`;
+
+}

src/lib/libraryUtils.ts

@@ -11,9 +11,6 @@ export function saveDB(data: Library, change: string = '') {
   dispatchEvent(new CustomEvent('dbchange', { detail: { db: data, change: change } }));
 }
 
-export const getCollection = (name: string) => <HTMLDivElement>(<HTMLDetailsElement>document.getElementById(name)).lastElementChild;
-
-
 export function removeFromCollection(
   collection: string,
   id: string
@@ -156,7 +153,7 @@ function getLocalCollection(
 
   if (collection === 'discover') {
     for (const i in data)
-      if ((data[i] as CollectionItem & { frequency: number }).frequency < 2)
+      if (usePagination && (data[i] as CollectionItem & { frequency: number }).frequency < 2)
         delete db.discover?.[i];
     saveDB(db);
   }

src/lib/utils.ts

@@ -179,14 +179,25 @@ export async function superClick(e: Event) {
 
   const eld = elem.dataset;
   const elc = elem.classList.contains.bind(elem.classList);
+  const rcn = {
+    Discover: 'discover',
+    History: 'history',
+    Favorites: 'favorites',
+    'Listen Later': 'listenLater'
+  }
 
   if (elc('streamItem'))
     return elc('delete') ?
       removeFromCollection(store.list.id, eld.id as string)
       : player(eld.id);
 
   else if (elc('clxn_item'))
-    fetchCollection(elem.textContent as string);
+    fetchCollection(
+      (elem.textContent! in rcn) ?
+        rcn[elem.textContent as 'History'] :
+        elem.textContent as string
+    );
+
 
   else if (elc('ri-more-2-fill')) {
     actionsMenu.showModal();

src/locales/en.json

@@ -97,6 +97,7 @@
   "settings_download_format": "Download Format",
   "settings_pwa_share_action": "PWA Share Action",
   "settings_pwa_play": "Play",
+  "settings_pwa_watch": "Watch",
   "settings_pwa_download": "Download",
   "settings_pwa_always_ask": "Always ask",
   "settings_search": "Search",