Add support for Twtich
This commit is contained in:
parent
468b91eff3
commit
3ed08baa80
35
src/pages/live.astro
Normal file
35
src/pages/live.astro
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
// Layout
|
||||||
|
import Base from "@layouts/Default.astro";
|
||||||
|
|
||||||
|
// Environment Variables
|
||||||
|
const DEFAULT_SAFETWITCH_BACKEND = import.meta.env.DEFAULT_SAFETWITCH_BACKEND
|
||||||
|
|
||||||
|
// Components
|
||||||
|
|
||||||
|
// Fetch
|
||||||
|
const Channel = Astro.url.href.split("live?=").pop();
|
||||||
|
const video = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/v1/videos/" + Channel).then((response) => response.json());
|
||||||
|
const comments = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/v1/comments/" + Channel).then((response) => response.json());
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base Title={video.title}>
|
||||||
|
<noscript>
|
||||||
|
<p>In order to watch a live stream on Poke, you'll need JavaScript enabled.</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={'https://' + DEFAULT_SAFETWITCH_BACKEND + '/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>
|
||||||
175
src/pages/search.astro
Normal file
175
src/pages/search.astro
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
---
|
||||||
|
// Layout
|
||||||
|
import Base from '@layouts/Default.astro'
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Video from '@components/common/VideoItem.astro'
|
||||||
|
|
||||||
|
// Environment Variables
|
||||||
|
const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
|
||||||
|
const DEFAULT_SAFETWITCH_BACKEND = import.meta.env.DEFAULT_SAFETWITCH_BACKEND
|
||||||
|
|
||||||
|
// Fetch
|
||||||
|
const Query = Astro.url.href.split("search?q=").pop()
|
||||||
|
const InvidiousResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/search?q=" + Query)
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
|
||||||
|
const TwitchResponse = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/search/?query=" + Query)
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
|
||||||
|
const InvidiousData = await InvidiousResponse.json()
|
||||||
|
const TwitchData = await TwitchResponse.json()
|
||||||
|
---
|
||||||
|
|
||||||
|
<Base Title="Poke Search">
|
||||||
|
<div class="page-title">
|
||||||
|
<h2>Search</h2>
|
||||||
|
</div>
|
||||||
|
<p>Twitch Channels related to "{Query}"</p>
|
||||||
|
<div class="twitch-channels">
|
||||||
|
{TwitchData.data.channels.map((channel) =>
|
||||||
|
<a href={'/channel/twitch/' + channel.username} class="channel">
|
||||||
|
<img id="backgound"src={channel.pfp}/>
|
||||||
|
<div class="tc-info">
|
||||||
|
<img src={channel.pfp}/>
|
||||||
|
<div>
|
||||||
|
<h2>{channel.username}</h2>
|
||||||
|
<p>{channel.about}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>Twitch Live streams with the tag "{Query}"</p>
|
||||||
|
<div class="twitch-channels">
|
||||||
|
{TwitchData.data.relatedChannels.map((channel) =>
|
||||||
|
<a href={'/channel/twitch/' + channel.username} class="channel-stream">
|
||||||
|
<img class="stream-preview" src={channel.stream.preview}/>
|
||||||
|
<div class="channel-info">
|
||||||
|
<img src={channel.pfp}/>
|
||||||
|
<div>
|
||||||
|
<h2>{channel.username}</h2>
|
||||||
|
<p>{channel.about}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>YouTube Videos</p>
|
||||||
|
<div class="video-grid">
|
||||||
|
{InvidiousData.map((data) =>
|
||||||
|
<Video
|
||||||
|
ID={data.videoId}
|
||||||
|
Title={data.title}
|
||||||
|
Creator={data.author}
|
||||||
|
Views={data.viewCount}
|
||||||
|
UploadDate={data.published}
|
||||||
|
Length={data.lengthSeconds}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.video-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
grid-gap: 24px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0px 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.video-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
grid-gap: 24px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 0px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitch-channels {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channel-stream {
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
padding: 0px !important;
|
||||||
|
.stream-preview {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
.channel-info {
|
||||||
|
flex-direction: row !important;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
background: linear-gradient(#0000,#282828);
|
||||||
|
border-radius: 0px 0px 12px 12px;
|
||||||
|
width: 100%;
|
||||||
|
img {
|
||||||
|
margin-left: 12px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
padding: 0px 6px 18px 96px;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.channel, .channel-stream {
|
||||||
|
text-decoration: none;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px transparent solid;
|
||||||
|
border-radius: 12px;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 500px;
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
border-color: #333;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border-radius: 5rem;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
#backgound {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
z-index: -1;
|
||||||
|
object-fit: unset;
|
||||||
|
}
|
||||||
|
h2, p {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.tc-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
padding: 24px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 80px;
|
||||||
|
backdrop-filter: blur(20px) brightness(0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in a new issue