update Streams
This commit is contained in:
Korbs
parent
3e650a2acd
commit
be1ef71d6f
3 changed files with 133 additions and 22 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import { defineConfig } from 'astro/config'
|
||||
import node from '@astrojs/node'
|
||||
import vue from '@astrojs/vue'
|
||||
import astroI18next from "astro-i18next"
|
||||
import mdx from '@astrojs/mdx'
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ else if (Astro.url.href.includes('?platform=twitch')) {
|
|||
Title={channel.title}
|
||||
Creator={channel.username}
|
||||
Avatar={channel.streamer.pfp}
|
||||
Link={'/channel/twitch/' + channel.streamer.name}
|
||||
Link={'/live?=' + channel.streamer.name}
|
||||
Thumbnail={channel.preview}
|
||||
View={channel.viewers}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,146 @@
|
|||
---
|
||||
// Layout
|
||||
import Base from "@layouts/Default.astro";
|
||||
import "@styles/video.scss";
|
||||
|
||||
// Environment Variables
|
||||
const DEFAULT_STREAM_PROXY = import.meta.env.DEFAULT_STREAM_PROXY
|
||||
const DEFAULT_STREAM_DATA_PROXY = import.meta.env.DEFAULT_STREAM_DATA_PROXY
|
||||
// const DEFAULT_IMAGE_PROXY = import.meta.env.DEFAULT_IMAGE_PROXY
|
||||
// const DEFAULT_STREAM_PROXY = import.meta.env.DEFAULT_STREAM_PROXY
|
||||
// const DEFAULT_STREAM_DATA_PROXY = import.meta.env.DEFAULT_STREAM_DATA_PROXY
|
||||
|
||||
// Components
|
||||
import { Zorn } from "@minpluto/zorn";
|
||||
import { ArrowDown } from "@iconoir/vue";
|
||||
|
||||
// Fetch
|
||||
const Channel = Astro.url.href.split("live?=").pop();
|
||||
const video = await fetch(DEFAULT_STREAM_PROXY + "/api/v1/videos/" + Channel).then((response) => response.json());
|
||||
const CreatorName = Astro.url.href.split("live?=").pop();
|
||||
const Creator = await fetch(
|
||||
"https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,
|
||||
).then((response) => response.json());
|
||||
---
|
||||
|
||||
<Base Title={video.title}>
|
||||
<Base>
|
||||
<noscript>
|
||||
<p>In order to watch a live stream on Poke, you'll need JavaScript enabled.</p>
|
||||
<p>
|
||||
In order to watch a Twitch live stream on MinPluto, your browser is
|
||||
required to have JavaScript enabled.
|
||||
</p>
|
||||
<p>
|
||||
If your browser does not support JavaScript, try a modern web browser such
|
||||
as Firefox.
|
||||
</p>
|
||||
</noscript>
|
||||
<div class="video-container">
|
||||
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
|
||||
data-setup='{}'>
|
||||
<source src={DEFAULT_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
</Base>
|
||||
<link href="/twitch/video.js/video-js.css" rel="stylesheet">
|
||||
<script is:inline src="/twitch/video.js/video.js"></script>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
|
||||
|
||||
<script is:inline>
|
||||
var player = videojs('my_video_1');
|
||||
player.play();
|
||||
</script>
|
||||
<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>
|
||||
<span>|</span>
|
||||
<p style="font-weight: bold">{Creator.data.stream.title}</p>
|
||||
</div>
|
||||
<div class="creator-tw-end">
|
||||
<p style="font-size: 14px;opacity: 0.5;">{Creator.data.followers} Followers</p>
|
||||
<!-- <button><ArrowDown /></button> -->
|
||||
</div>
|
||||
</div>
|
||||
<Zorn
|
||||
Live
|
||||
Video={"https://twitch-backend.sudovanilla.org" +
|
||||
"/proxy/stream/" +
|
||||
CreatorName +
|
||||
"/hls.m3u8"}
|
||||
/>
|
||||
</Base>
|
||||
|
||||
<style is:global lang="scss">
|
||||
.creator-tw {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 24px 18px 24px;
|
||||
margin: 24px 24px -60px 24px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
.creator-tw-banner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
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;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Reference in a new issue