(cache)Beatbump/app/src/routes/+layout.svelte at master · snuffyDev/Beatbump · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<script lang="ts">
	import Nav from "$components/Nav/Nav.svelte";
	import Player from "$lib/components/Player/Player.svelte";
	import Wrapper from "$lib/components/Wrapper/Wrapper.svelte";
	import Alert from "$lib/components/Alert/Alert.svelte";
	import { showAddToPlaylistPopper } from "$stores/stores";

	import { Popper } from "$lib/components/Popper";

	import PlaylistPopper from "$lib/components/PlaylistPopper";
	import "@fontsource/commissioner/variable.css";

	import { queue } from "$lib/stores/list";
	import Fullscreen from "$lib/components/Player/Fullscreen.svelte";
	import GroupSessionCreator from "$lib/components/GroupSessionCreator";
	import { fullscreenStore } from "$lib/components/Player/channel";
	import { groupSession } from "$lib/stores";
	import { AudioPlayer } from "$lib/player";
	import { page } from "$app/stores";
	import { afterNavigate, beforeNavigate } from "$app/navigation";
	import { browser, dev } from "$app/environment";
	import SessionListService from "$stores/list/sessionList";
	import { get } from "svelte/store";
	import { Logger } from "$lib/utils/logger";

	let main: HTMLElement;
	$: key = $page.data.key;

	let isFullscreen = false;
	$: $fullscreenStore === "open"
		? setTimeout(() => {
				isFullscreen = true;
		  }, 425)
		: setTimeout(() => {
				isFullscreen = false;
		  }, 0);

	$: hasplayer = $queue.length !== 0;

	$: if (dev && browser) {
		console.log($SessionListService);
		if (page && !window.$page) {
			Object.defineProperty(window, "$page", {
				get() {
					return get(page);
				},
				configurable: true,
			});
		}
	}

	afterNavigate(({from, to,}) => {
		if (import.meta.env.SSR) return;
		if (main) main.scrollTop = 0;
	});
</script>

<svelte:window
	on:beforeunload={() => {
		if (!browser) return;
		if (groupSession.initialized && groupSession.hasActiveSession) {
			groupSession.disconnect();
		}
		AudioPlayer.dispose();
	}}
/>
<Nav {key} />
<Popper {main} />
<div
	class="wrapper app-content-m"
	{hasplayer}
	bind:this={main}
	style:overflow-y={$page.route.id === "/search/[slug]" && !$page.url.search.includes("all") ? "hidden" : "auto"}
	id="wrapper"
>
	<Wrapper
		{key}
		{main}
	>
		<slot />
	</Wrapper>
</div>
<PlaylistPopper
	on:close={() => {
		showAddToPlaylistPopper.set({ state: false, item: {} });
	}}
/>
<GroupSessionCreator />
<Alert --alert-bottom={hasplayer ? "5.75em" : "0rem"} />
<Fullscreen state={isFullscreen ? "open" : "closed"} />
<footer
	class="footer-container"
	class:show-player={hasplayer}
>
	<!-- <GroupSessionManager /> -->
	<Player />
</footer>

<style
	lang="scss"
	global
>
	@use "../global/redesign/main.scss" as *;
	.footer-container {
		transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 350ms, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 350ms;
		opacity: 0;
		transform: translate3d(0, var(--player-bar-height), 0);
	}
	.show-player {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		will-change: transform;
	}
	.wrapper {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
</style>