Maintainence Update

index.html

@@ -148,13 +148,7 @@
 
 
     <section id="upcoming">
-      <header>
-        <p data-translation="nav_upcoming">Upcoming</p>
-        <details>
-          <summary><i class="ri-more-2-fill"></i></summary>
-          <ul id="queuetools"></ul>
-        </details>
-      </header>
+      <ul id="queuetools"></ul>
       <div id="queuelist">
         <p data-translation="upcoming_info">The Queue is Empty.</p>
       </div>
@@ -201,7 +195,29 @@
         </select>
       </form>
       <ul id="suggestions"></ul>
-      <div id="searchlist"></div>
+      <div id="searchlist">
+        <div align="center">
+          <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 4172 4172" width="4vmin" height="4vmin"
+            style="transform: scale(9); margin:14vmin 0;">
+            <path fill="var(--text)"
+              d="m1368 3037-55-10-23-6a369 369 0 0 1-57-19 552 552 0 0 1-266-246 437 437 0 0 1-31-74 590 590 0 0 1-18-245l5-25c7-35 21-77 35-105l9-19a522 522 0 0 1 679-236c1 5-1 77-3 91a1059 1059 0 0 1-24 119 274 274 0 0 1-19 53c-1 0-7-5-14-13-40-46-95-77-160-91a290 290 0 0 0-186 542 287 287 0 0 0 202 23c61-15 120-54 159-105a1108 1108 0 0 0 149-360 1296 1296 0 0 0 27-274 1164 1164 0 0 0-226-667 146 146 0 0 1-21-39l-4-9-4-11c-8-16-18-53-24-84-5-27-5-72 0-95 10-49 32-84 69-115 24-20 50-34 87-47a740 740 0 0 1 79-19c23-4 134-6 167-3a1364 1364 0 0 1 446 118l20 8 20 8 18 8a2232 2232 0 0 1 652 439 1008 1008 0 0 1 234 338c4 5 16 57 20 83 2 17 1 63-3 79-18 83-71 135-171 167-34 11-106 20-130 16-43-7-194-7-249 0-67 9-142 23-179 34l-34 10a974 974 0 0 0-94 33 1245 1245 0 0 0-170 84 1182 1182 0 0 0-405 414 529 529 0 0 1-347 244c-40 9-112 11-160 6zm1441-892 14-2c21-2 58-13 76-22 34-17 54-37 67-69 6-16 7-19 7-44 1-26 1-28-6-54-32-125-167-280-368-420-80-56-200-124-282-159l-26-12a1286 1286 0 0 0-124-47c-39-14-128-36-170-42l-18-3c-19-3-41-4-87-4-56 0-71 2-105 13-68 23-101 65-101 130a201 201 0 0 0 17 82c3 9 21 46 31 64 68 112 187 227 351 338a1827 1827 0 0 0 446 214 1084 1084 0 0 0 219 39c1 1 50-1 59-2z" />
+          </svg>
+
+          ytify is a resource efficient audio streaming client for YouTube & YTMusic. <a
+            style="text-decoration:underline;" target="_blank" href="https://github.com/n-ce/ytify/wiki/usage">Learn
+            more about how to use it effectively.</a>
+          <br>
+          <br>
+          <p style="font-size:smaller;margin-top:1rem">
+            <img width="100" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/UPI_logo.svg" />
+            To support with connectivity costs donations can be made through the United Payments Interface at
+            <b>animesh.5383@waicici</b>, even a small amount can help.
+          </p>
+          <a style='text-decoration: underline;'
+            href='https://en.m.wikipedia.org/wiki/Individual_action_on_climate_change' target='_blank'>What can one
+            individual do to deal with climate change?</a>
+        </div>
+      </div>
     </section>
 
 
@@ -219,7 +235,7 @@
 
 
       <div id="superCollectionSelector">
-        <input type="radio" id="r.featured" name="superCollectionChips" value="featured" checked>
+        <input type="radio" id="r.featured" name="superCollectionChips" value="featured">
         <label data-translation="library_featured" for="r.featured">Featured</label>
         <input type="radio" id="r.collections" name="superCollectionChips" value="collections">
         <label data-translation="library_collections" for="r.collections">Collections</label>
@@ -287,11 +303,11 @@
             <li id="sortCollectionBtn" data-translation-aria-label="list_sort">
               <i class="ri-draggable"></i>
             </li>
-            <li id="sortByTitleBtn">
-              <i class="ri-sort-alphabet-asc"></i> Sort Title A↔Z
+            <li id="sortByTitleBtn" data-translation-aria-label="list_sort_title">
+              <i class="ri-sort-alphabet-asc"></i>
             </li>
-            <li id="sortByArtistBtn">
-              <i class="ri-sort-asc"></i> Sort Artist A↔Z
+            <li id="sortByArtistBtn" data-translation-aria-label="list_sort_author">
+              <i class="ri-sort-asc"></i>
             </li>
           </ul>
         </details>
@@ -335,4 +351,4 @@ <h1 data-translation="list_info">Playlist, channel or your collection items show
   <script src="/src/main.ts" type="module"></script>
 </body>
 
-</html>
+</html>

src/components/Settings/app.ts

@@ -61,9 +61,8 @@ export default function() {
       notify(i18n('settings_reload'));
     },
     onmount: (target) => {
-      const { linkHost } = state;
-      if (linkHost)
-        target.value = linkHost;
+      if (state.linkHost)
+        target.value = state.linkHost;
     },
     children: html`
           <option value="https://ytify.pp.ua">ytify</option>
@@ -81,9 +80,7 @@ export default function() {
       setState('dlFormat', e.target.value);
     },
     onmount: (target) => {
-      const { dlFormat } = state;
-      if (dlFormat)
-        target.value = dlFormat as 'opus';
+      target.value = state.dlFormat;
     },
     children: html`
           <option value='opus'>Opus</option>
@@ -100,8 +97,7 @@ export default function() {
       setState('shareAction', e.target.value);
     },
     onmount: (target) => {
-      if (state.shareAction)
-        target.value = state.shareAction;
+      target.value = state.shareAction;
     },
     children: html`
           <option value='play'>${i18n('settings_pwa_play')}</option>

src/components/Settings/personalize.ts

@@ -47,19 +47,19 @@ export default function() {
       ${ToggleSwitch({
     id: "custom_theme",
     name: 'settings_use_custom_color',
-    checked: Boolean(state.customTheme),
+    checked: Boolean(state.customColor),
     handler: e => {
       let colorString = '';
 
-      if (!state.customTheme) {
+      if (!state.customColor) {
         const rgbText = i18n('settings_custom_color_prompt');
         const str = prompt(rgbText, '174,174,174');
         if (str)
           colorString = str;
         else
           e.preventDefault();
       }
-      setState('customTheme', colorString);
+      setState('customColor', colorString);
       themer();
     }
   })}

src/components/SuperCollectionList.ts

@@ -7,11 +7,9 @@ import { render } from 'uhtml';
 import { setState, state } from '../lib/store';
 
 
-let name = state.defaultSuperCollection as SuperCollection;
+let { defaultSuperCollection } = state;
 
-if (name)
-  document.getElementById('r.' + name)?.toggleAttribute('checked')
-else name = 'featured';
+document.getElementById('r.' + defaultSuperCollection)?.toggleAttribute('checked')
 
 superCollectionList.addEventListener('click', superClick);
 
@@ -30,13 +28,13 @@ superCollectionSelector.addEventListener('click', e => {
   if (elm.value !== 'for_you')
     setState('defaultSuperCollection', elm.value);
 
-  name = elm.value;
+  defaultSuperCollection = elm.value;
   main();
 });
 
 export default async function main() {
   const db = getDB();
-  const data = await loadData(name, db);
+  const data = await loadData(defaultSuperCollection, db);
   const template = ItemsLoader(data as string);
   render(superCollectionList, template);
 }

src/components/WatchVideo.ts

@@ -157,7 +157,7 @@ export default async function(dialog: HTMLDialogElement) {
         id: 'videoCodecSelector',
         label: '',
         handler: (_) => {
-          video.src = proxyHandler(_.target.value);
+          video.src = proxyHandler(_.target.value, true);
           video.currentTime = audio.currentTime;
           if (savedQ)
             setState('watchMode', _.target.selectedOptions[0].textContent as string);
@@ -173,7 +173,7 @@ export default async function(dialog: HTMLDialogElement) {
           }`,
         onmount: (_) => {
           if (savedQ)
-            video.src = proxyHandler(_.value);
+            video.src = proxyHandler(_.value, true);
         }
       })
       : ''}
@@ -193,7 +193,7 @@ export default async function(dialog: HTMLDialogElement) {
     ${footerTemplate}
   `);
 
-  audio.src = proxyHandler(audioArray[0].url);
+  audio.src = proxyHandler(audioArray[0].url, true);
   audio.currentTime = video.currentTime;
   loadingScreen.close();
 }

src/lib/libraryUtils.ts

@@ -1,7 +1,8 @@
-import { goTo, notify, renderCollection } from "./utils";
+import { goTo, hostResolver, notify } from "./utils";
 import { listBtnsContainer, listContainer, listSection, listTitle, loadingScreen, removeFromListBtn, sortCollectionBtn } from "./dom";
 import { store } from "./store";
 import { render, html } from "uhtml";
+import StreamItem from "../components/StreamItem";
 
 export const reservedCollections = ['discover', 'history', 'favorites', 'listenLater', 'channels', 'playlists'];
 
@@ -83,17 +84,37 @@ export function createCollection(title: string) {
     store.addToCollectionOptions.push(title);
 }
 
+export function renderCollection(
+  data: (DOMStringMap | CollectionItem)[],
+  draggable = false,
+  fragment: DocumentFragment | HTMLDivElement = listContainer
+) {
+  render(fragment, html`${data.map(v =>
+    StreamItem({
+      id: v.id || '',
+      href: hostResolver(`/watch?v=${v.id}`),
+      title: v.title || '',
+      author: v.author,
+      duration: v.duration || '',
+      channelUrl: v.channelUrl,
+      draggable: draggable
+    })
+  )
+    }`);
+}
 
 export async function fetchCollection(
   id: string | null,
   shared: boolean = false
 ) {
   if (!id) return;
 
+
+  const display = shared ? 'Shared Collection' : id
   const isReserved = reservedCollections.includes(id);
   const isReversed = listContainer.classList.contains('reverse');
 
-  listTitle.textContent = decodeURIComponent(id);
+  listTitle.textContent = decodeURIComponent(display);
 
   shared ?
     await getSharedCollection(id) :
@@ -123,7 +144,7 @@ export async function fetchCollection(
     location.origin + location.pathname +
     (shared ? '?si=' : '?collection=') + id
   );
-  document.title = (shared ? 'Shared Collection' : id) + ' - ytify';
+  document.title = display + ' - ytify';
 
 }
 

src/lib/store.ts

@@ -12,7 +12,7 @@ export let state = {
   linkHost: '',
   dlFormat: 'opus',
   theme: 'auto',
-  customTheme: '',
+  customColor: '',
   roundness: '0.4rem',
   searchSuggestions: true,
   searchFilter: '',
@@ -90,11 +90,9 @@ export const store: {
   },
   linkHost: string,
   searchQuery: string,
-  superCollectionType: 'featured' | 'collections' | 'channels' | 'feed' | 'playlists',
   addToCollectionOptions: string[],
   actionsMenu: CollectionItem,
   list: List & Record<'url' | 'type' | 'uploader', string>,
-
   downloadFormat: 'opus' | 'wav' | 'mp3' | 'ogg'
 } = {
   player: {
@@ -137,7 +135,6 @@ export const store: {
   },
   linkHost: state.linkHost || location.origin,
   searchQuery: '',
-  superCollectionType: state.defaultSuperCollection as 'featured',
   actionsMenu: {
     id: '',
     title: '',

src/lib/utils.ts

@@ -1,9 +1,7 @@
-import { audio, listContainer, settingsContainer, title } from "./dom";
+import { audio, settingsContainer, title } from "./dom";
 import { getThumbIdFromLink } from "./imageUtils";
 import player from "./player";
 import { state, store } from "./store";
-import { html, render } from 'uhtml';
-import StreamItem from "../components/StreamItem";
 import fetchList from "../modules/fetchList";
 import { fetchCollection, removeFromCollection } from "./libraryUtils";
 import { i18n } from "../scripts/i18n.ts";
@@ -137,27 +135,6 @@ export async function errorHandler(
 }
 
 
-
-export function renderCollection(
-  data: (DOMStringMap | CollectionItem)[],
-  draggable = false,
-  fragment: DocumentFragment | undefined = undefined
-) {
-  render(fragment || listContainer, html`${data.map(v =>
-    StreamItem({
-      id: v.id || '',
-      href: hostResolver(`/watch?v=${v.id}`),
-      title: v.title || '',
-      author: v.author,
-      duration: v.duration || '',
-      channelUrl: v.channelUrl,
-      draggable: draggable
-    })
-  )
-    }`);
-}
-
-
 // TLDR : Stream Item Click Action
 export async function superClick(e: Event) {
   const elem = e.target as HTMLAnchorElement & { dataset: CollectionItem };

src/locales/en.json

@@ -41,7 +41,7 @@
   "search_filter_music_albums": "Albums",
   "search_filter_music_playlists": "Playlists",
   "search_filter_sort_by": "Sort by",
-  "search_filter_date": "Date",
+  "search_filter_date": "Time",
   "search_filter_views": "Views",
   "library_discover": "Discover",
   "library_history": "History",
@@ -60,6 +60,7 @@
   "library_clean": "Clean Library",
   "library_clean_prompt": "Are you sure you want to clear $ items from the library?",
   "library_import_prompt": "This will merge your current library with the imported library, continue?",
+  "library_imported": "Library has been imported successfully",
   "list_play": "Play All",
   "list_enqueue": "Enqueue All",
   "list_import": "Import as Collection",
@@ -72,6 +73,8 @@
   "list_share": "Share Collection",
   "list_radio": "Start Radio",
   "list_sort": "Sort Manually",
+  "list_sort_title": "Sort by Title A↔Z",
+  "list_sort_author": "Sort by Author A↔Z",
   "list_info": "Playlist, channel or your collection items show here",
   "list_prompt_delete": "Are you sure you want to delete the collection $ ?",
   "list_prompt_clear": "Are you sure you want to clear $ ?",

src/locales/es.json

@@ -66,11 +66,11 @@
     "list_set_title": "Establecer título",
     "list_clear_all": "Limpiar todo",
     "list_remove": "Eliminar",
-    "list_delete": "Borrar",
-    "list_rename": "Renombrar",
-    "list_share": "Compartir",
-    "list_radio": "Radio",
-    "list_sort": "Ordenar",
+    "list_delete": "Borrar colección",
+    "list_rename": "Renombrar colección",
+    "list_share": "Compartir colección",
+    "list_radio": "Abrir radio",
+    "list_sort": "Ordenar manualmente",
     "list_info": "La lista de reproducción, el canal o los elementos de tu colección se muestran aquí",
     "list_prompt_delete": "¿Estás seguro de que quieres eliminar la colección $?",
     "list_prompt_clear": "¿Estás seguro de que quieres borrar $?",
@@ -83,18 +83,18 @@
     "actions_menu_view_artist": "Ver artista",
     "actions_menu_view_lyrics": "Ver letra",
     "actions_menu_view_channel": "Ver canal",
-    "actions_menu_debug_info": "Información de depuración",
-    "collection_selector_add_to": "Agregar a",
-    "collection_selector_create_new": "Crear nueva colección",
+    "actions_menu_debug_info": "Ver detalles",
+    "collection_selector_add_to": "Agregar a la colección",
+    "collection_selector_create_new": "Crear una nueva colección",
     "collection_selector_favorites": "Favoritos",
-    "collection_selector_listen_later": "Escúchalo más tarde",
+    "collection_selector_listen_later": "Escúchar más tarde",
     "settings_custom_instance": "Usar instancia personalizada",
     "settings_enter_piped_api": "Ingresar URL de la API de Piped:",
     "settings_enter_invidious_api": "Ingresar URL de la API de Invidious:",
     "settings_language": "Idioma",
-    "settings_links_host": "Host de enlaces",
+    "settings_links_host": "Enlaces de host",
     "settings_download_format": "Formato de descarga",
-    "settings_pwa_share_action": "Acción de compartir PWA",
+    "settings_pwa_share_action": "Acción para compartir a PWA",
     "settings_pwa_play": "Reproducir",
     "settings_pwa_download": "Descargar",
     "settings_pwa_always_ask": "Preguntar siempre",
@@ -165,5 +165,6 @@
     "pwa_share_prompt": "Haz clic en Aceptar para reproducir, haz clic en Cancelar para descargar",
     "settings_watchmode": "Modo de vídeo",
     "upcoming_filter_lt10": "Filtro < 10:00",
-    "upcoming_filter_ytm": "Filtrar YTM"
+    "upcoming_filter_ytm": "Filtrar YTM",
+    "settings_pwa_watch": "Mirar"
 }