7 |
13 | )
14 |
15 | export default NoPlayer
16 |
--------------------------------------------------------------------------------
/src/routes/Queue/components/QueueListAnimator/QueueListAnimator.css:
--------------------------------------------------------------------------------
1 | .itemEnter {
2 | animation: enter .3s;
3 | }
4 |
5 | .itemExit {
6 | animation: exit .5s;
7 | }
8 |
9 | @keyframes enter {
10 | 0% { opacity: 0; transform: scale3d(0, 0, 0); }
11 | 100% { opacity: 1; transform: scale3d(1, 1, 1); }
12 | }
13 |
14 | @keyframes exit {
15 | 0% { opacity: 1; transform: scale3d(1, 1, 1); }
16 | 100% { opacity: 0; transform: scale3d(0, 0, 0); }
17 | }
18 |
--------------------------------------------------------------------------------
/server/lib/parseCookie.js:
--------------------------------------------------------------------------------
1 | // cookie helper based on
2 | // http://stackoverflow.com/questions/3393854/get-and-set-a-single-cookie-with-node-js-http-server
3 | export default function parseCookie (cookie) {
4 | const list = {}
5 |
6 | if (cookie) {
7 | cookie.split(';')
8 | .forEach((c) => {
9 | const parts = c.split('=')
10 | list[parts.shift().trim()] = decodeURI(parts.join('='))
11 | })
12 | }
13 |
14 | return list
15 | }
16 |
--------------------------------------------------------------------------------
/src/routes/Account/components/Rooms/EditRoom/EditRoom.css:
--------------------------------------------------------------------------------
1 | .modal {
2 | min-width: 360px;
3 | }
4 |
5 | .fieldContainer,
6 | .prefsContainer,
7 | .btnContainer {
8 | display: flex;
9 | flex-direction: column;
10 | gap: var(--space-s);
11 | margin: var(--space-l) 0;
12 |
13 | &:first-child {
14 | margin-top: 0;
15 | }
16 |
17 | &:last-child {
18 | margin-bottom: 0;
19 | }
20 | }
21 |
22 | .fieldContainer select {
23 | width: fit-content;
24 | }
--------------------------------------------------------------------------------
/src/components/Header/PlaybackCtrl/VolumeSlider/VolumeSlider.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | width: 100%;
3 | margin: 0 34px 0 30px;
4 | }
5 |
6 | .handle {
7 | cursor: pointer;
8 | color: var(--transport-btn-bg-color);
9 | filter: var(--transport-btn-filter);
10 | position: absolute;
11 | touch-action: pan-x;
12 | outline: none;
13 |
14 | &:focus-visible {
15 | outline: var(--focus-outline);
16 | }
17 |
18 | svg {
19 | height: var(--icon-size-xl);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/Account/components/Prefs/PlayerPrefs/PlayerPrefs.css:
--------------------------------------------------------------------------------
1 | .heading {
2 | button {
3 | display: flex;
4 | align-items: center;
5 | gap: var(--space-s);
6 | padding: var(--space-s);
7 | font-size: var(--font-size-m);
8 | }
9 |
10 | svg {
11 | height: var(--icon-size-l);
12 | }
13 | }
14 |
15 | .content {
16 | padding: var(--container-padding);
17 | }
18 |
19 | .content label {
20 | padding: var(--container-padding);
21 | cursor: pointer;
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/Account/components/Prefs/Prefs.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Panel from 'components/Panel/Panel'
3 | import PathPrefs from './PathPrefs/PathPrefs'
4 | import PlayerPrefs from './PlayerPrefs/PlayerPrefs'
5 | import styles from './Prefs.css'
6 |
7 | const Prefs = () => (
8 | 8 | No player in room ( 9 | Launch Player 10 | ) 11 |
12 |
12 |
16 | )
17 |
18 | export default TextOverlay
19 |
--------------------------------------------------------------------------------
/server/lib/getWindowsDrives.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 |
3 | export default function () {
4 | const possibleDrives = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(letter => `${letter}:\\`)
5 | const existingDrives = possibleDrives.filter((drive) => {
6 | try {
7 | fs.accessSync(drive, fs.constants.R_OK)
8 | return true
9 | } catch {
10 | return false
11 | }
12 | })
13 |
14 | return existingDrives.map(drive => ({
15 | path: drive,
16 | label: drive.substring(0, 2),
17 | }))
18 | }
19 |
--------------------------------------------------------------------------------
/server/Library/ipc.js:
--------------------------------------------------------------------------------
1 | import Library from './Library.js'
2 | import throttle from '@jcoreio/async-throttle'
3 | import { SCANNER_WORKER_STATUS, LIBRARY_MATCH_SONG } from '../../shared/actionTypes.ts'
4 |
5 | /**
6 | * IPC action handlers
7 | */
8 | export default function (io) {
9 | const emit = throttle(action => io.emit('action', action), 1000)
10 |
11 | return {
12 | [LIBRARY_MATCH_SONG]: async ({ payload }) => Library.matchSong(payload),
13 | [SCANNER_WORKER_STATUS]: action => emit(action),
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/server/lib/schemas/003-queue-linked-list.sql:
--------------------------------------------------------------------------------
1 | -- Up
2 | ALTER TABLE "queue" ADD COLUMN "prevQueueId" INTEGER REFERENCES queue(queueId) DEFERRABLE INITIALLY DEFERRED;
3 |
4 | CREATE INDEX IF NOT EXISTS idxPrevQueueId ON "queue" ("prevQueueId" ASC);
5 |
6 | UPDATE queue
7 | SET prevQueueId = (
8 | SELECT MAX(q.queueId)
9 | FROM queue q
10 | WHERE q.queueId < queue.queueId AND q.roomId = queue.roomId
11 | );
12 |
13 | -- Down
14 | DROP INDEX IF EXISTS idxPrevQueueId;
15 |
16 | ALTER TABLE "queue" DROP COLUMN "prevQueueId";
17 |
--------------------------------------------------------------------------------
/src/styles/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Beon';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url('~fonts/beon.woff2') format('woff2');
6 | }
7 |
8 | @font-face {
9 | font-family: 'Raleway';
10 | font-style: normal;
11 | font-weight: 200;
12 | src: url('~fonts/raleway-v14-latin-200.woff2') format('woff2');
13 | }
14 |
15 | @font-face {
16 | font-family: 'Raleway';
17 | font-style: normal;
18 | font-weight: 700;
19 | src: url('~fonts/raleway-v14-latin-700.woff2') format('woff2');
20 | }
21 |
--------------------------------------------------------------------------------
/server/lib/getIPAddress.js:
--------------------------------------------------------------------------------
1 | // https://gist.github.com/savokiss/96de34d4ca2d37cbb8e0799798c4c2d3
2 | import os from 'os'
3 |
4 | export default function () {
5 | const interfaces = os.networkInterfaces()
6 |
7 | for (const devName in interfaces) {
8 | const iface = interfaces[devName]
9 |
10 | for (let i = 0; i < iface.length; i++) {
11 | const alias = iface[i]
12 |
13 | if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
14 | return alias.address
15 | }
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Spinner/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import styles from './Spinner.css'
4 |
5 | const Spinner = () => (
6 |
13 | {props.children}
14 |
15 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | export default Spinner
16 |
--------------------------------------------------------------------------------
/src/store/Persistor.ts:
--------------------------------------------------------------------------------
1 | import { Store } from '@reduxjs/toolkit'
2 | import { persistStore } from 'redux-persist'
3 |
4 | export default class Persistor {
5 | private static instance: ReturnType
12 |
20 | )
21 | }
22 |
23 | export default Logo
24 |
--------------------------------------------------------------------------------
/src/lib/util.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Converts a FormData object into a plain JavaScript object.
3 | * If a key appears multiple times (e.g., checkboxes or multi-select inputs),
4 | * it stores them as an array.
5 | */
6 | export const getFormData = (formData: FormData): Record13 | Karaoke 14 | 15 | Eterna 16 | l 17 | 18 |
19 |
13 |
20 | )
21 | }
22 |
23 | export default PathItem
24 |
--------------------------------------------------------------------------------
/server/Library/router.js:
--------------------------------------------------------------------------------
1 | import KoaRouter from '@koa/router'
2 | import Media from '../Media/Media.js'
3 | const router = new KoaRouter({ prefix: '/api' })
4 |
5 | // lists underlying media for a given song
6 | router.get('/song/:songId', async (ctx) => {
7 | // must be admin
8 | if (!ctx.user.isAdmin) {
9 | ctx.throw(401)
10 | }
11 |
12 | const songId = parseInt(ctx.params.songId, 10)
13 |
14 | if (Number.isNaN(songId)) {
15 | ctx.throw(401, 'Invalid songId')
16 | }
17 |
18 | const res = await Media.search({ songId })
19 |
20 | if (!res.result.length) {
21 | ctx.throw(404)
22 | }
23 |
24 | ctx.body = res
25 | })
26 |
27 | export default router
28 |
--------------------------------------------------------------------------------
/src/routes/Account/components/Rooms/Rooms.css:
--------------------------------------------------------------------------------
1 | .roomsFilter {
2 | max-width: 50%;
3 | }
4 |
5 | .showAll {
6 | cursor: pointer;
7 | }
8 |
9 | .table {
10 | width: 100%;
11 | }
12 |
13 | .table > * {
14 | outline: none;
15 | }
16 |
17 | .table th {
18 | color: hsl(var(--hue-blue), 10%, 60%);
19 | font-weight: normal;
20 | text-align: left;
21 | }
22 |
23 | .table th:first-child {
24 | width: 100%;
25 | }
26 |
27 | .table th:nth-child(2) {
28 | min-width: 70px;
29 | }
30 |
31 | .table td {
32 | height: 25px;
33 | overflow: hidden;
34 | white-space: nowrap;
35 | }
36 |
37 | .table td:first-child {
38 | text-overflow: ellipsis;
39 | max-width: 0;
40 | }
41 |
--------------------------------------------------------------------------------
/src/routes/Account/components/Users/Users.css:
--------------------------------------------------------------------------------
1 | .usersFilter {
2 | max-width: 50%;
3 | }
4 |
5 | .showAll {
6 | cursor: pointer;
7 | }
8 |
9 | .table {
10 | width: 100%;
11 | }
12 |
13 | .table > * {
14 | outline: none;
15 | }
16 |
17 | .table th {
18 | color: hsl(var(--hue-blue), 10%, 60%);
19 | font-weight: normal;
20 | text-align: left;
21 | }
22 |
23 | .table th:first-child {
24 | width: 100%;
25 | }
26 |
27 | .table th:nth-child(2) {
28 | min-width: 70px;
29 | }
30 |
31 | .table td {
32 | height: 25px;
33 | overflow: hidden;
34 | white-space: nowrap;
35 | }
36 |
37 | .table td:first-child {
38 | text-overflow: ellipsis;
39 | max-width: 0;
40 | }
41 |
--------------------------------------------------------------------------------
/server/lib/getPermutations.js:
--------------------------------------------------------------------------------
1 | // return all uppercase and lowercase permutations of str
2 | // based on https://stackoverflow.com/a/27995370
3 | function getPermutations (str) {
4 | const results = []
5 | const arr = str.split('')
6 | const len = Math.pow(arr.length, 2)
7 |
8 | for (let i = 0; i < len; i++) {
9 | for (let k = 0, j = i; k < arr.length; k++, j >>= 1) {
10 | arr[k] = (j & 1) ? arr[k].toUpperCase() : arr[k].toLowerCase()
11 | }
12 |
13 | const combo = arr.join('')
14 | results.push(combo)
15 | }
16 |
17 | // remove duplicates
18 | return results.filter((ext, pos, self) => self.indexOf(ext) === pos)
19 | }
20 |
21 | export default getPermutations
22 |
--------------------------------------------------------------------------------
/src/components/InputRadio/InputRadio.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: inline-flex;
3 | align-items: center;
4 | gap: var(--space-s);
5 | cursor: pointer;
6 |
7 | input[type="radio"] {
8 | -webkit-appearance: none;
9 | appearance: none;
10 | min-width: 1.5em;
11 | min-height: 1.5em;
12 | border-radius: 50%;
13 | border: 2px solid var(--btn-bg-color);
14 | outline: none;
15 |
16 | &:checked,
17 | &:focus:checked,
18 | &:hover:checked {
19 | background: radial-gradient(
20 | circle,
21 | var(--btn-active-bg-color) 0%,
22 | var(--btn-active-bg-color) 60%,
23 | #000 60%,
24 | #000 100%
25 | );
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Panel/Panel.css:
--------------------------------------------------------------------------------
1 | .container {
2 | background-color: var(--panel-bg-color);
3 | border-radius: 12px;
4 | overflow: hidden;
5 | }
6 |
7 | .titleContainer {
8 | display: flex;
9 | align-items: center;
10 | justify-content: space-between;
11 | padding: var(--space-s) var(--container-padding);
12 | color: hsl(var(--hue-blue), 10%, 80%);
13 | background-color: hsl(var(--hue-blue), 20%, 20%);
14 | background-image: linear-gradient(135deg, hsl(209,20%,20%) 0%, hsl(209,20%,10%) 100%);
15 |
16 | h1 {
17 | margin: 0;
18 | font-size: var(--font-size-l);
19 | font-weight: var(--font-weight-bold);
20 | }
21 | }
22 |
23 | .content {
24 | padding: var(--container-padding);
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "*": ["./src/*"],
5 | "shared/*": ["./shared/*"],
6 | },
7 | "skipLibCheck": true,
8 | "noImplicitAny": true,
9 | "downlevelIteration": true,
10 | "esModuleInterop": true,
11 | "moduleResolution": "Bundler",
12 | "module": "esnext",
13 | "jsx": "react",
14 | "typeRoots": [
15 | "types",
16 | "node_modules/@types"
17 | ],
18 | "plugins": [
19 | {
20 | "name": "typescript-plugin-css-modules",
21 | "options": {
22 | "customMatcher": "\\.css$",
23 | },
24 | },
25 | ],
26 | },
27 | "include": ["src/**/*", "config/declarations.d.ts"],
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2019-2022 RadRoot LLC
2 |
3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4 |
5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
6 |
--------------------------------------------------------------------------------
/docs/layouts/shortcodes/img.html:
--------------------------------------------------------------------------------
1 | {{ $img := .Get 0 }}
2 | {{ $density := default "2x" (.Get 2) }}
3 | {{ range where .Site.Pages ".Section" "docs" }}
4 | {{ with .Page.Resources.GetMatch $img }}
5 | {{ $img = . }}
6 | {{ end }}
7 | {{ end }}
8 |
14 |
16 |
17 | {props.path}
18 |
19 | {{ (.Get 1) }}
17 |
15 |
23 | )
24 |
25 | export default Panel
26 |
--------------------------------------------------------------------------------
/docs/layouts/shortcodes/screenshots.html:
--------------------------------------------------------------------------------
1 |
16 |
19 | {title}
17 | {titleComponent} 18 |
20 | {children}
21 |
22 | -
2 | {{ with .Site.GetPage "docs/karaoke-eternal-app" }}
3 | {{ range sort ((.Resources.ByType "image").Match "app-*") ".Params.galleryOrder" }}
4 | {{ if .Params.galleryOrder }}
5 |
-
6 |
7 |
8 | 9 | 10 |
13 | {{ end }}
14 | {{ end }}
15 | {{ end }}
16 |
34 | {children}
35 |
36 | )
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/types/butterchurn.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'butterchurn' {
2 | type Preset = Record
7 | {{ block "main" . }}
8 | {{ end }}
9 |
10 |
11 |
12 |
30 | {{ partial "footer.html" . }}
31 |
32 |
--------------------------------------------------------------------------------
/src/components/Accordion/Accordion.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | background: hsl(var(--hue-blue), 20%, 15%);
3 | border-radius: var(--border-radius);
4 |
5 | &[data-expanded] {
6 | .icon {
7 | transform: rotate(90deg);
8 | }
9 |
10 | .headingContainer {
11 | border-radius: var(--border-radius) var(--border-radius) 0 0;
12 | }
13 | }
14 | }
15 |
16 | .icon {
17 | flex-shrink: 0;
18 | }
19 |
20 | .headingContainer {
21 | display: flex;
22 | justify-content: space-between;
23 | align-items: center;
24 | background-color: hsl(var(--hue-blue), 20%, 25%);
25 | background-image: linear-gradient(135deg, hsl(var(--hue-blue), 20%, 25%) 0%, hsl(var(--hue-blue), 20%, 15%) 100%);
26 | border-radius: var(--border-radius);
27 | cursor: pointer;
28 |
29 | button {
30 | color: inherit;
31 | background: none;
32 | border: none;
33 | cursor: pointer;
34 | outline: none;
35 |
36 | &:focus-visible {
37 | outline: var(--focus-outline);
38 | }
39 | }
40 |
41 | svg {
42 | display: block;
43 | height: var(--icon-size-l);
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/server/lib/schemas/005-roles.sql:
--------------------------------------------------------------------------------
1 | -- Up
2 | CREATE TABLE IF NOT EXISTS "roles" (
3 | "roleId" integer PRIMARY KEY AUTOINCREMENT NOT NULL,
4 | "name" text NOT NULL COLLATE NOCASE,
5 | "data" text NOT NULL DEFAULT('{}')
6 | );
7 |
8 | CREATE UNIQUE INDEX IF NOT EXISTS idxName ON "roles" ("name" ASC);
9 |
10 | INSERT INTO roles (name) VALUES ('admin'), ('player'), ('standard'), ('guest');
11 |
12 | ALTER TABLE users ADD COLUMN "roleId" integer NOT NULL DEFAULT 0 REFERENCES roles(roleId) DEFERRABLE INITIALLY DEFERRED;
13 |
14 | UPDATE users SET roleId = CASE
15 | WHEN isAdmin = 1 THEN (SELECT roleId FROM roles WHERE name = 'admin')
16 | WHEN isAdmin = 0 THEN (SELECT roleId FROM roles WHERE name = 'standard')
17 | ELSE (SELECT roleId FROM roles WHERE name = 'standard')
18 | END;
19 |
20 | ALTER TABLE users DROP COLUMN isAdmin;
21 |
22 | -- Down
23 | ALTER TABLE users ADD COLUMN isAdmin integer DEFAULT 0;
24 |
25 | UPDATE users SET isAdmin = CASE
26 | WHEN roleId = (SELECT roleId FROM roles WHERE name = 'admin') THEN 1
27 | ELSE 0
28 | END;
29 |
30 | ALTER TABLE users DROP COLUMN roleId;
31 |
32 | DROP TABLE roles;
33 |
--------------------------------------------------------------------------------
/src/store/reducers.ts:
--------------------------------------------------------------------------------
1 | import { combineSlices } from '@reduxjs/toolkit'
2 | import { optimistic } from 'redux-optimistic-ui'
3 |
4 | import artists from 'routes/Library/modules/artists'
5 | import library from 'routes/Library/modules/library'
6 | import prefs from './modules/prefs'
7 | import queue from 'routes/Queue/modules/queue'
8 | import rooms from './modules/rooms'
9 | import songs from 'routes/Library/modules/songs'
10 | import songInfo from './modules/songInfo'
11 | import starCounts from 'routes/Library/modules/starCounts'
12 | import status from './modules/status'
13 | import ui from './modules/ui'
14 | import user from './modules/user'
15 | import userStars from './modules/userStars'
16 |
17 | export interface LazyLoadedSlices {} // eslint-disable-line @typescript-eslint/no-empty-object-type
18 |
19 | const combinedReducer = combineSlices({
20 | artists,
21 | library,
22 | prefs,
23 | queue: optimistic(queue),
24 | rooms,
25 | songs,
26 | songInfo,
27 | starCounts,
28 | status,
29 | ui,
30 | user,
31 | userStars: optimistic(userStars),
32 | }).withLazyLoadedSlices
19 |
27 |
28 | Welcome
20 |21 | Create your 22 | admin 23 | {' '} 24 | account to get started. All data is locally stored and never shared. 25 |
26 |
9 | clsx(isActive && styles.active)}>
10 |
15 |
16 | clsx(isActive && styles.active)}>
17 |
22 |
23 | clsx(isActive && styles.active)}>
24 |
29 |
30 |
31 | ))
32 |
33 | Navigation.displayName = 'Navigation'
34 |
35 | export default Navigation
36 |
--------------------------------------------------------------------------------
/docs/layouts/partials/head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
15 |
21 | )
22 | }
23 |
24 | if (props.isUpNext) {
25 | return (
26 | 16 | You’re up 17 | {' '} 18 | now 19 |
20 |
27 |
34 | )
35 | }
36 |
37 | if (props.wait) {
38 | return (
39 | 28 | You’re up 29 | {' '} 30 | next 31 | {props.wait ? ` in ${formatSeconds(props.wait, true)}` : ''} 32 |
33 |
40 |
46 | )
47 | }
48 |
49 | return null
50 | }
51 |
52 | export default UpNext
53 |
--------------------------------------------------------------------------------
/src/routes/Library/components/ArtistItem/ArtistItem.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | height: var(--artist-item-height);
4 | align-items: center;
5 | overflow: hidden;
6 | }
7 |
8 | .name {
9 | color: var(--artist-name-color);
10 | flex: 1;
11 | font-size: 20px;
12 | text-overflow: ellipsis;
13 | overflow: hidden;
14 | white-space: nowrap;
15 | padding-left: 3px;
16 | cursor: pointer;
17 | }
18 |
19 | .folderContainer {
20 | height: var(--artist-item-height);
21 | color: var(--artist-folder-bg-color);
22 | }
23 |
24 | .count {
25 | position: relative;
26 | top: -30px;
27 | text-align: center;
28 | font-size: 16px;
29 | color: var(--artist-name-color);
30 | }
31 |
32 | .iconChevron {
33 | position: relative;
34 | top: -34px;
35 | text-align: center;
36 | color: var(--text-color);
37 | }
38 |
39 | .hasStarred .folderContainer {
40 | color: var(--artist-folder-starred-bg-color);
41 | filter: var(--artist-folder-starred-filter);
42 | }
43 |
44 | .hasStarred .iconChevron,
45 | .hasStarred .count {
46 | color: #000;
47 | }
48 |
49 | .animateGlow {
50 | animation: var(--animation-text-shadow-glow);
51 | }
52 |
53 | .isChildQueued {
54 | color: var(--queued-item-color);
55 | text-shadow: var(--queued-item-text-shadow);
56 | }
57 |
--------------------------------------------------------------------------------
/src/routes/Player/components/PlayerTextOverlay/ColorCycle/ColorCycle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import styles from './ColorCycle.css'
4 |
5 | const framerate = 33 // ms
6 |
7 | interface ColorCycleProps {
8 | className?: string
9 | text: string
10 | offset?: number
11 | }
12 |
13 | class ColorCycle extends React.Component41 | You’re up in 42 | {' '} 43 | {formatSeconds(props.wait, true)} 44 |
45 |
39 | {text}
40 |
41 | )
42 | }
43 | }
44 |
45 | export default ColorCycle
46 |
--------------------------------------------------------------------------------
/src/routes/Library/modules/starCounts.ts:
--------------------------------------------------------------------------------
1 | import { createAction, createReducer } from '@reduxjs/toolkit'
2 | import {
3 | SONG_STARRED,
4 | SONG_UNSTARRED,
5 | STAR_COUNTS_PUSH,
6 | } from 'shared/actionTypes'
7 |
8 | const songStarred = createAction<{ songId: number }>(SONG_STARRED)
9 | const songUnstarred = createAction<{ songId: number }>(SONG_UNSTARRED)
10 | const starCountsPush = createAction
31 | {isSignedIn
32 | &&
40 | )
41 | }
42 |
43 | export default AccountView
44 |
--------------------------------------------------------------------------------
/server/lib/Database.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import fse from 'fs-extra'
3 | import sqlite3 from 'sqlite3'
4 | import { open as sqliteOpen } from 'sqlite'
5 | import getLogger from './Log.js'
6 |
7 | const log = getLogger('db')
8 |
9 | class Database {
10 | static refs = {}
11 |
12 | static async close () {
13 | if (Database.refs.db) {
14 | log.info('Closing database file %s', Database.refs.db.config.filename)
15 | await Database.refs.db.close()
16 | }
17 | }
18 |
19 | static async open ({ file, ro = true } = {}) {
20 | if (Database.refs.db) throw new Error('Database already open')
21 | log.info('Opening database file %s %s', ro ? '(read-only)' : '(writeable)', file)
22 |
23 | // create path if it doesn't exist
24 | fse.ensureDirSync(path.dirname(file))
25 |
26 | const db = await sqliteOpen({
27 | filename: file,
28 | driver: sqlite3.Database,
29 | mode: ro ? sqlite3.OPEN_READONLY : null,
30 | })
31 |
32 | if (!ro) {
33 | await db.migrate({
34 | migrationsPath: path.join(import.meta.dirname, 'schemas'),
35 | })
36 |
37 | await db.run('PRAGMA journal_mode = WAL;')
38 | await db.run('PRAGMA foreign_keys = ON;')
39 | }
40 |
41 | Database.refs.db = db
42 | return db
43 | }
44 | }
45 |
46 | export const open = Database.open
47 | export const close = Database.close
48 |
49 | export default Database.refs
50 |
--------------------------------------------------------------------------------
/src/routes/Account/views/SignedInView/SignedInView.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import combinedReducer from 'store/reducers'
3 | import { useAppDispatch, useAppSelector } from 'store/hooks'
4 | import { fetchAccount } from 'store/modules/user'
5 | import usersReducer, { sliceInjectNoOp } from '../../modules/users'
6 | import About from '../../components/About/About'
7 | import Account from '../../components/Account/Account'
8 | import Prefs from '../../components/Prefs/Prefs'
9 | import Rooms from '../../components/Rooms/Rooms'
10 | import Users from '../../components/Users/Users'
11 |
12 | const SignedInView = () => {
13 | const { isAdmin } = useAppSelector(state => state.user)
14 | const sliceExists = !!useAppSelector(state => state.users)
15 | const dispatch = useAppDispatch()
16 |
17 | if (isAdmin && !sliceExists) {
18 | combinedReducer.inject({ reducerPath: 'users', reducer: usersReducer })
19 | dispatch(sliceInjectNoOp()) // update store with new slice
20 | }
21 |
22 | // once per mount
23 | useEffect(() => {
24 | (async () => dispatch(fetchAccount()))()
25 | }, [dispatch])
26 |
27 | return (
28 | <>
29 | {isAdmin
30 | && Player
23 |
24 | )}
25 | >
26 |
27 |
37 |
38 |
46 | {Component}
47 |
48 | )
49 | }
50 |
51 | export default React.memo(PlayerTextOverlay)
52 |
--------------------------------------------------------------------------------
/src/lib/HttpApi.ts:
--------------------------------------------------------------------------------
1 | export default class HttpApi {
2 | prefix: string
3 | options: RequestInit
4 |
5 | constructor (prefix = '') {
6 | this.prefix = prefix
7 | this.options = {
8 | credentials: 'same-origin',
9 | }
10 | }
11 |
12 | put =
42 |
50 | )
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Logo/Logo.css:
--------------------------------------------------------------------------------
1 | .container {
2 | font-family: Beon;
3 | white-space: nowrap;
4 | flex: 1;
5 | }
6 |
7 | .title {
8 | border: none;
9 | color: hsl(var(--hue-blue), 10%, 80%);
10 | display: inline-block;
11 | font-size: 200%;
12 | font-weight: normal;
13 | text-transform: uppercase;
14 | margin: 0;
15 | text-shadow:
16 | 0 0 .1em hsl(var(--hue-pink), 100%, 100%),
17 | 0 0 .5em hsl(var(--hue-pink), 100%, 100%),
18 | 0 0 .25em hsl(var(--hue-pink), 100%, 50%),
19 | 0 0 .5em hsl(var(--hue-pink), 100%, 50%),
20 | 0 0 .75em hsl(var(--hue-pink), 100%, 50%),
21 | 0 0 1em hsl(var(--hue-pink), 100%, 50%),
22 | 0 0 1.5em hsl(var(--hue-pink), 100%, 50%),
23 | 0 0 3em hsl(var(--hue-pink), 100%, 50%),
24 | 0 0 6em hsl(var(--hue-pink), 100%, 50%),
25 | 0 0 9em hsl(var(--hue-pink), 100%, 50%);
26 | }
27 |
28 | .eternal {
29 | font-size: 40%;
30 | text-transform: uppercase;
31 | display: block;
32 | letter-spacing: .9em;
33 | border: .1em solid hsl(var(--hue-blue), 100%, 90%);
34 | border-radius: .25em;
35 | padding: .25em;
36 | text-shadow:
37 | 0 0 .1em hsl(var(--hue-blue), 100%, 90%),
38 | 0 0 .25em hsl(var(--hue-blue), 100%, 90%),
39 | 0 0 .25em hsl(var(--hue-blue), 100%, 50%),
40 | 0 0 .5em hsl(var(--hue-blue), 100%, 50%);
41 | box-shadow:
42 | 0 0 .1em hsl(var(--hue-blue), 100%, 90%),
43 | 0 0 .25em hsl(var(--hue-blue), 100%, 90%),
44 | 0 0 .5em hsl(var(--hue-blue), 100%, 50%),
45 | 0 0 .75em hsl(var(--hue-blue), 100%, 50%),
46 | inset 0 0 .5em hsl(var(--hue-blue), 100%, 50%),
47 | inset 0 0 .75em hsl(var(--hue-blue), 100%, 50%);
48 | }
49 |
50 | .lastChar {
51 | letter-spacing: normal;
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Header/PlaybackCtrl/DisplayCtrl/DisplayCtrl.css:
--------------------------------------------------------------------------------
1 | .modal {
2 | width: 90vw;
3 | max-width: 480px;
4 | }
5 |
6 | .container {
7 | display: flex;
8 | flex-direction: column;
9 | gap: var(--space-m);
10 | }
11 |
12 | .section {
13 | /* Safari REALLY doesn't like fieldsets to be flex *items*, hence the .section wrapper */
14 | fieldset {
15 | display: flex;
16 | flex-direction: column;
17 | gap: var(--space-m);
18 | margin: 0;
19 | padding: var(--container-padding);
20 | border: 1px solid var(--btn-bg-color);
21 | border-radius: var(--border-radius);
22 | }
23 |
24 | legend {
25 | font-size: var(--font-size-m);
26 | width: fit-content;
27 | }
28 | }
29 |
30 | .visualizer legend {
31 | label {
32 | display: flex;
33 | gap: var(--space-s);
34 | align-items: center;
35 | cursor: pointer;
36 | }
37 | }
38 |
39 | .presetContainer {
40 | display: flex;
41 | flex-direction: column;
42 | gap: var(--space-s);
43 | }
44 |
45 | .presetButtons {
46 | display: flex;
47 | gap: var(--space-s);
48 |
49 | button {
50 | display: block;
51 | background-color: var(--btn-active-bg-color);
52 | border-radius: var(--border-radius);
53 | width: 100%;
54 |
55 | svg {
56 | height: var(--icon-size-xl);
57 | color: #000;
58 | }
59 | }
60 | }
61 |
62 | .presetName {
63 | margin: 0;
64 | height: 2lh;
65 | display: -webkit-box;
66 | -webkit-line-clamp: 2;
67 | -webkit-box-orient: vertical;
68 | line-clamp: 2;
69 | overflow: hidden;
70 | text-overflow: ellipsis;
71 | }
72 |
73 | .unsupported {
74 | text-align: center;
75 | margin: var(--space-m) 0;
76 | color: grey;
77 | }
78 |
79 | .slider {
80 | margin: 0 1.25rem;
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/Modal/Modal.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | opacity: 0;
5 | color: var(--text-color);
6 | background: transparent;
7 | padding: var(--space-m);
8 | border: 1.5px solid hsl(var(--hue-blue), 20%, 30%);
9 | border-radius: 16px;
10 | max-width: min(800px, 90vw);
11 | box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
12 | backdrop-filter: blur(30px) brightness(50%) saturate(100%);
13 | -webkit-backdrop-filter: blur(30px) brightness(50%) saturate(100%);
14 |
15 | &[open] {
16 | animation: fadeIn 0.15s forwards;
17 | box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
18 | }
19 | }
20 |
21 | .titleContainer {
22 | display: flex;
23 | font-family: var(--font-family-custom);
24 | margin: 0 0 var(--space-s) 0;
25 |
26 | h1 {
27 | flex: 1;
28 | margin: 0;
29 | font-size: var(--font-size-xl);
30 | line-height: 1em;
31 | }
32 |
33 | }
34 |
35 | .btnClose {
36 | position: relative;
37 | top: calc(var(--space-s) * -1);
38 | right: calc(var(--space-s) * -1);
39 | align-self: flex-start;
40 | color: var(--btn-active-bg-color);
41 | padding: var(--space-s);
42 | line-height: 1em;
43 |
44 | &:focus-visible {
45 | outline: none;
46 | }
47 |
48 | svg {
49 | height: var(--icon-size-l);
50 | line-height: 1em;
51 | }
52 | }
53 |
54 | .content {
55 | flex: 1;
56 |
57 | &.scrollable {
58 | overflow: auto;
59 | -webkit-overflow-scrolling: touch;
60 | }
61 | }
62 |
63 | .buttons {
64 | display: flex;
65 | flex-direction: column;
66 | row-gap: var(--space-s);
67 | column-gap: var(--space-m);
68 | margin-top: var(--container-padding);
69 | }
70 |
71 |
72 | @keyframes fadeIn {
73 | from { opacity: 0; }
74 | to { opacity: 1; }
75 | }
76 |
--------------------------------------------------------------------------------
/server/Scanner/FileScanner/getFiles.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import getLogger from '../../lib/Log.js'
4 | const log = getLogger('FileScanner:getFiles')
5 |
6 | /**
7 | * Silly promise wrapper for synchronous walker
8 | *
9 | * We want a synchronous walker for performance, but FileScanner runs
10 | * the walker in a loop, which will block the (async) socket.io status
11 | * emissions unless we use setTimeout here. @todo is there a better way?
12 | *
13 | * @param {string} dir path to recursively list
14 | * @param {function} filterFn filter function applied to each file
15 | * @return {array} array of objects with path and stat properties
16 | */
17 | function getFiles (dir, filterFn) {
18 | return new Promise((resolve, reject) => {
19 | setTimeout(() => {
20 | try {
21 | resolve(walkSync(dir, filterFn))
22 | } catch (err) {
23 | reject(err)
24 | }
25 | }, 0)
26 | })
27 | }
28 |
29 | /**
30 | * Directory walker that only throws if parent directory
31 | * can't be read. Errors stat-ing children are only logged.
32 | */
33 | function walkSync (dir, filterFn) {
34 | let results = []
35 | const list = fs.readdirSync(dir)
36 |
37 | list.forEach((file) => {
38 | let stats
39 | file = path.join(dir, file)
40 |
41 | try {
42 | stats = fs.statSync(file)
43 | } catch (err) {
44 | log.warn(err.message)
45 | return
46 | }
47 |
48 | if (stats && stats.isDirectory()) {
49 | try {
50 | results = results.concat(walkSync(file, filterFn))
51 | } catch (err) {
52 | log.warn(err.message)
53 | }
54 | } else {
55 | if (!filterFn || filterFn(file)) {
56 | results.push({ file, stats })
57 | }
58 | }
59 | })
60 |
61 | return results
62 | }
63 |
64 | export default getFiles
65 |
--------------------------------------------------------------------------------
/server/Prefs/socket.js:
--------------------------------------------------------------------------------
1 | import getLogger from '../lib/Log.js'
2 | import Library from '../Library/Library.js'
3 | import Prefs from './Prefs.js'
4 | import { LIBRARY_PUSH, PREFS_PATH_SET_PRIORITY, PREFS_PUSH, PREFS_SET, _ERROR } from '../../shared/actionTypes.ts'
5 | const log = getLogger(`server[${process.pid}]`)
6 |
7 | const ACTION_HANDLERS = {
8 | [PREFS_SET]: async (sock, { payload }, acknowledge) => {
9 | if (!sock.user.isAdmin) {
10 | acknowledge({
11 | type: PREFS_SET + _ERROR,
12 | error: 'Unauthorized',
13 | })
14 | }
15 |
16 | await Prefs.set(payload.key, payload.data)
17 | log.info('%s (%s) set pref %s = %s', sock.user.name, sock.id, payload.key, payload.data)
18 |
19 | await pushPrefs(sock)
20 | },
21 | [PREFS_PATH_SET_PRIORITY]: async (sock, { payload }, acknowledge) => {
22 | if (!sock.user.isAdmin) {
23 | acknowledge({
24 | type: PREFS_PATH_SET_PRIORITY + _ERROR,
25 | error: 'Unauthorized',
26 | })
27 | }
28 |
29 | await Prefs.setPathPriority(payload)
30 | log.info('%s re-prioritized media folders; pushing library to all', sock.user.name)
31 |
32 | await pushPrefs(sock)
33 |
34 | // invalidate cache
35 | Library.cache.version = null
36 |
37 | sock.server.emit('action', {
38 | type: LIBRARY_PUSH,
39 | payload: await Library.get(),
40 | })
41 | },
42 | }
43 |
44 | // helper to push prefs to admins
45 | const pushPrefs = async (sock) => {
46 | const admins = []
47 |
48 | for (const s of sock.server.sockets.sockets.values()) {
49 | if (s.user && s.user.isAdmin) {
50 | admins.push(s.id)
51 | sock.server.to(s.id)
52 | }
53 | }
54 |
55 | if (admins.length) {
56 | sock.server.emit('action', {
57 | type: PREFS_PUSH,
58 | payload: await Prefs.get(),
59 | })
60 | }
61 | }
62 |
63 | export default ACTION_HANDLERS
64 |
--------------------------------------------------------------------------------
/src/routes/Player/views/PlayerView.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import screenfull from 'screenfull'
3 | import combinedReducer from 'store/reducers'
4 | import { useAppSelector, useAppDispatch } from 'store/hooks'
5 | import playerReducer, { sliceInjectNoOp } from '../modules/player'
6 | import playerVisualizerReducer from '../modules/playerVisualizer'
7 | import PlayerController from '../components/PlayerController/PlayerController'
8 | import { fetchCurrentRoom } from 'store/modules/rooms'
9 | import styles from './PlayerView.css'
10 |
11 | const PlayerView = () => {
12 | const { innerWidth, innerHeight, headerHeight, footerHeight } = useAppSelector(state => state.ui)
13 | const viewportHeight = innerHeight - headerHeight - footerHeight
14 | const dispatch = useAppDispatch()
15 |
16 | // @todo: find better place for this?
17 | if (!useAppSelector(state => state.player)) {
18 | combinedReducer.inject({ reducerPath: 'player', reducer: playerReducer })
19 | combinedReducer.inject({ reducerPath: 'playerVisualizer', reducer: playerVisualizerReducer })
20 | dispatch(sliceInjectNoOp()) // update store with new slices
21 | }
22 |
23 | // once per mount
24 | useEffect(() => {
25 | dispatch(fetchCurrentRoom())
26 | }, [dispatch])
27 |
28 | return (
29 | {state.isCanceling ? 'Stopping...' : props.text}
43 | 49 |
30 |
45 | )
46 | }
47 |
48 | export default PlayerView
49 |
--------------------------------------------------------------------------------
/src/routes/Library/components/SongItem/SongItem.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | align-items: center;
4 |
5 | &.queued {
6 | text-shadow: var(--queued-item-text-shadow);
7 |
8 | .title {
9 | color: var(--queued-item-color);
10 | }
11 | }
12 |
13 | &.starred {
14 | .star {
15 | color: var(--song-item-btn-active-bg-color);
16 | filter: var(--song-item-btn-active-filter);
17 | }
18 |
19 | .starCount {
20 | color: var(--song-item-btn-active-color);
21 | }
22 | }
23 | }
24 |
25 | .animateGlow {
26 | animation: var(--animation-text-shadow-glow);
27 | }
28 |
29 | .duration {
30 | color: var(--song-duration-color);
31 | font-size: 12px;
32 | text-align: right;
33 | width: 40px;
34 | }
35 |
36 | .primary {
37 | cursor: pointer;
38 | flex: 1;
39 | overflow: hidden;
40 | white-space: nowrap;
41 | margin-left: 14px;
42 | }
43 |
44 | .title {
45 | color: var(--song-title-color);
46 | font-size: 18px;
47 | text-overflow: ellipsis;
48 | overflow: hidden;
49 | }
50 |
51 | .artist {
52 | color: #aaa;
53 | font-size: 15px;
54 | text-overflow: ellipsis;
55 | overflow: hidden;
56 | white-space: nowrap;
57 | }
58 |
59 | /* Buttons */
60 | .btn {
61 | cursor: pointer;
62 | width: var(--song-item-btn-width);
63 | height: var(--song-item-btn-height);
64 | margin-right: var(--btn-margin);
65 | transition: opacity .3s;
66 | }
67 |
68 | .star {
69 | color: var(--song-item-btn-bg-color);
70 | height: var(--song-item-btn-height);
71 | }
72 |
73 | .starCount {
74 | position: relative;
75 | font-size: 13px;
76 | top: -28px;
77 | text-align: center;
78 | text-shadow: none;
79 | color: var(--text-color);
80 | }
81 |
82 | .animateStar {
83 | animation: var(--animation-bounce);
84 | }
85 |
86 | .info {
87 | color: var(--song-item-btn-active-bg-color);
88 | filter: var(--song-item-btn-active-filter);
89 | }
90 |
--------------------------------------------------------------------------------
/src/routes/Queue/components/QueueListAnimator/QueueListAnimator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Flipper, Flipped } from 'react-flip-toolkit'
3 | import { useAppSelector } from 'store/hooks'
4 | import styles from './QueueListAnimator.css'
5 |
6 | const handleEnter = (el: HTMLDivElement) => {
7 | el.addEventListener('animationend', e => (e.currentTarget as HTMLDivElement).classList.remove(styles.itemEnter))
8 | el.classList.add(styles.itemEnter)
9 | el.style.removeProperty('opacity')
10 | }
11 |
12 | const handleExit = (el: HTMLDivElement, _i: number, removeEl: () => void) => {
13 | el.addEventListener('animationend', removeEl)
14 | el.classList.add(styles.itemExit)
15 | }
16 |
17 | const handleShouldFlip = (prev: number, cur: number) => cur === prev
18 |
19 | interface QueueListAnimatorProps {
20 | queueItems: React.ReactElement[]
21 | }
22 |
23 | const QueueListAnimator = ({
24 | queueItems,
25 | }: QueueListAnimatorProps) => {
26 | const headerHeight = useAppSelector(state => state.ui.headerHeight)
27 |
28 | // Flipped applies data-* props to its child; using a div wrapper
29 | // here so QueueItems need not be concerned with rendering them
30 | // https://github.com/aholachek/react-flip-toolkit#wrapping-a-react-component
31 | const items = React.Children.map(queueItems, (child) => {
32 | return (
33 |
39 |
44 |
42 | {child}
43 |
44 |
45 |
55 | {children}
56 |
57 |
58 | )
59 | }
60 |
61 | export default Accordion
62 |
--------------------------------------------------------------------------------
/server/Scanner/ScannerQueue.js:
--------------------------------------------------------------------------------
1 | import FileScanner from './FileScanner/FileScanner.js'
2 | import Prefs from '../Prefs/Prefs.js'
3 | import getLogger from '../lib/Log.js'
4 |
5 | const log = getLogger('queue')
6 |
7 | class ScannerQueue {
8 | #instance
9 | #isCanceling = false
10 | #q = []
11 |
12 | constructor (onIteration, onDone) {
13 | this.onIteration = onIteration
14 | this.onDone = onDone
15 | }
16 |
17 | async queue (pathIds) {
18 | const prefs = await Prefs.get()
19 |
20 | if (pathIds === true) {
21 | pathIds = prefs.paths.result // queueing all paths
22 | } else if (Number.isInteger(pathIds)) {
23 | pathIds = [pathIds]
24 | }
25 |
26 | if (!Array.isArray(pathIds)) {
27 | log.warn('invalid pathIds: %s', pathIds)
28 | return
29 | }
30 |
31 | pathIds.forEach((id) => {
32 | const dir = prefs.paths.entities[id]?.path
33 |
34 | if (!dir) {
35 | log.warn('ignoring (invalid pathId): %s', id)
36 | } else if (this.#q.includes(id)) {
37 | log.info('ignoring (path already queued): %s', dir)
38 | } else {
39 | log.info('path queued for scan: %s', dir)
40 | this.#q.push(id)
41 | }
42 | })
43 |
44 | if (this.#q.length && !this.#instance) {
45 | this.start()
46 | }
47 | }
48 |
49 | async start () {
50 | log.info('Starting media scan')
51 |
52 | while (this.#q.length && !this.#isCanceling) {
53 | const prefs = await Prefs.get()
54 | this.#instance = new FileScanner(prefs, { length: this.#q.length })
55 |
56 | const stats = await this.#instance.scan(this.#q.shift())
57 | this.onIteration(stats)
58 | }
59 |
60 | this.onDone()
61 | }
62 |
63 | stop () {
64 | log.info('Stopping media scan (user requested)')
65 | this.#isCanceling = true
66 |
67 | if (this.#instance) {
68 | this.#instance.cancel()
69 | }
70 | }
71 | }
72 |
73 | export default ScannerQueue
74 |
--------------------------------------------------------------------------------
/src/components/App/CoreLayout/CoreLayout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useRef } from 'react'
2 | import { useAppDispatch, useAppSelector } from 'store/hooks'
3 | import useResizeObserver from 'use-resize-observer'
4 | // global stylesheets should be imported before any
5 | // components that will import their own modular css
6 | import '../../../styles/global.css'
7 | import Button from 'components/Button/Button'
8 | import Header from 'components/Header/Header'
9 | import Navigation from 'components/Navigation/Navigation'
10 | import Modal from 'components/Modal/Modal'
11 | import SongInfo from 'components/SongInfo/SongInfo'
12 | import Routes from '../Routes/Routes'
13 | import { clearErrorMessage, setFooterHeight, setHeaderHeight } from 'store/modules/ui'
14 |
15 | const CoreLayout = () => {
16 | const dispatch = useAppDispatch()
17 | const headerRef = useRef
46 | {a11yHeadingComponent}
47 |
49 | 50 | {ui.errorMessage} 51 |
52 |
29 |
48 | )}
49 |
30 |
32 |
33 | {path.path}
34 |
35 |
41 |
47 |
34 |
54 |
35 | {path?.path}
36 |
37 | pathId:
38 | {path?.pathId}
39 |
61 |
72 |
62 |
71 |
68 | {queueItem.userDisplayName}
69 |
70 | Library Empty
53 | {isAdmin && ( 54 |55 | Add media folders 56 | {' '} 57 | to get started. 58 |
59 | )} 60 |
36 | {!props.user && (
37 |
40 | )}
41 |
42 | {props.user && (
43 |
46 | )}
47 |
48 | {props.user && (
49 |
52 | )}
53 |
54 |
57 |
58 |
40 |
46 |
54 | {filterStr && (
55 |
61 | )}
62 |
69 |
70 | )
71 | }
72 | }
73 |
74 | export default LibraryHeader
75 |
--------------------------------------------------------------------------------
/server/watcherWorker.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import pathLib from 'path'
3 | import { initLogger } from './lib/Log.js'
4 | import accumulatedThrottle from './lib/accumulatedThrottle.js'
5 | import fileTypes from './Media/fileTypes.js'
6 | import {
7 | WATCHER_WORKER_EVENT,
8 | WATCHER_WORKER_WATCH,
9 | } from '../shared/actionTypes.ts'
10 |
11 | const env = JSON.parse(process.env.KES_ENV_JSON)
12 | const log = initLogger('scanner', {
13 | console: {
14 | level: env.KES_SCANNER_CONSOLE_LEVEL ?? (env.NODE_ENV === 'development' ? 5 : 4),
15 | useStyles: env.KES_CONSOLE_COLORS ?? undefined,
16 | },
17 | file: {
18 | level: env.KES_SCANNER_LOG_LEVEL ?? (env.NODE_ENV === 'development' ? 0 : 3),
19 | },
20 | }).scope(`watcher[${process.pid}]`)
21 |
22 | const refs = []
23 | const searchExts = Object.keys(fileTypes).filter(ext => fileTypes[ext].scan !== false)
24 |
25 | ;(async function () {
26 | const { default: IPC } = await import('./lib/IPCBridge.js')
27 |
28 | IPC.use({
29 | [WATCHER_WORKER_WATCH]: ({ payload }) => {
30 | while (refs.length) {
31 | const ref = refs.shift()
32 | ref.close()
33 | }
34 |
35 | const { result, entities } = payload.paths
36 | const pathIds = result.filter(pathId => entities[pathId]?.prefs?.isWatchingEnabled)
37 |
38 | if (!pathIds.length) {
39 | log.info('no paths with watching enabled; exiting')
40 | process.exit(0) // eslint-disable-line n/no-process-exit
41 | }
42 |
43 | log.info('watching %s path(s):', pathIds.length)
44 |
45 | pathIds.forEach((pathId) => {
46 | log.info(' => %s', entities[pathId].path)
47 |
48 | const cb = accumulatedThrottle((events) => {
49 | const event = events.find(([, filename]) => searchExts.includes(pathLib.extname(filename).toLowerCase()))
50 | if (!event) return
51 |
52 | log.info('event in path: %s (filename=%s) (type=%s)', entities[pathId].path, event[1], event[0])
53 |
54 | IPC.send({
55 | type: WATCHER_WORKER_EVENT,
56 | payload: { pathId },
57 | })
58 | }, 1000)
59 |
60 | const ref = fs.watch(entities[pathId].path, { recursive: true }, cb)
61 | refs.push(ref)
62 | })
63 | },
64 | })
65 | })()
66 |
--------------------------------------------------------------------------------
/src/routes/Queue/views/QueueView.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from 'react'
2 | import { useAppSelector } from 'store/hooks'
3 | import { ensureState } from 'redux-optimistic-ui'
4 | import { Link } from 'react-router-dom'
5 | import getRoundRobinQueue from '../selectors/getRoundRobinQueue'
6 | import QueueList from '../components/QueueList/QueueList'
7 | import Spinner from 'components/Spinner/Spinner'
8 | import TextOverlay from 'components/TextOverlay/TextOverlay'
9 | import styles from './QueueView.css'
10 |
11 | const QUEUE_ITEM_HEIGHT = 92
12 |
13 | const QueueView = () => {
14 | const { innerWidth, innerHeight, headerHeight, footerHeight } = useAppSelector(state => state.ui)
15 | const isInRoom = useAppSelector(state => !!state.user.roomId)
16 | const isLoading = useAppSelector(state => ensureState(state.queue).isLoading)
17 | const queue = useAppSelector(getRoundRobinQueue)
18 | const queueId = useAppSelector(state => state.status.queueId)
19 | const containerRef = useRef
40 | {!isInRoom && (
41 |
42 |
49 | )}
50 |
51 | {isLoading &&
55 |
64 | )}
65 |
66 |
68 | )
69 | }
70 |
71 | export default QueueView
72 |
--------------------------------------------------------------------------------
/src/store/store.ts:
--------------------------------------------------------------------------------
1 | import { Action, configureStore, ThunkAction, UnknownAction } from '@reduxjs/toolkit'
2 | import rootReducer from './reducers'
3 | import socket from 'lib/socket'
4 | import createSocketMiddleware from './socketMiddleware'
5 | import createThrottle from 'redux-throttle'
6 | import {
7 | FLUSH,
8 | REHYDRATE,
9 | PAUSE,
10 | PERSIST,
11 | PURGE,
12 | REGISTER,
13 | } from 'redux-persist'
14 | import { windowResize } from './modules/ui'
15 |
16 | // resize action
17 | window.addEventListener('resize', () => store.dispatch(windowResize({
18 | innerWidth: window.innerWidth,
19 | innerHeight: window.innerHeight,
20 | })))
21 |
22 | export interface OptimisticAction extends Action {
23 | meta: {
24 | isOptimistic?: boolean
25 | }
26 | }
27 |
28 | // ======================================================
29 | // Middleware Configuration
30 | // ======================================================
31 | const throttle = createThrottle(1000, {
32 | // https://lodash.com/docs#throttle
33 | leading: true,
34 | trailing: true,
35 | })
36 |
37 | const socketMiddleware = createSocketMiddleware(socket, 'server/')
38 |
39 | // ======================================================
40 | // Store Instantiation and HMR Setup
41 | // ======================================================
42 | const store = configureStore({
43 | reducer: rootReducer,
44 | middleware: getDefaultMiddleware => getDefaultMiddleware({
45 | // https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist
46 | serializableCheck: {
47 | ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
48 | },
49 | }).concat(throttle, socketMiddleware),
50 | })
51 |
52 | // @todo: this doesn't handle dynamically injected (lazy-loaded) reducers
53 | if (module.hot) {
54 | module.hot.accept('./reducers', async () => {
55 | const { default: combinedReducer } = await import('./reducers')
56 | store.replaceReducer(combinedReducer)
57 | })
58 | }
59 |
60 | // Infer the `RootState` and `AppDispatch` types from the store itself
61 | export type RootState = ReturnTypeGet a Room!
43 |44 | Sign in to a room 45 | {' '} 46 | to start queueing songs. 47 |
48 |Queue Empty
56 |57 | Tap a song in the 58 | {' '} 59 | library 60 | {' '} 61 | to queue it. 62 |
63 |Users
47 |
48 | )}
49 | >
50 |
51 |
68 |
52 |
59 |
60 |
67 |
31 |
57 | )
58 | }
59 |
60 | handleArtistClick = () => {
61 | this.props.onArtistClick(this.props.artistId)
62 | }
63 | }
64 |
65 | export default ArtistItem
66 |
--------------------------------------------------------------------------------
/src/components/PaddedList/PaddedList.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from 'react'
2 | import { VariableSizeList as List, ListOnScrollProps } from 'react-window'
3 | import styles from './PaddedList.css'
4 |
5 | interface PaddedListProps {
6 | numRows: number
7 | onScroll?(props: ListOnScrollProps): void
8 | onRef?(ref: List): void
9 | paddingTop: number
10 | paddingRight?: number
11 | paddingBottom: number
12 | rowRenderer(props: { index: number, style: CSSProperties }): React.ReactNode
13 | rowHeight(index: number): number
14 | width: number
15 | height: number
16 | }
17 |
18 | class PaddedList extends React.Component
32 |
42 |
46 |
47 |
48 | {props.isExpanded && (
49 |
33 |
41 |
36 |
38 | )}
39 | {!props.isExpanded && {props.artistSongIds.length}
}
40 |
43 |
45 | -
39 | {this.rowRenderer}
40 |