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;
|
||||
right: 0px;
|
||||
margin: auto;
|
||||
width: calc(100% - 204px);
|
||||
width: calc(100% - 246px);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
Reference in a new issue