TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add a search page.

Browse source
This commit is contained in:
FireMasterK 2020-12-09 19:03:29 +05:30
parent d737a0003d
commit e9d1a77a6a
No known key found for this signature in database
GPG key ID: 8DFF5DD33E93DB58
3 changed files with 199 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/App.vue
View file

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

71
src/components/SearchResults.vue Normal file
View file

@ -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>

65
src/router/router.js
View file

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