124 lines
3.6 KiB
Svelte
124 lines
3.6 KiB
Svelte
<script>
|
|
import { getStreamContext } from '$lib/streamContext.svelte.ts';
|
|
|
|
const ctx = getStreamContext();
|
|
ctx.clearCurrent();
|
|
</script>
|
|
|
|
<div class="stream-information">
|
|
<h1 class="title">Auditorium of Babel</h1>
|
|
<h3 class="backlink">ID: aptget</h3>
|
|
</div>
|
|
|
|
<div class="description-bubble">
|
|
<p>Hello, there, welcome to V1.7.</p>
|
|
<p>
|
|
<u>2026-09-06 update:</u> caching behavior has been greatly improved when trying to download
|
|
streams in poor network conditions.<br />
|
|
You can now also resume interrupted downloads and see how much disk space is being used when the
|
|
downloads-only filter is enabled.<br />
|
|
I've done a bit of refactoring to the codebase, so don't hesitate to message me if you're having
|
|
any weird issues!<br /><br />
|
|
|
|
<u>2026-03-16 update:</u> you can now cache streams offline for playback in low-connectivity
|
|
environments (and to prevent buffering)!<br />
|
|
Simply click on the download icon in the stream list (and click again to remove them from cache).
|
|
You can also filter by cached streams at the top. This all goes into your browser storage, and
|
|
a stream is generally 100~250MB depending on its length.
|
|
</p>
|
|
<hr />
|
|
<p>
|
|
Still in construction. The design is responsive now, so phones should work well enough!
|
|
Needs touch events though.
|
|
</p>
|
|
<p>
|
|
There's gonna be an update feed soon (with RSS, too), but for now, just check the most
|
|
recent stream to see if anything new has been uploaded. I'll post something here if I fill
|
|
in the back-catalog.
|
|
</p>
|
|
|
|
<p>
|
|
Also, event sets of mine are available <a href="https://apt-get.xyz/music/">right here</a>.
|
|
They've got visuals alongside and are proper DJ mixes, which makes them rather different
|
|
from the usual streams. They should live under this subdomain soon enough too!
|
|
</p>
|
|
|
|
<p style="font-size: smaller">
|
|
Mascot drawn by <a href="https://twitter.com/yuuybee/">yuuybee</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<style>
|
|
.stream-information {
|
|
width: 70%;
|
|
padding: 1px;
|
|
margin-top: 2%;
|
|
margin-left: 3%;
|
|
min-height: 8%;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.backlink {
|
|
font-family: 'Montserrat';
|
|
}
|
|
|
|
.title {
|
|
font-size: x-large;
|
|
font-family: 'Montserrat';
|
|
right: 0;
|
|
position: absolute;
|
|
margin-right: 3%;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.description-bubble {
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 0.75);
|
|
border: 1px solid #ccc;
|
|
color: black;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
margin-left: 3%;
|
|
border-radius: 5px;
|
|
min-width: 70%;
|
|
max-width: 70%;
|
|
width: fit-content;
|
|
font-family: Verdana;
|
|
font-size: small;
|
|
}
|
|
|
|
.description-bubble :global(:first-child) {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.description-bubble :global(:last-child) {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.description-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-width: 10px 0 10px 10px;
|
|
border-color: transparent transparent transparent #ccc;
|
|
top: 8px;
|
|
right: -10px;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.stream-information {
|
|
width: initial;
|
|
}
|
|
.description-bubble {
|
|
max-width: initial;
|
|
}
|
|
|
|
.description-bubble::after {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
</style>
|