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-07 16:22:14 -04:00
parent 4941fbb853
commit 2cdf798b98
47 changed files with 9 additions and 3094 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -23,7 +23,7 @@ ___
- [ ] Filters
- [x] Auto Complete
- [ ] Video Player
- [ ] Dash Format (1080p/4K/8K)
- [x] Dash Format (1080p/4K/8K)
- [ ] Mobile Gestures
- [ ] Embed Page
- [ ] Download

20
src/pages/en/404.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("en");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>Error 404</h2>
<p>Page not found.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

9
src/pages/en/category/gaming.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("en");
---
<Category GradientHero="#269753" FetchData="?type=gaming" CategoryName={t("SIDEBAR.CATEGORY_LIST.GAMES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.GAMES_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/gaming"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

10
src/pages/en/category/movies.astro
View file

@ -1,10 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("en");
---
<Category GradientHero="#ff4f4f" FetchData="?type=movies" CategoryName={t("SIDEBAR.CATEGORY_LIST.MOVIES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.MOVIES_DESCRIPTION")}>
</Category>
<style is:inline>a[href="/category/movies"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

106
src/pages/en/category/music.astro
View file

@ -1,106 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Default from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_VIDEO_PROXY } from "../../../../config.json";
// Components
import MusicItem from "@components/MusicItem.astro";
changeLanguage("en");
// Fetch
const fetchFrom = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const response = await fetch(fetchFrom);
const data = await response.json();
const heroItem = data.slice(0, 1);
---
<Default FetchData="?type=movies" Title={t("SIDEBAR.CATEGORY_LIST.MUSIC")} Description={t("SIDEBAR.CATEGORY_LIST.MUSIC_DESCRIPTION")}>
<div class="category-hero">
<div class="c-hero-content">
<div style="width: 25%;">
<h2>Music</h2>
<p>Listen to the latest hits</p>
</div>
<div class="c-hero-video">
{heroItem.map((data) =>
<video autoplay muted src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + data.videoId + '&itag=22&local=true'}></video>
)}
</div>
</div>
</div>
<span id="gradient-header"></span>
<div class="or-mu">
<span></span>
<p id="title">{t("MUSIC.TITLE")}</p>
<p id="artist">{t("MUSIC.ARTIST")}</p>
<p id="date">{t("MUSIC.UPLOADED")}</p>
<p id="duration">{t("MUSIC.DURATION")}</p>
</div>
<div class="music-list">
{data.map((data) =>
<MusicItem
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
</div>
</Default>
<style is:inline>a[href="/en /category/music"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style lang="scss">
.category-hero {
margin-top: -80px;
background: linear-gradient(180deg, #502969, transparent);
padding-top: 80px;
.c-hero-content {
display: flex;
align-items: center;
margin: auto;
max-width: 1000px;
justify-content: space-between;
.c-hero-video {
-webkit-mask-box-image: radial-gradient(rgb(0 0 0 / 50%), transparent);
-webkit-mask-box-image: linear-gradient(90deg, black, rgba(0, 0, 0, 0));
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
video {
object-fit: cover;
object-position: center;
width: 75%;
height: 100%;
float: right;
-webkit-mask-box-image: linear-gradient(270deg, black, transparent);
}
}
}
}
.or-mu {
display: grid;
grid-auto-flow: column;
align-items: center;
text-decoration: none;
gap: 12px;
grid-template-columns: 60px auto auto 80px 64px;
max-width: 1000px;
margin: auto;
border-bottom: 1px #252525 solid;
margin-bottom: 24px;
position: sticky;
top: 58px;
background: black;
#artist, #duration, #date {
text-align: right;
}
#title {
font-weight: bold;
}
}
</style>

9
src/pages/en/category/trending.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("en");
---
<Category GradientHero="#ff650b" FetchData="" CategoryName={t("SIDEBAR.CATEGORY_LIST.TRENDING")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.TRENDING_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/trending"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

137
src/pages/en/channel/[...slug].astro
View file

@ -1,137 +0,0 @@
---
import Base from "@layouts/Default.astro";
// i18n
import i18next, { t, changeLanguage } from "i18next";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
import { BrightStar, Donate, Download, ShareIos, ThumbsUp } from "@iconoir/vue";
// Components
import Video from "@components/VideoItem.astro";
changeLanguage("en");
// Fetch
const SWV = Astro.url.href.split("channel/").pop();
const channel = await fetch(DEFAULT_DATA_PROXY + "/api/v1/channels/" + SWV).then((response) => response.json());
const DescriptionFormat = channel.descriptionHtml.replaceAll("\n", " <br/> ");
---
<Base Title="MinPluto" Description="">
<div class="channel-backdrop">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel">
<div class="channel-header">
<div class="channel-banner">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel-meta">
<div>
<img src={channel.authorThumbnails[1].url}/>
<h2>{channel.author}</h2>
<p>{channel.subCountText}</p>
</div>
<div>
<!-- {channel.isFamilyFriendly ? <p id="family-friendly"><BrightStar/> {t("CHANNEL.FAMILY_FRIENDLY")}</p> : null} -->
</div>
</div>
</div>
<div class="channel-content">
<!-- <div class="channel-tabs">
<a href="#">{t("CHANNEL.HOME")}</a>
<a href="#">{t("CHANNEL.VIDEOS")}</a>
<a href="#">{t("CHANNEL.COMMUNITY")}</a>
</div> -->
<div class="channel-tab-content">
<h2>{t("CHANNEL.ABOUT")} {channel.author}</h2>
<p><Fragment set:html={DescriptionFormat}/></p>
<hr/>
<h2>{t("CHANNEL.LATEST")}</h2>
<div class="video-grid">
{channel.latestVideos.map((data) =>
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
<!-- <a>View All Latest Videos</a> -->
</div>
</div>
</div>
</div>
</Base>
<style lang="scss">
.channel-backdrop img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: max-content;
filter: blur(30px) contrast(0.8);
z-index: -1;
transform: scale(1.4);
opacity: 0.3;
display: none;
}
.channel {
max-width: 1000px;
margin: auto;
.channel-header {
.channel-banner {
margin: 12px 0px;
img {
width: 100%;
border-radius: 10px;
}
}
.channel-meta {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
#family-friendly {
color: white;
background: #3b003b;
border: 1px #a500a5 solid;
border-radius: 3rem;
display: flex;
align-items: center;
padding: 6px 12px;
gap: 12px;
pointer-events: none;
}
div:nth-child(1) {
display: flex;
flex-direction: row;
gap: 12px;
img {
border-radius: 3rem;
width: 64px;
height: 64px;
}
}
}
}
.channel-content {
.channel-tabs {
padding-top: 24px;
padding-bottom: 12px;
cursor: default;
a {
text-decoration: none;
font-size: 18px;
padding: 12px 24px;
border-radius: 24px;
&:hover {
background: rgba(41, 41, 41, 0.5);
}
}
}
}
}
</style>

57
src/pages/en/discover/tech.astro
View file

@ -1,57 +0,0 @@
---
import { changeLanguage } from "i18next";
import Discover from "@layouts/Discover.astro";
// Properties
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
// Use on top of Default Layout
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../../config.json";
// Discover Data
import Discover from "../../../data/discover.json";
changeLanguage("en");
---
<Base>
<div class="video-grid">
{Discover.Tech.map((channel) =>
<a href={'/channel/' + channel.Link} style={"background: url('" + DEFAULT_DATA_PROXY + channel.Banner} class="discovery-channel">
<div class="dc-c">
<img src={DEFAULT_DATA_PROXY + channel.Logo}/>
<p>{channel.Name}</p>
</div>
</a>
)}
</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://sudovanilla.com/code/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>
<style lang="scss">
.discovery-channel {
text-decoration: none;
border-radius: 10px;
font-weight: bold;
background-position: center !important;
background-size: cover !important;
.dc-c {
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img {
width: 24%;
align-self: center;
border-radius: 10rem;
padding: 30px;
}
}
}
</style>

93
src/pages/en/embed/[...slug].astro
View file

@ -1,93 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Embed from "@layouts/Embed.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
changeLanguage("en");
// Fetch
const SWV = Astro.url.href.split("embed/").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
---
<Embed
Title={video.title}
EmbedId={video.videoId}
EmbedVideo={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
EmbedImage={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
EmbedTitle={video.title}
>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
</Embed>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

143
src/pages/en/index.astro
View file

@ -1,143 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("en");
// Fetch
const TrendingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending";
const TrendingResponse = await fetch(TrendingFetch);
const TrendingData = await TrendingResponse.json();
const TrendingSplit = TrendingData.slice(0, 1);
const MoviesFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=movies";
const MoviesResponse = await fetch(MoviesFetch);
const MoviesData = await MoviesResponse.json();
const MoviesSplit = MoviesData.slice(0, 1);
const MusicFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const MusicResponse = await fetch(MusicFetch);
const MusicData = await MusicResponse.json();
const MusicSplit = MusicData.slice(0, 1);
const GamingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=gaming";
const GamingResponse = await fetch(GamingFetch);
const GamingData = await GamingResponse.json();
const GamingSplit = GamingData.slice(0, 1);
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<img src="/images/backgrounds/1.webp"/>
</div>
<div class="category-select-grid">
{TrendingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/trending'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<GraphUp viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
</div>
</a>
)}
{MoviesSplit.map((data) =>
<a href={'/' + i18next.language + '/category/movies'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Movie viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
</div>
</a>
)}
{MusicSplit.map((data) =>
<a href={'/' + i18next.language + '/category/music'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<MusicDoubleNote viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
</div>
</a>
)}
{GamingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/gaming'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Gamepad viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
</div>
</a>
)}
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}
.goin-card {
height: 124px;
text-decoration: none;
border-radius: 10px;
background-size: cover !important;
background-position: center !important;
}
.goin-card-content {
display: flex;
align-items: center;
gap: 12px;
padding: 0px 12px;
height: 100%;
place-content: center;
border-radius: 10px;
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
}
.goin-card-content p {
font-size: 24px;
font-weight: bold;
position: absolute;
left: 0px;
bottom: 0px;
margin: 24px;
}
.goin-card-content svg {
position: absolute;
right: 0px;
bottom: 0px;
width: 50px;
height: 120px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
opacity: 0.3;
}
.goin-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.category-select-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 25px;
max-width: 1000px;
margin: auto;
padding: 0px 24px;
}
</style>

75
src/pages/en/instance.astro
View file

@ -1,75 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { SERVER_ADMIN, ANALYLICS_TOOL, DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, DEFAULT_PLAYER, SERVER_LOCATION, MODIFIED, CUSTOM_SOURCE_CODE, STATISTICS } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("en");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<div class="video-grid">
<div class="in">
<h2>Operated By</h2>
<p>{SERVER_ADMIN}</p>
</div>
<div class="in">
<h2>Analytics Software</h2>
<p>
{
STATISTICS
?
<p>{ANALYLICS_TOOL}</p>
:
<p>None</p>
}
</p>
</div>
<div class="in">
<h2>Location</h2>
<p>{SERVER_LOCATION}</p>
</div>
<div class="in">
<h2>Modified</h2>
<p>{MODIFIED ? <p>Yes</p> : <p>No</p>}</p>
</div>
<div class="in">
<h2>Video Proxy</h2>
<a href={DEFAULT_VIDEO_PROXY}>{DEFAULT_VIDEO_PROXY}</a>
</div>
<div class="in">
<h2>Image Proxy</h2>
<a href={DEFAULT_IMAGE_PROXY}>{DEFAULT_IMAGE_PROXY}</a>
</div>
</div>
{MODIFIED ? <p>Modified Source Code <a href={CUSTOM_SOURCE_CODE}>{CUSTOM_SOURCE_CODE}</a></p> : null}
<img src="/images/backgrounds/1.webp"/>
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}

66
src/pages/en/m/about.astro
View file

@ -1,66 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { version } from "@root/package.json";
changeLanguage("en");
---
<Base Title="MinPluto" Description="">
<div class="ms">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<h2>MinPluto</h2>
<p>{t("HOME.P1")}</p>
<hr/>
<p style="font-size: 14px;"><i>{t("HOME.P2")}</i></p>
<hr/>
<div style="display: flex; justify-content: space-evenly;">
<a href="https://community.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.STATUS")}</a>
<a href="https://status.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.FORUM")}</a>
<a href="https://sudovanilla.com/code/MinPluto/MinPluto" target="_blank">{t("SIDEBAR.FOOTER.SOURCE_CODE")}</a>
</div>
</div>
<p id="version">v{version}</p>
<img src="/images/backgrounds/1.webp"/>
</Base>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
}
.ms {
margin-top: 20%;
text-align: center;
padding: 0px 24px;
}
a {
color: white;
}
hr {
width: 100px;
border: none;
background: rgba(255, 255, 255, 0.1);
height: 4px;
border-radius: 1rem;
margin: 24px auto;
}
p#version {
position: fixed;
bottom: 88px;
left: 0px;
width: 100%;
background: #232323;
color: white;
padding: 24px 0px;
text-align: center;
}
</style>

40
src/pages/en/m/categories.astro
View file

@ -1,40 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { HomeSimple, GraphUp, Movie, MusicDoubleNote, Gamepad, AppleImac2021Side, EmojiTalkingHappy, PizzaSlice, Treadmill, PeaceHand } from "@iconoir/vue";
changeLanguage("en");
---
<Base Title="MinPluto" Description="">
<div style="padding: 0px 24px;">
<h2>Categories</h2>
<div id="c" style="display: flex;flex-direction: column;gap: 24px;">
<a href="/category/trending"><GraphUp/> {t("CATEGORY_LIST.TRENDING")}</a>
<a href="/category/movies"><Movie/> {t("CATEGORY_LIST.MOVIES")}</a>
<a href="/category/music"><MusicDoubleNote/> {t("CATEGORY_LIST.MUSIC")}</a>
<a href="/category/gaming"><Gamepad/> {t("CATEGORY_LIST.GAMES")}</a>
</div>
</div>
</Base>
<style lang="scss">
#c a {
color: white;
text-decoration: none;
background: linear-gradient(45deg, #636363, #181818);
padding: 48px 24px;
font-size: 24px;
display: flex;
align-items: center;
gap: 24px;
border-radius: 10px;
svg {
position: absolute;
right: 60px;
width: 100px;
height: 70px;
opacity: 0.4;
}
}
</style>

20
src/pages/en/offline.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("en");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>No Internet Connection</h2>
<p>It appears that you are offline, try connecting your device to the internet, and try again.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

35
src/pages/en/search.astro
View file

@ -1,35 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import Video from "@components/VideoItem.astro";
changeLanguage("en");
// Fetch
const SBO = Astro.url.href.split("search?query=").pop();
const response = await fetch(DEFAULT_DATA_PROXY + "/api/v1/search?q=" + SBO)
.catch((error) => {
console.log(error);
});
const data = await response.json();
---
<Base Title='MinPluto Search'>
<div class="page-title">
<h2>Search</h2>
</div>
<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>

207
src/pages/en/watch.astro
View file

@ -1,207 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../config.json";
import { Donate, Download, ShareIos, ThumbsUp, MediaVideo } from "@iconoir/vue";
// Components
import Dialog from "@components/Dialog.astro";
import Video from "@components/VideoItem.astro";
changeLanguage("en");
// Fetch
const SWV = Astro.url.href.split("watch?v=").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
const comments = await fetch(DEFAULT_DATA_PROXY + "/api/v1/comments/" + SWV).then((response) => response.json());
const Description = video.description;
const UploadDate = video.published;
const Views = video.viewCount;
const VideoSeconds = video.lengthSeconds;
let DescriptionFormat = Description.replaceAll("\n", " <br/> ");
// Format Published Date
const DateFormat = new Date(UploadDate * 1000).toLocaleDateString();
// Format Video Length
// Thanks to "mingjunlu" for helping out with the time format
new Date(VideoSeconds * 1000)
.toISOString()
.slice(14, 19)
.split(":")
.map(Number)
.join(":");
// Format Views
const ViewsConversion = Intl.NumberFormat("en", { notation: "compact" });
let ViewsFormat = ViewsConversion.format(Views);
---
<Base Title={video.title}>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
<div class="video-rea">
<div class="rea-details">
<p style="font-weight: bold; font-size: 24px;">{video.title}</p>
<div class="rea-details-start">
<a style="text-decoration: none;" href={video.authorUrl} class="rea-channel">
<img src={DEFAULT_IMAGE_PROXY + "/" + video.authorThumbnails[1].url} />
<div
style="display: flex; flex-direction: column; align-items: left;"
>
<h2 style="margin: 0px; font-weight: bold; font-size: 18px;">{video.author}</h2>
<p style="margin: 0px;" id="subs">
{video.subCountText} Subscribers
</p>
</div>
</a>
<div style="display: flex; flex-direction: row; align-items: left;">
<button onclick="DownloadDialogShow()"><Download /> Download</button>
<button onclick={'location.href = "/embed/' + video.videoId + '/"'}><MediaVideo /> Embed</button>
<button onclick="ShareDialogShow()"><ShareIos /> Share</button>
</div>
</div>
<div class="rea-details-end">
<p id="views">{ViewsFormat} Views - {DateFormat}</p>
<Fragment set:html={DescriptionFormat} />
</div>
</div>
<div style="display: flex; gap: 24px;">
<div class="rea-comments">
<h2>{t("WATCH.COMMENTS")}</h2>
{
comments.comments.map((comment) => (
<div class="comment">
<img
src={
DEFAULT_IMAGE_PROXY + "/" + comment.authorThumbnails[1].url
}
/>
<div>
<p>
<a href={comment.authorUrl}>{comment.author}</a> - 2 Months
Ago
</p>
<p>{comment.contentHtml}</p>
<p>
<ThumbsUp /> {comment.likeCount}
</p>
</div>
</div>
))
}
</div>
<div class="rea-recommendations">
<h2>{t("WATCH.RELATED")}</h2>
{
video.recommendedVideos.map((data) => (
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
))
}
</div>
</div>
</div>
<Dialog
Title="Download"
Description="Choose a download method"
Closable
CloseOnclick="DownloadDialogHide()"
>
<p>Video</p>
<div class="dialog-downloads-list">
<a href={video.formatStreams[1].url} download={video.title + '.mp4'} target="_blank">Download</a>
</div>
<p>Audio Only</p>
<div class="dialog-downloads-list">
<a href={video.adaptiveFormats[1].url} download={video.title + '.mp3'} target="_blank">Download</a>
</div>
</Dialog>
<Dialog
Title="Share"
Description="Choose a share method"
Closable
CloseOnclick="ShareDialogHide()"
>
<div class="dialog-downloads-list">
<a href={'https://mastodonshare.com/?url=' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Mastodon</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Misskey</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Firefish</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Elk</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Lemmy</a>
</div>
</Dialog>
</Base>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

20
src/pages/jp/404.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("jp");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>Error 404</h2>
<p>Page not found.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

9
src/pages/jp/category/gaming.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("jp");
---
<Category GradientHero="#269753" FetchData="?type=gaming" CategoryName={t("SIDEBAR.CATEGORY_LIST.GAMES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.GAMES_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/gaming"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

10
src/pages/jp/category/movies.astro
View file

@ -1,10 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("jp");
---
<Category GradientHero="#ff4f4f" FetchData="?type=movies" CategoryName={t("SIDEBAR.CATEGORY_LIST.MOVIES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.MOVIES_DESCRIPTION")}>
</Category>
<style is:inline>a[href="/category/movies"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

106
src/pages/jp/category/music.astro
View file

@ -1,106 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Default from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_VIDEO_PROXY } from "../../../../config.json";
// Components
import MusicItem from "@components/MusicItem.astro";
changeLanguage("jp");
// Fetch
const fetchFrom = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const response = await fetch(fetchFrom);
const data = await response.json();
const heroItem = data.slice(0, 1);
---
<Default FetchData="?type=movies" Title={t("SIDEBAR.CATEGORY_LIST.MUSIC")} Description={t("SIDEBAR.CATEGORY_LIST.MUSIC_DESCRIPTION")}>
<div class="category-hero">
<div class="c-hero-content">
<div style="width: 25%;">
<h2>Music</h2>
<p>Listen to the latest hits</p>
</div>
<div class="c-hero-video">
{heroItem.map((data) =>
<video autoplay muted src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + data.videoId + '&itag=22&local=true'}></video>
)}
</div>
</div>
</div>
<span id="gradient-header"></span>
<div class="or-mu">
<span></span>
<p id="title">{t("MUSIC.TITLE")}</p>
<p id="artist">{t("MUSIC.ARTIST")}</p>
<p id="date">{t("MUSIC.UPLOADED")}</p>
<p id="duration">{t("MUSIC.DURATION")}</p>
</div>
<div class="music-list">
{data.map((data) =>
<MusicItem
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
</div>
</Default>
<style is:inline>a[href="/en /category/music"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style lang="scss">
.category-hero {
margin-top: -80px;
background: linear-gradient(180deg, #502969, transparent);
padding-top: 80px;
.c-hero-content {
display: flex;
align-items: center;
margin: auto;
max-width: 1000px;
justify-content: space-between;
.c-hero-video {
-webkit-mask-box-image: radial-gradient(rgb(0 0 0 / 50%), transparent);
-webkit-mask-box-image: linear-gradient(90deg, black, rgba(0, 0, 0, 0));
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
video {
object-fit: cover;
object-position: center;
width: 75%;
height: 100%;
float: right;
-webkit-mask-box-image: linear-gradient(270deg, black, transparent);
}
}
}
}
.or-mu {
display: grid;
grid-auto-flow: column;
align-items: center;
text-decoration: none;
gap: 12px;
grid-template-columns: 60px auto auto 80px 64px;
max-width: 1000px;
margin: auto;
border-bottom: 1px #252525 solid;
margin-bottom: 24px;
position: sticky;
top: 58px;
background: black;
#artist, #duration, #date {
text-align: right;
}
#title {
font-weight: bold;
}
}
</style>

9
src/pages/jp/category/trending.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("jp");
---
<Category GradientHero="#ff650b" FetchData="" CategoryName={t("SIDEBAR.CATEGORY_LIST.TRENDING")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.TRENDING_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/trending"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

137
src/pages/jp/channel/[...slug].astro
View file

@ -1,137 +0,0 @@
---
import Base from "@layouts/Default.astro";
// i18n
import i18next, { t, changeLanguage } from "i18next";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
import { BrightStar, Donate, Download, ShareIos, ThumbsUp } from "@iconoir/vue";
// Components
import Video from "@components/VideoItem.astro";
changeLanguage("jp");
// Fetch
const SWV = Astro.url.href.split("channel/").pop();
const channel = await fetch(DEFAULT_DATA_PROXY + "/api/v1/channels/" + SWV).then((response) => response.json());
const DescriptionFormat = channel.descriptionHtml.replaceAll("\n", " <br/> ");
---
<Base Title="MinPluto" Description="">
<div class="channel-backdrop">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel">
<div class="channel-header">
<div class="channel-banner">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel-meta">
<div>
<img src={channel.authorThumbnails[1].url}/>
<h2>{channel.author}</h2>
<p>{channel.subCountText}</p>
</div>
<div>
<!-- {channel.isFamilyFriendly ? <p id="family-friendly"><BrightStar/> {t("CHANNEL.FAMILY_FRIENDLY")}</p> : null} -->
</div>
</div>
</div>
<div class="channel-content">
<!-- <div class="channel-tabs">
<a href="#">{t("CHANNEL.HOME")}</a>
<a href="#">{t("CHANNEL.VIDEOS")}</a>
<a href="#">{t("CHANNEL.COMMUNITY")}</a>
</div> -->
<div class="channel-tab-content">
<h2>{t("CHANNEL.ABOUT")} {channel.author}</h2>
<p><Fragment set:html={DescriptionFormat}/></p>
<hr/>
<h2>{t("CHANNEL.LATEST")}</h2>
<div class="video-grid">
{channel.latestVideos.map((data) =>
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
<!-- <a>View All Latest Videos</a> -->
</div>
</div>
</div>
</div>
</Base>
<style lang="scss">
.channel-backdrop img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: max-content;
filter: blur(30px) contrast(0.8);
z-index: -1;
transform: scale(1.4);
opacity: 0.3;
display: none;
}
.channel {
max-width: 1000px;
margin: auto;
.channel-header {
.channel-banner {
margin: 12px 0px;
img {
width: 100%;
border-radius: 10px;
}
}
.channel-meta {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
#family-friendly {
color: white;
background: #3b003b;
border: 1px #a500a5 solid;
border-radius: 3rem;
display: flex;
align-items: center;
padding: 6px 12px;
gap: 12px;
pointer-events: none;
}
div:nth-child(1) {
display: flex;
flex-direction: row;
gap: 12px;
img {
border-radius: 3rem;
width: 64px;
height: 64px;
}
}
}
}
.channel-content {
.channel-tabs {
padding-top: 24px;
padding-bottom: 12px;
cursor: default;
a {
text-decoration: none;
font-size: 18px;
padding: 12px 24px;
border-radius: 24px;
&:hover {
background: rgba(41, 41, 41, 0.5);
}
}
}
}
}
</style>

57
src/pages/jp/discover/tech.astro
View file

@ -1,57 +0,0 @@
---
import { changeLanguage } from "i18next";
import Discover from "@layouts/Discover.astro";
// Properties
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
// Use on top of Default Layout
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../../config.json";
// Discover Data
import Discover from "../../../data/discover.json";
changeLanguage("jp");
---
<Base>
<div class="video-grid">
{Discover.Tech.map((channel) =>
<a href={'/channel/' + channel.Link} style={"background: url('" + DEFAULT_DATA_PROXY + channel.Banner} class="discovery-channel">
<div class="dc-c">
<img src={DEFAULT_DATA_PROXY + channel.Logo}/>
<p>{channel.Name}</p>
</div>
</a>
)}
</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://sudovanilla.com/code/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>
<style lang="scss">
.discovery-channel {
text-decoration: none;
border-radius: 10px;
font-weight: bold;
background-position: center !important;
background-size: cover !important;
.dc-c {
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img {
width: 24%;
align-self: center;
border-radius: 10rem;
padding: 30px;
}
}
}
</style>

93
src/pages/jp/embed/[...slug].astro
View file

@ -1,93 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Embed from "@layouts/Embed.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
changeLanguage("jp");
// Fetch
const SWV = Astro.url.href.split("embed/").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
---
<Embed
Title={video.title}
EmbedId={video.videoId}
EmbedVideo={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
EmbedImage={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
EmbedTitle={video.title}
>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
</Embed>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

143
src/pages/jp/index.astro
View file

@ -1,143 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("jp");
// Fetch
const TrendingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending";
const TrendingResponse = await fetch(TrendingFetch);
const TrendingData = await TrendingResponse.json();
const TrendingSplit = TrendingData.slice(0, 1);
const MoviesFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=movies";
const MoviesResponse = await fetch(MoviesFetch);
const MoviesData = await MoviesResponse.json();
const MoviesSplit = MoviesData.slice(0, 1);
const MusicFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const MusicResponse = await fetch(MusicFetch);
const MusicData = await MusicResponse.json();
const MusicSplit = MusicData.slice(0, 1);
const GamingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=gaming";
const GamingResponse = await fetch(GamingFetch);
const GamingData = await GamingResponse.json();
const GamingSplit = GamingData.slice(0, 1);
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<img src="/images/backgrounds/1.webp"/>
</div>
<div class="category-select-grid">
{TrendingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/trending'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<GraphUp viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
</div>
</a>
)}
{MoviesSplit.map((data) =>
<a href={'/' + i18next.language + '/category/movies'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Movie viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
</div>
</a>
)}
{MusicSplit.map((data) =>
<a href={'/' + i18next.language + '/category/music'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<MusicDoubleNote viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
</div>
</a>
)}
{GamingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/gaming'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Gamepad viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
</div>
</a>
)}
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}
.goin-card {
height: 124px;
text-decoration: none;
border-radius: 10px;
background-size: cover !important;
background-position: center !important;
}
.goin-card-content {
display: flex;
align-items: center;
gap: 12px;
padding: 0px 12px;
height: 100%;
place-content: center;
border-radius: 10px;
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
}
.goin-card-content p {
font-size: 24px;
font-weight: bold;
position: absolute;
left: 0px;
bottom: 0px;
margin: 24px;
}
.goin-card-content svg {
position: absolute;
right: 0px;
bottom: 0px;
width: 50px;
height: 120px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
opacity: 0.3;
}
.goin-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.category-select-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 25px;
max-width: 1000px;
margin: auto;
padding: 0px 24px;
}
</style>

75
src/pages/jp/instance.astro
View file

@ -1,75 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { SERVER_ADMIN, ANALYLICS_TOOL, DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, DEFAULT_PLAYER, SERVER_LOCATION, MODIFIED, CUSTOM_SOURCE_CODE, STATISTICS } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("jp");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<div class="video-grid">
<div class="in">
<h2>Operated By</h2>
<p>{SERVER_ADMIN}</p>
</div>
<div class="in">
<h2>Analytics Software</h2>
<p>
{
STATISTICS
?
<p>{ANALYLICS_TOOL}</p>
:
<p>None</p>
}
</p>
</div>
<div class="in">
<h2>Location</h2>
<p>{SERVER_LOCATION}</p>
</div>
<div class="in">
<h2>Modified</h2>
<p>{MODIFIED ? <p>Yes</p> : <p>No</p>}</p>
</div>
<div class="in">
<h2>Video Proxy</h2>
<a href={DEFAULT_VIDEO_PROXY}>{DEFAULT_VIDEO_PROXY}</a>
</div>
<div class="in">
<h2>Image Proxy</h2>
<a href={DEFAULT_IMAGE_PROXY}>{DEFAULT_IMAGE_PROXY}</a>
</div>
</div>
{MODIFIED ? <p>Modified Source Code <a href={CUSTOM_SOURCE_CODE}>{CUSTOM_SOURCE_CODE}</a></p> : null}
<img src="/images/backgrounds/1.webp"/>
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}

66
src/pages/jp/m/about.astro
View file

@ -1,66 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { version } from "@root/package.json";
changeLanguage("jp");
---
<Base Title="MinPluto" Description="">
<div class="ms">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<h2>MinPluto</h2>
<p>{t("HOME.P1")}</p>
<hr/>
<p style="font-size: 14px;"><i>{t("HOME.P2")}</i></p>
<hr/>
<div style="display: flex; justify-content: space-evenly;">
<a href="https://community.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.STATUS")}</a>
<a href="https://status.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.FORUM")}</a>
<a href="https://sudovanilla.com/code/MinPluto/MinPluto" target="_blank">{t("SIDEBAR.FOOTER.SOURCE_CODE")}</a>
</div>
</div>
<p id="version">v{version}</p>
<img src="/images/backgrounds/1.webp"/>
</Base>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
}
.ms {
margin-top: 20%;
text-align: center;
padding: 0px 24px;
}
a {
color: white;
}
hr {
width: 100px;
border: none;
background: rgba(255, 255, 255, 0.1);
height: 4px;
border-radius: 1rem;
margin: 24px auto;
}
p#version {
position: fixed;
bottom: 88px;
left: 0px;
width: 100%;
background: #232323;
color: white;
padding: 24px 0px;
text-align: center;
}
</style>

40
src/pages/jp/m/categories.astro
View file

@ -1,40 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { HomeSimple, GraphUp, Movie, MusicDoubleNote, Gamepad, AppleImac2021Side, EmojiTalkingHappy, PizzaSlice, Treadmill, PeaceHand } from "@iconoir/vue";
changeLanguage("jp");
---
<Base Title="MinPluto" Description="">
<div style="padding: 0px 24px;">
<h2>Categories</h2>
<div id="c" style="display: flex;flex-direction: column;gap: 24px;">
<a href="/category/trending"><GraphUp/> {t("CATEGORY_LIST.TRENDING")}</a>
<a href="/category/movies"><Movie/> {t("CATEGORY_LIST.MOVIES")}</a>
<a href="/category/music"><MusicDoubleNote/> {t("CATEGORY_LIST.MUSIC")}</a>
<a href="/category/gaming"><Gamepad/> {t("CATEGORY_LIST.GAMES")}</a>
</div>
</div>
</Base>
<style lang="scss">
#c a {
color: white;
text-decoration: none;
background: linear-gradient(45deg, #636363, #181818);
padding: 48px 24px;
font-size: 24px;
display: flex;
align-items: center;
gap: 24px;
border-radius: 10px;
svg {
position: absolute;
right: 60px;
width: 100px;
height: 70px;
opacity: 0.4;
}
}
</style>

20
src/pages/jp/offline.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("jp");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>No Internet Connection</h2>
<p>It appears that you are offline, try connecting your device to the internet, and try again.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

35
src/pages/jp/search.astro
View file

@ -1,35 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import Video from "@components/VideoItem.astro";
changeLanguage("jp");
// Fetch
const SBO = Astro.url.href.split("search?query=").pop();
const response = await fetch(DEFAULT_DATA_PROXY + "/api/v1/search?q=" + SBO)
.catch((error) => {
console.log(error);
});
const data = await response.json();
---
<Base Title='MinPluto Search'>
<div class="page-title">
<h2>Search</h2>
</div>
<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>

207
src/pages/jp/watch.astro
View file

@ -1,207 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../config.json";
import { Donate, Download, ShareIos, ThumbsUp, MediaVideo } from "@iconoir/vue";
// Components
import Dialog from "@components/Dialog.astro";
import Video from "@components/VideoItem.astro";
changeLanguage("jp");
// Fetch
const SWV = Astro.url.href.split("watch?v=").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
const comments = await fetch(DEFAULT_DATA_PROXY + "/api/v1/comments/" + SWV).then((response) => response.json());
const Description = video.description;
const UploadDate = video.published;
const Views = video.viewCount;
const VideoSeconds = video.lengthSeconds;
let DescriptionFormat = Description.replaceAll("\n", " <br/> ");
// Format Published Date
const DateFormat = new Date(UploadDate * 1000).toLocaleDateString();
// Format Video Length
// Thanks to "mingjunlu" for helping out with the time format
new Date(VideoSeconds * 1000)
.toISOString()
.slice(14, 19)
.split(":")
.map(Number)
.join(":");
// Format Views
const ViewsConversion = Intl.NumberFormat("en", { notation: "compact" });
let ViewsFormat = ViewsConversion.format(Views);
---
<Base Title={video.title}>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
<div class="video-rea">
<div class="rea-details">
<p style="font-weight: bold; font-size: 24px;">{video.title}</p>
<div class="rea-details-start">
<a style="text-decoration: none;" href={video.authorUrl} class="rea-channel">
<img src={DEFAULT_IMAGE_PROXY + "/" + video.authorThumbnails[1].url} />
<div
style="display: flex; flex-direction: column; align-items: left;"
>
<h2 style="margin: 0px; font-weight: bold; font-size: 18px;">{video.author}</h2>
<p style="margin: 0px;" id="subs">
{video.subCountText} Subscribers
</p>
</div>
</a>
<div style="display: flex; flex-direction: row; align-items: left;">
<button onclick="DownloadDialogShow()"><Download /> Download</button>
<button onclick={'location.href = "/embed/' + video.videoId + '/"'}><MediaVideo /> Embed</button>
<button onclick="ShareDialogShow()"><ShareIos /> Share</button>
</div>
</div>
<div class="rea-details-end">
<p id="views">{ViewsFormat} Views - {DateFormat}</p>
<Fragment set:html={DescriptionFormat} />
</div>
</div>
<div style="display: flex; gap: 24px;">
<div class="rea-comments">
<h2>{t("WATCH.COMMENTS")}</h2>
{
comments.comments.map((comment) => (
<div class="comment">
<img
src={
DEFAULT_IMAGE_PROXY + "/" + comment.authorThumbnails[1].url
}
/>
<div>
<p>
<a href={comment.authorUrl}>{comment.author}</a> - 2 Months
Ago
</p>
<p>{comment.contentHtml}</p>
<p>
<ThumbsUp /> {comment.likeCount}
</p>
</div>
</div>
))
}
</div>
<div class="rea-recommendations">
<h2>{t("WATCH.RELATED")}</h2>
{
video.recommendedVideos.map((data) => (
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
))
}
</div>
</div>
</div>
<Dialog
Title="Download"
Description="Choose a download method"
Closable
CloseOnclick="DownloadDialogHide()"
>
<p>Video</p>
<div class="dialog-downloads-list">
<a href={video.formatStreams[1].url} download={video.title + '.mp4'} target="_blank">Download</a>
</div>
<p>Audio Only</p>
<div class="dialog-downloads-list">
<a href={video.adaptiveFormats[1].url} download={video.title + '.mp3'} target="_blank">Download</a>
</div>
</Dialog>
<Dialog
Title="Share"
Description="Choose a share method"
Closable
CloseOnclick="ShareDialogHide()"
>
<div class="dialog-downloads-list">
<a href={'https://mastodonshare.com/?url=' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Mastodon</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Misskey</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Firefish</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Elk</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Lemmy</a>
</div>
</Dialog>
</Base>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

20
src/pages/ru/404.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("ru");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>Error 404</h2>
<p>Page not found.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

9
src/pages/ru/category/gaming.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("ru");
---
<Category GradientHero="#269753" FetchData="?type=gaming" CategoryName={t("SIDEBAR.CATEGORY_LIST.GAMES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.GAMES_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/gaming"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

10
src/pages/ru/category/movies.astro
View file

@ -1,10 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("ru");
---
<Category GradientHero="#ff4f4f" FetchData="?type=movies" CategoryName={t("SIDEBAR.CATEGORY_LIST.MOVIES")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.MOVIES_DESCRIPTION")}>
</Category>
<style is:inline>a[href="/category/movies"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

106
src/pages/ru/category/music.astro
View file

@ -1,106 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Default from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_VIDEO_PROXY } from "../../../../config.json";
// Components
import MusicItem from "@components/MusicItem.astro";
changeLanguage("ru");
// Fetch
const fetchFrom = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const response = await fetch(fetchFrom);
const data = await response.json();
const heroItem = data.slice(0, 1);
---
<Default FetchData="?type=movies" Title={t("SIDEBAR.CATEGORY_LIST.MUSIC")} Description={t("SIDEBAR.CATEGORY_LIST.MUSIC_DESCRIPTION")}>
<div class="category-hero">
<div class="c-hero-content">
<div style="width: 25%;">
<h2>Music</h2>
<p>Listen to the latest hits</p>
</div>
<div class="c-hero-video">
{heroItem.map((data) =>
<video autoplay muted src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + data.videoId + '&itag=22&local=true'}></video>
)}
</div>
</div>
</div>
<span id="gradient-header"></span>
<div class="or-mu">
<span></span>
<p id="title">{t("MUSIC.TITLE")}</p>
<p id="artist">{t("MUSIC.ARTIST")}</p>
<p id="date">{t("MUSIC.UPLOADED")}</p>
<p id="duration">{t("MUSIC.DURATION")}</p>
</div>
<div class="music-list">
{data.map((data) =>
<MusicItem
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
</div>
</Default>
<style is:inline>a[href="/en /category/music"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style lang="scss">
.category-hero {
margin-top: -80px;
background: linear-gradient(180deg, #502969, transparent);
padding-top: 80px;
.c-hero-content {
display: flex;
align-items: center;
margin: auto;
max-width: 1000px;
justify-content: space-between;
.c-hero-video {
-webkit-mask-box-image: radial-gradient(rgb(0 0 0 / 50%), transparent);
-webkit-mask-box-image: linear-gradient(90deg, black, rgba(0, 0, 0, 0));
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
video {
object-fit: cover;
object-position: center;
width: 75%;
height: 100%;
float: right;
-webkit-mask-box-image: linear-gradient(270deg, black, transparent);
}
}
}
}
.or-mu {
display: grid;
grid-auto-flow: column;
align-items: center;
text-decoration: none;
gap: 12px;
grid-template-columns: 60px auto auto 80px 64px;
max-width: 1000px;
margin: auto;
border-bottom: 1px #252525 solid;
margin-bottom: 24px;
position: sticky;
top: 58px;
background: black;
#artist, #duration, #date {
text-align: right;
}
#title {
font-weight: bold;
}
}
</style>

9
src/pages/ru/category/trending.astro
View file

@ -1,9 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Category from "@layouts/Category.astro";
changeLanguage("ru");
---
<Category GradientHero="#ff650b" FetchData="" CategoryName={t("SIDEBAR.CATEGORY_LIST.TRENDING")} CategoryDescription={t("SIDEBAR.CATEGORY_LIST.TRENDING_DESCRIPTION")}></Category>
<style is:inline>a[href="/category/trending"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>

137
src/pages/ru/channel/[...slug].astro
View file

@ -1,137 +0,0 @@
---
import Base from "@layouts/Default.astro";
// i18n
import i18next, { t, changeLanguage } from "i18next";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
import { BrightStar, Donate, Download, ShareIos, ThumbsUp } from "@iconoir/vue";
// Components
import Video from "@components/VideoItem.astro";
changeLanguage("ru");
// Fetch
const SWV = Astro.url.href.split("channel/").pop();
const channel = await fetch(DEFAULT_DATA_PROXY + "/api/v1/channels/" + SWV).then((response) => response.json());
const DescriptionFormat = channel.descriptionHtml.replaceAll("\n", " <br/> ");
---
<Base Title="MinPluto" Description="">
<div class="channel-backdrop">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel">
<div class="channel-header">
<div class="channel-banner">
<img src={channel.authorBanners[1].url}/>
</div>
<div class="channel-meta">
<div>
<img src={channel.authorThumbnails[1].url}/>
<h2>{channel.author}</h2>
<p>{channel.subCountText}</p>
</div>
<div>
<!-- {channel.isFamilyFriendly ? <p id="family-friendly"><BrightStar/> {t("CHANNEL.FAMILY_FRIENDLY")}</p> : null} -->
</div>
</div>
</div>
<div class="channel-content">
<!-- <div class="channel-tabs">
<a href="#">{t("CHANNEL.HOME")}</a>
<a href="#">{t("CHANNEL.VIDEOS")}</a>
<a href="#">{t("CHANNEL.COMMUNITY")}</a>
</div> -->
<div class="channel-tab-content">
<h2>{t("CHANNEL.ABOUT")} {channel.author}</h2>
<p><Fragment set:html={DescriptionFormat}/></p>
<hr/>
<h2>{t("CHANNEL.LATEST")}</h2>
<div class="video-grid">
{channel.latestVideos.map((data) =>
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
)}
<!-- <a>View All Latest Videos</a> -->
</div>
</div>
</div>
</div>
</Base>
<style lang="scss">
.channel-backdrop img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: max-content;
filter: blur(30px) contrast(0.8);
z-index: -1;
transform: scale(1.4);
opacity: 0.3;
display: none;
}
.channel {
max-width: 1000px;
margin: auto;
.channel-header {
.channel-banner {
margin: 12px 0px;
img {
width: 100%;
border-radius: 10px;
}
}
.channel-meta {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
#family-friendly {
color: white;
background: #3b003b;
border: 1px #a500a5 solid;
border-radius: 3rem;
display: flex;
align-items: center;
padding: 6px 12px;
gap: 12px;
pointer-events: none;
}
div:nth-child(1) {
display: flex;
flex-direction: row;
gap: 12px;
img {
border-radius: 3rem;
width: 64px;
height: 64px;
}
}
}
}
.channel-content {
.channel-tabs {
padding-top: 24px;
padding-bottom: 12px;
cursor: default;
a {
text-decoration: none;
font-size: 18px;
padding: 12px 24px;
border-radius: 24px;
&:hover {
background: rgba(41, 41, 41, 0.5);
}
}
}
}
}
</style>

57
src/pages/ru/discover/tech.astro
View file

@ -1,57 +0,0 @@
---
import { changeLanguage } from "i18next";
import Discover from "@layouts/Discover.astro";
// Properties
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
// Use on top of Default Layout
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../../config.json";
// Discover Data
import Discover from "../../../data/discover.json";
changeLanguage("ru");
---
<Base>
<div class="video-grid">
{Discover.Tech.map((channel) =>
<a href={'/channel/' + channel.Link} style={"background: url('" + DEFAULT_DATA_PROXY + channel.Banner} class="discovery-channel">
<div class="dc-c">
<img src={DEFAULT_DATA_PROXY + channel.Logo}/>
<p>{channel.Name}</p>
</div>
</a>
)}
</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://sudovanilla.com/code/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>
<style lang="scss">
.discovery-channel {
text-decoration: none;
border-radius: 10px;
font-weight: bold;
background-position: center !important;
background-size: cover !important;
.dc-c {
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img {
width: 24%;
align-self: center;
border-radius: 10rem;
padding: 30px;
}
}
}
</style>

93
src/pages/ru/embed/[...slug].astro
View file

@ -1,93 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Embed from "@layouts/Embed.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../../config.json";
changeLanguage("ru");
// Fetch
const SWV = Astro.url.href.split("embed/").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
---
<Embed
Title={video.title}
EmbedId={video.videoId}
EmbedVideo={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
EmbedImage={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
EmbedTitle={video.title}
>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
</Embed>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

143
src/pages/ru/index.astro
View file

@ -1,143 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("ru");
// Fetch
const TrendingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending";
const TrendingResponse = await fetch(TrendingFetch);
const TrendingData = await TrendingResponse.json();
const TrendingSplit = TrendingData.slice(0, 1);
const MoviesFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=movies";
const MoviesResponse = await fetch(MoviesFetch);
const MoviesData = await MoviesResponse.json();
const MoviesSplit = MoviesData.slice(0, 1);
const MusicFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=music";
const MusicResponse = await fetch(MusicFetch);
const MusicData = await MusicResponse.json();
const MusicSplit = MusicData.slice(0, 1);
const GamingFetch = DEFAULT_DATA_PROXY + "/api/v1/trending?type=gaming";
const GamingResponse = await fetch(GamingFetch);
const GamingData = await GamingResponse.json();
const GamingSplit = GamingData.slice(0, 1);
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<img src="/images/backgrounds/1.webp"/>
</div>
<div class="category-select-grid">
{TrendingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/trending'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<GraphUp viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
</div>
</a>
)}
{MoviesSplit.map((data) =>
<a href={'/' + i18next.language + '/category/movies'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Movie viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
</div>
</a>
)}
{MusicSplit.map((data) =>
<a href={'/' + i18next.language + '/category/music'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<MusicDoubleNote viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
</div>
</a>
)}
{GamingSplit.map((data) =>
<a href={'/' + i18next.language + '/category/gaming'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/' + data.videoThumbnails[1].url + '")'} class="goin-card">
<div class="goin-card-content">
<Gamepad viewBox="0 0 10 24"/>
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
</div>
</a>
)}
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}
.goin-card {
height: 124px;
text-decoration: none;
border-radius: 10px;
background-size: cover !important;
background-position: center !important;
}
.goin-card-content {
display: flex;
align-items: center;
gap: 12px;
padding: 0px 12px;
height: 100%;
place-content: center;
border-radius: 10px;
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
}
.goin-card-content p {
font-size: 24px;
font-weight: bold;
position: absolute;
left: 0px;
bottom: 0px;
margin: 24px;
}
.goin-card-content svg {
position: absolute;
right: 0px;
bottom: 0px;
width: 50px;
height: 120px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
opacity: 0.3;
}
.goin-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.category-select-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 25px;
max-width: 1000px;
margin: auto;
padding: 0px 24px;
}
</style>

75
src/pages/ru/instance.astro
View file

@ -1,75 +0,0 @@
---
import i18next, { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import Dialog from "@components/Dialog.astro";
// Configuration
import { SERVER_ADMIN, ANALYLICS_TOOL, DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, DEFAULT_PLAYER, SERVER_LOCATION, MODIFIED, CUSTOM_SOURCE_CODE, STATISTICS } from "../../../config.json";
import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
changeLanguage("ru");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<hr/>
<div class="video-grid">
<div class="in">
<h2>Operated By</h2>
<p>{SERVER_ADMIN}</p>
</div>
<div class="in">
<h2>Analytics Software</h2>
<p>
{
STATISTICS
?
<p>{ANALYLICS_TOOL}</p>
:
<p>None</p>
}
</p>
</div>
<div class="in">
<h2>Location</h2>
<p>{SERVER_LOCATION}</p>
</div>
<div class="in">
<h2>Modified</h2>
<p>{MODIFIED ? <p>Yes</p> : <p>No</p>}</p>
</div>
<div class="in">
<h2>Video Proxy</h2>
<a href={DEFAULT_VIDEO_PROXY}>{DEFAULT_VIDEO_PROXY}</a>
</div>
<div class="in">
<h2>Image Proxy</h2>
<a href={DEFAULT_IMAGE_PROXY}>{DEFAULT_IMAGE_PROXY}</a>
</div>
</div>
{MODIFIED ? <p>Modified Source Code <a href={CUSTOM_SOURCE_CODE}>{CUSTOM_SOURCE_CODE}</a></p> : null}
<img src="/images/backgrounds/1.webp"/>
</div>
</Base>
<style is:inline>a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
.category-select-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
.force-center {
text-align: center;
padding-top: 10%;
}

66
src/pages/ru/m/about.astro
View file

@ -1,66 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { version } from "@root/package.json";
changeLanguage("ru");
---
<Base Title="MinPluto" Description="">
<div class="ms">
<img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
<h2>MinPluto</h2>
<p>{t("HOME.P1")}</p>
<hr/>
<p style="font-size: 14px;"><i>{t("HOME.P2")}</i></p>
<hr/>
<div style="display: flex; justify-content: space-evenly;">
<a href="https://community.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.STATUS")}</a>
<a href="https://status.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.FORUM")}</a>
<a href="https://sudovanilla.com/code/MinPluto/MinPluto" target="_blank">{t("SIDEBAR.FOOTER.SOURCE_CODE")}</a>
</div>
</div>
<p id="version">v{version}</p>
<img src="/images/backgrounds/1.webp"/>
</Base>
<style>
img[src="/images/backgrounds/1.webp"] {
position: fixed;
bottom: 0px;
left: 50%;
transform: translate(-57%);
-webkit-mask-image: linear-gradient(180deg, transparent 5%, rgb(0 0 0) 52%, rgb(0 0 0) 44%, transparent 95%);
}
@media only screen and (min-width: 875px) {
img[src="/images/backgrounds/1.webp"] {
display: none;
}
}
.ms {
margin-top: 20%;
text-align: center;
padding: 0px 24px;
}
a {
color: white;
}
hr {
width: 100px;
border: none;
background: rgba(255, 255, 255, 0.1);
height: 4px;
border-radius: 1rem;
margin: 24px auto;
}
p#version {
position: fixed;
bottom: 88px;
left: 0px;
width: 100%;
background: #232323;
color: white;
padding: 24px 0px;
text-align: center;
}
</style>

40
src/pages/ru/m/categories.astro
View file

@ -1,40 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import { HomeSimple, GraphUp, Movie, MusicDoubleNote, Gamepad, AppleImac2021Side, EmojiTalkingHappy, PizzaSlice, Treadmill, PeaceHand } from "@iconoir/vue";
changeLanguage("ru");
---
<Base Title="MinPluto" Description="">
<div style="padding: 0px 24px;">
<h2>Categories</h2>
<div id="c" style="display: flex;flex-direction: column;gap: 24px;">
<a href="/category/trending"><GraphUp/> {t("CATEGORY_LIST.TRENDING")}</a>
<a href="/category/movies"><Movie/> {t("CATEGORY_LIST.MOVIES")}</a>
<a href="/category/music"><MusicDoubleNote/> {t("CATEGORY_LIST.MUSIC")}</a>
<a href="/category/gaming"><Gamepad/> {t("CATEGORY_LIST.GAMES")}</a>
</div>
</div>
</Base>
<style lang="scss">
#c a {
color: white;
text-decoration: none;
background: linear-gradient(45deg, #636363, #181818);
padding: 48px 24px;
font-size: 24px;
display: flex;
align-items: center;
gap: 24px;
border-radius: 10px;
svg {
position: absolute;
right: 60px;
width: 100px;
height: 70px;
opacity: 0.4;
}
}
</style>

20
src/pages/ru/offline.astro
View file

@ -1,20 +0,0 @@
---
import { changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
changeLanguage("ru");
---
<Base Title="MinPluto" Description="">
<div class="force-center">
<h2>No Internet Connection</h2>
<p>It appears that you are offline, try connecting your device to the internet, and try again.</p>
</div>
</Base>
<style>
.force-center {
text-align: center;
padding-top: 10%;
}
</style>

35
src/pages/ru/search.astro
View file

@ -1,35 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
// Configuration
import { DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY } from "../../../config.json";
import Video from "@components/VideoItem.astro";
changeLanguage("ru");
// Fetch
const SBO = Astro.url.href.split("search?query=").pop();
const response = await fetch(DEFAULT_DATA_PROXY + "/api/v1/search?q=" + SBO)
.catch((error) => {
console.log(error);
});
const data = await response.json();
---
<Base Title='MinPluto Search'>
<div class="page-title">
<h2>Search</h2>
</div>
<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>

207
src/pages/ru/watch.astro
View file

@ -1,207 +0,0 @@
---
import { t, changeLanguage } from "i18next";
import Base from "@layouts/Default.astro";
import "@styles/video.scss";
// Configuration
import { DEFAULT_VIDEO_PROXY, DEFAULT_DATA_PROXY, DEFAULT_IMAGE_PROXY, SERVER_DOMAIN } from "../../../config.json";
import { Donate, Download, ShareIos, ThumbsUp, MediaVideo } from "@iconoir/vue";
// Components
import Dialog from "@components/Dialog.astro";
import Video from "@components/VideoItem.astro";
changeLanguage("ru");
// Fetch
const SWV = Astro.url.href.split("watch?v=").pop();
const video = await fetch(DEFAULT_DATA_PROXY + "/api/v1/videos/" + SWV).then((response) => response.json());
const comments = await fetch(DEFAULT_DATA_PROXY + "/api/v1/comments/" + SWV).then((response) => response.json());
const Description = video.description;
const UploadDate = video.published;
const Views = video.viewCount;
const VideoSeconds = video.lengthSeconds;
let DescriptionFormat = Description.replaceAll("\n", " <br/> ");
// Format Published Date
const DateFormat = new Date(UploadDate * 1000).toLocaleDateString();
// Format Video Length
// Thanks to "mingjunlu" for helping out with the time format
new Date(VideoSeconds * 1000)
.toISOString()
.slice(14, 19)
.split(":")
.map(Number)
.join(":");
// Format Views
const ViewsConversion = Intl.NumberFormat("en", { notation: "compact" });
let ViewsFormat = ViewsConversion.format(Views);
---
<Base Title={video.title}>
<div class="video-container">
<video
class="zorn-player"
autoplay
poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title}
src={DEFAULT_VIDEO_PROXY + '/latest_version?id=' + video.videoId + '&itag=22&local=true'}
>
</video>
</div>
<div class="video-rea">
<div class="rea-details">
<p style="font-weight: bold; font-size: 24px;">{video.title}</p>
<div class="rea-details-start">
<a style="text-decoration: none;" href={video.authorUrl} class="rea-channel">
<img src={DEFAULT_IMAGE_PROXY + "/" + video.authorThumbnails[1].url} />
<div
style="display: flex; flex-direction: column; align-items: left;"
>
<h2 style="margin: 0px; font-weight: bold; font-size: 18px;">{video.author}</h2>
<p style="margin: 0px;" id="subs">
{video.subCountText} Subscribers
</p>
</div>
</a>
<div style="display: flex; flex-direction: row; align-items: left;">
<button onclick="DownloadDialogShow()"><Download /> Download</button>
<button onclick={'location.href = "/embed/' + video.videoId + '/"'}><MediaVideo /> Embed</button>
<button onclick="ShareDialogShow()"><ShareIos /> Share</button>
</div>
</div>
<div class="rea-details-end">
<p id="views">{ViewsFormat} Views - {DateFormat}</p>
<Fragment set:html={DescriptionFormat} />
</div>
</div>
<div style="display: flex; gap: 24px;">
<div class="rea-comments">
<h2>{t("WATCH.COMMENTS")}</h2>
{
comments.comments.map((comment) => (
<div class="comment">
<img
src={
DEFAULT_IMAGE_PROXY + "/" + comment.authorThumbnails[1].url
}
/>
<div>
<p>
<a href={comment.authorUrl}>{comment.author}</a> - 2 Months
Ago
</p>
<p>{comment.contentHtml}</p>
<p>
<ThumbsUp /> {comment.likeCount}
</p>
</div>
</div>
))
}
</div>
<div class="rea-recommendations">
<h2>{t("WATCH.RELATED")}</h2>
{
video.recommendedVideos.map((data) => (
<Video
ID={data.videoId}
Title={data.title}
Creator={data.author}
Views={data.viewCount}
UploadDate={data.published}
Length={data.lengthSeconds}
/>
))
}
</div>
</div>
</div>
<Dialog
Title="Download"
Description="Choose a download method"
Closable
CloseOnclick="DownloadDialogHide()"
>
<p>Video</p>
<div class="dialog-downloads-list">
<a href={video.formatStreams[1].url} download={video.title + '.mp4'} target="_blank">Download</a>
</div>
<p>Audio Only</p>
<div class="dialog-downloads-list">
<a href={video.adaptiveFormats[1].url} download={video.title + '.mp3'} target="_blank">Download</a>
</div>
</Dialog>
<Dialog
Title="Share"
Description="Choose a share method"
Closable
CloseOnclick="ShareDialogHide()"
>
<div class="dialog-downloads-list">
<a href={'https://mastodonshare.com/?url=' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Mastodon</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Misskey</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Firefish</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Elk</a>
<a href={'https://share.minpluto.org/?url' + SERVER_DOMAIN + '/watch?q=' + video.videoId} target="_blank">Lemmy</a>
</div>
</Dialog>
</Base>
<script is:inline>
function DownloadDialogShow() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function DownloadDialogHide() {
var DownloadDialog = document.querySelector('#dialog-Download')
var BackdropDialog = document.querySelector('.dialog-backdrop')
DownloadDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
function ShareDialogShow() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'flex'
BackdropDialog.style.display = 'inherit'
}
function ShareDialogHide() {
var ShareDialog = document.querySelector('#dialog-Share')
var BackdropDialog = document.querySelector('.dialog-backdrop')
ShareDialog.style.display = 'none'
BackdropDialog.style.display = 'none'
}
</script>
<style lang="scss">
.video-container {
max-width: 1000px;
margin: auto;
.zorn-player {
border-radius: 10px;
}
.zorn-player-controls {
border-radius: 0px 0px 10px 10px;
}
}
.video-item {
margin-bottom: 24px;
}
.hidden {
display: none;
}
.dialog-downloads-list {
display: grid;
grid-gap: 12px;
a {
background: rgb(51 51 51);
border: 2px rgba(255,255,255,0.05) solid;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
padding: 9px 16px;
}
}
</style>

20
src/public/scripts/zorn.js
View file

@ -65,20 +65,16 @@
</div>
<div class="row-1">
<div class="row-1-start">
<div class="volume-controls">
<button data-title="Mute (m)" class="volume-button" id="volume-button">${VolumeHighIcon}</button>
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01"/>
</div>
<div class="time">
<time id="time-elapsed">00:00</time>
<span> / </span>
<time id="duration">00:00</time>
</div>
<button id="play-pause">${PlayIcon}</button>
<button id="skip-back">${Backward15Icon}</button>
<button id="skip-forth">${Forward15Icon}</button>
<div class="time">
<time id="time-elapsed">00:00</time>
<span> / </span>
<time id="duration">00:00</time>
</div>
</div>
<div class="row-1-center">
<button id="skip-back">${Backward15Icon}</button>
<button id="play-pause">${PlayIcon}</button>
<button id="skip-forth">${Forward15Icon}</button>
</div>
<div class="row-1-end">
<button id="subtitles">${CaptionsIcon}</button>