Revamp Category Discovery pages
This commit is contained in:
Korbs
parent
90a17a3353
commit
3877b773fd
6 changed files with 73 additions and 192 deletions
|
|
@ -1,92 +0,0 @@
|
||||||
---
|
|
||||||
// Properties
|
|
||||||
const {
|
|
||||||
FetchData,
|
|
||||||
CategoryName,
|
|
||||||
CategoryDescription,
|
|
||||||
GradientHero
|
|
||||||
} = Astro.props
|
|
||||||
|
|
||||||
// Use on top of Default Layout
|
|
||||||
import Base from '@layouts/Default.astro'
|
|
||||||
import Video from '@components/VideoItem.astro'
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
import {
|
|
||||||
DEFAULT_MEDIA_DATA_PROXY,
|
|
||||||
DEFAULT_MEDIA_DATA_PROXY
|
|
||||||
} from '@utils/GetConfig'
|
|
||||||
|
|
||||||
|
|
||||||
// Fetch
|
|
||||||
const fetchFrom = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending' + FetchData
|
|
||||||
const response = await fetch(fetchFrom)
|
|
||||||
const data = await response.json()
|
|
||||||
|
|
||||||
const heroItem = data.slice(0,1)
|
|
||||||
---
|
|
||||||
|
|
||||||
<Base Title={CategoryName + " - MinPluto"} Description={CategoryDescription}>
|
|
||||||
<div style={'background: linear-gradient(180deg, ' + GradientHero + ', transparent);'} class="category-hero">
|
|
||||||
<div class="c-hero-content">
|
|
||||||
<div style="width: 25%;">
|
|
||||||
<h2>{CategoryName}</h2>
|
|
||||||
<p>{CategoryDescription}</p>
|
|
||||||
</div>
|
|
||||||
<div class="c-hero-video">
|
|
||||||
{heroItem.map((data) =>
|
|
||||||
<video autoplay muted src={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + data.videoId + '&itag=135'}></video>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span id="gradient-header"></span>
|
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Base>
|
|
||||||
|
|
||||||
<style define:vars={{GradientHero}} lang="scss">
|
|
||||||
.category-hero {
|
|
||||||
margin-top: -80px;
|
|
||||||
padding-top: 80px;
|
|
||||||
.c-hero-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1000px;
|
|
||||||
justify-content: space-between;
|
|
||||||
h2 {
|
|
||||||
font-size: 44px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
.c-hero-video {
|
|
||||||
-webkit-mask-image: radial-gradient(rgb(0 0 0 / 50%), transparent);
|
|
||||||
-webkit-mask-image: linear-gradient(90deg, black, rgba(0, 0, 0, 0));
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
video {
|
|
||||||
pointer-events: none;
|
|
||||||
object-fit: none;
|
|
||||||
object-position: center;
|
|
||||||
width: 75%;
|
|
||||||
height: 100%;
|
|
||||||
float: right;
|
|
||||||
-webkit-mask-image: linear-gradient(270deg, black, transparent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
72
src/pages/discover.astro
Normal file
72
src/pages/discover.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
---
|
||||||
|
// Layout
|
||||||
|
import Base from "@layouts/Default.astro"
|
||||||
|
|
||||||
|
// i18n
|
||||||
|
import { t, changeLanguage } from "i18next"
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY, DEFAULT_STREAM_DATA_PROXY } from '@utils/GetConfig'
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Video from '@components/VideoItem.astro'
|
||||||
|
import Stream from "@components/search/Stream.astro"
|
||||||
|
|
||||||
|
// Get URL Strings
|
||||||
|
const SearchQueryWithParameters = Astro.url.href.split("&?").shift()
|
||||||
|
const SearchQuery = SearchQueryWithParameters.split("discover?category=").pop()
|
||||||
|
if (Astro.url.href.includes('?platform=youtube')) {var SelectedPlatform = "YouTube"}
|
||||||
|
else if (Astro.url.href.includes('?platform=twitch')) {var SelectedPlatform = "Twitch"}
|
||||||
|
var FullCategoryName = SearchQuery.charAt(0).toUpperCase() + SearchQuery.slice(1)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Fetch
|
||||||
|
if (Astro.url.href.includes('?platform=youtube')) {
|
||||||
|
var PlatformYouTube = true
|
||||||
|
var YouTubeCategory = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?=' + SearchQuery
|
||||||
|
var YouTubeFetch = await fetch(YouTubeCategory)
|
||||||
|
var YouTubeData = await YouTubeFetch.json()
|
||||||
|
}
|
||||||
|
else if (Astro.url.href.includes('?platform=twitch')) {
|
||||||
|
var PlatformTwitch = true
|
||||||
|
var TwitchFetch = await fetch('https://twitch-backend.sudovanilla.org/api/discover/' + SearchQuery)
|
||||||
|
var TwitchData = await TwitchFetch.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base Title='MinPluto'>
|
||||||
|
<center><h2><u>{FullCategoryName}</u> on <u>{SelectedPlatform}</u></h2></center>
|
||||||
|
<hr/>
|
||||||
|
<div class="video-grid">
|
||||||
|
{PlatformYouTube ?
|
||||||
|
YouTubeData.map((video) =>
|
||||||
|
<Video
|
||||||
|
ID={video.videoId}
|
||||||
|
Title={video.title}
|
||||||
|
Creator={video.author}
|
||||||
|
Views={video.viewCount}
|
||||||
|
UploadDate={video.published}
|
||||||
|
Length={video.lengthSeconds}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
{PlatformTwitch ?
|
||||||
|
TwitchData.data.streams.map((channel) =>
|
||||||
|
<Stream
|
||||||
|
Title={channel.title}
|
||||||
|
Creator={channel.username}
|
||||||
|
Avatar={channel.streamer.pfp}
|
||||||
|
Link={'/channel/twitch/' + channel.streamer.name}
|
||||||
|
Thumbnail={channel.preview}
|
||||||
|
View={channel.viewers}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
---
|
|
||||||
// Layout
|
|
||||||
import Base from "@layouts/Default.astro";
|
|
||||||
|
|
||||||
// Properties
|
|
||||||
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import DiscoverChannel from '@components/DiscoverChannel.astro'
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
|
|
||||||
|
|
||||||
// Discover Data
|
|
||||||
import DiscoverData from "../../data/discover.json";
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<Base>
|
|
||||||
<div class="video-grid">
|
|
||||||
{DiscoverData.Comedy.map((channel) =>
|
|
||||||
<DiscoverChannel ChannelId={channel.Id}/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<div style="max-width: 1000px; margin: auto; text-align: center;">
|
|
||||||
<p>This is a curated list for all MinPluto users.</p>
|
|
||||||
<p>Is there a channel missing here that you think should be added? You can either <a href="https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/main/src/data/discover.json">edit our list here</a> or you can <a href="https://community.minpluto.org/">submit a request</a>.</p>
|
|
||||||
</div>
|
|
||||||
</Base>
|
|
||||||
|
|
||||||
<style is:inline>a[href="/discover/comedy"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
---
|
|
||||||
// Layout
|
|
||||||
import Base from "@layouts/Default.astro";
|
|
||||||
|
|
||||||
// Properties
|
|
||||||
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import DiscoverChannel from '@components/DiscoverChannel.astro'
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
|
|
||||||
|
|
||||||
// Discover Data
|
|
||||||
import DiscoverData from "../../data/discover.json";
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<Base>
|
|
||||||
<div class="video-grid">
|
|
||||||
{DiscoverData.Gamers.map((channel) =>
|
|
||||||
<DiscoverChannel ChannelId={channel.Id}/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<div style="max-width: 1000px; margin: auto; text-align: center;">
|
|
||||||
<p>This is a curated list for all MinPluto users.</p>
|
|
||||||
<p>Is there a channel missing here that you think should be added? You can either <a href="https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/main/src/data/discover.json">edit our list here</a> or you can <a href="https://community.minpluto.org/">submit a request</a>.</p>
|
|
||||||
</div>
|
|
||||||
</Base>
|
|
||||||
|
|
||||||
<style is:inline>a[href="/discover/gaming"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
---
|
|
||||||
// Layout
|
|
||||||
import Base from "@layouts/Default.astro";
|
|
||||||
|
|
||||||
// Properties
|
|
||||||
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import DiscoverChannel from '@components/DiscoverChannel.astro'
|
|
||||||
|
|
||||||
// Configuration
|
|
||||||
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
|
|
||||||
|
|
||||||
// Discover Data
|
|
||||||
import DiscoverData from "../../data/discover.json";
|
|
||||||
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<Base>
|
|
||||||
<div class="video-grid">
|
|
||||||
{DiscoverData.Tech.map((channel) =>
|
|
||||||
<DiscoverChannel ChannelId={channel.Id}/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<div style="max-width: 1000px; margin: auto; text-align: center;">
|
|
||||||
<p>This is a curated list for all MinPluto users.</p>
|
|
||||||
<p>Is there a channel missing here that you think should be added? You can either <a href="https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/main/src/data/discover.json">edit our list here</a> or you can <a href="https://community.minpluto.org/">submit a request</a>.</p>
|
|
||||||
</div>
|
|
||||||
</Base>
|
|
||||||
|
|
||||||
<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
|
|
||||||
|
|
@ -6,7 +6,7 @@ body {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: calc(100% - 204px);
|
width: calc(100% - 246px);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
Reference in a new issue