From bd189d4325a7e6057db3f55b4eff85cb6aa0354d Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Tue, 20 Jul 2021 13:23:08 +0530
Subject: [PATCH] Port

---
 package.json                     |   6 +-
 src/App.vue                      |  94 ++++++-----
 src/main.js                      |   4 +
 src/plugins/vuetify.js           |  14 ++
 src/router/index.js              |  72 ++++++++
 src/routes/Channel.vue           | 116 +++++++++++++
 src/routes/ErrorHandler.vue      |  16 ++
 src/routes/FeedPage.vue          |  83 ++++++++++
 src/routes/ImportPage.vue        | 129 +++++++++++++++
 src/routes/LoginPage.vue         |  66 ++++++++
 src/routes/Navigation.vue        | 104 ++++++++++++
 src/routes/Player.vue            | 271 +++++++++++++++++++++++++++++++
 src/routes/Playlist.vue          |  90 ++++++++++
 src/routes/Preferences.vue       | 250 ++++++++++++++++++++++++++++
 src/routes/RegisterPage.vue      |  66 ++++++++
 src/routes/SearchResults.vue     | 125 ++++++++++++++
 src/routes/SearchSuggestions.vue | 102 ++++++++++++
 src/routes/TrendingPage.vue      |  45 +++++
 src/routes/VideoItem.vue         |  55 +++++++
 src/routes/VideoRedirect.vue     |  17 ++
 src/routes/WatchVideo.vue        | 270 ++++++++++++++++++++++++++++++
 src/store/index.js               |  15 ++
 yarn.lock                        |  14 +-
 23 files changed, 1983 insertions(+), 41 deletions(-)
 create mode 100644 src/router/index.js
 create mode 100644 src/routes/Channel.vue
 create mode 100644 src/routes/ErrorHandler.vue
 create mode 100644 src/routes/FeedPage.vue
 create mode 100644 src/routes/ImportPage.vue
 create mode 100644 src/routes/LoginPage.vue
 create mode 100644 src/routes/Navigation.vue
 create mode 100644 src/routes/Player.vue
 create mode 100644 src/routes/Playlist.vue
 create mode 100644 src/routes/Preferences.vue
 create mode 100644 src/routes/RegisterPage.vue
 create mode 100644 src/routes/SearchResults.vue
 create mode 100644 src/routes/SearchSuggestions.vue
 create mode 100644 src/routes/TrendingPage.vue
 create mode 100644 src/routes/VideoItem.vue
 create mode 100644 src/routes/VideoRedirect.vue
 create mode 100644 src/routes/WatchVideo.vue
 create mode 100644 src/store/index.js

diff --git a/package.json b/package.json
index 9b8fdb8..b30c96d 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,15 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vuetify": "^2.4.0"
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.4.0",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
diff --git a/src/App.vue b/src/App.vue
index 376e855..684aff2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,60 +1,78 @@
 <template>
-  <v-app>
+  <v-app id="inspire">
     <v-app-bar
       app
       color="primary"
       dark
+      flat
     >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
+      <v-container class="py-0 fill-height">
+        <v-avatar
+          class="mr-10"
+          color="grey darken-1"
+          size="32"
+        ></v-avatar>
 
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
+        <v-btn
+          v-for="link in links"
+          :key="link.id"
+          text
+          link
+          :to="link.to"
+        >
+          {{ link.name }}
+        </v-btn>
 
-      <v-spacer></v-spacer>
+        <v-spacer></v-spacer>
 
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
+        <v-responsive max-width="720">
+          <v-text-field
+            dense
+            flat
+            hide-details
+            rounded
+            solo-inverted
+          ></v-text-field>
+        </v-responsive>
+      </v-container>
     </v-app-bar>
 
-    <v-main>
-      <HelloWorld/>
+    <v-main class="grey lighten-3">
+      <router-view v-slot="{ Component }">
+        <keep-alive :max="5">
+          <component :key="$route.fullPath" :is="Component" />
+        </keep-alive>
+      </router-view>
     </v-main>
   </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
-
 export default {
   name: 'App',
-
-  components: {
-    HelloWorld
-  },
-
   data: () => ({
-    //
+    links: [
+      {
+        id: 'prefs',
+        name: 'Preferences',
+        to: '/preferences'
+      },
+      {
+        id: 'login',
+        name: 'Login',
+        to: '/login'
+      },
+      {
+        id: 'register',
+        name: 'Register',
+        to: '/register'
+      },
+      {
+        id: 'feed',
+        name: 'Feed',
+        to: '/feed'
+      }
+    ]
   })
 }
 </script>
diff --git a/src/main.js b/src/main.js
index f26f408..e02a552 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
+import store from './store'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
   vuetify,
+  store,
+  router,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 496ec37..93c7fbf 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,7 +1,21 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib/framework'
+import colors from 'vuetify/es5/util/colors'
 
 Vue.use(Vuetify)
 
 export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: colors.deepPurple.base,
+        secondary: colors.purple.base,
+        accent: colors.pink.base,
+        error: colors.red.base,
+        warning: colors.deepOrange.base,
+        info: colors.blue.base,
+        success: colors.green.base
+      },
+    },
+  },
 })
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..ea8f44a
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,72 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import TrendingPage from '@/routes/TrendingPage'
+import Preferences from '@/routes/Preferences'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Trending',
+    component: TrendingPage
+  },
+  {
+    path: '/preferences',
+    name: 'Preferences',
+    component: Preferences
+  },
+  {
+    path: '/results',
+    name: 'SearchResults',
+    component: () => import('@/routes/SearchResults')
+  },
+  {
+    path: '/playlist',
+    name: 'Playlist',
+    component: () => import('@/routes/Playlist')
+  },
+  {
+    path: '/:path(v|w|embed|shorts|watch)/:v?',
+    name: 'WatchVideo',
+    component: () => import('@/routes/WatchVideo')
+  },
+  {
+    path: '/:path(channel|user|c)/:channelId/:videos?',
+    name: 'Channel',
+    component: () => import('@/routes/Channel')
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/routes/LoginPage')
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/routes/RegisterPage')
+  },
+  {
+    path: '/feed',
+    name: 'Feed',
+    component: () => import('@/routes/FeedPage')
+  },
+  {
+    path: '/import',
+    name: 'Import',
+    component: () => import('@/routes/ImportPage')
+  },
+  {
+    path: '/:videoId([a-zA-Z0-9_-]{11})',
+    component: () => import('@/routes/VideoRedirect')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue
new file mode 100644
index 0000000..11da53d
--- /dev/null
+++ b/src/routes/Channel.vue
@@ -0,0 +1,116 @@
+<template>
+    <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
+
+    <div v-if="channel" v-show="!channel.error">
+        <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
+        <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
+        <p style="white-space: pre-wrap">{{ channel.description }}</p>
+
+        <button
+            v-if="authenticated"
+            @click="subscribeHandler"
+            class="uk-button uk-button-small"
+            style="background: #222"
+            type="button"
+        >
+            {{ subscribed ? "Unsubscribe" : "Subscribe" }}
+        </button>
+
+        <hr />
+
+        <div class="uk-grid-xl" uk-grid="parallax: 0">
+            <div
+                class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
+                v-bind:key="video.url"
+                v-for="video in this.channel.relatedStreams"
+            >
+                <VideoItem :video="video" height="94" width="168" hideChannel />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ErrorHandler from '@/components/ErrorHandler.vue'
+import VideoItem from '@/components/VideoItem.vue'
+
+export default {
+  data () {
+    return {
+      channel: null,
+      subscribed: false
+    }
+  },
+  mounted () {
+    this.getChannelData()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    async fetchSubscribedStatus () {
+      this.fetchJson(
+        this.apiUrl() + '/subscribed',
+        {
+          channelId: this.channel.id
+        },
+        {
+          headers: {
+            Authorization: this.getAuthToken()
+          }
+        }
+      ).then(json => {
+        this.subscribed = json.subscribed
+      })
+    },
+    async fetchChannel () {
+      const url = this.apiUrl() + '/' + this.$route.params.path + '/' + this.$route.params.channelId
+      return await this.fetchJson(url)
+    },
+    async getChannelData () {
+      this.fetchChannel()
+        .then(data => (this.channel = data))
+        .then(() => {
+          if (!this.channel.error) {
+            document.title = this.channel.name + ' - Piped'
+            if (this.authenticated) this.fetchSubscribedStatus()
+          }
+        })
+    },
+    handleScroll () {
+      if (this.loading || !this.channel || !this.channel.nextpage) return
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        this.loading = true
+        this.fetchJson(this.apiUrl() + '/nextpage/channel/' + this.channel.id, {
+          nextpage: this.channel.nextpage
+        }).then(json => {
+          this.channel.relatedStreams.concat(json.relatedStreams)
+          this.channel.nextpage = json.nextpage
+          this.loading = false
+          json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream))
+        })
+      }
+    },
+    subscribeHandler () {
+      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
+        method: 'POST',
+        body: JSON.stringify({
+          channelId: this.channel.id
+        }),
+        headers: {
+          Authorization: this.getAuthToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+      this.subscribed = !this.subscribed
+    }
+  },
+  components: {
+    ErrorHandler,
+    VideoItem
+  }
+}
+</script>
diff --git a/src/routes/ErrorHandler.vue b/src/routes/ErrorHandler.vue
new file mode 100644
index 0000000..40b4c8c
--- /dev/null
+++ b/src/routes/ErrorHandler.vue
@@ -0,0 +1,16 @@
+<template>
+    <p>{{ message }}</p>
+    <button uk-toggle="target: #stacktrace" class="uk-button uk-button-small" style="background: #222" type="button">
+        Show More
+    </button>
+    <p id="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>
+</template>
+
+<script>
+export default {
+  props: {
+    error: String,
+    message: String
+  }
+}
+</script>
diff --git a/src/routes/FeedPage.vue b/src/routes/FeedPage.vue
new file mode 100644
index 0000000..e38c905
--- /dev/null
+++ b/src/routes/FeedPage.vue
@@ -0,0 +1,83 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Feed</h1>
+
+    <small>You can import subscriptions from <router-link to="/import">here</router-link>.</small>
+
+    <div class="uk-align-right">
+        <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
+    </div>
+
+    <hr />
+
+    <div 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="video.url"
+            v-for="video in videos"
+        >
+            <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
+                <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
+                    <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
+                    <p>{{ video.title }}</p>
+                </router-link>
+
+                <div>
+                    <div>
+                        <router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
+                            <a>{{ video.uploader }}</a>
+                        </router-link>
+                        <br />
+                    </div>
+                </div>
+
+                <b class="uk-text-small uk-align-left">
+                    <div v-if="video.views >= 0">
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        {{ numberFormat(video.views) }} views
+                        <br />
+                    </div>
+                    <div>
+                        {{ timeAgo(video.uploaded) }}
+                    </div>
+                </b>
+                <div class="uk-align-right">
+                    <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
+
+                    <br />
+
+                    <router-link :to="'/watch?v=' + video.id + '&listen=1'">
+                        <font-awesome-icon icon="headphones"></font-awesome-icon>
+                    </router-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      videos: []
+    }
+  },
+  mounted () {
+    document.title = 'Feed - Piped'
+
+    this.fetchFeed().then(videos => (this.videos = videos))
+  },
+  methods: {
+    async fetchFeed () {
+      return await this.fetchJson(this.apiUrl() + '/feed', {
+        authToken: this.getAuthToken()
+      })
+    }
+  },
+  computed: {
+    getRssUrl (_this) {
+      return _this.apiUrl() + '/feed/rss?authToken=' + _this.getAuthToken()
+    }
+  }
+}
+</script>
diff --git a/src/routes/ImportPage.vue b/src/routes/ImportPage.vue
new file mode 100644
index 0000000..ca6be9f
--- /dev/null
+++ b/src/routes/ImportPage.vue
@@ -0,0 +1,129 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input type="file" @change="fileChange" ref="fileSelector" />
+            </div>
+            <div class="uk-form-row">
+                <b>Selected Subscriptions: {{ selectedSubscriptions }}</b>
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="handleImport"
+                    >Import</a
+                >
+            </div>
+        </form>
+        <br />
+        <b>Importing Subscriptions from YouTube</b>
+        <br />
+        <div>
+            Open
+            <a href="https://takeout.google.com/takeout/custom/youtube">takeout.google.com/takeout/custom/youtube</a>
+            <br />
+            In "Select data to include", click on "All YouTube data included" and select only "subscriptions".
+            <br />
+            Create the export and download the zip file.
+            <br />
+            Extract subscriptions.json from the zip file.
+            <br />
+            Select and import the file above.
+        </div>
+        <br />
+        <b>Importing Subscriptions from Invidious</b>
+        <br />
+        <div>
+            Open
+            <a href="https://invidio.us/data_control">invidiou.us/data_control</a>
+            <br />
+            Click on any of the export options.
+            <br />
+            Select and import the file above.
+        </div>
+        <br />
+        <b>Importing Subscriptions from NewPipe</b>
+        <br />
+        <div>
+            Go to the Feed tab.
+            <br />
+            Click on the arrow on where it says "Subscriptions".
+            <br />
+            Save the file somewhere.
+            <br />
+            Select and import the file above.
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      subscriptions: []
+    }
+  },
+  computed: {
+    selectedSubscriptions () {
+      return this.subscriptions.length
+    }
+  },
+  activated () {
+    if (!this.authenticated) this.$router.push('/login')
+  },
+  methods: {
+    fileChange () {
+      this.$refs.fileSelector.files[0].text().then(text => {
+        this.subscriptions = []
+
+        // Invidious
+        if (text.indexOf('opml') !== -1) {
+          const parser = new DOMParser()
+          const xmlDoc = parser.parseFromString(text, 'text/xml')
+          xmlDoc.querySelectorAll('outline[xmlUrl]').forEach(item => {
+            const url = item.getAttribute('xmlUrl')
+            const id = url.substr(-24)
+            this.subscriptions.push(id)
+          })
+        }
+        // NewPipe
+        if (text.indexOf('app_version') !== -1) {
+          const json = JSON.parse(text)
+          json.subscriptions
+            .filter(item => item.service_id === 0)
+            .forEach(item => {
+              const url = item.url
+              const id = url.substr(-24)
+              this.subscriptions.push(id)
+            })
+        }
+        // Invidious JSON
+        if (text.indexOf('thin_mode') !== -1) {
+          const json = JSON.parse(text)
+          this.subscriptions = json.subscriptions
+        }
+        // Google Takeout
+        if (text.indexOf('contentDetails') !== -1) {
+          const json = JSON.parse(text)
+          json.forEach(item => {
+            const id = item.snippet.resourceId.channelId
+            this.subscriptions.push(id)
+          })
+        }
+      })
+    },
+    handleImport () {
+      this.fetchJson(this.apiUrl() + '/import', null, {
+        method: 'POST',
+        headers: {
+          Authorization: this.getAuthToken()
+        },
+        body: JSON.stringify(this.subscriptions)
+      }).then(json => {
+        if (json.message === 'ok') window.location = '/feed'
+      })
+    }
+  }
+}
+</script>
diff --git a/src/routes/LoginPage.vue b/src/routes/LoginPage.vue
new file mode 100644
index 0000000..20bae5c
--- /dev/null
+++ b/src/routes/LoginPage.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    type="text"
+                    v-model="username"
+                    autocomplete="username"
+                    placeholder="Username"
+                />
+            </div>
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
+                    type="password"
+                    v-model="password"
+                    autocomplete="password"
+                    placeholder="Password"
+                />
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="login"
+                    >Login</a
+                >
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      username: null,
+      password: null
+    }
+  },
+  mounted () {
+    // TODO: Add Server Side check
+    if (this.getAuthToken()) {
+      this.$router.push('/')
+    }
+  },
+  methods: {
+    login () {
+      console.log('authToken' + this.hashCode(this.apiUrl()))
+      this.fetchJson(this.apiUrl() + '/login', null, {
+        method: 'POST',
+        body: JSON.stringify({
+          username: this.username,
+          password: this.password
+        })
+      }).then(resp => {
+        if (resp.token) {
+          this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
+          window.location = '/' // done to bypass cache
+        } else alert(resp.error)
+      })
+    }
+  }
+}
+</script>
diff --git a/src/routes/Navigation.vue b/src/routes/Navigation.vue
new file mode 100644
index 0000000..03405a7
--- /dev/null
+++ b/src/routes/Navigation.vue
@@ -0,0 +1,104 @@
+<template>
+    <nav
+        class="uk-navbar-container uk-container-expand uk-position-relative"
+        :style="[{ background: backgroundColor, colour: foregroundColor }]"
+        uk-navbar
+    >
+        <div class="uk-navbar-left">
+            <router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
+                ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" style="margin-bottom: 6px; margin-right: -13px" />iped</router-link
+            >
+        </div>
+        <div class="uk-navbar-center uk-flex uk-visible@m">
+            <input
+                class="uk-input uk-width-medium"
+                type="text"
+                placeholder="Search"
+                v-model="searchText"
+                @keyup="onKeyUp"
+                @focus="onInputFocus"
+                @blur="onInputBlur"
+            />
+        </div>
+        <div class="uk-navbar-right">
+            <ul class="uk-navbar-nav">
+                <li>
+                    <router-link to="/preferences">Preferences</router-link>
+                </li>
+                <li v-if="shouldShowLogin">
+                    <router-link to="/login">Login</router-link>
+                </li>
+                <li v-if="shouldShowLogin">
+                    <router-link to="/register">Register</router-link>
+                </li>
+                <li v-if="authenticated">
+                    <router-link to="/feed">Feed</router-link>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <div class="uk-container-expand uk-hidden@m">
+        <input
+            class="uk-input"
+            type="text"
+            placeholder="Search"
+            v-model="searchText"
+            @keyup="onKeyUp"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+        />
+    </div>
+    <SearchSuggestions
+        v-show="searchText && suggestionsVisible"
+        :searchText="searchText"
+        @searchchange="onSearchTextChange"
+        ref="searchSuggestions"
+    />
+</template>
+
+<script>
+import SearchSuggestions from '@/components/SearchSuggestions'
+
+export default {
+  components: {
+    SearchSuggestions
+  },
+  data () {
+    return {
+      searchText: '',
+      suggestionsVisible: false
+    }
+  },
+  computed: {
+    shouldShowLogin (_this) {
+      return _this.getAuthToken() == null
+    }
+  },
+  methods: {
+    onKeyUp (e) {
+      if (e.key === 'Enter') {
+        e.target.blur()
+        this.$router.push({
+          name: 'SearchResults',
+          query: { search_query: this.searchText }
+        })
+        return
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault()
+      }
+      this.$refs.searchSuggestions.onKeyUp(e)
+    },
+    onInputFocus () {
+      this.suggestionsVisible = true
+    },
+    onInputBlur () {
+      this.suggestionsVisible = false
+    },
+    onSearchTextChange (searchText) {
+      this.searchText = searchText
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/routes/Player.vue b/src/routes/Player.vue
new file mode 100644
index 0000000..21b7f6e
--- /dev/null
+++ b/src/routes/Player.vue
@@ -0,0 +1,271 @@
+<template>
+    <div class="uk-container-expand">
+        <div
+            data-shaka-player-container
+            style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px; background: #000"
+            ref="container"
+        >
+            <video
+                data-shaka-player
+                class="uk-width-expand"
+                :autoplay="shouldAutoPlay"
+                :loop="selectedAutoLoop"
+                ref="videoEl"
+            ></video>
+        </div>
+    </div>
+</template>
+
+<script>
+import muxjs from 'mux.js'
+import shaka from 'shaka-player/dist/shaka-player.ui.js'
+import('shaka-player/dist/controls.css')
+window.muxjs = muxjs
+
+export default {
+  props: {
+    video: Object,
+    sponsors: Object,
+    selectedAutoPlay: Boolean,
+    selectedAutoLoop: Boolean
+  },
+  data () {
+    return {
+      player: null
+    }
+  },
+  computed: {
+    shouldAutoPlay: _this => {
+      return _this.getPreferenceBoolean('playerAutoPlay', true)
+    }
+  },
+  mounted () {
+    if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka))
+  },
+  methods: {
+    loadVideo () {
+      const component = this
+      const videoEl = this.$refs.videoEl
+
+      videoEl.setAttribute('poster', this.video.thumbnailUrl)
+
+      if (this.$route.query.t) videoEl.currentTime = this.$route.query.t
+
+      const noPrevPlayer = !this.player
+
+      const streams = []
+
+      streams.push(...this.video.audioStreams)
+      streams.push(...this.video.videoStreams)
+
+      const MseSupport = window.MediaSource !== undefined
+
+      let uri
+
+      if (this.video.livestream) {
+        uri = this.video.hls
+      } else if (this.video.audioStreams.length > 0 && MseSupport) {
+        const dash = require('@/utils/DashUtils.js').default.generate_dash_file_from_formats(
+          streams,
+          this.video.duration
+        )
+
+        uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash)
+      } else {
+        uri = this.video.videoStreams.filter(stream => stream.codec == null).slice(-1)[0].url
+      }
+
+      if (noPrevPlayer) {
+        this.shakaPromise.then(() => {
+          this.shaka.polyfill.installAll()
+
+          const localPlayer = new this.shaka.Player(videoEl)
+
+          localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
+            const uri = request.uris[0]
+            const url = new URL(uri)
+            if (url.host.endsWith('.googlevideo.com')) {
+              url.searchParams.set('host', url.host)
+              url.host = new URL(component.video.proxyUrl).host
+              request.uris[0] = url.toString()
+            }
+          })
+
+          localPlayer.configure(
+            'streaming.bufferingGoal',
+            Math.max(this.getPreferenceNumber('bufferGoal', 10), 10)
+          )
+
+          this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka)
+        })
+      } else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka)
+
+      if (noPrevPlayer) {
+        videoEl.addEventListener('timeupdate', () => {
+          if (this.sponsors && this.sponsors.segments) {
+            const time = videoEl.currentTime
+            this.sponsors.segments.forEach(segment => {
+              if (!segment.skipped || this.selectedAutoLoop) {
+                const end = segment.segment[1]
+                if (time >= segment.segment[0] && time < end) {
+                  console.log('Skipped segment at ' + time)
+                  videoEl.currentTime = end
+                  segment.skipped = true
+                }
+              }
+            })
+          }
+        })
+
+        videoEl.addEventListener('volumechange', () => {
+          this.setPreference('volume', videoEl.volume)
+        })
+
+        videoEl.addEventListener('ended', () => {
+          if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
+            const params = this.$route.query
+            let url = this.video.relatedStreams[0].url
+            const searchParams = new URLSearchParams()
+            for (const param in params) {
+              switch (param) {
+                case 'v':
+                case 't':
+                  break
+                default:
+                  searchParams.set(param, params[param])
+                  break
+              }
+            }
+            const paramStr = searchParams.toString()
+            if (paramStr.length > 0) url += '&' + paramStr
+            this.$router.push(url)
+          }
+        })
+      }
+
+      // TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
+    },
+    setPlayerAttrs (localPlayer, videoEl, uri, shaka) {
+      if (!this.ui) {
+        this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl)
+
+        const config = {
+          overflowMenuButtons: ['quality', 'captions', 'picture_in_picture', 'playback_rate'],
+          seekBarColors: {
+            base: 'rgba(255, 255, 255, 0.3)',
+            buffered: 'rgba(255, 255, 255, 0.54)',
+            played: 'rgb(255, 0, 0)'
+          }
+        }
+
+        this.ui.configure(config)
+      }
+
+      const player = this.ui.getControls().getPlayer()
+
+      this.player = player
+
+      const disableVideo = this.getPreferenceBoolean('listen', false) && !this.video.livestream
+
+      this.player.configure({
+        preferredVideoCodecs: ['av01', 'vp9', 'avc1'],
+        preferredAudioCodecs: ['opus', 'mp4a'],
+        manifest: {
+          disableVideo: disableVideo
+        }
+      })
+
+      const quality = this.getPreferenceNumber('quality', 0)
+      const qualityConds =
+                quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
+      if (qualityConds) this.player.configure('abr.enabled', false)
+
+      player.load(uri, 0, uri.indexOf('dash+xml') >= 0 ? 'application/dash+xml' : 'video/mp4').then(() => {
+        if (qualityConds) {
+          let leastDiff = Number.MAX_VALUE
+          let bestStream = null
+          player
+            .getVariantTracks()
+            .sort((a, b) => a.bandwidth - b.bandwidth)
+            .forEach(stream => {
+              const diff = Math.abs(quality - stream.height)
+              if (diff < leastDiff) {
+                leastDiff = diff
+                bestStream = stream
+              }
+            })
+          player.selectVariantTrack(bestStream)
+        }
+
+        this.video.subtitles.forEach(subtitle => {
+          player.addTextTrackAsync(
+            subtitle.url,
+            subtitle.code,
+            'SUBTITLE',
+            subtitle.mimeType,
+            null,
+            subtitle.name
+          )
+        })
+        videoEl.volume = this.getPreferenceNumber('volume', 1)
+      })
+    }
+  },
+  activated () {
+    import('hotkeys-js')
+      .then(mod => mod.default)
+      .then(hotkeys => {
+        this.hotkeys = hotkeys
+        const self = this
+        hotkeys('f,m,space,up,down,left,right', function (e, handler) {
+          const videoEl = self.$refs.videoEl
+          switch (handler.key) {
+            case 'f':
+              if (document.fullscreenElement) document.exitFullscreen()
+              else self.$refs.container.requestFullscreen()
+              e.preventDefault()
+              break
+            case 'm':
+              videoEl.muted = !videoEl.muted
+              e.preventDefault()
+              break
+            case 'space':
+              if (videoEl.paused) videoEl.play()
+              else videoEl.pause()
+              e.preventDefault()
+              break
+            case 'up':
+              videoEl.volume = Math.min(videoEl.volume + 0.05, 1)
+              e.preventDefault()
+              break
+            case 'down':
+              videoEl.volume = Math.max(videoEl.volume - 0.05, 0)
+              e.preventDefault()
+              break
+            case 'left':
+              videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0)
+              e.preventDefault()
+              break
+            case 'right':
+              videoEl.currentTime = videoEl.currentTime + 5
+              e.preventDefault()
+              break
+          }
+        })
+      })
+  },
+  deactivated () {
+    if (this.ui) {
+      this.ui.destroy()
+      this.ui = undefined
+      this.player = undefined
+    }
+    if (this.player) {
+      this.player.destroy()
+      this.player = undefined
+    }
+    if (this.hotkeys) this.hotkeys.unbind()
+    this.$refs.container.querySelectorAll('div').forEach(node => node.remove())
+  }
+}
+</script>
diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue
new file mode 100644
index 0000000..2015bae
--- /dev/null
+++ b/src/routes/Playlist.vue
@@ -0,0 +1,90 @@
+<template>
+    <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
+
+    <div v-if="playlist" v-show="!playlist.error">
+        <h1 class="uk-text-center">
+            <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
+            {{ playlist.name }}
+        </h1>
+
+        <b
+            ><router-link class="uk-text-justify" v-bind:to="playlist.uploaderUrl || '/'">
+                <img v-bind:src="playlist.uploaderAvatar" loading="lazy" />
+                {{ playlist.uploader }}</router-link
+            ></b
+        >
+
+        <div class="uk-align-right">
+            <b>{{ playlist.videos }} Videos</b>
+            <br />
+            <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
+        </div>
+
+        <hr />
+
+        <div class="uk-grid-xl" uk-grid="parallax: 0">
+            <div
+                class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
+                v-bind:key="video.url"
+                v-for="video in this.playlist.relatedStreams"
+            >
+                <VideoItem :video="video" height="94" width="168" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ErrorHandler from '@/components/ErrorHandler.vue'
+import VideoItem from '@/components/VideoItem.vue'
+
+export default {
+  data () {
+    return {
+      playlist: null
+    }
+  },
+  mounted () {
+    this.getPlaylistData()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  computed: {
+    getRssUrl: _this => {
+      return _this.apiUrl() + '/rss/playlists/' + _this.$route.query.list
+    }
+  },
+  methods: {
+    async fetchPlaylist () {
+      return await await this.fetchJson(this.apiUrl() + '/playlists/' + this.$route.query.list)
+    },
+    async getPlaylistData () {
+      this.fetchPlaylist()
+        .then(data => (this.playlist = data))
+        .then(() => (document.title = this.playlist.name + ' - Piped'))
+    },
+    handleScroll () {
+      if (this.loading || !this.playlist || !this.playlist.nextpage) return
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        this.loading = true
+        this.fetchJson(this.apiUrl() + '/nextpage/playlists/' + this.$route.query.list, {
+          nextpage: this.playlist.nextpage
+        }).then(json => {
+          this.playlist.relatedStreams.concat(json.relatedStreams)
+          this.playlist.nextpage = json.nextpage
+          this.loading = false
+          json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream))
+        })
+      }
+    }
+  },
+  components: {
+    ErrorHandler,
+    VideoItem
+  }
+}
+</script>
diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue
new file mode 100644
index 0000000..25872eb
--- /dev/null
+++ b/src/routes/Preferences.vue
@@ -0,0 +1,250 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Preferences</h1>
+    <hr />
+    <h2>SponsorBlock</h2>
+    <p>Uses the API from <a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
+    <b>Enable Sponsorblock</b>
+    <br />
+    <input class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Sponsors</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Intermission/Intro Animation</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Endcards/Credits</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Preview/Recap</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Interaction Reminder (Subscribe)</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Unpaid/Self Promotion</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Skip Music: Non-Music Section</b>
+    <br />
+    <input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Theme</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
+        <option value="auto">Auto</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+    </select>
+    <br />
+    <b>Autoplay Video</b>
+    <br />
+    <input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Audio Only</b>
+    <br />
+    <input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Default Quality</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
+        <option value="0">Auto</option>
+        <option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
+    </select>
+    <br />
+    <b>Buffering Goal</b>
+    <br />
+    <input class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
+    <br />
+    <b>Country Selection</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
+        <option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
+    </select>
+    <br />
+    <b>Default Homepage</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
+        <option value="trending">Trending</option>
+        <option value="feed">Feed</option>
+    </select>
+    <br />
+    <b>Show Comments</b>
+    <br />
+    <input class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
+    <h2>Instances List</h2>
+    <table class="uk-table">
+        <thead>
+            <tr>
+                <th>Instance Name</th>
+                <th>Instance Locations</th>
+                <th>Has CDN?</th>
+                <th>SSL Score</th>
+            </tr>
+        </thead>
+        <tbody v-bind:key="instance.name" v-for="instance in instances">
+            <tr>
+                <td>{{ instance.name }}</td>
+                <td>{{ instance.locations }}</td>
+                <td>{{ instance.cdn }}</td>
+                <td>
+                    <a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <hr />
+
+    <b>Instance Selection:</b>
+    <br />
+    <select class="uk-select uk-width-auto" v-model="selectedInstance" @change="onChange($event)">
+        <option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
+            {{ instance.name }}
+        </option>
+    </select>
+</template>
+
+<script>
+import CountryMap from '@/utils/CountryMap.js'
+export default {
+  data () {
+    return {
+      selectedInstance: null,
+      instances: [],
+      sponsorBlock: true,
+      skipSponsor: true,
+      skipIntro: false,
+      skipOutro: false,
+      skipPreview: false,
+      skipInteraction: true,
+      skipSelfPromo: true,
+      skipMusicOffTopic: true,
+      selectedTheme: 'dark',
+      autoPlayVideo: true,
+      listen: false,
+      resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
+      defaultQuality: 0,
+      bufferingGoal: 10,
+      countryMap: CountryMap.COUNTRIES,
+      country: 'US',
+      defaultHomepage: 'trending',
+      showComments: true
+    }
+  },
+  mounted () {
+    if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} })
+
+    fetch('https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md')
+      .then(resp => resp.text())
+      .then(body => {
+        let skipped = 0
+        const lines = body.split('\n')
+        lines.forEach(line => {
+          const split = line.split('|')
+          if (split.length === 4) {
+            if (skipped < 2) {
+              skipped++
+              return
+            }
+            this.instances.push({
+              name: split[0].trim(),
+              apiurl: split[1].trim(),
+              locations: split[2].trim(),
+              cdn: split[3].trim()
+            })
+          }
+        })
+      })
+
+    if (localStorage) {
+      this.selectedInstance = this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks')
+
+      this.sponsorBlock = this.getPreferenceBoolean('sponsorblock', true)
+      if (localStorage.getItem('selectedSkip') !== null) {
+        const skipList = localStorage.getItem('selectedSkip').split(',')
+        this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false
+        skipList.forEach(skip => {
+          switch (skip) {
+            case 'sponsor':
+              this.skipSponsor = true
+              break
+            case 'intro':
+              this.skipIntro = true
+              break
+            case 'outro':
+              this.skipOutro = true
+              break
+            case 'preview':
+              this.skipPreview = true
+              break
+            case 'interaction':
+              this.skipInteraction = true
+              break
+            case 'selfpromo':
+              this.skipSelfPromo = true
+              break
+            case 'music_offtopic':
+              this.skipMusicOffTopic = true
+              break
+            default:
+              console.log('Unknown sponsor type: ' + skip)
+              break
+          }
+        })
+      }
+
+      this.selectedTheme = this.getPreferenceString('theme', 'dark')
+      this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem('playerAutoPlay'), true)
+      this.listen = this.getPreferenceBoolean('listen', false)
+      this.defaultQuality = Number(localStorage.getItem('quality'))
+      this.bufferingGoal = Math.max(Number(localStorage.getItem('bufferGoal')), 10)
+      this.country = this.getPreferenceString('region', 'US')
+      this.defaultHomepage = this.getPreferenceString('homepage', 'trending')
+      this.showComments = this.getPreferenceBoolean('comments', true)
+    }
+  },
+  methods: {
+    onChange () {
+      if (localStorage) {
+        let shouldReload = false
+
+        if (this.getPreferenceString('theme', 'dark') !== this.selectedTheme) shouldReload = true
+
+        localStorage.setItem('instance', this.selectedInstance)
+        localStorage.setItem('sponsorblock', this.sponsorBlock)
+
+        const sponsorSelected = []
+        if (this.skipSponsor) sponsorSelected.push('sponsor')
+        if (this.skipIntro) sponsorSelected.push('intro')
+        if (this.skipOutro) sponsorSelected.push('outro')
+        if (this.skipPreview) sponsorSelected.push('preview')
+        if (this.skipInteraction) sponsorSelected.push('interaction')
+        if (this.skipSelfPromo) sponsorSelected.push('selfpromo')
+        if (this.skipMusicOffTopic) sponsorSelected.push('music_offtopic')
+        localStorage.setItem('selectedSkip', sponsorSelected)
+
+        localStorage.setItem('theme', this.selectedTheme)
+        localStorage.setItem('playerAutoPlay', this.autoPlayVideo)
+        localStorage.setItem('listen', this.listen)
+        localStorage.setItem('quality', this.defaultQuality)
+        localStorage.setItem('bufferGoal', this.bufferingGoal)
+        localStorage.setItem('region', this.country)
+        localStorage.setItem('homepage', this.defaultHomepage)
+        localStorage.setItem('comments', this.showComments)
+
+        if (shouldReload) window.location.reload()
+      }
+    },
+    sslScore (url) {
+      return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest'
+    }
+  }
+}
+</script>
diff --git a/src/routes/RegisterPage.vue b/src/routes/RegisterPage.vue
new file mode 100644
index 0000000..baf067e
--- /dev/null
+++ b/src/routes/RegisterPage.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="uk-vertical-align uk-text-center uk-height-1-1 ">
+        <form class="uk-panel uk-panel-box">
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input uk-width-auto"
+                    type="text"
+                    v-model="username"
+                    autocomplete="username"
+                    placeholder="Username"
+                />
+            </div>
+            <div class="uk-form-row">
+                <input
+                    class="uk-width-1-1 uk-form-large uk-input  uk-width-auto"
+                    type="password"
+                    v-model="password"
+                    autocomplete="password"
+                    placeholder="Password"
+                />
+            </div>
+            <div class="uk-form-row">
+                <a
+                    class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-width-auto"
+                    style="background: #222"
+                    @click="register"
+                    >Register</a
+                >
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      username: null,
+      password: null
+    }
+  },
+  mounted () {
+    // TODO: Add Server Side check
+    if (this.getAuthToken()) {
+      this.$router.push('/')
+    }
+  },
+  methods: {
+    register () {
+      console.log('authToken' + this.hashCode(this.apiUrl()))
+      this.fetchJson(this.apiUrl() + '/register', null, {
+        method: 'POST',
+        body: JSON.stringify({
+          username: this.username,
+          password: this.password
+        })
+      }).then(resp => {
+        if (resp.token) {
+          this.setPreference('authToken' + this.hashCode(this.apiUrl()), resp.token)
+          window.location = '/' // done to bypass cache
+        } else alert(resp.error)
+      })
+    }
+  }
+}
+</script>
diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue
new file mode 100644
index 0000000..0f9fdc2
--- /dev/null
+++ b/src/routes/SearchResults.vue
@@ -0,0 +1,125 @@
+<template>
+    <h1 class="uk-text-center">
+        {{ $route.query.search_query }}
+    </h1>
+
+    <b>Filter: </b>
+    <select
+        default="all"
+        class="uk-select uk-width-auto"
+        style="height: 100%"
+        v-model="selectedFilter"
+        @change="updateResults()"
+    >
+        <option v-bind:key="filter" v-for="filter in availableFilters" v-bind:value="filter">
+            {{ filter.replace("_", " ") }}
+        </option>
+    </select>
+
+    <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>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      results: null,
+      availableFilters: [
+        'all',
+        'videos',
+        'channels',
+        'playlists',
+        'music_songs',
+        'music_videos',
+        'music_albums',
+        'music_playlists'
+      ],
+      selectedFilter: 'all'
+    }
+  },
+  mounted () {
+    this.updateResults()
+  },
+  activated () {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    async fetchResults () {
+      return await await this.fetchJson(this.apiUrl() + '/search', {
+        q: this.$route.query.search_query,
+        filter: this.selectedFilter
+      })
+    },
+    async updateResults () {
+      document.title = this.$route.query.search_query + ' - Piped'
+      this.results = this.fetchResults().then(json => (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', {
+          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))
+        })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/routes/SearchSuggestions.vue b/src/routes/SearchSuggestions.vue
new file mode 100644
index 0000000..10ce3c5
--- /dev/null
+++ b/src/routes/SearchSuggestions.vue
@@ -0,0 +1,102 @@
+<template>
+    <div
+        class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container"
+        :style="[{ background: secondaryBackgroundColor }]"
+    >
+        <ul class="uk-list uk-margin-remove uk-text-secondary">
+            <li
+                v-for="(suggestion, i) in searchSuggestions"
+                :key="i"
+                :style="[selected === i ? { background: secondaryForegroundColor } : {}]"
+                @mouseover="onMouseOver(i)"
+                @mousedown.stop="onClick(i)"
+                class="uk-margin-remove suggestion"
+            >
+                {{ suggestion }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    searchText: String
+  },
+  data () {
+    return {
+      selected: 0,
+      searchSuggestions: []
+    }
+  },
+  methods: {
+    onKeyUp (e) {
+      if (e.key === 'ArrowUp') {
+        if (this.selected <= 0) {
+          this.setSelected(this.searchSuggestions.length - 1)
+        } else {
+          this.setSelected(this.selected - 1)
+        }
+        e.preventDefault()
+      } else if (e.key === 'ArrowDown') {
+        if (this.selected >= this.searchSuggestions.length - 1) {
+          this.setSelected(0)
+        } else {
+          this.setSelected(this.selected + 1)
+        }
+        e.preventDefault()
+      } else {
+        this.refreshSuggestions()
+      }
+    },
+    async refreshSuggestions () {
+      this.searchSuggestions = await this.fetchJson(this.apiUrl() + '/suggestions', {
+        query: this.searchText
+      })
+      this.searchSuggestions.unshift(this.searchText)
+      this.setSelected(0)
+    },
+    onMouseOver (i) {
+      if (i !== this.selected) {
+        this.selected = i
+      }
+    },
+    onClick (i) {
+      this.setSelected(i)
+      this.$router.push({
+        name: 'SearchResults',
+        query: { search_query: this.searchSuggestions[i] }
+      })
+    },
+    setSelected (val) {
+      this.selected = val
+      this.$emit('searchchange', this.searchSuggestions[this.selected])
+    }
+  }
+}
+</script>
+
+<style>
+.suggestions-container {
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 640px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px 0;
+    z-index: 10;
+}
+.suggestion {
+    padding: 4px 15px;
+}
+@media screen and (max-width: 959px) {
+    .suggestions-container {
+        max-width: calc(100% - 60px);
+    }
+}
+@media screen and (max-width: 639px) {
+    .suggestions-container {
+        max-width: calc(100% - 30px);
+    }
+}
+</style>
diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue
new file mode 100644
index 0000000..b0fb2fe
--- /dev/null
+++ b/src/routes/TrendingPage.vue
@@ -0,0 +1,45 @@
+<template>
+    <h1 class="uk-text-bold uk-text-center">Trending</h1>
+
+    <hr />
+
+    <div 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="video.url"
+            v-for="video in videos"
+        >
+            <VideoItem :video="video" height="118" width="210" />
+        </div>
+    </div>
+</template>
+
+<script>
+import VideoItem from '@/components/VideoItem.vue'
+
+export default {
+  data () {
+    return {
+      videos: []
+    }
+  },
+  mounted () {
+    document.title = 'Trending - Piped'
+
+    const region = this.getPreferenceString('region', 'US')
+
+    this.fetchTrending(region).then(videos => (this.videos = videos))
+  },
+  methods: {
+    async fetchTrending (region) {
+      return await this.fetchJson(this.apiUrl() + '/trending', {
+        region: region || 'US'
+      })
+    }
+  },
+  components: {
+    VideoItem
+  }
+}
+</script>
diff --git a/src/routes/VideoItem.vue b/src/routes/VideoItem.vue
new file mode 100644
index 0000000..c2dab8b
--- /dev/null
+++ b/src/routes/VideoItem.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
+        <router-link class="uk-text-emphasis" v-bind:to="video.url">
+            <img
+                :height="height"
+                :width="width"
+                style="width: 100%"
+                v-bind:src="video.thumbnail"
+                alt="thumbnail"
+                loading="lazy"
+            />
+            <p>{{ video.title }}</p>
+        </router-link>
+
+        <div :class="{ 'uk-align-left': !(video.views >= 0 || video.uploadedDate) }">
+            <div v-if="video.uploaderUrl && video.uploaderName && !hideChannel">
+                <router-link class="uk-link-muted" :to="video.uploaderUrl">
+                    <a>{{ video.uploaderName }}</a>
+                </router-link>
+                <br />
+            </div>
+        </div>
+
+        <b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small uk-align-left">
+            <div v-if="video.views >= 0">
+                <font-awesome-icon icon="eye"></font-awesome-icon>
+                {{ numberFormat(video.views) }} views
+                <br />
+            </div>
+            <div v-if="video.uploadedDate">
+                {{ video.uploadedDate }}
+            </div>
+        </b>
+        <div class="uk-align-right">
+            <b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
+
+            <br />
+
+            <router-link :to="video.url + '&listen=1'">
+                <font-awesome-icon icon="headphones"></font-awesome-icon>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    video: Object,
+    height: String,
+    width: String,
+    hideChannel: Boolean
+  }
+}
+</script>
diff --git a/src/routes/VideoRedirect.vue b/src/routes/VideoRedirect.vue
new file mode 100644
index 0000000..7fb05a0
--- /dev/null
+++ b/src/routes/VideoRedirect.vue
@@ -0,0 +1,17 @@
+<template>
+    <div>Loading...</div>
+</template>
+
+<script>
+export default {
+  activated () {
+    const videoId = this.$route.params.videoId
+    if (videoId) {
+      this.$router.push({
+        path: '/watch',
+        query: { v: videoId }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
new file mode 100644
index 0000000..580c0d7
--- /dev/null
+++ b/src/routes/WatchVideo.vue
@@ -0,0 +1,270 @@
+<template>
+    <div class="uk-container uk-container-xlarge" v-if="video">
+        <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
+
+        <div v-show="!video.error">
+            <Player
+                ref="videoPlayer"
+                :video="video"
+                :sponsors="sponsors"
+                :selectedAutoPlay="selectedAutoPlay"
+                :selectedAutoLoop="selectedAutoLoop"
+            />
+            <div class="uk-text-bold uk-margin-small-top uk-text-large uk-text-emphasis">{{ video.title }}</div>
+
+            <div class="uk-flex uk-flex-middle">
+                <div class="uk-margin-small-right">{{ addCommas(video.views) }} views</div>
+                <div class="uk-margin-small-right">{{ video.uploadDate }}</div>
+                <div class="uk-flex-1"></div>
+                <div class="uk-margin-small-left">
+                    <font-awesome-icon class="uk-margin-small-right" icon="thumbs-up"></font-awesome-icon>
+                    <b>{{ addCommas(video.likes) }}</b>
+                </div>
+                <div class="uk-margin-small-left">
+                    <font-awesome-icon class="uk-margin-small-right" icon="thumbs-down"></font-awesome-icon>
+                    <b>{{ addCommas(video.dislikes) }}</b>
+                </div>
+                <a
+                    :href="'https://youtu.be/' + getVideoId()"
+                    class="uk-margin-small-left uk-button uk-button-small"
+                    style="background: #222"
+                >
+                    <font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
+                    <b>Watch on</b>
+                </a>
+            </div>
+
+            <div class="uk-flex uk-flex-middle uk-margin-small-top">
+                <img :src="video.uploaderAvatar" loading="lazy" />
+                <router-link class="uk-text-bold uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
+                    <a>{{ video.uploader }}</a>
+                </router-link>
+                <div class="uk-flex-1"></div>
+                <button
+                    v-if="authenticated"
+                    @click="subscribeHandler"
+                    class="uk-button uk-button-small"
+                    style="background: #222"
+                    type="button"
+                >
+                    {{ subscribed ? "Unsubscribe" : "Subscribe" }}
+                </button>
+            </div>
+
+            <hr />
+
+            <a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
+                {{ showDesc ? "Minimize Description" : "Show Description" }}
+            </a>
+            <p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="video.description"></p>
+            <div v-if="showDesc && sponsors && sponsors.segments">
+                Sponsors Segments: {{ sponsors.segments.length }}
+            </div>
+        </div>
+
+        <hr />
+
+        <b>Loop this Video:</b>&nbsp;
+        <input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
+        <br />
+        <b>Auto Play next Video:</b>&nbsp;
+        <input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
+
+        <hr />
+
+        <div uk-grid>
+            <div class="uk-width-4-5@xl uk-width-3-4@l uk-width-1" v-if="comments" ref="comments">
+                <div
+                    class="uk-tile-default uk-align-left uk-width-expand"
+                    :style="[{ background: backgroundColor }]"
+                    v-bind:key="comment.commentId"
+                    v-for="comment in comments.comments"
+                >
+                    <div align="left">
+                        <div v-if="comment.pinned">
+                            <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; Pinned by
+                            {{ video.uploader }}
+                        </div>
+                        <img
+                            :src="comment.thumbnail"
+                            style="width: 10vmin"
+                            height="176"
+                            width="176"
+                            loading="lazy"
+                            alt="avatar"
+                        />
+                        <br />
+                        <router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
+                            {{ comment.author }} </router-link
+                        >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
+                    </div>
+                    <p style="white-space: pre-wrap">{{ comment.commentText }}</p>
+                    <div>
+                        <b>{{ numberFormat(comment.likeCount) }}</b>
+                        &nbsp;
+                        <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+                        &nbsp;
+                        <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
+                    </div>
+                    <hr />
+                </div>
+            </div>
+
+            <div class="uk-width-1-5@xl uk-width-1-4@l uk-width-1 uk-flex-last@l uk-flex-first" v-if="video">
+                <div
+                    class="uk-tile-default uk-width-auto"
+                    :style="[{ background: backgroundColor }]"
+                    v-bind:key="related.url"
+                    v-for="related in video.relatedStreams"
+                >
+                    <VideoItem :video="related" height="94" width="168" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Player from '@/components/Player.vue'
+import VideoItem from '@/components/VideoItem.vue'
+import ErrorHandler from '@/components/ErrorHandler.vue'
+
+export default {
+  name: 'App',
+  data () {
+    return {
+      video: {
+        title: 'Loading...'
+      },
+      sponsors: null,
+      selectedAutoLoop: false,
+      selectedAutoPlay: null,
+      showDesc: true,
+      comments: null,
+      subscribed: false,
+      channelId: null
+    }
+  },
+  mounted () {
+    this.getVideoData().then(() => {
+      this.$refs.videoPlayer.loadVideo()
+    })
+    this.getSponsors()
+    if (this.getPreferenceBoolean('comments', true)) this.getComments()
+  },
+  activated () {
+    this.selectedAutoPlay = this.getPreferenceBoolean('autoplay', true)
+    if (this.video.duration) this.$refs.videoPlayer.loadVideo()
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  deactivated () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  watch: {
+    '$route.query.v': function (v) {
+      if (v) {
+        window.scrollTo(0, 0)
+      }
+    }
+  },
+  methods: {
+    fetchVideo () {
+      return this.fetchJson(this.apiUrl() + '/streams/' + this.getVideoId())
+    },
+    async fetchSponsors () {
+      return await this.fetchJson(this.apiUrl() + '/sponsors/' + this.getVideoId(), {
+        category:
+                    '["' +
+                    this.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
+                      ',',
+                      '","'
+                    ) +
+                    '"]'
+      })
+    },
+    fetchComments () {
+      return this.fetchJson(this.apiUrl() + '/comments/' + this.getVideoId())
+    },
+    onChange () {
+      this.setPreference('autoplay', this.selectedAutoPlay)
+    },
+    async getVideoData () {
+      await this.fetchVideo()
+        .then(data => {
+          this.video = data
+        })
+        .then(() => {
+          if (!this.video.error) {
+            document.title = this.video.title + ' - Piped'
+            this.channelId = this.video.uploaderUrl.split('/')[2]
+            this.fetchSubscribedStatus()
+
+            this.video.description = this.purifyHTML(
+              this.video.description
+                .replaceAll('http://www.youtube.com', '')
+                .replaceAll('https://www.youtube.com', '')
+                .replaceAll('\n', '<br>')
+            )
+          }
+        })
+    },
+    async getSponsors () {
+      if (this.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
+    },
+    async getComments () {
+      this.fetchComments().then(data => (this.comments = data))
+    },
+    async fetchSubscribedStatus () {
+      if (!this.channelId) return
+
+      this.fetchJson(
+        this.apiUrl() + '/subscribed',
+        {
+          channelId: this.channelId
+        },
+        {
+          headers: {
+            Authorization: this.getAuthToken()
+          }
+        }
+      ).then(json => {
+        this.subscribed = json.subscribed
+      })
+    },
+    subscribeHandler () {
+      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
+        method: 'POST',
+        body: JSON.stringify({
+          channelId: this.channelId
+        }),
+        headers: {
+          Authorization: this.getAuthToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+      this.subscribed = !this.subscribed
+    },
+    handleScroll () {
+      if (this.loading || !this.comments || !this.comments.nextpage) return
+      if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
+        this.loading = true
+        this.fetchJson(this.apiUrl() + '/nextpage/comments/' + this.getVideoId(), {
+          url: this.comments.nextpage
+        }).then(json => {
+          this.comments.nextpage = json.nextpage
+          this.loading = false
+          json.comments.map(comment => this.comments.comments.push(comment))
+        })
+      }
+    },
+    getVideoId () {
+      return this.$route.query.v || this.$route.params.v
+    }
+  },
+  components: {
+    Player,
+    VideoItem,
+    ErrorHandler
+  }
+}
+</script>
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..332b916
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/yarn.lock b/yarn.lock
index b634092..c1d4a19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1311,14 +1311,14 @@
     webpack "^4.0.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-router@^4.5.13":
+"@vue/cli-plugin-router@^4.5.13", "@vue/cli-plugin-router@~4.5.0":
   version "4.5.13"
   resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.13.tgz#0b67c8898a2bf132941919a2a2e5f3aacbd9ffbe"
   integrity sha512-tgtMDjchB/M1z8BcfV4jSOY9fZSMDTPgF9lsJIiqBWMxvBIsk9uIZHxp62DibYME4CCKb/nNK61XHaikFp+83w==
   dependencies:
     "@vue/cli-shared-utils" "^4.5.13"
 
-"@vue/cli-plugin-vuex@^4.5.13":
+"@vue/cli-plugin-vuex@^4.5.13", "@vue/cli-plugin-vuex@~4.5.0":
   version "4.5.13"
   resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz#98646d8bc1e69cf6c6a6cba2fed3eace0356c360"
   integrity sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==
@@ -8900,6 +8900,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.2.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
+  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -8940,6 +8945,11 @@ vuetify@^2.4.0:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.5.6.tgz#9cbb1eacece6c42028216312b9be23e35a7f5cf4"
   integrity sha512-2T8ML5PYuJ/AdMVH3ZIvzHnsM0nX8t4Xzj+0HFFGfLT7jLlptCFpG+JE8+kyrgGZlbUgulyOwCUu8hJkVsReFA==
 
+vuex@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"