Add a search page.

src/App.vue

@@ -1,15 +1,15 @@
-<template>
-    <div
-        class="uk-container uk-container-expand uk-light uk-height-viewport"
-        style="background: #0b0e0f"
-    >
-        <nav
-            class="uk-navbar-container uk-container-expand uk-light"
-            style="background: #0b0e0f"
-            uk-navbar
-        >
-            <div class="uk-navbar-left">
-                <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
+<template>
+    <div
+        class="uk-container uk-container-expand uk-light uk-height-viewport"
+        style="background: #0b0e0f"
+    >
+        <nav
+            class="uk-navbar-container uk-container-expand uk-light"
+            style="background: #0b0e0f"
+            uk-navbar
+        >
+            <div class="uk-navbar-left">
+                <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
                     >Piped</router-link
                 >
             </div>
@@ -19,79 +19,87 @@
                     type="text"
                     placeholder="Search"
                     v-model="searchText"
-                    @keypress="onChange($event)"
-                />
-            </div>
-            <div class="uk-navbar-right">
-                <ul class="uk-navbar-nav">
-                    <li>
-                        <router-link to="/preferences">Preferences</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/login">Login</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/feed">Feed</router-link>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-
-        <router-view />
-    </div>
-</template>
-
-<script>
-import Constants from "@/Constants.js";
-export default {
-    data() {
-        return {
-            searchText: "",
-            searchSuggestions: []
-        };
-    },
-    methods: {
-        onChange(e) {
-            fetch(
-                Constants.BASE_URL +
-                    "/suggestions?query=" +
-                    encodeURI(this.searchText + e.key)
-            )
-                .then(resp => resp.json())
-                .then(json => {
-                    this.searchSuggestions = json;
-                });
-        }
-    }
-};
-</script>
-
-<style>
-#app {
-    background: #0b0e0f;
-}
-
-::-webkit-scrollbar {
-    background-color: #15191a;
-    color: #c5bcae;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #4b4f52;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: #5b6469;
-}
-
-::-webkit-scrollbar-thumb:active {
-    background-color: #485053;
-}
-
-::-webkit-scrollbar-corner {
-    background-color: #0b0e0f;
-}
-
+                    @keypress="onChange($event)"
+                />
+            </div>
+            <div class="uk-navbar-right">
+                <ul class="uk-navbar-nav">
+                    <li>
+                        <router-link to="/preferences">Preferences</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/login">Login</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/feed">Feed</router-link>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+
+        <router-view />
+    </div>
+</template>
+
+<script>
+import Constants from "@/Constants.js";
+export default {
+    data() {
+        return {
+            searchText: "",
+            searchSuggestions: []
+        };
+    },
+    methods: {
+        onChange(e) {
+            if (e.key === "Enter") {
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText }
+                });
+                return;
+            }
+
+            fetch(
+                Constants.BASE_URL +
+                    "/suggestions?query=" +
+                    encodeURI(this.searchText + e.key)
+            )
+                .then(resp => resp.json())
+                .then(json => {
+                    this.searchSuggestions = json;
+                });
+        }
+    }
+};
+</script>
+
+<style>
+#app {
+    background: #0b0e0f;
+}
+
+::-webkit-scrollbar {
+    background-color: #15191a;
+    color: #c5bcae;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #4b4f52;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #5b6469;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #485053;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #0b0e0f;
+}
+
 * {
     scrollbar-color: #15191a #444a4e;
 }

src/components/SearchResults.vue

@@ -0,0 +1,71 @@
+<template>
+    <h1 class="uk-text-center">
+        {{ $route.query.search_query }}
+    </h1>
+
+    <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
+        <div
+            style="background: #0b0e0f"
+            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"
+        >
+            <div class="uk-text-secondary" style="background: #0b0e0f">
+                <router-link
+                    class="uk-text-emphasis"
+                    v-bind:to="result.url || '/'"
+                >
+                    <img style="width: 100%" v-bind:src="result.thumbnail" />
+                    <p>{{ result.name }}</p>
+                </router-link>
+                <router-link
+                    class="uk-link-muted"
+                    v-bind:to="result.uploaderUrl || '/'"
+                >
+                    <p>{{ result.uploaderName }}</p>
+                </router-link>
+                {{ result.duration ? timeFormat(result.duration) : "" }}
+                <b v-if="result.views" class="uk-text-small uk-align-right">
+                    <font-awesome-icon icon="eye"></font-awesome-icon>
+                    {{ result.views }} views
+                </b>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Constants from "@/Constants.js";
+
+export default {
+    data() {
+        return {
+            results: null
+        };
+    },
+    mounted() {
+        this.updateResults();
+    },
+    watch: {
+        "$route.query.search_query": function() {
+            this.updateResults();
+        }
+    },
+    methods: {
+        async fetchResults() {
+            return await (
+                await fetch(
+                    Constants.BASE_URL +
+                        "/search?q=" +
+                        encodeURIComponent(this.$route.query.search_query)
+                )
+            ).json();
+        },
+        async updateResults() {
+            this.results = this.fetchResults().then(
+                json => (this.results = json)
+            );
+        }
+    }
+};
+</script>

src/router/router.js

@@ -1,30 +1,35 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Watch from '../components/WatchVideo.vue'
-import Trending from '../components/TrendingPage.vue'
-import Channel from '../components/Channel.vue'
-import Preferences from '../components/Preferences.vue'
-
-const routes = [{
-    path: '/watch',
-    name: 'Watch',
-    component: Watch
-}, {
-    path: '/',
-    name: 'Trending',
-    component: Trending
-}, {
-    path: '/channel/:channelId',
-    name: 'Channel',
-    component: Channel
-}, {
-    path: '/preferences',
-    name: 'Preferences',
-    component: Preferences
-}]
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes
-})
-
-export default router
+import { createRouter, createWebHistory } from 'vue-router'
+import Watch from '../components/WatchVideo.vue'
+import Trending from '../components/TrendingPage.vue'
+import Channel from '../components/Channel.vue'
+import Preferences from '../components/Preferences.vue'
+import SearchResults from '../components/SearchResults.vue'
+
+const routes = [{
+    path: '/watch',
+    name: 'Watch',
+    component: Watch
+}, {
+    path: '/',
+    name: 'Trending',
+    component: Trending
+}, {
+    path: '/channel/:channelId',
+    name: 'Channel',
+    component: Channel
+}, {
+    path: '/preferences',
+    name: 'Preferences',
+    component: Preferences
+}, {
+    path: '/results',
+    name: 'SearchResults',
+    component: SearchResults
+}]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router