From 873e28a1b66820d9bc63ba3de66d94912f589272 Mon Sep 17 00:00:00 2001 From: snuffy <72365477+snuffyDev@users.noreply.github.com> Date: Sat, 14 Jan 2023 15:36:46 -0500 Subject: [PATCH 01/37] stylesheet tweaks, code tweaks --- app/.svelte-kit/ambient.d.ts | 14 +--- .../types/src/routes/home/$types.d.ts | 13 ++- .../types/src/routes/home/proxy+page.ts | 22 ----- app/src/global/redesign/base/_base.scss | 1 + app/src/global/redesign/base/_forms.scss | 21 ++--- app/src/global/redesign/base/_layout.scss | 2 +- app/src/global/redesign/base/_theme.scss | 1 + app/src/global/redesign/base/_typography.scss | 19 ++--- app/src/global/redesign/modules/_alert.scss | 1 - app/src/global/redesign/modules/_player.scss | 4 +- app/src/global/redesign/modules/_select.scss | 5 +- app/src/lib/actions/gestures/handlers.ts | 1 - app/src/lib/actions/gestures/types.ts | 6 +- app/src/lib/components/Alert/Alert.svelte | 45 +++-------- .../ArtistPageHeader/ArtistPageHeader.svelte | 17 ++-- .../lib/components/Carousel/Carousel.svelte | 4 +- .../components/Carousel/CarouselItem.svelte | 59 ++++++-------- app/src/lib/components/Item/Listing.svelte | 2 + app/src/lib/components/ListItem/index.scss | 1 + app/src/lib/components/Nav/Nav.svelte | 2 +- app/src/lib/components/Player/Controls.svelte | 2 - .../lib/components/Player/Fullscreen.svelte | 2 + app/src/lib/components/Player/Player.svelte | 1 - .../lib/components/Player/PlayerButton.svelte | 2 + .../lib/components/Popper/PopperButton.svelte | 2 + app/src/lib/components/Search/Search.svelte | 1 + app/src/lib/components/Wrapper/Wrapper.svelte | 4 + app/src/lib/configs/dropdowns.config.ts | 40 ++++++---- app/src/lib/configs/schemas.ts | 18 +++++ app/src/lib/parsers/player.ts | 44 +++++----- app/src/lib/parsers/release.ts | 22 ++--- app/src/lib/player.ts | 34 ++++++++ app/src/lib/shared/createShare.ts | 27 ++++++- app/src/lib/stores/index.ts | 3 - app/src/lib/stores/list/sessionList.ts | 28 ++++++- app/src/lib/stores/stores.ts | 25 ++---- app/src/lib/utils/buffer.ts | 69 ---------------- app/src/lib/utils/collections/array.ts | 6 +- app/src/lib/utils/index.ts | 3 +- app/src/lib/utils/utils.ts | 3 +- .../typeGuards/isIListItemRenderer.ts | 10 +++ app/src/routes/+layout.svelte | 2 +- .../artist/[slug]/releases/+page.svelte | 12 ++- .../routes/artist/[slug]/releases/+page.ts | 4 +- app/src/routes/home.json/+server.ts | 80 +++++++++---------- .../routes/home/{+page.ts => +page.server.ts} | 0 app/src/routes/release/+page.svelte | 2 +- app/src/routes/search/[slug]/+page.svelte | 5 +- app/src/routes/test/+page.svelte | 20 ++--- app/src/routes/trending/+page.svelte | 13 +-- 50 files changed, 350 insertions(+), 374 deletions(-) delete mode 100644 app/.svelte-kit/types/src/routes/home/proxy+page.ts create mode 100644 app/src/lib/configs/schemas.ts rename app/src/routes/home/{+page.ts => +page.server.ts} (100%) diff --git a/app/.svelte-kit/ambient.d.ts b/app/.svelte-kit/ambient.d.ts index 2ffce615..fb90eac5 100644 --- a/app/.svelte-kit/ambient.d.ts +++ b/app/.svelte-kit/ambient.d.ts @@ -43,13 +43,11 @@ declare module '$env/static/private' { export const NVM_INC: string; export const XDG_MENU_PREFIX: string; export const TERM_PROGRAM_VERSION: string; - export const _P9K_TTY: string; export const NODE: string; export const LC_ADDRESS: string; export const DOTNET_ROOT: string; export const LC_NAME: string; export const SSH_AUTH_SOCK: string; - export const P9K_TTY: string; export const COLOR: string; export const npm_config_local_prefix: string; export const DESKTOP_SESSION: string; @@ -61,11 +59,10 @@ declare module '$env/static/private' { export const GTK_MODULES: string; export const XDG_SEAT: string; export const PWD: string; - export const LOGNAME: string; export const XDG_SESSION_DESKTOP: string; + export const LOGNAME: string; export const QT_QPA_PLATFORMTHEME: string; export const XDG_SESSION_TYPE: string; - export const PANEL_GDK_CORE_DEVICE_EVENTS: string; export const PNPM_HOME: string; export const npm_config_init_module: string; export const XAUTHORITY: string; @@ -75,8 +72,8 @@ declare module '$env/static/private' { export const GDM_LANG: string; export const GTK2_RC_FILES: string; export const HOME: string; - export const LC_PAPER: string; export const LANG: string; + export const LC_PAPER: string; export const LS_COLORS: string; export const XDG_CURRENT_DESKTOP: string; export const npm_package_version: string; @@ -182,13 +179,11 @@ declare module '$env/dynamic/private' { NVM_INC: string; XDG_MENU_PREFIX: string; TERM_PROGRAM_VERSION: string; - _P9K_TTY: string; NODE: string; LC_ADDRESS: string; DOTNET_ROOT: string; LC_NAME: string; SSH_AUTH_SOCK: string; - P9K_TTY: string; COLOR: string; npm_config_local_prefix: string; DESKTOP_SESSION: string; @@ -200,11 +195,10 @@ declare module '$env/dynamic/private' { GTK_MODULES: string; XDG_SEAT: string; PWD: string; - LOGNAME: string; XDG_SESSION_DESKTOP: string; + LOGNAME: string; QT_QPA_PLATFORMTHEME: string; XDG_SESSION_TYPE: string; - PANEL_GDK_CORE_DEVICE_EVENTS: string; PNPM_HOME: string; npm_config_init_module: string; XAUTHORITY: string; @@ -214,8 +208,8 @@ declare module '$env/dynamic/private' { GDM_LANG: string; GTK2_RC_FILES: string; HOME: string; - LC_PAPER: string; LANG: string; + LC_PAPER: string; LS_COLORS: string; XDG_CURRENT_DESKTOP: string; npm_package_version: string; diff --git a/app/.svelte-kit/types/src/routes/home/$types.d.ts b/app/.svelte-kit/types/src/routes/home/$types.d.ts index b1eeecee..59cd7707 100644 --- a/app/.svelte-kit/types/src/routes/home/$types.d.ts +++ b/app/.svelte-kit/types/src/routes/home/$types.d.ts @@ -8,9 +8,14 @@ export type RequiredKeys = { [K in keyof T]-?: {} extends { [P in K]: T[K] } type OutputDataShape = MaybeWithVoid> & Partial> & Record> type EnsureDefined = T extends null | undefined ? {} : T; type OptionalUnion, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude]?: never } & U : never; +type PageServerParentData = EnsureDefined; type PageParentData = EnsureDefined; -export type PageServerData = null; -export type PageLoad = OutputDataShape> = Kit.Load; -export type PageLoadEvent = Parameters[0]; -export type PageData = Expand>>> & OptionalUnion>>>>>; \ No newline at end of file +export type PageServerLoad = OutputDataShape> = Kit.ServerLoad; +export type PageServerLoadEvent = Parameters[0]; +export type ActionData = unknown; +export type PageServerData = Expand>>>>>; +export type PageData = Expand & EnsureDefined>; +export type Action | void = Record | void> = Kit.Action +export type Actions | void = Record | void> = Kit.Actions +export type RequestEvent = Kit.RequestEvent; \ No newline at end of file diff --git a/app/.svelte-kit/types/src/routes/home/proxy+page.ts b/app/.svelte-kit/types/src/routes/home/proxy+page.ts deleted file mode 100644 index dcf906db..00000000 --- a/app/.svelte-kit/types/src/routes/home/proxy+page.ts +++ /dev/null @@ -1,22 +0,0 @@ -// @ts-nocheck -import { error } from "@sveltejs/kit"; -import type { PageLoad } from "./$types"; - -export const load = async ({ fetch, data: data$1, url }: Parameters[0]) => { - console.time("startLoad"); - const response = await fetch("/home.json"); - const data = await response.json(); - console.timeEnd("startLoad"); - if (!response.ok) { - throw error(500, `Error: ${response.statusText}`); - } - const { carousels, headerThumbnail = undefined, continuations, visitorData } = data; - - return { - carousels, - headerThumbnail, - continuations, - visitorData, - path: url.pathname, - }; -}; diff --git a/app/src/global/redesign/base/_base.scss b/app/src/global/redesign/base/_base.scss index 8cfa82cc..8df16c81 100644 --- a/app/src/global/redesign/base/_base.scss +++ b/app/src/global/redesign/base/_base.scss @@ -1,5 +1,6 @@ @forward "./reset"; @forward "./variables"; +@forward "./css-variables"; @forward "./colors"; @forward "./layout"; @forward "./forms"; diff --git a/app/src/global/redesign/base/_forms.scss b/app/src/global/redesign/base/_forms.scss index 8905c490..c1312964 100644 --- a/app/src/global/redesign/base/_forms.scss +++ b/app/src/global/redesign/base/_forms.scss @@ -53,7 +53,7 @@ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { - display: none; + filter:brightness(10); } .input { @@ -100,7 +100,7 @@ input[type="search"]::-webkit-search-results-decoration { } &:has(input[type="search"]) { display: grid; - grid-template-columns: 1fr 31px; + grid-template-columns: 1fr 2.75rem; grid-template-areas: "start end"; } } @@ -117,17 +117,20 @@ input[type="search"] { pointer-events: all; cursor: pointer; z-index: 5; - display: flex; - align-items: center; - justify-content: center; + display: inline-grid; + place-items: center; + background-color: #0000; - justify-self: center; - - width: 100%; z-index: 10; color: inherit; + transition: 100ms cubic-bezier(0.47, 0.25, 0.745, 0.715) background-color; grid-area: end; - background-clip: content-box; + // background-clip: content-box; border-radius: inherit; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + &:hover { + background-color: var(--form-contrast-bg) !important; + } } diff --git a/app/src/global/redesign/base/_layout.scss b/app/src/global/redesign/base/_layout.scss index 0c7cb483..9fa54782 100644 --- a/app/src/global/redesign/base/_layout.scss +++ b/app/src/global/redesign/base/_layout.scss @@ -225,7 +225,7 @@ main { max-width: 100%; isolation: isolate; z-index: 25; - @media screen and (min-width: 640px) { + @media screen and (min-width: 720px) { z-index: 152; } } diff --git a/app/src/global/redesign/base/_theme.scss b/app/src/global/redesign/base/_theme.scss index ca776a3d..52d57fb4 100644 --- a/app/src/global/redesign/base/_theme.scss +++ b/app/src/global/redesign/base/_theme.scss @@ -61,6 +61,7 @@ html { &.#{$theme} { --mobile-popper-bg: #{map-get($themes, $theme, "side")}; --form-bg: #{map-get($themes, $theme, "form")}; + --form-contrast-bg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 33%, $saturation: -100%, $alpha: -85%)}; --disabled-form-bg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 17%, $alpha: -25%)}; --disabled-form-fg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 60%)}; --bottom-bg: #{map-get($themes, $theme, "bottom")}; diff --git a/app/src/global/redesign/base/_typography.scss b/app/src/global/redesign/base/_typography.scss index 23544f7c..62dfbf74 100644 --- a/app/src/global/redesign/base/_typography.scss +++ b/app/src/global/redesign/base/_typography.scss @@ -101,9 +101,9 @@ a:not(.no-style), position: relative; place-content: center; display: inline-flex; - contain: paint; + // contain: paint; font-size: 0.5rem; - +text-rendering: optimizeLegibility; &::before { content: "E"; position: absolute; @@ -111,20 +111,21 @@ a:not(.no-style), z-index: 5; place-self: center; - - font-weight: 800; + // inset:0; + font-weight: 700; aspect-ratio: 1/1; + line-height: 1.1; } - font-size: xx-small; - padding: 0.7em; + font-size: 0.675em; + padding: 0.0875em; aspect-ratio: 1/1; background: #ffffffbf; - border-radius: 0.3em; + border-radius: 0.25em; vertical-align: middle; - font-family: "InterVariable", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; - color: #000 !important; + color: rgb(8, 8, 8) !important; } a small { diff --git a/app/src/global/redesign/modules/_alert.scss b/app/src/global/redesign/modules/_alert.scss index e6452a22..e0c33671 100644 --- a/app/src/global/redesign/modules/_alert.scss +++ b/app/src/global/redesign/modules/_alert.scss @@ -8,7 +8,6 @@ padding: 1rem 2rem; border-radius: 0.8rem; width: calc(100% - 2rem); - margin: 1em auto 0; text-align: center; text-shadow: 0.1rem 0.05rem rgba(0, 0, 0, 0.685); color: #fff; diff --git a/app/src/global/redesign/modules/_player.scss b/app/src/global/redesign/modules/_player.scss index 97093610..551a2500 100644 --- a/app/src/global/redesign/modules/_player.scss +++ b/app/src/global/redesign/modules/_player.scss @@ -102,14 +102,14 @@ input[type="range"] { background: none; overflow: hidden; outline: none; - background: #333333; + background: hsl(0, 0%, 20%); border-radius: 1.666667rem; height: 0.6rem; cursor: pointer; transition-duration: 0.2s; &:hover { - background: rgba(255, 255, 255, 0.295); + background: hsl(0, 0%, 32%); &::-webkit-slider-thumb { opacity: 1; diff --git a/app/src/global/redesign/modules/_select.scss b/app/src/global/redesign/modules/_select.scss index 6323fd6f..4332af44 100644 --- a/app/src/global/redesign/modules/_select.scss +++ b/app/src/global/redesign/modules/_select.scss @@ -10,6 +10,8 @@ position: relative; align-content: center; font-family: var(--base-font-family); + background: var(--form-bg); + will-change: contents; -webkit-text-size-adjust: none; border-radius: var(--md-radius); @@ -69,7 +71,7 @@ select { filter: brightness(1.1); } -webkit-text-size-adjust: auto; - background: inherit; + background-color: var(--form-bg); margin: 0; width: 100%; outline: none; @@ -86,7 +88,6 @@ select { -moz-appearance: none; align-content: center; -webkit-appearance: none; - background-color: inherit; font-size: 100% !important; border-radius: var(--md-radius); padding: 0.2em 2em 0.325em 0.6em; diff --git a/app/src/lib/actions/gestures/handlers.ts b/app/src/lib/actions/gestures/handlers.ts index fd350997..7cc21da5 100644 --- a/app/src/lib/actions/gestures/handlers.ts +++ b/app/src/lib/actions/gestures/handlers.ts @@ -37,7 +37,6 @@ export function pan(node: HTMLElement) { clearTimeout(timer); return; } - event.stopPropagation(); calculateVelocity(event, detail); diff --git a/app/src/lib/actions/gestures/types.ts b/app/src/lib/actions/gestures/types.ts index bc19b4c9..2a240673 100644 --- a/app/src/lib/actions/gestures/types.ts +++ b/app/src/lib/actions/gestures/types.ts @@ -14,9 +14,9 @@ export interface Detail { export type GestureEventTarget = Window | HTMLElement; export interface GestureHandlers { - onStart?: (event: PointerEvent) => void; - onMove?: (event: PointerEvent) => void; - onEnd?: (event: PointerEvent) => void; + onStart(event: PointerEvent): void; + onMove(event: PointerEvent): void; + onEnd(event: PointerEvent): void; } export interface DragEvent { dragstart: Detail; diff --git a/app/src/lib/components/Alert/Alert.svelte b/app/src/lib/components/Alert/Alert.svelte index ef193d50..c2d9fc8b 100644 --- a/app/src/lib/components/Alert/Alert.svelte +++ b/app/src/lib/components/Alert/Alert.svelte @@ -1,46 +1,20 @@ - -
- {#each $alertHandler as notif, idx} +
+ {#each $alertHandler as notif (notif.id)}
{ setTimeout(() => { alertHandler.remove(notif); - }, 2125); + }, 3125); }} style="" class={`alert m-alert-${notif.type}`} @@ -54,7 +28,7 @@ .alert-container { // display: flex; position: fixed; - bottom: 5.75rem; + bottom: var(--alert-bottom, 5.75rem); left: 0; // flex-direction: column; right: 0; @@ -62,6 +36,7 @@ // isolation: isolate; max-height: 60vmin; // align-items: center; + contain: layout; padding-bottom: 0.75rem; pointer-events: none; } diff --git a/app/src/lib/components/ArtistPageHeader/ArtistPageHeader.svelte b/app/src/lib/components/ArtistPageHeader/ArtistPageHeader.svelte index 29fe692d..f372377e 100644 --- a/app/src/lib/components/ArtistPageHeader/ArtistPageHeader.svelte +++ b/app/src/lib/components/ArtistPageHeader/ArtistPageHeader.svelte @@ -18,20 +18,21 @@ let opacity = 0; let img: HTMLImageElement; - + let isScrolling = false; + let scroll: DOMRect; + let calc: number; const handler = (ts: number) => { if (!browser && !container) return; const elapsed = ts - timestamp; - const scroll = container.getBoundingClientRect(); - const calc = -scroll.top / $windowHeight; - y = $windowWidth < 500 ? Math.min(Math.max(calc, 0), 1) * 325 : Math.min(Math.max(calc, 0), 1) * 116; + y = $windowWidth < 500 ? Math.min(Math.max(calc, 0), 1) * 155 : Math.min(Math.max(calc, 0), 1) * 116; if (elapsed < 100) { timestamp = requestAnimationFrame(handler); } else { cancelAnimationFrame(timestamp); timestamp = undefined; + isScrolling = false; } }; @@ -39,6 +40,10 @@ if (timestamp) { return; } + if (isScrolling) return; + scroll = container.getBoundingClientRect(); + calc = -scroll.top / $windowHeight; + isScrolling = true; requestAnimationFrame(handler); } @@ -50,10 +55,10 @@ } wrapper = document.getElementById("wrapper"); - wrapper.addEventListener("scroll", onScroll, { passive: true }); + wrapper.addEventListener("scroll", onScroll, { passive: true, capture: true }); return () => { if (timestamp) cancelAnimationFrame(timestamp); - wrapper.removeEventListener("scroll", onScroll); + wrapper.removeEventListener("scroll", onScroll, true); }; }); diff --git a/app/src/lib/components/Carousel/Carousel.svelte b/app/src/lib/components/Carousel/Carousel.svelte index 52f8245b..9a480a11 100644 --- a/app/src/lib/components/Carousel/Carousel.svelte +++ b/app/src/lib/components/Carousel/Carousel.svelte @@ -23,7 +23,7 @@ let carousel: HTMLDivElement = undefined; let frame: number; - let startTime: number, lastFrame: number; + let startTime: number; let hasScrollWidth = false; let isScrolling = false; @@ -53,7 +53,6 @@ scrollPositions.right = scrollPositions.width - scrollLeft - 15; if (elapsed < 100) { - lastFrame = ts; frame = requestAnimationFrame((ts) => scrollHandler(ts, context)); } else { cancelAnimationFrame(frame); @@ -62,7 +61,6 @@ } else if (context === "right") { carousel.scrollLeft += Math.ceil((scrollPositions.width / items.length) * 2); } - lastFrame = undefined; frame = undefined; startTime = undefined; isScrolling = false; diff --git a/app/src/lib/components/Carousel/CarouselItem.svelte b/app/src/lib/components/Carousel/CarouselItem.svelte index bf437aec..0a750526 100644 --- a/app/src/lib/components/Carousel/CarouselItem.svelte +++ b/app/src/lib/components/Carousel/CarouselItem.svelte @@ -43,16 +43,16 @@ import list from "$lib/stores/list"; import { Logger, notify } from "$lib/utils"; import { showAddToPlaylistPopper, showGroupSessionCreator } from "$stores/stores"; - import { page } from "$app/stores"; import { tick } from "svelte"; import { PopperButton, PopperStore } from "../Popper"; - import { browseHandler, clickHandler } from "./functions"; + import { clickHandler } from "./functions"; import { browser } from "$app/environment"; import { IsoBase64 } from "$lib/utils"; import { SITE_ORIGIN_URL } from "$stores/url"; import type { Dropdown } from "$lib/configs/dropdowns.config"; import type { IListItemRenderer } from "$lib/types/musicListItemRenderer"; import type { Item } from "$lib/types"; + import { createShare } from "$lib/shared/createShare"; export let index: number; export let item: IListItemRenderer; @@ -140,17 +140,19 @@ icon: "share", action: async () => { if (!browser) return; - const shareData = { + const shareData = createShare({ + type: "SESSION", title: `Join ${groupSession.client.displayName}'s Beatbump Session`, - url: `${import.meta.env.DEV ? "localhost:5173" : $SITE_ORIGIN_URL}/session?token=${encodeURIComponent( + id: encodeURIComponent( IsoBase64.toBase64( JSON.stringify({ clientId: groupSession.client.clientId, displayName: groupSession.client.displayName, }), ), - )}`, - }; + ), + origin: $SITE_ORIGIN_URL, + }); try { if (!navigator.canShare) { await navigator.clipboard.writeText(shareData.url); @@ -174,31 +176,12 @@ text: "Share", icon: "share", action: async () => { - let shareData = { + const shareData = createShare({ + origin: $SITE_ORIGIN_URL, + id: item.endpoint?.browseId ?? item.videoId, + type: item.endpoint?.pageType ?? null, title: item.title, - - url: `${$SITE_ORIGIN_URL}/listen?id=${item.videoId}`, - }; - if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_PLAYLIST")) { - shareData = { - title: item.title, - - url: `${$SITE_ORIGIN_URL}/playlist/${item.endpoint?.browseId}`, - }; - } - if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ALBUM")) { - shareData = { - title: item.title, - - url: `${$SITE_ORIGIN_URL}/release?id=${item.endpoint?.browseId}`, - }; - } - if (item.endpoint?.pageType?.includes("MUSIC_PAGE_TYPE_ARTIST")) { - shareData = { - title: item.title, - url: `${$SITE_ORIGIN_URL}/artist/${item.endpoint?.browseId}`, - }; - } + }); try { if (!navigator.canShare) { await navigator.clipboard.writeText(shareData.url); @@ -221,23 +204,27 @@ DropdownItems = item?.endpoint?.pageType.match(RE_ALBUM_PLAYLIST_SINGLE) ? [ { - action: () => - list.initPlaylistSession({ playlistId: item.playlistId, params: "wAEB8gECKAE%3D", index: 0 }), + action: () => { + list.initPlaylistSession({ playlistId: item.playlistId, params: "wAEB8gECKAE%3D", index: 0 }); + }, icon: "shuffle", - text: "Shuffle Play", + text: "Shuffle", }, { - action: () => list.setTrackWillPlayNext(item, $list.position), + action: () => { + list.setTrackWillPlayNext(item, $list.position); + }, icon: "queue", text: "Play Next", }, { - action: () => + action: () => { list.initPlaylistSession({ playlistId: "RDAMPL" + item.playlistId, params: "wAEB8gECeAE%3D", index: 0, - }), + }); + }, icon: "radio", text: "Start Radio", }, diff --git a/app/src/lib/components/Item/Listing.svelte b/app/src/lib/components/Item/Listing.svelte index c42c6d15..e6ba4bf4 100644 --- a/app/src/lib/components/Item/Listing.svelte +++ b/app/src/lib/components/Item/Listing.svelte @@ -1,3 +1,5 @@ + +
{result.header.title} {#if filter !== "all"} -
+
{ queueMicrotask(paginate); diff --git a/app/src/routes/test/+page.svelte b/app/src/routes/test/+page.svelte index 02199978..b84b1a06 100644 --- a/app/src/routes/test/+page.svelte +++ b/app/src/routes/test/+page.svelte @@ -1,29 +1,23 @@
- +
{}} - use:mobileLongPress - on:pressing={(e) => { - pressing = true; - console.log(e); - style = `--progress: ${e.detail.progress}`; - }} - on:pressEnd={(e) => { - style = `--progress: 0`; - pressing = false; - - console.log(e); - }} >

TEST CONTENT

diff --git a/app/src/routes/trending/+page.svelte b/app/src/routes/trending/+page.svelte index 2b9fd5e3..39dc7db6 100644 --- a/app/src/routes/trending/+page.svelte +++ b/app/src/routes/trending/+page.svelte @@ -2,22 +2,11 @@ import type { PageData } from "./$types"; import Carousel from "$components/Carousel/Carousel.svelte"; import Header from "$lib/components/Layouts/Header.svelte"; - import type { ICarousel, MoodsAndGenresItem } from "$lib/types"; - import type { IListItemRenderer } from "$lib/types/musicListItemRenderer"; + import { isMoodsAndGenres, isValidCarousel } from "$lib/validation/typeGuards/isIListItemRenderer"; export let data: PageData; const { carouselItems, page: path } = data; - - const isMoodsAndGenres = (obj: unknown): obj is ICarousel => { - return (obj as ICarousel).results[0].color !== undefined; - }; - - const isValidCarousel = (obj: unknown): obj is ICarousel => { - return !!(obj as ICarousel).results[0].title; - }; - - $: console.log(carouselItems);
Date: Thu, 19 Jan 2023 22:50:46 -0500 Subject: [PATCH 02/37] `app` - fix queue/search not working - use dict instead of switch for API requests - rm some pointless destructuring --- .gitignore | 311 +----------------- app/.svelte-kit/ambient.d.ts | 16 +- .../routes/trending/new/[slug]/proxy+page.ts | 10 +- .../lib/components/Player/Fullscreen.svelte | 2 - .../components/SearchList/VirtualList.svelte | 2 - app/src/routes/api/_lib/request.ts | 58 ++-- app/src/routes/home/+page.server.ts | 3 +- .../trending/new/[slug].json/+server.ts | 50 +-- app/src/routes/trending/new/[slug]/+page.ts | 10 +- app/svelte.config.js | 2 +- 10 files changed, 79 insertions(+), 385 deletions(-) diff --git a/.gitignore b/.gitignore index 88e9770a..a603fb41 100644 --- a/.gitignore +++ b/.gitignore @@ -16,311 +16,6 @@ node_modules .vercel .cloudflare .netlify - -/app/.svelte-kit/build -/app/.svelte-kit/cloudflare-workers-tmp -/app/.svelte-kit/generated -/app/.svelte-kit/output -/app/.svelte-kit/runtime -/app/.svelte-kit/types -packages/proxy-server/rust/target/ -app/.svelte-kit/types/src/routes -app/.svelte-kit/types/src/routes/artist/[slug]/proxy+page.server.ts -app/.svelte-kit/types/src/routes/artist/releases.json/$types.d.ts -app/.svelte-kit/types/src/routes/explore/[slug].json/$types.d.ts -app/.svelte-kit/types/src/routes/explore.json/$types.d.ts -app/.svelte-kit/types/src/routes/home.json/$types.d.ts -app/.svelte-kit/types/src/routes/listen/proxy+page.ts -app/.svelte-kit/types/src/routes/playlist/[slug]/proxy+page.ts -app/.svelte-kit/types/src/routes/release/proxy+page.ts -app/.svelte-kit/types/src/routes/search/[slug]/proxy+page.ts -app/.svelte-kit/adapter-node/index.js -app/.svelte-kit/adapter-node/manifest-full.js -app/.svelte-kit/adapter-node/manifest.js -app/.svelte-kit/adapter-node/vite-manifest.json -app/.svelte-kit/adapter-node/chunks/buffer.js -app/.svelte-kit/adapter-node/chunks/Button.js -app/.svelte-kit/adapter-node/chunks/Carousel.js -app/.svelte-kit/adapter-node/chunks/contexts.js -app/.svelte-kit/adapter-node/chunks/GridItem.svelte_svelte_type_style_lang.js -app/.svelte-kit/adapter-node/chunks/Header.js -app/.svelte-kit/adapter-node/chunks/hooks.server.js -app/.svelte-kit/adapter-node/chunks/Icon.js -app/.svelte-kit/adapter-node/chunks/index.js -app/.svelte-kit/adapter-node/chunks/index2.js -app/.svelte-kit/adapter-node/chunks/index3.js -app/.svelte-kit/adapter-node/chunks/InfoBox.js -app/.svelte-kit/adapter-node/chunks/Listing.js -app/.svelte-kit/adapter-node/chunks/ListItem.js -app/.svelte-kit/adapter-node/chunks/Loading.js -app/.svelte-kit/adapter-node/chunks/musicResponsiveListItemRenderer.js -app/.svelte-kit/adapter-node/chunks/musicTwoRowItemRenderer.js -app/.svelte-kit/adapter-node/chunks/parsers.js -app/.svelte-kit/adapter-node/chunks/playlistPanelVideoRenderer.js -app/.svelte-kit/adapter-node/chunks/PopperButton.js -app/.svelte-kit/adapter-node/chunks/request.js -app/.svelte-kit/adapter-node/chunks/service.js -app/.svelte-kit/adapter-node/chunks/singletons.js -app/.svelte-kit/adapter-node/chunks/stores.js -app/.svelte-kit/adapter-node/chunks/url.js -app/.svelte-kit/adapter-node/chunks/utils.js -app/.svelte-kit/adapter-node/chunks/utils.parsers.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/get_queue.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/get_search_suggestions.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/main.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/next.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/player.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/playlist.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/related.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/search.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/api/v1/stats.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/artist/releases.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/explore/_slug_.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/explore.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/home.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/trending/new/_slug_.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/endpoints/trending.json/_server.ts.js -app/.svelte-kit/adapter-node/entries/pages/_error.svelte.js -app/.svelte-kit/adapter-node/entries/pages/_layout.server.ts.js -app/.svelte-kit/adapter-node/entries/pages/_layout.svelte.js -app/.svelte-kit/adapter-node/entries/pages/_layout.ts.js -app/.svelte-kit/adapter-node/entries/pages/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/artist/_slug_/_page.server.ts.js -app/.svelte-kit/adapter-node/entries/pages/artist/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/artist/releases/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/artist/releases/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/explore/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/explore/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/explore/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/explore/_slug_/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/home/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/home/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/library/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/library/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/library/playlists/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/library/playlists/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/library/playlists/_slug_/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/library/songs/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/listen/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/listen/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/playlist/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/playlist/_slug_/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/release/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/release/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/search/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/search/_slug_/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/session/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/session/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/settings/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/settings/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/test/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/trending/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/trending/_page.ts.js -app/.svelte-kit/adapter-node/entries/pages/trending/new/_slug_/_page.svelte.js -app/.svelte-kit/adapter-node/entries/pages/trending/new/_slug_/_page.ts.js -app/.svelte-kit/adapter-node/nodes/0.js -app/.svelte-kit/adapter-node/nodes/1.js -app/.svelte-kit/adapter-node/nodes/2.js -app/.svelte-kit/adapter-node/nodes/3.js -app/.svelte-kit/adapter-node/nodes/4.js -app/.svelte-kit/adapter-node/nodes/5.js -app/.svelte-kit/adapter-node/nodes/6.js -app/.svelte-kit/adapter-node/nodes/7.js -app/.svelte-kit/adapter-node/nodes/8.js -app/.svelte-kit/adapter-node/nodes/9.js -app/.svelte-kit/adapter-node/nodes/10.js -app/.svelte-kit/adapter-node/nodes/11.js -app/.svelte-kit/adapter-node/nodes/12.js -app/.svelte-kit/adapter-node/nodes/13.js -app/.svelte-kit/adapter-node/nodes/14.js -app/.svelte-kit/adapter-node/nodes/15.js -app/.svelte-kit/adapter-node/nodes/16.js -app/.svelte-kit/adapter-node/nodes/17.js -app/.svelte-kit/adapter-node/nodes/18.js -app/.svelte-kit/adapter-node/nodes/19.js -app/.svelte-kit/adapter-node/nodes/20.js -app/.svelte-kit/cloudflare/_headers -app/.svelte-kit/cloudflare/_routes.json -app/.svelte-kit/cloudflare/_worker.js -app/.svelte-kit/cloudflare/_worker.js.map -app/.svelte-kit/cloudflare/apple-touch-icon-60x60.png -app/.svelte-kit/cloudflare/apple-touch-icon-76x76.png -app/.svelte-kit/cloudflare/apple-touch-icon-120x120.png -app/.svelte-kit/cloudflare/apple-touch-icon-152x152.png -app/.svelte-kit/cloudflare/apple-touch-icon-180x180.png -app/.svelte-kit/cloudflare/apple-touch-icon.png -app/.svelte-kit/cloudflare/favicon.ico -app/.svelte-kit/cloudflare/favicon.png -app/.svelte-kit/cloudflare/icons.svg -app/.svelte-kit/cloudflare/logo.png -app/.svelte-kit/cloudflare/logo.svg -app/.svelte-kit/cloudflare/manifest.json -app/.svelte-kit/cloudflare/mask.svg -app/.svelte-kit/cloudflare/maskable.svg -app/.svelte-kit/cloudflare/robots.txt -app/.svelte-kit/cloudflare/service-worker.js -app/.svelte-kit/cloudflare/vite-manifest.json -app/.svelte-kit/cloudflare/_app/version.json -app/.svelte-kit/cloudflare/_app/immutable/start-b2eeb507.js -app/.svelte-kit/cloudflare/_app/immutable/assets/_error-5407b482.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_layout-f8cb0d70.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-7e1a5700.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-133ac10b.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-237bfa40.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-269a9b3e.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-753d0100.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-911c156e.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-3864ad7e.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-a0fb490a.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-c5eabec9.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-c90bc606.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-c3641216.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-ebe2c4d8.css -app/.svelte-kit/cloudflare/_app/immutable/assets/_page-f2623ef4.css -app/.svelte-kit/cloudflare/_app/immutable/assets/Button-bf1ea9ea.css -app/.svelte-kit/cloudflare/_app/immutable/assets/Carousel-d58d5adc.css -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-cyrillic-ext-variable-wghtOnly-normal-cc426ece.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-cyrillic-variable-wghtOnly-normal-e0f5490e.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-greek-variable-wghtOnly-normal-037de683.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-latin-ext-variable-wghtOnly-normal-ec7ba8a8.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-latin-variable-wghtOnly-normal-3940c6f6.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/commissioner-vietnamese-variable-wghtOnly-normal-d37841f6.woff2 -app/.svelte-kit/cloudflare/_app/immutable/assets/CreatePlaylist-999a63b6.css -app/.svelte-kit/cloudflare/_app/immutable/assets/GridItem-2c899575.css -app/.svelte-kit/cloudflare/_app/immutable/assets/Icon-e9cb2d4c.css -app/.svelte-kit/cloudflare/_app/immutable/assets/icons-9852f1b5.svg -app/.svelte-kit/cloudflare/_app/immutable/assets/InfoBox-a383bc59.css -app/.svelte-kit/cloudflare/_app/immutable/assets/ListInfoBar-01cf3047.css -app/.svelte-kit/cloudflare/_app/immutable/assets/Listing-9fab5293.css -app/.svelte-kit/cloudflare/_app/immutable/assets/ListItem-a0c3474b.css -app/.svelte-kit/cloudflare/_app/immutable/assets/Loading-8813a9e6.css -app/.svelte-kit/cloudflare/_app/immutable/assets/PopperButton-54f9c5f6.css -app/.svelte-kit/cloudflare/_app/immutable/chunks/_layout-f0d197f5.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-18bf14ce.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-64a925e7.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-64d62d66.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-73d0569e.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-74acce30.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-4039aba4.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-4970e3ba.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-8642e166.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-2730865a.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-a7b525ba.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-a69916a9.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-ae61cd1a.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-e27696fd.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-ed77219c.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/_page-f9585a30.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/0-a99aa8a0.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/1-f69a9bb2.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/2-c12202f8.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/3-74dcbbe1.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/4-c9c9e95d.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/5-e4e848f9.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/6-be14c2bd.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/7-5b728292.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/8-87557c14.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/9-d553b992.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/10-52755c27.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/11-ce3c4628.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/12-acef4002.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/13-4979469c.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/14-b353c12c.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/15-16f681d6.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/16-0702a375.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/17-1892b8ef.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/18-ef3a69aa.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/19-87c9aa46.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/20-13e7b0df.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/buffer-53725dbf.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/bundler-b36eb39b.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Button-32ce6c33.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Carousel-effa3dfd.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/contexts-c0ab62e6.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/control-f5b05b5f.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/CreatePlaylist-1c8d76c5.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/debounce-7b04f24d.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/GridItem.svelte_svelte_type_style_lang-27964b08.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Header-b8db0589.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/hls-dd7daf54.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Icon-7e66c26a.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/index-dc2c0cec.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/index-dc735eee.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/index-dede7730.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/index-f0d7a0e7.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/InfoBox-e334f9d5.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/ListInfoBar-79881bc2.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Listing-17aff376.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/ListItem-857adeb1.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/Loading-cf775f0e.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/navigation-21f92475.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/observer-a409a81c.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/PopperButton-610e3aa1.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/preload-helper-41c905a7.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/singletons-f2225d65.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/stores-9ee9ed59.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/strings-7c502f3a.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/url-23415d72.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/utils-bd6cecd7.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/viewport-7af7a1d2.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/window-67218029.js -app/.svelte-kit/cloudflare/_app/immutable/chunks/worker-5ed62a18.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/_error.svelte-e40fb3f4.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/_layout.svelte-2106a8c7.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/_page.svelte-06e93e78.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/artist/_slug_/_page.svelte-b9e7fd0c.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/artist/releases/_page.svelte-13190341.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/explore/_page.svelte-551d010c.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/explore/_slug_/_page.svelte-469ea66e.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/home/_page.svelte-5f7035be.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/library/_page.svelte-c73ef7f8.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/library/playlists/_page.svelte-f6f90c42.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/library/playlists/_slug_/_page.svelte-724f049d.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/library/songs/_page.svelte-0b90473c.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/listen/_page.svelte-341c4aba.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/playlist/_slug_/_page.svelte-3afa180e.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/release/_page.svelte-197fde31.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/search/_slug_/_page.svelte-4ea05eb0.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/session/_page.svelte-d59ed765.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/settings/_page.svelte-9fe3c8e4.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/test/_page.svelte-cfd92c78.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/trending/_page.svelte-692de50e.js -app/.svelte-kit/cloudflare/_app/immutable/components/pages/trending/new/_slug_/_page.svelte-3eb479a6.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/_layout.ts-a0f603eb.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/_page.ts-1363383b.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/artist/releases/_page.ts-ea200e67.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/explore/_page.ts-029b814d.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/explore/_slug_/_page.ts-55b4f59d.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/home/_page.ts-fab52d38.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/library/_page.ts-4ed993c7.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/library/playlists/_slug_/_page.ts-3fe86a2f.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/listen/_page.ts-ec3ff34f.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/playlist/_slug_/_page.ts-b76674d8.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/release/_page.ts-7f5cc3b5.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/search/_slug_/_page.ts-08a4a575.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/session/_page.ts-9530860a.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/settings/_page.ts-7dc16dc1.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/trending/_page.ts-9f6b8b94.js -app/.svelte-kit/cloudflare/_app/immutable/modules/pages/trending/new/_slug_/_page.ts-b848eca8.js -app/.svelte-kit/cloudflare/_app/immutable/workers/worker-6b70e1f9.js -app/.svelte-kit/cloudflare/_app/immutable/workers/chunks/bundler-846a1431.js -app/.svelte-kit/cloudflare/_app/immutable/workers/chunks/hls-d2c35ce9.js -app/.svelte-kit/cloudflare/android/android-launchericon-48-48.png -app/.svelte-kit/cloudflare/android/android-launchericon-72-72.png -app/.svelte-kit/cloudflare/android/android-launchericon-96-96.png -app/.svelte-kit/cloudflare/android/android-launchericon-144-144.png -app/.svelte-kit/cloudflare/android/android-launchericon-192-192.png -app/.svelte-kit/cloudflare/android/android-launchericon-512-512.png -app/.svelte-kit/cloudflare/assets/android-chrome-192x192.png -app/.svelte-kit/cloudflare/assets/android-chrome-256x256.png -app/.svelte-kit/cloudflare/assets/browserconfig.xml -app/.svelte-kit/cloudflare/assets/favicon-16x16.png -app/.svelte-kit/cloudflare/assets/favicon-32x32.png -app/.svelte-kit/cloudflare/assets/favicon.ico -app/.svelte-kit/cloudflare/assets/favicon.png -app/.svelte-kit/cloudflare/assets/mstile-150x150.png -app/.svelte-kit/cloudflare/assets/safari-pinned-tab.svg -.gitignore -app/.svelte-kit/cloudflare-tmp/_worker.js -app/.svelte-kit/cloudflare-tmp/manifest.js +/app/.svelte-kit/cloudflare* +/app/.svelte-kit/adapter* +/packages/proxy-server/rust/target diff --git a/app/.svelte-kit/ambient.d.ts b/app/.svelte-kit/ambient.d.ts index fb90eac5..2d1d70ba 100644 --- a/app/.svelte-kit/ambient.d.ts +++ b/app/.svelte-kit/ambient.d.ts @@ -48,6 +48,7 @@ declare module '$env/static/private' { export const DOTNET_ROOT: string; export const LC_NAME: string; export const SSH_AUTH_SOCK: string; + export const NODE_EXTRA_CA_CERTS: string; export const COLOR: string; export const npm_config_local_prefix: string; export const DESKTOP_SESSION: string; @@ -59,12 +60,14 @@ declare module '$env/static/private' { export const GTK_MODULES: string; export const XDG_SEAT: string; export const PWD: string; - export const XDG_SESSION_DESKTOP: string; export const LOGNAME: string; + export const XDG_SESSION_DESKTOP: string; export const QT_QPA_PLATFORMTHEME: string; export const XDG_SESSION_TYPE: string; + export const PANEL_GDK_CORE_DEVICE_EVENTS: string; export const PNPM_HOME: string; export const npm_config_init_module: string; + export const _: string; export const XAUTHORITY: string; export const VSCODE_GIT_ASKPASS_NODE: string; export const XDG_GREETER_DATA_DIR: string; @@ -72,8 +75,8 @@ declare module '$env/static/private' { export const GDM_LANG: string; export const GTK2_RC_FILES: string; export const HOME: string; - export const LANG: string; export const LC_PAPER: string; + export const LANG: string; export const LS_COLORS: string; export const XDG_CURRENT_DESKTOP: string; export const npm_package_version: string; @@ -131,7 +134,6 @@ declare module '$env/static/private' { export const LC_NUMERIC: string; export const OLDPWD: string; export const TERM_PROGRAM: string; - export const _: string; export const NODE_ENV: string; } @@ -184,6 +186,7 @@ declare module '$env/dynamic/private' { DOTNET_ROOT: string; LC_NAME: string; SSH_AUTH_SOCK: string; + NODE_EXTRA_CA_CERTS: string; COLOR: string; npm_config_local_prefix: string; DESKTOP_SESSION: string; @@ -195,12 +198,14 @@ declare module '$env/dynamic/private' { GTK_MODULES: string; XDG_SEAT: string; PWD: string; - XDG_SESSION_DESKTOP: string; LOGNAME: string; + XDG_SESSION_DESKTOP: string; QT_QPA_PLATFORMTHEME: string; XDG_SESSION_TYPE: string; + PANEL_GDK_CORE_DEVICE_EVENTS: string; PNPM_HOME: string; npm_config_init_module: string; + _: string; XAUTHORITY: string; VSCODE_GIT_ASKPASS_NODE: string; XDG_GREETER_DATA_DIR: string; @@ -208,8 +213,8 @@ declare module '$env/dynamic/private' { GDM_LANG: string; GTK2_RC_FILES: string; HOME: string; - LANG: string; LC_PAPER: string; + LANG: string; LS_COLORS: string; XDG_CURRENT_DESKTOP: string; npm_package_version: string; @@ -267,7 +272,6 @@ declare module '$env/dynamic/private' { LC_NUMERIC: string; OLDPWD: string; TERM_PROGRAM: string; - _: string; NODE_ENV: string; [key: `PUBLIC_${string}`]: undefined; [key: string]: string | undefined; diff --git a/app/.svelte-kit/types/src/routes/trending/new/[slug]/proxy+page.ts b/app/.svelte-kit/types/src/routes/trending/new/[slug]/proxy+page.ts index fbaa5128..022fbb5c 100644 --- a/app/.svelte-kit/types/src/routes/trending/new/[slug]/proxy+page.ts +++ b/app/.svelte-kit/types/src/routes/trending/new/[slug]/proxy+page.ts @@ -2,19 +2,15 @@ import type { PageLoad } from "./$types"; export const load = async ({ params, fetch, url }: Parameters[0]) => { // const params = url.searchParams.get('params') + console.count("MUSIC AND GENRES CONNECTION!"); const response = await fetch( `/trending/new/${params.slug}.json` + `${url.searchParams.get("params") ? `?params=${url.searchParams.get("params")}` : ""}` + `${url.searchParams.get("itct") ? `&itct=${encodeURIComponent(url.searchParams.get("itct"))}` : ""}`, ); - const { sections = [], header = "", title = [] || "", data } = await response.json(); + const data = await response.json(); // console.log(sections, header, title) if (response.ok) { - return { - sections, - header, - title, - data, - }; + return data; } }; diff --git a/app/src/lib/components/Player/Fullscreen.svelte b/app/src/lib/components/Player/Fullscreen.svelte index b903ac89..c348fc80 100644 --- a/app/src/lib/components/Player/Fullscreen.svelte +++ b/app/src/lib/components/Player/Fullscreen.svelte @@ -1,5 +1,3 @@ - - + + {#if $queue.length} @@ -279,9 +282,13 @@
{ + tracklist.style.willChange = "transform"; + }} on:click={() => { requestFrameSingle(() => { queueOpen = !queueOpen; + tracklist.style.willChange = "unset"; }); }} > @@ -290,10 +297,10 @@
onDragStart(1, e)} on:dragmove|capture|stopPropagation={(e) => trackMovement(1, e.detail)} on:dragend|capture|stopPropagation={(e) => release(1, e.detail)} + on:pointerdown={() => { + tracklist.style.willChange = "scroll-position, transform"; + }} + on:pointerup={() => { + requestFrameSingle(() => { + tracklist.style.willChange = "unset"; + }); + }} class="handle horz" >
@@ -433,7 +448,6 @@ position: absolute; bottom: 0; - will-change: transform; height: 100%; min-height: 0; background: var(--bottom-bg); diff --git a/app/src/lib/components/Player/Player.svelte b/app/src/lib/components/Player/Player.svelte index 70aac09c..8008da8a 100644 --- a/app/src/lib/components/Player/Player.svelte +++ b/app/src/lib/components/Player/Player.svelte @@ -245,20 +245,18 @@
{/if}
-
-
{ - if (!$queue) return; - fullscreenStore.toggle(); - }} - class="listButton player-btn" - > - -
+
{ + if (!$queue) return; + fullscreenStore.toggle(); + }} + class="listButton player-btn" + > +
.container { visibility: visible; display: flex; @@ -332,14 +329,13 @@ width: 100%; } .player-controls { - // display: flex; - // place-self: center; - width: 100%; } + row { position: relative; } + .hidden { display: none !important; visibility: hidden !important; @@ -356,10 +352,14 @@ .listButton { visibility: hidden !important; + order: -1; + pointer-events: none; } + .player { background-color: inherit; } + .volume-wrapper { background: var(--dark-bottom); display: flex; @@ -385,6 +385,7 @@ height: 2rem; } } + .volume-slider { height: 100%; background: var(--dark-bottom); @@ -392,6 +393,7 @@ display: flex; align-items: center; } + .volume-icon { cursor: pointer; } @@ -399,12 +401,9 @@ .menu-container { padding: 0; position: relative; - will-change: position; - // margin-right: 8%; - // grid-area: r; place-self: flex-end; align-self: center; - @media screen and (max-width: 500px) { + @media screen and (max-width: 575.5px) { position: relative !important; place-self: center; } @@ -416,6 +415,7 @@ align-items: center; } + .player-right { grid-area: r; display: inline-flex; @@ -424,9 +424,12 @@ width: auto; } } + @media screen and (min-width: 720px) { .listButton { visibility: visible !important; + order: 0; + pointer-events: unset; } } diff --git a/app/src/lib/components/Player/ProgressBar/index.scss b/app/src/lib/components/Player/ProgressBar/index.scss index 0e2b5d6e..949dbba6 100644 --- a/app/src/lib/components/Player/ProgressBar/index.scss +++ b/app/src/lib/components/Player/ProgressBar/index.scss @@ -22,7 +22,7 @@ width: 100%; cursor: pointer; will-change: transform; - transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms transform; + transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 180ms transform; transform-origin: 0% 50%; overflow: hidden; border-radius: 333333em; @@ -43,6 +43,7 @@ height: 1rem; position: relative; align-items: flex-end; + line-height: 1; } progress { height: var(--height); @@ -77,8 +78,10 @@ progress::-webkit-progress-value { .timestamp { display: inline-block; - font-family: var(--base-font-family); + font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: calc(var(--base-font-size) * 0.95); + letter-spacing: -0.02em; + white-space: nowrap; vertical-align: top; } diff --git a/app/src/lib/components/Wrapper/Wrapper.svelte b/app/src/lib/components/Wrapper/Wrapper.svelte index ac02edba..891e79ed 100644 --- a/app/src/lib/components/Wrapper/Wrapper.svelte +++ b/app/src/lib/components/Wrapper/Wrapper.svelte @@ -1,7 +1,7 @@
-{#await promise then _} -
- playAlbum(), icon: "play" }, - { text: "Album Radio", action: () => playRadio(), icon: "play" }, - ]} - title={releaseInfo.title} - artist={releaseInfo.artist} - subtitles={releaseInfo.subtitles} - type="release" +
+ playAlbum(), icon: "play" }, + { text: "Album Radio", action: () => playRadio(), icon: "play" }, + { icon: "dots", type: "icon" }, + ]} + title={releaseInfo.title} + artist={releaseInfo.artist} + subtitles={releaseInfo.subtitles} + type="release" + on:shuffle={playShuffle} + /> + {#each items as item, index} + setId()} + {item} + idx={index} /> - {#each items as item, index} - setId()} - {item} - idx={index} - /> - {/each} -
-{:catch error} - {error} -{/await} + {/each} +
diff --git a/app/src/lib/components/Popper/PopperButton.svelte b/app/src/lib/components/Popper/PopperButton.svelte index 82997e8a..01416340 100644 --- a/app/src/lib/components/Popper/PopperButton.svelte +++ b/app/src/lib/components/Popper/PopperButton.svelte @@ -37,7 +37,7 @@ activeNode.set(new WeakRef(node)); } const rect = node.getBoundingClientRect(); - + console.log(metadata); x = rect.left; y = rect.top; bottom = rect.bottom; @@ -75,7 +75,7 @@ diff --git a/app/src/lib/components/Search/Search.svelte b/app/src/lib/components/Search/Search.svelte index 1bb2b68d..a42671eb 100644 --- a/app/src/lib/components/Search/Search.svelte +++ b/app/src/lib/components/Search/Search.svelte @@ -12,6 +12,8 @@ const dispatch = createEventDispatcher(); let results: Array<{ query?: string; id?: number }> = []; + let listbox: HTMLFormElement; + async function handleSubmit() { if (!query.length) return; dispatch("submitted", { submitted: true, filter, query }); @@ -19,6 +21,26 @@ let url = `/search/${encodeURIComponent(query)}${filter !== undefined ? `?filter=${filter}` : ""}`; goto(url); } + + function handleKeyDown(event: KeyboardEvent) { + if (!listbox) return; + const target = event.target as HTMLLIElement; + + if (event.key === "ArrowDown") { + if (target.nextElementSibling.parentElement !== listbox) return; + (target.nextElementSibling as HTMLElement).tabIndex = 0; + target.tabIndex = -1; + (target.nextElementSibling as HTMLElement).focus(); + } + if (event.key === "ArrowUp") { + if (target.previousElementSibling.parentElement !== listbox) return; + (target.previousElementSibling as HTMLElement).tabIndex = 0; + target.tabIndex = -1; + (target.previousElementSibling as HTMLElement).focus(); + } + + return false; + } const typeahead = debounce(async () => { if (!query) return (results = []); const response = await fetch("/api/v1/get_search_suggestions.json?q=" + encodeURIComponent(query)); @@ -31,6 +53,7 @@ aria-owns="suggestions" role="combobox" class={type} + on:keydown|capture={handleKeyDown} on:submit|preventDefault={handleSubmit} >
@@ -72,14 +95,22 @@
    {#each results as result (result?.id)}
  • { query = result.query; handleSubmit(); }} + on:keydown={(e) => { + if (e.key === " ") { + query = result.query; + handleSubmit(); + } + }} > {result.query}
    • diff --git a/app/src/lib/components/Tabs/Tabs.svelte b/app/src/lib/components/Tabs/Tabs.svelte index 454383d3..db8b9290 100644 --- a/app/src/lib/components/Tabs/Tabs.svelte +++ b/app/src/lib/components/Tabs/Tabs.svelte @@ -1,5 +1,4 @@
    @@ -30,6 +34,13 @@ > {/each}
    +{#each tabs as tab} + +{/each} diff --git a/app/src/lib/player.ts b/app/src/lib/player.ts index 9557ffa8..a2a0774e 100644 --- a/app/src/lib/player.ts +++ b/app/src/lib/player.ts @@ -219,7 +219,16 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP if (dev) { window["__player"] = this.player; } - this._player.volume = 0.5; + if (!localStorage.getItem("volume")) { + this._player.volume = 0.5; + try { + localStorage.setItem("volume", "0.5"); + } catch (e) { + Logger.err("Cannot set item `volume` in localStorage", e); + } + } else { + this._player.volume = +localStorage.getItem("volume"); + } this._player.autoplay = true; this._player.preload = "metadata"; @@ -290,6 +299,13 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP public set volume(volume: number) { if (!this._player && !browser) return; this._player.volume = volume; + if (typeof localStorage !== "undefined") { + try { + localStorage.setItem("volume", `${volume}`); + } catch (e) { + Logger.err("Cannot save to localStorage", e); + } + } } // #endregion Public Accessors (12) @@ -390,7 +406,7 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP this._player.pause(); } - public play(event: Nullable = null): void { + public play(_event: Nullable = null): void { try { if ("mediaSession" in navigator) { navigator.mediaSession.playbackState = "playing"; @@ -524,7 +540,7 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP this._HLS.loadSource(source); }); - this._HLS.on(this._HLSModule.Events.ERROR, (event, data) => { + this._HLS.on(this._HLSModule.Events.ERROR, (_event, data) => { const type = data.type; switch (type) { case this._HLSModule.ErrorTypes.MEDIA_ERROR: @@ -612,8 +628,8 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP private async handleAutoSuggestion(position: number): Promise { const list = this.currentSessionList(); - await SessionListService.getMoreLikeThis({ playlistId: list.currentMixId }); + return this.getTrackSrc(position).then((value) => { function hasProperty(input: unknown): input is ResponseBody { return (input as ResponseBody).url !== undefined; @@ -644,7 +660,7 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP } if (isLastSong) { - this.next(); + SessionListService.next(); return; } if (groupSession.initialized) { @@ -851,7 +867,7 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP this.onEvent("ended", async () => this.onEnded()); - this.onEvent("error", (event) => { + this.onEvent("error", (_event) => { if (this._player.error.message.includes("Empty src") || !this._player.error.message) return; console.error(this._player.error); diff --git a/app/src/lib/stores/index.ts b/app/src/lib/stores/index.ts index fb1a5f3e..a9204e63 100644 --- a/app/src/lib/stores/index.ts +++ b/app/src/lib/stores/index.ts @@ -1,7 +1,7 @@ export type { ConnectionState, ConnectionStates, Settings } from "./sessions"; export { GroupSession, groupSession } from "./sessions"; export type { Theme, UserSettings } from "./settings"; -export { SettingsSchema, settings } from "./settings"; +export { settings } from "./settings"; export type { Alert } from "./stores"; export { ctxKey, diff --git a/app/src/lib/stores/list/derived.ts b/app/src/lib/stores/list/derived.ts index 9d8ae7fa..54ba0bdc 100644 --- a/app/src/lib/stores/list/derived.ts +++ b/app/src/lib/stores/list/derived.ts @@ -1,5 +1,8 @@ import { derived } from "svelte/store"; import SessionListService from "./sessionList"; +import type { ISessionListProvider } from "./types.list"; +import type { RelatedEndpointResponse } from "src/routes/api/v1/related.json/+server"; +import { Logger } from "$lib/utils"; /** * A derived store for read-only access to the current mix @@ -14,4 +17,26 @@ const currentTrack = derived(SessionListService, ($list) => $list.mix[$list.posi */ const queuePosition = derived(SessionListService, ($list) => $list.position); -export { queue, currentTrack, queuePosition }; +const related = (() => { + let prevPosition = undefined; + const { subscribe } = derived( + SessionListService, + ($list, set) => { + try { + (async () => { + if ($list.position === prevPosition) return; + if ($list.related !== null) { + await fetch(`/api/v1/related.json?browseId=${$list.related?.browseId}`) + .then((res) => res.json()) + .then(set); + } + })(); + } catch (err) { + Logger.err(err); + } + }, + ); + return { subscribe }; +})(); + +export { queue, currentTrack, queuePosition, related }; diff --git a/app/src/lib/stores/list/sessionList.ts b/app/src/lib/stores/list/sessionList.ts index 38707508..5c2469ef 100644 --- a/app/src/lib/stores/list/sessionList.ts +++ b/app/src/lib/stores/list/sessionList.ts @@ -4,17 +4,19 @@ * - Use class instead of func impl (...?) * */ -import type { Artist, ArtistInfo, Item, Nullable, Song, Subtitle, Thumbnail } from "$lib/types"; -import { Logger, addToQueue, getSrc, notify, seededShuffle, type ResponseBody } from "$lib/utils"; +import type { Artist, ArtistInfo, Item, Song, Subtitle, Thumbnail } from "$lib/types"; +import { Logger, addToQueue, getSrc, notify, seededShuffle, type ResponseBody, WritableStore } from "$lib/utils"; import { Mutex } from "$lib/utils/sync"; import { splice } from "$lib/utils/collections/array"; -import { writable, get, type Writable } from "svelte/store"; -import { playerLoading, currentTitle, filterAutoPlay } from "../stores"; +import { writable, type Writable } from "svelte/store"; +import { playerLoading, filterAutoPlay } from "../stores"; import { groupSession } from "../sessions"; import type { ISessionListService, ISessionListProvider } from "./types.list"; import { fetchNext, filterList } from "./utils.list"; import { tick } from "svelte"; import type { VssLoggingContext } from "$lib/types/innertube/internals"; +import type { RelatedEndpointResponse } from "src/routes/api/v1/related.json/+server"; +import { AudioPlayer } from "$lib/player"; const mutex = new Mutex(); @@ -22,7 +24,7 @@ interface AutoMixArgs { clickTracking?: string; config?: { playerParams?: string; type?: string }; keyId?: number; - loggingContext: { vssLoggingContext: { serializedContextData: string } }; + loggingContext?: { vssLoggingContext: { serializedContextData: string } }; playlistId?: string; playlistSetVideoId?: string; videoId?: string; @@ -41,12 +43,13 @@ const VALID_KEYS = [ "currentMixId", "currentMixType", "visitorData", + "related", "mix", "position", ] as const; class ListService implements ISessionListService { - private $: Writable; + private $: WritableStore = new WritableStore(undefined); private state: ISessionListProvider = { clickTrackingParams: "", continuation: "", @@ -55,10 +58,11 @@ class ListService implements ISessionListService { visitorData: "", mix: [], position: 0, + related: null, }; constructor() { - this.$ = writable(this.state); + this.$.set(this.state); } public get clickTrackingParams(): string { @@ -85,6 +89,10 @@ class ListService implements ISessionListService { return this.$.set; } + public get value() { + return this.state; + } + public get subscribe() { return this.$.subscribe; } @@ -93,6 +101,50 @@ class ListService implements ISessionListService { return this.$.update; } + private currentTrack(position = 0) { + return this.state.mix?.[position]; + } + + public async next(userInitiated = false, broadcast = false) { + let position = this.state.position + 1; + if (position >= this.state.mix.length) { + position = this.state.position; + } + const currentTrack = this.currentTrack(position); + const data = await fetchNext({ + visitorData: this.state?.visitorData, + params: encodeURIComponent("OAHyAQIIAQ=="), + playlistSetVideoId: currentTrack?.playlistSetVideoId, + index: position, + loggingContext: currentTrack?.loggingContext?.vssLoggingContext?.serializedContextData, + videoId: currentTrack?.videoId, + playlistId: this.currentMixId, + clickTracking: this?.clickTrackingParams, + }); + if (!data) return; + await this.sanitizeAndUpdate("APPLY", data); + + await AudioPlayer.next(userInitiated, broadcast); + } + + public async previous(broadcast = false) { + const data = await fetchNext({ + visitorData: this.state?.visitorData, + params: encodeURIComponent("OAHyAQIIAQ=="), + playlistSetVideoId: this.state.mix[this.position]?.playlistSetVideoId, + index: this.state.position, + loggingContext: this.currentTrack?.loggingContext?.vssLoggingContext?.serializedContextData, + videoId: this.currentTrack?.videoId, + playlistId: this.currentMixId, + ctoken: this?.continuation, + clickTracking: this?.clickTrackingParams, + }); + if (!data) return; + this.state.related = data.related; + await this.sanitizeAndUpdate("APPLY", data); + + await AudioPlayer.next(true, true); + } public async getMoreLikeThis({ playlistId }: { playlistId?: string }): Promise { const toggle = togglePlayerLoad(); await tick(); @@ -116,13 +168,18 @@ class ListService implements ISessionListService { response.results.shift(); } - this.sanitizeAndUpdate("APPLY", { ...response, mix: ["append", response.results] }); + const state = await this.sanitizeAndUpdate("APPLY", { ...response, mix: ["append", response.results] }); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.updateGuestTrackQueue(this.state); + groupSession.updateGuestTrackQueue(state); } - await getSrc(this.state.mix[this.state.position + 1].videoId, this.state.mix[this.state.position].playlistId); + await getSrc( + this.state.mix[this.state.position + 1].videoId, + this.state.mix[this.state.position].playlistId, + null, + false, + ); } catch (err) { Logger.err(err); notify(err, "error"); @@ -176,7 +233,7 @@ class ListService implements ISessionListService { const results = data.results; - this.sanitizeAndUpdate("APPLY", { + const state = await this.sanitizeAndUpdate("APPLY", { ...data, mix: ["append", results], }); @@ -184,7 +241,7 @@ class ListService implements ISessionListService { const src = await getSrc(this.state.mix[key].videoId); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.updateGuestContinuation(this.state); + groupSession.updateGuestContinuation(state); } return src.body; @@ -229,13 +286,14 @@ class ListService implements ISessionListService { getSrc(videoId ?? item?.videoId, item?.playlistId, config?.playerParams); - this.sanitizeAndUpdate( - willRevert ? "SET" : "APPLY", - Object.assign(this.state, { ...data, mix: ["append", data.results] }), - ); + const state = await this.sanitizeAndUpdate(willRevert ? "SET" : "APPLY", { + ...this.state, + ...data, + mix: ["append", data.results], + }); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.expAutoMix(this.state); + groupSession.expAutoMix(state); } } catch (err) { Logger.err(err); @@ -292,14 +350,14 @@ class ListService implements ISessionListService { return; } - this.sanitizeAndUpdate("APPLY", { + const state = await this.sanitizeAndUpdate("APPLY", { ...data, mix: ["set", data.results], currentMixType: "playlist", }); await tick(); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.expAutoMix(this.state); + groupSession.expAutoMix(state); } return await getSrc(this.state.mix[index]?.videoId, playlistId, null, true); @@ -348,7 +406,7 @@ class ListService implements ISessionListService { splice(this.state.mix, key + 1, 0, ...itemToAdd); - this.sanitizeAndUpdate("APPLY", { mix: ["set", this.state.mix] satisfies MixListAppendOp }); + await this.sanitizeAndUpdate("APPLY", { mix: ["set", this.state.mix] satisfies MixListAppendOp }); if (!oldLength) { await getSrc(this.state.mix[0].videoId, this.state.mix[0].playlistId, null, true); @@ -377,10 +435,10 @@ class ListService implements ISessionListService { ]; } // console.log(mix) - this.sanitizeAndUpdate("APPLY", { mix: this.state.mix }); + const state = this.sanitizeAndUpdate("APPLY", { mix: this.state.mix }); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.updateGuestTrackQueue(this.state); + groupSession.updateGuestTrackQueue(state); } } @@ -394,7 +452,7 @@ class ListService implements ISessionListService { playerParams?: string; playlistSetVideoId?: string; clickTrackingParams?: string; - endpoint?: { browseId: string; pageType: string } & Endpoint; + endpoint?: { browseId: string; pageType: string }; musicVideoType?: string; params?: string; index?: number; @@ -411,10 +469,10 @@ class ListService implements ISessionListService { crypto.getRandomValues(new Uint8Array(8)).reduce((prev, cur) => (prev += cur), 0), ); - this.sanitizeAndUpdate("SET", { mix: this.state.mix }); + const state = this.sanitizeAndUpdate("SET", { mix: this.state.mix }); if (groupSession?.initialized && groupSession?.hasActiveSession) { - groupSession.updateGuestTrackQueue(this.state); + groupSession.updateGuestTrackQueue(state); } } @@ -447,12 +505,13 @@ class ListService implements ISessionListService { mix: [], visitorData: "", position: 0, + related: null, }; return this.state; } /** Sanitize (diff) and update the state */ - private sanitizeAndUpdate( + private async sanitizeAndUpdate( kind: "APPLY" | "SET", to: { [Key in keyof ISessionListProvider]?: ISessionListProvider[Key] extends any[] @@ -460,50 +519,63 @@ class ListService implements ISessionListService { : ISessionListProvider[Key]; }, ) { - this.update((old) => { - if (kind === "APPLY") { - let key; - let item; - for (key in to) { - item = to[key]; - if (!(item !== undefined && item !== null)) continue; - - if (!VALID_KEYS.includes(key)) { - console.log("SKIPPING INVALID KEY", key); - - continue; - } - // Skip if same value - if (old[key] === to[key]) { - console.log("SKIPPING UNCHANGED", key); - continue; - } - - // `mix` has a slightly altered type here - if (key === "mix") { - // index 0 = operation - // index 1 = data - if (to.mix[0] === "append") { - old.mix.push(...(to.mix[1] as Item[])); - } else if (to.mix[0] === "set") { - old.mix = (to.mix as MixListAppendOp)[1]; - } - if (filterAutoPlay.value) { - old.mix = filterList(old.mix); + await this.$.updateAsync( + (old) => + new Promise((resolve) => { + if (kind === "APPLY") { + let key; + let item; + for (key in to) { + item = to[key]; + if (!(item != undefined && item != null)) continue; + + if (!VALID_KEYS.includes(key)) { + console.log("SKIPPING INVALID KEY", key); + + continue; + } + if (key === "related") { + if (old[key]?.browseId === to[key]?.browseId) { + old.related = null; + continue; + } + } + // Skip if same value + if (old[key] === to[key]) { + console.log("SKIPPING UNCHANGED", key); + continue; + } + + // `mix` has a slightly altered type here + if (key === "mix") { + // index 0 = operation + // index 1 = data + if (to.mix[0] === "append") { + old.mix.push(...(to.mix[1] as Item[])); + } else if (to.mix[0] === "set") { + old.mix = (to.mix as MixListAppendOp)[1]; + } + if (filterAutoPlay.value) { + old.mix = filterList(old.mix); + } + } else if (to[key] !== undefined && to[key] !== null) { + old[key] = to[key]; + } } - } else if (to[key] !== undefined && to[key] !== null) { - old[key] = to[key]; - } - } - Object.assign(this.state, old); + Object.assign(this.state, old); - return { ...old, ...this.state } as ISessionListProvider; - } else { - const { mix } = to; - return { ...to, mix: mix[1] ? mix[1] : old["mix"] } as ISessionListProvider; - } - }); + resolve({ ...old, ...this.state } as ISessionListProvider); + } else { + const { mix } = to; + for (const key in to) { + if (!VALID_KEYS.includes(key as any)) delete to[key]; + } + resolve({ ...to, mix: mix[1] ? mix[1] : old["mix"] } as ISessionListProvider); + } + }), + ); + return this.$.value; } } diff --git a/app/src/lib/stores/list/types.list.ts b/app/src/lib/stores/list/types.list.ts index 341af52f..f9c22f42 100644 --- a/app/src/lib/stores/list/types.list.ts +++ b/app/src/lib/stores/list/types.list.ts @@ -11,6 +11,14 @@ export interface ISessionListProvider { position: number; currentMixType: "playlist" | "auto" | "local" | null; visitorData: null | string; + related?: { + browseId: string; + browseEndpointContextSupportedConfigs: { + browseEndpointContextMusicConfig: { + pageType: "MUSIC_PAGE_TYPE_TRACK_RELATED"; + }; + }; + } | null; } export interface ISessionListService { diff --git a/app/src/lib/stores/sessions.ts b/app/src/lib/stores/sessions.ts index 2e5b1788..257fbb0a 100644 --- a/app/src/lib/stores/sessions.ts +++ b/app/src/lib/stores/sessions.ts @@ -158,7 +158,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController this._once = true; this._allCanPlay = true; - await AudioPlayer.next(true, false); + await SessionListService.next(true, false); setTimeout(() => (this._once = false), 25); } @@ -231,7 +231,9 @@ export class GroupSession extends EventEmitter implements GroupSessionController public connect(id: string): void { if (!this._rtc) return; - if (this._peerIds.has(id)) return notify(`Already connected to peer ${id}!`, "error"); + if (this._peerIds.has(id)) { + return notify(`Already connected to peer ${id}!`, "error"); + } // Connect to the session host, store this connection if (!this._hasActiveSession) this._hasActiveSession = true; @@ -243,6 +245,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController permissions: {}, role: "guest", } as ConnectedClient, + reliable: true, serialization: "binary", }); @@ -296,7 +299,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController displayName: displayName, role: type || "guest", }; - this._rtc = new this._peerJs(clientId); + this._rtc = new this._peerJs(clientId, { debug: 3 }); if (!this._hasActiveSession) this._hasActiveSession = true; this._connectionStates.update((u) => ({ @@ -305,7 +308,6 @@ export class GroupSession extends EventEmitter implements GroupSessionController })); this._rtc.on("open", (id) => { - Logger.debug(`Opened RTC Session: ${id}`); if (type === "host") { this.initSession(); } @@ -344,7 +346,8 @@ export class GroupSession extends EventEmitter implements GroupSessionController }); } catch (err) { if (err.message) { - const pos = parseInt((err.message as string).match(/\d+$/g).at(0)); + console.log(err); + const pos = parseInt((err.message as string).match(/\d+$/g)?.at(0)); err.message.includes("position") ? console.log((data as string).slice(0, pos), (data as string).slice(pos)) : console.error(err); @@ -361,7 +364,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController }); }).then((list) => { SessionListService.updatePosition(list.position - 1); - AudioPlayer.next(true, false); + SessionListService.next(true, false); }); } /** Any other mix updates */ @@ -391,7 +394,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController if (dir === "<-") { AudioPlayer.previous(false); } else if (dir === "->") { - AudioPlayer.next(true, false); + SessionListService.next(true, false); } } /** Updates the playback state for the connected client */ @@ -405,6 +408,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController public send(command: Command, type: Kind, data: JSON, metadata?: Client): void { if (!this._initialized) return; + iter(this._connections, (conn) => { // TODO! figure out if this check is valiid or not if (this.client.clientId === conn.peer) return; @@ -517,8 +521,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController this.send("PUT", "state.set.mix", SessionListService.toJSON(), this.client); }); } else if (kind === "playlist") { - // Logger.debug(data); - SessionListService.initPlaylistSession({ playlistId: data?.playlistId }).then(() => { + SessionListService.initPlaylistSession({ index: 0, playlistId: data?.playlistId }).then(() => { this.send("PUT", "state.set.mix", SessionListService.toJSON(), this.client); }); } @@ -532,10 +535,14 @@ export class GroupSession extends EventEmitter implements GroupSessionController private listenToConnection(connection: DataConnection): void { connection.on("data", async (data) => { const processed = await this.process(data as string); - if (processed.metadata.clientId === this.client.clientId) return; + + if (processed.metadata.clientId === this.client.clientId) + return notify(processed.metadata.clientId + " " + this.client.clientId, "error"); + if (processed.command === "CONNECT" && Array.isArray(processed.data)) { const _ids = filter(processed.data as string[], (id) => id !== this.client.clientId); const ids = Object.keys(this._rtc.connections); + iter(_ids, (item) => { if (!ids.includes(item)) { this.connect(item); @@ -543,6 +550,7 @@ export class GroupSession extends EventEmitter implements GroupSessionController }); return; } + this.send(processed.command, processed.type, processed.data, processed.metadata); }); diff --git a/app/src/lib/stores/settings.ts b/app/src/lib/stores/settings.ts index 6a893830..b4eb2d2b 100644 --- a/app/src/lib/stores/settings.ts +++ b/app/src/lib/stores/settings.ts @@ -1,4 +1,5 @@ import { browser } from "$app/environment"; +import { objectKeys } from "$lib/utils/collections/objects"; import { ENV_DONATION_URL } from "../../env"; import { get, writable } from "svelte/store"; @@ -38,30 +39,6 @@ export interface UserSettings { appinfo: AppInfo; } -export const SettingsSchema = { - appearance: { - Theme: [Kind.Multi, ["Dark", "Dim", "Midnight", "YTM"]], - "Immersive Queue": [Kind.Toggle, null], - }, - playback: { - "Dedupe Automix": [Kind.Toggle, null], - "Prefer WebM Audio": [Kind.Toggle, null], - Quality: [Kind.Multi, ["Normal", "Low"]], - Stream: [Kind.Multi, ["HTTP", "HLS"]], - }, - network: { - "HLS Stream Proxy": [Kind.Text, "(WIP)"], - }, - search: { - Preserve: [Kind.Multi, ["Category", "Query", "Category + Query", "None"]], - }, - about: { - Donate: [Kind.None, ENV_DONATION_URL], - - GitHub: [Kind.None, "https://github.com/snuffyDev/Beatbump"], - }, -}; - let list: UserSettings = { appearance: { Theme: "Dark", @@ -96,9 +73,12 @@ function _settings() { return writable(list); } if ("localStorage" in self === false) return; - const stored = JSON.parse(localStorage.getItem("settings")) as UserSettings; + const stored = JSON.parse(localStorage.getItem("settings")) as Partial; + // Migrate from previous settings to new ones - if (!stored?.appearance && !stored?.playback && !stored?.search) { + const keys = objectKeys(stored || list); + + if (!keys.every((k) => ["appearance", "playback", "search", "network"].includes(k))) { const theme = localStorage.getItem("theme") as Lowercase; //@ts-expect-error it's correct, the compilers lying list.appearance.Theme = @@ -118,10 +98,10 @@ function _settings() { localStorage.clear(); localStorage.setItem("settings", JSON.stringify(list)); } else { - if (!stored.network["HLS Stream Proxy"]) { + if (!stored?.network["HLS Stream Proxy"]) { stored.network["HLS Stream Proxy"] = "https://yt-hls-rewriter.onrender.com/"; } - list = stored; + list = stored as UserSettings; } const store = writable(list); diff --git a/app/src/lib/utils/browserDetection.ts b/app/src/lib/utils/browserDetection.ts index b1018679..0151faaf 100644 --- a/app/src/lib/utils/browserDetection.ts +++ b/app/src/lib/utils/browserDetection.ts @@ -3,5 +3,6 @@ import { browser } from "$app/environment"; const USER_AGENT = browser ? navigator.userAgent : "null"; const isAppleMobileDevice = /i(Phone|Pad|Pod)/i.test(USER_AGENT); -export const isSafari = - (USER_AGENT.indexOf("Safari") > -1 && !/Chrome|Chromium|Edge?/i.test(USER_AGENT)) || isAppleMobileDevice; +export const isSafari = browser + ? (USER_AGENT.indexOf("Safari") > -1 && !/Chrome|Chromium|Edge?/i.test(USER_AGENT)) || isAppleMobileDevice + : false; diff --git a/app/src/lib/utils/collections/array.ts b/app/src/lib/utils/collections/array.ts index 0ca2a103..196737b2 100644 --- a/app/src/lib/utils/collections/array.ts +++ b/app/src/lib/utils/collections/array.ts @@ -119,3 +119,18 @@ export function every(array: Array, predicate: (item: T) => b } return true; } +export function sift(array: ArrayLike, predicate: (item: T) => item is T): [T[], S[]]; +export function sift(array: ArrayLike, predicate: (item: T) => boolean): [T[], S[]]; +export function sift(array: ArrayLike, predicate: (item: T) => unknown): [T[], S[]] { + const resultT: T[] = []; + const resultF: S[] = []; + + for (let idx = 0; idx < array.length; idx++) { + if (predicate(array[idx])) { + resultT.push(array[idx] as unknown as T); + } else { + resultF.push(array[idx] as unknown as S); + } + } + return [resultT, resultF]; +} diff --git a/app/src/lib/utils/collections/objects.ts b/app/src/lib/utils/collections/objects.ts index e25f50f5..db14cc1b 100644 --- a/app/src/lib/utils/collections/objects.ts +++ b/app/src/lib/utils/collections/objects.ts @@ -77,3 +77,7 @@ export function sortObj>(object: T) { return acc; }, {} as IObject); } + +export function objectKeys>(object: T) { + return Object.keys(object) as unknown as (keyof T)[]; +} diff --git a/app/src/lib/utils/localStorage.ts b/app/src/lib/utils/localStorage.ts new file mode 100644 index 00000000..0f00b08b --- /dev/null +++ b/app/src/lib/utils/localStorage.ts @@ -0,0 +1,7 @@ +import { browser } from "$app/environment"; + +class LS { + static get(key: string): T { + if (!browser) return; + } +} diff --git a/app/src/lib/utils/logger.ts b/app/src/lib/utils/logger.ts index a818e67a..f645a121 100644 --- a/app/src/lib/utils/logger.ts +++ b/app/src/lib/utils/logger.ts @@ -31,11 +31,7 @@ function err(...message: any[]): void { } function dev(...message: any[]) { if (!isDev) return; - if (arguments.length > 1) { - console.log(LOG_TYPES.dev, ...message); - } else { - console.log(LOG_TYPES.dev, message); - } + console.log(LOG_TYPES.dev, ...message); } export const Logger = { diff --git a/app/src/lib/utils/stores.ts b/app/src/lib/utils/stores.ts index 53728812..2d569bc5 100644 --- a/app/src/lib/utils/stores.ts +++ b/app/src/lib/utils/stores.ts @@ -9,6 +9,8 @@ export class ReadableStore { constructor(value: T) { this._value = value; this.observers = []; + this.subscribe = this.subscribe.bind(this); + this.notifyObservers = this.notifyObservers.bind(this); } public get value(): T { @@ -33,6 +35,10 @@ export class ReadableStore { export class WritableStore extends ReadableStore { constructor(value: T) { super(value); + + this.set = this.set.bind(this); + this.update = this.update.bind(this); + this.subscribe = this.subscribe.bind(this); } public get value(): T { @@ -52,6 +58,10 @@ export class WritableStore extends ReadableStore { this.value = value; } + public async updateAsync(updater: (value: T) => Promise): Promise { + this.value = await updater(this.value); + } + public update(updater: (value: T) => T): void { this.value = updater(this.value); } diff --git a/app/src/lib/workers/db/db.ts b/app/src/lib/workers/db/db.ts index 7ef177ae..85f8ab2a 100644 --- a/app/src/lib/workers/db/db.ts +++ b/app/src/lib/workers/db/db.ts @@ -307,7 +307,6 @@ export function deleteSongFromPlaylist(playlistId: string, videoId: string): Pro } export function getFavorites(): Promise> { - let results = []; return new Promise>((resolve) => { return db.transaction("favorites", "readwrite", (store) => { try { @@ -373,7 +372,7 @@ export function getPlaylists(): Promise> { const illegalArray = item?.items[subIdx]; results[idx].items.splice(subIdx, 1); - results[idx].items = [...results[idx].items, ...(illegalArray as Array)]; + results[idx].items = [...results[idx].items, ...(illegalArray as Array)].flat(); } } results[idx].length = item?.items.length ?? item?.length; diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index 3ba728b8..e652e8a0 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -24,7 +24,8 @@ import { Logger } from "$lib/utils/logger"; let main: HTMLElement; - let key: string = $page.data.key; + $: key = $page.data.key; + let isFullscreen = false; $: $fullscreenStore === "open" ? setTimeout(() => { @@ -47,9 +48,7 @@ }); } } - beforeNavigate(() => { - key = $page.data.key; - }); + afterNavigate(() => { if (import.meta.env.SSR) return; if (main) main.scrollTop = 0; @@ -58,6 +57,7 @@ { + if (!browser) return; if (groupSession.initialized && groupSession.hasActiveSession) { groupSession.disconnect(); } diff --git a/app/src/routes/api/v1/next.json/+server.ts b/app/src/routes/api/v1/next.json/+server.ts index 443e0e6f..dde32502 100644 --- a/app/src/routes/api/v1/next.json/+server.ts +++ b/app/src/routes/api/v1/next.json/+server.ts @@ -13,6 +13,14 @@ export type NextEndpointResponse = { clickTrackingParams: string; currentMixId: string; visitorData: string; + related: { + browseId: string; + browseEndpointContextSupportedConfigs: { + browseEndpointContextMusicConfig: { + pageType: "MUSIC_PAGE_TYPE_TRACK_RELATED"; + }; + }; + }; }; export const GET: RequestHandler = async ({ url }): Promise> => { @@ -62,10 +70,10 @@ export const GET: RequestHandler = async ({ url }): Promise { try { - const carousels: { header?: { text?: string }; items?: (ICarouselTwoRowItem | IListItemRenderer)[] }[] = []; + const carousels: { header?: CarouselHeader; items?: (ICarouselTwoRowItem | IListItemRenderer)[] }[] = []; const description: { header?: string; description?: string } = {}; const browseId = url.searchParams.get("browseId"); @@ -36,7 +47,7 @@ export const GET: RequestHandler = async ({ url }) => { while (--pos > -1) { const section = contents[pos]; if (section?.musicCarouselShelfRenderer) { - const carousel: { header?: { text: string }; items?: Item[] } = {}; + const carousel: { header?: CarouselHeader; items?: Item[] } = {}; const items = []; let idx = section?.musicCarouselShelfRenderer?.contents?.length; @@ -52,8 +63,8 @@ export const GET: RequestHandler = async ({ url }) => { } carousel.items = items; carousel.header = { - text: section?.musicCarouselShelfRenderer?.header?.musicCarouselShelfBasicHeaderRenderer?.title?.runs[0] - ?.text, + title: + section?.musicCarouselShelfRenderer?.header?.musicCarouselShelfBasicHeaderRenderer?.title?.runs[0]?.text, }; carousels.push(carousel); } diff --git a/app/src/routes/search/[slug]/+page.svelte b/app/src/routes/search/[slug]/+page.svelte index 99b605f3..e1db61dc 100644 --- a/app/src/routes/search/[slug]/+page.svelte +++ b/app/src/routes/search/[slug]/+page.svelte @@ -56,6 +56,8 @@ itct = data?.continuation?.clickTrackingParams; } }); + + $: console.log(data);
    import Header from "$components/Layouts/Header.svelte"; import { AudioPlayer } from "$lib/player"; - import { settings, SettingsSchema, type Theme } from "$stores/settings"; + import { settings, type Theme } from "$stores/settings"; const themes: Theme[] = ["Dark", "Dim", "Midnight", "YTM"]; function handleStreamSelect() { diff --git a/app/static/icons.svg b/app/static/icons.svg index 01ae5acc..40a5164b 100644 --- a/app/static/icons.svg +++ b/app/static/icons.svg @@ -1,7 +1,8 @@ - - + + + From 0126f2ec1b7accffa5a537a33d55bd84b2409ef6 Mon Sep 17 00:00:00 2001 From: snuffy <72365477+snuffyDev@users.noreply.github.com> Date: Fri, 3 Mar 2023 02:20:03 -0500 Subject: [PATCH 10/37] `app` - Lazily instantiate IDB Mobile Menu improvm. Bigger "more" menu btn --- .gitignore | 2 + app/Dockerfile | 1 + app/src/global/redesign/modules/_player.scss | 2 +- .../stylesheet/components/_carousel.scss | 14 ----- .../lib/components/Player/Fullscreen.svelte | 21 ++++++-- .../lib/components/Player/PlayerButton.svelte | 2 +- .../lib/components/Popper/MobilePopper.svelte | 12 ++--- .../lib/components/Popper/PopperButton.svelte | 2 +- app/src/lib/components/Popper/index.scss | 5 +- app/src/lib/components/Tab/index.scss | 2 +- app/src/lib/shared/listPages.scss | 2 +- app/src/lib/stores/settings.ts | 16 ++---- app/src/lib/workers/db/service.ts | 52 +++++++------------ app/src/routes/trending/+page.svelte | 16 +++++- 14 files changed, 72 insertions(+), 77 deletions(-) diff --git a/.gitignore b/.gitignore index a603fb41..4ec53c3a 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,5 @@ node_modules /app/.svelte-kit/cloudflare* /app/.svelte-kit/adapter* /packages/proxy-server/rust/target +/app/.svelte-kit/* +app/.svelte-kit/ambient.d.ts diff --git a/app/Dockerfile b/app/Dockerfile index bd08a805..ab0813fa 100644 --- a/app/Dockerfile +++ b/app/Dockerfile @@ -12,6 +12,7 @@ RUN npm ci --legacy-peer-deps # copy local files to image COPY . . +RUN npm exec svelte-kit sync RUN npm run bb:build FROM node:18-alpine3.15 as app diff --git a/app/src/global/redesign/modules/_player.scss b/app/src/global/redesign/modules/_player.scss index 551a2500..4837aa05 100644 --- a/app/src/global/redesign/modules/_player.scss +++ b/app/src/global/redesign/modules/_player.scss @@ -23,7 +23,7 @@ max-height: 8em; max-width: 8em; margin: 0 0.1em; - padding: 0.8em; + padding: 1em; position: relative; width: auto; diff --git a/app/src/global/stylesheet/components/_carousel.scss b/app/src/global/stylesheet/components/_carousel.scss index 02fa524f..e69de29b 100644 --- a/app/src/global/stylesheet/components/_carousel.scss +++ b/app/src/global/stylesheet/components/_carousel.scss @@ -1,14 +0,0 @@ -a small { - $color: rgb(175, 175, 175); - font-size: 0.95rem; - font-weight: 700; - font-variant-caps: all-petite-caps; - letter-spacing: 0.05rem; - transition: ease-in color 75ms; - color: $color; - &:hover { - color: lighten($color, 30%); - text-decoration: underline 0.001rem solid; - text-underline-offset: 0.001rem; - } -} diff --git a/app/src/lib/components/Player/Fullscreen.svelte b/app/src/lib/components/Player/Fullscreen.svelte index 17c6f773..ccdc6750 100644 --- a/app/src/lib/components/Player/Fullscreen.svelte +++ b/app/src/lib/components/Player/Fullscreen.svelte @@ -22,7 +22,7 @@ import { groupSession } from "$lib/stores/sessions"; import ProgressBar from "./ProgressBar"; import { CTX_ListItem } from "$lib/contexts"; - import { notify, requestFrameSingle } from "$lib/utils"; + import { requestFrameSingle } from "$lib/utils"; import type { Thumbnail } from "$lib/types"; import { windowWidth } from "$stores/window"; import type { EasingFunction, TransitionConfig } from "svelte/transition"; @@ -410,8 +410,10 @@
    {#if $related.description.description} - {$related?.description?.header} - +
    + {$related?.description?.header} + +
    {/if} {#if Array.isArray($related.carousels)} {#key $related.carousels} @@ -438,7 +440,12 @@ diff --git a/app/src/lib/components/Chips/Chip/index.scss b/app/src/lib/components/Chips/Chip/index.scss new file mode 100644 index 00000000..15d9cbc1 --- /dev/null +++ b/app/src/lib/components/Chips/Chip/index.scss @@ -0,0 +1,25 @@ +.chip { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + min-width: 2rem; + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.1); + font-size: 1.125em; + background: #fff; + color: #030303; + background: rgba(255, 255, 255, 0.1); + color: #fff; + border-radius: 0.5rem; + border: none; + height: 2.25rem; + padding: 0.75em 1em; + + white-space: nowrap; + + &.selected { + background-color: #fff; + color: #131313; + } +} diff --git a/app/src/lib/components/Chips/Chip/index.ts b/app/src/lib/components/Chips/Chip/index.ts new file mode 100644 index 00000000..574e4dc6 --- /dev/null +++ b/app/src/lib/components/Chips/Chip/index.ts @@ -0,0 +1 @@ +export { default } from "./Chip.svelte"; diff --git a/app/src/lib/components/Chips/Chips.svelte b/app/src/lib/components/Chips/Chips.svelte new file mode 100644 index 00000000..3ce0453c --- /dev/null +++ b/app/src/lib/components/Chips/Chips.svelte @@ -0,0 +1,26 @@ + + +
    + {#each chips as chip (chip.text)} + { + if (active !== chip.text) active = chip.text; + else active = ""; + }} + on:click + /> + {/each} +
    + + diff --git a/app/src/lib/components/Chips/index.scss b/app/src/lib/components/Chips/index.scss new file mode 100644 index 00000000..7497d72b --- /dev/null +++ b/app/src/lib/components/Chips/index.scss @@ -0,0 +1,9 @@ +.chips { + display: flex; + flex-direction: row; + gap: 0.5em; + margin-bottom: 0.625em; + overflow-x: auto; + font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, + Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} diff --git a/app/src/lib/components/Chips/index.ts b/app/src/lib/components/Chips/index.ts new file mode 100644 index 00000000..c3eefd90 --- /dev/null +++ b/app/src/lib/components/Chips/index.ts @@ -0,0 +1 @@ +export { default } from "./Chips.svelte"; diff --git a/app/src/lib/components/Dropdown/Dropdown.svelte b/app/src/lib/components/Dropdown/Dropdown.svelte index 1e203273..67d1b2ab 100644 --- a/app/src/lib/components/Dropdown/Dropdown.svelte +++ b/app/src/lib/components/Dropdown/Dropdown.svelte @@ -68,7 +68,7 @@ let width: number; let popperHeight; let popper: HTMLElement = undefined; - let scrollPosY: number = 0; + let scrollPosY = 0; let lastScrollTime; let isScrolling = false; let posX: number; diff --git a/app/src/lib/components/GroupSessionCreator/GroupSessionCreator.svelte b/app/src/lib/components/GroupSessionCreator/GroupSessionCreator.svelte index 2b386303..5bca1d76 100644 --- a/app/src/lib/components/GroupSessionCreator/GroupSessionCreator.svelte +++ b/app/src/lib/components/GroupSessionCreator/GroupSessionCreator.svelte @@ -7,16 +7,15 @@ import { groupSession } from "$lib/stores/sessions"; - import { IsoBase64 } from "$lib/utils"; - import { sanitize } from "$lib/utils"; + import { IsoBase64, sanitize } from "$lib/utils"; import { SITE_ORIGIN_URL } from "$stores/url"; import { tick } from "svelte"; import { fade } from "svelte/transition"; import Button from "../Button"; let step = 0; - let displayName: string = ""; - let checked: boolean = true; - let sessionURL: string = ""; + let displayName = ""; + let checked = true; + let sessionURL = ""; async function handleSubmit() { if (!displayName) return; diff --git a/app/src/lib/components/Item/Listing.svelte b/app/src/lib/components/Item/Listing.svelte index c07231bb..289f30ad 100644 --- a/app/src/lib/components/Item/Listing.svelte +++ b/app/src/lib/components/Item/Listing.svelte @@ -9,7 +9,7 @@ {#if $queue.length && state === "open"} @@ -225,15 +222,15 @@ on:pan={(event) => { if (!$isMobileMQ) return; const { detail } = event; - if (Math.abs(detail.deltaY) < 105) return; + if (Math.abs(detail.deltaY) < 65) return; trackMovement(0, detail); }} on:panend={(event) => { if (!$isMobileMQ) return; const { detail } = event; const direction = Math.sign(detail.deltaY) === -1 ? "up" : "down"; - // notify(`${detail.deltaY} : ${detail.velocityY}`, "success"); - if (Math.abs(detail.deltaY) < 105) return; + + if (Math.abs(detail.deltaY) < 65) return; if (direction === "down") { close(0, detail); fullscreenStore.set("closed"); diff --git a/app/src/lib/components/Player/Player.svelte b/app/src/lib/components/Player/Player.svelte index ed26d57d..10704b7e 100644 --- a/app/src/lib/components/Player/Player.svelte +++ b/app/src/lib/components/Player/Player.svelte @@ -73,9 +73,8 @@ import { AudioPlayer } from "$lib/player"; import { groupSession, isMobileMQ } from "$lib/stores"; import list, { currentTrack, queue, queuePosition } from "$lib/stores/list"; - import { IsoBase64, slide } from "$lib/utils"; + import { IsoBase64, slide, notify } from "$lib/utils"; import { messenger } from "$lib/utils/sync"; - import { notify } from "$lib/utils"; import { playerLoading, showAddToPlaylistPopper, showGroupSessionCreator } from "$stores/stores"; import { PopperButton } from "../Popper"; import { fullscreenStore } from "./channel"; diff --git a/app/src/lib/components/Player/ProgressBar/index.scss b/app/src/lib/components/Player/ProgressBar/index.scss index 949dbba6..fe33add2 100644 --- a/app/src/lib/components/Player/ProgressBar/index.scss +++ b/app/src/lib/components/Player/ProgressBar/index.scss @@ -78,7 +78,8 @@ progress::-webkit-progress-value { .timestamp { display: inline-block; - font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, + Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: calc(var(--base-font-size) * 0.95); letter-spacing: -0.02em; diff --git a/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte b/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte index 901e21d2..b222589d 100644 --- a/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte +++ b/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte @@ -4,18 +4,14 @@ import { showAddToPlaylistPopper } from "$lib/stores/stores"; import List from "./List.svelte"; - import { createEventDispatcher, onMount } from "svelte"; + import { createEventDispatcher } from "svelte"; import CreatePlaylist from "./CreatePlaylist.svelte"; import Modal from "../Modal"; $: isShowing = $showAddToPlaylistPopper.state; - $: item = $showAddToPlaylistPopper.item; - let thumbnail; let showCreatePlaylist; - let showConfirmation: { index?: number; state?: boolean }; let playlists = []; const fetchPlaylists = async () => { const promise = await IDBService.sendMessage("get", "playlists"); - console.log(promise); playlists = promise; }; $: if (isShowing) fetchPlaylists(); @@ -31,16 +27,7 @@ hasFocus = true; showCreatePlaylist = false; }} - on:submit={async (e) => { - const promise = await IDBService.sendMessage("create", "playlist", { - name: e.detail?.title, - description: e.detail?.description, - thumbnail: - e.detail?.thumbnail ?? - "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHdpZHRoPSIyNTZwdCIgaGVpZ2h0PSIyNTZwdCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJwcmVmaXhfX2EiPjxwYXRoIGQ9Ik0wIDBoMjU2djI1NkgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNwcmVmaXhfX2EpIj48cGF0aCBmaWxsPSIjNDI0MjQyIiBkPSJNMCAwaDI1NnYyNTZIMHoiLz48ZyBjbGlwLXBhdGg9InVybCgjcHJlZml4X19iKSI+PHRleHQgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1LjU0IDE2Ni43OTQpIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLC1hcHBsZS1zeXN0ZW0sQmxpbmtNYWNTeXN0ZW1Gb250LCZxdW90O1NlZ29lIFVJJnF1b3Q7LFJvYm90byxPeHlnZW4sVWJ1bnR1LENhbnRhcmVsbCwmcXVvdDtPcGVuIFNhbnMmcXVvdDssJnF1b3Q7SGVsdmV0aWNhIE5ldWUmcXVvdDssc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1zaXplPSIxMDAiIGZpbGw9IiNmYWZhZmEiPj88L3RleHQ+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0icHJlZml4X19iIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5MiA1NC44MzkpIiBkPSJNMCAwaDcydjE0Ni4zMjNIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L2c+PC9zdmc+", - items: Array.isArray(item) ? [...item] : [item], - }); - + on:submit={async () => { hasFocus = true; showCreatePlaylist = false; dispatch("close"); @@ -60,22 +47,7 @@
    { - showConfirmation = { index: e.detail, state: true }; - const playlist = playlists[e.detail]; - const items = [...playlist?.items, Array.isArray(item) ? [...item] : item]; - const promise = await IDBService.sendMessage("update", "playlist", { - hideAlert: false, - id: playlist.id, - items: items, - }); showAddToPlaylistPopper.set({ state: false, item: undefined }); - // console.log( - // { - // name: playlists[e.detail].name, - // item - // }, - // promise - // ); }} items={playlists} on:create={() => { diff --git a/app/src/lib/components/Popper/PopperButton.svelte b/app/src/lib/components/Popper/PopperButton.svelte index 01882a8a..e499aeb7 100644 --- a/app/src/lib/components/Popper/PopperButton.svelte +++ b/app/src/lib/components/Popper/PopperButton.svelte @@ -37,7 +37,6 @@ activeNode.set(new WeakRef(node)); } const rect = node.getBoundingClientRect(); - console.log(metadata); x = rect.left; y = rect.top; bottom = rect.bottom; @@ -78,9 +77,8 @@ import type { Artist, Thumbnail } from "$lib/types"; import Icon from "../Icon/Icon.svelte"; - import { activeNode, isOpen } from "./popperStore"; + import { activeNode, isOpen, PopperStore } from "./popperStore"; - import { PopperStore } from "./popperStore"; export let items = []; export let type = ""; export let metadata: Partial<{ @@ -90,7 +88,7 @@ length?: string; }> = {}; export let size = "1.8rem"; - export let tabindex: number = 0; + export let tabindex = 0;
    - export let active: boolean = false; + export let active = false;
    = { action: (...args) => Promise | void; }; -export const DROPDOWN_ITEMS: Partial<{ [Key in Label]: () => Partial> }> = { - "View Artist": () => ({ text: "View Artist", icon: "artist" }), - "Add to Queue": () => ({ text: "Add to Queue", icon: "queue" }), - "Play Next": () => ({ text: "Play Next", icon: "queue" }), - Favorite: () => ({ text: "Favorite", icon: "heart" }), - "Start Group Session": () => ({ text: "Start Group Session", icon: "users" }), - Share: () => ({ text: "Share", icon: "share" }), - "Go to Album": () => ({ text: "Go to Album", icon: "album" }), - "Invite Group Session": () => ({ text: "Invite Group Session", icon: "send" }), - "View Playlist": () => ({ text: "View Playlist", icon: "list" }), - "Play Song Radio": () => ({ text: "Play Song Radio", icon: "radio" }), - "Remove From Playlist": () => ({ text: "Remove From Playlist", icon: "x" }), - "Add to Playlist": () => ({ text: "Add to Playlist", icon: "list-plus" }), - "Add to Favorites": () => ({ text: "Add to Favorites", icon: "heart" }), - "Share Group Session": () => ({ text: "Share Group Session", icon: "share" }), - Shuffle: () => ({ text: "Shuffle", icon: "shuffle" }), - "Shuffle Playlist": () => ({ text: "Shuffle Playlist", icon: "shuffle" }), - "Album Radio": () => ({ text: "Album Radio", icon: "album" }), - "Edit Playlist": () => ({ icon: "edit", text: "Edit Playlist" }),"Remove from Queue": ()=> ({icon: 'x', "text": 'Remove from Queue'}) +export const DROPDOWN_ITEMS: Partial<{ [Key in Label]: Partial> }> = { + "View Artist": { text: "View Artist", icon: "artist", action: () => {} }, + "Add to Queue": { text: "Add to Queue", icon: "queue", action: () => {} }, + "Play Next": { text: "Play Next", icon: "queue", action: () => {} }, + Favorite: { text: "Favorite", icon: "heart", action: () => {} }, + "Start Group Session": { text: "Start Group Session", icon: "users", action: () => {} }, + Share: { text: "Share", icon: "share", action: () => {} }, + "Go to Album": { text: "Go to Album", icon: "album", action: () => {} }, + "Invite Group Session": { text: "Invite Group Session", icon: "send", action: () => {} }, + "View Playlist": { text: "View Playlist", icon: "list", action: () => {} }, + "Play Song Radio": { text: "Play Song Radio", icon: "radio", action: () => {} }, + "Remove From Playlist": { text: "Remove From Playlist", icon: "x", action: () => {} }, + "Add to Playlist": { text: "Add to Playlist", icon: "list-plus", action: () => {} }, + "Add to Favorites": { text: "Add to Favorites", icon: "heart", action: () => {} }, + "Share Group Session": { text: "Share Group Session", icon: "share", action: () => {} }, + Shuffle: { text: "Shuffle", icon: "shuffle", action: () => {} }, + "Shuffle Playlist": { text: "Shuffle Playlist", icon: "shuffle", action: () => {} }, + "Album Radio": { text: "Album Radio", icon: "album", action: () => {} }, + "Edit Playlist": { icon: "edit", text: "Edit Playlist", action: () => {} }, + "Remove from Queue": { icon: "x", text: "Remove from Queue", action: () => {} }, }; export function buildDropdown() { const menu: TypedDropdownItem[] = []; return { - add: function (this, ...args: [label: Label | null, action: TypedDropdownItem["action"] | null]) { - const [label, action] = args; - if (!label && !action) return this as ReturnType; - const item = DROPDOWN_ITEMS[label as keyof typeof DROPDOWN_ITEMS](); - item.action = action; - menu.push(item as TypedDropdownItem); - return this as ReturnType; + add: function (label?: Label, action?: TypedDropdownItem["action"]) { + if (!label && !action) return this; + const item = Object.assign({}, DROPDOWN_ITEMS[label]) as TypedDropdownItem; + if (item) { + item.action = action; + menu.push(item); + } + return this; }, build: function () { return menu; diff --git a/app/src/lib/contexts.ts b/app/src/lib/contexts.ts index 5a5a842d..c3804031 100644 --- a/app/src/lib/contexts.ts +++ b/app/src/lib/contexts.ts @@ -3,7 +3,10 @@ import type { ListItemCtx } from "./types/allContexts"; const KEYS = { releaseCtxKey: {}, + homeChipCtxKey: {}, }; + export const listItemCtxKey = {}; export const CTX_ListItem = makeContext(listItemCtxKey); export const releasePageContext = makeContext<{ page: "release" }>(KEYS.releaseCtxKey); +export const homeChipContext = makeContext<{ params: string }>(KEYS.homeChipCtxKey); diff --git a/app/src/lib/player.ts b/app/src/lib/player.ts index a2a0774e..8ee03ad0 100644 --- a/app/src/lib/player.ts +++ b/app/src/lib/player.ts @@ -221,6 +221,7 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP } if (!localStorage.getItem("volume")) { this._player.volume = 0.5; + try { localStorage.setItem("volume", "0.5"); } catch (e) { @@ -229,14 +230,12 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP } else { this._player.volume = +localStorage.getItem("volume"); } + this._player.autoplay = true; this._player.preload = "metadata"; this._durationUnsubscriber = this._durationStore.subscribe((value) => { - // Logger.log(`[LOG:PLAYER:Update]: Duration: `, value); - this._duration = value; - // notify(`${this._duration}`, "error");] }); this._currentTimeUnsubscriber = this._currentTimeStore.subscribe((value) => { this._currentTime = value; @@ -853,14 +852,14 @@ class BaseAudioPlayer extends EventEmitter implements IAudioP this._hasNextSrc = true; } - this.progress.set(this._isWebkit && !this.isHLSPlayer ? this._player.currentTime * 2 : this._player.currentTime); + this.progress.set(this._player.currentTime); /* This checks if the user is on an iOS device due to the length of a song being doubled on iOS, we have to cut the time in half. Doesn't effect other devices. */ - if (this._isWebkit && this.isHLSPlayer === false && this._currentTime >= this._duration) { + if (this._isWebkit && this.isHLSPlayer === false && this._player.currentTime >= this._duration - 1) { this.onEnded(); } }); diff --git a/app/src/lib/stores/list/derived.ts b/app/src/lib/stores/list/derived.ts index 54ba0bdc..7bd81628 100644 --- a/app/src/lib/stores/list/derived.ts +++ b/app/src/lib/stores/list/derived.ts @@ -18,7 +18,7 @@ const currentTrack = derived(SessionListService, ($list) => $list.mix[$list.posi const queuePosition = derived(SessionListService, ($list) => $list.position); const related = (() => { - let prevPosition = undefined; + const prevPosition = undefined; const { subscribe } = derived( SessionListService, ($list, set) => { diff --git a/app/src/lib/stores/list/sessionList.ts b/app/src/lib/stores/list/sessionList.ts index 5c2469ef..312a9209 100644 --- a/app/src/lib/stores/list/sessionList.ts +++ b/app/src/lib/stores/list/sessionList.ts @@ -313,7 +313,7 @@ class ListService implements ISessionListService { }): Promise<{ body: ResponseBody; error?: boolean }> { const toggle = togglePlayerLoad(); try { - let { + const { playlistId = "", index = 0, clickTrackingParams = "", diff --git a/app/src/lib/utils/isArray.ts b/app/src/lib/utils/isArray.ts index 2ca719b3..71442000 100644 --- a/app/src/lib/utils/isArray.ts +++ b/app/src/lib/utils/isArray.ts @@ -2,9 +2,9 @@ export function isArray(item: unknown): item is Array { return Array.isArray(item); } -export function isArrayAndReturn(item: unknown): Array | false { +export function isArrayAndReturn(item: unknown, onSuccess: (item: Array) => V): V | false { if (isArray(item)) { - return item; + return onSuccess(item); } return false; } diff --git a/app/src/lib/utils/sync/mutex.ts b/app/src/lib/utils/sync/mutex.ts index 32c30f91..7258dc15 100644 --- a/app/src/lib/utils/sync/mutex.ts +++ b/app/src/lib/utils/sync/mutex.ts @@ -40,7 +40,7 @@ export class Semaphore implements ISemaphore { queueMicrotask(release); } } - acquire(value: number = 1): Promise<[number, Releaser]> { + acquire(value = 1): Promise<[number, Releaser]> { if (value <= 0) throw new Error(`Value must be greater than 0. Received: #{value}`); return new Promise((resolve, reject) => { diff --git a/app/src/lib/utils/xmlBuilder.ts b/app/src/lib/utils/xmlBuilder.ts index 1c165e12..3d26b616 100644 --- a/app/src/lib/utils/xmlBuilder.ts +++ b/app/src/lib/utils/xmlBuilder.ts @@ -55,7 +55,7 @@ function buildElements(nodes: XMLNode[]) { export function buildXML(input: XMLRoot) { let output = ""; - let depth = 0; + const depth = 0; let isFirstLine = true; if (input["declaration"]) { output += buildDeclaration(input["declaration"], depth); diff --git a/app/src/lib/workers/db/service.ts b/app/src/lib/workers/db/service.ts index dbc77023..14a8bc9f 100644 --- a/app/src/lib/workers/db/service.ts +++ b/app/src/lib/workers/db/service.ts @@ -1,6 +1,21 @@ import { browser, dev } from "$app/environment"; import type { IDBMessage, Actions, Methods } from "./types"; import { notify } from "$lib/utils/utils"; +type Deferred = { + promise: Promise; + resolve: (value: T | PromiseLike) => void; + reject: (reason: any) => void; +}; +const Defer = () => { + const p: Partial> = {}; + + p.promise = new Promise((resolve, reject) => { + p.resolve = resolve; + p.reject = reject; + }); + + return p as Deferred; +}; class IDBService { private worker: Worker = null; @@ -28,32 +43,30 @@ class IDBService { if (this.worker === null) { this.worker = await this.setup(); } - return await new Promise>["data"]>((resolve, reject) => { - // Unfortunately in order to cleanup the event listener after - // We have to define `process` here. - function process>["data"]>>(event: MessageEvent) { - const { data } = event; - - if (data.error) { - notify(data.message, "error"); - } - - if (data.message) { - notify(data.message, "success"); - } - - if (data.data) { - this.worker.onmessage = null; - resolve(data.data); - } - - this.worker.onmessage = null; - resolve(data.data); + const promise = Defer>["data"]>(); + + const process = >["data"]>>(event: MessageEvent) => { + const { data } = event; + + if (data.error) { + notify(data.message, "error"); + } + + if (data.message) { + notify(data.message, "success"); + } + + if (data.data) { + promise.resolve(data.data); } - this.worker.onmessage = process; - this.worker.postMessage({ action, type, params }); - }); + promise.resolve(data.data); + }; + + this.worker.onmessage = process; + this.worker.postMessage({ action, type, params }); + + return promise.promise; } } diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index 35648f3f..2d2e0450 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -17,11 +17,10 @@ import { groupSession } from "$lib/stores"; import { AudioPlayer } from "$lib/player"; import { page } from "$app/stores"; - import { afterNavigate, beforeNavigate } from "$app/navigation"; + import { afterNavigate } 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; @@ -49,7 +48,7 @@ } } - afterNavigate(({from, to,}) => { + afterNavigate(({ from, to }) => { if (import.meta.env.SSR) return; if (main) main.scrollTop = 0; }); diff --git a/app/src/routes/api/v1/playlist.json/+server.ts b/app/src/routes/api/v1/playlist.json/+server.ts index 2ac0bf3d..700880e3 100644 --- a/app/src/routes/api/v1/playlist.json/+server.ts +++ b/app/src/routes/api/v1/playlist.json/+server.ts @@ -1,7 +1,6 @@ import { MusicResponsiveListItemRenderer, MusicTwoRowItemRenderer } from "$lib/parsers"; -import type { CarouselHeader } from "$lib/types"; -import type { NextContinuationData } from "$lib/types"; +import type { CarouselHeader, NextContinuationData } from "$lib/types"; import type { IListItemRenderer } from "$lib/types/musicListItemRenderer"; import { map } from "$lib/utils/collections"; import { error, json, type RequestHandler } from "@sveltejs/kit"; diff --git a/app/src/routes/api/v1/search.json/+server.ts b/app/src/routes/api/v1/search.json/+server.ts index 558c5767..ed7b35a8 100644 --- a/app/src/routes/api/v1/search.json/+server.ts +++ b/app/src/routes/api/v1/search.json/+server.ts @@ -53,7 +53,6 @@ export const GET: RequestHandler = async ({ url }) => { throw error(response.status, response.statusText); } const data = await response.json(); - console.log("RESPONSE", data); const hasTabs = Array.isArray(data?.contents?.tabbedSearchResultsRenderer?.tabs); @@ -65,7 +64,6 @@ export const GET: RequestHandler = async ({ url }) => { ctoken !== "" ? parseContinuation(continuationContents, filter as SearchFilter) : parseContents(contents, filter as SearchFilter); - console.log("RESULTS", results); return json(results); } catch (err) { console.error(err); @@ -74,8 +72,8 @@ export const GET: RequestHandler = async ({ url }) => { }; function parseContinuation(contents: Record, filter: string & SearchFilter) { - const continuation: Maybe> = x; - Array.isArray(contents?.continuations) && contents?.continuations[0]?.nextContinuationData; + const continuation: Maybe> = + Array.isArray(contents?.continuations) && contents?.continuations[0]?.nextContinuationData; const type = filter.includes("playlists") ? "playlists" : filter; const results = parseResults(contents.contents, type); @@ -133,6 +131,9 @@ function parseContents( } results.unshift(shelf); } else { + const musicCardShelfRenderer = section.musicCardShelfRenderer; + const item = {}; + item.buttons = musicCardShelfRenderer.buttons; } } return { results, continuation }; diff --git a/app/src/routes/artist/[slug]/releases/+page.ts b/app/src/routes/artist/[slug]/releases/+page.ts index c554d9b9..84c81d85 100644 --- a/app/src/routes/artist/[slug]/releases/+page.ts +++ b/app/src/routes/artist/[slug]/releases/+page.ts @@ -7,9 +7,9 @@ export const load: PageLoad = (async ({ params, }): Promise<{ header: { artist?: string; type?: string }; contents?: CarouselItem[] }> => { // let browseId = url.searchParams.get("browseId"); - let qparams = url.searchParams.get("params"); - let itct = url.searchParams.get("itct"); - let visitorData = url.searchParams.get("visitorData"); + const qparams = url.searchParams.get("params"); + const itct = url.searchParams.get("itct"); + const visitorData = url.searchParams.get("visitorData"); const response = await fetch( `/artist/${params.slug}/releases.json?visitorData=${visitorData}¶ms=${qparams}&itct=${encodeURIComponent( itct, diff --git a/app/src/routes/explore/[slug].json/+server.ts b/app/src/routes/explore/[slug].json/+server.ts index 211fd7e6..6d41d3eb 100644 --- a/app/src/routes/explore/[slug].json/+server.ts +++ b/app/src/routes/explore/[slug].json/+server.ts @@ -5,7 +5,7 @@ import { MusicResponsiveListItemRenderer, MusicTwoRowItemRenderer } from "$lib/p import type { CarouselHeader, CarouselItem } from "$lib/types"; import type { RequestHandler } from "@sveltejs/kit"; -export const GET: RequestHandler = async ({ url, params }) => { +export const GET: RequestHandler = async ({ params }) => { const { slug } = params; const response = await buildAPIRequest("browse", { context: { client: { clientName: "WEB_REMIX", clientVersion: "1.20220404.01.00" } }, @@ -13,7 +13,7 @@ export const GET: RequestHandler = async ({ url, params }) => { }); const data = await response.json(); - let { + const { header: { musicHeaderRenderer: { title: { runs: [{ text = "" } = {}] = [] } = {} } = {} } = {}, contents: { singleColumnBrowseResultsRenderer: { @@ -21,8 +21,8 @@ export const GET: RequestHandler = async ({ url, params }) => { } = {}, } = {}, } = await data; - let carousels = []; - let grids = []; + const carousels = []; + const grids = []; let sections: Array<{ header?: Record; section?: any[]; @@ -36,7 +36,7 @@ export const GET: RequestHandler = async ({ url, params }) => { } // return json$1({ data }); if (carousels.length !== 0) { - sections = carousels.map(({ musicCarouselShelfRenderer }, i) => parseCarousel({ musicCarouselShelfRenderer })); + sections = carousels.map(({ musicCarouselShelfRenderer }) => parseCarousel({ musicCarouselShelfRenderer })); if (sections.length !== 0) { return json$1({ data, sections, header: text, type: "carousel" }); return new Response( diff --git a/app/src/routes/explore/[slug]/+page.ts b/app/src/routes/explore/[slug]/+page.ts index ba036931..9c4bad83 100644 --- a/app/src/routes/explore/[slug]/+page.ts +++ b/app/src/routes/explore/[slug]/+page.ts @@ -3,7 +3,7 @@ import type { PageLoad } from "./$types"; export const load: PageLoad = async ({ url, params, fetch }) => { const response = await fetch(`/explore/${params.slug}.json`); const { sections, data, header, type } = await response.json(); - let path = url.pathname; + const path = url.pathname; // console.log(routeId, params, path, sections, header, type); return { sections, diff --git a/app/src/routes/home.json/+server.ts b/app/src/routes/home.json/+server.ts index 78e71643..2a764dc1 100644 --- a/app/src/routes/home.json/+server.ts +++ b/app/src/routes/home.json/+server.ts @@ -8,6 +8,7 @@ import type { ICarouselTwoRowItem } from "$lib/types/musicCarouselTwoRowItem"; import type { IListItemRenderer } from "$lib/types/musicListItemRenderer"; import type { Dict } from "$lib/types/utilities"; import { filterMap } from "$lib/utils"; +import { isArrayAndReturn } from "$lib/utils/isArray"; import { error, json, type RequestHandler } from "@sveltejs/kit"; export const GET: RequestHandler = async ({ url }) => { @@ -15,6 +16,7 @@ export const GET: RequestHandler = async ({ url }) => { let ctoken = query.get("ctoken") || ""; let itct = query.get("itct") || ""; + const params = decodeURIComponent(query.get("params") || ""); itct = decodeURIComponent(itct); ctoken = decodeURIComponent(ctoken); const visitorData = query.get("visitorData") || ""; @@ -33,7 +35,7 @@ export const GET: RequestHandler = async ({ url }) => { }, }, headers: null, - params: { browseId: ctoken === "" ? browseId : "" }, + params: { params: params, browseId: ctoken === "" ? browseId : "" }, continuation: ctoken !== "" && { ctoken, continuation: ctoken, @@ -85,6 +87,19 @@ function baseResponse(data: Dict, _visitorData: string) { const _contents: any[] = sectionListRenderer.contents || []; const nextContinuationData = sectionListRenderer.continuations[0]?.nextContinuationData; + const chips = isArrayAndReturn(sectionListRenderer?.header?.chipCloudRenderer?.chips, (item) => + item.map((item) => { + const chipCloudChipRenderer = item?.chipCloudChipRenderer; + const text = chipCloudChipRenderer?.text?.runs[0]?.text; + const browseEndpoint = chipCloudChipRenderer.navigationEndpoint?.browseEndpoint; + const ctoken = chipCloudChipRenderer?.clickTrackingParams; + return { + text, + browseEndpoint, + ctoken, + }; + }), + ); const carouselItems = filterMap( _contents, (item) => { @@ -104,6 +119,7 @@ function baseResponse(data: Dict, _visitorData: string) { return json({ carousels: carouselItems, headerThumbnail, + chips: chips ?? [], visitorData: _visitorData, continuations: nextContinuationData, }); diff --git a/app/src/routes/home/+page.server.ts b/app/src/routes/home/+page.server.ts index 9a77866d..94ef4cf5 100644 --- a/app/src/routes/home/+page.server.ts +++ b/app/src/routes/home/+page.server.ts @@ -1,20 +1,10 @@ import { error } from "@sveltejs/kit"; -import type { PageLoad } from "./$types"; +import type { PageServerLoad } from "./$types"; -export const load: PageLoad = async ({ fetch, data: data$1, url }) => { +export const load: PageServerLoad = async ({ fetch, url }) => { // console.count("CONNECTION!"); - const response = await fetch("/home.json"); - const data = await response.json(); - if (!response.ok) { - throw error(500, `Error: ${response.statusText}`); - } - const { carousels, headerThumbnail = undefined, continuations, visitorData } = data; - - return { - carousels, - headerThumbnail, - continuations, - visitorData, - path: url.pathname, - }; + const params = url.searchParams.get("params"); + const data = await fetch(`/home.json${params ? `?params=${params}` : ""}`).then((r) => r.json()); + // throw Error("TEST"); + return { ...data, params, path: url.pathname }; }; diff --git a/app/src/routes/home/+page.svelte b/app/src/routes/home/+page.svelte index 7d401748..b9dad65b 100644 --- a/app/src/routes/home/+page.svelte +++ b/app/src/routes/home/+page.svelte @@ -1,16 +1,31 @@ @@ -60,49 +75,61 @@ {/if}
    - {#each carousels as carousel} - - {/each} - {#if Object.keys(continuations).length} -
    { - if (loading || hasData) return; - loading = true; - const response = await fetch( - `/home.json?itct=${encodeURIComponent(continuations.clickTrackingParams)}&ctoken=${encodeURIComponent( - continuations.continuation, - )}&type=next&visitorData=${visitorData}`, - ); - const data = await response.json(); - // const {continuations, carousels} = data; - if (data.continuations) { - continuations = data.continuations; - queueMicrotask(() => { - carousels = [...carousels, ...data.carousels]; - }); - loading = false; - return hasData; - } - hasData = data.continuations === undefined; - return !loading; - }} - /> + { + if (params !== detail.params) { + await goto(`/home?params=${detail.params}`); + } else { + await goto(`/home`); + } + }} + /> + {#key data} + {#each carousels as carousel} + + {/each} + {#if Object.keys(continuations).length} +
    { + if (loading || hasData) return; + loading = true; + const response = await fetch( + `/home.json?itct=${encodeURIComponent(continuations.clickTrackingParams)}${ + params ? `¶ms=${encodeURIComponent(params)}` : "" + }&ctoken=${encodeURIComponent(continuations.continuation)}&type=next&visitorData=${visitorData}`, + ); + const data = await response.json(); + // const {continuations, carousels} = data; + if (data.continuations) { + continuations = data.continuations; + queueMicrotask(() => { + carousels = [...carousels, ...data.carousels]; + }); + loading = false; + return hasData; + } + hasData = data.continuations === undefined; + return !loading; + }} + /> -
    - -
    - {/if} +
    + +
    + {/if} + {/key}
    diff --git a/app/src/routes/settings/+page.svelte b/app/src/routes/settings/+page.svelte index f76298b7..9aac9477 100644 --- a/app/src/routes/settings/+page.svelte +++ b/app/src/routes/settings/+page.svelte @@ -83,10 +83,20 @@
    - + + +
    +
    +
    @@ -76,7 +79,8 @@ {#each ["Normal", "High"] as option} {option} {/each} @@ -107,7 +111,8 @@ {#each ["HTTP", "HLS"] as option} {option} {/each} @@ -138,7 +143,8 @@ { - $settings["network"]["HLS Stream Proxy"] = "https://yt-hls-rewriter.onrender.com/"; + $settings["network"]["HLS Stream Proxy"] = + "https://yt-hls-rewriter.onrender.com/"; }}>Reset to default
    @@ -157,7 +163,8 @@ {#each ["Category", "Query", "Category + Query", "None"] as option} {option} {/each} @@ -176,8 +183,9 @@ label { display: inline-block; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, - "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; font-size: 1em; text-transform: none !important; font-variant: unset; diff --git a/app/src/routes/test/+page.svelte b/app/src/routes/test/+page.svelte index d089c0a8..2796851b 100644 --- a/app/src/routes/test/+page.svelte +++ b/app/src/routes/test/+page.svelte @@ -44,11 +44,14 @@ opacity: var(--progress); transform: scale(var(--progress)); - background: hsla(0, 100%, 100%, 0.2) radial-gradient(circle, hsla(0, 100%, 100%, 0.2) 1%, #0000 1%) center/15000%; + background: hsla(0, 100%, 100%, 0.2) + radial-gradient(circle, hsla(0, 100%, 100%, 0.2) 1%, #0000 1%) + center/15000%; // transition: cubic-bezier(0.55, 0, 1, 0.45) 400ms; transition: cubic-bezier(0, 0.55, 0.45, 1) 400ms 200ms background, - cubic-bezier(0, 0.55, 0.45, 1) 400ms 200ms transform, cubic-bezier(0, 0.55, 0.45, 1) 800ms 200ms opacity; + cubic-bezier(0, 0.55, 0.45, 1) 400ms 200ms transform, + cubic-bezier(0, 0.55, 0.45, 1) 800ms 200ms opacity; transition-duration: 500ms; transition-delay: 0ms; diff --git a/app/src/routes/trending.json/+server.ts b/app/src/routes/trending.json/+server.ts index 1ea69529..3efb0ed0 100644 --- a/app/src/routes/trending.json/+server.ts +++ b/app/src/routes/trending.json/+server.ts @@ -14,7 +14,9 @@ export const GET: RequestHandler = async () => { let carouselItems = []; const response = await buildAPIRequest("home", { - context: { client: { clientName: "WEB_REMIX", clientVersion: "1.20220404.01.00" } }, + context: { + client: { clientName: "WEB_REMIX", clientVersion: "1.20220404.01.00" }, + }, params: { browseId: "FEmusic_explore" }, headers: null, }).then((res) => { @@ -26,12 +28,14 @@ export const GET: RequestHandler = async () => { const data = await response; - const contents = data?.contents?.singleColumnBrowseResultsRenderer?.tabs[0]?.tabRenderer?.content?.sectionListRenderer - ?.contents as any[]; + const contents = data?.contents?.singleColumnBrowseResultsRenderer?.tabs[0] + ?.tabRenderer?.content?.sectionListRenderer?.contents as any[]; /// Get only the musicCarouselShelfRenderer's - carouselItems = contents.filter((item) => "musicCarouselShelfRenderer" in item).map(parseCarouselItem); + carouselItems = contents + .filter((item) => "musicCarouselShelfRenderer" in item) + .map(parseCarouselItem); return json({ carouselItems, data }); }; diff --git a/app/src/routes/trending/+page.svelte b/app/src/routes/trending/+page.svelte index 03b19d3f..24eb5017 100644 --- a/app/src/routes/trending/+page.svelte +++ b/app/src/routes/trending/+page.svelte @@ -1,7 +1,10 @@ %sveltekit.head% diff --git a/app/src/global/redesign/base/_css-variables.scss b/app/src/global/redesign/base/_css-variables.scss index 07d153d9..350017cb 100644 --- a/app/src/global/redesign/base/_css-variables.scss +++ b/app/src/global/redesign/base/_css-variables.scss @@ -2,8 +2,8 @@ :root { --base-spacing: 0.75rem; --base-font-size: 0.75rem; - --base-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + --base-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Open Sans", "Helvetica Neue", sans-serif; --secondary-font-family: "CommissionerVariable", sans-serif; --secondary-font-color: rgb(175, 175, 175); diff --git a/app/src/global/redesign/base/_forms.scss b/app/src/global/redesign/base/_forms.scss index 01931b57..24588436 100644 --- a/app/src/global/redesign/base/_forms.scss +++ b/app/src/global/redesign/base/_forms.scss @@ -11,8 +11,8 @@ form { label { font-weight: 400; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; font-variant-caps: all-small-caps; letter-spacing: -0.02em; } diff --git a/app/src/global/redesign/base/_layout.scss b/app/src/global/redesign/base/_layout.scss index 4ebea8e7..c26a8546 100644 --- a/app/src/global/redesign/base/_layout.scss +++ b/app/src/global/redesign/base/_layout.scss @@ -31,8 +31,8 @@ body { } :root { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; word-wrap: break-word; -webkit-text-size-adjust: 100%; --base-font-size: 0.75rem; @@ -118,8 +118,8 @@ body { box-shadow: 0px 0px 1px #323232; background: #121212; font-size: v.$size-1; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; border-radius: 4px; color: #f1f1f1; padding: 0.3rem; diff --git a/app/src/global/redesign/base/_theme.scss b/app/src/global/redesign/base/_theme.scss index 19bd88f7..fc788920 100644 --- a/app/src/global/redesign/base/_theme.scss +++ b/app/src/global/redesign/base/_theme.scss @@ -66,21 +66,10 @@ html { $saturation: -100%, $alpha: -85% )}; - --disabled-form-bg: #{scale-color( - map-get($themes, $theme, "form"), - $lightness: 17%, - $alpha: -25% - )}; - --disabled-form-fg: #{scale-color( - map-get($themes, $theme, "form"), - $lightness: 60% - )}; + --disabled-form-bg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 17%, $alpha: -25%)}; + --disabled-form-fg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 60%)}; --bottom-bg: #{map-get($themes, $theme, "bottom")}; - --bottom-bg-light: #{scale-color( - map-get($themes, $theme, "base"), - $lightness: 8%, - $saturation: -66% - )}; + --bottom-bg-light: #{scale-color(map-get($themes, $theme, "base"), $lightness: 8%, $saturation: -66%)}; --top-bg: #{map-get($themes, $theme, "top")}; --base-bg: #{map-get($themes, $theme, "base")}; background: var(--base-bg); diff --git a/app/src/global/redesign/base/_typography.scss b/app/src/global/redesign/base/_typography.scss index fc3a8eb7..bfe0d77b 100644 --- a/app/src/global/redesign/base/_typography.scss +++ b/app/src/global/redesign/base/_typography.scss @@ -122,8 +122,8 @@ a:not(.no-style), background: #ffffffbf; border-radius: clamp(calc(calc(0.25em * 0.5) + 0.1px), 16px * 0.0125, 4px); vertical-align: middle; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, + sans-serif; color: rgb(8, 8, 8) !important; } diff --git a/app/src/global/redesign/modules/_dropdown.scss b/app/src/global/redesign/modules/_dropdown.scss index e34b22f5..4e873ffa 100644 --- a/app/src/global/redesign/modules/_dropdown.scss +++ b/app/src/global/redesign/modules/_dropdown.scss @@ -15,8 +15,7 @@ width: 100%; height: 100%; inset: 0; - -webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) - contrast(2); + -webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2); filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2); } } @@ -24,8 +23,8 @@ .dd-button svg { -webkit-filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2); - filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) - drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2); + filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) + contrast(2); } .dd-item { @@ -40,8 +39,8 @@ background-color: #0000; color: #fff9f9; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; position: relative; &:hover { color: #fcf6f6; diff --git a/app/src/global/redesign/modules/_player.scss b/app/src/global/redesign/modules/_player.scss index 35a2b232..4837aa05 100644 --- a/app/src/global/redesign/modules/_player.scss +++ b/app/src/global/redesign/modules/_player.scss @@ -48,8 +48,7 @@ } @media (hover: hover) { &:hover::before { - background: #55555528 - radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%; + background: #55555528 radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%; opacity: 1; } } diff --git a/app/src/global/redesign/utility/mixins/_media-query.scss b/app/src/global/redesign/utility/mixins/_media-query.scss index 94e57bf2..5e4f5105 100644 --- a/app/src/global/redesign/utility/mixins/_media-query.scss +++ b/app/src/global/redesign/utility/mixins/_media-query.scss @@ -16,21 +16,13 @@ $breakpoint-widths: ( @return if($max and $max > 0, $max - 0.02, null); } -@function between-breakpoint( - $name, - $breakpoints: $breakpoint-widths, - $breakpoint-names: map-keys($breakpoints) -) { +@function between-breakpoint($name, $breakpoints: $breakpoint-widths, $breakpoint-names: map-keys($breakpoints)) { $idx: index($breakpoint-names, $name); @if not $idx { @error "No breakpoint found"; } - @return if( - $idx < length($breakpoint-names), - nth($breakpoint-names, $idx + 1), - null - ); + @return if($idx < length($breakpoint-names), nth($breakpoint-names, $idx + 1), null); } @mixin media-query-up($name, $breakpoints: $breakpoint-widths) { diff --git a/app/src/global/redesign/utility/mixins/_old.scss b/app/src/global/redesign/utility/mixins/_old.scss index 104723d6..9bc256e0 100644 --- a/app/src/global/redesign/utility/mixins/_old.scss +++ b/app/src/global/redesign/utility/mixins/_old.scss @@ -18,14 +18,7 @@ } } -@mixin animation( - $delay, - $duration, - $infinite: false, - $animation, - $direction: forward, - $fillmode: fowards -) { +@mixin animation($delay, $duration, $infinite: false, $animation, $direction: forward, $fillmode: fowards) { -webkit-animation-delay: $delay; -webkit-animation-duration: $duration; -webkit-animation-name: $animation; diff --git a/app/src/global/stylesheet/base/_cssvars.scss b/app/src/global/stylesheet/base/_cssvars.scss index 8f2bd021..37af339d 100644 --- a/app/src/global/stylesheet/base/_cssvars.scss +++ b/app/src/global/stylesheet/base/_cssvars.scss @@ -2,8 +2,8 @@ :root { --base-spacing: 0.75rem; --base-font-size: 0.75rem; - --base-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + --base-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Open Sans", "Helvetica Neue", sans-serif; --secondary-font-family: "CommissionerVariable", sans-serif; --color-dark: hsl(0deg 0% 98%); diff --git a/app/src/global/stylesheet/base/_forms.scss b/app/src/global/stylesheet/base/_forms.scss index 9c6ccf84..7e6200e7 100644 --- a/app/src/global/stylesheet/base/_forms.scss +++ b/app/src/global/stylesheet/base/_forms.scss @@ -11,8 +11,8 @@ form { label { font-weight: 400; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; font-variant-caps: all-small-caps; letter-spacing: -0.02em; } diff --git a/app/src/global/stylesheet/base/_layout.scss b/app/src/global/stylesheet/base/_layout.scss index fabb4ac4..9067597e 100644 --- a/app/src/global/stylesheet/base/_layout.scss +++ b/app/src/global/stylesheet/base/_layout.scss @@ -39,8 +39,8 @@ body { } :root { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; word-wrap: break-word; -webkit-text-size-adjust: 100%; --base-font-size: 0.75rem; @@ -109,8 +109,8 @@ body { opacity: 0; will-change: opacity, transform; transition: opacity linear 150ms; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; transform: translate(calc(var(--tt-pos-x)), var(--tt-pos-y)); transform-origin: center; diff --git a/app/src/global/stylesheet/base/_mixins.scss b/app/src/global/stylesheet/base/_mixins.scss index 104723d6..9bc256e0 100644 --- a/app/src/global/stylesheet/base/_mixins.scss +++ b/app/src/global/stylesheet/base/_mixins.scss @@ -18,14 +18,7 @@ } } -@mixin animation( - $delay, - $duration, - $infinite: false, - $animation, - $direction: forward, - $fillmode: fowards -) { +@mixin animation($delay, $duration, $infinite: false, $animation, $direction: forward, $fillmode: fowards) { -webkit-animation-delay: $delay; -webkit-animation-duration: $duration; -webkit-animation-name: $animation; diff --git a/app/src/global/stylesheet/base/_theme.scss b/app/src/global/stylesheet/base/_theme.scss index 60e1be89..705f0328 100644 --- a/app/src/global/stylesheet/base/_theme.scss +++ b/app/src/global/stylesheet/base/_theme.scss @@ -59,15 +59,8 @@ html { &.#{$theme} { --mobile-popper-bg: #{map-get($themes, $theme, "side")}; --form-bg: #{map-get($themes, $theme, "form")}; - --disabled-form-bg: #{scale-color( - map-get($themes, $theme, "form"), - $lightness: 17%, - $alpha: -25% - )}; - --disabled-form-fg: #{scale-color( - map-get($themes, $theme, "form"), - $lightness: 60% - )}; + --disabled-form-bg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 17%, $alpha: -25%)}; + --disabled-form-fg: #{scale-color(map-get($themes, $theme, "form"), $lightness: 60%)}; --bottom-bg: #{map-get($themes, $theme, "bottom")}; --top-bg: #{map-get($themes, $theme, "top")}; --base-bg: #{map-get($themes, $theme, "base")}; diff --git a/app/src/global/stylesheet/components/_player.scss b/app/src/global/stylesheet/components/_player.scss index 16253904..97093610 100644 --- a/app/src/global/stylesheet/components/_player.scss +++ b/app/src/global/stylesheet/components/_player.scss @@ -48,8 +48,7 @@ } @media (hover: hover) { &:hover::before { - background: #55555528 - radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%; + background: #55555528 radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%; opacity: 1; } } diff --git a/app/src/global/stylesheet/modules/_dropdown.scss b/app/src/global/stylesheet/modules/_dropdown.scss index e34b22f5..4e873ffa 100644 --- a/app/src/global/stylesheet/modules/_dropdown.scss +++ b/app/src/global/stylesheet/modules/_dropdown.scss @@ -15,8 +15,7 @@ width: 100%; height: 100%; inset: 0; - -webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) - contrast(2); + -webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2); filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2); } } @@ -24,8 +23,8 @@ .dd-button svg { -webkit-filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2); - filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) - drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2); + filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) + contrast(2); } .dd-item { @@ -40,8 +39,8 @@ background-color: #0000; color: #fff9f9; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; position: relative; &:hover { color: #fcf6f6; diff --git a/app/src/global/stylesheet/utilities/_units.scss b/app/src/global/stylesheet/utilities/_units.scss index 53628138..3db90469 100644 --- a/app/src/global/stylesheet/utilities/_units.scss +++ b/app/src/global/stylesheet/utilities/_units.scss @@ -210,11 +210,7 @@ $base-font-size: 16px !default; dpi: 0dpi, ); $input-unit: map-get($units, unit($input)); - $input: if( - 1dppx < 95dpi, - num($input-unit + (num($input) + $to-unit)), - $input - ); + $input: if(1dppx < 95dpi, num($input-unit + (num($input) + $to-unit)), $input); } @return $to-unit + $input; diff --git a/app/src/hooks.server.ts b/app/src/hooks.server.ts index 6c33a7eb..1242d167 100644 --- a/app/src/hooks.server.ts +++ b/app/src/hooks.server.ts @@ -1,5 +1,3 @@ -import { dev } from "$app/environment"; - import type { Handle } from "@sveltejs/kit"; const headers = { @@ -11,11 +9,7 @@ const headers = { }; const checkUserAgent = (userAgent: string) => - /i(Phone|Pad|Pod)/i.test(userAgent) - ? "iOS" - : /Android/i.test(userAgent) - ? "Android" - : "Other"; + /i(Phone|Pad|Pod)/i.test(userAgent) ? "iOS" : /Android/i.test(userAgent) ? "Android" : "Other"; export const handle: Handle = async ({ event, resolve }) => { const UA = event.request.headers.get("User-Agent"); diff --git a/app/src/lib/actions/gestures/handlers.ts b/app/src/lib/actions/gestures/handlers.ts index 8d0f4b3d..f214d265 100644 --- a/app/src/lib/actions/gestures/handlers.ts +++ b/app/src/lib/actions/gestures/handlers.ts @@ -1,13 +1,6 @@ import { setHandlers } from "./shared"; import type { DragEvent, Detail, GestureHandlers, PanEvent } from "./types"; -import { - dispatcher, - addListener, - boundingRect, - calculateVelocity, - removeListener, - updateDetail, -} from "./utils"; +import { dispatcher, addListener, boundingRect, calculateVelocity, removeListener, updateDetail } from "./utils"; export function pan(node: HTMLElement) { const detail: Detail = { diff --git a/app/src/lib/actions/gestures/types.ts b/app/src/lib/actions/gestures/types.ts index 2a240673..e70a7bca 100644 --- a/app/src/lib/actions/gestures/types.ts +++ b/app/src/lib/actions/gestures/types.ts @@ -1,5 +1,3 @@ -import type { Maybe } from "$lib/utils"; - export type Axis = "x" | "y"; export type EventKind = "drag"; export interface Detail { diff --git a/app/src/lib/actions/gestures/utils.ts b/app/src/lib/actions/gestures/utils.ts index 7a2a9df7..f84caba2 100644 --- a/app/src/lib/actions/gestures/utils.ts +++ b/app/src/lib/actions/gestures/utils.ts @@ -1,4 +1,3 @@ -import type { EventType } from "$lib/utils"; import type { Detail } from "./types"; export function boundingRect(node: HTMLElement): { @@ -48,9 +47,7 @@ export const dispatcher = Event extends keyof Events & string = keyof Events & string, >() => (node: HTMLElement, type: Event, detail: Events[Event]): boolean => - node.dispatchEvent( - new CustomEvent(type, { detail: detail, bubbles: true }), - ); + node.dispatchEvent(new CustomEvent(type, { detail: detail, bubbles: true })); interface AddListener { < @@ -72,14 +69,8 @@ interface AddListener { options?: AddEventListenerOptions | boolean | undefined, ); < - EventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof ( - | WindowEventMap - | HTMLElementEventMap - ), - Event extends (WindowEventMap | HTMLElementEventMap)[EventType] = ( - | WindowEventMap - | HTMLElementEventMap - )[EventType], + EventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof (WindowEventMap | HTMLElementEventMap), + Event extends (WindowEventMap | HTMLElementEventMap)[EventType] = (WindowEventMap | HTMLElementEventMap)[EventType], >( target: Window | HTMLElement, type: EventType, @@ -94,41 +85,20 @@ interface AddListener { ): void; } -export const addListener: AddListener = ( - target, - type, - listener, - options, -) => { +export const addListener: AddListener = (target, type, listener, options) => { target.addEventListener(type, listener, options); }; export function removeListener< EventType extends keyof WindowEventMap = keyof WindowEventMap, Event extends WindowEventMap[EventType] = WindowEventMap[EventType], ->( - target: Window, - type: EventType, - listener: (event: Event) => void, - options?: AddEventListenerOptions | boolean, -); +>(target: Window, type: EventType, listener: (event: Event) => void, options?: AddEventListenerOptions | boolean); export function removeListener< EventType extends keyof HTMLElementEventMap = keyof HTMLElementEventMap, Event extends HTMLElementEventMap[EventType] = HTMLElementEventMap[EventType], ->( - target: HTMLElement, - type: EventType, - listener: (event: Event) => void, - options?: AddEventListenerOptions | boolean, -); +>(target: HTMLElement, type: EventType, listener: (event: Event) => void, options?: AddEventListenerOptions | boolean); export function removeListener< - EventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof ( - | WindowEventMap - | HTMLElementEventMap - ), - Event extends (WindowEventMap | HTMLElementEventMap)[EventType] = ( - | WindowEventMap - | HTMLElementEventMap - )[EventType], + EventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof (WindowEventMap | HTMLElementEventMap), + Event extends (WindowEventMap | HTMLElementEventMap)[EventType] = (WindowEventMap | HTMLElementEventMap)[EventType], >( target: Window | HTMLElement, type: EventType, diff --git a/app/src/lib/actions/keyboardClick.ts b/app/src/lib/actions/keyboardClick.ts index e3b69b2d..af96cff2 100644 --- a/app/src/lib/actions/keyboardClick.ts +++ b/app/src/lib/actions/keyboardClick.ts @@ -1,10 +1,7 @@ export const a11y = (node: HTMLElement) => { function handleKeypress(event: KeyboardEvent) { if (event.defaultPrevented) return; - if ( - node.isSameNode(document.activeElement) && - (event.key.match("Space") || event.key.match("Enter")) - ) { + if (node.isSameNode(document.activeElement) && (event.key.match("Space") || event.key.match("Enter"))) { event.preventDefault(); node.dispatchEvent(new CustomEvent("kbClick")); } diff --git a/app/src/lib/actions/longtouch.ts b/app/src/lib/actions/longtouch.ts index 9e5b459c..a0d1bc86 100644 --- a/app/src/lib/actions/longtouch.ts +++ b/app/src/lib/actions/longtouch.ts @@ -12,10 +12,7 @@ export interface Detail { timestamp: number; } -export function mobileLongPress( - node: HTMLElement, - config: ILongPressConfig = { duration: 400, delay: 200 }, -) { +export function mobileLongPress(node: HTMLElement, config: ILongPressConfig = { duration: 400, delay: 200 }) { const dispatch = dispatcher<{ pressEnd: Detail; pressing: Detail; diff --git a/app/src/lib/actions/viewport.ts b/app/src/lib/actions/viewport.ts index 4f5a4b85..d9ddfbbf 100644 --- a/app/src/lib/actions/viewport.ts +++ b/app/src/lib/actions/viewport.ts @@ -6,9 +6,7 @@ function ensureIntersectionObserver(options?: { margin: string }) { intersectionObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - const eventName = entry.isIntersecting - ? "enterViewport" - : "exitViewport"; + const eventName = entry.isIntersecting ? "enterViewport" : "exitViewport"; entry.target.dispatchEvent(new CustomEvent(eventName)); }); }, diff --git a/app/src/lib/api.ts b/app/src/lib/api.ts index 693548c4..fe860724 100644 --- a/app/src/lib/api.ts +++ b/app/src/lib/api.ts @@ -10,10 +10,7 @@ type APIResponse = { ok: boolean; }; -export async function api( - fetch: Fetch, - params?: RequestParams, -): Promise { +export async function api(fetch: Fetch, params?: RequestParams): Promise { // Turn Object's Key-Value pairs into string const urlParams = queryParams(params); // Make fetch call diff --git a/app/src/lib/components/Alert/Alert.svelte b/app/src/lib/components/Alert/Alert.svelte index c2d9fc8b..61871a53 100644 --- a/app/src/lib/components/Alert/Alert.svelte +++ b/app/src/lib/components/Alert/Alert.svelte @@ -26,7 +26,8 @@ diff --git a/app/src/lib/components/Item/Listing.svelte b/app/src/lib/components/Item/Listing.svelte index 2361fb6f..ada0d1d9 100644 --- a/app/src/lib/components/Item/Listing.svelte +++ b/app/src/lib/components/Item/Listing.svelte @@ -9,19 +9,22 @@
    { - window.dispatchEvent(new window.CustomEvent("contextmenu", { detail: "listing" })); + window.dispatchEvent( + new window.CustomEvent("contextmenu", { detail: "listing" }), + ); PopperStore.set({ items: DropdownItems.slice(), @@ -300,7 +320,9 @@

    {:else if data.type === "playlist"}

    - {data.type === "playlist" && "metaData" in data ? `${data.metaData}` : ""} + {data.type === "playlist" && "metaData" in data + ? `${data.metaData}` + : ""}

    {:else}

    @@ -309,12 +331,14 @@ {artist.text} {:else if artist.pageType.includes("ALBUM")} goto(`/release?id=${artist?.browseId}`)} + on:click|preventDefault|stopPropagation={() => + goto(`/release?id=${artist?.browseId}`)} href={`/release?id=${artist?.browseId}`}>{artist.text} {:else} goto(`/artist/${artist?.browseId}`)} + on:click|preventDefault|stopPropagation={() => + goto(`/artist/${artist?.browseId}`)} href={`/artist/${artist?.browseId}`}>{artist.text} {/if} @@ -329,11 +353,15 @@ metadata={{ artist: data.type !== "playlist" && Array.isArray(data?.subtitle) && [ - data.subtitle.find((s) => s?.pageType?.includes("ARTIST")) ?? data.artistInfo?.artist[0], + data.subtitle.find((s) => s?.pageType?.includes("ARTIST")) ?? + data.artistInfo?.artist[0], ], thumbnail: data.thumbnails, title: data.title, - length: data.type !== "artist" && data.type !== "playlist" ? data?.length?.text : "", + length: + data.type !== "artist" && data.type !== "playlist" + ? data?.length?.text + : "", }} type="search" items={DropdownItems} @@ -344,89 +372,101 @@ diff --git a/app/src/lib/components/Player/Controls.svelte b/app/src/lib/components/Player/Controls.svelte index ae8cd463..63097dc4 100644 --- a/app/src/lib/components/Player/Controls.svelte +++ b/app/src/lib/components/Player/Controls.svelte @@ -1,21 +1,23 @@ @@ -47,6 +58,7 @@

    {format($currentTimeStore)}
    +
    diff --git a/app/src/lib/components/Player/ProgressBar/index.scss b/app/src/lib/components/Player/ProgressBar/index.scss index fe33add2..9363aa50 100644 --- a/app/src/lib/components/Player/ProgressBar/index.scss +++ b/app/src/lib/components/Player/ProgressBar/index.scss @@ -1,6 +1,5 @@ .progress-bar { width: 100%; - will-change: visibility; contain: paint; overflow: hidden; isolation: isolate; @@ -21,7 +20,6 @@ z-index: 5; width: 100%; cursor: pointer; - will-change: transform; transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 180ms transform; transform-origin: 0% 50%; overflow: hidden; @@ -78,8 +76,9 @@ progress::-webkit-progress-value { .timestamp { display: inline-block; - font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, - Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; font-size: calc(var(--base-font-size) * 0.95); letter-spacing: -0.02em; diff --git a/app/src/lib/components/Player/keyboardHandler.ts b/app/src/lib/components/Player/keyboardHandler.ts index fc69e7a9..75363da8 100644 --- a/app/src/lib/components/Player/keyboardHandler.ts +++ b/app/src/lib/components/Player/keyboardHandler.ts @@ -1,4 +1,7 @@ -export default function keyboardHandler(node: Node, params: { shortcut }): SvelteActionReturnType { +export default function keyboardHandler( + node: Node, + params: { shortcut }, +): SvelteActionReturnType { function keyDown(event: KeyboardEvent) { if ( !Object.keys(params.shortcut).includes(event.code) || diff --git a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte index 2860bbaf..b96cdd13 100644 --- a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte +++ b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte @@ -100,8 +100,8 @@ >

    Delete Playlist?

    - Deleting this playlist will permanently delete all of it's data from your device (thumbnail, title, songs, - etc.). + Deleting this playlist will permanently delete all of it's data from + your device (thumbnail, title, songs, etc.).

    This action is permanent and cannot be undone!

    @@ -253,19 +253,26 @@ height: 100%; pointer-events: none; padding: 1rem; - background: linear-gradient(180deg, hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 49%)); + background: linear-gradient( + 180deg, + hsl(0deg 0% 0% / 10%), + hsl(0deg 0% 0% / 49%) + ); align-items: flex-end; justify-content: flex-end; border-radius: var(--xs-radius); } + .icon { position: relative; } + .header { display: flex; flex-direction: column; - // line-height: 2; + // line-height: 2;line-height } + .body { display: flex; justify-content: center; @@ -274,6 +281,7 @@ flex-direction: column; align-items: center; } + .img-container { max-width: 16rem; max-height: 16rem; @@ -282,35 +290,39 @@ position: relative; aspect-ratio: 1/1; } + img { max-width: inherit; max-height: inherit; width: 100%; height: 100%; } + .input-row { margin-bottom: 1.25rem; display: grid; } + .buttons { margin-bottom: 0; display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; - // grid-template-rows: 1fr 1fr; + // grid-template-rows: 1fr 1fr;grid-template-rows @media screen and (min-width: 640px) { grid-template-rows: unset; } } + button { margin-bottom: 0 !important; } + form { display: inline-block; - flex-direction: row; + flex-flow: row wrap; min-width: 50%; align-content: center; - flex-wrap: wrap; align-self: flex-start; gap: 0.8rem; justify-self: center; @@ -318,6 +330,7 @@ align-items: flex-end; margin: 0 auto; } + [type="file"] { min-width: 10rem; width: 100%; @@ -330,6 +343,7 @@ inset: 0; z-index: 50; } + [type="file"]::-webkit-file-upload-button { visibility: hidden; } @@ -337,46 +351,42 @@ .playlist-modal { position: fixed; gap: 0.8rem; - z-index: 105; background: var(--mobile-popper-bg); display: flex; flex-direction: column; - // flex-wrap: wrap; + // flex-wrap: wrap;flex-wrap min-width: 50%; min-height: 50%; width: fit-content; max-width: 100%; max-height: 85vh; - // flex: 1 1 auto; - // height: 100%; + // flex: 1 1 auto;flex + // height: 100%;height overflow-y: auto; - top: 0; - left: 0; top: 50%; - // inset: 0; + // inset: 0;inset left: 50%; - // grid-area: m/m/m/m; + // grid-area: m/m/m/m;grid-area border-radius: $lg-radius; - border-color: rgba(129, 129, 129, 0.411); + border-color: rgb(129 129 129 / 41.1%); border-width: 0.025rem; border-style: solid; transform: translate(-50%, -50%); padding: 1.2rem; - // justify-content: space-around; + // justify-content: space-around;justify-content } + .image { align-self: center; display: flex; flex-direction: column; - gap: 0.5rem; background: hsl(200deg 7% 8% / 85%); padding: 1rem; - // max-height: 14rem; + // max-height: 14rem;max-height min-height: 0; height: 100%; - max-width: 16rem; border-radius: inherit; border: 1px #e3e3e32f solid; align-items: center; diff --git a/app/src/lib/components/PlaylistPopper/List.svelte b/app/src/lib/components/PlaylistPopper/List.svelte index 835bd06c..16507ccb 100644 --- a/app/src/lib/components/PlaylistPopper/List.svelte +++ b/app/src/lib/components/PlaylistPopper/List.svelte @@ -25,12 +25,13 @@ diff --git a/app/src/lib/components/PlaylistPopper/Playlist.svelte b/app/src/lib/components/PlaylistPopper/Playlist.svelte index 94b63011..54ee6eb4 100644 --- a/app/src/lib/components/PlaylistPopper/Playlist.svelte +++ b/app/src/lib/components/PlaylistPopper/Playlist.svelte @@ -29,6 +29,7 @@ .image { max-width: 5.333333rem; max-height: 5.333333rem; + img { max-width: inherit; max-height: inherit; @@ -36,10 +37,12 @@ height: 100%; } } + .list-item-body { display: flex; flex-direction: column; } + li { display: flex; flex-direction: row; @@ -47,14 +50,16 @@ gap: 0.8rem; backdrop-filter: brightness(1.5); border-radius: $lg-radius; - // backdrop-filter: brightness(2); + // backdrop-filter: brightness(2);backdrop-filter transition: backdrop-filter linear 50ms; - border: rgba(163, 163, 163, 0.212) solid 1px; + border: rgb(163 163 163 / 21.2%) solid 1px; align-items: center; + &:hover { backdrop-filter: brightness(1.95); cursor: pointer; } + &:active:hover { backdrop-filter: brightness(2.25); } diff --git a/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte b/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte index c3bf9b5b..c60a2925 100644 --- a/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte +++ b/app/src/lib/components/PlaylistPopper/PlaylistPopper.svelte @@ -77,17 +77,17 @@ overflow-y: auto; position: relative; padding: 0 0.5rem; - // justify-content: center; + // justify-content: center;justify-content } + .playlist-modal { position: absolute; - // gap: 0.8rem; + // gap: 0.8rem;gap padding: 0.8rem; z-index: 100; background: var(--mobile-popper-bg); display: flex; - flex-wrap: nowrap; - flex-direction: column; + flex-flow: column nowrap; top: 50%; left: 50%; min-width: 30%; @@ -96,10 +96,11 @@ max-width: 100%; max-height: calc(100vh - 4rem); border-radius: $lg-radius; - border-color: rgba(129, 129, 129, 0.411); + border-color: rgb(129 129 129 / 41.1%); border-width: 0.025rem; border-style: solid; transform: translate(-50%, -50%); + @media screen and (min-width: 640px) { max-width: 35%; max-height: 65%; diff --git a/app/src/lib/components/PlaylistPopper/index.scss b/app/src/lib/components/PlaylistPopper/index.scss index ea9c6b96..63907a37 100644 --- a/app/src/lib/components/PlaylistPopper/index.scss +++ b/app/src/lib/components/PlaylistPopper/index.scss @@ -26,8 +26,8 @@ form { max-width: 15.5rem; } .file-button { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", - "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; &:hover::after { background: #525252b2; } @@ -38,7 +38,8 @@ form { background: var(--form-bg); border: 0.0625rem solid hsla(0, 0%, 66.7%, 0.219); border-radius: $md-radius; - box-shadow: inset 0.1125em -0.1125em 1em 0.5em hsla(0, 0%, 96.9%, 0.014), 0 0 0.25em 0.02em hsla(0, 0%, 66.7%, 0) !important; + box-shadow: inset 0.1125em -0.1125em 1em 0.5em hsla(0, 0%, 96.9%, 0.014), + 0 0 0.25em 0.02em hsla(0, 0%, 66.7%, 0) !important; padding: 0.4rem 0.7rem; outline: none; diff --git a/app/src/lib/components/Popper/MobilePopper.svelte b/app/src/lib/components/Popper/MobilePopper.svelte index b00c1823..02c14b9e 100644 --- a/app/src/lib/components/Popper/MobilePopper.svelte +++ b/app/src/lib/components/Popper/MobilePopper.svelte @@ -58,7 +58,8 @@ function open(kind: number, detail) { const step = detail.deltaY / queueHeight; - const miss = detail.velocityY >= 0 && detail.velocityY > 0.2 ? 1 - step : 1 - step; + const miss = + detail.velocityY >= 0 && detail.velocityY > 0.2 ? 1 - step : 1 - step; const distance = miss * windowHeight; motion.update( () => { @@ -72,7 +73,8 @@ async function close(kind: number, detail) { const step = detail.deltaY / queueHeight; - const miss = detail.velocityY >= 0 && detail.velocityY > 0.2 ? 1 - step : step; + const miss = + detail.velocityY >= 0 && detail.velocityY > 0.2 ? 1 - step : step; const distance = miss * windowHeight; if (kind === 1) { motion.set(windowHeight, { @@ -145,11 +147,16 @@ }); } } - $: srcImg = Array.isArray($PopperStore.metadata?.thumbnail ?? $PopperStore.items[0]?.thumbnails) + $: srcImg = Array.isArray( + $PopperStore.metadata?.thumbnail ?? $PopperStore.items[0]?.thumbnails, + ) ? $PopperStore.metadata?.thumbnail[0] ?? $PopperStore.items[0]?.thumbnails : { width: 0, height: 0, url: "", placeholder: "" }; - $: srcImg.url = srcImg.width < 100 ? srcImg.url.replace(RE_THUMBNAIL_DIM, "=w240-h240-") : srcImg.url; + $: srcImg.url = + srcImg.width < 100 + ? srcImg.url.replace(RE_THUMBNAIL_DIM, "=w240-h240-") + : srcImg.url; {#if isOpen} @@ -262,32 +269,35 @@ gap: 1em; border-radius: 0.3125em; padding: 1em; - // flex: 1 0 auto; + // flex: 1 0 auto;flex align-items: center; background-color: #4e4e4e27; - box-shadow: 0px 0px 14px -11px #000; + box-shadow: 0 0 14px -11px #000; height: auto; + :where(.image) { - // height: auto !important; + // height: auto !important;height flex: 1 0 auto; - // height: 0 !important; + // height: 0 !important;height object-fit: scale-down; max-width: 33%; max-height: 33%; + img { width: 100%; height: 100%; object-fit: contain; } - // height: auto; + // height: auto;height } } .metatext { display: flex; flex-direction: column; - // justify-content: center; - // gap: 0.5em; + // justify-content: center;justify-content + // gap: 0.5em;gap + > :where(.title) { margin-bottom: 0.3125em; } @@ -310,59 +320,59 @@ } 100% { - background-color: hsla(0, 0%, 0%, 0.55); + background-color: hsl(0deg 0% 0% / 55%); opacity: 1; } } + .backdrop { overscroll-behavior: contain; - position: fixed; isolation: isolate; display: grid; - background-color: hsla(0, 0%, 0%, 0); + background-color: hsl(0deg 0% 0% / 0%); inset: 0; z-index: 151; - // margin-top: var(--top-bar-height); + // margin-top: var(--top-bar-height);margin-top touch-action: pan-y; bottom: 0; max-height: 100vh; - contain: strict; will-change: transform, opacity; opacity: 0; - // bottom: 0; + // bottom: 0;bottom } .drag { position: absolute; - bottom: 0; - min-height: 0; background: var(--bottom-bg-light); overscroll-behavior: contain; touch-action: pan-y; - // content-visibility: auto; + // content-visibility: auto;content-visibility z-index: 1100; - // display: block !important; + // display: block !important;display margin-inline: auto; - // max-width: 95%; - // flex-direction: row; + // max-width: 95%;max-width + // flex-direction: row;flex-direction will-change: transform, visibility; width: 95%; align-items: center; - // flex-direction: column; + // flex-direction: column;flex-direction border-top-left-radius: 0.75em; border-top-right-radius: 0.75em; contain: paint layout; - // inset: 0; + // inset: 0;inset left: 0; right: 0; - max-height: calc(100% - calc(var(--top-bar-height) + var(--player-bar-height))); + max-height: calc( + 100% - calc(var(--top-bar-height) + var(--player-bar-height)) + ); max-height: 80%; padding-bottom: 0.3125em; } + hr { &.horz::before { position: absolute; @@ -371,13 +381,13 @@ margin: auto; width: 25%; color: hsl(0deg 0% 80%); - background: rgba(206, 206, 206, 0.308); + background: rgb(206 206 206 / 30.8%); height: 0.45em; border-radius: 3.6667em; - line-height: inherit; z-index: 5; } + &.vertical::before { position: absolute; inset: 0; @@ -387,57 +397,63 @@ margin: auto; height: 15%; color: hsl(0deg 0% 80%); - background: rgba(206, 206, 206, 0.308); + background: rgb(206 206 206 / 30.8%); width: 0.45em; line-height: inherit; border-radius: 3.6667em; z-index: 100; transition-delay: 400ms; } + &.vertical:hover::before { opacity: 1; transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms opacity; } + overscroll-behavior: contain; width: 100%; border: none; position: relative; + &.vertical { height: 100%; } - // z-index: 100; + // z-index: 100;z-index } .horz { width: 100%; - // border-top: 0.0175rem groove rgba(171, 171, 171, 0.151); + // border-top: 0.0175rem groove rgba(171, 171, 171, 0.151);border-top border-top-left-radius: $sm-radius; border-top-right-radius: $sm-radius; - // height: 2.75rem; + // height: 2.75rem;height padding-block: 0.7em; align-content: center; display: inline-block; align-self: center; top: 0; left: 0; + @media screen and (min-width: 720px) { display: none !important; visibility: none !important; } } + .handle { overscroll-behavior: contain; width: 100%; - // box-shadow: 0 -0.4rem 23px -17px hsl(0deg 0% 100% / 100%); + // box-shadow: 0 -0.4rem 23px -17px hsl(0deg 0% 100% / 100%);box-shadow z-index: 1; display: grid; display: inline-block; cursor: pointer; - // padding: 0.12em; + // padding: 0.12em;padding align-items: center; vertical-align: middle; } + .list-wrapper { &::after { position: absolute; @@ -446,6 +462,7 @@ box-shadow: 0 0 4px #000; content: ""; } + position: relative; width: 100%; padding: 0.25em; @@ -457,7 +474,6 @@ } &::-webkit-scrollbar-track { - border-radius: 0.625rem; height: 0; width: 0%; background-clip: content-box; @@ -474,6 +490,7 @@ background-clip: content-box; } } + ul { list-style: none; display: flex; @@ -483,7 +500,7 @@ width: 100%; margin: 0 auto; - // height: 100%; + // height: 100%;height } li { @@ -497,9 +514,10 @@ color: #f3f3f3; display: flex; background-color: #4e4e4e27; - box-shadow: 0px 0px 14px -11px #000; + box-shadow: 0 0 14px -11px #000; gap: 0.5rem; transition: background-color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + &:active { background-color: #4e4e4e3c; } diff --git a/app/src/lib/components/Popper/PopperButton.svelte b/app/src/lib/components/Popper/PopperButton.svelte index e499aeb7..9ddf5941 100644 --- a/app/src/lib/components/Popper/PopperButton.svelte +++ b/app/src/lib/components/Popper/PopperButton.svelte @@ -4,7 +4,10 @@ lang="ts" context="module" > - function dropdown(node: HTMLElement, { items = [], type = "", metadata = {} }) { + function dropdown( + node: HTMLElement, + { items = [], type = "", metadata = {} }, + ) { let x: number, y: number, bottom: number; let open = false; const a11yClick = (e: KeyboardEvent) => { @@ -13,8 +16,14 @@ open = false; }; - function handleDocumentClick(event: MouseEvent & { target: HTMLElement & EventTarget }) { - if (open && !node.contains(event.target) && !node.isSameNode(event.target)) { + function handleDocumentClick( + event: MouseEvent & { target: HTMLElement & EventTarget }, + ) { + if ( + open && + !node.contains(event.target) && + !node.isSameNode(event.target) + ) { isOpen.set(false); open = false; PopperStore.reset(); @@ -22,7 +31,9 @@ } } - function handleClick(event: MouseEvent & { target: HTMLElement & EventTarget }) { + function handleClick( + event: MouseEvent & { target: HTMLElement & EventTarget }, + ) { event.stopPropagation(); // console.log(node); // Button clicked is same node as the event target -> reset state! diff --git a/app/src/lib/components/Popper/index.scss b/app/src/lib/components/Popper/index.scss index b6c91cf4..63978a7e 100644 --- a/app/src/lib/components/Popper/index.scss +++ b/app/src/lib/components/Popper/index.scss @@ -217,7 +217,12 @@ svg, border-top: 0.0175rem groove rgba(171, 171, 171, 0.151); box-shadow: 0 -0.4rem 28px -12px rgb(255, 255, 255); - background: linear-gradient(to bottom, hsl(240, 10%, 10%), hsl(240, 2%, 7%) 50%, hsl(240, 1%, 6%) 90%); + background: linear-gradient( + to bottom, + hsl(240, 10%, 10%), + hsl(240, 2%, 7%) 50%, + hsl(240, 1%, 6%) 90% + ); } li, ul { diff --git a/app/src/lib/components/Popper/popperStore.ts b/app/src/lib/components/Popper/popperStore.ts index 6875c367..ab125b6d 100644 --- a/app/src/lib/components/Popper/popperStore.ts +++ b/app/src/lib/components/Popper/popperStore.ts @@ -49,7 +49,9 @@ export const isOpen = writable(false); export const activeNode = _activeNode(); function _activeNode() { - const { subscribe, set } = writable | WeakRef<{ value: null }>>(); + const { subscribe, set } = writable< + WeakRef | WeakRef<{ value: null }> + >(); return { subscribe, set: (node: WeakRef | WeakRef<{ value: null }>) => { diff --git a/app/src/lib/components/Search/Search.svelte b/app/src/lib/components/Search/Search.svelte index a42671eb..c3d7bebb 100644 --- a/app/src/lib/components/Search/Search.svelte +++ b/app/src/lib/components/Search/Search.svelte @@ -18,7 +18,9 @@ if (!query.length) return; dispatch("submitted", { submitted: true, filter, query }); fullscreenStore.set("closed"); - let url = `/search/${encodeURIComponent(query)}${filter !== undefined ? `?filter=${filter}` : ""}`; + let url = `/search/${encodeURIComponent(query)}${ + filter !== undefined ? `?filter=${filter}` : "" + }`; goto(url); } @@ -43,7 +45,9 @@ } const typeahead = debounce(async () => { if (!query) return (results = []); - const response = await fetch("/api/v1/get_search_suggestions.json?q=" + encodeURIComponent(query)); + const response = await fetch( + "/api/v1/get_search_suggestions.json?q=" + encodeURIComponent(query), + ); results = await response.json(); }, 250); @@ -135,14 +139,15 @@ .nav-item { margin: 0 0.4rem; } + .suggestions { position: absolute; top: 4.5em; z-index: 200; background: var(--top-bg); width: 100%; - width: clamp(28vw, 35vw, 78vw); + /* max-height: 44vh; */ border-radius: $xs-radius; height: auto; @@ -153,27 +158,25 @@ &::after { position: absolute; - top: 0; - right: 0; + inset: 0; border-radius: inherit; - bottom: 0; - left: 0; content: ""; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.007); + background: rgb(255 255 255 / 0.7%); z-index: -1; pointer-events: none; - border: 0.0625rem solid hsla(0, 0%, 66.7%, 0.219); + border: 0.0625rem solid hsl(0deg 0% 66.7% / 21.9%); } + @media only screen and (max-width: 640px) { left: 0; - width: clamp(68%, 78%, 95%); right: 0; } - // padding: 0.4em; + // padding: 0.4em;padding } + form.inline { position: absolute; height: 4em; @@ -185,6 +188,7 @@ right: 0; width: 100%; } + ul { padding: 0; margin: 0; @@ -195,24 +199,26 @@ &:first-child { border-radius: $xs-radius $xs-radius 0 0; } + &:last-child { border-radius: 0 0 $xs-radius $xs-radius; } - transition: background-color cubic-bezier(0.47, 0, 0.745, 0.715) 80ms; + transition: background-color cubic-bezier(0.47, 0, 0.745, 0.715) 80ms; padding: 0.7em 0.5em; z-index: 1; margin: 0; - // border-radius: inherit; + // border-radius: inherit;border-radius cursor: pointer; - // background: inherit; + // background: inherit;background font-size: 1em; background: #0000; - // height: 100%; - // max-height: 5.125em; - // border-bottom: 1px solid #1a1a1a; + // height: 100%;height + // max-height: 5.125em;max-height + // border-bottom: 1px solid #1a1a1a;border-bottom + &:hover { - background: rgba(255, 255, 255, 0.1); + background: rgb(255 255 255 / 10%); } } } diff --git a/app/src/lib/components/SearchList/VirtualList.svelte b/app/src/lib/components/SearchList/VirtualList.svelte index d49fb983..44410753 100644 --- a/app/src/lib/components/SearchList/VirtualList.svelte +++ b/app/src/lib/components/SearchList/VirtualList.svelte @@ -131,7 +131,9 @@ } // trigger initial refresh onMount(() => { - rows = contents.getElementsByTagName("svelte-virtual-list-row") as HTMLCollectionOf; + rows = contents.getElementsByTagName( + "svelte-virtual-list-row", + ) as HTMLCollectionOf; if (items.length > 1) mounted = true; }); @@ -163,7 +165,7 @@ {#if isLoading}
    @@ -22,14 +22,14 @@ diff --git a/app/src/routes/artist/[slug]/releases.json/+server.ts b/app/src/routes/artist/[slug]/releases.json/+server.ts index 0880e99c..1c2ed0dd 100644 --- a/app/src/routes/artist/[slug]/releases.json/+server.ts +++ b/app/src/routes/artist/[slug]/releases.json/+server.ts @@ -38,10 +38,13 @@ export const GET: RequestHandler = async ({ url, params }) => { pwaInstallabilityStatus: "PWA_INSTALLABILITY_STATUS_CAN_BE_INSTALLED", webDisplayMode: "WEB_DISPLAY_MODE_BROWSER", storeDigitalGoodsApiSupportStatus: { - playStoreDigitalGoodsApiSupportStatus: "DIGITAL_GOODS_API_SUPPORT_STATUS_UNSUPPORTED", + playStoreDigitalGoodsApiSupportStatus: + "DIGITAL_GOODS_API_SUPPORT_STATUS_UNSUPPORTED", }, - musicActivityMasterSwitch: "MUSIC_ACTIVITY_MASTER_SWITCH_INDETERMINATE", - musicLocationMasterSwitch: "MUSIC_LOCATION_MASTER_SWITCH_INDETERMINATE", + musicActivityMasterSwitch: + "MUSIC_ACTIVITY_MASTER_SWITCH_INDETERMINATE", + musicLocationMasterSwitch: + "MUSIC_LOCATION_MASTER_SWITCH_INDETERMINATE", }, }, user: { @@ -106,8 +109,8 @@ export const GET: RequestHandler = async ({ url, params }) => { items: any[]; header: { gridHeaderRenderer: { title: { runs: [{ text: string }] } } }; } = - contents?.singleColumnBrowseResultsRenderer?.tabs[0]?.tabRenderer?.content?.sectionListRenderer?.contents[0] - ?.gridRenderer; + contents?.singleColumnBrowseResultsRenderer?.tabs[0]?.tabRenderer?.content + ?.sectionListRenderer?.contents[0]?.gridRenderer; const items = []; diff --git a/app/src/routes/artist/[slug]/releases/+page.ts b/app/src/routes/artist/[slug]/releases/+page.ts index c5404f2a..9c90c6d1 100644 --- a/app/src/routes/artist/[slug]/releases/+page.ts +++ b/app/src/routes/artist/[slug]/releases/+page.ts @@ -14,7 +14,9 @@ export const load: PageLoad = (async ({ const itct = url.searchParams.get("itct"); const visitorData = url.searchParams.get("visitorData"); const response = await fetch( - `/artist/${params.slug}/releases.json?visitorData=${visitorData}¶ms=${qparams}&itct=${encodeURIComponent( + `/artist/${ + params.slug + }/releases.json?visitorData=${visitorData}¶ms=${qparams}&itct=${encodeURIComponent( itct, )}`, ); diff --git a/app/src/routes/artist/[slug]/releases/_GridItem.svelte b/app/src/routes/artist/[slug]/releases/_GridItem.svelte index cfb4056e..ee4fc388 100644 --- a/app/src/routes/artist/[slug]/releases/_GridItem.svelte +++ b/app/src/routes/artist/[slug]/releases/_GridItem.svelte @@ -28,40 +28,42 @@ diff --git a/app/src/routes/library/songs/+page.svelte b/app/src/routes/library/songs/+page.svelte index cdadb902..9f10416b 100644 --- a/app/src/routes/library/songs/+page.svelte +++ b/app/src/routes/library/songs/+page.svelte @@ -74,8 +74,10 @@ flex-direction: row; margin-bottom: $md-spacing; } + .ctx-item { display: flex; + label { margin-right: $md-spacing; white-space: pre; diff --git a/app/src/routes/listen/+page.server.ts b/app/src/routes/listen/+page.server.ts index 8ef6ba3a..33e78302 100644 --- a/app/src/routes/listen/+page.server.ts +++ b/app/src/routes/listen/+page.server.ts @@ -10,15 +10,25 @@ export const load = async ({ url, fetch }) => { } const [data, list] = await Promise.all([ - fetch(`/api/v1/player.json?videoId=${id ? id : ""}${playlist ? `&playlistId=${playlist}` : ""}`).then((res) => - res.json(), - ), - fetch(`/api/v1/next.json?videoId=${id ? id : ""}${playlist ? `&playlistId=${playlist}` : ""}`).then((res) => - res.json(), - ), + fetch( + `/api/v1/player.json?videoId=${id ? id : ""}${ + playlist ? `&playlistId=${playlist}` : "" + }`, + ).then((res) => res.json()), + fetch( + `/api/v1/next.json?videoId=${id ? id : ""}${ + playlist ? `&playlistId=${playlist}` : "" + }`, + ).then((res) => res.json()), ]); - const { videoDetails: { title = "", videoId = "", thumbnail: { thumbnails = [] } = {} } = {} } = data; + const { + videoDetails: { + title = "", + videoId = "", + thumbnail: { thumbnails = [] } = {}, + } = {}, + } = data; return { title, diff --git a/app/src/routes/listen/+page.svelte b/app/src/routes/listen/+page.svelte index 5f1fc370..e1f5ae46 100644 --- a/app/src/routes/listen/+page.svelte +++ b/app/src/routes/listen/+page.svelte @@ -3,8 +3,8 @@ import Listing from "$lib/components/Item/Listing.svelte"; import list from "$lib/stores/list"; - import type { PageData } from "./$types"; import { SITE_ORIGIN_URL } from "$stores/url"; + import type { PageData } from "./$types"; export let data: PageData; const { videoId, playlist, thumbnails = [], title, related } = data; @@ -36,7 +36,9 @@ {title} | Beatbump @@ -96,25 +98,23 @@ align-self: center; gap: 1.25rem; } + button { grid-area: button; } + header { display: grid; - grid-template-areas: "img body"; - grid-template-columns: 0.5fr 1fr; - grid-template-rows: 1fr; - + grid-template: "img body" 1fr / 0.5fr 1fr; gap: 1rem; margin-bottom: 0.8rem; - background-color: hsl(209deg 20% 27% / 19%); border-color: #1b1b1b; border-radius: 0.8em; border-width: 1px; margin: 1em; padding: 0.8em; - // transition: all 0.23s cubic-bezier(0.39, 0.575, 0.565, 1); + // transition: all 0.23s cubic-bezier(0.39, 0.575, 0.565, 1);transition @media screen and (min-width: 640px) { grid-template-areas: "img body" @@ -122,6 +122,7 @@ grid-template-rows: 1fr 1fr; } } + .container { place-items: center; } @@ -132,8 +133,8 @@ max-height: 20rem; grid-area: img; } + img { - width: inherit; max-width: inherit; max-height: inherit; width: 100%; diff --git a/app/src/routes/playlist/[slug]/+page.svelte b/app/src/routes/playlist/[slug]/+page.svelte index 8a711717..b04cbb55 100644 --- a/app/src/routes/playlist/[slug]/+page.svelte +++ b/app/src/routes/playlist/[slug]/+page.svelte @@ -1,5 +1,7 @@ + +
    { + alert("touchend"); + if (touchTimer) clearTimeout(touchTimer); + isDragging = false; + }} + style="overflow-y: {isDragging ? 'hidden' : 'auto'};" +> + {#if currentDragId !== null} +
    + +
    + {/if} + {#each items as item, index (item)} + +
    { + if (touchTimer) clearTimeout(touchTimer); + touchTimer = setTimeout(() => { + isDragging = true; + }, 500); + }} + on:drag={(event) => { + const target = event.target; + if ( + !target || + !("getBoundingClientRect" in target) || + typeof target.getBoundingClientRect !== "function" + ) + return; + dragY = event.target.parentElement.scrollTop + event.clientY; + }} + on:dragend={handleDragEnd} + on:dragover|preventDefault={(event) => handleDragOver(event, index)} + on:dragstart={(event) => { + if (touchTimer) clearTimeout(touchTimer); + setTimeout(() => handleDragStart(event, index), 500); + }} + > + +
    + {/each} +
    + + diff --git a/app/src/lib/components/Dropdown/Dropdown.svelte b/app/src/lib/components/Dropdown/Dropdown.svelte index 03879b01..4407c173 100644 --- a/app/src/lib/components/Dropdown/Dropdown.svelte +++ b/app/src/lib/components/Dropdown/Dropdown.svelte @@ -20,7 +20,7 @@ delay, duration, easing, - css: (t, u) => + css: (t: number) => "overflow: hidden;" + `opacity: ${Math.min(t * 20, 1) * opacity};` + `height: ${t * height}px;` + @@ -35,11 +35,10 @@ // Focus state action function focusState(node: HTMLElement) { - function handleFocusOut( - event: FocusEvent & { relatedTarget: HTMLElement & EventTarget }, - ) { + function handleFocusOut(event: FocusEvent) { + const relatedTarget = event.relatedTarget as HTMLElement; // console.log(node.contains(event.relatedTarget)) - if (!node.contains(event.relatedTarget)) { + if (!node.contains(relatedTarget)) { node.dispatchEvent(new CustomEvent("lostfocus")); } } @@ -58,7 +57,7 @@ import { windowHeight, windowWidth } from "$stores/window"; import { cubicOut } from "svelte/easing"; - import { PopperStore, isOpen, activeNode } from "../Popper/popperStore"; + import { PopperStore, activeNode, isOpen } from "../Popper/popperStore"; import DropdownItem from "./DropdownItem.svelte"; export let main: HTMLElement; @@ -68,13 +67,12 @@ $: isShowing = $PopperStore?.items.length !== 0; - let frame: number; + let frame: number | undefined; let width: number; - let popperHeight; - let popper: HTMLElement = undefined; - let scrollPosY = 0; - let lastScrollTime; + let popperHeight: number; + let popper: HTMLElement | undefined = undefined; + let scrollPosY: number | undefined = 0; let isScrolling = false; let posX: number; let posY: number; @@ -83,23 +81,27 @@ let rect = popper.getBoundingClientRect(); // Get position on the X axis if ($PopperStore?.direction === "right") { - if (rect?.left <= 0) { + if (rect?.left <= 0 && $PopperStore.x) { posX = $PopperStore.x + rect?.width; } else if (rect?.right >= $windowWidth) { posX = $windowWidth + -width * 1.75; - } else { + } else if ($PopperStore.x) { posX = $PopperStore.x; } - } else { + } else if ($PopperStore.x) { posX = $PopperStore.x - width; } // Get position on the Y axis - if ($PopperStore?.y - popperHeight <= 0) { + if ($PopperStore.y && $PopperStore.y - popperHeight <= 0) { posY = $PopperStore.y; - } else if ($PopperStore.bottom + popperHeight >= $windowHeight) { + } else if ( + $PopperStore.bottom && + $PopperStore.y && + $PopperStore.bottom + popperHeight >= $windowHeight + ) { posY = $PopperStore.y - popperHeight; - } else { + } else if ($PopperStore.y) { posY = $PopperStore.y; } } @@ -122,7 +124,7 @@ onClose(); } } - let startTime: number; + let startTime: number | undefined; function scrollHandler(ts: number) { if (!popper) return; if (startTime === undefined) { @@ -134,7 +136,7 @@ frame = requestAnimationFrame(scrollHandler); } else { onClose(); - cancelAnimationFrame(frame); + if (frame) cancelAnimationFrame(frame); isScrolling = false; isShowing = false; startTime = undefined; @@ -147,7 +149,7 @@ function onScroll() { if (!isShowing && !popper) return; - if (!scrollPosY) scrollPosY = popper.getBoundingClientRect().top; + if (!scrollPosY && popper) scrollPosY = popper.getBoundingClientRect().top; if (frame) { return; } @@ -169,11 +171,10 @@ bind:this={popper} on:mouseleave|stopPropagation={onClose} on:lostfocus={onClose} - in:slide={{ delay: 125, duration: 125 }} - out:slide={{ duration: 125 }} + in:slide|local={{ delay: 125, duration: 125 }} + out:slide|local={{ duration: 250, delay: 125 }} class={type === "player" ? "dd-player" : "dd-menu"} style="transform: translate({posX}px, {posY}px)" - tabindex="0" > {#each items as item}
    {#each items as item, i (item)} { diff --git a/app/src/lib/components/ListInfoBar/ListInfoBar.svelte b/app/src/lib/components/ListInfoBar/ListInfoBar.svelte index 15409a40..21c2db83 100644 --- a/app/src/lib/components/ListInfoBar/ListInfoBar.svelte +++ b/app/src/lib/components/ListInfoBar/ListInfoBar.svelte @@ -1,11 +1,9 @@ {#if options.length !== 0} diff --git a/app/src/lib/components/ListInfoBar/Select.svelte b/app/src/lib/components/ListInfoBar/Select.svelte index 0a892587..1994810e 100644 --- a/app/src/lib/components/ListInfoBar/Select.svelte +++ b/app/src/lib/components/ListInfoBar/Select.svelte @@ -1,8 +1,7 @@
    diff --git a/app/src/lib/components/ListInfoBar/index.scss b/app/src/lib/components/ListInfoBar/index.scss index 773f124c..c26e349b 100644 --- a/app/src/lib/components/ListInfoBar/index.scss +++ b/app/src/lib/components/ListInfoBar/index.scss @@ -1,8 +1,8 @@ .info-bar { display: grid; grid-template-rows: 1fr; - grid-template-columns: [index] 6.25rem 1fr 2.9rem; - padding: 0.8rem 0 0.4rem 0; + grid-template-columns: [index] 6.25rem 1fr 3rem; + padding: 0.8rem 0.1rem 0.4rem 0; max-width: inherit; /* gap: 0.8rem; */ width: 100%; @@ -25,7 +25,7 @@ .mobile-thumbnail { @extend .index; display: block; - padding-left: 2rem; + padding-left: 2.5rem; grid-column: index; } @@ -33,10 +33,12 @@ padding-right: 1.5rem; } @media screen and (min-width: 640px) { - grid-template-columns: [index] 9.5rem [title] 1fr 3rem; + grid-template-columns: 0.7rem[index] 10.8rem[title] 1fr 3rem; .index { grid-column: index; display: block; + + justify-self: center; } .title { justify-self: flex-start; diff --git a/app/src/lib/components/ListItem/ListItem.svelte b/app/src/lib/components/ListItem/ListItem.svelte index 06032777..fe282daa 100644 --- a/app/src/lib/components/ListItem/ListItem.svelte +++ b/app/src/lib/components/ListItem/ListItem.svelte @@ -102,7 +102,7 @@ ) => { const { $queue, $startIndex = 0, $list } = stores; if (item.playlistId === $list!.currentMixId) { - if (index - $startIndex < $queue.length) { + if ($queue && index - $startIndex < $queue.length) { await list .getSessionContinuation({ videoId: item?.videoId, @@ -111,8 +111,8 @@ loggingContext: item.loggingContext, playerParams: item?.playerParams, playlistSetVideoId: item?.playlistSetVideoId, - ctoken: $list.continuation, - clickTrackingParams: item.clickTrackingParams, + ctoken: $list ? $list.continuation : "", + clickTrackingParams: item.clickTrackingParams || "", }) .then(() => { return list.updatePosition(index); @@ -153,10 +153,11 @@ } await tick(); await list.initPlaylistSession({ - playlistId: item.playlistId, + playlistId: item.playlistId || "", visitorData, clickTrackingParams: - (item.playlistId === $list.currentMixId && + ($queue && + item.playlistId === $list?.currentMixId && $queue[index]?.clickTrackingParams) || item?.clickTrackingParams, index: index, @@ -166,44 +167,6 @@ }); }; - const handleQueueClick: ClickHandler = async (item, index, stores) => { - const { $queue } = stores; - /// Do we have a group session? - if (groupSession.initialized && groupSession.hasActiveSession) { - /// If the index is 0, handle it differently - if (index === 0) { - updateGroupPosition(undefined, index === 0 ? 1 : index); - list.updatePosition(1); - - return AudioPlayer.previous(false); - } - - /// If the index is the last item, handle it differently - if (index === $queue.length - 1) { - list.updatePosition(index === 0 ? 0 : index - 1); - SessionListService.next(true, true); - await tick(); - return; - } - - /// Update position as normal - list.updatePosition(index === 0 ? 0 : index - 1); - updateGroupPosition(undefined, index === 0 ? 0 : index - 1); - await tick(); - SessionListService.next(true, true); - } else { - if (index === 0) { - list.updatePosition(1); - await tick(); - return AudioPlayer.previous(false); - } - list.updatePosition(index - 1); - await tick(); - - SessionListService.next(true, false); - } - }; - const buildMenu = ({ item, idx, @@ -250,12 +213,12 @@ IDBService.sendMessage("create", "favorite", item); }) .add( - page === "queue" ? "Remove from Queue" : null, + page === "queue" ? "Remove from Queue" : undefined, page === "queue" ? () => { list.removeTrack(idx); } - : null, + : undefined, ) .add("Share", async () => { let shareData: { @@ -305,7 +268,6 @@ {#if $queue.length && state === "open"} {#if $immersiveQueue}
    {#if tab.id === "UpNext"} {#if isActive} -
    - + + > { if (isPagePlaying.has("player-queue")) return; isPagePlaying.add("player-queue"); }} /> - +
    {/if} {:else if isActive} @@ -616,7 +626,9 @@ &.open { // backdrop-filter: brightness(0.6) opacity(1) contrast(1) saturate(1.1) grayscale(0.3) sepia(0.2) url(1rem); background-color: hsl(0deg 0% 0% / 58.7%); - transition-delay: 600ms; + &::after { + transition-delay: 800ms; + } } &::after { @@ -635,11 +647,10 @@ // overflow: hidden; will-change: opacity, top; transform: scale(var(--scale)) translate3d(0, 0, 0); - transition: backdrop-filter cubic-bezier(0.25, 0.46, 0.45, 0.94) 1600ms - 800ms; + transition: backdrop-filter cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background-color, transform, filter, backdrop-filter; - transition-duration: 900ms; - transition-delay: 600ms; + transition-duration: 500ms; + transition-delay: 1000ms; @media screen and (max-width: 720px) { position: absolute; diff --git a/app/src/lib/components/Player/Player.svelte b/app/src/lib/components/Player/Player.svelte index e93b948b..24033795 100644 --- a/app/src/lib/components/Player/Player.svelte +++ b/app/src/lib/components/Player/Player.svelte @@ -157,7 +157,7 @@ class="container" style=" font-weight: 400; - font-family: 'CommissionerVariable'; + font-family: ''Commissioner Variable''; letter-spacing: -0.02em;" > {$currentTrack?.title} diff --git a/app/src/lib/components/Popper/MobilePopper.svelte b/app/src/lib/components/Popper/MobilePopper.svelte index 02c14b9e..1ce877b2 100644 --- a/app/src/lib/components/Popper/MobilePopper.svelte +++ b/app/src/lib/components/Popper/MobilePopper.svelte @@ -182,9 +182,10 @@ on:pointerdown|stopPropagation={() => { tracklist.style.willChange = "scroll-position, transform"; }} - on:dragstart|capture|stopPropagation={(e) => onDragStart(1, e)} - on:dragmove|capture|stopPropagation={(e) => trackMovement(1, e.detail)} - on:dragend|capture|stopPropagation={(e) => release(1, e.detail)} + on:bb-dragstart|capture|stopPropagation={(e) => onDragStart(1, e)} + on:bb-dragmove|capture|stopPropagation={(e) => + trackMovement(1, e.detail)} + on:bb-dragend|capture|stopPropagation={(e) => release(1, e.detail)} class="handle" >
    diff --git a/app/src/lib/components/Search/Search.svelte b/app/src/lib/components/Search/Search.svelte index c3d7bebb..40cc10be 100644 --- a/app/src/lib/components/Search/Search.svelte +++ b/app/src/lib/components/Search/Search.svelte @@ -1,7 +1,9 @@ diff --git a/app/src/routes/library/+page.svelte b/app/src/routes/(app)/library/+page.svelte similarity index 100% rename from app/src/routes/library/+page.svelte rename to app/src/routes/(app)/library/+page.svelte diff --git a/app/src/routes/library/+page.ts b/app/src/routes/(app)/library/+page.ts similarity index 100% rename from app/src/routes/library/+page.ts rename to app/src/routes/(app)/library/+page.ts diff --git a/app/src/routes/library/_ImportDB.svelte b/app/src/routes/(app)/library/_ImportDB.svelte similarity index 100% rename from app/src/routes/library/_ImportDB.svelte rename to app/src/routes/(app)/library/_ImportDB.svelte diff --git a/app/src/routes/library/_Sync.svelte b/app/src/routes/(app)/library/_Sync.svelte similarity index 100% rename from app/src/routes/library/_Sync.svelte rename to app/src/routes/(app)/library/_Sync.svelte diff --git a/app/src/routes/library/_components/Grid/Grid.svelte b/app/src/routes/(app)/library/_components/Grid/Grid.svelte similarity index 100% rename from app/src/routes/library/_components/Grid/Grid.svelte rename to app/src/routes/(app)/library/_components/Grid/Grid.svelte diff --git a/app/src/routes/library/_components/Grid/GridItem.svelte b/app/src/routes/(app)/library/_components/Grid/GridItem.svelte similarity index 97% rename from app/src/routes/library/_components/Grid/GridItem.svelte rename to app/src/routes/(app)/library/_components/Grid/GridItem.svelte index 46cc910c..a7d489e6 100644 --- a/app/src/routes/library/_components/Grid/GridItem.svelte +++ b/app/src/routes/(app)/library/_components/Grid/GridItem.svelte @@ -56,7 +56,7 @@ .item-title { display: inline; padding: 0.3rem 0.1rem; - font-family: CommissionerVariable; + font-family: "Commissioner Variable"; font-weight: 500; font-size: 1.1em; letter-spacing: -0.02em; diff --git a/app/src/routes/library/_components/Grid/index.scss b/app/src/routes/(app)/library/_components/Grid/index.scss similarity index 100% rename from app/src/routes/library/_components/Grid/index.scss rename to app/src/routes/(app)/library/_components/Grid/index.scss diff --git a/app/src/routes/library/_components/Grid/index.ts b/app/src/routes/(app)/library/_components/Grid/index.ts similarity index 100% rename from app/src/routes/library/_components/Grid/index.ts rename to app/src/routes/(app)/library/_components/Grid/index.ts diff --git a/app/src/routes/library/_components/PlaylistManager.svelte b/app/src/routes/(app)/library/_components/PlaylistManager.svelte similarity index 100% rename from app/src/routes/library/_components/PlaylistManager.svelte rename to app/src/routes/(app)/library/_components/PlaylistManager.svelte diff --git a/app/src/routes/library/_components/Popup.svelte b/app/src/routes/(app)/library/_components/Popup.svelte similarity index 100% rename from app/src/routes/library/_components/Popup.svelte rename to app/src/routes/(app)/library/_components/Popup.svelte diff --git a/app/src/routes/library/playlists/+page.svelte b/app/src/routes/(app)/library/playlists/+page.svelte similarity index 100% rename from app/src/routes/library/playlists/+page.svelte rename to app/src/routes/(app)/library/playlists/+page.svelte diff --git a/app/src/routes/library/playlists/[slug]/+page.svelte b/app/src/routes/(app)/library/playlists/[slug]/+page.svelte similarity index 100% rename from app/src/routes/library/playlists/[slug]/+page.svelte rename to app/src/routes/(app)/library/playlists/[slug]/+page.svelte diff --git a/app/src/routes/library/playlists/[slug]/+page.ts b/app/src/routes/(app)/library/playlists/[slug]/+page.ts similarity index 100% rename from app/src/routes/library/playlists/[slug]/+page.ts rename to app/src/routes/(app)/library/playlists/[slug]/+page.ts diff --git a/app/src/routes/library/playlists/_List.svelte b/app/src/routes/(app)/library/playlists/_List.svelte similarity index 100% rename from app/src/routes/library/playlists/_List.svelte rename to app/src/routes/(app)/library/playlists/_List.svelte diff --git a/app/src/routes/library/playlists/_Search.svelte b/app/src/routes/(app)/library/playlists/_Search.svelte similarity index 100% rename from app/src/routes/library/playlists/_Search.svelte rename to app/src/routes/(app)/library/playlists/_Search.svelte diff --git a/app/src/routes/library/songs/+page.svelte b/app/src/routes/(app)/library/songs/+page.svelte similarity index 100% rename from app/src/routes/library/songs/+page.svelte rename to app/src/routes/(app)/library/songs/+page.svelte diff --git a/app/src/routes/listen/+page.server.ts b/app/src/routes/(app)/listen/+page.server.ts similarity index 100% rename from app/src/routes/listen/+page.server.ts rename to app/src/routes/(app)/listen/+page.server.ts diff --git a/app/src/routes/listen/+page.svelte b/app/src/routes/(app)/listen/+page.svelte similarity index 100% rename from app/src/routes/listen/+page.svelte rename to app/src/routes/(app)/listen/+page.svelte diff --git a/app/src/routes/playlist/[slug]/+page.svelte b/app/src/routes/(app)/playlist/[slug]/+page.svelte similarity index 97% rename from app/src/routes/playlist/[slug]/+page.svelte rename to app/src/routes/(app)/playlist/[slug]/+page.svelte index b04cbb55..62a1357e 100644 --- a/app/src/routes/playlist/[slug]/+page.svelte +++ b/app/src/routes/(app)/playlist/[slug]/+page.svelte @@ -10,7 +10,7 @@ import Header from "$lib/components/Layouts/Header.svelte"; import InfoBox from "$lib/components/Layouts/InfoBox.svelte"; import ListInfoBar from "$lib/components/ListInfoBar"; - import { CTX_ListItem } from "$lib/contexts"; + import { CTX_ListItem, releasePageContext } from "$lib/contexts"; import type { IListItemRenderer } from "$lib/types/musicListItemRenderer"; import { notify } from "$lib/utils"; import { onMount } from "svelte"; @@ -232,8 +232,7 @@ }, }, ]; - let filter = value ? value : options[0].params; - // $: browser && console.log(data); + let filter = value ? value : 0; onMount(() => { const cb = listItemPageContext.add("playlist"); @@ -241,6 +240,7 @@ cb(); }; }); + releasePageContext.set({ page: "release" }); @@ -317,9 +317,9 @@ /> {/if} { - options[value].action(); + options[filter].action(); }} {options} /> @@ -344,7 +344,7 @@ {#if carousel} diff --git a/app/src/routes/playlist/[slug]/+page.ts b/app/src/routes/(app)/playlist/[slug]/+page.ts similarity index 100% rename from app/src/routes/playlist/[slug]/+page.ts rename to app/src/routes/(app)/playlist/[slug]/+page.ts diff --git a/app/src/routes/playlist/_List.svelte b/app/src/routes/(app)/playlist/_List.svelte similarity index 100% rename from app/src/routes/playlist/_List.svelte rename to app/src/routes/(app)/playlist/_List.svelte diff --git a/app/src/routes/release/+page.ts b/app/src/routes/(app)/release/+page.server.ts similarity index 58% rename from app/src/routes/release/+page.ts rename to app/src/routes/(app)/release/+page.server.ts index 24a935f7..097a98bb 100644 --- a/app/src/routes/release/+page.ts +++ b/app/src/routes/(app)/release/+page.server.ts @@ -1,6 +1,6 @@ -import type { PageLoad } from "./$types"; +import { ItemBuilder, parsePageContents } from "$lib/parsers"; -export const load: PageLoad = async ({ url, fetch }) => { +export const load = async ({ url, fetch, locals }) => { const path = url.pathname; const browseId = url.searchParams.get("id") || ""; const pt = url.searchParams.get("type") || ""; @@ -16,9 +16,14 @@ export const load: PageLoad = async ({ url, fetch }) => { msg: response.body, }; } + const itemBuilder = new ItemBuilder({ + proxy: locals.preferences["Proxy Thumbnails"], + origin: url.origin, + }); + const promise = await parsePageContents(data, itemBuilder); return { - data: data, + items: promise, id: browseId, path, }; diff --git a/app/src/routes/release/+page.svelte b/app/src/routes/(app)/release/+page.svelte similarity index 88% rename from app/src/routes/release/+page.svelte rename to app/src/routes/(app)/release/+page.svelte index df62bb7a..7dd36b77 100644 --- a/app/src/routes/release/+page.svelte +++ b/app/src/routes/(app)/release/+page.svelte @@ -1,23 +1,21 @@
    => { const slug = params.slug; const filter = url.searchParams.get("filter") || ""; + const restricted = url.searchParams.get("restricted") || ""; const apiUrl = `/api/v1/search.json?q=${slug}${ filter !== "" ? `&filter=${encodeURIComponent(filter)}` : "" - }`; + }${restricted ? `&restricted=${restricted}` : ""}`; const response = await fetch(apiUrl); const data = (await response.json()) as SearchResponse; Object.assign(data, { filter }); diff --git a/app/src/routes/session/+page.svelte b/app/src/routes/(app)/session/+page.svelte similarity index 100% rename from app/src/routes/session/+page.svelte rename to app/src/routes/(app)/session/+page.svelte diff --git a/app/src/routes/session/+page.ts b/app/src/routes/(app)/session/+page.ts similarity index 100% rename from app/src/routes/session/+page.ts rename to app/src/routes/(app)/session/+page.ts diff --git a/app/src/routes/(app)/settings/+page.svelte b/app/src/routes/(app)/settings/+page.svelte new file mode 100644 index 00000000..0d7c6319 --- /dev/null +++ b/app/src/routes/(app)/settings/+page.svelte @@ -0,0 +1,367 @@ + + + + +
    +{#if browser} +
    +
    + Appearance +
    + +
    + +
    +
    +
    + + +
    +
    +
    + Playback +
    + + + +
    +
    + +
    + +
    +
    +
    + + +
    +
    + +
    + +
    +
    +
    +
    + Network +
    + +
    +
    + { + let value = e.currentTarget.value; + + if (!value.endsWith("/")) value = value + "/"; + if (value.match(/^https?:\/\//i)) { + $settings["network"]["HLS Stream Proxy"] = value; + } + }} + pattern="http://.*" + placeholder="https://yt-hls-rewriter.onrender.com/" + value={$settings["network"]["HLS Stream Proxy"]} + /> +
    + +
    +
    +
    + + +
    +
    +
    + Search +
    + +
    + +
    +
    +
    + + + +
    +
    +
    +{/if} + + diff --git a/app/src/routes/settings/+page.ts b/app/src/routes/(app)/settings/+page.ts similarity index 100% rename from app/src/routes/settings/+page.ts rename to app/src/routes/(app)/settings/+page.ts diff --git a/app/src/routes/(app)/settings/update.json/+server.ts b/app/src/routes/(app)/settings/update.json/+server.ts new file mode 100644 index 00000000..a836cd3e --- /dev/null +++ b/app/src/routes/(app)/settings/update.json/+server.ts @@ -0,0 +1,37 @@ +import { + defaultCookieParams, + type PreferencesCookie, +} from "$lib/server/cookies"; +import { error, json, type Cookies } from "@sveltejs/kit"; + +const updatePreferencesCookie = ( + locals: App.Locals["preferences"], + cookies: Cookies, + updatedBody: Partial = {}, +) => { + const prefs = locals; + + const preferences: PreferencesCookie = prefs + ? prefs + : { "Proxy Thumbnails": true, Restricted: false }; + + cookies.set( + "_prefs", + btoa(JSON.stringify({ ...preferences, ...updatedBody })), + defaultCookieParams(), + ); + return { ...preferences, ...updatedBody }; +}; +export const POST = async ({ request, locals, cookies }) => { + const data = (await request.json()) as App.Locals["preferences"]; + + if ( + typeof data["Proxy Thumbnails"] === "undefined" && + typeof data["Restricted"] === "undefined" + ) + throw error(500, { message: "Missing body arguments" }); + + const prefs = updatePreferencesCookie(locals.preferences, cookies, data); + + return json("OK"); +}; diff --git a/app/src/routes/trending.json/+server.ts b/app/src/routes/(app)/trending.json/+server.ts similarity index 68% rename from app/src/routes/trending.json/+server.ts rename to app/src/routes/(app)/trending.json/+server.ts index 52c61f21..41264954 100644 --- a/app/src/routes/trending.json/+server.ts +++ b/app/src/routes/(app)/trending.json/+server.ts @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { buildAPIRequest } from "$api/request"; +import { buildAPIRequest } from "../api/_lib/request"; -import { parseCarouselItem } from "$lib/parsers/innertube/carousel"; +import { ItemBuilder } from "$lib/parsers"; +import { parseCarousel } from "$lib/parsers/innertube/carousel"; import { error, json, type RequestHandler } from "@sveltejs/kit"; /** @@ -11,12 +12,19 @@ import { error, json, type RequestHandler } from "@sveltejs/kit"; * @method GET * @returns {{carouselItems: ICarousel[]}} */ -export const GET: RequestHandler = async () => { +export const GET: RequestHandler = async ({ locals, url }) => { let carouselItems = []; + const itemBuilder = new ItemBuilder({ + proxy: locals.preferences["Proxy Thumbnails"], + origin: url.origin, + }); const response = await buildAPIRequest("home", { context: { client: { clientName: "WEB_REMIX", clientVersion: "1.20230501.01.00" }, + user: { + lockedSafetyMode: locals.preferences.Restricted, + }, }, params: { browseId: "FEmusic_explore" }, headers: null, @@ -37,7 +45,7 @@ export const GET: RequestHandler = async () => { carouselItems = await Promise.all( contents .filter((item) => "musicCarouselShelfRenderer" in item) - .map(parseCarouselItem), + .map((carouselItem) => parseCarousel(carouselItem, itemBuilder)), ); return json({ carouselItems, data }); diff --git a/app/src/routes/trending/+page.svelte b/app/src/routes/(app)/trending/+page.svelte similarity index 97% rename from app/src/routes/trending/+page.svelte rename to app/src/routes/(app)/trending/+page.svelte index 44227cb0..ae095ed1 100644 --- a/app/src/routes/trending/+page.svelte +++ b/app/src/routes/(app)/trending/+page.svelte @@ -111,7 +111,7 @@ width: clamp(12em, 13em, 15em); contain: content; border-radius: 0.3em; - font-family: "CommissionerVariable", sans-serif; + font-family: "Commissioner Variable", sans-serif; border-left: 0.5rem solid var(--color, red); align-items: center; height: 3.25em; diff --git a/app/src/routes/trending/+page.ts b/app/src/routes/(app)/trending/+page.ts similarity index 86% rename from app/src/routes/trending/+page.ts rename to app/src/routes/(app)/trending/+page.ts index 3639a7ce..1bc5137a 100644 --- a/app/src/routes/trending/+page.ts +++ b/app/src/routes/(app)/trending/+page.ts @@ -1,6 +1,6 @@ import type { MoodsAndGenresItem } from "$lib/types"; import { error } from "@sveltejs/kit"; -import type { ParsedCarousel } from "$api/models/Carousel"; +import type { ParsedCarousel } from "../api/_lib/models/Carousel"; export const load = async ({ fetch }) => { const response = await fetch<{ diff --git a/app/src/routes/(app)/trending/new/[slug].json/+server.ts b/app/src/routes/(app)/trending/new/[slug].json/+server.ts new file mode 100644 index 00000000..1ba563c3 --- /dev/null +++ b/app/src/routes/(app)/trending/new/[slug].json/+server.ts @@ -0,0 +1,113 @@ +import { ItemBuilder } from "$lib/parsers"; +import { parseCarousel } from "$lib/parsers/innertube/carousel"; +import type { IMusicTwoRowItemRenderer } from "$lib/types/innertube/internals"; +import type { RequestHandler } from "@sveltejs/kit"; +import { json as json$1 } from "@sveltejs/kit"; + +/* eslint-disable prefer-const */ + +export const GET: RequestHandler = async ({ params, fetch, locals, url }) => { + const { slug } = params; + // const ctx = query.get('params') || '' + const itemBuilder = new ItemBuilder({ + proxy: locals.preferences["Proxy Thumbnails"], + origin: url.origin, + }); + + const response = await fetch( + `https://music.youtube.com/youtubei/v1/browse?key=AIzaSyC9XL3ZjWddXya6X74dJoCTL-WEYFDNX30&prettyPrint=false`, + { + method: "POST", + keepalive: true, + body: JSON.stringify({ + context: { + // clickTracking: { clickTrackingParams: `${itct}` }, + client: { + clientName: "WEB_REMIX", + clientVersion: "0.1", + }, + + user: { + lockedSafetyMode: locals.preferences.Restricted, + }, + }, + // params: `${ctx}`, + browseId: `${slug}`, + }), + headers: { + "Content-Type": "application/json; charset=utf-8", + Origin: "https://music.youtube.com", + }, + }, + ); + + const data = await response.json(); + let { + header: { + musicHeaderRenderer: { + title: { runs: [{ text = "" } = {}] = [] } = {}, + } = {}, + } = {}, + contents: { + singleColumnBrowseResultsRenderer: { + tabs: [ + { + tabRenderer: { + content: { sectionListRenderer: { contents = [] } = {} } = {}, + } = {}, + } = {}, + ] = [], + } = {}, + } = {}, + } = await data; + let type: string; + + slug?.includes("videos") ? (type = "videos") : (type = "albums"); + let carousels = []; + let grids = []; + let sections = []; + for (let index = 0; index < contents.length; index++) { + const element = contents[index]; + + element?.musicCarouselShelfRenderer && carousels.push(element); + element?.gridRenderer && grids.push(element); + } + if (carousels.length !== 0) { + for (let index = 0; index < contents.length; index++) { + const element = contents[index]; + if (element?.musicCarouselShelfRenderer) { + sections.push(parseCarousel(element, itemBuilder)); + } + } + } + if (grids.length !== 0) { + for (let idx = -1; ++idx < contents.length; ) { + const { gridRenderer = {} } = contents[idx]; + const items = gridRenderer.items; + const header = gridRenderer.header; + const section = await Promise.all( + items.map( + (ctx: { musicTwoRowItemRenderer: IMusicTwoRowItemRenderer }) => + itemBuilder.MusicTwoRowItemRenderer(ctx), + ), + ); + sections.push({ + section, + type: "grid", + title: header?.gridHeaderRenderer?.title?.runs[0]?.text, + }); + } + } + + const getTitle = () => { + const wordParts: Array = slug.split("_"); + for (let i = 0; i < wordParts.length; i++) { + wordParts[i] = wordParts[i][0].toUpperCase() + wordParts[i].substr(1); + } + wordParts.join(" "); + wordParts.shift(); + return wordParts.join(" "); + }; + // console.log(sections) + return json$1({ title: getTitle(), sections, header: text, data }); +}; diff --git a/app/src/routes/trending/new/[slug]/+page.svelte b/app/src/routes/(app)/trending/new/[slug]/+page.svelte similarity index 97% rename from app/src/routes/trending/new/[slug]/+page.svelte rename to app/src/routes/(app)/trending/new/[slug]/+page.svelte index 4043603b..5dd8e2b6 100644 --- a/app/src/routes/trending/new/[slug]/+page.svelte +++ b/app/src/routes/(app)/trending/new/[slug]/+page.svelte @@ -14,6 +14,7 @@ let header = data.header; let title: string = data.title; + $: console.log(data);
    { + const FIRST_SLASH = params.slug.indexOf("/"); + const SLUG = params.slug.slice(0, FIRST_SLASH); + const PATH = + SLUG === "vi" ? `/${params.slug}` : params.slug.slice(FIRST_SLASH); + + const BASE = SERVER_MAP[SLUG as keyof typeof SERVER_MAP]; + + // Rewrite request to point to Google's thumbnail services. + request = new Request(BASE + PATH, { + headers: { + host: new URL(BASE).host, + "User-Agent": + "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/114.0", + }, + }); + + request.headers.set("Origin", new URL(BASE).origin); + + let response = await fetch(request); + + // Recreate the response from Google's servers + response = new Response(response.body, response); + + // Set CORS headers + response.headers.set("Access-Control-Allow-Origin", "*"); + response.headers.delete("Cookie"); + // Append to/Add Vary header so browser will cache response correctly + response.headers.append("Vary", "Origin"); + + return new Response(await response.arrayBuffer(), { + ...response.headers, + status: response.status, + headers: { ...response.headers }, + }); +}; diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index e09c2a20..8fa5dea1 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -8,7 +8,7 @@ import { Popper } from "$lib/components/Popper"; import PlaylistPopper from "$lib/components/PlaylistPopper"; - import "@fontsource/commissioner/variable.css"; + import "@fontsource-variable/commissioner"; import { browser, dev } from "$app/environment"; import { afterNavigate } from "$app/navigation"; @@ -29,8 +29,6 @@ $: ({ key } = data); let main: HTMLElement; - $: console.log($groupSession); - let isFullscreen = false; $: $fullscreenStore === "open" @@ -41,7 +39,10 @@ isFullscreen = false; }, 0); - $: hasplayer = $queue.length !== 0; + let queueAlreadyPopulated = false; + $: hasplayer = !queueAlreadyPopulated + ? ((queueAlreadyPopulated = true), $queue.length !== 0) + : queueAlreadyPopulated; // Setup dev debugging logs $: if (dev && browser) { @@ -64,9 +65,9 @@ localStorage.setItem("lastTrack", JSON.stringify($currentTrack)); } - afterNavigate(({ from, to }) => { - if (import.meta.env.SSR) return; - if (main) main.scrollTop = 0; + afterNavigate(() => { + if (!browser) return; + if (main) main.scrollTo({ top: 0 }); }); onMount(() => { @@ -88,6 +89,23 @@ Logger.err(err); } }); + let info: Record = {}; + + const logInfo = (event: TouchEvent) => { + ["target", "changedTouches"].forEach((prop) => + prop === "changedTouches" + ? (info[prop] = JSON.stringify( + Object.fromEntries( + ["clientX", "clientY"].map((k) => [k, event[prop].item(0)[k]]), + ), + )) + : (info[prop] = event[prop].outerHTML.slice( + 0, + event[prop].outerHTML.indexOf(">"), + )), + ); + console.log(event.changedTouches); + }; +{#if info} +
    + {#each Object.entries(info) as [key, value]} +

    {key} - {value}

    + {/each} +
    +{/if}
diff --git a/app/src/lib/components/DraggableList/DraggableList.svelte b/app/src/lib/components/DraggableList/DraggableList.svelte index f6a6a537..72f487a2 100644 --- a/app/src/lib/components/DraggableList/DraggableList.svelte +++ b/app/src/lib/components/DraggableList/DraggableList.svelte @@ -14,6 +14,7 @@ // eslint-disable-next-line no-undef export let items: T[] = []; + export let style = ""; const dispatch = createEventDispatcher<{ click: void; @@ -109,7 +110,7 @@ if (touchTimer) clearTimeout(touchTimer); isDragging = false; }} - style="overflow-y: {isDragging ? 'hidden' : 'auto'};" + style="overflow-y: {isDragging ? 'hidden' : 'auto'}; {style}" > {#if currentDragId !== null}
@@ -49,7 +49,7 @@ } @media screen and (min-width: 640px) { svg { - stroke-width: 2; + stroke-width: initial; } } diff --git a/app/src/lib/components/Item/Listing.svelte b/app/src/lib/components/Item/Listing.svelte index 6ccd1fb0..5a055c87 100644 --- a/app/src/lib/components/Item/Listing.svelte +++ b/app/src/lib/components/Item/Listing.svelte @@ -3,6 +3,16 @@ lang="ts" > const RE_THUMBNAIL_DIM = /=w\d+-h\d+-/gm; + + const isChannelOrArtist = (item: Item) => { + if (item?.subtitle) { + return ( + (item.endpoint && item.endpoint?.pageType?.includes("ARTIST")) || + item.endpoint?.pageType?.includes("USER_CHANNEL") + ); + } + return false; + }; @@ -342,7 +353,7 @@ {/if}

- {#if data.type === "artists"} + {#if isArtist}

{#each data.subtitle as subtitle} {subtitle.text} diff --git a/app/src/lib/components/ListItem/ListItem.svelte b/app/src/lib/components/ListItem/ListItem.svelte index 86a552e5..e30a8ca5 100644 --- a/app/src/lib/components/ListItem/ListItem.svelte +++ b/app/src/lib/components/ListItem/ListItem.svelte @@ -452,6 +452,7 @@ {#if item.explicit} diff --git a/app/src/lib/components/ListItem/index.scss b/app/src/lib/components/ListItem/index.scss index d810b2ec..14e4dd6c 100644 --- a/app/src/lib/components/ListItem/index.scss +++ b/app/src/lib/components/ListItem/index.scss @@ -67,7 +67,7 @@ width: 100%; max-width: calc(100%); @media screen and (min-width: 966px) { - max-width: calc(100% - 7em); + max-width: calc(100% - 1em); } } @@ -98,11 +98,15 @@ } .length { + &:is(span) { + padding:0.5em; + } align-self: center; grid-area: right; display: flex; white-space: nowrap; justify-content: flex-end; + min-width:max-content; } .thumbnail { diff --git a/app/src/lib/components/Player/Fullscreen.svelte b/app/src/lib/components/Player/Fullscreen.svelte index b69a788c..f144579b 100644 --- a/app/src/lib/components/Player/Fullscreen.svelte +++ b/app/src/lib/components/Player/Fullscreen.svelte @@ -558,8 +558,6 @@ animation: marquee linear infinite forwards; animation-delay: 2s; animation-duration: 9s; - // animation-play-state: running; - // box-shadow: inset (-40px) 0 40px (-16px) transparent; } .marquee-text { @@ -603,6 +601,7 @@ overscroll-behavior: contain; height: inherit; -webkit-overflow-scrolling: touch; + background: inherit; } .immersive { @@ -618,30 +617,26 @@ backface-visibility: hidden; overflow: hidden; - // mask-composite: ; @media screen and (max-width: 720px) { position: fixed; z-index: 151; left: 0; top: 0; - // background-repeat: no-repeat !important; background-size: 50% 50% !important; - // top: 50%; } transform: scale(var(--scale)) translate3d(0, 0, 0); - transition: backdrop-filter cubic-bezier(0.895, 0.03, 0.685, 0.22) 1600ms - 800ms; + transition: backdrop-filter cubic-bezier(0.77, 0, 0.175, 1) 1600ms 800ms; transition-delay: 800ms; transition-property: background-color transform filter backdrop-filter; transition-duration: 1600ms; background-color: hsl(0deg 0% 0%); &.open { - // backdrop-filter: brightness(0.6) opacity(1) contrast(1) saturate(1.1) grayscale(0.3) sepia(0.2) url(1rem); background-color: hsl(0deg 0% 0% / 58.7%); &::after { - transition-delay: 800ms; + transition-delay: 1000ms; + transition-duration: 700ms; } } @@ -652,29 +647,24 @@ width: 100%; height: 100%; - // border-radius: 9999rem; z-index: 1; touch-action: none; overscroll-behavior: contain; perspective: 1000px; backface-visibility: hidden; - // overflow: hidden; will-change: opacity, top; transform: scale(var(--scale)) translate3d(0, 0, 0); - transition: backdrop-filter cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: backdrop-filter cubic-bezier(0.77, 0, 0.175, 1); transition-property: background-color, transform, filter, backdrop-filter; - transition-duration: 500ms; + transition-duration: 1000ms; transition-delay: 1000ms; @media screen and (max-width: 720px) { position: absolute; max-width: 100%; - // z-index: -1; left: 0; top: 0; - // background-repeat: no-repeat !important; background-size: 100vh !important; - // top: 50%; background-attachment: scroll; background-position: center; } @@ -683,9 +673,6 @@ box-shadow: 0 0 100px -20px #000000d5 inset, 0 0 50rem 5px #000000c9; filter: brightness(0.9) opacity(1) contrast(1) saturate(1.7) grayscale(0.35) sepia(0.2) blur(var(--blur, 4px)); - - // mask-image: url(#blur); - // mask-size: 100% 100%; } > img { diff --git a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte index fcb44c6e..669ccb3b 100644 --- a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte +++ b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte @@ -79,7 +79,7 @@ {#if hasFocus}

{ diff --git a/app/src/lib/components/PlaylistPopper/List.svelte b/app/src/lib/components/PlaylistPopper/List.svelte index 16507ccb..11fee20c 100644 --- a/app/src/lib/components/PlaylistPopper/List.svelte +++ b/app/src/lib/components/PlaylistPopper/List.svelte @@ -37,9 +37,8 @@ flex-direction: row; padding: 0.8rem; gap: 0.8rem; - backdrop-filter: brightness(1.5); - border-radius: $lg-radius; - border: rgb(163 163 163 / 21.2%) solid 1px; + margin-bottom: 0.125rem; + margin-top: 0rem; :first-of-type { margin: 0 auto; diff --git a/app/src/lib/components/PlaylistPopper/Playlist.svelte b/app/src/lib/components/PlaylistPopper/Playlist.svelte index 54ee6eb4..63daaf4b 100644 --- a/app/src/lib/components/PlaylistPopper/Playlist.svelte +++ b/app/src/lib/components/PlaylistPopper/Playlist.svelte @@ -48,8 +48,7 @@ flex-direction: row; padding: 0.5rem; gap: 0.8rem; - backdrop-filter: brightness(1.5); - border-radius: $lg-radius; + border-radius: $sm-radius; // backdrop-filter: brightness(2);backdrop-filter transition: backdrop-filter linear 50ms; border: rgb(163 163 163 / 21.2%) solid 1px; diff --git a/app/src/lib/stores/list/sessionList.ts b/app/src/lib/stores/list/sessionList.ts index 0f2a78b4..dc0da65d 100644 --- a/app/src/lib/stores/list/sessionList.ts +++ b/app/src/lib/stores/list/sessionList.ts @@ -29,6 +29,7 @@ import { objectKeys } from "$lib/utils/collections/objects"; import { Mutex } from "$lib/utils/sync"; import { tick } from "svelte"; // eslint-disable-next-line import/no-cycle +import { syncTabs } from "$lib/tabSync"; import { derived } from "svelte/store"; import type { RelatedEndpointResponse } from "../../../routes/(app)/api/v1/related.json/+server"; import { groupSession } from "../sessions"; @@ -246,7 +247,7 @@ export class ListService { const nextTrack = this._$.value.mix[nextIndex]; await getSrc(nextTrack?.videoId, nextTrack?.playlistId, undefined, true); // await this.prefetchTrackAtIndex(nextIndex + 1); - + syncTabs.updatePosition(nextIndex); toggle(); return; } @@ -290,6 +291,7 @@ export class ListService { groupSession.updateGuestContinuation(state); } + syncTabs.updateSessionList(state); if (autoPlay) { const src = await getSrc(state.mix[key].videoId); @@ -389,6 +391,8 @@ export class ListService { mix: ["append", data.results], }, ); + syncTabs.updateSessionList(state); + if (groupSession?.initialized && groupSession?.hasActiveSession) { groupSession.expAutoMix(state); } @@ -474,6 +478,7 @@ export class ListService { await this.updatePosition(playbackIndex); Logger.mark("wow"); await tick(); + syncTabs.updateSessionList(state); if (groupSession?.initialized && groupSession?.hasActiveSession) { groupSession.expAutoMix(state); } @@ -525,6 +530,7 @@ export class ListService { true, ) .then(() => { + syncTabs.updatePosition(currentPosition + 1); return this.updatePosition("next"); }) .then((data) => { @@ -584,6 +590,8 @@ export class ListService { if (update) { updateGroupPosition("->", position); } + + syncTabs.updatePosition(position); } } @@ -703,6 +711,8 @@ export class ListService { undefined, true, ); + + syncTabs.updatePosition(position); } public removeTrack(index: number) { @@ -711,6 +721,7 @@ export class ListService { ...u, mix: [...u.mix.slice(0, index), ...u.mix.slice(index + 1)], })); + syncTabs.updateSessionList(this._$.value); } public async setMix(mix: Item[], type?: "auto" | "playlist" | "local") { @@ -734,6 +745,7 @@ export class ListService { groupSession.client, ); } + syncTabs.updateSessionList(guard); } public async setTrackWillPlayNext(item: Item, key: number) { @@ -794,6 +806,7 @@ export class ListService { if (groupSession?.initialized && groupSession?.hasActiveSession) { groupSession.updateGuestTrackQueue(state); } + syncTabs.updateSessionList(state); }, ); } @@ -991,7 +1004,9 @@ const currentTrack = derived( /** * A derived store for read-only access to the current position */ -const queuePosition = derived(SessionListService, ($list) => $list.position); +const queuePosition = derived(SessionListService, ($list, set) => { + set($list.position); +}); const related = (() => { const prevPosition = undefined; diff --git a/app/src/lib/tabSync.ts b/app/src/lib/tabSync.ts new file mode 100644 index 00000000..9786ec9a --- /dev/null +++ b/app/src/lib/tabSync.ts @@ -0,0 +1,241 @@ +import SessionListService from "$stores/list/sessionList"; +import type { ISessionListProvider } from "./stores"; + +class TypedBroadcastChannel< + T extends Record>, +> extends BroadcastChannel { + constructor(name: string) { + super(name); + } + postMessage(message: T) { + super.postMessage(message); + } + onmessage: ((message: K) => void) | null = null; + + override addEventListener< + K extends keyof BroadcastChannelEventMap, + E extends keyof T, + >( + event: K, + callback: + | ((message: MessageEvent) => void) + | EventListenerObject, + options?: boolean | AddEventListenerOptions, + ): void { + super.addEventListener("message", callback as never, options); + } +} + +interface BaseSyncMessage { + id: string; + timestamp: number; + type: string; + kind: "request" | "response"; +} + +interface ConnectionRequest extends BaseSyncMessage { + type: "connect"; +} + +interface ConnectionResponse extends BaseSyncMessage { + type: "connect"; + sessionList: ISessionListProvider; + requestId: string; +} + +interface UpdatePositionRequest extends BaseSyncMessage { + type: "updatePosition"; + position: number; +} + +interface UpdatePositionResponse extends BaseSyncMessage { + type: "updatePosition"; + position: number; + requestId: string; +} + +interface DisconnectRequest extends BaseSyncMessage { + type: "disconnect"; +} + +interface DisconnectResponse extends BaseSyncMessage { + type: "disconnect"; + requestId: string; +} + +interface UpdateSessionListRequest extends BaseSyncMessage { + type: "updateSessionList"; + sessionList: ISessionListProvider; +} + +interface UpdateSessionListResponse extends BaseSyncMessage { + type: "updateSessionList"; + requestId: string; +} + +type SyncEvents = { + connect: { + request: ConnectionRequest; + response: ConnectionResponse; + }; + updatePosition: { + request: UpdatePositionRequest; + response: UpdatePositionResponse; + }; + disconnect: { + request: DisconnectRequest; + response: DisconnectResponse; + }; + updateSessionList: { + request: UpdateSessionListRequest; + response: UpdateSessionListResponse; + }; +}; + +class Protocol { + private readonly handlers: Map< + keyof SyncEvents, + ((message: SyncEvents[keyof SyncEvents]["response"]) => void)[] + > = new Map(); + private readonly channel: TypedBroadcastChannel; + constructor(private id: string) { + this.channel = new TypedBroadcastChannel("syncTab"); + + this.channel.addEventListener("message", (event) => { + if (event.data?.id == this.id) return; + this.onMessage(event.data as never); + }); + } + + private onMessage = (message: SyncEvents[keyof SyncEvents]["response"]) => { + const handlers = this.handlers.get(message.type) || []; + for (const handler of handlers) { + handler(message); + } + }; + + public register = ( + event: K, + callback: (message: SyncEvents[K]["response"]) => void, + ) => { + const existing = this.handlers.get(event) || []; + existing.push(callback); + this.handlers.set(event, existing); + return () => { + this.handlers + .get(event) + ?.splice(this.handlers.get(event)?.indexOf(callback) || 0, 1); + }; + }; + + public send( + event: K, + message: SyncEvents[K]["response"], + ): void; + public send( + event: K, + message: SyncEvents[K]["request"], + ) { + this.channel.postMessage({ ...message, id: this.id }); + } + + dispose() { + this.channel.close(); + this.handlers.clear(); + } +} + +class SyncTabs { + private readonly protocol: Protocol; + constructor(private readonly id: string) { + this.protocol = new Protocol(this.id); + + this.protocol.register("connect", (message) => { + console.log("connect", message); + if (message.kind === "response" && message.requestId === this.id) { + SessionListService.$.set(message.sessionList); + } else if (message.kind === "request") { + this.protocol.send("connect", { + id: this.id, + timestamp: Date.now(), + type: "connect", + kind: "response", + requestId: message.id, + sessionList: SessionListService.$.value, + }); + } + }); + + this.protocol.register("updatePosition", (message) => { + if (message.kind === "request") { + SessionListService.updatePosition(message.position); + } + }); + + this.protocol.register("disconnect", (message) => { + console.log("disconnect", message); + }); + + this.protocol.register("updateSessionList", (message) => { + console.log("updateSessionList", message); + if (message.kind === "request" && message.requestId === this.id) { + SessionListService.$.set( + (message as unknown as UpdateSessionListRequest).sessionList, + ); + } else if (message.kind === "request") { + this.protocol.send("updateSessionList", { + id: this.id, + timestamp: Date.now(), + type: "updateSessionList", + kind: "response", + requestId: message.id, + sessionList: SessionListService.$.value, + }); + } + }); + } + + public connect = () => { + this.protocol.send("connect", { + id: this.id, + timestamp: Date.now(), + type: "connect", + kind: "request", + }); + }; + + public updatePosition = (position: number) => { + this.protocol.send("updatePosition", { + id: this.id, + timestamp: Date.now(), + type: "updatePosition", + position, + kind: "request", + }); + }; + + public disconnect = () => { + this.protocol.send("disconnect", { + id: this.id, + timestamp: Date.now(), + type: "disconnect", + kind: "request", + }); + }; + + public updateSessionList = (sessionList: ISessionListProvider) => { + this.protocol.send("updateSessionList", { + id: this.id, + timestamp: Date.now(), + type: "updateSessionList", + kind: "request", + sessionList, + }); + }; + + dispose() { + this.protocol.dispose(); + } +} + +export const syncTabs = new SyncTabs(crypto.randomUUID()); diff --git a/app/src/params/channel.ts b/app/src/params/channel.ts new file mode 100644 index 00000000..bd953301 --- /dev/null +++ b/app/src/params/channel.ts @@ -0,0 +1,5 @@ +import type { ParamMatcher } from "@sveltejs/kit"; + +export const match: ParamMatcher = (params) => { + return params === "artist" || params === "channel"; +}; diff --git a/app/src/routes/(app)/artist/[slug]/+page.server.ts b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/+page.server.ts similarity index 100% rename from app/src/routes/(app)/artist/[slug]/+page.server.ts rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/+page.server.ts diff --git a/app/src/routes/(app)/artist/[slug]/+page.svelte b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/+page.svelte similarity index 100% rename from app/src/routes/(app)/artist/[slug]/+page.svelte rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/+page.svelte diff --git a/app/src/routes/(app)/artist/[slug]/releases.json/+server.ts b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases.json/+server.ts similarity index 100% rename from app/src/routes/(app)/artist/[slug]/releases.json/+server.ts rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases.json/+server.ts diff --git a/app/src/routes/(app)/artist/[slug]/releases/+page.svelte b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/+page.svelte similarity index 100% rename from app/src/routes/(app)/artist/[slug]/releases/+page.svelte rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/+page.svelte diff --git a/app/src/routes/(app)/artist/[slug]/releases/+page.ts b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/+page.ts similarity index 100% rename from app/src/routes/(app)/artist/[slug]/releases/+page.ts rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/+page.ts diff --git a/app/src/routes/(app)/artist/[slug]/releases/_GridItem.svelte b/app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/_GridItem.svelte similarity index 100% rename from app/src/routes/(app)/artist/[slug]/releases/_GridItem.svelte rename to app/src/routes/(app)/[artistOrChannel=channel]/[slug]/releases/_GridItem.svelte diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index abc03c47..41d27ded 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -19,6 +19,7 @@ import { AudioPlayer } from "$lib/player"; import { groupSession, settings } from "$lib/stores"; import { currentTrack, queue } from "$lib/stores/list"; + import { syncTabs } from "$lib/tabSync.js"; import { Logger } from "$lib/utils"; import { skipFirstInvocation } from "$lib/utils/skipFirstInvocation.js"; import { SessionListService } from "$stores/list/sessionList"; @@ -98,7 +99,8 @@ $: if ( playbackUpdatesUrlHandler && - $settings["playback"]["Playback Updates URL"] !== undefined + $settings["playback"]["Playback Updates URL"] !== undefined && + $settings["playback"]["Playback Updates URL"] == true ) { setPlaybackUpdatesUrlHandler($fullscreenStore === "open"); } @@ -106,7 +108,7 @@ onMount(() => { try { playbackUpdatesUrlHandler = playbackURLStateUpdater( - $settings["playback"]["Playback Updates URL"] || false, + $settings["playback"]["Playback Updates URL"] == true || false, ); if ( $settings["playback"]["Remember Last Track"] && @@ -124,6 +126,7 @@ } catch (err) { Logger.err(err); } + syncTabs.connect(); }); let info: Record = {}; @@ -221,6 +224,7 @@ left: 0; background: var(--base-bg); font-size: 1.1rem; display: flex; flex-dire } .show-player { + will-change: initial; opacity: 1; transform: translate3d(0, 0, 0); } From 40b4703665e78e710997e3a00df987b891704577 Mon Sep 17 00:00:00 2001 From: snuffy <72365477+snuffyDev@users.noreply.github.com> Date: Sat, 16 Sep 2023 02:46:27 -0400 Subject: [PATCH 30/37] update README other stuff --- .env.EXAMPLE | 6 + .vscode/settings.json | 9 +- README.md | 66 ++- app/.env | 4 +- app/.svelte-kit/ambient.d.ts | 70 +-- app/src/lib/components/Carousel/index.scss | 13 +- app/src/lib/components/Chips/index.scss | 5 +- app/src/lib/components/Player/Controls.svelte | 5 + app/src/lib/components/Player/Player.svelte | 19 +- .../Player/ProgressBar/ProgressBar.svelte | 1 + app/src/lib/configs/dropdowns.config.ts | 1 + app/src/lib/player.ts | 62 +- app/src/lib/stores/list/index.ts | 1 - app/src/lib/stores/list/sessionList.ts | 9 +- app/src/lib/tabSync.ts | 547 +++++++++++------- app/src/lib/utils/workerTimeout.ts | 78 +++ app/src/lib/workers/timers/worker.ts | 64 ++ .../[watchOrListen=share]/+page.server.ts | 5 +- 18 files changed, 623 insertions(+), 342 deletions(-) create mode 100644 .env.EXAMPLE create mode 100644 app/src/lib/utils/workerTimeout.ts create mode 100644 app/src/lib/workers/timers/worker.ts diff --git a/.env.EXAMPLE b/.env.EXAMPLE new file mode 100644 index 00000000..a092885e --- /dev/null +++ b/.env.EXAMPLE @@ -0,0 +1,6 @@ +VITE_DOMAIN="beatbump.io" +VITE_SITE_URL="https://beatbump.io" +VITE_DONATION_URL="https://www.paypal.com/donate/?hosted_button_id=E6YRHKS2H2KP2" +ALLOW_IFRAME="false" +PUBLIC_ALLOW_THUMBNAIL_PROXY="false" +PORT=3000 diff --git a/.vscode/settings.json b/.vscode/settings.json index 4a040004..61a6e926 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -34,5 +34,12 @@ "**/.cloudflare": true, "**/.cloudflare/*": true, "build/**": true - } + }, + "diffEditor.codeLens": true, + "diffEditor.experimental.showMoves": true, + "explorer.fileNesting.enabled": true, + "explorer.fileNesting.patterns": { + "*.svelte": "+${capture}.css.scss.js.ts" + }, + "diffEditor.hideUnchangedRegions.enabled": true } diff --git a/README.md b/README.md index bade9dcb..d6548828 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ # Beatbump -A privacy-respecting alternative frontend for YouTube Music. Built with SvelteKit, official instance hosted with Cloudflare Workers. +A privacy-respecting alternative frontend for YouTube Music. Built with SvelteKit, official instance hosted with +Cloudflare Workers. > NOTE: Beatbump is going through a major rewrite, so errors, bugs, and other problems may happen at random. @@ -23,7 +24,8 @@ A privacy-respecting alternative frontend for YouTube Music. Built with SvelteKi ## Why Beatbump? -Beatbump is a fully-featured music listening experience, while helping to ease your privacy concerns associated with other platforms. +Beatbump is a fully-featured music listening experience, while helping to ease your privacy concerns associated with +other platforms. Some of Beatbump's features includes: @@ -39,6 +41,9 @@ Some of Beatbump's features includes: - Group Sessions - Achieved using a WebRTC [mesh](https://en.wikipedia.org/wiki/Mesh_networking) - Uses a custom wrapper around the YouTube Music API +- Minimizes requests made to YouTube/Google's servers + - Thumbails are proxied through Beatbump by default + - Audio proxying can be enabled within the user settings ...and so much more! @@ -51,23 +56,17 @@ Some of Beatbump's features includes: | `app` | Beatbump web app | | `packages/hls-proxy-rewriter` | Proxy server used for Beatbump's music playback (WIP) | - ## Instances > Service Uptime Monitoring: https://stats.uptimerobot.com/9PnmRfz6Gm -| Name | URL -| --- | --- | -| Beatbump (Official) | https://beatbump.ml | -| ~Vern (Clearnet) | https://bb.vern.cc/ | -| ~Vern (Onion) | http://bb.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion/ | -| ~Vern (I2P) | http://vern6inmbjzqpecx4kpkq5sln3cqqrfuxfzh4au3tpxbsfbwbnta.b32.i2p/ | -| Project Segfault (GeoDNS) | https://bb.projectsegfau.lt/ | -| Project Segfault (EU) | https://bb.eu.projectsegfau.lt/ | -| Project Segfault (US) | https://bb.us.projectsegfau.lt/ | -| Project Segfault (Tor) | http://beatbump.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion/ | -| btb.frail.duckdns.org (Clearnet) | https://btb.frail.duckdns.org/ | - +| Name | URL | +| -------------------------------- | ------------------------------------------------------------------------- | +| Beatbump (Official) | https://beatbump.ml | +| ~Vern (Clearnet) | https://bb.vern.cc/ | +| ~Vern (Onion) | http://bb.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion/ | +| ~Vern (I2P) | http://vern6inmbjzqpecx4kpkq5sln3cqqrfuxfzh4au3tpxbsfbwbnta.b32.i2p/ | +| btb.frail.duckdns.org (Clearnet) | https://btb.frail.duckdns.org/ | ## Donations @@ -81,30 +80,45 @@ _(Other ways to donate coming soon!)_ ## Docker -> Note: Still figuring out how to use Docker! Got a suggestion? Open an issue, thanks! +Beatbump is available as a Docker image: [DockerHub](https://hub.docker.com/r/snuffydev/beatbump) -[DockerHub](https://hub.docker.com/r/snuffydev/beatbump) +The pre-built image uses the following configuration: + +| Environment Variable | Default Value | Description | +| ------------------------------ | --------------------- | ----------------------------------------- | +| `PORT` | `3000` | Port to listen on | +| `ALLOW_IFRAME` | `false` | Allow the app to be embedded in an iframe | +| `PUBLIC_ALLOW_THUMBNAIL_PROXY` | `false` | Allow the thumbnail proxy to be used | +| `VITE_DOMAIN` | `beatbump.io` | The domain of the instance | +| `VITE_SITE_URL` | `https://beatbump.io` | The URL of the instance | ### docker-compose (production) -The quickest way to host a Beatbump instance is with [Docker](https://www.docker.com/get-started). Once you have it installed, you can run: + +The quickest way to host a Beatbump instance is with [Docker](https://www.docker.com/get-started). Once you have it +installed, you can run: ``` docker-compose up ``` -The app will now be accessible from `https://localhost:443 / http://localhost:3000`. +The app will now be accessible from `https://localhost:443 / http://localhost:3000`. -### docker-compose (development) +### Customizing your instance +In order to customize your Beatbump instance, you must build your own container. This process is very simple and only +requires a few extra steps. -(More details coming soon!) +1. Clone the repository +2. Rename the `.env.EXAMPLE` file (found at the root of the repository) to `.env` +3. Make any changes to the values of the environment variables -## Documentation - -You can find (temporary, incomplete, and in-progress) API documentation here: https://beatbump-docs.vercel.app/ - -> It's recommended (and appreciated) to host your own instance of Beatbump for public projects that want to use the data -- especially if you anticipate you will be making a large amount of requests. Thanks! +You can now run `docker-compose up` to start your instance. The app will now be accessible on the port specified in +`.env` (`3000` by default) ## Project Inspirations - [Invidious](https://github.com/iv-org/invidious) - a privacy focused alternative YouTube front end. + +## License + +Beatbump is licensed under the [AGPLv3](LICENSE). diff --git a/app/.env b/app/.env index 439e3112..ce620e0b 100644 --- a/app/.env +++ b/app/.env @@ -1,6 +1,6 @@ VITE_DOMAIN="beatbump.io" VITE_SITE_URL="https://beatbump.io" VITE_DONATION_URL="https://www.paypal.com/donate/?hosted_button_id=E6YRHKS2H2KP2" -ALLOW_IFRAME=false -PUBLIC_ALLOW_THUMBNAIL_PROXY=false +ALLOW_IFRAME=true +PUBLIC_ALLOW_THUMBNAIL_PROXY=true PORT=3000 \ No newline at end of file diff --git a/app/.svelte-kit/ambient.d.ts b/app/.svelte-kit/ambient.d.ts index 6029402d..65de34c4 100644 --- a/app/.svelte-kit/ambient.d.ts +++ b/app/.svelte-kit/ambient.d.ts @@ -34,25 +34,15 @@ declare module '$env/static/private' { export const SHELL: string; export const npm_command: string; export const SESSION_MANAGER: string; - export const USER_ZDOTDIR: string; export const npm_config_userconfig: string; export const COLORTERM: string; export const npm_config_cache: string; - export const LESS: string; export const XDG_MENU_PREFIX: string; export const TERM_PROGRAM_VERSION: string; - export const FNM_ARCH: string; - export const _P9K_TTY: string; export const NODE: string; - export const LESS_TERMCAP_se: string; - export const LESS_TERMCAP_so: string; export const LC_ADDRESS: string; export const LC_NAME: string; export const SSH_AUTH_SOCK: string; - export const NODE_EXTRA_CA_CERTS: string; - export const FLYCTL_INSTALL: string; - export const P9K_TTY: string; - export const FNM_NODE_DIST_MIRROR: string; export const COLOR: string; export const npm_config_local_prefix: string; export const XMODIFIERS: string; @@ -66,27 +56,20 @@ declare module '$env/static/private' { export const LOGNAME: string; export const QT_QPA_PLATFORMTHEME: string; export const XDG_SESSION_TYPE: string; - export const PNPM_HOME: string; export const npm_config_init_module: string; export const SYSTEMD_EXEC_PID: string; - export const _: string; export const XAUTHORITY: string; - export const LS_OPTIONS: string; export const VSCODE_GIT_ASKPASS_NODE: string; export const GJS_DEBUG_TOPICS: string; export const WINDOWPATH: string; export const MOTD_SHOWN: string; - export const VSCODE_INJECTION: string; export const GDM_LANG: string; export const HOME: string; export const USERNAME: string; export const LC_PAPER: string; export const LANG: string; - export const FNM_COREPACK_ENABLED: string; - export const LS_COLORS: string; export const XDG_CURRENT_DESKTOP: string; export const npm_package_version: string; - export const DENO_INSTALL: string; export const GIT_ASKPASS: string; export const INVOCATION_ID: string; export const MANAGERPID: string; @@ -95,38 +78,26 @@ declare module '$env/static/private' { export const npm_lifecycle_script: string; export const GJS_DEBUG_OUTPUT: string; export const VSCODE_GIT_ASKPASS_EXTRA_ARGS: string; + export const npm_config_npm_version: string; export const XDG_SESSION_CLASS: string; export const TERM: string; export const LC_IDENTIFICATION: string; export const npm_package_name: string; - export const LESS_TERMCAP_mb: string; - export const LESS_TERMCAP_me: string; - export const LESS_TERMCAP_md: string; - export const VSCODE_NONCE: string; export const npm_config_prefix: string; - export const ZDOTDIR: string; export const USER: string; export const VSCODE_GIT_IPC_HANDLE: string; export const DISPLAY: string; export const npm_lifecycle_event: string; - export const LESS_TERMCAP_ue: string; export const SHLVL: string; - export const LESS_TERMCAP_us: string; export const LC_TELEPHONE: string; export const QT_IM_MODULE: string; - export const _P9K_SSH_TTY: string; export const LC_MEASUREMENT: string; - export const FNM_VERSION_FILE_STRATEGY: string; export const npm_config_user_agent: string; export const npm_execpath: string; export const XDG_RUNTIME_DIR: string; - export const FNM_RESOLVE_ENGINES: string; - export const NODE_PATH: string; export const DEBUGINFOD_URLS: string; export const npm_package_json: string; export const LC_TIME: string; - export const BUN_INSTALL: string; - export const P9K_SSH: string; export const npm_config_legacy_peer_deps: string; export const VSCODE_GIT_ASKPASS_MAIN: string; export const QT_AUTO_SCREEN_SCALE_FACTOR: string; @@ -143,16 +114,14 @@ declare module '$env/static/private' { export const DBUS_SESSION_BUS_ADDRESS: string; export const npm_config_global_prefix: string; export const MAIL: string; - export const FNM_DIR: string; - export const FNM_MULTISHELL_PATH: string; export const GIO_LAUNCHED_DESKTOP_FILE_PID: string; export const npm_node_execpath: string; export const npm_config_engine_strict: string; export const GIO_LAUNCHED_DESKTOP_FILE: string; - export const FNM_LOGLEVEL: string; export const LC_NUMERIC: string; export const OLDPWD: string; export const TERM_PROGRAM: string; + export const _: string; export const NODE_ENV: string; } @@ -191,25 +160,15 @@ declare module '$env/dynamic/private' { SHELL: string; npm_command: string; SESSION_MANAGER: string; - USER_ZDOTDIR: string; npm_config_userconfig: string; COLORTERM: string; npm_config_cache: string; - LESS: string; XDG_MENU_PREFIX: string; TERM_PROGRAM_VERSION: string; - FNM_ARCH: string; - _P9K_TTY: string; NODE: string; - LESS_TERMCAP_se: string; - LESS_TERMCAP_so: string; LC_ADDRESS: string; LC_NAME: string; SSH_AUTH_SOCK: string; - NODE_EXTRA_CA_CERTS: string; - FLYCTL_INSTALL: string; - P9K_TTY: string; - FNM_NODE_DIST_MIRROR: string; COLOR: string; npm_config_local_prefix: string; XMODIFIERS: string; @@ -223,27 +182,20 @@ declare module '$env/dynamic/private' { LOGNAME: string; QT_QPA_PLATFORMTHEME: string; XDG_SESSION_TYPE: string; - PNPM_HOME: string; npm_config_init_module: string; SYSTEMD_EXEC_PID: string; - _: string; XAUTHORITY: string; - LS_OPTIONS: string; VSCODE_GIT_ASKPASS_NODE: string; GJS_DEBUG_TOPICS: string; WINDOWPATH: string; MOTD_SHOWN: string; - VSCODE_INJECTION: string; GDM_LANG: string; HOME: string; USERNAME: string; LC_PAPER: string; LANG: string; - FNM_COREPACK_ENABLED: string; - LS_COLORS: string; XDG_CURRENT_DESKTOP: string; npm_package_version: string; - DENO_INSTALL: string; GIT_ASKPASS: string; INVOCATION_ID: string; MANAGERPID: string; @@ -252,38 +204,26 @@ declare module '$env/dynamic/private' { npm_lifecycle_script: string; GJS_DEBUG_OUTPUT: string; VSCODE_GIT_ASKPASS_EXTRA_ARGS: string; + npm_config_npm_version: string; XDG_SESSION_CLASS: string; TERM: string; LC_IDENTIFICATION: string; npm_package_name: string; - LESS_TERMCAP_mb: string; - LESS_TERMCAP_me: string; - LESS_TERMCAP_md: string; - VSCODE_NONCE: string; npm_config_prefix: string; - ZDOTDIR: string; USER: string; VSCODE_GIT_IPC_HANDLE: string; DISPLAY: string; npm_lifecycle_event: string; - LESS_TERMCAP_ue: string; SHLVL: string; - LESS_TERMCAP_us: string; LC_TELEPHONE: string; QT_IM_MODULE: string; - _P9K_SSH_TTY: string; LC_MEASUREMENT: string; - FNM_VERSION_FILE_STRATEGY: string; npm_config_user_agent: string; npm_execpath: string; XDG_RUNTIME_DIR: string; - FNM_RESOLVE_ENGINES: string; - NODE_PATH: string; DEBUGINFOD_URLS: string; npm_package_json: string; LC_TIME: string; - BUN_INSTALL: string; - P9K_SSH: string; npm_config_legacy_peer_deps: string; VSCODE_GIT_ASKPASS_MAIN: string; QT_AUTO_SCREEN_SCALE_FACTOR: string; @@ -300,16 +240,14 @@ declare module '$env/dynamic/private' { DBUS_SESSION_BUS_ADDRESS: string; npm_config_global_prefix: string; MAIL: string; - FNM_DIR: string; - FNM_MULTISHELL_PATH: string; GIO_LAUNCHED_DESKTOP_FILE_PID: string; npm_node_execpath: string; npm_config_engine_strict: string; GIO_LAUNCHED_DESKTOP_FILE: string; - FNM_LOGLEVEL: string; LC_NUMERIC: string; OLDPWD: string; TERM_PROGRAM: string; + _: string; NODE_ENV: string; [key: `PUBLIC_${string}`]: undefined; [key: string]: string | undefined; diff --git a/app/src/lib/components/Carousel/index.scss b/app/src/lib/components/Carousel/index.scss index 0adbf368..b9f05dc9 100644 --- a/app/src/lib/components/Carousel/index.scss +++ b/app/src/lib/components/Carousel/index.scss @@ -30,12 +30,13 @@ bottom: 0; pointer-events: all; cursor: pointer; - background-color: hsl(0deg 0% 88% / 95%); + background-color: hsla(0, 0%, 95%, 0.715); border: rgba(0, 0, 0, 0.171) 0.33px solid; - transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1); - box-shadow: 0 0 8px -4px hsl(0deg 0% 0% / 20%); + transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1); + transition-property: background-color, box-shadow; + box-shadow: 0 0 8px -4px hsl(0deg 0% 0% / 20%), inset 0 0 8px -4px hsl(0deg 0% 0% / 20%); height: 3rem; - color: hsla(0, 0%, 18%, 1); + color: rgb(3, 3, 3); border-radius: 50%; opacity: 1; padding: 0; @@ -48,8 +49,8 @@ isolation: isolate; &:hover { background-color: rgb(233, 233, 233); - box-shadow: -1px -1px 8px -12px hsl(0deg 0% 0% / 20%) inset, - 1px 1px 10px -6px hsl(0deg 0% 0% / 10%) inset; + box-shadow: -1px -1px 8px -4px hsla(0, 0%, 0%, .1) inset, + 1px 1px 10px -2px hsl(0deg 0% 0% / 20%) inset; color: #111111e0; } diff --git a/app/src/lib/components/Chips/index.scss b/app/src/lib/components/Chips/index.scss index d0c9ca4b..63822bc9 100644 --- a/app/src/lib/components/Chips/index.scss +++ b/app/src/lib/components/Chips/index.scss @@ -2,9 +2,10 @@ display: flex; flex-direction: row; gap: 0.5em; - margin-bottom: 0.625em; + margin-top: 0.25em; + margin-bottom: 1.4em; overflow-x: auto; - padding: 0.325em 0 0.125em 0; + padding: 0em 0 0.125em 0; scroll-behavior: smooth; font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", diff --git a/app/src/lib/components/Player/Controls.svelte b/app/src/lib/components/Player/Controls.svelte index 63097dc4..c9e1b6ae 100644 --- a/app/src/lib/components/Player/Controls.svelte +++ b/app/src/lib/components/Player/Controls.svelte @@ -63,6 +63,7 @@
+
+
+
{ @@ -127,6 +130,7 @@ {/if}
+
+
{ + messenger.listen("player", () => { AudioPlayer.play(); }); - function handleImageError( - event: Event & { currentTarget: EventTarget & HTMLElement }, - ) { + function handleImageError(event: Event) { (event.target as HTMLImageElement).src = IMAGE_NOT_FOUND; } @@ -138,7 +136,7 @@ const shortcut = { Comma: () => { - AudioPlayer.previous(); + SessionListService.previous(); }, Period: () => { SessionListService.next(); @@ -186,7 +184,7 @@ > {$currentTrack?.title} {$currentTrack?.artistInfo?.artist[0]?.text}{$currentTrack?.artistInfo?.artist?.[0]?.text}
{:else} @@ -266,9 +264,14 @@ {}} + on:click|capture|stopPropagation={() => { + // no empty + }} on:input|capture|stopPropagation={(e) => { - let linear = e.target.value / 1; + let linear = + (e.target instanceof HTMLInputElement + ? e.target.valueAsNumber + : volume) / 1; let sqrt = Math.pow(linear, 1.2); AudioPlayer.setVolume(sqrt); }} diff --git a/app/src/lib/components/Player/ProgressBar/ProgressBar.svelte b/app/src/lib/components/Player/ProgressBar/ProgressBar.svelte index 921212e9..afb445a1 100644 --- a/app/src/lib/components/Player/ProgressBar/ProgressBar.svelte +++ b/app/src/lib/components/Player/ProgressBar/ProgressBar.svelte @@ -53,6 +53,7 @@ {format($currentTimeStore)}
+
{ if ("mediaSession" in navigator) { navigator.mediaSession.setPositionState({ @@ -90,13 +92,11 @@ function metaDataHandler(sessionList: ISessionListProvider) { } } -// eslint-disable-next-line import/no-unused-modules export const updateGroupState = (opts: { client: string; state: ConnectionState; }): void => groupSession.sendGroupState(opts); -// eslint-disable-next-line import/no-unused-modules export const updateGroupPosition = ( dir: "<-" | "->" | undefined, position: number, @@ -104,7 +104,7 @@ export const updateGroupPosition = ( groupSession.send( "PATCH", "state.update.position", - { dir, position } as unknown as JSON, + { dir, position } as never, groupSession.client, ); @@ -221,6 +221,7 @@ class AudioPlayerImpl extends EventEmitter { private _srcStore = new WritableStore(undefined); private _paused = writable(true); private _progress = tweened(0); + private _leechInterval: ReturnType | null = null; private _taskQueue: [ name: keyof AudioPlayerImpl, args: [...rest: unknown[]], @@ -350,12 +351,24 @@ class AudioPlayerImpl extends EventEmitter { } public pause() { - if (!this.player) { - this.addTaskToTaskQueue("pause"); + syncTabs.playback({ + state: "pause", + currentTime: this.currentTime, + duration: this.duration, + }); + if (this._leechInterval) { + this._leechInterval.clear()?.then(() => { + this._leechInterval = null; + }); return; + } else { + if (!this.player) { + this.addTaskToTaskQueue("pause"); + return; + } + this.paused.set(true); + this.player.pause(); } - this.paused.set(true); - this.player.pause(); } public play() { @@ -364,6 +377,11 @@ class AudioPlayerImpl extends EventEmitter { this.addTaskToTaskQueue("play"); return; } + syncTabs.playback({ + state: "play", + currentTime: this.currentTime, + duration: this.duration, + }); if ( groupSession.initialized === true && groupSession.hasActiveSession === true @@ -401,6 +419,18 @@ class AudioPlayerImpl extends EventEmitter { this.nextSrc.stale = false; } + /** Used when sync'ing a 'leech' tab */ + public async fakePlay(currentTime: number, duration: number) { + if (this._leechInterval) await this._leechInterval.clear(); + this._paused.set(false); + this._currentTimeStore.set(currentTime); + this._durationStore.set(duration); + + this._leechInterval = setWorkerInterval(() => { + this._currentTimeStore.set(this._currentTimeStore.value + 1); + }, 1000); + } + public updateSrc({ url }: { url: string }) { if (url === undefined) return; @@ -492,6 +522,22 @@ class AudioPlayerImpl extends EventEmitter { groupSession.resetAllCanPlay(); this.setStaleTimeout(); + + this._currentTimeStore.set(this.player.currentTime); + + const duration = isAppleMobileDevice + ? this.player.duration / 2 + : this.player.duration; + this._durationStore.set(duration); + + if (syncTabs.role === "host") { + syncTabs.updatePosition(SessionListService.position); + syncTabs.playback({ + state: "play", + currentTime: this.currentTime, + duration: this.duration, + }); + } }); this.onEvent("play", () => { diff --git a/app/src/lib/stores/list/index.ts b/app/src/lib/stores/list/index.ts index f8b2ef5b..df293d2a 100644 --- a/app/src/lib/stores/list/index.ts +++ b/app/src/lib/stores/list/index.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-cycle export { currentTrack, default as default, diff --git a/app/src/lib/stores/list/sessionList.ts b/app/src/lib/stores/list/sessionList.ts index dc0da65d..7d53dd23 100644 --- a/app/src/lib/stores/list/sessionList.ts +++ b/app/src/lib/stores/list/sessionList.ts @@ -1004,9 +1004,12 @@ const currentTrack = derived( /** * A derived store for read-only access to the current position */ -const queuePosition = derived(SessionListService, ($list, set) => { - set($list.position); -}); +const queuePosition = derived( + SessionListService, + ($list, set) => { + set($list.position); + }, +); const related = (() => { const prevPosition = undefined; diff --git a/app/src/lib/tabSync.ts b/app/src/lib/tabSync.ts index 9786ec9a..c16530a9 100644 --- a/app/src/lib/tabSync.ts +++ b/app/src/lib/tabSync.ts @@ -1,241 +1,352 @@ +import { browser } from "$app/environment"; import SessionListService from "$stores/list/sessionList"; +import { AudioPlayer } from "./player"; import type { ISessionListProvider } from "./stores"; -class TypedBroadcastChannel< - T extends Record>, -> extends BroadcastChannel { - constructor(name: string) { - super(name); +const _syncTabs = (() => { + if (!browser) return; + + class TypedBroadcastChannel< + T extends Record< + string, + Record<"request" | "response" | "notification", any> + >, + > extends BroadcastChannel { + constructor(name: string) { + super(name); + } + postMessage(message: T) { + super.postMessage(message); + } + onmessage: ((message: K) => void) | null = null; + + override addEventListener< + K extends keyof BroadcastChannelEventMap, + E extends keyof T, + >( + event: K, + callback: + | ((message: MessageEvent) => void) + | EventListenerObject, + options?: boolean | AddEventListenerOptions, + ): void { + super.addEventListener("message", callback as never, options); + } } - postMessage(message: T) { - super.postMessage(message); + + interface BaseSyncMessage { + id: string; + timestamp: number; + type: string; + kind: "request" | "response" | "notification"; } - onmessage: ((message: K) => void) | null = null; - - override addEventListener< - K extends keyof BroadcastChannelEventMap, - E extends keyof T, - >( - event: K, - callback: - | ((message: MessageEvent) => void) - | EventListenerObject, - options?: boolean | AddEventListenerOptions, - ): void { - super.addEventListener("message", callback as never, options); + + interface ConnectionRequest extends BaseSyncMessage { + type: "connect"; } -} - -interface BaseSyncMessage { - id: string; - timestamp: number; - type: string; - kind: "request" | "response"; -} - -interface ConnectionRequest extends BaseSyncMessage { - type: "connect"; -} - -interface ConnectionResponse extends BaseSyncMessage { - type: "connect"; - sessionList: ISessionListProvider; - requestId: string; -} - -interface UpdatePositionRequest extends BaseSyncMessage { - type: "updatePosition"; - position: number; -} - -interface UpdatePositionResponse extends BaseSyncMessage { - type: "updatePosition"; - position: number; - requestId: string; -} - -interface DisconnectRequest extends BaseSyncMessage { - type: "disconnect"; -} - -interface DisconnectResponse extends BaseSyncMessage { - type: "disconnect"; - requestId: string; -} - -interface UpdateSessionListRequest extends BaseSyncMessage { - type: "updateSessionList"; - sessionList: ISessionListProvider; -} - -interface UpdateSessionListResponse extends BaseSyncMessage { - type: "updateSessionList"; - requestId: string; -} - -type SyncEvents = { - connect: { - request: ConnectionRequest; - response: ConnectionResponse; - }; - updatePosition: { - request: UpdatePositionRequest; - response: UpdatePositionResponse; - }; - disconnect: { - request: DisconnectRequest; - response: DisconnectResponse; - }; - updateSessionList: { - request: UpdateSessionListRequest; - response: UpdateSessionListResponse; - }; -}; - -class Protocol { - private readonly handlers: Map< - keyof SyncEvents, - ((message: SyncEvents[keyof SyncEvents]["response"]) => void)[] - > = new Map(); - private readonly channel: TypedBroadcastChannel; - constructor(private id: string) { - this.channel = new TypedBroadcastChannel("syncTab"); - - this.channel.addEventListener("message", (event) => { - if (event.data?.id == this.id) return; - this.onMessage(event.data as never); - }); + + interface ConnectionResponse extends BaseSyncMessage { + type: "connect"; + sessionList: ISessionListProvider; + requestId: string; + connections: number; + role: "host" | "leech"; } - private onMessage = (message: SyncEvents[keyof SyncEvents]["response"]) => { - const handlers = this.handlers.get(message.type) || []; - for (const handler of handlers) { - handler(message); - } - }; + interface UpdatePositionRequest extends BaseSyncMessage { + type: "updatePosition"; + position: number; + } - public register = ( - event: K, - callback: (message: SyncEvents[K]["response"]) => void, - ) => { - const existing = this.handlers.get(event) || []; - existing.push(callback); - this.handlers.set(event, existing); - return () => { - this.handlers - .get(event) - ?.splice(this.handlers.get(event)?.indexOf(callback) || 0, 1); - }; - }; + interface UpdatePositionResponse extends BaseSyncMessage { + type: "updatePosition"; + position: number; + requestId: string; + } - public send( - event: K, - message: SyncEvents[K]["response"], - ): void; - public send( - event: K, - message: SyncEvents[K]["request"], - ) { - this.channel.postMessage({ ...message, id: this.id }); + interface DisconnectRequest extends BaseSyncMessage { + type: "disconnect"; } - dispose() { - this.channel.close(); - this.handlers.clear(); + interface DisconnectResponse extends BaseSyncMessage { + type: "disconnect"; + requestId: string; } -} - -class SyncTabs { - private readonly protocol: Protocol; - constructor(private readonly id: string) { - this.protocol = new Protocol(this.id); - - this.protocol.register("connect", (message) => { - console.log("connect", message); - if (message.kind === "response" && message.requestId === this.id) { - SessionListService.$.set(message.sessionList); - } else if (message.kind === "request") { - this.protocol.send("connect", { - id: this.id, - timestamp: Date.now(), - type: "connect", - kind: "response", - requestId: message.id, - sessionList: SessionListService.$.value, - }); - } - }); - this.protocol.register("updatePosition", (message) => { - if (message.kind === "request") { - SessionListService.updatePosition(message.position); - } - }); - - this.protocol.register("disconnect", (message) => { - console.log("disconnect", message); - }); - - this.protocol.register("updateSessionList", (message) => { - console.log("updateSessionList", message); - if (message.kind === "request" && message.requestId === this.id) { - SessionListService.$.set( - (message as unknown as UpdateSessionListRequest).sessionList, - ); - } else if (message.kind === "request") { - this.protocol.send("updateSessionList", { - id: this.id, - timestamp: Date.now(), - type: "updateSessionList", - kind: "response", - requestId: message.id, - sessionList: SessionListService.$.value, - }); - } - }); + interface UpdateSessionListRequest extends BaseSyncMessage { + type: "updateSessionList"; + sessionList: ISessionListProvider; } - public connect = () => { - this.protocol.send("connect", { - id: this.id, - timestamp: Date.now(), - type: "connect", - kind: "request", - }); - }; + interface UpdateSessionListResponse extends BaseSyncMessage { + type: "updateSessionList"; + requestId: string; + } - public updatePosition = (position: number) => { - this.protocol.send("updatePosition", { - id: this.id, - timestamp: Date.now(), - type: "updatePosition", - position, - kind: "request", - }); - }; + interface PlaybackRequest extends BaseSyncMessage { + type: "playback"; + kind: "notification"; + state: "play" | "pause"; + duration: number; + currentTime: number; + } - public disconnect = () => { - this.protocol.send("disconnect", { - id: this.id, - timestamp: Date.now(), - type: "disconnect", - kind: "request", - }); + type SyncEvents = { + connect: { + notification: never; + request: ConnectionRequest; + response: ConnectionResponse; + }; + updatePosition: { + notification: never; + request: UpdatePositionRequest; + response: UpdatePositionResponse; + }; + disconnect: { + notification: never; + request: DisconnectRequest; + response: DisconnectResponse; + }; + updateSessionList: { + notification: never; + request: UpdateSessionListRequest; + response: UpdateSessionListResponse; + }; + playback: { + notification: PlaybackRequest; + response: PlaybackRequest; + request: PlaybackRequest; + }; }; - public updateSessionList = (sessionList: ISessionListProvider) => { - this.protocol.send("updateSessionList", { - id: this.id, - timestamp: Date.now(), - type: "updateSessionList", - kind: "request", - sessionList, - }); - }; + class Protocol { + private readonly handlers: Map< + keyof SyncEvents, + (( + message: SyncEvents[keyof SyncEvents]["notification"] extends never + ? SyncEvents[keyof SyncEvents]["response"] + : SyncEvents[keyof SyncEvents]["notification"], + ) => void)[] + > = new Map(); + private readonly channel: TypedBroadcastChannel; + constructor(private id: string) { + this.channel = new TypedBroadcastChannel("syncTab"); + + this.channel.addEventListener("message", (event) => { + if (event.data?.id == this.id) return; + this.onMessage(event.data as never); + }); + } + + private onMessage = ( + message: SyncEvents[keyof SyncEvents][keyof SyncEvents[keyof SyncEvents]], + ) => { + const handlers = this.handlers.get(message.type) || []; + for (const handler of handlers) { + handler(message as never); + } + }; + + public register( + event: K, + callback: ( + message: SyncEvents[K]["notification"] extends undefined + ? SyncEvents[K]["response"] + : SyncEvents[K]["notification"], + ) => void, + ): () => void; + public register( + event: K, + callback: ( + message: SyncEvents[K]["response"] | SyncEvents[K]["notification"], + ) => void, + ): () => void { + const existing = this.handlers.get(event) || []; + existing.push(callback); + this.handlers.set(event, existing); + return () => { + this.handlers + .get(event) + ?.splice(this.handlers.get(event)?.indexOf(callback) || 0, 1); + }; + } + + public send< + K extends keyof SyncEvents, + M extends SyncEvents[K]["response"], + >(event: K, message: M): void; + public send( + event: K, + message: SyncEvents[K]["request"], + ): void; + public send< + K extends keyof SyncEvents, + M extends SyncEvents[K]["response"] | SyncEvents[K]["request"], + >(event: K, message: M) { + this.channel.postMessage({ ...message, id: this.id }); + } + + dispose() { + this.channel.close(); + this.handlers.clear(); + } + } + + class SyncTabs { + private readonly protocol: Protocol; + /** Connection count excludes the connecting client, aka this class instance + * ``` + * Tab A connects: TabA.connectionCount = 0; + * Tab B connects: TabA.connectionCount = 1; TabB.connectionCount = 1; + * Tab A disconnects: TabB.connectionCount = 0; + * Tab C connects: TabB.connectionCount = 1; TabC.connectionCount = 1; + * Tab D connects: TabB.connectionCount = 2; TabC.connectionCount = 2; TabD.connectionCount = 2; + * Tab B disconnects: TabC.connectionCount = 1; TabD.connectionCount = 1; + * ``` + * + * + */ + private connectionCount = 0; + private _role: "host" | "leech" = "host"; + constructor(private readonly id: string) { + this.protocol = new Protocol(this.id); + + this.protocol.register("connect", (message) => { + console.log("connect", message); + if (message.kind === "response" && message.requestId === this.id) { + this.connectionCount = message.connections; + this._role = message.role; + SessionListService.$.set(message.sessionList); + } else if (message.kind === "request") { + if (this._role === "host") { + this.protocol.send("connect", { + id: this.id, + timestamp: Date.now(), + type: "connect", + kind: "response", + requestId: message.id, + sessionList: SessionListService.$.value, + role: "leech", + connections: ++this.connectionCount, + }); + this.protocol.send("playback", { + id: this.id, + timestamp: Date.now(), + type: "playback", + kind: "notification", + state: "play", + duration: AudioPlayer.duration, + currentTime: AudioPlayer.currentTime, + }); + } + } + }); + + this.protocol.register("updatePosition", (message) => { + if (message.kind === "request") { + SessionListService.updatePosition(message.position); + } + }); + + this.protocol.register("playback", (message) => { + if (message.kind === "notification") { + if (message.state === "play") + AudioPlayer.fakePlay(message.currentTime, message.duration); + if (message.state === "pause") AudioPlayer.pause(); + } + }); + + this.protocol.register("disconnect", (message) => { + console.log("disconnect", message); + }); - dispose() { - this.protocol.dispose(); + this.protocol.register("updateSessionList", (message) => { + console.log("updateSessionList", message); + if (message.kind === "request" && message.requestId === this.id) { + SessionListService.$.set( + (message as unknown as UpdateSessionListRequest).sessionList, + ); + } else if (message.kind === "request") { + this.protocol.send("updateSessionList", { + id: this.id, + timestamp: Date.now(), + type: "updateSessionList", + kind: "response", + requestId: message.id, + sessionList: SessionListService.$.value, + }); + } + }); + } + + public get role() { + return this._role; + } + + public connect = () => { + this.protocol.send("connect", { + id: this.id, + timestamp: Date.now(), + type: "connect", + kind: "request", + }); + }; + + public playback = ({ + state, + duration, + currentTime, + }: { + state: "play" | "pause"; + duration: number; + currentTime: number; + }) => { + this.protocol.send("playback", { + id: this.id, + timestamp: Date.now(), + type: "playback", + kind: "notification", + state, + duration, + currentTime, + }); + }; + + public updatePosition = (position: number) => { + this.protocol.send("updatePosition", { + id: this.id, + timestamp: Date.now(), + type: "updatePosition", + position, + kind: "request", + }); + }; + + public disconnect = () => { + this.protocol.send("disconnect", { + id: this.id, + timestamp: Date.now(), + type: "disconnect", + kind: "request", + }); + }; + + public updateSessionList = (sessionList: ISessionListProvider) => { + this.protocol.send("updateSessionList", { + id: this.id, + timestamp: Date.now(), + type: "updateSessionList", + kind: "request", + sessionList, + }); + }; + + dispose() { + this.protocol.dispose(); + } } -} -export const syncTabs = new SyncTabs(crypto.randomUUID()); + return new SyncTabs(crypto.randomUUID()); +})(); + +export const syncTabs = _syncTabs as NonNullable; \ No newline at end of file diff --git a/app/src/lib/utils/workerTimeout.ts b/app/src/lib/utils/workerTimeout.ts new file mode 100644 index 00000000..169aae90 --- /dev/null +++ b/app/src/lib/utils/workerTimeout.ts @@ -0,0 +1,78 @@ +import { browser } from "$app/environment"; +import type { TimerMessage } from "$lib/workers/timers/worker"; +import TimerWorker from "$lib/workers/timers/worker?worker"; + +const worker = browser ? new TimerWorker() : (undefined as never); + +export type WorkerTimer = { + clear: () => Promise | undefined; +}; + +const createPort = (callback: () => void) => { + const { port1: send, port2: recv } = new MessageChannel(); + + recv.onmessage = callback.bind(callback); + + return [send, recv] as const; +}; + +const createTimer = ({ + ms, + type, + id, + sender, +}: Omit & { sender: MessagePort }) => { + worker?.postMessage( + { + ms, + type, + id, + action: "set", + }, + [sender], + ); +}; + +const clearTimer = (id: string, recv: MessagePort) => { + if (!worker) return; + + const promise = new Promise((resolve) => { + recv.onmessage = resolve; + }).then(() => { + recv.onmessage = null; + recv.close(); + }); + + worker.postMessage({ id, action: "CLEAR" }); + + return promise; +}; + +function setWorkerTimer( + cb: () => void, + { + type, + ms = 500, + }: { + type: "interval" | "timeout"; + ms: number; + }, +): WorkerTimer { + const id = crypto.randomUUID() as string; + + const [send, recv] = createPort(cb); + + createTimer({ id, ms, sender: send, type }); + + return { + clear: () => clearTimer(id, recv), + }; +} + +/** Creates a `setInterval` that runs in a Web Worker */ +export const setWorkerInterval = (cb: () => void, ms: number) => + setWorkerTimer(cb, { ms, type: "interval" }); + +/** Creates a `setTimeout` that runs in a Web Worker */ +export const setWorkerTimeout = (cb: () => void, ms: number) => + setWorkerTimer(cb, { ms, type: "timeout" }); diff --git a/app/src/lib/workers/timers/worker.ts b/app/src/lib/workers/timers/worker.ts new file mode 100644 index 00000000..d764e96d --- /dev/null +++ b/app/src/lib/workers/timers/worker.ts @@ -0,0 +1,64 @@ +export type TimerMessage = { + type: "interval" | "timeout"; + action: "set" | "clear"; + id: string; + ms: number; + port: MessagePort; +}; + +export type TimerWorkerEvent = MessageEvent; + +const timeouts: Map< + string, + { + timer: ReturnType; + type: "interval" | "timeout"; + channel: MessagePort; + } +> = new Map(); + +const handleSet = ({ id, type, port, ms }: TimerMessage) => { + switch (type) { + case "interval": + timeouts.set(id, { + timer: setInterval(() => port.postMessage(id), ms), + type, + channel: port, + }); + break; + case "timeout": + timeouts.set(id, { + timer: setTimeout(() => port.postMessage(id), ms), + type, + channel: port, + }); + break; + } +}; + +const handleClear = ({ id }: TimerMessage) => { + const timeout = timeouts.get(id); + if (timeout) { + switch (timeout.type) { + case "interval": + clearInterval(timeout.timer); + break; + case "timeout": + clearTimeout(timeout.timer); + break; + } + timeouts.delete(id); + } + timeout?.channel.close(); +}; + +onmessage = (event: TimerWorkerEvent) => { + const { action } = event.data; + const channel = event.ports[0] as MessagePort; + + if (action === "clear") { + handleClear(event.data); + } else if (action === "set") { + handleSet({ ...event.data, port: channel }); + } +}; diff --git a/app/src/routes/(app)/[watchOrListen=share]/+page.server.ts b/app/src/routes/(app)/[watchOrListen=share]/+page.server.ts index d9566b85..b5707a31 100644 --- a/app/src/routes/(app)/[watchOrListen=share]/+page.server.ts +++ b/app/src/routes/(app)/[watchOrListen=share]/+page.server.ts @@ -1,6 +1,9 @@ import { redirect } from "@sveltejs/kit"; export const load = async ({ url, fetch }) => { - const id = url.searchParams.get("id") ?? url.searchParams.get("videoId"); + const id = + url.searchParams.get("id") ?? + url.searchParams.get("v") ?? + url.searchParams.get("videoId"); const playlist = url.searchParams.get("list") || undefined; if (!id) { From ebba88d4202f771f9634f82458a203ba1baf95ed Mon Sep 17 00:00:00 2001 From: BrightDV <92821484+BrightDV@users.noreply.github.com> Date: Sun, 17 Sep 2023 10:15:48 +0200 Subject: [PATCH 31/37] Fix a really small typo (#197) --- app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte index 669ccb3b..e026790d 100644 --- a/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte +++ b/app/src/lib/components/PlaylistPopper/CreatePlaylist.svelte @@ -100,7 +100,7 @@ >

Delete Playlist?

- Deleting this playlist will permanently delete all of it's data from + Deleting this playlist will permanently delete all of its data from your device (thumbnail, title, songs, etc.).

This action is permanent and cannot be undone!

From 90163b8dd88184758e6cf7215197c04aa2656399 Mon Sep 17 00:00:00 2001 From: snuffy <72365477+snuffyDev@users.noreply.github.com> Date: Mon, 18 Sep 2023 00:02:52 -0400 Subject: [PATCH 32/37] fix playlists starting from index >= 50 styles changes update playlist endpoint fix explore page --- app/.svelte-kit/ambient.d.ts | 6 +- app/output.json | 7960 --------- app/package-lock.json | 13956 ++++++---------- app/package.json | 24 +- .../global/redesign/base/_accessibility.scss | 2 +- app/src/lib/actions/gestures/handlers.ts | 13 +- app/src/lib/actions/gestures/types.ts | 6 +- app/src/lib/components/Chips/index.scss | 2 +- app/src/lib/components/Icon/Icon.svelte | 4 +- .../components/ListInfoBar/ListInfoBar.svelte | 5 +- app/src/lib/components/ListInfoBar/index.scss | 2 +- .../lib/components/ListItem/ListItem.svelte | 65 +- app/src/lib/components/ListItem/index.scss | 4 + app/src/lib/components/Nav/Nav.svelte | 8 + .../lib/components/Popper/PopperButton.svelte | 1 + app/src/lib/components/Search/Search.svelte | 61 +- app/src/lib/parsers/items/index.ts | 6 +- app/src/lib/stores/list/sessionList.ts | 27 +- app/src/lib/types.ts | 2 +- .../routes/(app)/api/v1/next.json/+server.ts | 36 +- app/src/routes/(app)/explore.json/+server.ts | 2 +- app/src/routes/(app)/explore/+page.svelte | 2 +- app/src/routes/(app)/home/+page.svelte | 1 + .../routes/(app)/playlist/[slug]/+page.svelte | 2 +- app/src/routes/(app)/settings/+page.svelte | 2 +- app/svelte.config.js | 1 - app/vite.config.ts | 2 + 27 files changed, 5748 insertions(+), 16454 deletions(-) delete mode 100644 app/output.json diff --git a/app/.svelte-kit/ambient.d.ts b/app/.svelte-kit/ambient.d.ts index 65de34c4..aca0e463 100644 --- a/app/.svelte-kit/ambient.d.ts +++ b/app/.svelte-kit/ambient.d.ts @@ -5,7 +5,7 @@ /// /** - * Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env). + * Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://kit.svelte.dev/docs/configuration#env) (if configured). * * _Unlike_ [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination. * @@ -139,7 +139,7 @@ declare module '$env/static/public' { } /** - * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env). + * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://kit.svelte.dev/docs/configuration#env) (if configured). * * This module cannot be imported into client-side code. * @@ -250,7 +250,7 @@ declare module '$env/dynamic/private' { _: string; NODE_ENV: string; [key: `PUBLIC_${string}`]: undefined; - [key: string]: string | undefined; + [key: `${string}`]: string | undefined; } } diff --git a/app/output.json b/app/output.json deleted file mode 100644 index 44b7369b..00000000 --- a/app/output.json +++ /dev/null @@ -1,7960 +0,0 @@ -[ - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/ambient.d.ts", - "messages": [ - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 17, - "column": 12, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 17, - "endColumn": 15, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [615, 618], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [615, 618], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 31, - "column": 21, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 31, - "endColumn": 24, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [979, 982], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [979, 982], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 2, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "import type Hls from \"hls.js\";\n\ninterface CustomWindow extends Window {\n\tbbAudio: (audio: HTMLAudioElement) => { duration: number; src: string };\n\tbbPlayer: { src: string; duration: number; title: string };\n}\n\ntype CSSKeys = { [key in keyof CSSStyleDeclaration]: CSSStyleDeclaration[key] };\ndeclare global {\n\tinterface IPropertyIndexedKeyFrames extends PropertyIndexedKeyframes, CSSKeys {}\n\tinterface IBody extends Body {\n\t\treadonly body: ReadableStream | null;\n\t\treadonly bodyUsed: boolean;\n\t\tarrayBuffer(): Promise;\n\t\tblob(): Promise;\n\t\tformData(): Promise;\n\t\tjson(): Promise;\n\t\ttext(): Promise;\n\t}\n\tinterface IResponse extends IBody {\n\t\treadonly headers: Headers;\n\t\treadonly ok: boolean;\n\t\treadonly redirected: boolean;\n\t\treadonly status: number;\n\t\treadonly statusText: string;\n\t\treadonly type: ResponseType;\n\t\treadonly url: string;\n\t\tclone(): IResponse;\n\t}\n\n\tfunction fetch(url: URL | RequestInfo, init?: RequestInit): Promise>;\n\tinterface Window {\n\t\tbbAudio: (audio: HTMLAudioElement) => { duration: number; src: string };\n\t\thls: Hls;\n\t\tbbPlayer: { src?: string; duration?: number; title?: string };\n\t\tfetch(url: URL | string, init?: RequestInit): Promise>;\n\t}\n}\nexport {};\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/app.d.ts", - "messages": [ - { - "ruleId": "@typescript-eslint/no-empty-interface", - "severity": 2, - "message": "An empty interface is equivalent to `{}`.", - "line": 11, - "column": 12, - "nodeType": "Identifier", - "messageId": "noEmpty", - "endLine": 11, - "endColumn": 20 - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "/// \n/// \n/// \n\ndeclare namespace App {\n\tinterface Locals {\n\t\tiOS: boolean;\n\t\tAndroid: boolean;\n\t}\n\n\tinterface Platform {}\n\n\tinterface Session {\n\t\tiOS?: boolean;\n\t\tAndroid?: boolean;\n\t}\n\n\tinterface Stuff {\n\t\tpath?: string;\n\t\tpage?: string;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/env.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global.d.ts", - "messages": [ - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'HTMLAttributes' is defined but never used. Allowed unused vars must match /^_/u.", - "line": 7, - "column": 12, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 7, - "endColumn": 26 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'HTMLAttributes' is defined but never used.", - "line": 7, - "column": 12, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 7, - "endColumn": 26 - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'T' is defined but never used. Allowed unused vars must match /^_/u.", - "line": 7, - "column": 27, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 7, - "endColumn": 28 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'T' is defined but never used.", - "line": 7, - "column": 27, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 7, - "endColumn": 28 - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 9, - "column": 20, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 9, - "endColumn": 23, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [278, 281], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [278, 281], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 12, - "column": 19, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 12, - "endColumn": 22, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [370, 373], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [370, 373], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 13, - "column": 24, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 13, - "endColumn": 27, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [407, 410], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [407, 410], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 14, - "column": 22, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 14, - "endColumn": 25, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [442, 445], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [442, 445], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 8, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "/// \n/// \n/// \n/// \n\ndeclare namespace svelte.JSX {\n\tinterface HTMLAttributes {\n\t\tonclick_outside?: () => void;\n\t\tondragmove?: (e: any) => void;\n\t\tonenterViewport?: () => void;\n\t\tonlosefocus?: () => void;\n\t\tonpan?: (event: any) => void;\n\t\tonpressing?: (event: any) => void;\n\t\tonpanend?: (event: any) => void;\n\t}\n}\ninterface Array {\n\tat(index: number): T | undefined;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_accessibility.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_accessibility.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@media (prefers-reduced-motion: reduce) {\n\t*,\n\t::before,\n\t::after {\n\t\t-webkit-animation-delay: -1ms !important;\n\t\tanimation-delay: -1ms !important;\n\t\t-webkit-animation-duration: 1ms !important;\n\t\tanimation-duration: 1ms !important;\n\t\t-webkit-animation-iteration-count: 1 !important;\n\t\tanimation-iteration-count: 1 !important;\n\t\tbackground-attachment: initial !important;\n\t\tscroll-behavior: auto !important;\n\t\ttransition-delay: 0s !important;\n\t\ttransition-duration: 0s !important;\n\t}\n}\n\n.sr-only:not(:focus):not(:active) {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_base.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_base.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./reset\";\n@forward \"./variables\";\n@forward \"./css-variables\";\n@forward \"./colors\";\n@forward \"./layout\";\n@forward \"./forms\";\n@forward \"./media\";\n@forward \"./typography\";\n@forward \"./theme\";\n@forward \"./accessibility\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_colors.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_colors.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_css-variables.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_css-variables.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./variables\" as vars;\n:root {\n\t--base-spacing: 0.75rem;\n\t--base-font-size: 0.75rem;\n\t--base-font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n\t\t\"Open Sans\", \"Helvetica Neue\", sans-serif;\n\n\t--secondary-font-family: \"CommissionerVariable\", sans-serif;\n\t--secondary-font-color: rgb(175, 175, 175);\n\n\t--color-dark: hsl(0deg 0% 98%);\n\t--color-light: #111113;\n\t--color-med: #202024;\n\n\t--sm-spacing: #{vars.$sm-spacing};\n\t--md-spacing: #{vars.$md-spacing};\n\t--lg-spacing: #{vars.$lg-spacing};\n\t--xl-spacing: #{vars.$xl-spacing};\n\n\t--base-radius: #{vars.$base-radius};\n\t--xs-radius: #{vars.$xs-radius};\n\t--sm-radius: #{vars.$sm-radius};\n\t--md-radius: #{vars.$md-radius};\n\t--lg-radius: #{vars.$lg-radius};\n\t--xl-radius: #{vars.$xl-radius};\n\n\t--max-width: 85.375rem;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_forms.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_forms.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "form {\n\t&.inline {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\theight: auto;\n\t\tmin-height: 5ch;\n\t\tmax-height: 30ch;\n\t\tmargin-left: auto;\n\t}\n}\n\nlabel {\n\tfont-weight: 400;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tfont-variant-caps: all-small-caps;\n\tletter-spacing: -0.02em;\n}\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n\tdisplay: inline;\n\tfont-family: initial;\n\tmargin-right: calc(var(--sm-spacing) * 0.5);\n}\n\n[type=\"file\"] {\n\tmargin-bottom: var(--sm-spacing);\n\twidth: 100%;\n}\n\ninput:not([type=\"range\"]):not([type=\"checkbox\"]):not([type=\"radio\"]) {\n\tappearance: none;\n\tbackground: transparent;\n\tborder: none;\n\toutline: none;\n\tcolor: inherit;\n\tbox-sizing: border-box;\n\tpadding: 0.6666666667em;\n\tfont-family: var(--base-font-family);\n\tletter-spacing: -0.02em;\n\tfont-size: 1em;\n}\n\ninput:not([type=\"range\"]):not([type=\"checkbox\"]):not([type=\"search\"]) {\n\tborder: 0.0625em solid rgba(170, 170, 170, 0.219);\n\tfont-family: inherit;\n\twidth: inherit;\n\tborder-radius: inherit;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n\tfilter: brightness(10);\n}\n\n.input {\n\tposition: relative;\n\n\theight: auto;\n\tmin-height: 5ch;\n\tmax-height: 30ch;\n\tmin-width: 15ch;\n\tmax-width: 32ch;\n\twidth: 100%;\n\n\ttransition: 100ms cubic-bezier(0.47, 0.25, 0.745, 0.715);\n\ttransition-property: border-color, filter, color;\n\n\tborder: 0.0625em solid hsla(0, 0%, 66.7%, 0.219);\n\tborder-radius: var(--sm-radius);\n\tbox-shadow: 0 0 0.25em 0.02em hsla(0, 0%, 66.7%, 0) !important;\n\n\tbackground: var(--form-bg);\n\n\t&.block {\n\t\tmax-width: 100%;\n\t}\n\t::placeholder {\n\t\tfont-weight: 400;\n\t\topacity: 0.7;\n\t}\n\n\t@media screen and (hover: hover) {\n\t\t&:hover {\n\t\t\tfilter: brightness(1.07);\n\t\t\tborder-color: rgba(114, 114, 114, 0.663);\n\t\t}\n\t}\n\t&:hover:active,\n\t&:focus-within {\n\t\tborder-color: rgba(158, 158, 158, 0.658);\n\t\tfilter: brightness(1.15);\n\t}\n\t&:has(input[type=\"search\"]) {\n\t\tmin-width: 15ch;\n\t\tmax-width: 80ch;\n\t}\n\t&:has(input[type=\"search\"]) {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr 2.75rem;\n\t\tgrid-template-areas: \"start end\";\n\t}\n}\n\ninput[type=\"search\"] {\n\t-webkit-appearance: none;\n\tbackground: #0000;\n\tborder: none;\n\tappearance: none;\n\twidth: inherit;\n}\n\n.searchBtn {\n\tpointer-events: all;\n\tcursor: pointer;\n\tz-index: 5;\n\tdisplay: inline-grid;\n\tplace-items: center;\n\tbackground-color: #0000;\n\n\tz-index: 10;\n\tcolor: inherit;\n\ttransition: 100ms cubic-bezier(0.47, 0.25, 0.745, 0.715) background-color;\n\n\tgrid-area: end;\n\t// background-clip: content-box;\n\tborder-radius: inherit;\n\tborder-top-left-radius: 0;\n\tborder-bottom-left-radius: 0;\n\t&:hover {\n\t\tbackground-color: var(--form-contrast-bg) !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_helpers.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_helpers.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".no-scroll {\n\toverflow: hidden !important;\n}\n.hidden {\n\tdisplay: none !important;\n\tvisibility: hidden !important;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_layout.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_layout.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../utility/mixins/mixins\" as *;\n@use \"./variables\" as v;\n@use \"./css-variables\" as *;\nhtml {\n\tbox-sizing: border-box;\n\tscroll-behavior: smooth;\n\t-webkit-overflow-scrolling: touch;\n\tfont-size: 12px;\n\toverscroll-behavior: contain;\n}\n\n*,\n*::before,\n*::after {\n\tbox-sizing: inherit;\n}\n\nhtml,\nbody {\n\tbackground-color: #010102;\n\tcolor: var(--color-dark);\n\tline-height: 1.75;\n\tposition: fixed;\n\tmin-height: 100vh;\n\tmin-width: 100vw;\n\tinset: 0;\n\toverscroll-behavior: contain;\n\tmax-height: 100%;\n\toverflow: hidden;\n\tmargin: 0;\n}\n\n:root {\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tword-wrap: break-word;\n\t-webkit-text-size-adjust: 100%;\n\t--base-font-size: 0.75rem;\n\n\t/* ===== Scrollbar CSS ===== */\n\n\t* {\n\t\tscrollbar-gutter: 0.833333rem;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: #c7c7c7 #5e5e5e2f;\n\t}\n\n\t::-webkit-scrollbar {\n\t\twidth: 0.916667rem;\n\t\theight: 0.916667rem;\n\t}\n\n\t::-webkit-scrollbar-track {\n\t\tbackground: #74747e21;\n\t\tborder-radius: 0.625rem;\n\t\theight: 0.916667rem;\n\t\twidth: 100%;\n\t\tbackground-clip: content-box;\n\t\tborder-radius: 0.833333rem;\n\t\tborder: transparent solid 0.0983333rem;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: #e0e0e0a8;\n\t\tborder-radius: 0.5625rem;\n\t\twidth: 0.5625rem;\n\t\tscrollbar-width: 0.625rem;\n\t\tborder: 0.25rem solid #b8b8b800;\n\t\tbackground-clip: content-box;\n\t}\n\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent !important;\n\t-webkit-font-smoothing: -subpixel-antialiased;\n\t--player-bar-height: clamp(5rem, 5.6rem, 5.95rem);\n\t--top-bar-height: clamp(3.9rem, 4.175rem, 4.625rem);\n\ttext-rendering: geometricPrecision;\n\tfont-smooth: auto;\n\t@media screen and (min-width: 40em) and (max-width: 115.375em) {\n\t\t--top-bar-height: clamp(3.8rem, 4rem, 4.75rem);\n\t\t--base-font-size: 0.875rem;\n\t}\n\t@media screen and (min-width: 115.375em) and (max-width: 134em) {\n\t\t--top-bar-height: clamp(3.8rem, 4rem, 4.75rem);\n\t\t--base-font-size: 1rem;\n\t}\n\t@media screen and (min-width: 134.75em) {\n\t\t--top-bar-height: clamp(3.8rem, 4rem, 4.75rem);\n\t\t--base-font-size: 1.125rem;\n\t}\n}\n.tooltip {\n\tposition: absolute;\n\tdisplay: block;\n\tpointer-events: none;\n\n\topacity: 0;\n\twill-change: opacity, transform;\n\ttransition: opacity linear 100ms;\n\n\t&::before,\n\t&::after {\n\t\ttransform: rotate(-135deg);\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\tbottom: 50%;\n\t\tright: 50%;\n\t\tcontent: \"\";\n\t}\n\ttransform: translate(calc(var(--tt-pos-x)), var(--tt-pos-y));\n\ttransform-origin: center;\n\n\tborder: 1px solid #323232;\n\tbox-shadow: 0px 0px 1px #323232;\n\tbackground: #121212;\n\tfont-size: v.$size-1;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tborder-radius: 4px;\n\tcolor: #f1f1f1;\n\tpadding: 0.3rem;\n\tfont-weight: 500;\n\tmin-width: 1rem;\n\tmax-width: 20rem;\n\ttext-transform: capitalize;\n\twidth: -webkit-max-content;\n\twidth: -moz-max-content;\n\twidth: max-content;\n\tposition: absolute;\n\tdisplay: block;\n\tz-index: 500;\n}\n\nbody {\n\tmargin: 0;\n\toverflow: hidden;\n\tposition: fixed;\n}\nhtml {\n\tfont-size: var(--base-font-size);\n}\n#app {\n\tposition: fixed;\n\theight: 100%;\n\twidth: 100%;\n\tline-height: 1.3;\n\tinset: 0;\n\n\tmax-width: 100%;\n\toverscroll-behavior: contain;\n\tcontain: strict;\n}\nmain {\n\tmargin: 0 auto;\n\tposition: relative;\n\t@include v.content-spacing($type: \"padding\");\n\ttransform: translateZ(0px);\n\toverscroll-behavior: contain;\n\t@media screen and (min-width: 640px) {\n\t\t@include v.content-width();\n\t}\n}\n.backdrop {\n\tposition: fixed;\n\tz-index: 50;\n\tinset: 0;\n\toverflow: hidden;\n\tbackground-color: #00000063;\n\twidth: 100%;\n\theight: 100%;\n\tcontain: paint;\n}\n.wrapper {\n\toverflow: hidden;\n\toverflow-y: auto;\n\t-webkit-overflow-scrolling: touch;\n\tdisplay: block;\n\ttouch-action: pan-y;\n\toverscroll-behavior: contain;\n\tposition: absolute;\n\tinset: 0;\n\tisolation: isolate;\n}\n.app-content-m {\n\tmargin-block-start: calc(var(--top-bar-height) + 0px);\n\twill-change: margin-block;\n\ttransform: translateZ(0px);\n\tisolation: isolate;\n\t&[hasplayer=\"true\"] {\n\t\twill-change: unset;\n\t\tmargin-block-end: calc(var(--player-bar-height) + 0px);\n\t}\n}\n\n.container {\n\tmax-width: 112rem;\n\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\tflex-direction: column;\n\t&.row {\n\t\tflex-direction: row;\n\t}\n}\n\n.resp-content-width {\n\tmargin: 0 auto;\n\t@include v.content-width(!important);\n}\n.no-scroll {\n\toverflow: hidden;\n\toverflow-y: hidden;\n}\n\n.hidden {\n\tdisplay: none;\n}\n\n.footer-container {\n\twidth: 100%;\n\tmax-width: 100%;\n\tisolation: isolate;\n\tz-index: 25;\n\t@media screen and (min-width: 720px) {\n\t\tz-index: 152;\n\t}\n}\n\n.footer-container {\n\tbottom: 0;\n\tdisplay: block;\n\twidth: 100%;\n\tposition: fixed;\n\tcontain: layout;\n\theight: var(--player-bar-height);\n\tmin-width: 100%;\n\tdisplay: flex;\n\tmin-width: 100%;\n}\n\n:root .dark * {\n\tcolor: hsl(0, 0%, 95%);\n}\n.player {\n\tcolor: #f3f3f3;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_media.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_media.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "img,\npicture {\n\tmargin: 0;\n\tborder-radius: var(--xs-radius);\n\tmax-width: 100%;\n\n\t-webkit-user-drag: none;\n\t-khtml-user-drag: none;\n\t-moz-user-drag: none;\n\t-o-user-drag: none;\n\tuser-drag: none;\n\n\t-webkit-touch-callout: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-user-select: none;\n\tuser-select: none;\n}\n\nimg::before,\nvideo::before {\n\tdisplay: block;\n\tcontent: \"\";\n\tposition: absolute;\n\tpadding-top: calc(100% * 2 / 3);\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_reset.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_reset.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "/* Document\n * ========================================================================== */\n\n/**\n * Add border box sizing in all browsers (opinionated).\n */\n\n*,\n::before,\n::after {\n\tbox-sizing: border-box;\n}\n\n/**\n\t * 1. Add text decoration inheritance in all browsers (opinionated).\n\t * 2. Add vertical alignment inheritance in all browsers (opinionated).\n\t */\n\n::before,\n::after {\n\ttext-decoration: inherit;\n\tvertical-align: inherit;\n}\n\n/**\n\t * 1. Use the default cursor in all browsers (opinionated).\n\t * 2. Change the line height in all browsers (opinionated).\n\t * 3. Use a 4-space tab width in all browsers (opinionated).\n\t * 4. Remove the grey highlight on links in iOS (opinionated).\n\t * 5. Prevent adjustments of font size after orientation changes in\n\t * IE on Windows Phone and in iOS.\n\t * 6. Breaks words to prevent overflow in all browsers (opinionated).\n\t */\n\nhtml {\n\tcursor: default;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-tap-highlight-color: transparent;\n\t-ms-text-size-adjust: 100%;\n\t-webkit-text-size-adjust: 100%;\n\tword-break: break-word;\n}\n\n/* Sections\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin in all browsers (opinionated).\n\t */\n\nbody {\n\tmargin: 0;\n}\n\n/**\n\t * Correct the font size and margin on `h1` elements within `section` and\n\t * `article` contexts in Chrome, Edge, Firefox, and Safari.\n\t */\n\nh1 {\n\tfont-size: 2em;\n\tmargin: 0.67em 0;\n}\n\n/* Grouping content\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.\n\t */\n\ndl dl,\ndl ol,\ndl ul,\nol dl,\nul dl {\n\tmargin: 0;\n}\n\n/**\n\t * Remove the margin on nested lists in Edge 18- and IE.\n\t */\n\nol ol,\nol ul,\nul ol,\nul ul {\n\tmargin: 0;\n}\n\n/**\n\t * 1. Add the correct sizing in Firefox.\n\t * 2. Show the overflow in Edge 18- and IE.\n\t */\n\nhr {\n\theight: 0;\n\toverflow: visible;\n}\n\n/**\n\t * Add the correct display in IE.\n\t */\n\nmain {\n\tdisplay: block;\n}\n\n/**\n\t * Remove the list style on navigation lists in all browsers (opinionated).\n\t */\n\nnav ol,\nnav ul {\n\tlist-style: none;\n\tpadding: 0;\n}\n\n/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd `em` font sizing in all browsers.\n\t */\n\npre {\n\tfont-family: monospace, monospace;\n\tfont-size: 1em;\n}\n\n/* Text-level semantics\n\t * ========================================================================== */\n\n/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\na {\n\tbackground-color: transparent;\n}\n\n/**\n\t * Add the correct text decoration in Edge 18-, IE, and Safari.\n\t */\n\nabbr[title] {\n\ttext-decoration: underline;\n\ttext-decoration: underline dotted;\n}\n\n/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd `em` font sizing in all browsers.\n\t */\n\ncode,\nkbd,\nsamp {\n\tfont-family: monospace, monospace;\n\tfont-size: 1em;\n}\n\n/**\n\t * Add the correct font size in all browsers.\n\t */\n\nsmall {\n\tfont-size: smaller;\n}\n\n/* Embedded content\n\t * ========================================================================== */\n\n/*\n\t * Change the alignment on media elements in all browsers (opinionated).\n\t */\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n\tvertical-align: middle;\n}\n\n/**\n\t * Add the correct display in IE 9-.\n\t */\n\naudio,\nvideo {\n\tdisplay: inline-block;\n}\n\n/**\n\t * Add the correct display in iOS 4-7.\n\t */\n\naudio:not([controls]) {\n\tdisplay: none;\n\theight: 0;\n}\n\n/**\n\t * Remove the border on iframes in all browsers (opinionated).\n\t */\n\niframe {\n\tborder-style: none;\n}\n\n/**\n\t * Remove the border on images within links in IE 10-.\n\t */\n\nimg {\n\tborder-style: none;\n}\n\n/**\n\t * Change the fill color to match the text color in all browsers (opinionated).\n\t */\n\nsvg:not([fill]) {\n\tfill: currentColor;\n}\n\n/**\n\t * Hide the overflow in IE.\n\t */\n\nsvg:not(:root) {\n\toverflow: hidden;\n}\n\n/* Tabular data\n\t * ========================================================================== */\n\n/**\n\t * Collapse border spacing in all browsers (opinionated).\n\t */\n\ntable {\n\tborder-collapse: collapse;\n}\n\n/* Forms\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin on controls in Safari.\n\t */\n\nbutton,\ninput,\nselect {\n\tmargin: 0;\n}\n\n/**\n\t * 1. Show the overflow in IE.\n\t * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.\n\t */\n\nbutton {\n\toverflow: visible;\n\ttext-transform: none;\n}\n\n/**\n\t * Correct the inability to style buttons in iOS and Safari.\n\t */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n\t-webkit-appearance: button;\n}\n\n/**\n\t * 1. Change the inconsistent appearance in all browsers (opinionated).\n\t * 2. Correct the padding in Firefox.\n\t */\n\nfieldset {\n\tborder: 1px solid #a0a0a0;\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\n/**\n\t * Show the overflow in Edge 18- and IE.\n\t */\n\ninput {\n\toverflow: visible;\n}\n\n/**\n\t * 1. Correct the text wrapping in Edge 18- and IE.\n\t * 2. Correct the color inheritance from `fieldset` elements in IE.\n\t */\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\twhite-space: normal;\n}\n\n/**\n\t * 1. Add the correct display in Edge 18- and IE.\n\t * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.\n\t */\n\nprogress {\n\tdisplay: inline-block;\n\tvertical-align: baseline;\n}\n\n/**\n\t * Remove the inheritance of text transform in Firefox.\n\t */\n\nselect {\n\ttext-transform: none;\n}\n\n/**\n\t * 1. Remove the margin in Firefox and Safari.\n\t * 2. Remove the default vertical scrollbar in IE.\n\t * 3. Change the resize direction in all browsers (opinionated).\n\t */\n\ntextarea {\n\tmargin: 0;\n\toverflow: auto;\n\tresize: vertical;\n}\n\n/**\n\t * Remove the padding in IE 10-.\n\t */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n\tpadding: 0;\n}\n\n/**\n\t * 1. Correct the odd appearance in Chrome, Edge, and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n[type=\"search\"] {\n\t-webkit-appearance: textfield;\n\toutline-offset: -2px;\n}\n\n/**\n\t * Correct the cursor style of increment and decrement buttons in Safari.\n\t */\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/**\n\t * Correct the text style of placeholders in Chrome, Edge, and Safari.\n\t */\n\n::-webkit-input-placeholder {\n\tcolor: inherit;\n\topacity: 0.54;\n}\n\n/**\n\t * Remove the inner padding in Chrome, Edge, and Safari on macOS.\n\t */\n\n::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/**\n\t * 1. Correct the inability to style upload buttons in iOS and Safari.\n\t * 2. Change font properties to `inherit` in Safari.\n\t */\n\n::-webkit-file-upload-button {\n\t-webkit-appearance: button;\n\tfont: inherit;\n}\n\n/**\n\t * Remove the inner border and padding of focus outlines in Firefox.\n\t */\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/**\n\t * Restore the focus outline styles unset by the previous rule in Firefox.\n\t */\n\n:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n/**\n\t * Remove the additional :invalid styles in Firefox.\n\t */\n\n:-moz-ui-invalid {\n\tbox-shadow: none;\n}\n\n/* Interactive\n\t * ========================================================================== */\n\n/*\n\t * Add the correct display in Edge 18- and IE.\n\t */\n\ndetails {\n\tdisplay: block;\n}\n\n/*\n\t * Add the correct styles in Edge 18-, IE, and Safari.\n\t */\n\ndialog {\n\tbackground-color: white;\n\tborder: solid;\n\tcolor: black;\n\tdisplay: block;\n\theight: -moz-fit-content;\n\theight: -webkit-fit-content;\n\theight: fit-content;\n\tleft: 0;\n\tmargin: auto;\n\tpadding: 1em;\n\tposition: absolute;\n\tright: 0;\n\twidth: -moz-fit-content;\n\twidth: -webkit-fit-content;\n\twidth: fit-content;\n}\n\ndialog:not([open]) {\n\tdisplay: none;\n}\n\n/*\n\t * Add the correct display in all browsers.\n\t */\n\nsummary {\n\tdisplay: list-item;\n}\n\n/* Scripting\n\t * ========================================================================== */\n\n/**\n\t * Add the correct display in IE 9-.\n\t */\n\ncanvas {\n\tdisplay: inline-block;\n}\n\n/**\n\t * Add the correct display in IE.\n\t */\n\ntemplate {\n\tdisplay: none;\n}\n\n/* User interaction\n\t * ========================================================================== */\n\n/*\n\t * 1. Remove the tapping delay in IE 10.\n\t * 2. Remove the tapping delay on clickable elements\n\t\t\t\tin all browsers (opinionated).\n\t */\n\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n\t-ms-touch-action: manipulation;\n\ttouch-action: manipulation;\n}\n\n/**\n\t * Add the correct display in IE 10-.\n\t */\n\n[hidden] {\n\tdisplay: none;\n}\n\n/* Accessibility\n\t * ========================================================================== */\n\n/**\n\t * Change the cursor on busy elements in all browsers (opinionated).\n\t */\n\n[aria-busy=\"true\"] {\n\tcursor: progress;\n}\n\n/*\n\t * Change the cursor on control elements in all browsers (opinionated).\n\t */\n\n[aria-controls] {\n\tcursor: pointer;\n}\n\n/*\n\t * Change the cursor on disabled, not-editable, or otherwise\n\t * inoperable elements in all browsers (opinionated).\n\t */\n\n[aria-disabled=\"true\"],\n[disabled] {\n\tcursor: not-allowed;\n}\n\n/*\n\t * Change the display on visually hidden accessible elements\n\t * in all browsers (opinionated).\n\t */\n\n[aria-hidden=\"false\"][hidden] {\n\tdisplay: initial;\n}\n\n[aria-hidden=\"false\"][hidden]:not(:focus) {\n\tclip: rect(0, 0, 0, 0);\n\tposition: absolute;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_theme.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_theme.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "$sections: (\n\tbottom: (\n\t\tfooter-container,\n\t\tplayer,\n\t),\n\ttop: (\n\t\tnav,\n\t),\n\tforms: (\n\t\tselect,\n\t\tinput,\n\t\toption,\n\t\tsuggestions,\n\t),\n);\n\n$themes: (\n\tYTM: (\n\t\t\"bottom\": linear-gradient(0deg, #121018 28%, #18171e 100%),\n\t\t\"base\": #010102,\n\t\t\"top\": #010102,\n\t\t\"form\": #1b1922,\n\t\t\"side\": #0e0c13,\n\t),\n\tDark: (\n\t\t\"bottom\": linear-gradient(0deg, #121216 28%, #1a1a20 100%),\n\t\t\"base\": #010102,\n\t\t\"top\": linear-gradient(0deg, #101014 28%, #17171d 100%),\n\t\t\"form\": #1c1f20,\n\t\t\"side\": #15191d,\n\t),\n\tDim: (\n\t\t\"bottom\": #141820,\n\t\t\"base\": #010102,\n\t\t\"top\": #141820,\n\t\t\"form\": #1c1f20,\n\t\t\"side\": #0f1116,\n\t),\n\tMidnight: (\n\t\t\"base\": #010102,\n\t\t\"top\": hsl(267, 14%, 6%),\n\t\t\"side\": #15131f,\n\t\t\"bottom\": linear-gradient(0deg, #12131c 32%, #191a26 100%),\n\t\t\"form\": #1b1922,\n\t),\n);\n$theme-name: (Dark, Dim, Midnight, YTM);\n$section-names: (base, top, side, bottom, form);\n\n:root {\n\t--mobile-popper-bg: unset;\n}\nhtml {\n\t@each $section in $section-names {\n\t\t@each $theme in $theme-name {\n\t\t\t--#{$theme}-#{$section}: #{map-get($themes, $theme, $section)};\n\t\t}\n\t}\n\t@each $theme in $theme-name {\n\t\t&.#{$theme} {\n\t\t\t--mobile-popper-bg: #{map-get($themes, $theme, \"side\")};\n\t\t\t--form-bg: #{map-get($themes, $theme, \"form\")};\n\t\t\t--form-contrast-bg: #{scale-color(\n\t\t\t\t\tmap-get($themes, $theme, \"form\"),\n\t\t\t\t\t$lightness: 33%,\n\t\t\t\t\t$saturation: -100%,\n\t\t\t\t\t$alpha: -85%\n\t\t\t\t)};\n\t\t\t--disabled-form-bg: #{scale-color(map-get($themes, $theme, \"form\"), $lightness: 17%, $alpha: -25%)};\n\t\t\t--disabled-form-fg: #{scale-color(map-get($themes, $theme, \"form\"), $lightness: 60%)};\n\t\t\t--bottom-bg: #{map-get($themes, $theme, \"bottom\")};\n\t\t\t--bottom-bg-light: #{scale-color(map-get($themes, $theme, \"base\"), $lightness: 8%, $saturation: -66%)};\n\t\t\t--top-bg: #{map-get($themes, $theme, \"top\")};\n\t\t\t--base-bg: #{map-get($themes, $theme, \"base\")};\n\t\t\tbackground: var(--base-bg);\n\n\t\t\t@each $section, $elm in $sections {\n\t\t\t\t.#{$elm} {\n\t\t\t\t\tbackground: #{var(--#{$section}-bg)};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_typography.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_typography.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./variables\" as v;\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n.h1,\n.h2,\n.h3,\n.h4,\n.h5,\n.h6,\n.subheading {\n\tfont-family: \"CommissionerVariable\", sans-serif;\n\n\tline-height: 1.2;\n\tfont-weight: 500;\n\tmargin: 0.5em 0 1.38rem;\n}\n\nh1,\n.h1 {\n\tfont-size: 2.488rem;\n\tfont-weight: 700;\n\tletter-spacing: -0.03em;\n}\n\nh2,\n.h2 {\n\tfont-size: 2.074rem;\n\tfont-weight: 700;\n}\n\nh3,\n.h3 {\n\tfont-size: 1.728em;\n}\n\nh4,\n.h4 {\n\tfont-size: 1.44em;\n}\n\nh5,\n.h5 {\n\tfont-size: 1.2em;\n}\n\nh6,\n.h6 {\n\tfont-size: 1em;\n}\n\np {\n\tmargin: 0 0 v.$sm-spacing;\n\tfont-size: 1em;\n}\n\na.no-style {\n\ttext-decoration: none;\n\t&:focus,\n\t&:focus-visible,\n\t&:focus-within {\n\t\toutline: none;\n\t}\n}\n\na:not(.no-style),\n.link:not(.no-style) {\n\t$link-color: rgb(245, 245, 245);\n\tcolor: rgb(245, 245, 245);\n\n\ttext-decoration: none;\n\ttransition: color 0.2s;\n\tdisplay: inline;\n\t&.link {\n\t\tfont-weight: 500;\n\t}\n\t&:active,\n\t&:focus,\n\t&:hover {\n\t\t-webkit-text-decoration: underline 0.001em solid;\n\t\ttext-decoration: underline 0.001em solid;\n\t\ttext-underline-offset: 0.001em;\n\t\tcolor: darken($link-color, 15%);\n\t\toutline: none;\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n}\n\n.explicit {\n\ttext-shadow: none;\n\t/* max-height: 1em; */\n\tmin-width: 1em;\n\tmin-height: 1em;\n\t/* width: 1em; */\n\tposition: relative;\n\tplace-content: center;\n\tdisplay: inline-flex;\n\t// contain: paint;\n\tfont-size: 0.5em;\n\ttext-rendering: optimizeLegibility;\n\t&::before {\n\t\tcontent: \"E\";\n\t\tposition: absolute;\n\n\t\tz-index: 5;\n\n\t\tplace-self: center;\n\t\t// inset:0;\n\t\tfont-weight: 700;\n\t\taspect-ratio: 1/1;\n\t\tline-height: 1.1;\n\t}\n\tfont-size: calc(1em * 0.25 + 4px);\n\tpadding: 0.0875rem;\n\taspect-ratio: 1/1;\n\tbackground: #ffffffbf;\n\tborder-radius: clamp(calc(calc(0.25em * 0.5) + 0.1px), 16px * 0.0125, 4px);\n\tvertical-align: middle;\n\tfont-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,\n\t\tsans-serif;\n\n\tcolor: rgb(8, 8, 8) !important;\n}\n\na small {\n\t$color: rgb(175, 175, 175);\n\tfont-size: 0.95rem;\n\tfont-weight: 700;\n\tfont-variant-caps: all-petite-caps;\n\tletter-spacing: 0.05rem;\n\ttransition: ease-in color 75ms;\n\tcolor: $color;\n\t&:hover {\n\t\tcolor: lighten($color, 30%);\n\t\ttext-decoration: underline 0.001rem solid;\n\t\ttext-underline-offset: 0.001rem;\n\t}\n}\n\n.secondary {\n\tcolor: rgba(255, 255, 255, 0.7) !important;\n\tfont-weight: 400;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/base/_variables.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/base/_variables.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"sass:math\" as m;\n\n$size-base: 0.75rem;\n$size-1: 1rem;\n$size-2: 1.2rem;\n$size-3: 1.44rem;\n$size-4: 1.728rem;\n$size-5: 2.074rem;\n\n$base-spacing: 0.75em;\n$sm-spacing: m.div($base-spacing, 2.5);\n$md-spacing: $base-spacing;\n$lg-spacing: calc($base-spacing * 2);\n$xl-spacing: calc($base-spacing * 1.25);\n\n$base-radius: 0.35em;\n$xs-radius: m.div($base-radius, 0.75);\n$sm-radius: m.div($base-radius, 0.675);\n$md-radius: m.div($base-radius, 0.575);\n$lg-radius: m.div($base-radius, 0.5);\n$xl-radius: m.div($base-radius, 0.3125);\n\n$secondary-font-family: \"CommissionerVariable\", sans-serif;\n\n$line-height: 1.5;\n\n$z-index: (\n\t\"z-250n\": -250,\n\t\"z-125n\": -125,\n\t\"z-1n\": -1,\n\t\"z-0\": 0,\n\t\"z-125p\": 125,\n\t\"z-250p\": 250,\n\t\"z-500p\": 500,\n);\n\n$content-width-mobile: calc(100vw - 2.25em);\n\n$content-width-md: calc(100vw - 0.5625rem - 14rem);\n$content-width-lg: 82rem;\n$content-width-xl: 87.5rem;\n\n@mixin content-spacing($type: \"padding\") {\n\t#{$type}: 1.25em 0 5vh;\n\t#{$type}-bottom: 3.3125vh !important;\n\t@media only screen and (min-width: 640px) and (max-width: 1079.9px) {\n\t\t#{$type}: 3vh 1rem 0 2rem;\n\t\t#{$type}-bottom: 0.8rem;\n\t}\n\t@media only screen and (min-width: 1080px) and (max-width: 1366px) {\n\t\t#{$type}: 4vh 2rem 0 2rem;\n\t\t#{$type}-bottom: 0.8rem;\n\t}\n\t@media only screen and (min-width: 1367px) and (max-width: 1600px) {\n\t\t#{$type}: 5vh 2rem 0 2rem;\n\t}\n\t@media only screen and (min-width: 1601px) {\n\t\t#{$type}: 3vh 2rem 0 2rem;\n\t}\n}\n\n@mixin content-width($important: \"\") {\n\tmax-width: $content-width-mobile #{$important};\n\t@media only screen and (min-width: 1080px) and (max-width: 1366px) {\n\t\tmax-width: $content-width-md #{$important};\n\t}\n\t@media only screen and (min-width: 1367px) and (max-width: 1600px) {\n\t\tmax-width: $content-width-lg #{$important};\n\t}\n\t@media only screen and (min-width: 1601px) {\n\t\tmax-width: $content-width-xl #{$important};\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/main.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/main.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./base/base\";\n@forward \"./modules/modules\";\n@forward \"./utility/utility\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_alert.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_alert.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".alert {\n\tmargin-bottom: 1.125rem;\n}\n.m-alert {\n\tposition: relative;\n\tdisplay: block;\n\tmax-width: 85.735rem;\n\tpadding: 1rem 2rem;\n\tborder-radius: 0.8rem;\n\twidth: calc(100% - 2rem);\n\ttext-align: center;\n\ttext-shadow: 0.1rem 0.05rem rgba(0, 0, 0, 0.685);\n\tcolor: #fff;\n\tbackground-color: #ce7c7c;\n\t&-error {\n\t\t@extend .m-alert;\n\t\tbackground-color: #b32f2a !important;\n\t}\n\t&-success {\n\t\t@extend .m-alert;\n\t\tbackground-color: #1d964b !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_button.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_button.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../base/variables\" as v;\n@use \"sass:color\";\n\n$background: hsl(0deg 0% 98%);\n$color: #0d0d0d;\n$focus-background: #aaa;\n$focus-color: #1c1c1c;\n%active {\n\tcolor: $focus-color;\n\n\tborder-color: $focus-color !important;\n\n\toutline: 0;\n\ttext-decoration: none;\n\tcursor: pointer;\n}\n%button-base {\n\tdisplay: inline-flex;\n\tcolor: #0f0f0f !important;\n\tbackground: $background;\n\n\tborder: 0.15em solid hsl(0deg 0% 7%);\n\tborder-radius: v.$base-radius;\n\tfont-family: \"CommissionerVariable\", sans-serif;\n\tcursor: pointer;\n\tfont-size: 1em;\n\tgap: 0.25em;\n\tfont-weight: 550;\n\ttext-transform: none;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpadding: 0.63125em 1.25em;\n\ttext-transform: capitalize;\n\tfont-size: 1em;\n\tjustify-content: center;\n\talign-items: center;\n\tvertical-align: middle;\n\ttransition: background linear 75ms, color linear 75ms;\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tcolor: #252525 !important;\n\t\t\tbackground: color.scale($focus-background, $lightness: 12%) !important;\n\t\t\tborder-color: #202020 !important;\n\t\t\tbox-shadow: -0.01em -0.01em 0.1em 0rem rgba(0, 0, 0, 0.904) inset;\n\t\t\toutline: 0;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\t&:focus,\n\t&:focus-within,\n\t&:active,\n\t&.active {\n\t\tborder-color: $focus-color !important;\n\t\tbackground: color.scale($focus-background, $lightness: 25%) !important;\n\n\t\tcolor: $focus-color;\n\n\t\tborder-color: $focus-color !important;\n\n\t\toutline: 0;\n\t\ttext-decoration: none;\n\t\tcursor: pointer;\n\t}\n\t&:disabled,\n\t.disabled {\n\t\tbackground: rgb(44, 44, 44) !important;\n\t\tcolor: #979797 !important;\n\t\tcursor: not-allowed;\n\t\tborder-color: #444;\n\t\t&:hover {\n\t\t\tbackground: rgb(44, 44, 44) !important;\n\t\t}\n\t}\n\t&:hover:active,\n\t&:active {\n\t\tbackground: color.scale($focus-background, $lightness: 15%) !important;\n\t}\n}\n\nbutton:not(.icon-btn),\n.button {\n\t@extend %button-base;\n}\n\nbutton.small {\n\t@extend %button-base;\n\tmax-width: -webkit-fit-content;\n\tmax-width: -moz-fit-content;\n\tmax-width: fit-content;\n}\n\nbutton.has-icon {\n\tdisplay: inline-flex;\n\tjustify-items: center;\n\tjustify-content: center;\n\t> .text {\n\t\tmargin-left: 0.125rem;\n\t}\n}\n\nbutton.outlined {\n\tbackground: #0000 !important;\n\tborder: $background 0.1em solid !important;\n\tcolor: $background !important;\n\tfont-weight: 525;\n\n\t&:active {\n\t\tborder: rgb(158, 158, 158) 0.1rem solid !important;\n\t\tbackground: rgba(255, 255, 255, 0.027) !important;\n\t\tbox-shadow: 0 0 0.1em 0 inset black;\n\t\tcolor: rgb(236, 236, 236) !important;\n\t}\n\n\t.button-text {\n\t\tmargin-left: 0.2rem;\n\t\talign-self: center;\n\t\tpadding-bottom: 0.1rem;\n\t}\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground: rgba(255, 255, 255, 0.034) !important;\n\t\t\tborder-color: rgba(194, 170, 194, 0.667) !important;\n\t\t\tcolor: rgb(231, 221, 231) !important;\n\t\t}\n\t}\n\t&:focus,\n\t&:focus-within {\n\t\tbackground: rgba(255, 255, 255, 0.034) !important;\n\t\tborder-color: rgba(194, 170, 194, 0.667) !important;\n\t\tcolor: rgb(231, 221, 231) !important;\n\t}\n\t&:active {\n\t\tbackground: rgba(255, 255, 255, 0.096) !important;\n\n\t\tborder-color: rgba(255, 255, 255, 0.667) !important;\n\t}\n}\nbutton.icon-btn {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tposition: relative;\n\tcursor: pointer;\n\n\tplace-items: center;\n\tplace-content: center;\n\n\twidth: 44px;\n\theight: 44px;\n\tborder: none;\n\tbackground-color: hsl(0deg 0% 0% / 0%);\n\tcolor: var(--color-dark);\n}\n\nbutton.danger {\n\tborder-color: #eb2019 !important;\n\tcolor: darken(#ff4949, 3%) !important;\n\tbackground: #5c191718 !important;\n\t&:hover {\n\t\tcolor: lighten(#ff4949, 3%) !important;\n\t\tborder-color: #eb2019b2 !important;\n\t\tbackground: #5c19174d !important;\n\t}\n\t&:active {\n\t\tcolor: lighten(#fafafa, 10%) !important;\n\t\tborder-color: #eb20195b !important;\n\t\tbackground: #c013136c !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_dropdown.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_dropdown.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".dd-text {\n\tdisplay: inline-block;\n\tmargin-left: 0.5em;\n\tfont-size: 0.95rem;\n\twhite-space: nowrap;\n\tcolor: inherit;\n}\n.dd-button svg circle {\n\t/* box-shadow: 0 0 0.5rem 0.125rem filter: drop-shadow(0rem 0.02rem 0.5rem black) contrast(1);#000; */\n\t/* outline: solid #11111161 1px; */\n\tposition: relative;\n\t&::before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\t-webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2);\n\t\tfilter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2);\n\t}\n}\n\n.dd-button svg {\n\t-webkit-filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%))\n\t\tdrop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2);\n\tfilter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%))\n\t\tcontrast(2);\n}\n\n.dd-item {\n\tz-index: 5;\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 0.667em;\n\talign-items: center;\n\tcursor: pointer;\n\tmargin: 0;\n\tfont-size: inherit;\n\n\tbackground-color: #0000;\n\tcolor: #fff9f9;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tposition: relative;\n\t&:hover {\n\t\tcolor: #fcf6f6;\n\t\tbackground-color: #585869;\n\t}\n\t&:active {\n\t\tbackground-color: #a0a0b1;\n\t}\n}\n\n.dd-menu {\n\tposition: absolute;\n\tdisplay: flex;\n\tflex-direction: column;\n\ttop: 0;\n\tleft: 0;\n\tborder-radius: var(--sm-radius);\n\tz-index: 200;\n\n\ttransform: translate(0px, 0px);\n\tbackground: #333333;\n\tborder: 1px #686868 solid;\n\tpointer-events: all;\n}\n.dd-player {\n\tposition: absolute;\n\ttop: 0%;\n\n\tisolation: isolate;\n\tleft: 0%;\n\tborder-radius: var(--lg-radius);\n\tz-index: 200;\n\n\tbackground: #333333;\n\tborder: 1px #5f5f5f solid;\n\tpointer-events: all;\n\n\tflex-direction: column;\n\tflex-wrap: nowrap;\n\t.dd-item * {\n\t\tcolor: #fcfcfc !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_heading.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_heading.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../base/variables\" as *;\n\n.header {\n\tdisplay: block;\n\tfont-weight: 600;\n\n\tmargin: 0 auto;\n\tpadding-block: 0.66667em;\n\tjustify-content: flex-start;\n\talign-items: baseline;\n\t/* white-space: pre; */\n\n\t@include content-width();\n\tmargin-bottom: 1.375em;\n\n\tmargin-top: 0.7em;\n\th1,\n\th2,\n\t.h1,\n\t.h2 {\n\t\tmargin-right: 0.175em;\n\t\tmargin-block: 0;\n\n\t\tdisplay: inline-block;\n\t}\n\t.subheading {\n\t\tmargin-bottom: 0.5em;\n\t}\n\ta {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tvertical-align: middle;\n\t}\n\ta small {\n\t\t$color: rgb(175, 175, 175);\n\t\tfont-size: 0.975em;\n\t\tfont-weight: 700;\n\t\tfont-variant-caps: all-petite-caps;\n\t\tletter-spacing: 0.05rem;\n\t\ttransition: ease-in color 75ms;\n\t\tcolor: $color;\n\t\t&:hover {\n\t\t\tcolor: lighten($color, 30%);\n\t\t\t-webkit-text-decoration: underline 0.001rem solid;\n\t\t\ttext-decoration: underline 0.001rem solid;\n\t\t\ttext-underline-offset: 0.001rem;\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_item.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_item.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".m-item {\n\tposition: relative;\n\tbackground-color: #0000;\n\ttransition: background-color cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground-color: scale-color(#57575831, $lightness: 10%);\n\t\t}\n\t}\n\t&:not(.menu):active {\n\t\tbackground-color: lighten(#d8d8d831, 5%);\n\t\ttransition: background-color cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;\n\t}\n\t&.flex {\n\t\tdisplay: flex;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_modules.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_modules.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"select\";\n\n@forward \"button\";\n@forward \"alert\";\n@forward \"heading\";\n@forward \"dropdown\";\n@forward \"item\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_nav.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_nav.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".nav-item {\n\tposition: relative;\n\tdisplay: block;\n}\n.nav-search {\n\tdisplay: inline-flex;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\twidth: 100%;\n\tpadding: 0 2rem;\n\tz-index: 15;\n\tbox-sizing: border-box;\n\talign-content: center;\n\tjustify-content: center;\n\tflex-wrap: nowrap;\n\tflex-direction: row;\n\tmax-width: 100%;\n\talign-items: center;\n\n\tbackground: inherit;\n\n\t&::before {\n\t\tbackdrop-filter: brightness(1.1);\n\t\tpointer-events: none;\n\t\tbox-shadow: 0 -0.5rem 1em 0.01rem #30303014 inset;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\twidth: 100%;\n\t\tcontent: \"\";\n\t\tz-index: -1;\n\t}\n}\n\n@media screen and (max-width: 719px) {\n\t.nav-search .x-button.icon-btn {\n\t\tdisplay: none !important;\n\t\tvisibility: none !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_player.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_player.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".listButton {\n\t-webkit-text-size-adjust: 100%;\n\talign-self: center;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\theight: auto;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmax-height: 44pt;\n\tmax-width: 44pt;\n\tmargin: 10pt;\n\twidth: auto;\n}\n.hidden {\n\tdisplay: none !important;\n}\n.player-btn {\n\t-webkit-text-size-adjust: 100%;\n\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\theight: auto;\n\tmax-height: 8em;\n\tmax-width: 8em;\n\tmargin: 0 0.1em;\n\tpadding: 1em;\n\n\tposition: relative;\n\twidth: auto;\n\tisolation: isolate;\n\n\t&::before {\n\t\tposition: absolute;\n\t\tcontent: \"\";\n\t\tz-index: -1;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tborder-radius: 50%;\n\t\topacity: 0;\n\t\ttransition: opacity, background linear 200ms;\n\n\t\tbackground-position: center;\n\t\tpadding: 8pt;\n\t}\n\t@media (hover: hover) {\n\t\t&:hover::before {\n\t\t\tbackground: #55555528 radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t&:active::before {\n\t\tbackground-size: 100%;\n\t\tbackground-color: #7272723f;\n\t\ttransition: background 0s;\n\t}\n}\n\n.controls {\n\tdisplay: flex;\n\tflex: 1 auto;\n\tflex-direction: column;\n\tflex-wrap: nowrap;\n\tpadding: inherit;\n}\n.player-container {\n\talign-items: center;\n\n\tbottom: 0;\n\tdisplay: flex;\n\theight: 100%;\n\tflex-wrap: nowrap;\n\n\tflex-direction: column;\n}\n\n.buttons {\n\tdisplay: flex;\n\tflex-direction: row;\n\n\talign-items: center;\n}\n.player {\n\tdisplay: grid;\n\tgrid-template-columns: 1.25fr 1.1fr 1.25fr;\n\tgrid-template-areas: \"n m r\";\n\tpadding-inline: 1em;\n\tmax-width: 100%;\n\tmin-width: calc(100% - 40px);\n\twidth: 100%;\n\talign-items: center;\n\t@media screen and (max-width: 600px) {\n\t\tgrid-template-columns: 3fr 1fr;\n\t\tgrid-template-areas: \"n r\";\n\t}\n}\ninput[type=\"range\"] {\n\t-webkit-appearance: none;\n\tbackground: none;\n\toverflow: hidden;\n\toutline: none;\n\tbackground: hsl(0, 0%, 20%);\n\tborder-radius: 1.666667rem;\n\theight: 0.6rem;\n\tcursor: pointer;\n\ttransition-duration: 0.2s;\n\n\t&:hover {\n\t\tbackground: hsl(0, 0%, 32%);\n\n\t\t&::-webkit-slider-thumb {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t&::-webkit-slider-runnable-track {\n\t\toverflow: hidden;\n\t}\n\t&::-webkit-slider-thumb {\n\t\t-webkit-appearance: none;\n\t\twidth: 0;\n\t\theight: 1rem;\n\t\tbackground: white;\n\t\tbox-shadow: -100vw -100vh 0 100vw white;\n\t\topacity: 0.7;\n\t\ttransition-duration: 0.2s;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_select.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_select.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".select {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: grid;\n\tcolor: inherit;\n\tmin-width: 15ch;\n\tmax-width: 30ch;\n\tmin-height: 5ch;\n\tmax-height: 30ch;\n\tposition: relative;\n\talign-content: center;\n\tfont-family: var(--base-font-family);\n\tbackground: var(--form-bg);\n\n\t-webkit-text-size-adjust: none;\n\tborder-radius: var(--xs-radius);\n\tgrid-template-columns: 1fr 0.5px;\n\tgrid-template-areas: \"select end\";\n\tborder: 0.0625rem solid hsla(0, 0%, 66.7%, 0.219);\n\ttransition: cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;\n\ttransition-property: filter, border, background;\n\t&:active,\n\t&:focus-within {\n\t\tfilter: brightness(1.15);\n\t\tborder: 0.25px rgb(114, 114, 114) solid;\n\t}\n\t@media screen and (hover: hover) {\n\t\t&:hover {\n\t\t\tfilter: brightness(1.07);\n\t\t\tborder: 0.25px rgba(114, 114, 114, 0.663) solid;\n\t\t}\n\t}\n\t&.inline {\n\t\tmax-width: 8rem;\n\t}\n\t&:disabled,\n\t[disabled] {\n\t\tcolor: var(--disabled-form-fg);\n\t\tbackground-color: var(--disabled-form-bg);\n\t}\n\t&::after {\n\t\tright: 0;\n\t\tcontent: \"\";\n\t\twidth: 0.6rem;\n\t\theight: 0.5rem;\n\t\tcolor: inherit;\n\t\tplace-self: end;\n\t\talign-self: center;\n\t\tmargin-right: 0.7rem;\n\t\tgrid-area: end !important;\n\n\t\tbackground-color: currentColor;\n\t\tclip-path: polygon(100% 0, 0 0, 50% 100%);\n\t\t-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);\n\t}\n\toption {\n\t\tbackground-color: #0d0e0ee0;\n\t}\n}\nselect {\n\t-webkit-text-size-adjust: auto;\n\n\toption {\n\t\tbackground-color: inherit;\n\t\tborder-radius: var(--md-radius);\n\t}\n\n\t&:active,\n\t&:focus-within {\n\t\tfilter: brightness(1.1);\n\t}\n\t-webkit-text-size-adjust: auto;\n\tbackground-color: var(--form-bg);\n\tmargin: 0;\n\twidth: 100%;\n\toutline: none;\n\tcolor: inherit;\n\theight: inherit;\n\tcursor: inherit;\n\tappearance: none;\n\twhite-space: pre;\n\tgrid-area: select;\n\tposition: relative;\n\tmin-height: inherit;\n\tmax-height: inherit;\n\tfont-family: inherit;\n\t-moz-appearance: none;\n\talign-content: center;\n\t-webkit-appearance: none;\n\tfont-size: 100% !important;\n\tborder-radius: var(--xs-radius);\n\tpadding: 0.2em 2em 0.325em 0.6em;\n\tborder: none;\n\ttransition: cubic-bezier(0.47, 0, 0.745, 0.715);\n\ttransition-duration: 100ms;\n\ttransition-property: filter, border, background;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/modules/_tooltip.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/modules/_tooltip.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./../base/variables\" as v;\n\n.tooltip {\n\tposition: absolute;\n\tdisplay: block;\n\tpointer-events: none;\n\n\topacity: 0;\n\twill-change: opacity, transform;\n\ttransition: opacity linear 150ms;\n\n\ttransform: translate(calc(var(--tt-pos-x)), var(--tt-pos-y));\n\ttransform-origin: center;\n\n\tborder: 1px solid #323232;\n\tbox-shadow: 0px 0px 1px #323232;\n\tbackground: #121212;\n\tfont-size: v.$size-1;\n\tborder-radius: 0.25em;\n\tpadding: 0.3em;\n\tfont-weight: 500;\n\tmin-width: 1em;\n\tmax-width: 20em;\n\ttext-transform: capitalize;\n\twidth: max-content;\n\n\tz-index: 500;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/_utility.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/_utility.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./functions/functions\";\n@forward \"./mixins/mixins\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/functions/_functions.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/functions/_functions.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./z-index\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/functions/_z-index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/functions/_z-index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../../base/variables\" as v;\n\n@function z-index($layer) {\n\t@if map-has-key(v.$z-index, $layer) {\n\t\t@return map-get(v.$z-index, $layer);\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/mixins/_layout.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/mixins/_layout.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/mixins/_media-query.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/mixins/_media-query.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "$breakpoint-widths: (\n\txs: 398px,\n\tsm: 576px,\n\tmd: 768px,\n\tlg: 992px,\n\txl: 1200px,\n\txxl: 1440px,\n);\n\n@function min-breakpoint($name, $breakpoints: $breakpoint-widths) {\n\t$min: map-get($breakpoints, $name);\n\t@return if($min != 0, $min, null);\n}\n@function max-breakpoint($name, $breakpoints: $breakpoint-widths) {\n\t$max: map-get($breakpoints, $name);\n\n\t@return if($max and $max > 0, $max - 0.02, null);\n}\n@function between-breakpoint($name, $breakpoints: $breakpoint-widths, $breakpoint-names: map-keys($breakpoints)) {\n\t$idx: index($breakpoint-names, $name);\n\t@if not $idx {\n\t\t@error \"No breakpoint found\";\n\t}\n\n\t@return if($idx < length($breakpoint-names), nth($breakpoint-names, $idx + 1), null);\n}\n\n@mixin media-query-up($name, $breakpoints: $breakpoint-widths) {\n\t$min: min-breakpoint($name, $breakpoints);\n\n\t@if $min {\n\t\t@media (min-width: $min) {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@content;\n\t}\n}\n@mixin media-query-down($name, $breakpoints: $breakpoint-widths) {\n\t$max: max-breakpoint($name, $breakpoints);\n\n\t@if $max {\n\t\t@media (max-width: $max) {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@content;\n\t}\n}\n\n@mixin media-query($name, $breakpoints: $breakpoint-widths) {\n\t$min: min-breakpoint($name, $breakpoints);\n\t$between: between-breakpoint($name, $breakpoints);\n\t$max: max-breakpoint($between, $breakpoints);\n\n\t@if $min != null and $max != null {\n\t\t@media (min-width: $min) and (max-width: $max) {\n\t\t\t@content;\n\t\t}\n\t} @else if $min == null {\n\t\t@include media-query-up($min) {\n\t\t\t@content;\n\t\t}\n\t} @else if $max == null {\n\t\t@include media-query-down($max) {\n\t\t\t@content;\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/mixins/_mixins.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/mixins/_mixins.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./media-query\";\n@forward \"./old\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/redesign/utility/mixins/_old.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/redesign/utility/mixins/_old.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"sass:math\";\n\n@mixin keyframe($animation_name) {\n\t@-webkit-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@-moz-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@-o-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@keyframes #{$animation_name} {\n\t\t@content;\n\t}\n}\n\n@mixin animation($delay, $duration, $infinite: false, $animation, $direction: forward, $fillmode: fowards) {\n\t-webkit-animation-delay: $delay;\n\t-webkit-animation-duration: $duration;\n\t-webkit-animation-name: $animation;\n\t-webkit-animation-fill-mode: $fillmode;\n\t-webkit-animation-direction: $direction;\n\n\t-moz-animation-delay: $delay;\n\t-moz-animation-duration: $duration;\n\t-moz-animation-name: $animation;\n\t-moz-animation-fill-mode: $fillmode;\n\t-moz-animation-direction: $direction;\n\n\tanimation-delay: $delay;\n\tanimation-duration: $duration;\n\tanimation-name: $animation;\n\tanimation-fill-mode: $fillmode;\n\tanimation-direction: $direction;\n\t@if ($infinite) {\n\t\tanimation-iteration-count: infinite;\n\t}\n}\n\n@mixin trim($numLines: null) {\n\t@if $numLines !=null {\n\t\t--line-height: 1.4;\n\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: $numLines;\n\t\t-webkit-box-orient: vertical;\n\t\tmax-height: calc(1rem * $numLines);\n\t\t--lines: #{$numLines};\n\t\t--max-lines: var(--lines);\n\t\t-webkit-line-clamp: var(--max-lines);\n\t\tmax-height: calc(var(--max-lines) * 1rem * var(--line-height));\n\t\toverflow: hidden;\n\t} @else {\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tdisplay: block;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@import \"scss/main.scss\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/_layout.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/_layout.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".no-scroll {\n\toverflow: hidden;\n\toverflow-y: hidden;\n}\n\n$sections: (\n\tbottom: (\n\t\tfooter-container,\n\t\tplayer,\n\t),\n\ttop: (\n\t\tnav,\n\t),\n\tforms: (\n\t\tselect,\n\t\tinput,\n\t\toption,\n\t\tsuggestions,\n\t),\n);\n$themes: (dark, dim, midnight, ytm);\n\n.footer-container {\n\twidth: 100%;\n\tmax-width: 100%;\n\tisolation: isolate;\n\tz-index: 25;\n\t@media screen and (min-width: 640px) {\n\t\tz-index: 152;\n\t}\n}\n\n.footer-container {\n\tbottom: 0;\n\tdisplay: block;\n\twidth: 100%;\n\tposition: fixed;\n\tcontain: layout;\n\theight: var(--player-bar-height);\n\tmin-width: 100%;\n\tdisplay: flex;\n\tmin-width: 100%;\n}\n\n:root .dark * {\n\tcolor: hsl(0, 0%, 95%);\n}\n.player {\n\tcolor: #f3f3f3;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_animations.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_animations.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./mixins\";\n@include mixins.keyframe(hover) {\n\tfrom {\n\t\toutline: transparent 0.1px solid;\n\t\tbackground-color: transparent;\n\t\topacity: 0;\n\t}\n\tto {\n\t\toutline: var(--color-gray-4) 0.1px solid;\n\t\tbackground-color: var(--transparent-gray-3);\n\t\topacity: 1;\n\t}\n}\n@include mixins.keyframe(fade) {\n\t0% {\n\t\topacity: 0;\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t}\n}\n@include mixins.keyframe(slide-out-top) {\n\tto {\n\t\ttransform: translate(100%, 50%);\n\t\topacity: 0;\n\t}\n\n\tfrom {\n\t\ttransform: translate(100%, 50%);\n\t\topacity: 1;\n\t}\n}\n@mixin anim($name: \"slide-up\") {\n\t@include mixins.keyframe($name) {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_base.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_base.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./cssvars\";\n@forward \"./variables\";\n@forward \"./reset\";\n@forward \"./animations\";\n\n@forward \"./fonts\";\n@forward \"./colors\";\n@forward \"./layout\";\n@forward \"./typography\";\n@forward \"./media\";\n@forward \"./forms\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_colors.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_colors.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_cssvars.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_cssvars.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./variables\" as vars;\n:root {\n\t--base-spacing: 0.75rem;\n\t--base-font-size: 0.75rem;\n\t--base-font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n\t\t\"Open Sans\", \"Helvetica Neue\", sans-serif;\n\n\t--secondary-font-family: \"CommissionerVariable\", sans-serif;\n\t--color-dark: hsl(0deg 0% 98%);\n\t--color-light: #111113;\n\t--color-med: #202024;\n\n\t--sm-spacing: #{vars.$sm-spacing};\n\t--md-spacing: #{vars.$md-spacing};\n\t--lg-spacing: #{vars.$lg-spacing};\n\t--xl-spacing: #{vars.$xl-spacing};\n\n\t--base-radius: 0.5rem;\n\t--xs-radius: #{vars.$xs-radius};\n\t--sm-radius: #{vars.$sm-radius};\n\t--md-radius: #{vars.$md-radius};\n\t--lg-radius: #{vars.$lg-radius};\n\t--xl-radius: #{vars.$xl-radius};\n\n\t--max-width: 85.375rem;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_fonts.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_fonts.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_forms.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_forms.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "form {\n\t&.inline {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\theight: auto;\n\t\tmin-height: 5ch;\n\t\tmax-height: 30ch;\n\t\tmargin-left: auto;\n\t}\n}\n\nlabel {\n\tfont-weight: 400;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tfont-variant-caps: all-small-caps;\n\tletter-spacing: -0.02em;\n}\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n\tdisplay: inline;\n\tfont-family: initial;\n\tmargin-right: calc(var(--sm-spacing) * 0.5);\n}\n\n[type=\"file\"] {\n\tmargin-bottom: var(--sm-spacing);\n\twidth: 100%;\n}\n\ninput:not([type=\"range\"]):not([type=\"checkbox\"]):not([type=\"radio\"]) {\n\tappearance: none;\n\tbackground: transparent;\n\tborder: none;\n\toutline: none;\n\tcolor: inherit;\n\tbox-sizing: border-box;\n\tfont-family: var(--base-font-family);\n\tletter-spacing: -0.02em;\n\tfont-size: 1em;\n}\n\ninput:not([type=\"range\"]):not([type=\"checkbox\"]):not([type=\"search\"]) {\n\tfont-family: inherit;\n\twidth: inherit;\n\tborder-radius: inherit;\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n\tdisplay: none;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button {\n\t-webkit-appearance: none;\n\theight: 1rem;\n\twidth: 1rem;\n\tbackground-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxcmVtIiBoZWlnaHQ9IjFyZW0iIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYmFiYWJhIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3R5bGU9IiYjMTA7Ij48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ii8+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPjwvc3ZnPg==\");\n\tcursor: pointer;\n}\n.input {\n\tposition: relative;\n\n\theight: auto;\n\tmin-height: 5ch;\n\tmax-height: 30ch;\n\tmin-width: 15ch;\n\tmax-width: 32ch;\n\twidth: 100%;\n\tpadding: 0.6666666667em;\n\n\ttransition: 100ms cubic-bezier(0.47, 0.25, 0.745, 0.715);\n\ttransition-property: border-color, filter, color;\n\n\tborder: 0.0625em solid hsla(0, 0%, 66.7%, 0.219);\n\tborder-radius: var(--sm-radius);\n\tbox-shadow: 0 0 0.25em 0.02em hsla(0, 0%, 66.7%, 0) !important;\n\n\tbackground: var(--form-bg);\n\n\t&.block {\n\t\tmax-width: 100%;\n\t}\n\t::placeholder {\n\t\tfont-weight: 400;\n\t\topacity: 0.7;\n\t}\n\n\t@media screen and (hover: hover) {\n\t\t&:hover {\n\t\t\tfilter: brightness(1.07);\n\t\t\tborder-color: rgba(114, 114, 114, 0.663);\n\t\t}\n\t}\n\t&:hover:active,\n\t&:focus-within {\n\t\tborder-color: rgba(158, 158, 158, 0.658);\n\t\tfilter: brightness(1.15);\n\t}\n\t[type=\"search\"] {\n\t\tmin-width: 15ch;\n\t\tmax-width: 80ch;\n\t}\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 31px;\n\tgrid-template-areas: \"start end\";\n\t&.no-btn {\n\t\tdisplay: block;\n\t}\n\t> input[type=\"text\"] {\n\t\t-webkit-appearance: none;\n\t\tbackground: #0000;\n\t\tborder: none;\n\t\tappearance: none;\n\t\twidth: inherit;\n\t}\n}\n\ninput[type=\"search\"] {\n\t-webkit-appearance: none;\n\tbackground: #0000;\n\tborder: none;\n\tappearance: none;\n\twidth: inherit;\n}\n\n.searchBtn {\n\tpointer-events: all;\n\tcursor: pointer;\n\tz-index: 5;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\tjustify-self: center;\n\n\twidth: 100%;\n\tz-index: 10;\n\tcolor: inherit;\n\n\tgrid-area: end;\n\tbackground-clip: content-box;\n\tborder-radius: inherit;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_layout.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_layout.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"./mixins\";\n@use \"sass:math\" as math;\n@use \"./variables\" as v;\nhtml {\n\tbox-sizing: border-box;\n\tscroll-behavior: smooth;\n\t-webkit-overflow-scrolling: touch;\n}\n\n*,\n*::before,\n*::after {\n\tbox-sizing: inherit;\n}\nhtml {\n\tfont-size: 10px;\n\toverscroll-behavior: contain;\n}\n\nhtml,\nbody {\n\tbackground-color: #010102;\n\tcolor: var(--color-dark);\n\tline-height: 1.75;\n\tposition: fixed;\n\tmin-height: 100vh;\n\tmin-width: 100vw;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\toverscroll-behavior: contain;\n\tmax-height: 100%;\n\toverflow: hidden;\n}\n\nbody {\n\tmargin: 0;\n}\n\n:root {\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tword-wrap: break-word;\n\t-webkit-text-size-adjust: 100%;\n\t--base-font-size: 0.75rem;\n\n\t/* ===== Scrollbar CSS ===== */\n\n\t* {\n\t\tscrollbar-gutter: 0.833333rem;\n\t\tscrollbar-width: thin;\n\t\tscrollbar-color: #c7c7c7 #5e5e5e2f;\n\t}\n\n\t::-webkit-scrollbar {\n\t\twidth: 0.916667rem;\n\t\theight: 0.916667rem;\n\t}\n\n\t::-webkit-scrollbar-track {\n\t\tbackground: #74747e21;\n\t\tborder-radius: 0.625rem;\n\t\theight: 0.916667rem;\n\t\twidth: 100%;\n\t\tbackground-clip: content-box;\n\t\tborder-radius: 0.833333rem;\n\t\tborder: transparent solid 0.0983333rem;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: #e0e0e0a8;\n\t\tborder-radius: 0.5625rem;\n\t\twidth: 0.5625rem;\n\t\tscrollbar-width: 0.625rem;\n\t\tborder: 0.25rem solid #b8b8b800;\n\t\tbackground-clip: content-box;\n\t}\n\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent !important;\n\t-webkit-font-smoothing: antialiased;\n\t--player-bar-height: #{math.round(math.clamp(4.5rem, 5rem, 7rem))};\n\t--top-bar-height: #{math.clamp(3.9em, 4.175em, 4.625em)};\n\ttext-rendering: auto;\n\n\t@media screen and (min-width: 40em) and (max-width: 96em) {\n\t\t--top-bar-height: #{math.clamp(3.8rem, 4rem, 4.75rem)};\n\t\t--base-font-size: 0.875rem;\n\t}\n\t@media screen and (min-width: 96em) and (max-width: 134em) {\n\t\t--top-bar-height: #{math.clamp(3.8rem, 4rem, 4.75rem)};\n\t\t--base-font-size: 1rem;\n\t}\n\t@media screen and (min-width: 134.75em) {\n\t\t--top-bar-height: #{math.clamp(3.8rem, 4rem, 4.75rem)};\n\t\t--base-font-size: 1.125rem;\n\t}\n}\n.tooltip {\n\tposition: fixed;\n\tdisplay: block;\n\tpointer-events: none;\n\n\topacity: 0;\n\twill-change: opacity, transform;\n\ttransition: opacity linear 150ms;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\ttransform: translate(calc(var(--tt-pos-x)), var(--tt-pos-y));\n\ttransform-origin: center;\n\n\tborder: 1px solid #323232;\n\tbox-shadow: 0px 0px 1px #323232;\n\tbackground: #121212;\n\tfont-size: v.$size-1;\n\tborder-radius: 0.25em;\n\tpadding: 0.3rem;\n\tfont-weight: 400;\n\tmin-width: 1rem;\n\tmax-width: 20rem;\n\ttext-transform: capitalize;\n\twidth: -webkit-max-content;\n\twidth: -moz-max-content;\n\twidth: max-content;\n\tposition: absolute;\n\tdisplay: block;\n\tz-index: 500;\n}\n\nbody {\n\tmargin: 0;\n\toverflow: hidden;\n\tposition: fixed;\n}\nhtml {\n\tfont-size: var(--base-font-size);\n}\n#app {\n\tposition: fixed;\n\theight: 100%;\n\twidth: 100%;\n\tline-height: 1.3;\n\tinset: 0;\n\n\tmax-width: 100%;\n\toverscroll-behavior: contain;\n\tisolation: isolate;\n\tcontain: paint;\n}\n@media (prefers-reduced-motion: reduce) {\n\t*,\n\t::before,\n\t::after {\n\t\t-webkit-animation-delay: -1ms !important;\n\t\tanimation-delay: -1ms !important;\n\t\t-webkit-animation-duration: 1ms !important;\n\t\tanimation-duration: 1ms !important;\n\t\t-webkit-animation-iteration-count: 1 !important;\n\t\tanimation-iteration-count: 1 !important;\n\t\tbackground-attachment: initial !important;\n\t\tscroll-behavior: auto !important;\n\t\ttransition-delay: 0s !important;\n\t\ttransition-duration: 0s !important;\n\t}\n}\nmain {\n\tmargin: 0 auto;\n\tposition: relative;\n\t@include v.content-spacing($type: \"padding\");\n\toverscroll-behavior: contain;\n\t@media screen and (min-width: 640px) {\n\t\t@include v.content-width();\n\t}\n}\n.backdrop {\n\tposition: fixed;\n\tz-index: 50;\n\tinset: 0;\n\toverflow: hidden;\n\tbackground-color: #00000063;\n\twidth: 100%;\n\theight: 100%;\n\tcontain: paint;\n}\n.wrapper {\n\toverflow: hidden;\n\toverflow-y: auto;\n\t-webkit-overflow-scrolling: touch;\n\tdisplay: block;\n\ttouch-action: pan-y;\n\toverscroll-behavior: contain;\n\tposition: absolute;\n\tinset: 0;\n\n\tisolation: isolate;\n}\n.app-content-p {\n}\n.app-content-m {\n\tmargin-block-start: calc(var(--top-bar-height) + 0px);\n\twill-change: margin-block-end;\n\t&[hasplayer=\"true\"] {\n\t\twill-change: unset;\n\t\tmargin-block-end: calc(var(--player-bar-height) + 0px);\n\t}\n}\n.hidden {\n\tdisplay: none !important;\n\tvisibility: hidden !important;\n}\n.no-scroll {\n\toverflow: hidden !important;\n\toverflow-y: hidden !important;\n}\n.soft-no-scroll {\n\toverflow: hidden !important;\n\toverflow-y: scroll !important;\n}\n\n.container {\n\tmax-width: 112rem;\n\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\tflex-direction: column;\n\t&.row {\n\t\tflex-direction: row;\n\t}\n}\n\n.resp-content-width {\n\tmargin: 0 auto;\n\t@include v.content-width(!important);\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_media.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_media.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "img,\npicture {\n\tmargin: 0;\n\tborder-radius: var(--xs-radius);\n\tmax-width: 100%;\n\n\t-webkit-user-drag: none;\n\t-khtml-user-drag: none;\n\t-moz-user-drag: none;\n\t-o-user-drag: none;\n\tuser-drag: none;\n\n\t-webkit-touch-callout: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-user-select: none;\n\tuser-select: none;\n}\n\nimg::before,\nvideo::before {\n\tdisplay: block;\n\tcontent: \"\";\n\tposition: absolute;\n\tpadding-top: calc(100% * 2 / 3);\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_mixins.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_mixins.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"sass:math\";\n\n@mixin keyframe($animation_name) {\n\t@-webkit-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@-moz-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@-o-keyframes #{$animation_name} {\n\t\t@content;\n\t}\n\n\t@keyframes #{$animation_name} {\n\t\t@content;\n\t}\n}\n\n@mixin animation($delay, $duration, $infinite: false, $animation, $direction: forward, $fillmode: fowards) {\n\t-webkit-animation-delay: $delay;\n\t-webkit-animation-duration: $duration;\n\t-webkit-animation-name: $animation;\n\t-webkit-animation-fill-mode: $fillmode;\n\t-webkit-animation-direction: $direction;\n\n\t-moz-animation-delay: $delay;\n\t-moz-animation-duration: $duration;\n\t-moz-animation-name: $animation;\n\t-moz-animation-fill-mode: $fillmode;\n\t-moz-animation-direction: $direction;\n\n\tanimation-delay: $delay;\n\tanimation-duration: $duration;\n\tanimation-name: $animation;\n\tanimation-fill-mode: $fillmode;\n\tanimation-direction: $direction;\n\t@if ($infinite) {\n\t\tanimation-iteration-count: infinite;\n\t}\n}\n\n@mixin trim($numLines: null) {\n\t@if $numLines !=null {\n\t\t--line-height: 1.4;\n\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: $numLines;\n\t\t-webkit-box-orient: vertical;\n\t\tmax-height: calc(1rem * $numLines);\n\t\t--lines: #{$numLines};\n\t\t--max-lines: var(--lines);\n\t\t-webkit-line-clamp: var(--max-lines);\n\t\tmax-height: calc(var(--max-lines) * 1rem * var(--line-height));\n\t\toverflow: hidden;\n\t} @else {\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tdisplay: block;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_reset.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_reset.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "/* Document\n * ========================================================================== */\n\n/**\n * Add border box sizing in all browsers (opinionated).\n */\n\n*,\n::before,\n::after {\n\tbox-sizing: border-box;\n}\n\n/**\n\t * 1. Add text decoration inheritance in all browsers (opinionated).\n\t * 2. Add vertical alignment inheritance in all browsers (opinionated).\n\t */\n\n::before,\n::after {\n\ttext-decoration: inherit;\n\tvertical-align: inherit;\n}\n\n/**\n\t * 1. Use the default cursor in all browsers (opinionated).\n\t * 2. Change the line height in all browsers (opinionated).\n\t * 3. Use a 4-space tab width in all browsers (opinionated).\n\t * 4. Remove the grey highlight on links in iOS (opinionated).\n\t * 5. Prevent adjustments of font size after orientation changes in\n\t * IE on Windows Phone and in iOS.\n\t * 6. Breaks words to prevent overflow in all browsers (opinionated).\n\t */\n\nhtml {\n\tcursor: default;\n\tline-height: 1.5;\n\t-moz-tab-size: 4;\n\ttab-size: 4;\n\t-webkit-tap-highlight-color: transparent;\n\t-ms-text-size-adjust: 100%;\n\t-webkit-text-size-adjust: 100%;\n\tword-break: break-word;\n}\n\n/* Sections\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin in all browsers (opinionated).\n\t */\n\nbody {\n\tmargin: 0;\n}\n\n/**\n\t * Correct the font size and margin on `h1` elements within `section` and\n\t * `article` contexts in Chrome, Edge, Firefox, and Safari.\n\t */\n\nh1 {\n\tfont-size: 2em;\n\tmargin: 0.67em 0;\n}\n\n/* Grouping content\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.\n\t */\n\ndl dl,\ndl ol,\ndl ul,\nol dl,\nul dl {\n\tmargin: 0;\n}\n\n/**\n\t * Remove the margin on nested lists in Edge 18- and IE.\n\t */\n\nol ol,\nol ul,\nul ol,\nul ul {\n\tmargin: 0;\n}\n\n/**\n\t * 1. Add the correct sizing in Firefox.\n\t * 2. Show the overflow in Edge 18- and IE.\n\t */\n\nhr {\n\theight: 0;\n\toverflow: visible;\n}\n\n/**\n\t * Add the correct display in IE.\n\t */\n\nmain {\n\tdisplay: block;\n}\n\n/**\n\t * Remove the list style on navigation lists in all browsers (opinionated).\n\t */\n\nnav ol,\nnav ul {\n\tlist-style: none;\n\tpadding: 0;\n}\n\n/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd `em` font sizing in all browsers.\n\t */\n\npre {\n\tfont-family: monospace, monospace;\n\tfont-size: 1em;\n}\n\n/* Text-level semantics\n\t * ========================================================================== */\n\n/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\na {\n\tbackground-color: transparent;\n}\n\n/**\n\t * Add the correct text decoration in Edge 18-, IE, and Safari.\n\t */\n\nabbr[title] {\n\ttext-decoration: underline;\n\ttext-decoration: underline dotted;\n}\n\n/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd `em` font sizing in all browsers.\n\t */\n\ncode,\nkbd,\nsamp {\n\tfont-family: monospace, monospace;\n\tfont-size: 1em;\n}\n\n/**\n\t * Add the correct font size in all browsers.\n\t */\n\nsmall {\n\tfont-size: smaller;\n}\n\n/* Embedded content\n\t * ========================================================================== */\n\n/*\n\t * Change the alignment on media elements in all browsers (opinionated).\n\t */\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n\tvertical-align: middle;\n}\n\n/**\n\t * Add the correct display in IE 9-.\n\t */\n\naudio,\nvideo {\n\tdisplay: inline-block;\n}\n\n/**\n\t * Add the correct display in iOS 4-7.\n\t */\n\naudio:not([controls]) {\n\tdisplay: none;\n\theight: 0;\n}\n\n/**\n\t * Remove the border on iframes in all browsers (opinionated).\n\t */\n\niframe {\n\tborder-style: none;\n}\n\n/**\n\t * Remove the border on images within links in IE 10-.\n\t */\n\nimg {\n\tborder-style: none;\n}\n\n/**\n\t * Change the fill color to match the text color in all browsers (opinionated).\n\t */\n\nsvg:not([fill]) {\n\tfill: currentColor;\n}\n\n/**\n\t * Hide the overflow in IE.\n\t */\n\nsvg:not(:root) {\n\toverflow: hidden;\n}\n\n/* Tabular data\n\t * ========================================================================== */\n\n/**\n\t * Collapse border spacing in all browsers (opinionated).\n\t */\n\ntable {\n\tborder-collapse: collapse;\n}\n\n/* Forms\n\t * ========================================================================== */\n\n/**\n\t * Remove the margin on controls in Safari.\n\t */\n\nbutton,\ninput,\nselect {\n\tmargin: 0;\n}\n\n/**\n\t * 1. Show the overflow in IE.\n\t * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.\n\t */\n\nbutton {\n\toverflow: visible;\n\ttext-transform: none;\n}\n\n/**\n\t * Correct the inability to style buttons in iOS and Safari.\n\t */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n\t-webkit-appearance: button;\n}\n\n/**\n\t * 1. Change the inconsistent appearance in all browsers (opinionated).\n\t * 2. Correct the padding in Firefox.\n\t */\n\nfieldset {\n\tborder: 1px solid #a0a0a0;\n\tpadding: 0.35em 0.75em 0.625em;\n}\n\n/**\n\t * Show the overflow in Edge 18- and IE.\n\t */\n\ninput {\n\toverflow: visible;\n}\n\n/**\n\t * 1. Correct the text wrapping in Edge 18- and IE.\n\t * 2. Correct the color inheritance from `fieldset` elements in IE.\n\t */\n\nlegend {\n\tcolor: inherit;\n\tdisplay: table;\n\tmax-width: 100%;\n\twhite-space: normal;\n}\n\n/**\n\t * 1. Add the correct display in Edge 18- and IE.\n\t * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.\n\t */\n\nprogress {\n\tdisplay: inline-block;\n\tvertical-align: baseline;\n}\n\n/**\n\t * Remove the inheritance of text transform in Firefox.\n\t */\n\nselect {\n\ttext-transform: none;\n}\n\n/**\n\t * 1. Remove the margin in Firefox and Safari.\n\t * 2. Remove the default vertical scrollbar in IE.\n\t * 3. Change the resize direction in all browsers (opinionated).\n\t */\n\ntextarea {\n\tmargin: 0;\n\toverflow: auto;\n\tresize: vertical;\n}\n\n/**\n\t * Remove the padding in IE 10-.\n\t */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n\tpadding: 0;\n}\n\n/**\n\t * 1. Correct the odd appearance in Chrome, Edge, and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n[type=\"search\"] {\n\t-webkit-appearance: textfield;\n\toutline-offset: -2px;\n}\n\n/**\n\t * Correct the cursor style of increment and decrement buttons in Safari.\n\t */\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/**\n\t * Correct the text style of placeholders in Chrome, Edge, and Safari.\n\t */\n\n::-webkit-input-placeholder {\n\tcolor: inherit;\n\topacity: 0.54;\n}\n\n/**\n\t * Remove the inner padding in Chrome, Edge, and Safari on macOS.\n\t */\n\n::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/**\n\t * 1. Correct the inability to style upload buttons in iOS and Safari.\n\t * 2. Change font properties to `inherit` in Safari.\n\t */\n\n::-webkit-file-upload-button {\n\t-webkit-appearance: button;\n\tfont: inherit;\n}\n\n/**\n\t * Remove the inner border and padding of focus outlines in Firefox.\n\t */\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/**\n\t * Restore the focus outline styles unset by the previous rule in Firefox.\n\t */\n\n:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n/**\n\t * Remove the additional :invalid styles in Firefox.\n\t */\n\n:-moz-ui-invalid {\n\tbox-shadow: none;\n}\n\n/* Interactive\n\t * ========================================================================== */\n\n/*\n\t * Add the correct display in Edge 18- and IE.\n\t */\n\ndetails {\n\tdisplay: block;\n}\n\n/*\n\t * Add the correct styles in Edge 18-, IE, and Safari.\n\t */\n\ndialog {\n\tbackground-color: white;\n\tborder: solid;\n\tcolor: black;\n\tdisplay: block;\n\theight: -moz-fit-content;\n\theight: -webkit-fit-content;\n\theight: fit-content;\n\tleft: 0;\n\tmargin: auto;\n\tpadding: 1em;\n\tposition: absolute;\n\tright: 0;\n\twidth: -moz-fit-content;\n\twidth: -webkit-fit-content;\n\twidth: fit-content;\n}\n\ndialog:not([open]) {\n\tdisplay: none;\n}\n\n/*\n\t * Add the correct display in all browsers.\n\t */\n\nsummary {\n\tdisplay: list-item;\n}\n\n/* Scripting\n\t * ========================================================================== */\n\n/**\n\t * Add the correct display in IE 9-.\n\t */\n\ncanvas {\n\tdisplay: inline-block;\n}\n\n/**\n\t * Add the correct display in IE.\n\t */\n\ntemplate {\n\tdisplay: none;\n}\n\n/* User interaction\n\t * ========================================================================== */\n\n/*\n\t * 1. Remove the tapping delay in IE 10.\n\t * 2. Remove the tapping delay on clickable elements\n\t\t\t\tin all browsers (opinionated).\n\t */\n\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n\t-ms-touch-action: manipulation;\n\ttouch-action: manipulation;\n}\n\n/**\n\t * Add the correct display in IE 10-.\n\t */\n\n[hidden] {\n\tdisplay: none;\n}\n\n/* Accessibility\n\t * ========================================================================== */\n\n/**\n\t * Change the cursor on busy elements in all browsers (opinionated).\n\t */\n\n[aria-busy=\"true\"] {\n\tcursor: progress;\n}\n\n/*\n\t * Change the cursor on control elements in all browsers (opinionated).\n\t */\n\n[aria-controls] {\n\tcursor: pointer;\n}\n\n/*\n\t * Change the cursor on disabled, not-editable, or otherwise\n\t * inoperable elements in all browsers (opinionated).\n\t */\n\n[aria-disabled=\"true\"],\n[disabled] {\n\tcursor: not-allowed;\n}\n\n/*\n\t * Change the display on visually hidden accessible elements\n\t * in all browsers (opinionated).\n\t */\n\n[aria-hidden=\"false\"][hidden] {\n\tdisplay: initial;\n}\n\n[aria-hidden=\"false\"][hidden]:not(:focus) {\n\tclip: rect(0, 0, 0, 0);\n\tposition: absolute;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_theme.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_theme.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "$sections: (\n\tbottom: (\n\t\tfooter-container,\n\t\tplayer,\n\t),\n\ttop: (\n\t\tnav,\n\t),\n\tform: (\n\t\tselect,\n\t\tinput,\n\t\toption,\n\t\tsuggestions,\n\t),\n);\n$themes: (\n\tYTM: (\n\t\t\"bottom\": linear-gradient(0deg, #121018 28%, #18171e 100%),\n\t\t\"base\": #010102,\n\t\t\"top\": #010102,\n\t\t\"form\": #1b1922,\n\t\t\"side\": #0e0c13,\n\t),\n\tDark: (\n\t\t\"bottom\": linear-gradient(0deg, #121216 28%, #1a1a20 100%),\n\t\t\"base\": #010102,\n\t\t\"top\": linear-gradient(0deg, #101014 28%, #17171d 100%),\n\t\t\"form\": #1c1f20,\n\t\t\"side\": #15191d,\n\t),\n\tDim: (\n\t\t\"bottom\": #141820,\n\t\t\"base\": #010102,\n\t\t\"top\": #141820,\n\t\t\"form\": #1c1f20,\n\t\t\"side\": #0f1116,\n\t),\n\tMidnight: (\n\t\t\"base\": #010102,\n\t\t\"top\": hsl(267, 14%, 6%),\n\t\t\"side\": #15131f,\n\t\t\"bottom\": linear-gradient(0deg, #12131c 32%, #191a26 100%),\n\t\t\"form\": #1b1922,\n\t),\n);\n$theme-name: (Dark, Dim, Midnight, YTM);\n$section-names: (base, top, side, bottom, form);\n\n:root {\n\t--mobile-popper-bg: unset;\n}\nhtml {\n\t@each $section in $section-names {\n\t\t@each $theme in $theme-name {\n\t\t\t--#{$theme}-#{$section}: #{map-get($themes, $theme, $section)};\n\t\t}\n\t}\n\t@each $theme in $theme-name {\n\t\t&.#{$theme} {\n\t\t\t--mobile-popper-bg: #{map-get($themes, $theme, \"side\")};\n\t\t\t--form-bg: #{map-get($themes, $theme, \"form\")};\n\t\t\t--disabled-form-bg: #{scale-color(map-get($themes, $theme, \"form\"), $lightness: 17%, $alpha: -25%)};\n\t\t\t--disabled-form-fg: #{scale-color(map-get($themes, $theme, \"form\"), $lightness: 60%)};\n\t\t\t--bottom-bg: #{map-get($themes, $theme, \"bottom\")};\n\t\t\t--top-bg: #{map-get($themes, $theme, \"top\")};\n\t\t\t--base-bg: #{map-get($themes, $theme, \"base\")};\n\t\t\tbackground: var(--base-bg);\n\n\t\t\t@each $section, $elm in $sections {\n\t\t\t\t.#{$elm} {\n\t\t\t\t\tbackground: #{var(--#{$section}-bg)};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_typography.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_typography.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\n.h1,\n.h2,\n.h3,\n.h4,\n.h5,\n.h6,\n.subheading {\n\tcolor: var(--color-dark);\n\tfont-family: \"CommissionerVariable\", sans-serif;\n\n\tline-height: 1.2;\n\tfont-weight: 500;\n\tmargin: 0.3125em 0 1.38rem;\n}\n\nh1,\n.h1 {\n\tfont-size: 2.488rem;\n\tfont-weight: 700;\n\tletter-spacing: -0.03em;\n}\n\nh2,\n.h2 {\n\tfont-size: 2.174rem;\n\tfont-weight: 700;\n}\n\nh3,\n.h3 {\n\tfont-size: 1.728em;\n}\n\nh4,\n.h4 {\n\tfont-size: 1.44em;\n}\n\nh5,\n.h5 {\n\tfont-size: 1.2em;\n}\n\nh6,\n.h6 {\n\tfont-size: 1em;\n}\n\np {\n\tmargin: 0 0 var(--sm-spacing);\n\tfont-size: 1em;\n}\na.no-style {\n\ttext-decoration: none;\n\t&:focus,\n\t&:focus-visible,\n\t&:focus-within {\n\t\toutline: none;\n\t}\n}\na:not(.no-style),\n.link:not(.no-style) {\n\t$link-color: rgb(245, 245, 245);\n\tcolor: rgb(245, 245, 245);\n\n\ttext-decoration: none;\n\ttransition: color 0.2s;\n\tdisplay: inline;\n\t&.link {\n\t\tfont-weight: 500;\n\t}\n\t&:active,\n\t&:focus,\n\t&:hover {\n\t\t-webkit-text-decoration: underline 0.001em solid;\n\t\ttext-decoration: underline 0.001em solid;\n\t\ttext-underline-offset: 0.001em;\n\t\tcolor: darken($link-color, 15%);\n\t\toutline: none;\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n}\n\nstrong,\nem,\nsmall,\ncode,\nhr {\n\tline-height: 1.25;\n}\n\n.secondary {\n\tcolor: rgba(255, 255, 255, 0.7) !important;\n\tfont-weight: 400;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/base/_variables.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/base/_variables.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"sass:math\" as m;\n\n$size-base: 0.75rem;\n$size-1: 1rem;\n$size-2: 1.2rem;\n$size-3: 1.44rem;\n$size-4: 1.728rem;\n$size-5: 2.074rem;\n\n$base-spacing: 0.75em;\n$sm-spacing: m.div($base-spacing, 2.5);\n$md-spacing: $base-spacing;\n$lg-spacing: calc($base-spacing * 2);\n$xl-spacing: calc($base-spacing * 1.25);\n\n$base-radius: 0.5em;\n$xs-radius: m.div($base-radius, 0.95);\n$sm-radius: m.div($base-radius, 0.8);\n$md-radius: m.div($base-radius, 0.625);\n$lg-radius: m.div($base-radius, 0.5);\n$xl-radius: m.div($base-radius, 0.3125);\n\n$secondary-font-family: \"CommissionerVariable\", sans-serif;\n\n$line-height: 1.5;\n\n$content-width-mobile: calc(100vw - 2.25rem);\n\n$content-width-md: calc(100vw - 0.5625rem - 14rem);\n$content-width-lg: 82rem;\n$content-width-xl: 87.5rem;\n\n@mixin content-spacing($type: \"padding\") {\n\t#{$type}: 1em 0 5vh;\n\t#{$type}-bottom: 3.3125vh !important;\n\t@media only screen and (min-width: 640px) and (max-width: 1079.9px) {\n\t\t#{$type}: 3vh 1rem 0 2rem;\n\t\t#{$type}-bottom: 0.8rem;\n\t}\n\t@media only screen and (min-width: 1080px) and (max-width: 1366px) {\n\t\t#{$type}: 4vh 2rem 0 2rem;\n\t\t#{$type}-bottom: 0.8rem;\n\t}\n\t@media only screen and (min-width: 1367px) and (max-width: 1600px) {\n\t\t#{$type}: 5vh 2rem 0 2rem;\n\t}\n\t@media only screen and (min-width: 1601px) {\n\t\t#{$type}: 3vh 2rem 0 2rem;\n\t}\n}\n\n@mixin content-width($important: \"\") {\n\tmax-width: $content-width-mobile #{$important};\n\t@media only screen and (min-width: 1080px) and (max-width: 1366px) {\n\t\tmax-width: $content-width-md #{$important};\n\t}\n\t@media only screen and (min-width: 1367px) and (max-width: 1600px) {\n\t\tmax-width: $content-width-lg #{$important};\n\t}\n\t@media only screen and (min-width: 1601px) {\n\t\tmax-width: $content-width-xl #{$important};\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/components/_carousel.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/components/_carousel.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/components/_header.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/components/_header.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".nav-item {\n\tposition: relative;\n\tdisplay: block;\n}\n.nav-search {\n\tdisplay: inline-flex;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\twidth: 100%;\n\tpadding: 0 2rem;\n\tz-index: 15;\n\tbox-sizing: border-box;\n\talign-content: center;\n\tjustify-content: center;\n\tflex-wrap: nowrap;\n\tflex-direction: row;\n\tmax-width: 100%;\n\talign-items: center;\n\n\tbackground: inherit;\n\n\t&::before {\n\t\tbackdrop-filter: brightness(1.1);\n\t\tpointer-events: none;\n\t\tbox-shadow: 0 -0.5rem 1em 0.01rem #30303014 inset;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\twidth: 100%;\n\t\tcontent: \"\";\n\t\tz-index: -1;\n\t}\n}\n\n@media screen and (max-width: 719px) {\n\t.nav-search .x-button.icon-btn {\n\t\tdisplay: none !important;\n\t\tvisibility: none !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/components/_item.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/components/_item.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/components/_player.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/components/_player.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".listButton {\n\t-webkit-text-size-adjust: 100%;\n\talign-self: center;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\theight: auto;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmax-height: 44pt;\n\tmax-width: 44pt;\n\tmargin: 10pt;\n\twidth: auto;\n}\n.hidden {\n\tdisplay: none !important;\n}\n.player-btn {\n\t-webkit-text-size-adjust: 100%;\n\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\theight: auto;\n\tmax-height: 8em;\n\tmax-width: 8em;\n\tmargin: 0 0.1em;\n\tpadding: 0.8em;\n\n\tposition: relative;\n\twidth: auto;\n\tisolation: isolate;\n\n\t&::before {\n\t\tposition: absolute;\n\t\tcontent: \"\";\n\t\tz-index: -1;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tborder-radius: 50%;\n\t\topacity: 0;\n\t\ttransition: opacity, background linear 200ms;\n\n\t\tbackground-position: center;\n\t\tpadding: 8pt;\n\t}\n\t@media (hover: hover) {\n\t\t&:hover::before {\n\t\t\tbackground: #55555528 radial-gradient(circle, transparent 1%, #55555528 1%) center/15000%;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t&:active::before {\n\t\tbackground-size: 100%;\n\t\tbackground-color: #7272723f;\n\t\ttransition: background 0s;\n\t}\n}\n\n.controls {\n\tdisplay: flex;\n\tflex: 1 auto;\n\tflex-direction: column;\n\tflex-wrap: nowrap;\n\tpadding: inherit;\n}\n.player-container {\n\talign-items: center;\n\n\tbottom: 0;\n\tdisplay: flex;\n\theight: 100%;\n\tflex-wrap: nowrap;\n\n\tflex-direction: column;\n}\n\n.buttons {\n\tdisplay: flex;\n\tflex-direction: row;\n\n\talign-items: center;\n}\n.player {\n\tdisplay: grid;\n\tgrid-template-columns: 1.25fr 1.1fr 1.25fr;\n\tgrid-template-areas: \"n m r\";\n\tpadding-inline: 1em;\n\tmax-width: 100%;\n\tmin-width: calc(100% - 40px);\n\twidth: 100%;\n\talign-items: center;\n\t@media screen and (max-width: 600px) {\n\t\tgrid-template-columns: 3fr 1fr;\n\t\tgrid-template-areas: \"n r\";\n\t}\n}\ninput[type=\"range\"] {\n\t-webkit-appearance: none;\n\tbackground: none;\n\toverflow: hidden;\n\toutline: none;\n\tbackground: #333333;\n\tborder-radius: 1.666667rem;\n\theight: 0.6rem;\n\tcursor: pointer;\n\ttransition-duration: 0.2s;\n\n\t&:hover {\n\t\tbackground: rgba(255, 255, 255, 0.295);\n\n\t\t&::-webkit-slider-thumb {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t&::-webkit-slider-runnable-track {\n\t\toverflow: hidden;\n\t}\n\t&::-webkit-slider-thumb {\n\t\t-webkit-appearance: none;\n\t\twidth: 0;\n\t\theight: 1rem;\n\t\tbackground: white;\n\t\tbox-shadow: -100vw -100vh 0 100vw white;\n\t\topacity: 0.7;\n\t\ttransition-duration: 0.2s;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/main.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/main.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./utilities/utilities\";\n@forward \"./base/theme\";\n@forward \"./base/base\";\n@forward \"./modules/modules\";\n\n@forward \"./components/header\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_alert.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_alert.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".alert {\n\tmargin-bottom: 1.125rem;\n}\n.m-alert {\n\tposition: relative;\n\tdisplay: block;\n\tmax-width: 85.735rem;\n\tpadding: 1rem 2rem;\n\tborder-radius: 0.8rem;\n\twidth: calc(100% - 2rem);\n\tmargin: 1em auto 0;\n\ttext-align: center;\n\ttext-shadow: 0.1rem 0.05rem rgba(0, 0, 0, 0.685);\n\tcolor: #fff;\n\tbackground-color: #ce7c7c;\n\t&-error {\n\t\t@extend .m-alert;\n\t\tbackground-color: #b32f2a !important;\n\t}\n\t&-success {\n\t\t@extend .m-alert;\n\t\tbackground-color: #1d964b !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_button.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_button.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../base/variables\" as v;\n@use \"sass:color\";\n\n$background: hsl(0deg 0% 98%);\n$color: #0d0d0d;\n$focus-background: #aaa;\n$focus-color: #1c1c1c;\n%active {\n\tcolor: $focus-color;\n\n\tborder-color: $focus-color !important;\n\n\toutline: 0;\n\ttext-decoration: none;\n\tcursor: pointer;\n}\n%button-base {\n\tdisplay: inline-flex;\n\tcolor: #0f0f0f !important;\n\tbackground: $background;\n\n\tborder: 0.15em solid hsl(0deg 0% 7%);\n\tborder-radius: v.$base-radius;\n\tfont-family: \"CommissionerVariable\", sans-serif;\n\tcursor: pointer;\n\tfont-size: 1em;\n\tgap: 0.25em;\n\tfont-weight: 550;\n\ttext-transform: none;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpadding: 0.63125em 1.25em;\n\ttext-transform: capitalize;\n\tfont-size: 1em;\n\tjustify-content: center;\n\talign-items: center;\n\tvertical-align: middle;\n\ttransition: background linear 75ms, color linear 75ms;\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tcolor: #252525 !important;\n\t\t\tbackground: color.scale($focus-background, $lightness: 12%) !important;\n\t\t\tborder-color: #202020 !important;\n\t\t\tbox-shadow: -0.01em -0.01em 0.1em 0rem rgba(0, 0, 0, 0.904) inset;\n\t\t\toutline: 0;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\t&:focus,\n\t&:focus-within,\n\t&:active,\n\t&.active {\n\t\tborder-color: $focus-color !important;\n\t\tbackground: color.scale($focus-background, $lightness: 25%) !important;\n\n\t\tcolor: $focus-color;\n\n\t\tborder-color: $focus-color !important;\n\n\t\toutline: 0;\n\t\ttext-decoration: none;\n\t\tcursor: pointer;\n\t}\n\t&:disabled,\n\t.disabled {\n\t\tbackground: rgb(44, 44, 44) !important;\n\t\tcolor: #979797 !important;\n\t\tcursor: not-allowed;\n\t\tborder-color: #444;\n\t\t&:hover {\n\t\t\tbackground: rgb(44, 44, 44) !important;\n\t\t}\n\t}\n\t&:hover:active,\n\t&:active {\n\t\tbackground: color.scale($focus-background, $lightness: 15%) !important;\n\t}\n}\n\nbutton:not(.icon-btn),\n.button {\n\t@extend %button-base;\n}\n\nbutton.small {\n\t@extend %button-base;\n\tmax-width: -webkit-fit-content;\n\tmax-width: -moz-fit-content;\n\tmax-width: fit-content;\n}\n\nbutton.has-icon {\n\tdisplay: inline-flex;\n\tjustify-items: center;\n\tjustify-content: center;\n\t> .text {\n\t\tmargin-left: 0.125rem;\n\t}\n}\n\nbutton.outlined {\n\tbackground: #0000 !important;\n\tborder: $background 0.1em solid !important;\n\tcolor: $background !important;\n\tfont-weight: 525;\n\n\t&:active {\n\t\tborder: rgb(158, 158, 158) 0.1rem solid !important;\n\t\tbackground: rgba(255, 255, 255, 0.027) !important;\n\t\tbox-shadow: 0 0 0.1em 0 inset black;\n\t\tcolor: rgb(236, 236, 236) !important;\n\t}\n\n\t.button-text {\n\t\tmargin-left: 0.2rem;\n\t\talign-self: center;\n\t\tpadding-bottom: 0.1rem;\n\t}\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground: rgba(255, 255, 255, 0.034) !important;\n\t\t\tborder-color: rgba(194, 170, 194, 0.667) !important;\n\t\t\tcolor: rgb(231, 221, 231) !important;\n\t\t}\n\t}\n\t&:focus,\n\t&:focus-within {\n\t\tbackground: rgba(255, 255, 255, 0.034) !important;\n\t\tborder-color: rgba(194, 170, 194, 0.667) !important;\n\t\tcolor: rgb(231, 221, 231) !important;\n\t}\n\t&:active {\n\t\tbackground: rgba(255, 255, 255, 0.096) !important;\n\n\t\tborder-color: rgba(255, 255, 255, 0.667) !important;\n\t}\n}\nbutton.icon-btn {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tposition: relative;\n\tcursor: pointer;\n\n\tplace-items: center;\n\tplace-content: center;\n\n\twidth: 44px;\n\theight: 44px;\n\tborder: none;\n\tbackground-color: hsl(0deg 0% 0% / 0%);\n\tcolor: var(--color-dark);\n}\n\nbutton.danger {\n\tborder-color: #eb2019 !important;\n\tcolor: darken(#ff4949, 3%) !important;\n\tbackground: #5c191718 !important;\n\t&:hover {\n\t\tcolor: lighten(#ff4949, 3%) !important;\n\t\tborder-color: #eb2019b2 !important;\n\t\tbackground: #5c19174d !important;\n\t}\n\t&:active {\n\t\tcolor: lighten(#fafafa, 10%) !important;\n\t\tborder-color: #eb20195b !important;\n\t\tbackground: #c013136c !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_dropdown.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_dropdown.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".dd-text {\n\tdisplay: inline-block;\n\tmargin-left: 0.5em;\n\tfont-size: 0.95rem;\n\twhite-space: nowrap;\n\tcolor: inherit;\n}\n.dd-button svg circle {\n\t/* box-shadow: 0 0 0.5rem 0.125rem filter: drop-shadow(0rem 0.02rem 0.5rem black) contrast(1);#000; */\n\t/* outline: solid #11111161 1px; */\n\tposition: relative;\n\t&::before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\t-webkit-filter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2);\n\t\tfilter: drop-shadow(0rem 0rem 0.15rem hsl(0deg 0% 0% / 52%)) contrast(2);\n\t}\n}\n\n.dd-button svg {\n\t-webkit-filter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%))\n\t\tdrop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%)) contrast(2);\n\tfilter: drop-shadow(-0rem -0rem 0.05rem hsl(0deg 0% 0% / 99%)) drop-shadow(0rem 0rem 0.05rem hsl(0deg 0% 0% / 99%))\n\t\tcontrast(2);\n}\n\n.dd-item {\n\tz-index: 5;\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 0.667em;\n\talign-items: center;\n\tcursor: pointer;\n\tmargin: 0;\n\tfont-size: inherit;\n\n\tbackground-color: #0000;\n\tcolor: #fff9f9;\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\tposition: relative;\n\t&:hover {\n\t\tcolor: #fcf6f6;\n\t\tbackground-color: #585869;\n\t}\n\t&:active {\n\t\tbackground-color: #a0a0b1;\n\t}\n}\n\n.dd-menu {\n\tposition: absolute;\n\tdisplay: flex;\n\tflex-direction: column;\n\ttop: 0;\n\tleft: 0;\n\tborder-radius: var(--sm-radius);\n\tz-index: 200;\n\n\ttransform: translate(0px, 0px);\n\tbackground: #333333;\n\tborder: 1px #686868 solid;\n\tpointer-events: all;\n}\n.dd-player {\n\tposition: absolute;\n\ttop: 0%;\n\n\tisolation: isolate;\n\tleft: 0%;\n\tborder-radius: var(--lg-radius);\n\tz-index: 200;\n\n\tbackground: #333333;\n\tborder: 1px #5f5f5f solid;\n\tpointer-events: all;\n\n\tflex-direction: column;\n\tflex-wrap: nowrap;\n\t.dd-item * {\n\t\tcolor: #fcfcfc !important;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_heading.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_heading.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@use \"../base/variables\" as *;\n\n.header {\n\tdisplay: block;\n\tfont-weight: 600;\n\n\tmargin: 0 auto;\n\tpadding-block: 0.66667em;\n\tjustify-content: flex-start;\n\talign-items: baseline;\n\t/* white-space: pre; */\n\n\t@include content-width();\n\tmargin-bottom: 1.38rem;\n\tmargin-top: 1.667rem;\n\th1,\n\th2,\n\t.h1,\n\t.h2 {\n\t\tmargin-right: 0.175em;\n\t\tmargin-block: 0;\n\n\t\tdisplay: inline-block;\n\t}\n\t.subheading {\n\t\tmargin-bottom: 0.5em;\n\t}\n\ta {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tvertical-align: middle;\n\t\t&::before {\n\t\t\tcontent: \"\";\n\n\t\t\tposition: absolute;\n\n\t\t\tdisplay: block;\n\n\t\t\tpadding-block-end: 1em;\n\t\t\tinset: -0.2125em;\n\t\t}\n\t}\n\ta small {\n\t\t$color: rgb(175, 175, 175);\n\t\tfont-size: 0.975em;\n\t\tfont-weight: 700;\n\t\tfont-variant-caps: all-petite-caps;\n\t\tletter-spacing: 0.05rem;\n\t\ttransition: ease-in color 75ms;\n\t\tcolor: $color;\n\t\t&:hover {\n\t\t\tcolor: lighten($color, 30%);\n\t\t\t-webkit-text-decoration: underline 0.001rem solid;\n\t\t\ttext-decoration: underline 0.001rem solid;\n\t\t\ttext-underline-offset: 0.001rem;\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_item.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_item.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".m-item {\n\tposition: relative;\n\tbackground-color: #0000;\n\ttransition: background-color cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground-color: scale-color(#57575831, $lightness: 10%);\n\t\t}\n\t}\n\t&:not(.menu):active {\n\t\tbackground-color: lighten(#d8d8d831, 5%);\n\t\ttransition: background-color cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;\n\t}\n\t&.flex {\n\t\tdisplay: flex;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_modules.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_modules.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"select\";\n\n@forward \"button\";\n@forward \"alert\";\n@forward \"heading\";\n@forward \"dropdown\";\n@forward \"item\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/modules/_select.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/modules/_select.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".select {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: grid;\n\tcolor: inherit;\n\tmin-width: 15ch;\n\tmax-width: 30ch;\n\tmin-height: 5ch;\n\tmax-height: 30ch;\n\tposition: relative;\n\talign-content: center;\n\tfont-family: var(--base-font-family);\n\twill-change: contents;\n\t-webkit-text-size-adjust: none;\n\tborder-radius: var(--md-radius);\n\tgrid-template-columns: 1fr 0.5px;\n\tgrid-template-areas: \"select end\";\n\tborder: 0.0625rem solid hsla(0, 0%, 66.7%, 0.219);\n\ttransition: cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;\n\ttransition-property: filter, border, background;\n\t&:active,\n\t&:focus-within {\n\t\tfilter: brightness(1.15);\n\t\tborder: 0.25px rgb(114, 114, 114) solid;\n\t}\n\t@media screen and (hover: hover) {\n\t\t&:hover {\n\t\t\tfilter: brightness(1.07);\n\t\t\tborder: 0.25px rgba(114, 114, 114, 0.663) solid;\n\t\t}\n\t}\n\t&.inline {\n\t\tmax-width: 8rem;\n\t}\n\t&:disabled,\n\t[disabled] {\n\t\tcolor: var(--disabled-form-fg);\n\t\tbackground-color: var(--disabled-form-bg);\n\t}\n\t&::after {\n\t\tright: 0;\n\t\tcontent: \"\";\n\t\twidth: 0.6rem;\n\t\theight: 0.5rem;\n\t\tcolor: inherit;\n\t\tplace-self: end;\n\t\talign-self: center;\n\t\tmargin-right: 0.7rem;\n\t\tgrid-area: end !important;\n\n\t\tbackground-color: currentColor;\n\t\tclip-path: polygon(100% 0, 0 0, 50% 100%);\n\t\t-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);\n\t}\n\toption {\n\t\tbackground-color: #0d0e0ee0;\n\t}\n}\nselect {\n\t-webkit-text-size-adjust: auto;\n\n\toption {\n\t\tbackground-color: inherit;\n\t\tborder-radius: var(--md-radius);\n\t}\n\n\t&:active,\n\t&:focus-within {\n\t\tfilter: brightness(1.1);\n\t}\n\t-webkit-text-size-adjust: auto;\n\tbackground: inherit;\n\tmargin: 0;\n\twidth: 100%;\n\toutline: none;\n\tcolor: inherit;\n\theight: inherit;\n\tcursor: inherit;\n\tappearance: none;\n\twhite-space: pre;\n\tgrid-area: select;\n\tposition: relative;\n\tmin-height: inherit;\n\tmax-height: inherit;\n\tfont-family: inherit;\n\t-moz-appearance: none;\n\talign-content: center;\n\t-webkit-appearance: none;\n\tbackground-color: inherit;\n\tfont-size: 100% !important;\n\tborder-radius: var(--md-radius);\n\tpadding: 0.2em 2em 0.325em 0.6em;\n\tborder: none;\n\ttransition: cubic-bezier(0.47, 0, 0.745, 0.715);\n\ttransition-duration: 100ms;\n\ttransition-property: filter, border, background;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/utilities/_.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/utilities/_.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/utilities/_functions.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/utilities/_functions.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "$units: (0.75rem, 1rem, 1.25rem, 1rem, 2rem, 3rem) !default;\n$sides: (\n\tp: padding,\n\tpx: (\n\t\tpadding-left,\n\t\tpadding-right,\n\t),\n\tpy: (\n\t\tpadding-top,\n\t\tpadding-bottom,\n\t),\n\tpt: padding-top,\n\tpr: padding-right,\n\tpb: padding-bottom,\n\tpl: padding-left,\n\tm: margin,\n\tmx: (\n\t\tmargin-left,\n\t\tmargin-right,\n\t),\n\tmy: (\n\t\tmargin-top,\n\t\tmargin-bottom,\n\t),\n\tmt: margin-top,\n\tmr: margin-right,\n\tmb: margin-bottom,\n\tml: margin-left,\n) !default;\n\n$sizes: (\n\tnone: (\n\t\t0rem,\n\t),\n\txs: (\n\t\t0.25rem,\n\t),\n\tsm: (\n\t\t0.5rem,\n\t),\n\tmd: (\n\t\t1rem,\n\t),\n\tlg: (\n\t\t1.25rem,\n\t),\n\txl: (\n\t\t1.5rem,\n\t),\n) !default;\n\n@at-root {\n\t@each $side, $side-list in $sides {\n\t\t@each $unit in $units {\n\t\t\t.#{$side}-#{index(($units), $unit)} {\n\t\t\t\t@each $attr in $side-list {\n\t\t\t\t\t#{$attr}: #{$unit} !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/utilities/_units.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/utilities/_units.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n//\n\n$base-font-size: 16px !default;\n\n@function px($input) {\n\t@return to-unit(px, $input);\n}\n@function pt($input) {\n\t@return to-unit(pt, $input);\n}\n@function pc($input) {\n\t@return to-unit(pc, $input);\n}\n@function in($input) {\n\t@return to-unit(in, $input);\n}\n@function mm($input) {\n\t@return to-unit(mm, $input);\n}\n@function cm($input) {\n\t@return to-unit(cm, $input);\n}\n@function q($input) {\n\t@return to-unit(q, $input);\n}\n\n@function deg($input) {\n\t@return to-unit(deg, $input);\n}\n@function rad($input) {\n\t@return to-unit(rad, $input);\n}\n@function grad($input) {\n\t@return to-unit(grad, $input);\n}\n@function turn($input) {\n\t@return to-unit(turn, $input);\n}\n\n@function dpi($input) {\n\t@return to-unit(dpi, $input);\n}\n@function dpcm($input) {\n\t@return to-unit(dpcm, $input);\n}\n@function dppx($input) {\n\t@return to-unit(dppx, $input);\n}\n\n@function ms($input) {\n\t@return to-unit(ms, $input);\n}\n@function s($input) {\n\t@return to-unit(s, $input);\n}\n\n@function hz($input) {\n\t@return to-unit(hz, $input);\n}\n@function khz($input) {\n\t@return to-unit(khz, $input);\n}\n\n@function em($input...) {\n\t$em: to-unit(em, nth($input, 1));\n\n\t@if length($input) > 1 {\n\t\t@for $i from 2 through length($input) {\n\t\t\t$em: $em / num(em(nth($input, $i)));\n\t\t}\n\t}\n\t@return $em;\n}\n@function rem($input) {\n\t@return to-unit(rem, num(em($input)));\n}\n\n@function ex($input) {\n\t@return to-unit(ex, $input);\n}\n@function ch($input) {\n\t@return to-unit(ch, $input);\n}\n\n@function vw($input) {\n\t@return to-unit(vw, $input);\n}\n@function vh($input) {\n\t@return to-unit(vh, $input);\n}\n@function vmin($input) {\n\t@return to-unit(vmin, $input);\n}\n@function vmax($input) {\n\t@return to-unit(vmax, $input);\n}\n\n@function str($input) {\n\t@return #{$input};\n}\n@function num($input) {\n\t@if type-of($input) != number {\n\t\t@error 'Could not convert `#{$input}` - must be `type-of number`';\n\t\t@return null;\n\t}\n\t@return $input/($input * 0+1);\n}\n@function int($input) {\n\t$num: num($input);\n\t@return if($num<0, ceil($num), floor($num));\n}\n@function uint($input) {\n\t@return abs(int($input));\n}\n\n@function string($input) {\n\t@return str($input);\n}\n@function number($input) {\n\t@return num($input);\n}\n\n@function to-unit($unit, $input) {\n\t$to-unit: map-get(\n\t\t(\n\t\t\tpx: 0px,\n\t\t\tpt: 0pt,\n\t\t\tpc: 0pc,\n\t\t\tin: 0in,\n\t\t\tmm: 0mm,\n\t\t\tcm: 0cm,\n\t\t\tq: 0Q,\n\n\t\t\tem: 0em,\n\t\t\trem: 0rem,\n\t\t\tch: 0ch,\n\t\t\tex: 0ex,\n\n\t\t\tvw: 0vw,\n\t\t\tvh: 0vh,\n\t\t\tvmin: 0vmin,\n\t\t\tvmax: 0vmax,\n\n\t\t\tdeg: 0deg,\n\t\t\tturn: 0turn,\n\t\t\tgrad: 0grad,\n\t\t\trad: 0rad,\n\n\t\t\ts: 0s,\n\t\t\tms: 0ms,\n\n\t\t\thz: 0Hz,\n\t\t\tkhz: 0kHz,\n\n\t\t\tdpi: 0dpi,\n\t\t\tdpcm: 0dpcm,\n\t\t\tdppx: 0dppx,\n\n\t\t\tpct: 0%,\n\t\t\tpercent: 0%,\n\t\t\tnum: 0,\n\t\t\tnumber: 0,\n\t\t),\n\t\t$unit\n\t);\n\n\t@if not $to-unit {\n\t\t@error 'Could not convert to `#{$unit}` – must be a valid CSS unit';\n\t\t@return null;\n\t}\n\n\t@if index(num number ex ch vw vh vmin vmax, $unit) {\n\t\t$value: num($input);\n\t}\n\n\t@if index(em rem, unit($input)) {\n\t\t$input: 0px + num($input) * $base-font-size/1px;\n\t}\n\t@if index(em rem, $unit) and not unitless($input) {\n\t\t$input: 0px + $input;\n\t\t$input: num($input) * 1px / $base-font-size;\n\t}\n\n\t@if index(dpi dpcm dppx, $unit) {\n\t\t$units: (\n\t\t\tdppx: 0dppx,\n\t\t\tdpcm: 0dpcm,\n\t\t\tdpi: 0dpi,\n\t\t);\n\t\t$input-unit: map-get($units, unit($input));\n\t\t$input: if(1dppx < 95dpi, num($input-unit + (num($input) + $to-unit)), $input);\n\t}\n\n\t@return $to-unit + $input;\n}\n\n@function ratio($x, $y: null) {\n\t@if not $y {\n\t\t$n: $x;\n\t\t$y: 1;\n\t\t@while $y < 10 {\n\t\t\t$x: $n * 10 - ((10 - $y) * $n);\n\t\t\t@if $x == round($x) {\n\t\t\t\t@return #{$x}/#{$y};\n\t\t\t} @else {\n\t\t\t\t$y: $y + 1;\n\t\t\t}\n\t\t}\n\t\t$x: round($n * 1000000);\n\t\t$y: 1000000;\n\t\t@while $x % 10 == 0 {\n\t\t\t$x: $x/10;\n\t\t\t$y: $y/10;\n\t\t}\n\t\t@while $x % 5 == 0 {\n\t\t\t$x: $x/5;\n\t\t\t$y: $y/5;\n\t\t}\n\t\t@while $x % 2 == 0 {\n\t\t\t$x: $x/2;\n\t\t\t$y: $y/2;\n\t\t}\n\t\t@return #{$x}/#{$y};\n\t} @else if $x == round($x) and $y == round($y) {\n\t\t@return #{$x}/#{$y};\n\t}\n\t@warn 'X and Y must be integers';\n\t@return false;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/global/stylesheet/utilities/_utilities.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/global/stylesheet/utilities/_utilities.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@forward \"./functions\";\n@forward \"./units\";\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/hooks.server.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "\nimport type { Handle } from \"@sveltejs/kit\";\n\nconst headers = {\n\t\"X-Frame-Options\": \"SAMEORIGIN\",\n\t\"Referrer-Policy\": \"no-referrer\",\n\t\"Permissions-Policy\": `accelerometer=(), autoplay=\"*\", camera=(), document-domain=(), encrypted-media=(), fullscreen=(), gyroscope=(), interest-cohort=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), sync-xhr=(), usb=(), xr-spatial-tracking=(), geolocation=()`,\n\t\"X-Content-Type-Options\": \"nosniff\",\n\t\"Strict-Transport-Security\": \"max-age=31536000; includeSubDomains; preload\",\n};\n\nconst checkUserAgent = (userAgent: string) =>\n\t/i(Phone|Pad|Pod)/i.test(userAgent) ? \"iOS\" : /Android/i.test(userAgent) ? \"Android\" : \"Other\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n\tconst UA = event.request.headers.get(\"User-Agent\");\n\tconst agentType = checkUserAgent(UA);\n\tevent.locals.iOS = agentType === \"iOS\";\n\tevent.locals.Android = agentType === \"Android\";\n\n\tconst response = await resolve(event);\n\tfor (const key in headers) {\n\t\tresponse.headers.set(`${key}`, `${headers[key]}`);\n\t}\n\treturn response;\n};\n\n//#NODE process.on('SIGINT', function () { process.exit(); }); // Ctrl+C\n//#NODE process.on('SIGTERM', function () { process.exit(); }); // docker stop\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/clickOutside.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/drag.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/draggable.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/gestures/handlers.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/gestures/shared.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/gestures/types.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "\nexport type Axis = \"x\" | \"y\";\nexport type EventKind = \"drag\";\nexport interface Detail {\n\tvelocityY?: number;\n\tclientY: number;\n\tstartY: number;\n\tendY?: number;\n\tdeltaY?: number;\n\ttimeStamp: number;\n\tstartTime: number;\n}\nexport type GestureEventTarget = Window | HTMLElement;\n\nexport interface GestureHandlers {\n\tonStart(event: PointerEvent): void;\n\tonMove(event: PointerEvent): void;\n\tonEnd(event: PointerEvent): void;\n}\nexport interface DragEvent {\n\tdragstart: Detail;\n\tdragmove: Detail;\n\tdragend: Detail;\n}\n\nexport interface PanEvent {\n\tpanstart: Detail;\n\tpan: Detail;\n\tpanend: Detail;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/gestures/utils.ts", - "messages": [ - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 46, - "column": 33, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 46, - "endColumn": 36, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [1258, 1261], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [1258, 1261], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 46, - "column": 55, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 46, - "endColumn": 58, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [1280, 1283], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [1280, 1283], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'EventType' is defined but never used. Allowed unused vars must match /^_/u.", - "line": 88, - "column": 42, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 88, - "endColumn": 51 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'EventType' is defined but never used.", - "line": 88, - "column": 42, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 88, - "endColumn": 51 - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'Event' is defined but never used. Allowed unused vars must match /^_/u.", - "line": 88, - "column": 53, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 88, - "endColumn": 58 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'Event' is defined but never used.", - "line": 88, - "column": 53, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 88, - "endColumn": 58 - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 6, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "import type { Detail } from \"./types\";\n\nexport function boundingRect(node: HTMLElement): {\n\ttop: number;\n\theight: number;\n\tleft: number;\n\twidth: number;\n\tparent_top: number;\n} {\n\tconst nodeRect = node.getBoundingClientRect();\n\tconst parentRectTop = node.parentElement.offsetTop;\n\treturn {\n\t\ttop: nodeRect.top,\n\t\theight: nodeRect.height,\n\t\tleft: nodeRect.left,\n\t\twidth: nodeRect.width,\n\t\tparent_top: parentRectTop,\n\t};\n}\nexport function updateDetail(event: PointerEvent, detail: Detail) {\n\t// detail.deltaY = detail.clientY - event.pageY;\n\tdetail.clientY = event.clientY;\n}\nexport function calculateVelocity(event: PointerEvent, detail: Detail) {\n\tconst lastY = detail.clientY;\n\tconst lastTime = detail.timeStamp;\n\tupdateDetail(event, detail);\n\n\tconst currentY = detail.clientY;\n\tconst timeStamp = (detail.timeStamp = event.timeStamp);\n\n\tconst timeDelta = timeStamp - lastTime;\n\n\tif (timeDelta > 0 && timeDelta < 100) {\n\t\tconst distance = (currentY - lastY) / timeDelta;\n\t\tdetail.velocityY = distance * 0.7 + detail.velocityY * 0.3;\n\t}\n\t// detail.deltaY = (currentY - detail.startY) - lastY;\n}\n\nexport type EventHandler = (event: T) => void;\n\n/** Dispatches a new CustomEvent on a given Node */\nexport const dispatcher =\n\t<\n\t\tEvents extends Record = Record,\n\t\tEvent extends keyof Events & string = keyof Events & string,\n\t>() =>\n\t(node: HTMLElement, type: Event, detail: Events[Event]): boolean =>\n\t\tnode.dispatchEvent(new CustomEvent(type, { detail: detail, bubbles: true }));\n\ninterface AddListener {\n\t<\n\t\tEventType extends keyof WindowEventMap = keyof WindowEventMap,\n\t\tEvent extends WindowEventMap[EventType] = WindowEventMap[EventType],\n\t>(\n\t\ttarget: Window,\n\t\ttype: EventType,\n\t\tlistener: (event: Event) => void,\n\t\toptions?: AddEventListenerOptions | boolean | undefined,\n\t);\n\t<\n\t\tEventType extends keyof HTMLElementEventMap = keyof HTMLElementEventMap,\n\t\tEvent extends HTMLElementEventMap[EventType] = HTMLElementEventMap[EventType],\n\t>(\n\t\ttarget: HTMLElement,\n\t\ttype: EventType,\n\t\tlistener: (event: Event) => void,\n\t\toptions?: AddEventListenerOptions | boolean | undefined,\n\t);\n\t<\n\t\tEventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof (WindowEventMap | HTMLElementEventMap),\n\t\tEvent extends (WindowEventMap | HTMLElementEventMap)[EventType] = (WindowEventMap | HTMLElementEventMap)[EventType],\n\t>(\n\t\ttarget: Window | HTMLElement,\n\t\ttype: EventType,\n\t\tlistener: (event: Event) => void,\n\t\toptions?: AddEventListenerOptions | boolean | undefined,\n\t);\n\t(\n\t\ttarget: unknown,\n\t\ttype: EventType,\n\t\tlistener: (event: Event) => void | EventListenerOrEventListenerObject,\n\t\toptions?: AddEventListenerOptions | boolean | undefined,\n\t): void;\n}\n\nexport const addListener: AddListener = (target, type, listener, options) => {\n\ttarget.addEventListener(type, listener, options);\n};\nexport function removeListener<\n\tEventType extends keyof WindowEventMap = keyof WindowEventMap,\n\tEvent extends WindowEventMap[EventType] = WindowEventMap[EventType],\n>(target: Window, type: EventType, listener: (event: Event) => void, options?: AddEventListenerOptions | boolean);\nexport function removeListener<\n\tEventType extends keyof HTMLElementEventMap = keyof HTMLElementEventMap,\n\tEvent extends HTMLElementEventMap[EventType] = HTMLElementEventMap[EventType],\n>(target: HTMLElement, type: EventType, listener: (event: Event) => void, options?: AddEventListenerOptions | boolean);\nexport function removeListener<\n\tEventType extends keyof (WindowEventMap | HTMLElementEventMap) = keyof (WindowEventMap | HTMLElementEventMap),\n\tEvent extends (WindowEventMap | HTMLElementEventMap)[EventType] = (WindowEventMap | HTMLElementEventMap)[EventType],\n>(\n\ttarget: Window | HTMLElement,\n\ttype: EventType,\n\tlistener: (event: Event) => void,\n\toptions?: AddEventListenerOptions | boolean,\n) {\n\ttarget.removeEventListener(type, listener, options);\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/keyboardClick.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/longpress.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/longtouch.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/ripple.ts", - "messages": [ - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used. Allowed unused args must match /^_/u.", - "line": 3, - "column": 23, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 3, - "endColumn": 37 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used.", - "line": 3, - "column": 23, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 3, - "endColumn": 37 - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used. Allowed unused args must match /^_/u.", - "line": 15, - "column": 22, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 15, - "endColumn": 27 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used.", - "line": 15, - "column": 22, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 15, - "endColumn": 27 - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 4, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "export function ripple(node: HTMLElement) {\n\tlet elm: HTMLElement;\n\tfunction applyRipple(event: UIEvent) {\n\t\tif (elm && node.contains(elm)) {\n\t\t\tnode.removeChild(elm);\n\t\t}\n\t\telm = document.createElement(\"div\");\n\t\telm.className = \"anim-ripple\";\n\t\t// node.classList.add(\"anim-ripple\");\n\t\telm.addEventListener(\"animationcancel\", removeAnim);\n\t\telm.addEventListener(\"animationend\", removeAnim);\n\t\tnode.appendChild(elm);\n\t\tconsole.log(node.getAnimations({ subtree: true }));\n\t}\n\tfunction removeAnim(event) {\n\t\t// node.classList.toggle(\"anim-ripple\", true);\n\t\telm.removeEventListener(\"animationcancel\", removeAnim);\n\t\telm.removeEventListener(\"animationend\", removeAnim);\n\t\telm.remove();\n\t}\n\tnode.addEventListener(\"click\", applyRipple);\n\treturn {\n\t\tdestroy: () => {\n\t\t\tnode.removeEventListener(\"click\", applyRipple);\n\t\t},\n\t};\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/tooltip.ts", - "messages": [ - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used. Allowed unused args must match /^_/u.", - "line": 5, - "column": 21, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 5, - "endColumn": 53 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'event' is defined but never used.", - "line": 5, - "column": 21, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 5, - "endColumn": 53 - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 2, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "export function tooltip(element: HTMLElement) {\n\tlet div: HTMLDivElement;\n\tlet title;\n\tlet timer;\n\tfunction mouseOver(event: PointerEvent & TouchEvent) {\n\t\tif (element.contains(div)) element.removeChild(div);\n\t\ttimer = () =>\n\t\t\tsetTimeout(() => {\n\t\t\t\tdiv.style.opacity = \"0\";\n\t\t\t\tdiv.addEventListener(\"transitionend\", () => element.removeChild(div));\n\n\t\t\t\telement.removeEventListener(\"touchcancel\", mouseLeave, true);\n\t\t\t\telement.removeEventListener(\"touchend\", mouseLeave, true);\n\t\t\t\telement.removeEventListener(\"pointerout\", mouseLeave);\n\t\t\t}, 150);\n\n\t\tconst rect = element.getBoundingClientRect();\n\t\ttitle = element.getAttribute(\"data-tooltip\");\n\n\t\tdiv = document.createElement(\"div\");\n\n\t\tdiv.className = \"tooltip\";\n\t\tdiv.setAttribute(\"data-tooltip\", title);\n\t\tdiv.innerText = title;\n\n\t\telement.appendChild(div);\n\t\tif (element.contains(div)) {\n\t\t\tconst divrect = div.getBoundingClientRect();\n\t\t\tconst cX = rect.left - divrect.left;\n\t\t\tconst cY = rect.top - divrect.top;\n\t\t\tlet x = (cX / window.innerWidth) * 100;\n\t\t\tlet y = (cY / window.innerHeight) * 100;\n\t\t\tconst w = divrect.width;\n\t\t\tif (divrect.right > window.innerWidth - divrect.width) {\n\t\t\t\tx -= x / 2;\n\t\t\t}\n\t\t\tif (divrect.left < 0) {\n\t\t\t\tx += x * 2;\n\t\t\t}\n\t\t\tif (y < 0) {\n\t\t\t\ty = -y * 2 + divrect.height;\n\t\t\t}\n\n\t\t\tdiv.style.cssText = `--tt-pos-y: ${y}px; --tt-pos-x: ${x}px; --tt-w: ${w}px; opacity: 1;`;\n\t\t}\n\t\telement.addEventListener(\"touchcancel\", mouseLeave, { passive: true });\n\t\telement.addEventListener(\"touchend\", mouseLeave, { passive: true });\n\t\telement.addEventListener(\"pointerout\", mouseLeave);\n\t}\n\tfunction mouseLeave() {\n\t\tif (timer && element.contains(div)) {\n\t\t\ttimer();\n\t\t}\n\t\ttimer = undefined;\n\t}\n\n\telement.addEventListener(\"touchstart\", mouseOver, { passive: true });\n\telement.addEventListener(\"pointerover\", mouseOver);\n\n\treturn {\n\t\tdestroy() {\n\t\t\tif (element.contains(div)) {\n\t\t\t\telement.removeChild(div);\n\t\t\t}\n\n\t\t\telement.removeEventListener(\"touchstart\", mouseOver, true);\n\t\t\telement.removeEventListener(\"pointerover\", mouseOver);\n\t\t},\n\t};\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/actions/viewport.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/api.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ArtistPageHeader/Description/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/ArtistPageHeader/Description/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".show-more {\n\tdisplay: inline-flex;\n\tfont-size: 1em;\n\tfont-family: system-ui;\n\tcursor: pointer;\n\tcolor: rgb(175, 175, 175);\n\tfont-variant: all-small-caps;\n\talign-items: center;\n\tfont-weight: 600;\n\tmargin-bottom: 1.7rem;\n\tfont-weight: 600;\n\tline-height: 1;\n\t&:hover {\n\t\tcolor: rgb(194, 194, 194);\n\t\ttext-decoration: underline 0.05rem solid;\n\t}\n}\n.description {\n\t--line-height: 1.4;\n\n\t--lines: 3;\n\tfont-size: 1rem;\n\tline-height: var(--line-height);\n\tfont-weight: 400;\n\tcolor: #fff;\n\tdisplay: block;\n\tvisibility: visible;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 3;\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\twhite-space: normal;\n\tletter-spacing: -0.0125rem;\n\twhite-space: normal;\n\tmax-height: calc(var(--lines) * 1rem * var(--line-height));\n\tmargin-bottom: 0.8rem;\n\t&.expanded {\n\t\t--lines: 12;\n\t\t--max-lines: var(--lines);\n\t\t-webkit-line-clamp: var(--max-lines);\n\t\tmax-height: calc(var(--max-lines) * 1rem * var(--line-height));\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ArtistPageHeader/Description/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ArtistPageHeader/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/ArtistPageHeader/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Button/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Button/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Button/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Carousel/functions.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Carousel/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Carousel/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "@import \"../../../global/stylesheet/components/_carousel\";\n@import \"../../../global/redesign/utility/mixins/media-query\";\n\n.subheading {\n\tcolor: rgb(175, 175, 175);\n\tfont-weight: 500;\n}\n\n.c-group {\n\tdisplay: flex;\n\n\tscroll-snap-align: start;\n\talign-items: flex-start;\n\n\tposition: relative;\n\t&::before {\n\t\tdisplay: block;\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\n\t\tpadding-top: calc(100% * 2 / 3);\n\t}\n}\n\n.left,\n.right {\n\tposition: absolute;\n\ttop: 40%;\n\tz-index: 1;\n\tbottom: 0;\n\tpointer-events: all;\n\tcursor: pointer;\n\twill-change: opacity, visibility;\n\tbackground-color: hsl(0deg 0% 88% / 95%);\n\tborder: rgba(0, 0, 0, 0.171) 0.33px solid;\n\ttransition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n\tbox-shadow: 0 0 8px -4px hsl(0deg 0% 0% / 20%);\n\theight: 3rem;\n\tcolor: hsla(0, 0%, 18%, 1);\n\tborder-radius: 50%;\n\topacity: 1;\n\tpadding: 0;\n\twidth: 3rem;\n\tdisplay: inline-flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\n\tcontain: strict;\n\tisolation: isolate;\n\t&:hover {\n\t\tbackground-color: rgb(233, 233, 233);\n\t\tbox-shadow: -1px -1px 8px -12px hsl(0deg 0% 0% / 20%) inset, 1px 1px 10px -6px hsl(0deg 0% 0% / 10%) inset;\n\t\tcolor: #111111e0;\n\t}\n\n\t&:active {\n\t\tbackground-color: rgb(223, 223, 223);\n\t\tbox-shadow: 0 0 12px -9px hsl(0deg 0% 7% / 88%) inset, inset -2px -2px 5px -9px hsl(0deg 0% 8% / 92%);\n\t}\n\n\t@media screen and (max-width: 640px) {\n\t\tdisplay: none !important;\n\t\tvisibility: hidden;\n\t}\n}\n\n.left {\n\tleft: 0;\n\ttransform: translateX(-1.75em);\n\n\t@media screen and (min-width: 640px) and (max-width: 1000px) {\n\t\ttransform: translateX(0em);\n\t}\n}\n\n.right {\n\tright: 0;\n\ttransform: translateX(1.75em);\n\n\t@media screen and (min-width: 640px) and (max-width: 1000px) {\n\t\ttransform: translateX(0);\n\t}\n}\n\n.section {\n\t-webkit-overflow-scrolling: touch;\n\tposition: relative;\n\n\tmargin-bottom: 2.4em;\n\n\tborder-radius: var(--sm-radius);\n\n\tcontain: layout style;\n\n\t@media screen and (min-width: 720px) {\n\t\tmargin-bottom: 1em;\n\t}\n}\n\n.showMoreBtn {\n\tpointer-events: none;\n\topacity: 0;\n\tvisibility: hidden;\n}\n\n.scroll {\n\t--thumbnail-size: calc(2vh + 13em);\n\n\t@include media-query-down(xs) {\n\t\t--thumbnail-size: 14em;\n\t}\n\t@include media-query(sm) {\n\t\t--thumbnail-size: calc(1vh + 13em);\n\t}\n\n\t@include media-query(md) {\n\t\t--thumbnail-size: calc(1vh + 14em);\n\t}\n\n\t@include media-query(lg) {\n\t\t--thumbnail-size: calc(1vh + 14em);\n\t}\n\n\t@include media-query(xl) {\n\t\t--thumbnail-size: calc(1vmin + 13.5em);\n\t}\n\t@include media-query-up(xxl) {\n\t\t--thumbnail-size: calc(1vmin + 13.5em);\n\t}\n\n\t--column-width: calc(var(--thumbnail-size) + 1.5rem);\n}\n\n.scroll {\n\tcontain: layout paint style;\n\theight: auto;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\toverflow-x: scroll;\n\toverflow-y: visible;\n\twidth: auto;\n\t-ms-scroll-snap-type: x mandatory;\n\tscroll-snap-type: x mandatory;\n\tborder-radius: inherit;\n\toverflow-anchor: none;\n\t-webkit-overflow-scrolling: touch;\n\tscrollbar-gutter: 0.833333rem;\n\tscrollbar-width: thin;\n\tcontain: layout style paint;\n\ttouch-action: pan-x pan-y;\n\n\t&::-webkit-scrollbar {\n\t\twidth: 0;\n\t\theight: 0;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tborder-radius: 0.625rem;\n\t\theight: 0;\n\t\twidth: 0%;\n\t\tbackground-clip: content-box;\n\t\tborder-radius: 0.833333rem;\n\t\tborder: transparent solid 0.0983333rem;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: #424242c4;\n\t\tborder-radius: 0;\n\t\twidth: 0;\n\t\tscrollbar-width: 0;\n\t\tborder: 0 solid #b8b8b800;\n\t\tbackground-clip: content-box;\n\t}\n\n\t&:last-child {\n\t\tpadding-right: 0.5rem;\n\t}\n\n\t&:first-child {\n\t\tvisibility: visible;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Carousel/observer.ts", - "messages": [ - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'ob' is defined but never used. Allowed unused args must match /^_/u.", - "line": 4, - "column": 65, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 4, - "endColumn": 67 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'ob' is defined but never used.", - "line": 4, - "column": 65, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 4, - "endColumn": 67 - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'node' is defined but never used. Allowed unused args must match /^_/u.", - "line": 21, - "column": 37, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 21, - "endColumn": 54 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'node' is defined but never used.", - "line": 21, - "column": 37, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 21, - "endColumn": 54 - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 4, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "\nlet intersectionObserver: IntersectionObserver;\n\nconst observerCallback = (entries: IntersectionObserverEntry[], ob) => {\n\tfor (let idx = 0; idx < entries.length; idx++) {\n\t\tconst entry = entries[idx];\n\t\tconst target = entry.target as HTMLImageElement;\n\t\tif (entry.isIntersecting) {\n\t\t\ttarget.decode().finally(() => {\n\t\t\t\ttarget.src = target.dataset.src;\n\t\t\t\tqueueMicrotask(() => {\n\t\t\t\t\ttarget.decode().finally(() => {\n\t\t\t\t\t\tintersectionObserver.unobserve(entry.target);\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n};\n\nfunction ensureIntersectionObserver(node: HTMLElement) {\n\tif (intersectionObserver) return;\n\tintersectionObserver = new IntersectionObserver(observerCallback, {\n\t\tthreshold: 0,\n\t\trootMargin: \"95px 80px\",\n\t});\n\treturn intersectionObserver;\n}\n\n/* eslint-disable no-inner-declarations */\nexport default function lazyContainer(node: HTMLElement) {\n\tensureIntersectionObserver(node);\n\n\tlet children = node.querySelectorAll(\"img[data-src]\");\n\n\tfor (const img of children) {\n\t\tintersectionObserver.observe(img);\n\t}\n\n\treturn {\n\t\tdestroy() {\n\t\t\tfor (const img of children) {\n\t\t\t\tintersectionObserver.unobserve(img);\n\t\t\t}\n\t\t\tchildren = null;\n\t\t},\n\t};\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Chips/Chip/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Chips/Chip/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".chip {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n\tmin-width: 2rem;\n\tborder-radius: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tfont-size: 1.125em;\n\tbackground: #fff;\n\tcolor: #030303;\n\tbackground: rgba(255, 255, 255, 0.1);\n\tcolor: #fff;\n\tborder-radius: 0.5rem;\n\tborder: none;\n\theight: 2.25rem;\n\tpadding: 0.75em 1em;\n\n\twhite-space: nowrap;\n\n\t&.selected {\n\t\tbackground-color: #fff;\n\t\tcolor: #131313;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Chips/Chip/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Chips/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Chips/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".chips {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0.5em;\n\tmargin-bottom: 0.625em;\n\toverflow-x: auto;\n\tfont-family: \"InterVariable\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n\t\tCantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Chips/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Grid/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Grid/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".grid {\n\tdisplay: grid;\n\tgrid-gap: 0.5em;\n\tjustify-content: center;\n\tmargin: 0 auto;\n\t--grid-column-count: 2;\n\t--thumbnail-size: 12.5rem;\n\n\t@media screen and (min-width: 460px) and (max-width: 619px) {\n\t\t--grid-column-count: 3;\n\t}\n\n\t@media screen and (min-width: 620px) and (max-width: 1148px) {\n\t\t--grid-column-count: 4;\n\t}\n\n\t@media screen and (min-width: 1149px) and (max-width: 1400px) {\n\t\t--grid-column-count: 6;\n\t}\n\n\t@media screen and (min-width: 1401px) {\n\t\t--thumbnail-size: 13rem;\n\t\t--grid-column-count: 7;\n\t}\n\t--column-width: calc(var(--thumbnail-size) + 0.75rem);\n\t--grid-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));\n\n\tgrid-template-columns: var(--grid-columns);\n}\n\n.grid-container {\n\tmargin-block-start: 0;\n\tmargin-block-end: 1.5em;\n\tmargin-inline: auto;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Grid/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/GroupSessionCreator/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/GroupSessionCreator/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".modal {\n\tposition: absolute;\n\n\tpadding: 0.8rem;\n\tz-index: 100;\n\tbackground: var(--mobile-popper-bg);\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tjustify-content: space-between;\n\tflex-direction: column;\n\ttop: 50%;\n\tleft: 50%;\n\tmin-width: 45vw;\n\twidth: 100%;\n\tmin-height: 50vh;\n\tmax-width: 85vw;\n\tmax-height: 90%;\n\tborder-radius: $lg-radius;\n\tborder-color: rgba(129, 129, 129, 0.411);\n\tborder-width: 0.025rem;\n\tborder-style: solid;\n\ttransform: translate(-50%, -50%);\n\t@media screen and (min-width: 640px) {\n\t\twidth: auto;\n\t\tmax-width: 75%;\n\t\tmax-height: 85%;\n\t}\n\toverflow: hidden;\n}\n\n.modal-container {\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tmin-height: inherit;\n}\n\n.url {\n\tbackground: rgba(41, 41, 41, 0.555);\n\tpadding: 1rem;\n\tborder-radius: $lg-radius;\n\tdisplay: inline-block;\n\tfont-size: 1.125em;\n\tfont-weight: 400;\n\tletter-spacing: 0.01em;\n\n\t> p {\n\t\tcursor: text;\n\t\t-webkit-user-select: text;\n\t\t-moz-user-select: text;\n\t\t-ms-user-select: text;\n\t\tuser-select: text;\n\t}\n}\n\n.copy {\n\tfont-size: 0.95em;\n\tcolor: #aaa;\n\tmargin-left: 1em;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/GroupSessionCreator/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/GroupSessionManager/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/GroupSessionManager/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".groupSessionManager-frame {\n\t> * {\n\t\tcolor: var(--color-light) !important;\n\t}\n\tposition: relative;\n\tbackground-color: lightgreen;\n\tfont-size: 1em;\n\ttop: -100%;\n\tleft: 0;\n\tright: 0;\n\tz-index: -1;\n\n\tborder-top-left-radius: 3vw;\n\tborder-top-right-radius: 3vw;\n}\n\n.groupSessionManager-handle {\n\twidth: 100%;\n\n\tborder-bottom: 0.0175rem groove rgba(171, 171, 171, 0.151);\n\tborder-top: 0.0175rem groove rgba(171, 171, 171, 0.151);\n\tborder-top-left-radius: inherit;\n\tborder-top-right-radius: inherit;\n\tbox-shadow: 0 -0.4rem 23px -17px hsl(0deg 0% 100% / 100%);\n\tbackground: rgba(10, 10, 11, 0.473);\n\tz-index: 1;\n\theight: 1.8em;\n\tdisplay: flex;\n\tcursor: pointer;\n\tpadding: 0.12em;\n\talign-items: center;\n}\n\nhr {\n\t&::before {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tcontent: \"\";\n\t\tmargin: 0 auto;\n\t\twidth: 35%;\n\t\tcolor: hsl(240deg 6% 4%);\n\t\tbackground: hsl(240deg 6% 4%);\n\t\theight: 0.25em;\n\t\tborder-radius: 999998999em;\n\n\t\tline-height: 1.2;\n\t\tz-index: 5;\n\t}\n\twidth: 90%;\n\tborder: none;\n\tposition: relative;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/GroupSessionManager/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Icon/icons.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ListInfoBar/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/ListInfoBar/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".info-bar {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr;\n\tgrid-template-columns: [index] 6.25rem 1fr 2.9rem;\n\tpadding: 0.8rem 0 0.4rem 0;\n\tmax-width: inherit;\n\t/* gap: 0.8rem; */\n\twidth: 100%;\n\tborder-bottom: 1px solid rgba(66, 66, 66, 0.425);\n\t.index,\n\t.title,\n\t.mobile-thumbnail,\n\t.length {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tfont-family: var(--secondary-font-family);\n\t\tcolor: darken(#ffffff, 3%);\n\t}\n\t.index {\n\t\tpadding-left: 1.5rem;\n\t\tjustify-self: center;\n\t\tdisplay: none;\n\t}\n\t.mobile-thumbnail {\n\t\t@extend .index;\n\t\tdisplay: block;\n\t\tpadding-left: 2rem;\n\t\tgrid-column: index;\n\t}\n\n\t.length {\n\t\tpadding-right: 1.5rem;\n\t}\n\t@media screen and (min-width: 640px) {\n\t\tgrid-template-columns: [index] 9.5rem [title] 1fr 3rem;\n\t\t.index {\n\t\t\tgrid-column: index;\n\t\t\tdisplay: block;\n\t\t}\n\t\t.title {\n\t\t\tjustify-self: flex-start;\n\t\t\tgrid-column: title;\n\t\t}\n\t\t.mobile-thumbnail {\n\t\t\tdisplay: none;\n\t\t\tvisibility: none;\n\t\t}\n\n\t\t.length {\n\t\t\tplace-self: center !important;\n\t\t}\n\t}\n}\n.sort {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-content: center;\n\n\tjustify-content: flex-start;\n\n\tmargin-bottom: var(--md-spacing);\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ListInfoBar/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ListItem/functions.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ListItem/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/ListItem/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".m-item {\n\tdisplay: flex;\n\theight: 5.25em;\n\tpadding: 0em 1em;\n\tcursor: pointer;\n\tjustify-content: space-between;\n\talign-content: center;\n\ttouch-action: auto;\n\tline-height: 1.5;\n\t@media screen and (min-width: 720px) {\n\t\talign-content: center;\n\t\tdisplay: grid;\n\t\tflex: none;\n\t\tgrid-template-areas: \"left middle right\";\n\t\tgrid-template-columns: 2.25fr minmax(0, 78%) 5fr;\n\t}\n\t@supports (content-visibility: auto) {\n\t\tcontent-visibility: auto;\n\t}\n}\n.isPlaying {\n\tbackground: scale-color(#57575831, $lightness: 35%);\n}\n\n.index {\n\tdisplay: none;\n\tvisibility: none;\n\t@media screen and (min-width: 720px) {\n\t\twidth: 1.5em;\n\t\tfont-weight: 600;\n\t\tgrid-area: left;\n\t\ttext-align: center;\n\t\tpointer-events: none;\n\t\topacity: 1;\n\t\twhite-space: nowrap;\n\t\t/* margin-right: 1rem; */\n\t\tplace-self: center;\n\t\tdisplay: grid;\n\t\tjustify-items: center;\n\t\tvisibility: visible;\n\t}\n}\n.title {\n\tfont-weight: 400;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tdisplay: block;\n\tmax-width: calc(100%);\n\t@media screen and (min-width: 720px) {\n\t\tmax-width: calc(100% - 0.2em);\n\t}\n}\n\n.metadata {\n\tdisplay: flex;\n\talign-self: center;\n\t/* padding-right: 1.8rem; */\n\tgrid-area: middle;\n\tflex-direction: row;\n\n\tgap: 0.875em;\n\n\talign-items: center;\n\twidth: 100%;\n\tmax-width: calc(100% - 3em);\n}\n.column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\n\twidth: 100%;\n\tmax-width: calc(100% - 4.45em);\n}\n\n.artists {\n\tfont-family: \"CommissionerVariable\", sans-serif;\n\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n\tline-clamp: 2;\n\toverflow: hidden;\n\t> a,\n\tspan {\n\t\tcolor: rgb(212, 212, 212);\n\t}\n}\n\n.length {\n\talign-self: center;\n\tgrid-area: right;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.thumbnail {\n\tmin-width: 4.25em;\n\tmax-width: 4.25em;\n\taspect-ratio: 1/1;\n\tmin-height: 4.25em;\n\t/* margin-right: 1rem; */\n\tmax-height: 4.25em;\n\n\tborder-radius: var(--xs-radius);\n\t@media screen and (min-width: 720px) {\n\t\tmargin-left: 1em;\n\t}\n}\nimg {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: var(--xs-radius);\n\n\tposition: relative;\n\n\taspect-ratio: 1/1;\n\tobject-fit: contain;\n}\nimg::before {\n\tdisplay: block;\n\tcontent: \"\";\n\tpadding-top: calc(100% * 2 / 3);\n\t/* You could reduce this expression with a preprocessor or by doing the math. I've kept the longer form in `calc()` to make the math more readable for this demo. */\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/ListItem/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Modal/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Modal/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".modal {\n\tposition: absolute;\n\n\tpadding: 0.8rem;\n\tz-index: 100;\n\tbackground: var(--mobile-popper-bg);\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tflex-direction: column;\n\ttop: 50%;\n\tleft: 50%;\n\tmin-width: 45vw;\n\twidth: 100%;\n\tmin-height: 50%;\n\tmax-width: 85vw;\n\tmax-height: 90%;\n\tborder-radius: $lg-radius;\n\tborder-color: rgba(129, 129, 129, 0.411);\n\tborder-width: 0.025rem;\n\tborder-style: solid;\n\ttransform: translate(-50%, -50%);\n\t@media screen and (min-width: 640px) {\n\t\twidth: auto;\n\t\tmax-width: 75%;\n\t\tmax-height: 85%;\n\t}\n\toverflow: hidden;\n}\n\n.modal-container {\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow-y: auto;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Modal/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Player/ProgressBar/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Player/ProgressBar/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".progress-bar {\n\twidth: 100%;\n\twill-change: visibility;\n\tcontain: paint;\n\toverflow: hidden;\n\tisolation: isolate;\n\tbackground-clip: content-box;\n\tbackground-color: rgb(60, 60, 66);\n\tborder: #0000 solid calc(var(--height) / 3);\n\tborder-radius: calc(var(--height) / 2);\n\theight: var(--height);\n\tposition: absolute;\n}\n.hover {\n\tbackground-color: #edecec66;\n\tpadding: inherit;\n\tinset: 0;\n\n\tposition: absolute;\n\tpadding: 0;\n\tz-index: 5;\n\twidth: 100%;\n\tcursor: pointer;\n\twill-change: transform;\n\ttransition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 180ms transform;\n\ttransform-origin: 0% 50%;\n\toverflow: hidden;\n\tborder-radius: 333333em;\n\tisolation: isolate;\n}\n.progress-bar-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n.progress-container {\n\t--height: 1rem;\n\tcontain: layout;\n\tdisplay: flex;\n\tfont-size: var(--base-font-size);\n\tgap: 0.5em;\n\tgrid-template-columns: auto 1fr auto;\n\theight: 1rem;\n\tposition: relative;\n\talign-items: flex-end;\n\tline-height: 1;\n}\nprogress {\n\theight: var(--height);\n\tdisplay: block;\n\twidth: 100%;\n\theight: inherit;\n\ttop: 0;\n\tcursor: pointer;\n\tmargin: 0;\n\t-moz-appearance: none;\n\tappearance: none;\n\tbackground: #0000;\n\toutline: none;\n\tborder: transparent;\n\tpadding: 0;\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\t// border-radius: inherit;\n}\n\nprogress::-webkit-progress-bar {\n\tbackground-color: rgb(84, 84, 88);\n}\nprogress::-moz-progress-bar {\n\tbackground-color: #f3f3f3;\n\tcolor: white;\n}\nprogress::-webkit-progress-value {\n\tbackground-color: rgb(255, 255, 255);\n}\n\n.timestamp {\n\tdisplay: inline-block;\n\tfont-family: \"InterVariable\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu,\n\t\tCantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n\tfont-size: calc(var(--base-font-size) * 0.95);\n\tletter-spacing: -0.02em;\n\n\twhite-space: nowrap;\n\tvertical-align: top;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Player/ProgressBar/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Player/channel.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Player/keyboardHandler.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/PlaylistPopper/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/PlaylistPopper/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "form {\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\t/* justify-content: center; */\n\talign-content: center;\n\tflex-wrap: wrap;\n\talign-self: flex-start;\n\tgap: 0.8rem;\n}\n[type=\"file\"] {\n\tmin-width: 10rem;\n\tmargin: 0;\n\tfilter: opacity(0);\n\topacity: 0;\n}\n[type=\"file\"]::-webkit-file-upload-button {\n\tvisibility: hidden;\n}\n.file {\n\tposition: relative;\n\tdisplay: inline-block;\n\tcursor: pointer;\n\theight: 2.5rem;\n\tfont-variant-caps: unset;\n\tmax-width: 15.5rem;\n}\n.file-button {\n\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\",\n\t\t\"Helvetica Neue\", sans-serif;\n\t&:hover::after {\n\t\tbackground: #525252b2;\n\t}\n}\n.file-button::before {\n\tcontent: \"Choose an image\";\n\tdisplay: inline-block;\n\tbackground: var(--form-bg);\n\tborder: 0.0625rem solid hsla(0, 0%, 66.7%, 0.219);\n\tborder-radius: $md-radius;\n\tbox-shadow: inset 0.1125em -0.1125em 1em 0.5em hsla(0, 0%, 96.9%, 0.014), 0 0 0.25em 0.02em hsla(0, 0%, 66.7%, 0) !important;\n\n\tpadding: 0.4rem 0.7rem;\n\toutline: none;\n\twhite-space: nowrap;\n\t-webkit-user-select: none;\n\tposition: absolute;\n\tinset: 0;\n\twidth: inherit;\n\theight: inherit;\n\tcolor: #e3e3e3;\n\n\tcursor: pointer;\n\n\tfont-variant-caps: unset !important;\n\tfont-size: unset;\n}\n.file-button::after {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\n\tcontent: \"Select\";\n\tcolor: rgb(238, 238, 238);\n\tbackground: #353535b2;\n\tdisplay: inline-flex;\n\tplace-items: center;\n\tfont-weight: 500;\n\n\tpadding: 0.4rem 0.7rem;\n\ttransition: background linear 125ms;\n}\n[type=\"file\"]:hover::before {\n\tborder-color: black;\n}\n[type=\"file\"]:active::before {\n\tbackground: -webkit-linear-gradient(to top, #e3e3e3, #f9f9f9);\n}\n.playlist-modal {\n\tposition: absolute;\n\tgap: 0.8rem;\n\n\tz-index: 100;\n\tbackground: var(--mobile-popper-bg);\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\ttop: 50%;\n\tleft: 50%;\n\tmin-width: 50%;\n\tmin-height: 50%;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\tborder-radius: $lg-radius;\n\tborder-color: rgba(129, 129, 129, 0.411);\n\tborder-width: 0.025rem;\n\tborder-style: solid;\n\ttransform: translate(-50%, -50%);\n\tpadding: 0.8rem;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/PlaylistPopper/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Popper/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Popper/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".popper {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\ttouch-action: none;\n\tgap: 0.85em;\n\tcolor: #fff !important;\n\t&:first-child:not(.handle) {\n\t\tmargin-top: 0.6125em;\n\t}\n}\n.drag-wrapper {\n\tposition: fixed;\n\tinset: 0;\n\n\tbackground: rgba(255, 255, 255, 0);\n\tz-index: 500;\n\ttouch-action: none;\n\t-ms-scroll-chaining: none;\n\toverscroll-behavior: contain;\n}\n.backdrop {\n\tposition: fixed;\n\tinset: 0;\n\n\ttouch-action: none;\n\tmin-height: 100%;\n\tmax-height: 100%;\n\tmin-width: 100%;\n\tmax-width: 100%;\n\twidth: 100vw;\n\theight: 100vh;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\n\tz-index: 5;\n\tisolation: isolate;\n\t&::before {\n\t\tposition: absolute;\n\t\tcontent: \"\";\n\t\tinset: 0;\n\t\tbackground: linear-gradient(to top, #000, rgba(255, 255, 255, 0.007));\n\t\topacity: 0.15;\n\t}\n}\nhr {\n\ttouch-action: none;\n\t&::before {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tcontent: \"\";\n\t\tmargin: 0 auto;\n\t\twidth: 35%;\n\t\tcolor: hsl(0deg 0% 80%);\n\t\tbackground: hsl(0deg 0% 100%);\n\t\theight: 0.0625rem;\n\n\t\tline-height: inherit;\n\t\tz-index: 5;\n\t}\n\tborder: none;\n\twidth: 90%;\n\tposition: relative;\n}\n.dd-button {\n\tcursor: pointer;\n\tposition: relative;\n\tisolation: isolate;\n\ttouch-action: none;\n\n\tpadding: 0.8rem;\n\t@media screen and (min-width: 960px) {\n\t\tpadding: 0.5rem;\n\t}\n}\n.m-row {\n\ttouch-action: none;\n\n\tgrid-area: rw;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tgap: 1.2rem;\n}\n.subheading {\n\tfont-size: 1rem;\n\ttouch-action: none;\n}\n.m-head {\n\tgrid-area: cm;\n\ttouch-action: none;\n}\n.m-metadata {\n\tdisplay: flex;\n\n\tmax-height: 8rem;\n\theight: auto;\n\tposition: relative;\n\ttouch-action: none;\n\n\t/* width: 100%; */\n\tmin-height: 3rem;\n\tbackground-color: hsl(0deg 0% 20% / 35%);\n\tpadding: 0.5rem;\n\tborder-radius: var(--lg-radius);\n\tgap: 0.8rem;\n\tflex-direction: row;\n}\n.image {\n\ttouch-action: none;\n\tmin-height: 0;\n\tmax-width: 11em;\n\tposition: relative;\n\twidth: 100%;\n\tdisplay: grid;\n\tpadding: 0;\n\tmargin: 0;\n\tplace-items: center;\n\tisolation: isolate;\n\t&::before {\n\t\tposition: absolute;\n\t\tinset: 0;\n\n\t\tbackground: linear-gradient(to top, #000, rgba(61, 61, 61, 0.11));\n\t\topacity: 0.4;\n\t\theight: 100%;\n\t\tcontent: \"\";\n\t\tz-index: 1;\n\t\tborder-radius: var(--md-radius);\n\t}\n\timg {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\n\t\tmin-height: 0;\n\t\theight: inherit;\n\t\t/* max-height: inherit; */\n\t\tborder-radius: var(--md-radius);\n\t\t-o-object-fit: contain;\n\t\tobject-fit: scale-down;\n\t}\n}\n.metatext {\n\ttouch-action: none;\n\n\tfont-size: 1.0125rem;\n\tdisplay: inline-flex;\n\tflex-direction: column;\n\tfont-weight: 400;\n\tgap: 0.1rem;\n\tcontain: content;\n\tletter-spacing: -0.02rem;\n\n\t.title {\n\t\tfont-family: var(--secondary-font-family);\n\t}\n\n\t.artist {\n\t\tfont-variant-caps: all-petite-caps;\n\t\tfont-size: 0.95rem;\n\t}\n\t.length {\n\t\tfont-size: 0.9rem;\n\t\tfont-variant-caps: all-petite-caps;\n\t}\n}\nsvg,\n* {\n\tcolor: #f2f2f2 !important;\n}\n\n.drag {\n\ttouch-action: none;\n\n\tposition: absolute;\n\tz-index: 500;\n\n\tleft: 0;\n\n\tright: 0;\n\n\tmargin: 0 auto;\n\tmin-width: 0;\n\tcontain: layout;\n\twidth: clamp(80%, 90%, 640px);\n\tmin-height: 10%;\n\tmax-height: 80vh;\n\theight: auto;\n\ttransform: translateY(0px);\n\tmax-width: 640px;\n\tborder-top-left-radius: var(--xl-radius);\n\tborder-top-right-radius: var(--xl-radius);\n\tbackground-color: var(--mobile-popper-bg);\n\tpadding: 1.75rem 0.8rem 0.8rem;\n}\n.handle {\n\ttouch-action: none;\n\n\ttop: 0;\n\t-webkit-filter: brightness(0.6);\n\tfilter: brightness(0.6);\n\tbackground-color: var(--mobile-popper-bg);\n\tcursor: pointer;\n\twidth: 100%;\n\theight: 1.8rem;\n\tposition: absolute;\n\tbox-shadow: 0 0 0.25rem 0 rgba(255, 255, 255, 0.158);\n\tdisplay: flex;\n\tplace-items: center;\n\tleft: 0;\n\tright: 0;\n\tborder-top-left-radius: var(--xl-radius);\n\tborder-top-right-radius: var(--xl-radius);\n\n\tborder-bottom: 0.0175rem groove rgba(171, 171, 171, 0.151);\n\tborder-top: 0.0175rem groove rgba(171, 171, 171, 0.151);\n\tbox-shadow: 0 -0.4rem 28px -12px rgb(255, 255, 255);\n\n\tbackground: linear-gradient(to bottom, hsl(240, 10%, 10%), hsl(240, 2%, 7%) 50%, hsl(240, 1%, 6%) 90%);\n}\nli,\nul {\n\ttouch-action: none;\n\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style-type: none;\n}\n\nul {\n\tdisplay: inherit;\n\tflex-direction: inherit;\n\tgap: 0.333em;\n}\n\nli {\n\tpadding: 1rem 1.125rem;\n\tcolor: #fff !important;\n\ttouch-action: none;\n\n\tbackground-color: rgba(105, 105, 105, 0.096);\n\tborder-radius: var(--lg-radius);\n\ttransition: background-color cubic-bezier(0.25, 0.46, 0.45, 0.94) 75ms;\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: rgba(170, 170, 170, 0.178);\n\t\t}\n\t}\n\t&:active:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: rgba(170, 170, 170, 0.178);\n\t}\n\t.text {\n\t\tmargin-left: 0.3em;\n\t}\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Popper/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Popper/popperStore.ts", - "messages": [ - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 5, - "column": 9, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 5, - "endColumn": 12, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [127, 130], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [127, 130], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - } - ], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 1, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": "// import { isOpen } from \"./PopperButton.svelte\";\nimport { get, writable } from \"svelte/store\";\n\ntype PopperStore = {\n\titems: any[];\n\tisOpen?: boolean;\n\ttype?: \"player\" | string;\n\tmetadata?: Partial<{\n\t\tthumbnail: string;\n\t\t// artist: string\n\t\ttitle: string;\n\t\tlength?: string;\n\t}>;\n\tx?: number;\n\ty?: number;\n\tbottom?: number;\n\tsrcNode?: HTMLElement;\n\tdirection?: \"normal\" | \"right\";\n};\nexport const PopperStore = _popperStore();\nfunction _popperStore() {\n\tconst { set, subscribe } = writable({\n\t\titems: [],\n\t\tisOpen: false,\n\t\ttype: \"\",\n\t});\n\treturn {\n\t\tsubscribe,\n\t\tset: (options: PopperStore) => {\n\t\t\tisOpen.set(true);\n\t\t\tset(options);\n\t\t},\n\t\treset: () => {\n\t\t\tisOpen.set(false);\n\t\t\tset({\n\t\t\t\titems: [],\n\t\t\t\tisOpen: false,\n\t\t\t\ttype: undefined,\n\t\t\t\tx: undefined,\n\t\t\t\ty: undefined,\n\t\t\t\tbottom: undefined,\n\t\t\t});\n\t\t\treturn false;\n\t\t},\n\t};\n}\n\nexport const isOpen = writable(false);\nexport const activeNode = _activeNode();\n\nfunction _activeNode() {\n\tconst { subscribe, set } = writable | WeakRef<{ value: null }>>();\n\treturn {\n\t\tsubscribe,\n\t\tset: (node: WeakRef | WeakRef<{ value: null }>) => {\n\t\t\tset(node);\n\t\t},\n\t\tget: () => {\n\t\t\treturn get(activeNode);\n\t\t},\n\t};\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Search/options.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Tab/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Tab/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".tab {\n\ttouch-action: none;\n\tcolor: rgba(255, 255, 255, 0.648);\n\tpadding: 1.1rem 1.2rem;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex: 1 1 auto;\n\tjustify-content: center;\n\tbackground-color: #0000;\n\tfont-weight: 550;\n\tfont-size: 0.9em;\n\tfont-family: \"CommissionerVariable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell,\n\t\t\"Open Sans\", \"Helvetica Neue\", sans-serif;\n\ttransition: cubic-bezier(0.445, 0.05, 0.55, 0.95) background-color 120ms;\n\tcursor: pointer;\n\ttext-transform: uppercase;\n\n\t&:hover {\n\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\tbackground-color: rgba(172, 172, 172, 0.13);\n\t}\n\t&:active {\n\t\tcolor: rgba(255, 255, 255, 0.9);\n\t\tbackground-color: rgba(172, 172, 172, 0.17);\n\t}\n\toverscroll-behavior: contain;\n}\n.active {\n\tcolor: #fff;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Tab/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Tabs/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/Tabs/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".tab-bar {\n\tdisplay: flex;\n\tflex: 0 1 auto;\n\toverscroll-behavior: contain;\n\ttouch-action: none;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/Tabs/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/TrackList/index.scss", - "messages": [ - { - "ruleId": null, - "fatal": true, - "severity": 2, - "message": "Parsing error: ESLint was configured to run on `/src/lib/components/TrackList/index.scss` using `parserOptions.project`: /tsconfig.json\nThe extension for the file (`.scss`) is non-standard. It should be added to your existing `parserOptions.extraFileExtensions`." - } - ], - "suppressedMessages": [], - "errorCount": 1, - "fatalErrorCount": 1, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "source": ".list {\n\toverscroll-behavior: contain;\n\n\tmin-height: 100vh;\n}\n", - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/components/TrackList/index.ts", - "messages": [], - "suppressedMessages": [], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 0, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "usedDeprecatedRules": [] - }, - { - "filePath": "/home/jbradn/Documents/GitHub/Beatbump/app/src/lib/configs/dropdowns.config.ts", - "messages": [ - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'DROPDOWN_TEXTS' is assigned a value but never used. Allowed unused vars must match /^_/u.", - "line": 31, - "column": 7, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 31, - "endColumn": 43 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'DROPDOWN_TEXTS' is assigned a value but never used.", - "line": 31, - "column": 7, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 31, - "endColumn": 43 - }, - { - "ruleId": "unused-imports/no-unused-vars", - "severity": 1, - "message": "'DROPDOWN_ICONS' is assigned a value but never used. Allowed unused vars must match /^_/u.", - "line": 76, - "column": 7, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 76, - "endColumn": 43 - }, - { - "ruleId": "@typescript-eslint/no-unused-vars", - "severity": 1, - "message": "'DROPDOWN_ICONS' is assigned a value but never used.", - "line": 76, - "column": 7, - "nodeType": "Identifier", - "messageId": "unusedVar", - "endLine": 76, - "endColumn": 43 - }, - { - "ruleId": "@typescript-eslint/no-explicit-any", - "severity": 1, - "message": "Unexpected any. Specify a different type.", - "line": 100, - "column": 20, - "nodeType": "TSAnyKeyword", - "messageId": "unexpectedAny", - "endLine": 100, - "endColumn": 23, - "suggestions": [ - { - "messageId": "suggestUnknown", - "fix": { "range": [1669, 1672], "text": "unknown" }, - "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct." - }, - { - "messageId": "suggestNever", - "fix": { "range": [1669, 1672], "text": "never" }, - "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of." - } - ] - }, - { - "ruleId": "@typescript-eslint/no-non-null-assertion", - "severity": 1, - "message": "Forbidden non-null assertion.", - "line": 168, - "column": 50, - "nodeType": "TSNonNullExpression", - "messageId": "noNonNull", - "endLine": 168, - "endColumn": 56 - }, - { - "ruleId": "@typescript-eslint/no-non-null-assertion", - "severity": 1, - "message": "Forbidden non-null assertion.", - "line": 170, - "column": 19, - "nodeType": "TSNonNullExpression", - "messageId": "noNonNull", - "endLine": 170, - "endColumn": 26 - } - ], - "suppressedMessages": [ - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 106, - "column": 70, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 106, - "endColumn": 72, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 107, - "column": 71, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 107, - "endColumn": 73, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 108, - "column": 65, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 108, - "endColumn": 67, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 109, - "column": 61, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 109, - "endColumn": 63, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 113, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 113, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 115, - "column": 55, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 115, - "endColumn": 57, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 116, - "column": 69, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 116, - "endColumn": 71, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 120, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 120, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 122, - "column": 72, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 122, - "endColumn": 74, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 126, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 126, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 131, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 131, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 136, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 136, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 141, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 141, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 146, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 146, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 148, - "column": 61, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 148, - "endColumn": 63, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 152, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 152, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 154, - "column": 69, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 154, - "endColumn": 71, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 155, - "column": 72, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 155, - "endColumn": 74, - "suppressions": [{ "kind": "directive", "justification": "" }] - }, - { - "ruleId": "@typescript-eslint/no-empty-function", - "severity": 2, - "message": "Unexpected empty method 'action'.", - "line": 159, - "column": 17, - "nodeType": "ArrowFunctionExpression", - "messageId": "unexpected", - "endLine": 159, - "endColumn": 19, - "suppressions": [{ "kind": "directive", "justification": "" }] - } - ], - "errorCount": 0, - "fatalErrorCount": 0, - "warningCount": 7, - "fixableErrorCount": 0, - "fixableWarningCount": 0, - "output": "/* eslint-disable @typescript-eslint/no-empty-function */\n\nexport type Label =\n\t| \"View Artist\"\n\t| \"Add to Queue\"\n\t| \"Play Next\"\n\t| \"Add to Playlist\"\n\t| \"Favorite\"\n\t| \"Start Group Session\"\n\t| \"Share Group Session\"\n\t| \"Share\"\n\t| \"Shuffle Playlist\"\n\t| \"Go to Album\"\n\t| \"Remove From Favorites\"\n\t| \"View Playlist\"\n\t| \"Play Song Radio\"\n\t| \"Add to Favorites\"\n\t| \"Remove From Playlist\"\n\t| \"Shuffle\"\n\t| \"Up Next\"\n\t| \"Related\"\n\t| \"Start Playlist\"\n\t| \"Edit Playlist\"\n\t| \"Start Radio\"\n\t| \"Play Album\"\n\t| \"Invite Group Session\"\n\t| \"Album Radio\"\n\t| \"Remove from Queue\";\n\nexport type Dropdown = TypedDropdownItem