Update miniPlayer.ts

src/lib/store.ts

@@ -32,7 +32,8 @@ export const store: {
   superCollectionType: 'featured' | 'collections' | 'channels' | 'feed' | 'playlists',
   actionsMenu: CollectionItem,
   list: List & Record<'url' | 'type' | 'uploader', string>,
-  downloadFormat: 'opus' | 'wav' | 'mp3' | 'ogg'
+  downloadFormat: 'opus' | 'wav' | 'mp3' | 'ogg',
+  routes: string[]
 } = {
   player: {
     playbackState: 'none',
@@ -85,6 +86,6 @@ export const store: {
     uploader: '',
     thumbnail: ''
   },
-  downloadFormat: getSaved('dlFormat') as 'opus' || 'opus'
+  downloadFormat: getSaved('dlFormat') as 'opus' || 'opus',
+  routes: ['/', '/upcoming', '/search', '/library', '/settings', '/list']
 }
-

src/modules/miniPlayer.ts

@@ -9,30 +9,32 @@ if (store.loadImage === 'off') {
   img = '';
 }
 
-
 miniPlayer.addEventListener('click', (e) => {
   e.preventDefault();
   if (!(<HTMLElement>e.target).matches('button'))
     goTo('/');
 });
 const mptext = document.getElementById('mptext') as HTMLDivElement;
 
-
 export function miniPlayerRoutingHandler(inHome: boolean, header: DOMTokenList) {
-
   if (inHome) {
     header.add('hide');
     document.getElementById('upperLayer')!.prepend(img);
     document.getElementById('meta')!.prepend(title, author);
     document.getElementById('playerControls')!.insertBefore(playButton, document.getElementById('seekFwdButton'));
     document.getElementById('selectors')!.appendChild(ytifyIcon);
+    // Update document title when in MiniPlayer (Home)
+    document.title = (store.stream.title || 'Home') + ' - ytify';
   }
   else if (header.contains('hide')) {
     header.remove('hide');
     miniPlayer.prepend(img);
     mptext.append(title, author);
     miniPlayer.lastElementChild!.append(mptext, playButton);
     document.getElementById('ytifyIconContainer')!.prepend(ytifyIcon);
+    // Update document title when not in MiniPlayer
+    const activeRoute = store.routes.find(route => location.pathname === route);
+    const routeName = activeRoute ? document.querySelector(`nav a[href="${activeRoute}"]`)?.textContent : '';
+    document.title = (routeName || 'ytify') + ' - ytify';
   }
-
 }

src/scripts/router.ts

@@ -6,14 +6,12 @@ import { miniPlayerRoutingHandler } from "../modules/miniPlayer";
 import fetchList from "../modules/fetchList";
 import { fetchCollection, superCollectionLoader } from "../lib/libraryUtils";
 
+
 const nav = document.querySelector('nav') as HTMLDivElement;
 const anchors = document.querySelectorAll('nav a') as NodeListOf<HTMLAnchorElement>;
 const sections = document.querySelectorAll('section') as NodeListOf<HTMLDivElement>;
-const routes = ['/', '/upcoming', '/search', '/library', '/settings', '/list'];
 const queueParam = params.get('a');
 
-
-
 function upcomingInjector(param: string) {
   loadingScreen.showModal();
 
@@ -29,10 +27,10 @@ function upcomingInjector(param: string) {
 if (queueParam)
   upcomingInjector(queueParam);
 
-let prevPageIdx = routes.indexOf(location.pathname);
+let prevPageIdx = store.routes.indexOf(location.pathname);
 
 function showSection(id: string) {
-  const routeIdx = routes.indexOf(id);
+  const routeIdx = store.routes.indexOf(id);
   miniPlayerRoutingHandler(id === '/', nav.parentElement!.classList);
 
   // Enables Reactivity to declare db modifications into UI
@@ -58,7 +56,6 @@ function showSection(id: string) {
   prevPageIdx = routeIdx;
 }
 
-
 nav.addEventListener('click', (e: Event) => {
   e.preventDefault();
 
@@ -91,7 +88,6 @@ nav.addEventListener('click', (e: Event) => {
   showSection(anchor.id);
 });
 
-
 // load section if name found in address else load library
 let route: string;
 const errorParam = params.get('e');
@@ -122,7 +118,7 @@ if (errorParam) {
 }
 else {
 
-  route = routes.find(route => location.pathname === route) || '/';
+  route = store.routes.find(route => location.pathname === route) || '/';
 
   const hasStreamQuery = params.has('s') || params.has('url') || params.has('text');
 
@@ -164,7 +160,4 @@ onpopstate = function() {
 
   showSection(location.pathname);
 
-
 }
-
-