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

Add Twitch categories to Home page

Browse source
This commit is contained in:
Korbs 2024-07-25 00:51:54 -04:00
parent 7b811f74e8
commit 90a17a3353
1 changed files with 40 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/pages/index.astro
View file

@ -5,12 +5,14 @@ import Base from "@layouts/Default.astro";
// Configuration // Configuration
import { import {
DEFAULT_MEDIA_DATA_PROXY, DEFAULT_MEDIA_DATA_PROXY,
DEFAULT_IMAGE_PROXY DEFAULT_IMAGE_PROXY,
DEFAULT_STREAM_DATA_PROXY
} from '@utils/GetConfig' } from '@utils/GetConfig'
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue"; import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
// Components // Components
import Trending from "@components/category/trending.astro"; import Trending from "@components/category/trending.astro";
import Chip from "@components/Chip.astro";
// Fetch // Fetch
const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending' const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending'
@ -34,17 +36,22 @@ const GamingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?type=gaming'
const GamingResponse = await fetch(GamingFetch) const GamingResponse = await fetch(GamingFetch)
const GamingData = await GamingResponse.json() const GamingData = await GamingResponse.json()
const GamingSplit = GamingData.slice(0, 1) const GamingSplit = GamingData.slice(0, 1)
/// Twitch (/api/discover/)
const TwitchDiscoverFetch = await fetch(DEFAULT_STREAM_DATA_PROXY + '/api/discover')
const TwitchDiscoverData = await TwitchDiscoverFetch.json()
--- ---
<Base Title="MinPluto" Description=""> <Base Title="MinPluto" Description="">
<div class="force-center"> <div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/> <img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<img src="/images/backgrounds/1.webp"/> <img src="/images/backgrounds/1.webp"/>
<hr/>
</div> </div>
<div class="category-select-grid"> <div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
{TrendingSplit.map((data) => {TrendingSplit.map((data) =>
<a href={'/category/trending'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card"> <a href={'/discover?category=trending&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
<Chip Text="YouTube" Color="#c91e34"/>
<div class="goin-card-content"> <div class="goin-card-content">
<GraphUp viewBox="0 0 10 24"/> <GraphUp viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p> <p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
@ -52,7 +59,8 @@ const GamingSplit = GamingData.slice(0, 1)
</a> </a>
)} )}
{MoviesSplit.map((data) => {MoviesSplit.map((data) =>
<a href={'/category/movies'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card"> <a href={'/discover?category=movies&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
<Chip Text="YouTube" Color="#c91e34"/>
<div class="goin-card-content"> <div class="goin-card-content">
<Movie viewBox="0 0 10 24"/> <Movie viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p> <p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
@ -60,7 +68,8 @@ const GamingSplit = GamingData.slice(0, 1)
</a> </a>
)} )}
{MusicSplit.map((data) => {MusicSplit.map((data) =>
<a href={'/category/music'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card"> <a href={'/discover?category=music&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
<Chip Text="YouTube" Color="#c91e34"/>
<div class="goin-card-content"> <div class="goin-card-content">
<MusicDoubleNote viewBox="0 0 10 24"/> <MusicDoubleNote viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p> <p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
@ -68,7 +77,8 @@ const GamingSplit = GamingData.slice(0, 1)
</a> </a>
)} )}
{GamingSplit.map((data) => {GamingSplit.map((data) =>
<a href={'/category/gaming'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card"> <a href={'/discover?category=gaming&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
<Chip Text="YouTube" Color="#c91e34"/>
<div class="goin-card-content"> <div class="goin-card-content">
<Gamepad viewBox="0 0 10 24"/> <Gamepad viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p> <p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
@ -76,11 +86,22 @@ const GamingSplit = GamingData.slice(0, 1)
</a> </a>
)} )}
</div> </div>
<hr/>
<div class="category-select-grid">
{TwitchDiscoverData.data.map((data) =>
<a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card">
<Chip Text="Twitch" Color="#9146FF"/>
<div class="goin-card-content">
<p>{data.displayName}</p>
</div>
</a>
)}
</div>
</Base> </Base>
<style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style> <style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style> <style is:global>
img[src="/images/backgrounds/1.webp"] { img[src="/images/backgrounds/1.webp"] {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
@ -93,7 +114,7 @@ img[src="/images/backgrounds/1.webp"] {
display: none; display: none;
} }
.category-select-grid { .category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
} }
} }
.force-center { .force-center {
@ -107,31 +128,37 @@ img[src="/images/backgrounds/1.webp"] {
border-radius: 10px; border-radius: 10px;
background-size: cover !important; background-size: cover !important;
background-position: center !important; background-position: center !important;
position: relative;
}
.chip {
position: absolute;
z-index: 1;
left: 12px;
} }
.goin-card-content { .goin-card-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 0px 12px;
height: 100%; height: 100%;
place-content: center; place-content: center;
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8); backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
} }
.goin-card-content p { .goin-card-content p {
font-size: 24px; font-size: 18px;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
margin: 24px; margin: 12px;
} }
.goin-card-content svg { .goin-card-content svg {
position: absolute; position: absolute;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
width: 50px; width: 124px;
height: 120px; height: 120px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
opacity: 0.3; opacity: 0.3;