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

update

Browse source
This commit is contained in:
Korbs 2024-07-25 03:05:13 -04:00
parent 3877b773fd
commit 9d44f96477
11 changed files with 81 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/VideoItem.astro
View file

@ -32,7 +32,7 @@ const ViewsFormat = ViewsConversion.format(Views)
<a href={'/watch?v=' + ID} class="video-item">
<div class="video-item-thumbnail">
<img src={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + ID + '/hqdefault.jpg'}/>
<img onload="this.style.opacity = '1'" src={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + ID + '/hqdefault.jpg'} loading="lazy"/>
<p id="vi-length">{LengthFormat}</p>
</div>
<div class="video-item-details">
@ -54,6 +54,8 @@ const ViewsFormat = ViewsConversion.format(Views)
border-radius: 6px;
aspect-ratio: 16/9;
object-fit: cover;
opacity: 0;
transition: 0.3s opacity;
}
p#vi-length {
margin: -41px 0px 0px 0px;

46
src/components/global/Header.astro
View file

@ -1,46 +0,0 @@
---
// Components
import Search from '@components/Search.astro'
// Icons
import {
Message,
Youtube
} from '@iconoir/vue'
// i18n
import { t, changeLanguage } from "i18next"
import { LanguageSelector } from "astro-i18next/components"
import Dropdown from '@components/Dropdown.astro'
---
<div class="header">
<div class="header-start">
<img class="mo" style="height: 24px; margin-right: 24px;" src="/images/logo/MinPluto - Logo.png"/>
<Search/>
</div>
<div class="header-end">
<Dropdown Name="Language" OnClick="LanguageDropdownShow()">
<a href="/api/language/en/">English</a>
<a href="/api/language/jp/">Japanese</a>
</Dropdown>
<a href="https://lemmy.world/c/minpluto" target="_blank"><Message/> {t("HEADER.FEEDBACK")}</a>
</div>
</div>
<script is:inline>
function LanguageDropdownShow() {
var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownHide()')
LanguageDropdown.style.display = 'flex'
LanguageDropdown.style.display = 'inherit'
}
function LanguageDropdownHide() {
var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownShow()')
LanguageDropdown.style.display = 'none'
LanguageDropdown.style.display = 'none'
}
</script>

65
src/components/global/Sidebar.astro
View file

@ -11,35 +11,40 @@ import {
// Icons
import {
HomeSimple,
GraphUp,
Movie,
MusicDoubleNote,
Gamepad,
AppleImac2021Side,
EmojiTalkingHappy,
PizzaSlice,
Treadmill,
PeaceHand,
InfoCircle,
HelpCircle,
Server,
CurveArray,
Rocket,
PlanetAlt
PlanetAlt,
InputSearch,
ProfileCircle,
SettingsProfiles,
Settings
} from '@iconoir/vue'
// i18n
import i18next, { t } from "i18next"
import SettingsLayout from '@layouts/Settings.astro'
---
<div class="sidebar">
<div class="sidebar-top">
<a href='/' class="sidebar-top-start">
<img src="/images/logo/MinPluto - Logo.png"/>
</a>
<div class="sidebar-top-start">
<a href='/'><img src="/images/logo/MinPluto - Logo.png"/></a>
<div>
<a href="#"><InputSearch/></a>
<a href="#"><Settings/></a>
</div>
</div>
<div class="sidebar-top-end">
<a href={'/'}><PlanetAlt/> {t("SIDEBAR.HOME")}</a>
<a href="#"><InputSearch/> {t("HEADER.SEARCH")}</a>
<hr/>
{SIDEBAR_CATEGORIES ?
<h2>{t("SIDEBAR.CATEGORY")}</h2>
@ -103,12 +108,54 @@ import i18next, { t } from "i18next"
font-size: 16px;
padding-left: 24px;
}
form {
margin-bottom: 12px;
input {
background: transparent;
border: 2px transparent solid;
padding: 10px 24px;
border-radius: 6px;
color: white;
transition: 0.3s background, 0.3s border;
&:hover {
background: rgb(255 255 255 / 05%);
border: 2px rgba(255, 255, 255, 0.05) solid;
transition: 0.3s background, 0.3s border;
}
&:focus {
outline: none;
background: rgb(255 255 255 / 07%);
border: 2px rgba(255, 255, 255, 0.07) solid;
transition: 0.3s background, 0.3s border;
}
svg {
width: 18px;
}
}
}
.sidebar-top {
.sidebar-top-start {
display: flex;
align-items: center;
gap: 24px;
padding: 32px 24px;
justify-content: space-between;
div {
display: flex;
gap: 6px;
a {
background: transparent;
border-radius: 6px;
padding: 5px 6px 3px 6px;
aspect-ratio: 1;
svg {
aspect-ratio: 1;
}
&:hover {
background: #2d2d2d;
}
}
}
img {
height: 24px;
}

8
src/components/search/Stream.astro
View file

@ -12,10 +12,10 @@ const {
<a href={Link} class='search-stream search-stream-platfom-twitch'>
<div class="search-stream-media">
<!-- <p>{Views}</p> -->
<img class="ssm-banner" alt='Stream Thumbnail' src={Thumbnail}/>
<img onload="this.style.opacity = '1'" class="ssm-banner" alt='Stream Thumbnail' src={Thumbnail} loading="lazy"/>
</div>
<div class="search-stream-meta">
<img alt={Creator + "'s avatar"} src={Avatar}/>
<img onload="this.style.opacity = '1'" alt={Creator + "'s avatar"} src={Avatar} loading="lazy"/>
<div>
<p><strong>{Title}</strong></p>
<p>{Creator}</p>
@ -44,6 +44,8 @@ const {
width: 100%;
object-fit: cover;
border-radius: 12px;
opacity: 0;
transition: 0.3s opacity;
}
}
.search-stream-meta {
@ -63,6 +65,8 @@ const {
width: 42px;
height: 42px;
border-radius: 3rem;
opacity: 0;
transition: 0.3s opacity;
}
}
}

2
src/layouts/Default.astro
View file

@ -4,7 +4,6 @@ const { Title, Description } = Astro.props
// Components
import Head from '@components/global/Head.astro'
import Header from '@components/global/Header.astro'
import MobileNav from '@components/global/MobileNav.astro'
import Sidebar from '@components/global/Sidebar.astro'
import Footer from '@components/global/Footer.astro'
@ -18,7 +17,6 @@ import '@styles/mobile.scss'
<MobileNav/>
<Sidebar/>
<div class="content">
<Header/>
<slot/>
</div>
<Footer/>

1
src/layouts/Markdown.astro
View file

@ -4,7 +4,6 @@ const { Title, Description } = Astro.props
// Components
import Head from '@components/global/Head.astro'
import Header from '@components/global/Header.astro'
import MobileNav from '@components/global/MobileNav.astro'
import Sidebar from '@components/global/Sidebar.astro'
import Footer from '@components/global/Footer.astro'

3
src/pages/discover.astro
View file

@ -24,9 +24,10 @@ 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 YouTubeCategory = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?type=' + SearchQuery
var YouTubeFetch = await fetch(YouTubeCategory)
var YouTubeData = await YouTubeFetch.json()
console.log(YouTubeCategory)
}
else if (Astro.url.href.includes('?platform=twitch')) {
var PlatformTwitch = true

2
src/pages/live.astro
View file

@ -20,7 +20,7 @@ const video = await fetch(DEFAULT_STREAM_PROXY + "/api/v1/videos/" + Channel).th
<div class="video-container">
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
data-setup='{}'>
<source src={'https://' + DEFAULT_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
<source src={DEFAULT_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
</video>
</div>
</Base>

2
src/pages/watch.astro
View file

@ -235,7 +235,7 @@ function ShareDialogHide() {
<style lang="scss">
.video-container {
max-width: 1000px;
max-width: 90%;
margin: auto;
.zorn-player {
border-radius: 10px;

54
src/styles/index.scss
View file

@ -9,6 +9,16 @@ body {
width: calc(100% - 246px);
}
::-webkit-scrollbar {
width: 12px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #464646;
border-radius: 1rem;
border: 4px black solid;
}
a {
color: white;
}
@ -22,48 +32,6 @@ hr {
margin: 24px auto;
}
.header {
backdrop-filter: blur(10px) brightness(0.4);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1000px;
margin: auto;
position: sticky;
top: 12px;
z-index: 5;
border-radius: 10px;
margin-top: 12px;
.header-start {
width: 75%;
display: flex;
align-items: center;
}
.header-end {
display: flex;
align-items: center;
gap: 12px;
}
a, select {
background: transparent;
color: white;
text-decoration: none;
display: flex;
align-items: center;
border-radius: 1rem;
padding: 20px;
font-size: 14px;
border: 1px transparent solid;
gap: 6px;
svg {
width: 20px;
}
&:hover {
color: gray;
}
}
}
span#gradient-header {
background: linear-gradient(180deg, black, transparent);
height: 50px;
@ -78,7 +46,7 @@ span#gradient-header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 25px;
max-width: 1000px;
max-width: 100%;
margin: auto;
padding: 0px 24px;
}

2
src/styles/video.scss
View file

@ -1,5 +1,5 @@
.video-rea {
max-width: 1000px;
max-width: 1300px;
margin: auto;
padding: 0px 24px;
.rea-details-start {