Implement searching

src/components/VideoItem.vue

@@ -25,8 +25,8 @@ import { LibPiped } from '@/tools/libpiped'
 export default {
   props: {
     video: Object,
-    height: String,
-    width: String,
+    height: Number,
+    width: Number,
     hideChannel: Boolean
   },
   methods: {

src/routes/SearchMenu.vue

@@ -33,11 +33,21 @@ export default {
       }
     },
 
-    select (val) {
-      this.$router.push({
-        name: 'SearchResults',
-        query: { search_query: val }
-      })
+    async select (val) {
+      if (val === '') {
+        return
+      }
+      try {
+        await this.$router.push({
+          name: 'SearchResults',
+          query: { search_query: val }
+        })
+      } catch (e) {
+        console.log('???', e)
+      } finally {
+        this.select = ''
+        this.searchText = ''
+      }
     }
   },
 

src/routes/SearchResults.vue

@@ -1,75 +1,35 @@
 <template>
   <v-container fluid>
-    <h1 class="uk-text-center">
+    <h5 class="text-h5 text-center">
       {{ $route.query.search_query }}
-    </h1>
+    </h5>
 
-    <b>Filter: </b>
-    <select
-      default="all"
-      class="uk-select uk-width-auto"
-      style="height: 100%"
+    <v-select
+      label="Filter videos"
       v-model="selectedFilter"
-      @change="updateResults()"
-    >
-      <option v-bind:key="filter" v-for="filter in availableFilters" v-bind:value="filter">
-        {{ filter.replace("_", " ") }}
-      </option>
-    </select>
+      :items="availableFilters"
+    />
+    <v-divider class="my-4" />
 
-    <hr />
-
-    <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
-      <div
-        :style="[{ background: backgroundColor }]"
-        class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-        v-bind:key="result.url"
-        v-for="result in results.items"
-      >
-        <div class="uk-text-secondary">
-          <router-link class="uk-text-emphasis" v-bind:to="result.url">
-            <img style="width: 100%" v-bind:src="result.thumbnail" loading="lazy" />
-            <p>
-              {{ result.name }}&thinsp;<font-awesome-icon
-              v-if="result.verified"
-              icon="check"
-            ></font-awesome-icon>
-            </p>
-          </router-link>
-          <p v-if="result.description">{{ result.description }}</p>
-          <router-link class="uk-link-muted" v-if="result.uploaderUrl" v-bind:to="result.uploaderUrl">
-            <p>
-              {{ result.uploader }}&thinsp;<font-awesome-icon
-              v-if="result.uploaderVerified"
-              icon="check"
-            ></font-awesome-icon>
-            </p>
-          </router-link>
-          <b v-if="result.duration" class="uk-text-small uk-align-right uk-text-align-right">
-            {{ timeFormat(result.duration) }}
-          </b>
-
-          <b v-if="result.uploadDate">
-            {{ result.uploadDate }}
-          </b>
-
-          <a v-if="result.uploaderName" class="uk-text-muted">{{ result.uploaderName }}</a>
-          <b v-if="result.videos >= 0"><br v-if="result.uploaderName" />{{ result.videos }} Videos</b>
-
-          <br />
-
-          <b v-if="result.views >= 0" class="uk-text-small">
-            <font-awesome-icon icon="eye"></font-awesome-icon>
-            {{ numberFormat(result.views) }} views
-          </b>
-        </div>
-      </div>
+    <div v-if="results && results.items">
+      <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
+        <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
+          <VideoItem :height="270" :width="480" :video="video" />
+        </v-col>
+      </v-row>
+      <v-progress-linear indeterminate v-intersect="onSearchResultsEndIntersect" />
     </div>
   </v-container>
 </template>
 
 <script>
+import { chunk as _chunk } from 'lodash-es'
+
+import { LibPiped } from '@/tools/libpiped'
+import VideoItem from '@/components/VideoItem'
+
 export default {
+  components: { VideoItem },
   data () {
     return {
       results: null,
@@ -89,38 +49,70 @@ export default {
   mounted () {
     this.updateResults()
   },
-  activated () {
-    window.addEventListener('scroll', this.handleScroll)
+  computed: {
+    chunkedByFour () {
+      return _chunk(this.results.items, 4)
+    }
   },
-  deactivated () {
-    window.removeEventListener('scroll', this.handleScroll)
+  watch: {
+    selectedFilter () {
+      this.updateResults()
+    }
   },
+
   methods: {
+    rationalizeSearchResult (sr) {
+      return {
+        title: sr.name,
+        uploaderName: sr.uploader,
+        uploadedDate: sr.uploadDate,
+        ...sr
+      }
+    },
+
     async fetchResults () {
-      return this.fetchJson(this.apiUrl() + '/search', {
-        q: this.$route.query.search_query,
-        filter: this.selectedFilter
+      return this.$store.dispatch('fetchJson', {
+        path: 'search',
+        params: {
+          q: this.$route.query.search_query,
+          filter: this.selectedFilter
+        }
       })
     },
+
+    numberFormat (...args) {
+      return LibPiped.numberFormat(...args)
+    },
+
+    timeFormat (...args) {
+      return LibPiped.timeFormat(...args)
+    },
     async updateResults () {
       document.title = this.$route.query.search_query + ' - Piped'
-      this.results = this.fetchResults().then(json => (this.results = json))
+      this.results = this.fetchResults().then(json => {
+        json.items = json.items.map(this.rationalizeSearchResult)
+        this.results = json
+      })
     },
-    handleScroll () {
-      if (this.loading || !this.results || !this.results.nextpage) return
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-        this.loading = true
-        this.fetchJson(this.apiUrl() + '/nextpage/search', {
+    onSearchResultsEndIntersect (entries) {
+      if (entries[0].isIntersecting) {
+        this.fetchMoreResults()
+      }
+    },
+
+    fetchMoreResults () {
+      this.$store.dispatch('fetchJson', {
+        path: '/nextpage/search',
+        params: {
           nextpage: this.results.nextpage,
           q: this.$route.query.search_query,
           filter: this.selectedFilter
-        }).then(json => {
-          this.results.nextpage = json.nextpage
-          this.results.id = json.id
-          this.loading = false
-          json.items.map(stream => this.results.items.push(stream))
-        })
-      }
+        }
+      }).then(json => {
+        this.results.nextpage = json.nextpage
+        this.results.id = json.id
+        this.results.items = this.results.items.concat(json.items.map(this.rationalizeSearchResult))
+      })
     }
   }
 }

src/routes/TrendingPage.vue

@@ -25,7 +25,7 @@ export default {
   },
   mounted () {
     // Reimplement using vue-meta
-    // document.title = 'Trending - Piped'
+    document.title = 'Trending - Piped'
 
     const region = this.$store.getters.getPreferenceString('region', 'US')