Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add stream frame when the countdown reaches 0 #130

Closed
wants to merge 2 commits into from
Closed

feat: add stream frame when the countdown reaches 0 #130

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07e145f
add stream frame when the countdown reaches 0
SantiMit1 Feb 24, 2024
84b8676
Merge branch 'main' into main
SantiMit1 Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions src/sections/Countdown.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import Date from "@/components/Date.astro"
import { EVENT_TIMESTAMP } from "@/consts/event-date"
---


<section class="my-0 lg:my-32 flex flex-col gap-y-10 place-items-center" aria-label="cuenta atrás">

<LaVeladaLogo class="text-primary" />
<p
class="uppercase text-lg font-medium text-primary opacity-80 text-center text-balance"
>
Para el Evento de Presentación faltan
</p>

<div
class="flex flex-row gap-x-1 text-primary uppercase font-semibold"
data-date={EVENT_TIMESTAMP} role="timer"
Expand All @@ -31,6 +31,9 @@ import { EVENT_TIMESTAMP } from "@/consts/event-date"

<Date time="00" dateType="Segundos" attribute={{ "data-seconds": "" }} />
</div>

<!-- TODO: cambiar el queryParam parent cuando se mude la pagina -->
<iframe src="https://player.twitch.tv/?channel=ibai&parent=https://lavelada.dev" title="Ibai en Twitch" id="twitch-iframe" class="w-full md:w-2/3 aspect-video hidden" allowfullscreen="true"></iframe>
</section>

<script>
Expand All @@ -51,6 +54,8 @@ import { EVENT_TIMESTAMP } from "@/consts/event-date"
const timestamp = $countdown.getAttribute("data-date")
if (!timestamp) return

const $stream = document.querySelector("#twitch-iframe")

const date = new Date(+timestamp).getTime()

const formatTime = (time: number) => {
Expand All @@ -76,6 +81,11 @@ import { EVENT_TIMESTAMP } from "@/consts/event-date"
if ($seconds instanceof HTMLElement) {
$seconds.innerText = formatTime((diff % MINUTE) / SECOND)
}

if (diff < 0) {
$stream?.classList.remove("hidden")
$countdown?.classList.add("hidden")
}
}

setInterval(updateCountdown, SECOND)
Expand Down
Loading