v6.4 - Various Optimizations, Improvements & Fixes

- Use dialog element for SuperModal with improved routing capability for back button support.
- Display discovery items randomly.
- Search results now filter livestreams and shorts.
- Fix Favorites Set & Reset.
- More Efficient Image Error Handling / Removed Piped Thumbnail Dependency for stream items.
- Avoid adding unnecessary data in Library.
- Added ability to add to favorites from superModal.
- Avoid >50min streams from discovery.
- Several Code Optimizations.
- Added Icons for Library Tools.
- List Container's Open In YT button now shows channel/playlist name directly instead of the 'open in yt' text.
- IntersectionObserver for loading more items in a list instead of onscroll event listener.

CONTRIBUTING.md

@@ -9,6 +9,10 @@
 
 ## Changelog
 
+**v6.4**:
+- Import, Export Library
+- Various Fixes & Optimizations
+
 **v6.3**:
 - Library (Discover, History, Favorites, Playlists)
 - Channel Support

index.html

@@ -54,8 +54,8 @@
       <i class="ri-settings-line"></i>
       <p>Settings</p>
     </a>
-    <a id="/list" class="hide"><br>
-      <p>List</p>
+    <a href="/list" id="/list" class="hide">
+      <p>list</p>
     </a>
   </nav>
   <main>
@@ -65,7 +65,7 @@
       <img height="100%" width="100%" crossorigin="anonymous" alt="Current Playing Media Thumbnail">
 
       <div id="metadata">
-        <a id="title" href="" target="_blank">ytify 6.3</a>
+        <a id="title" href="" target="_blank">ytify 6.4</a>
         <a id="author" href="" target="_blank">Channel</a>
         <select id="bitrateSelector">
           <option value="">Bitrate</option>
@@ -87,7 +87,7 @@
     <section id="upcoming">
       <span id="queuetools">
         <button>
-          <i class="ri-delete-bin-7-line"></i> Clear
+          <i class="ri-close-line"></i> Clear
         </button>
         <button>
           <i class="ri-shuffle-line"></i> Shuffle
@@ -133,13 +133,16 @@ <h1>search results show here</h1>
     </section>
 
     <section id="library">
-
       <details id="discover">
         <summary>
           <i class="ri-compass-3-line"></i> Discover
         </summary>
-        <button>Clear All</button>
-        <button>Remove</button>
+        <button>
+          <i class="ri-close-line"></i> Clear All
+        </button>
+        <button>
+          <i class="ri-subtract-line"></i> Remove
+        </button>
         <div>
           <h2>Listen more to discover more.</h2>
         </div>
@@ -149,21 +152,39 @@ <h2>Listen more to discover more.</h2>
         <summary>
           <i class="ri-history-line"></i> History
         </summary>
-        <button>Clear All</button>
-        <button>Remove</button>
+        <button>
+          <i class="ri-close-line"></i> Clear All
+        </button>
+        <button>
+          <i class="ri-subtract-line"></i> Remove
+        </button>
         <div></div>
       </details>
 
       <details id="favorites">
         <summary>
           <i class="ri-heart-fill"></i> Favorites
         </summary>
-        <button>Clear All</button>
-        <button>Remove</button>
-        <button>Enqueue</button>
+        <button>
+          <i class="ri-close-line"></i> Clear All
+        </button>
+        <button>
+          <i class="ri-subtract-line"></i> Remove
+        </button>
+        <button>
+          <i class="ri-list-check-2"></i> Enqueue
+        </button>
         <div></div>
       </details>
-
+      <br>
+      <div>
+        <label id="importBtn" for="upload">
+          <i class="ri-login-circle-line"></i> Import</label>
+        <input type="file" id="upload" class="hide">
+        <label id="exportBtn">
+          <i class="ri-logout-circle-line"></i> Export</label>
+      </div>
+      <br>
     </section>
 
 
@@ -172,6 +193,15 @@ <h2>Listen more to discover more.</h2>
         <label for="pipedInstances">Piped Instance</label>
         <select id="pipedInstances"></select>
       </span>
+      <span>
+        <label for="roundnessChanger">UI Roundness</label>
+        <select id="roundnessChanger">
+          <option value="none">None</option>
+          <option value="1vmin">Light</option>
+          <option value="2vmin" selected>Medium</option>
+          <option value="4vmin">Heavy</option>
+        </select>
+      </span>
       <span>
         <label for="themeSelector">Theming Scheme</label><select id="themeSelector">
           <option value="auto">System</option>
@@ -185,17 +215,8 @@ <h2>Listen more to discover more.</h2>
       <toggle-switch id="qualitySwitch">Highest Quality Audio</toggle-switch>
       <toggle-switch id="suggestionsSwitch" checked>Display Search Suggestions</toggle-switch>
 
-      <span>
-        <label for="roundnessChanger">UI Roundness</label>
-        <select id="roundnessChanger">
-          <option value="none">None</option>
-          <option value="1vmin">Light</option>
-          <option value="2vmin" selected>Medium</option>
-          <option value="4vmin">Heavy</option>
-        </select>
-      </span>
 
-      <a href="/" id="deleteButton">Clear All Stored Data</a>
+      <a href="/" id="deleteButton">Clear all data</a>
 
       <a href="https://github.com/n-ce/ytify/" target="_blank">View on Github</a>
 
@@ -208,7 +229,6 @@ <h2>Listen more to discover more.</h2>
 
     </section>
 
-
     <section id="list">
       <span id="listTools">
         <button id="playAllBtn">
@@ -230,7 +250,6 @@ <h1>playlist or channel items show here</h1>
       </div>
     </section>
 
-
     <footer>
 
       <span>
@@ -267,7 +286,7 @@ <h1>playlist or channel items show here</h1>
     </footer>
   </main>
 
-  <div id="superModal" class="hide">
+  <dialog id="superModal">
     <ul>
       <li><i class="ri-play-line"></i>Play Now</li>
       <li><i class="ri-list-check-2"></i>Enqueue</li>
@@ -276,14 +295,16 @@ <h1>playlist or channel items show here</h1>
         <select id="playlistSelector">
           <option>Add To Playlist</option>
           <option value="+pl">Create New Playlist</option>
+          <option value="favorites">Favorites</option>
         </select>
       </li>
       <li><i class="ri-rfid-line"></i>Start Radio</li>
       <li><i class="ri-download-2-line"></i>Download</li>
       <li><i class="ri-youtube-line"></i>View Channel</li>
     </ul>
-  </div>
+  </dialog>
+
   <script src="/src/scripts/main.ts" type="module"></script>
 </body>
 
-</html>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ytify",
   "private": true,
-  "version": "6.3.X",
+  "version": "6.4.X",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/streamItem.css

@@ -49,11 +49,12 @@ span {
 
 slot {
   font-size: medium;
-  height: 50%;
+  height: 55%;
   width: auto;
   display: flex;
   overflow: hidden;
   word-break: break-all;
+  text-overflow: clip;
 }
 
 div {
@@ -86,6 +87,10 @@ div {
   flex-direction: column;
 }
 
+#author {
+  height: auto;
+  text-overflow: clip;
+}
 
 
 @media(orientation:landscape) {
@@ -96,4 +101,8 @@ div {
     flex-direction: row;
     justify-content: space-between;
   }
+
+  #author {
+    height: initial;
+  }
 }

src/components/streamItem.ts

@@ -18,20 +18,12 @@ customElements.define('stream-item', class extends HTMLElement {
 		thumbnail.crossOrigin = 'anonymous';
 		thumbnail.id = 'thumbnail';
 		thumbnail.loading = 'lazy';
-		thumbnail.addEventListener('error', () => {
-			const quality = thumbnail.src.includes('hq720') ? 'hqdefault' : 'hq720';
-			thumbnail.src = imgUrl(
-				<string>this.dataset.id,
-				quality);
-		});
-		thumbnail.addEventListener('load', () => {
-			const backupImg = this.dataset.pipedImg;
-			if (thumbnail.naturalWidth === 120 && backupImg) {
-				thumbnail.src = backupImg;
-				return;
-			}
-			['span', '#metadata'].forEach(_ => (<HTMLElement>root.querySelector(_)).style.opacity = '1');
-		});
+		thumbnail.onerror = () =>
+			thumbnail.src = 'https://corsproxy.io?' + encodeURIComponent(`https://i.ytimg.com/vi/${this.dataset.id}/mqdefault.jpg`);
+		thumbnail.onload = () =>
+			thumbnail.naturalWidth === 120 ?
+				thumbnail.src = thumbnail.src.replace('.webp', '.jpg').replace('vi_webp', 'vi') :
+				['span', '#metadata'].forEach(_ => (<HTMLElement>root.querySelector(_)).style.opacity = '1');
 
 		const duration = $('p');
 		duration.id = 'duration';
@@ -54,9 +46,7 @@ customElements.define('stream-item', class extends HTMLElement {
 
 		const author = $('p');
 		author.id = 'author';
-		avatar.addEventListener('error', () => {
-			avatar.src = blankImage;
-		});
+		avatar.onerror = () => avatar.src = blankImage;
 
 		const viewsXuploaded = $('p');
 		viewsXuploaded.id = 'viewsXuploaded';
@@ -78,14 +68,11 @@ customElements.define('stream-item', class extends HTMLElement {
 		const author = <HTMLParagraphElement>root.getElementById('author');
 		const viewsXuploaded = <HTMLParagraphElement>root.getElementById('viewsXuploaded');
 
-		if (!getSaved('img') && data.thumbnail) {
-			data.pipedImg = data.thumbnail;
+		if (!getSaved('img')) {
 			thumbnail.src = imgUrl(<string>data.id, 'mqdefault');
-
 			data.avatar ?
 				avatar.src = data.avatar :
 				avatar.style.display = 'none';
-
 		}
 		else thumbnail.src = blankImage;
 
@@ -97,6 +84,6 @@ customElements.define('stream-item', class extends HTMLElement {
 			author.textContent = data.author;
 
 		if (data.views)
-			viewsXuploaded.textContent = data.views + (data.uploaded ? ' • ' + data.uploaded : '');
+			viewsXuploaded.textContent = data.views + (data.uploaded ? ' • ' + data.uploaded.replace('Streamed ', '') : '');
 	}
 })

src/lib/dom.ts

@@ -14,7 +14,7 @@ export const suggestions = <HTMLUListElement>document.getElementById('suggestion
 
 export const suggestionsSwitch = <HTMLSelectElement>document.getElementById('suggestionsSwitch');
 
-export const superModal = <HTMLDivElement>document.getElementById('superModal');
+export const superModal = <HTMLDialogElement>document.getElementById('superModal');
 
 export const upcomingBtn = <HTMLAnchorElement>document.getElementById('/upcoming');
 
@@ -33,5 +33,9 @@ export const subtitleSelector = <HTMLSelectElement>document.getElementById('subt
 export const subtitleTrack = <HTMLTrackElement>audio.firstElementChild;
 
 export const favButton = <HTMLInputElement>document.getElementById('favButton');
+
+export const favIcon = <HTMLLabelElement>favButton.nextElementSibling;
 // Add To Playlist Selector
 export const atpSelector = <HTMLSelectElement>document.getElementById('playlistSelector');
+
+export const [playAllBtn, enqueueBtn, saveListBtn, openInYtBtn] = <HTMLCollectionOf<HTMLButtonElement>>(<HTMLSpanElement>document.getElementById('listTools')).children;