MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Add filters and search for playlists, creators, and streams

Browse source
This commit is contained in:
Korbs 2024-07-12 23:36:24 -04:00
parent 81ad8796c1
commit a08d926e89
1 changed files with 129 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
src/pages/search.astro
View file

@ -1,38 +1,144 @@
---
import { t, changeLanguage } from "i18next"
// Layout
import Base from "@layouts/Default.astro"
// i18n
import { t, changeLanguage } from "i18next"
// Configuration
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
changeLanguage("en")
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY, DEFAULT_STREAM_DATA_PROXY } from '@utils/GetConfig'
// Components
import Video from '@components/VideoItem.astro'
import DiscoverChannel from "@components/DiscoverChannel.astro"
import Stream from "@components/search/Stream.astro"
import { Group, Movie, Play, PlaylistPlay, ReportColumns, VideoCamera } from "@iconoir/vue"
// Fetch
const SBO = Astro.url.href.split("search?query=").pop()
const response = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SBO)
.catch((error) => {
console.log(error)
})
const SearchQueryWithParameters = Astro.url.href.split("&?").shift()
const SearchQuery = SearchQueryWithParameters.split("search?query=").pop()
const data = await response.json()
console.log(SearchQuery)
// Check Filters
if (Astro.url.href.includes('?type=channel')) {
var ShowChannels = true
}
else if (Astro.url.href.includes('?type=playlist')) {
var ShowPlaylists = true
}
else if (Astro.url.href.includes('?type=stream')) {
var ShowStreams = true
}
else if (Astro.url.href.includes('?type=all')) {
var ShowAll = true
}
else {
var ShowVideos = true
}
/// Videos (YouTube)
const VideoSearchResults = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=video&duration=none&sort=relevance')
const VideoSearch = await VideoSearchResults.json()
/// Playlists (YouTube)
const PlaylistsSearchResults = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=playlist&duration=none&sort=relevance')
const PlaylistsSearch = await PlaylistsSearchResults.json()
// Streams (Twitch)
const StreamSearchResults = await fetch(DEFAULT_STREAM_DATA_PROXY + "/api/search/?query=" + SearchQuery)
const StreamSearch = await StreamSearchResults.json()
/// Channels (YouTube)
const ChannelSearchResults = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=channel&duration=none&sort=relevance')
const ChannelSearch = await ChannelSearchResults.json()
---
<Base Title='MinPluto Search'>
<div class="page-title">
<h2>Search</h2>
<div class="search-tabs">
<div>
<!-- <a id="search-tab-all" href={'/search?query=' + SearchQuery + '&?type=all'}><ReportColumns/> All</a> -->
<a id="search-tab-videos" href={'/search?query=' + SearchQuery}><Play/> Videos</a>
<a id="search-tab-playlists" href={'/search?query=' + SearchQuery + '&?type=playlist'}><PlaylistPlay/> Playlists</a>
<a id="search-tab-streams" href={'/search?query=' + SearchQuery + '&?type=stream'}><VideoCamera/> Streams</a>
<a id="search-tab-creator" href={'/search?query=' + SearchQuery + '&?type=channel'}><Group/> Creators</a>
</div>
<div>
{ShowVideos ? <a style="color: gray;" href={DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=video&duration=none&sort=relevance'}>View JSON</a> : null}
{ShowPlaylists ? <a style="color: gray;" href={DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=playlist&duration=none&sort=relevance'}>View JSON</a> : null}
{ShowStreams ? <a style="color: gray;" href={DEFAULT_STREAM_DATA_PROXY + "/api/search/?query=" + SearchQuery}>View JSON</a> : null}
{ShowChannels ? <a style="color: gray;" href={DEFAULT_MEDIA_DATA_PROXY + "/api/v1/search?q=" + SearchQuery + '&page=1&date=none&type=channel&duration=none&sort=relevance'}>View JSON</a> : null}
</div>
</div>
<!-- {ShowAll ? <style>#search-tab-all {background: white; color: black;}</style> : null} -->
{ShowVideos ? <style>#search-tab-videos {background: white; color: black;}</style> : null}
{ShowPlaylists ? <style>#search-tab-playlists {background: white; color: black;}</style> : null}
{ShowStreams ? <style>#search-tab-streams {background: white; color: black;}</style> : null}
{ShowChannels ? <style>#search-tab-creator {background: white; color: black;}</style> : null}
<div class="video-grid">
{data.map((data) =>
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
{ShowVideos ?
VideoSearch.map((video) =>
<Video
ID={video.videoId}
Title={video.title}
Creator={video.author}
Views={video.viewCount}
UploadDate={video.published}
Length={video.lengthSeconds}
/>
)
:
null
}
{ShowPlaylists ?
PlaylistsSearch.map((playlist) =>
<a href={'/playlist?list=' + playlist.playlistId}>{playlist.title}</a>
)
:
null
}
{ShowChannels ?
ChannelSearch.map((channel) =>
<DiscoverChannel ChannelId={channel.authorId}/>
)
:
null
}
{ShowStreams ?
StreamSearch.data.relatedChannels.map((channel) =>
<Stream
Title={channel.stream.title}
Creator={channel.username}
Avatar={channel.pfp}
Link={'/channel/twitch/' + channel.username}
Thumbnail={channel.stream.preview}
View={channel.stream.viewers}
/>
)
:
null
}
</div>
</Base>
</Base>
<style lang="scss">
.search-tabs {
max-width: 1000px;
margin: 0px auto 16px auto;
display: flex;
justify-content: space-between;
div {
display: flex;
gap: 6px;
}
a {
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border-radius: 3rem;
padding: 6px 12px;
}
}
</style>