Finally embedded my twitch stream into the site, now just need to get links posting to work.
This commit is contained in:
Zed A. Shaw
parent
26f61eb68b
commit
592e1c4fd8
4 changed files with 346 additions and 38 deletions
203
pages/copy/twitch.html
Normal file
203
pages/copy/twitch.html
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<div class="text-gray-950 bg-gray-200">
|
||||
<bar class="bg-gray-400 justify-evenly items-center">
|
||||
<img src="/icons/twitch.svg" />
|
||||
<span>Browse</span>
|
||||
<img src="/icons/menu.svg" />
|
||||
<bar class="p-0! bg-gray-300 rounded-lg border-1 border-gray-700">
|
||||
<input placeholder="Search" />
|
||||
<img src="/icons/search.svg" />
|
||||
</bar>
|
||||
<img src="/icons/crown.svg" />
|
||||
<button type="button">Log In</button>
|
||||
<button type="button">Sign Up</button>
|
||||
<img src="/icons/person-standing.svg" />
|
||||
</bar>
|
||||
|
||||
<div class="p-1">
|
||||
<bar>
|
||||
<img src="/icons/chevron-left.svg" />
|
||||
|
||||
<shape class="video">
|
||||
Main Video
|
||||
</shape>
|
||||
|
||||
<img src="/icons/chevron-right.svg" />
|
||||
</bar>
|
||||
|
||||
<block>
|
||||
<a class="text-xl">Live on Twitch</a>
|
||||
<grid class="grid-cols-2 p-0! gap-2">
|
||||
<block class="p-0!">
|
||||
<shape class="video">Sample Video</shape>
|
||||
<div class="flex align-top gap-3">
|
||||
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</block>
|
||||
|
||||
<block class="p-0!">
|
||||
<shape class="video">Sample Video</shape>
|
||||
<div class="flex align-top gap-3">
|
||||
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</block>
|
||||
</bar>
|
||||
</block>
|
||||
|
||||
<div class="flex justify-center items-center">
|
||||
<a href="#">Show more v</a>
|
||||
</div>
|
||||
|
||||
<block>
|
||||
<span><a href="#">Categories</a> we think you'll like</span>
|
||||
|
||||
<grid class="grid-cols-4 p-0! gap-2">
|
||||
<block class="p-0!">
|
||||
<shape class="aspect-[9/12]!">Category</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</block>
|
||||
<block class="p-0!">
|
||||
<shape class="aspect-[9/12]!">Category</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</block>
|
||||
<block class="p-0!">
|
||||
<shape class="aspect-[9/12]!">Category</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</block>
|
||||
<block class="p-0!">
|
||||
<shape class="aspect-[9/12]!">Category</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</block>
|
||||
</grid>
|
||||
</block>
|
||||
|
||||
<grid class="grid-cols-3">
|
||||
<stack class="p-0!">
|
||||
<button type="button" class="rounded-xxl text-left text-xxl">Games</button>
|
||||
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/gamepad.svg" />
|
||||
</stack>
|
||||
<stack class="p-0!">
|
||||
<button type="button" class="rounded-xxl text-left text-xxl">IRL</button>
|
||||
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/mic.svg" />
|
||||
</stack>
|
||||
<stack class="p-0!">
|
||||
<button type="button" class="rounded-xxl text-left text-xxl">Music</button>
|
||||
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/headphones.svg" />
|
||||
</stack>
|
||||
<stack class="p-0!">
|
||||
<button type="button" class="rounded-xxl text-left text-xxl">Creative</button>
|
||||
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/paintbrush.svg" />
|
||||
</stack>
|
||||
<stack class="p-0!">
|
||||
<button type="button" class="rounded-xxl text-left text-xxl">Esports</button>
|
||||
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/trophy.svg" />
|
||||
</stack>
|
||||
</grid>
|
||||
|
||||
<block>
|
||||
<a class="text-xl">Live on Twitch</a>
|
||||
<grid class="grid-cols-2 p-0! gap-2">
|
||||
<block class="p-0!">
|
||||
<shape class="video">Sample Video</shape>
|
||||
<div class="flex align-top gap-3">
|
||||
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</block>
|
||||
|
||||
<block class="p-0!">
|
||||
<shape class="video">Sample Video</shape>
|
||||
<div class="flex align-top gap-3">
|
||||
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-bold">Title</span>
|
||||
<span>Name</span>
|
||||
<span>Game Title</span>
|
||||
<span>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</block>
|
||||
</bar>
|
||||
</block>
|
||||
|
||||
<block class="justify-center items-center">
|
||||
<h4>an amazon company</h4>
|
||||
</block>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,34 +2,46 @@
|
|||
let req = new GetJson("/api/stream/1");
|
||||
let link_req = new GetJson("/api/stream/1/links");
|
||||
</script>
|
||||
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
|
||||
|
||||
<div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
|
||||
<div class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
|
||||
<span>Stream Viewer</span>
|
||||
<div id="twitch-player" class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
|
||||
</div>
|
||||
|
||||
<div class="p-6 flex flex-col justify-center">
|
||||
<div>
|
||||
<h2>Links Found in Chat</h2>
|
||||
<ul x-init="links = await link_req.theData()" x-data="{links: {}}">
|
||||
<template x-for="item in links">
|
||||
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Links Found in Chat</h2>
|
||||
<ul x-init="links = await link_req.theData()" x-data="{links: {}}">
|
||||
<template x-for="item in links">
|
||||
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form action="/api/link" method="POST">
|
||||
<card class="card">
|
||||
<top>Submit a Link</top>
|
||||
<middle>
|
||||
<input id="stream_id" name="stream_id" type="hidden" value="1">
|
||||
<input id="url" name="url" type="text" placeholder="Link Url">
|
||||
<input id="description" name="description" type="text" placeholder="Description">
|
||||
</middle>
|
||||
<bottom>
|
||||
<button id="submit" type="submit">Send It</button>
|
||||
</bottom>
|
||||
</card>
|
||||
</form>
|
||||
<form action="/api/link" method="POST">
|
||||
<card class="card">
|
||||
<top>Submit a Link</top>
|
||||
<middle>
|
||||
<input id="stream_id" name="stream_id" type="hidden" value="1">
|
||||
<input id="url" name="url" type="text" placeholder="Link Url">
|
||||
<input id="description" name="description" type="text" placeholder="Description">
|
||||
</middle>
|
||||
<bottom>
|
||||
<button id="submit" type="submit">Send It</button>
|
||||
</bottom>
|
||||
</card>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
autoplay: false,
|
||||
muted: true,
|
||||
channel: "zedashaw"
|
||||
};
|
||||
var player = new Twitch.Player("twitch-player", options);
|
||||
player.setVolume(0.5);
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue