When is WAN (aka whenplane and whenwan.show) is a site that is meant to make it easier to tell a few things
- When the next WAN show is (compensating for timezones)
- How late the WAN show is
- How long the WAN show has been running
- Historical start/end times
This site was made using Svelte and SvelteKit.
It is hosted on Cloudflare Pages and uses Workers KV to record start/end times automatically.
Since the pre-show always starts simultaneously on twitch and floatplane, we can just look at the twitch API to tell if the pre-show has started or not. If it has started, we double-check the title to check that it is indeed the WAN show, and record the start date (from the api to account for the delay between the stream starting and it being checked)
Once a pre-show is started, it is recorded in a temporary key in Workers KV.
A similar process is used to determining the main show start time, however this time using the YouTube API instead of twitch. However, due to the massive rate-limiting on the YouTube API, we only use the real YouTube API when there is an actual live stream. We determine if any stream is running by using a fairly simple page-scraping solution. If they are streaming, then we use the YouTube API to check the title, and record the start time.
The end time recording is simpler, however. There is not an easy way to get the end time of a stream, so we just record the time that we see it was no longer online.
Long after the show will have ended, a simple scheduled Worker will come along and collapse those 3 temporary keys (pre-show start, main show start, and show end times) into one key for the day.
You might have noticed that shows much older than this site are still displayed on the history page. This is thanks to fetching from the youtube and floatplane apis, combined with some manual recording to fill in the gaps
Because YouTube's API lets you fetch live stream details, which includes the start and end times, we already have the main show's length. We then subtract that from the Floatplane VOD's length, and we have the lengths for both the pre and main show, as well as times for all three.
If you wish to contribute, here are a few pointers.
I would recommend using pnpm as it is much faster than npm, especially if you install the same dependencies often. It also saves disk space if you have multiple projects with the same dependencies.
The SvelteKit docs are a great way to learn the structure of the project, as well as what certain files/folders are there for.
I would also recommend going through the Svelte Tutorial (at least the intro) to understand svelte components. If you already know HTML/JS/CSS, it's easy! (I actually had fun while learning svelte)
Before starting the dev server, make sure you've installed the dependencies
pnpm installNext, you need to set your API credentials. Create a .env file and fill in the contents
TWITCH_CLIENT_ID=...
TWITCH_SECRET=...The .env file should be ignored by git, but still take caution to ensure that secrets do not make it into any commits!
The .env file is only used during development. Variables in production are set in the cloudflare dashboard.
After setting up your credentials, you can start a dev server and preview your changes:
pnpm devOnce the server is started, you can press h to see the shortcuts you can use:
Shortcuts
press r to restart the server
press u to show server url
press o to open in browser
press c to clear console
press q to quit
Generally, I only use o (to open in a browser) and q (to quit)
Press o to open the preview in your browser.
Note that it will be a bit slower than the final site,
as most optimisations only happen during final build time.
A local KV emulator is used automatically, which stores cache data and history in the kv-data folder