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