audio streaming app
plyr.fm
fix: hide app chrome on embed routes and match font (#333)
authored by
GitHub
967b6ec5
4a9f37d7
+21
-17
+20
-16
frontend/src/routes/+layout.svelte
+20
-16
frontend/src/routes/+layout.svelte
···
24
$page.url.pathname.match(/^\/u\/[^/]+\/album\/[^/]+/) // album pages have specific metadata
25
);
26
27
// sync auth state from layout data (fetched by +layout.ts)
28
$effect(() => {
29
if (browser) {
···
149
</svelte:head>
150
151
<div class="app-layout">
152
-
<main class="main-content" class:with-queue={showQueue}>
153
{@render children?.()}
154
</main>
155
156
-
{#if showQueue}
157
<aside class="queue-sidebar">
158
<Queue />
159
</aside>
160
{/if}
161
</div>
162
163
-
<button
164
-
class="queue-toggle"
165
-
onclick={toggleQueue}
166
-
aria-pressed={showQueue}
167
-
aria-label="toggle queue (Q)"
168
-
title={showQueue ? 'hide queue (Q)' : 'show queue (Q)'}
169
-
>
170
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
171
-
<line x1="3" y1="6" x2="21" y2="6"></line>
172
-
<line x1="3" y1="12" x2="21" y2="12"></line>
173
-
<line x1="3" y1="18" x2="21" y2="18"></line>
174
-
</svg>
175
-
</button>
176
177
-
<Player />
178
<Toast />
179
180
<style>
···
24
$page.url.pathname.match(/^\/u\/[^/]+\/album\/[^/]+/) // album pages have specific metadata
25
);
26
27
+
let isEmbed = $derived($page.url.pathname.startsWith('/embed/'));
28
+
29
// sync auth state from layout data (fetched by +layout.ts)
30
$effect(() => {
31
if (browser) {
···
151
</svelte:head>
152
153
<div class="app-layout">
154
+
<main class="main-content" class:with-queue={showQueue && !isEmbed}>
155
{@render children?.()}
156
</main>
157
158
+
{#if showQueue && !isEmbed}
159
<aside class="queue-sidebar">
160
<Queue />
161
</aside>
162
{/if}
163
</div>
164
165
+
{#if !isEmbed}
166
+
<button
167
+
class="queue-toggle"
168
+
onclick={toggleQueue}
169
+
aria-pressed={showQueue}
170
+
aria-label="toggle queue (Q)"
171
+
title={showQueue ? 'hide queue (Q)' : 'show queue (Q)'}
172
+
>
173
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
174
+
<line x1="3" y1="6" x2="21" y2="6"></line>
175
+
<line x1="3" y1="12" x2="21" y2="12"></line>
176
+
<line x1="3" y1="18" x2="21" y2="18"></line>
177
+
</svg>
178
+
</button>
179
180
+
<Player />
181
+
{/if}
182
<Toast />
183
184
<style>
+1
-1
frontend/src/routes/embed/track/[id]/+page.svelte
+1
-1
frontend/src/routes/embed/track/[id]/+page.svelte