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

Redesign Live Streams

Browse source
This commit is contained in:
Korbs 2024-09-08 23:37:31 -04:00
parent 641927f864
commit cd314d0780
3 changed files with 119 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -12,7 +12,7 @@
"funding": [
{
"type": "SudoVanilla",
"url": "https://sudovanilla.org/donate/"
"url": "https://liberapay.com/SudoVanilla/"
}
],
"keywords": [

196
source/src/pages/live.astro
View file

@ -17,11 +17,13 @@ const CreatorName = Astro.url.href.split("live?=").pop();
const Creator = await fetch("https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,).then((response) => response.json());
// Check if the Creator is live
if(Creator.isLive === true) {
if(Creator.data.isLive == true) {
var IsLive = true
} else if(Creator.isLive === false) {
} else if(Creator.data.isLive == false) {
var IsLive = false
}
console.log(Creator.data.isLive)
---
<Base>
@ -36,23 +38,25 @@ if(Creator.isLive === true) {
</p>
</noscript>
<div class="creator-tw-backdrop" style={"background-image: radial-gradient(ellipse farthest-side at center top, #" + Creator.data.colorHex + ", hsla(0, 0%, 0%, 0) 100%);"}></div>
<div class="creator-tw">
<img class="creator-tw-banner" src={Creator.data.banner} />
<div class="creator-tw-start">
<img src={"https://ipx.sudovanilla.org" + "/" + Creator.data.pfp} />
<p style="font-size: 14px;">{Creator.data.username}</p>
{IsLive ?
<span>|</span>
<p style="font-weight: bold">{Creator.data.stream.title}</p>
:
null
}
<img class="creator-tw-banner" src={"https://ipx.sudovanilla.org" + "/" + Creator.data.banner} />
<div class="creator-tw-start-top">
{IsLive ? <span id="streamer-online" class="tw-status">Online</span> : <span id="streamer-offline" class="tw-status">Offline</span>}
<h2 style="margin: 24px 0px 6px 0px;">{Creator.data.username}</h2>
<p style="margin: 0px;font-size: 12px;color: gray;">{Creator.data.followers} Followers</p>
<br/>
<p>{Creator.data.about}</p>
<div class="creator-tw-socials">
{Creator.data.socials.map((social) =>
<a style={"background: #" + Creator.data.colorHex} href={social.url}>{social.name}</a>
)}
</div>
</div>
<div class="creator-tw-start-bottom"></div>
</div>
<div class="creator-tw-end">
<p style="font-size: 14px;opacity: 0.5;">{Creator.data.followers} Followers</p>
<!-- <button><ArrowDown /></button> -->
</div>
</div>
{IsLive ?
<Zorn
Live
@ -62,20 +66,52 @@ if(Creator.isLive === true) {
"/hls.m3u8"}
/>
:
<div style={'background: linear-gradient(0deg, #23232345, #' + Creator.data.colorHex + ');'} class="creator-is-offline">
<p>They're currently offline.</p>
<div class="creator-is-offline">
<p>Offline</p>
</div>
}
</div>
</div>
</Base>
{IsLive ?
<style>
.creator-tw {
backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
}
.creator-tw-start::before, .creator-tw-banner {
border-radius: 12px 0px 0px 12px;
}
</style>
:
<style>
.creator-tw-start::before, .creator-tw-banner {
border-radius: 12px;
}
</style>
}
<style is:global lang="scss">
.creator-tw {
.creator-tw-backdrop {
background-color: transparent;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
.creator-tw {
border-radius: 12px;
margin: 24px;
display: grid;
grid-template-columns: 300px auto;
min-height: 500px;
.creator-tw-start {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 24px 18px 24px;
margin: 24px 24px -60px 24px;
flex-direction: column;
padding: 24px;
&::before {
content: "";
position: absolute;
@ -84,9 +120,7 @@ if(Creator.isLive === true) {
width: 100%;
height: 100%;
z-index: -1;
backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
-webkit-backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
border-radius: 12px 12px 0px 0px;
backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
}
.creator-tw-banner {
position: absolute;
@ -96,76 +130,64 @@ if(Creator.isLive === true) {
height: 100%;
object-fit: cover;
z-index: -2;
border-radius: 12px 12px 0px 0px;
}
.creator-tw-start {
display: flex;
align-items: center;
gap: 12px;
img {
width: 48px;
height: 48px;
.tw-status {
background: transparent;
border-radius: 3rem;
padding: 6px 12px;
font-size: 12px;
font-weight: bold;
}
#streamer-online {
background: #c95050;
}
#streamer-offline {
background: #454545;
}
.creator-tw-socials {
display: flex;
gap: 6px;
flex-wrap: wrap;
a {
text-decoration: none;
font-size: 14px;
border-radius: 3rem;
padding: 6px 12px;
}
}
}
.creator-tw-end {
display: flex;
align-items: center;
gap: 12px;
button {
background: transparent;
color: white;
border: none;
aspect-ratio: 1;
border-radius: 4px;
&:hover {
background: rgba(128, 128, 128, 0.25);
}
svg {
width: 20px;
}
position: relative;
.video-container {
video {
border-radius: 0px 12px 12px 0px;
}
.video-controls {
border-radius: 0px 0px 12px 0px !important;
}
}
.creator-is-offline {
color: white;
font-weight: bold;
text-align: center;
margin: 48px 24px 0px 24px;
padding: 16% 0px;
border-radius: 12px;
font-size: 32px;
}
</style>
<style is:global lang="scss">
.video-container {
max-width: 100%;
margin: 48px 24px 23px 24px;
}
.video-item {
margin-bottom: 24px;
}
.video-controls,
video {
border-radius: 12px;
}
.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;
}
align-items: center;
display: flex;
justify-content: center;
height: 100%;
font-size: 90px;
letter-spacing: -0.014em;
font-weight: 900;
color: #ffffff4f;
animation: 4.2s TextSpacingIn ease-in-out;
}
}
}
@keyframes TextSpacingIn {
from {
letter-spacing: 0.086em;
opacity: 0.45;
}
to {
letter-spacing: -0.014em;
opacity: 1;
}
}
</style>