implemented search sort #130

index.html

@@ -68,7 +68,7 @@
       <img height="100%" width="100%" crossorigin="anonymous" alt="Current Playing Media Thumbnail">
 
       <div id="metadata">
-        <a id="title" href="" target="_blank">ytify 6.1</a>
+        <a id="title" href="" target="_blank">ytify 6.2</a>
         <a id="author" href="" target="_blank">Channel</a>
         <select id="bitrateSelector">
           <option value="">Bitrate</option>
@@ -127,10 +127,15 @@ <h1 align="center">upcoming streams show here</h1>
         <button aria-label="search" class="ri-search-2-line"></button>
       </span>
       <ul id="suggestions"></ul>
+      <div id="sort">
+        <toggle-switch id="sortByTime">Sort By Time&nbsp;&nbsp;</toggle-switch>
+      </div>
       <div id="searchlist">
         <h1>search results show here</h1>
       </div>
       <button id="loadMore">Load More</button>
+      <br>
+      <br>
     </section>
 
 

src/components/toggleSwitch.ts

@@ -15,6 +15,7 @@ customElements.define('toggle-switch', class extends HTMLElement {
 
     this.addEventListener('click', () => {
       input.checked = !input.checked;
+      this.toggleAttribute('checked');
     });
 
     label.append(input, document.createElement('span'));

src/scripts/search.ts

@@ -5,23 +5,27 @@ import { getSaved, save, itemsLoader, idFromURL, params } from "../lib/utils";
 
 const searchlist = <HTMLDivElement>document.getElementById('searchlist');
 const searchFilters = <HTMLSelectElement>document.getElementById('searchFilters');
+const sortSwitch = <HTMLElement>document.getElementById('sortByTime');
 const loadMoreBtn = <HTMLButtonElement>document.getElementById('loadMore');
 
 let token = '';
 
-loadMoreBtn.addEventListener('click', () => {
-  if (token)
-    fetch(
-      `${pipedInstances.value}/nextpage/search?nextpage=${encodeURIComponent(token)}&q=${superInput.value}&filter=${searchFilters.value}`
-    )
-      .then(res => res.json())
-      .then(data => {
-        token = data.nextpage;
-        searchlist.appendChild(itemsLoader(data.items));
-      })
+const loadMoreResults = async () =>
+  fetch(
+    `${pipedInstances.value}/nextpage/search?nextpage=${encodeURIComponent(token)}&q=${superInput.value}&filter=${searchFilters.value}`
+  ).then(res => res.json())
+
+
+loadMoreBtn.addEventListener('click', async () => {
+  if (!token) return;
+  const data = await loadMoreResults();
+  token = data.nextpage;
+  searchlist.appendChild(itemsLoader(data.items));
+
 });
 
 
+
 // Get search results of input
 
 const searchLoader = () => {
@@ -33,9 +37,21 @@ const searchLoader = () => {
 
   fetch(pipedInstances.value + '/search?q=' + text + '&filter=' + searchFilters.value)
     .then(res => res.json())
-    .then(searchResults => {
+    .then(async searchResults => {
       token = searchResults.nextpage;
       loadMoreBtn.style.display = 'block';
+
+      if (sortSwitch.hasAttribute('checked')) {
+        for (let i = 0; i < 3; i++) {
+          const data = await loadMoreResults();
+          token = data.nextpage;
+          searchResults.items = searchResults.items.concat(data.items);
+        }
+        searchResults.items.sort((
+          a: { uploaded: number },
+          b: { uploaded: number }
+        ) => b.uploaded - a.uploaded);
+      }
       searchlist.appendChild(
         itemsLoader(
           searchResults.items
@@ -61,6 +77,9 @@ const searchLoader = () => {
 }
 
 
+sortSwitch.addEventListener('click', searchLoader);
+
+
 // super input supports both searching and direct link, also loads suggestions
 
 let prevID: string | undefined;

src/scripts/superModal.ts

@@ -117,6 +117,7 @@ dlSelector.addEventListener('change', () => {
 
   if (itag)
     open(link);
+  dlSelector.innerHTML = '<option>Download</option>';
 });
 
 

src/stylesheets/footer.css

@@ -1,6 +1,6 @@
 footer {
   display: flex;
-  height: 20%;
+  height: 19%;
   width: 100%;
   border-radius: var(--roundness);
   background-color: var(--onBg);
@@ -10,7 +10,6 @@ footer {
   flex-direction: column;
   box-shadow: var(--shadow);
   overflow: hidden;
-  margin: -1.5vmin 0;
 }
 
 footer>span {

src/stylesheets/home.css

@@ -87,7 +87,7 @@ img {
 
 @media(orientation:portrait) {
   img {
-    height: 50vw;
+    height: 52vw;
     width: auto;
   }
 

src/stylesheets/nav.css

@@ -24,8 +24,8 @@ nav a.active {
   nav {
     height: auto;
     justify-content: space-around;
-    width: 90%;
-    padding: 5%;
+    width: 94%;
+    padding: 5% 3%;
     padding-bottom: 0;
   }
 

src/stylesheets/search.css

@@ -76,4 +76,19 @@
 #suggestions li:focus {
   background-color: #39FC;
   color: #ADFD;
+}
+
+
+#sort {
+  height: 9vmin;
+  display: flex;
+  justify-content: space-around;
+  position: sticky;
+  top: calc(100% - 12vmin);
+  z-index: 3;
+  background-color: var(--bg);
+  padding: 0.5vmin 2vmin;
+  border: var(--border);
+  border-radius: calc(var(--roundness) + 0.5vmin);
+  box-shadow: var(--shadow);
 }

src/stylesheets/style.css

@@ -71,9 +71,9 @@ section.view {
   }
 
   main {
-    height: calc(100dvh - 10%);
-    width: 90%;
-    padding: 5%;
+    height: calc(100dvh - 6%);
+    width: 94%;
+    padding: 3%;
   }
 
   section {
@@ -196,6 +196,10 @@ playlist-item:hover {
   display: none;
 }
 
+#searchlist {
+  margin-top: -10vmin;
+}
+
 #queuelist {
   width: 100%;
   height: 100%;