-
{Object
.entries( sources )
.filter( ( [ , { translationSources } ] ) => Object.keys( translationSources ).length )
@@ -135,4 +107,15 @@ const Sources = ( { sources: currentSources, device }: SourcesProps ) => {
)
}
-export default Sources
+export const Route = createFileRoute( '/settings/client/sources/' )( {
+ component: Sources,
+ pendingComponent: Loader,
+ loader: () => {
+ const languages = fetch( `${API_URL}/languages` ).then( ( res ) => res.json() )
+ const sources = fetch( `${API_URL}/sources` ).then( ( res ) => res.json() )
+
+ return Promise
+ .all( [ languages, sources ] )
+ .then( ( [ languages, sources ] ) => ( { languages, sources } ) )
+ },
+} )
diff --git a/apps/frontend/src/app/settings/index.tsx b/apps/frontend/src/app/settings/index.tsx
new file mode 100644
index 00000000..4a8be7bd
--- /dev/null
+++ b/apps/frontend/src/app/settings/index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { z } from 'zod'
+
+export const Route = createFileRoute( '/settings/' )( {
+ validateSearch: z.object( {
+ server: z.string().optional(),
+ client: z.string().optional(),
+ } ),
+ beforeLoad: () => redirect( { to: '/settings/client/display' } ), //
+} )
diff --git a/apps/frontend/src/features/settings/index.css b/apps/frontend/src/app/settings/route.css
similarity index 100%
rename from apps/frontend/src/features/settings/index.css
rename to apps/frontend/src/app/settings/route.css
diff --git a/apps/frontend/src/features/settings/index.tsx b/apps/frontend/src/app/settings/route.tsx
similarity index 57%
rename from apps/frontend/src/features/settings/index.tsx
rename to apps/frontend/src/app/settings/route.tsx
index 3b320669..25c6b959 100644
--- a/apps/frontend/src/features/settings/index.tsx
+++ b/apps/frontend/src/app/settings/route.tsx
@@ -2,7 +2,7 @@
jsx-a11y/click-events-have-key-events,
jsx-a11y/no-noninteractive-element-interactions
*/
-import './index.css'
+import './route.css'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import { faBars } from '@fortawesome/free-solid-svg-icons'
@@ -22,30 +22,14 @@ import {
Toolbar,
Typography,
} from '@mui/material'
+import { createFileRoute, Link, Outlet, ToOptions, useLocation } from '@tanstack/react-router'
import classNames from 'classnames'
-import { useContext, useEffect, useState } from 'react'
-import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { Fragment, useContext, useEffect, useState } from 'react'
import { withErrorFallback } from '~/components/ErrorFallback'
import ThemeLoader from '~/components/ThemeLoader'
-import {
- BACKEND_URL,
- SETTINGS_ABOUT_URL,
- SETTINGS_DEVICE_URL,
- SETTINGS_SERVER_URL,
- SETTINGS_TOOLS_URL,
- SETTINGS_URL,
-} from '~/helpers/consts'
import { SettingsContext } from '~/helpers/contexts'
-import SHORTCUTS from '~/helpers/keyMap'
-import { FLAT_OPTION_GROUPS, OPTION_GROUPS, OPTIONS } from '~/helpers/options'
-
-import About from './About'
-import ClosedCaptionSettings from './ClosedCaptionSettings'
-import DynamicOptions from './DynamicOptions'
-import Hotkeys from './Hotkeys'
-import OverlaySettings from './OverlaySettings'
-import Sources from './Sources'
+import { FLAT_OPTION_GROUPS, OPTION_GROUPS } from '~/helpers/options'
type ItemProps = {
name: string,
@@ -55,7 +39,7 @@ type ItemProps = {
onClick?: () => any,
}
-const Item = ( { name, icon, selected = false, url = SETTINGS_URL, onClick }: ItemProps ) => (
+const Item = ( { name, icon, selected = false, url = '/settings', onClick }: ItemProps ) => (
@@ -67,7 +51,7 @@ const Item = ( { name, icon, selected = false, url = SETTINGS_URL, onClick }: It
)
const Settings = () => {
- const { pathname } = useLocation()
+ const pathname = useLocation( { select: ( l ) => l.pathname } )
const group = pathname.split( '/' ).pop()
const { name } = FLAT_OPTION_GROUPS[ group ] || { name: group }
@@ -84,24 +68,15 @@ const Settings = () => {
if ( !devices.includes( device ) ) setDevice( 'local' )
}, [ device, devices ] )
- // Fetch list of themes from server
- useEffect( () => {
- fetch( `${BACKEND_URL}/presenter/themes` )
- .then( ( res ) => res.json() )
- .then( ( themes ) => {
- OPTIONS.themeName.values = themes.map( ( theme ) => ( { name: theme, value: theme } ) )
- } )
- }, [] )
-
const openMobileMenu = () => setMobileOpen( true )
const closeMobileMenu = () => setMobileOpen( false )
const menu = [
- [ null, OPTION_GROUPS.none, selectedDeviceSettings, SETTINGS_DEVICE_URL ],
- [ 'Activities', OPTION_GROUPS.activities, selectedDeviceSettings, SETTINGS_DEVICE_URL ],
- [ 'Server', OPTION_GROUPS.server, settings.global, SETTINGS_SERVER_URL ],
- [ 'Tools', OPTION_GROUPS.tools, settings.global, SETTINGS_TOOLS_URL ],
- ]
+ [ null, OPTION_GROUPS.none, selectedDeviceSettings, '/settings/client' ],
+ [ 'Activities', OPTION_GROUPS.activities, selectedDeviceSettings, '/settings/client' ],
+ [ 'Server', OPTION_GROUPS.server, settings.global, '/settings/server' ],
+ [ 'Tools', OPTION_GROUPS.tools, settings.global, '/settings/tools' ],
+ ] satisfies [string | null, typeof OPTION_GROUPS[keyof typeof OPTION_GROUPS], typeof selectedDeviceSettings, ToOptions['to']][]
const menuItems = (
@@ -109,7 +84,6 @@ const Settings = () => {
className="select-menu device-selector category-title"
onChange={( { target: { value } } ) => setDevice( value )}
value={device}
- disableUnderline
>
{Object.keys( settings )
@@ -122,7 +96,7 @@ const Settings = () => {
{menu.map( ( [ sectionName, settingsGroup, , url ] ) => (
- <>
+
{sectionName && {sectionName}}
{settingsGroup && Object.keys( settingsGroup )
@@ -135,15 +109,13 @@ const Settings = () => {
onClick={closeMobileMenu}
/>
) ) }
-
+
) ) }
)
const { theme: { simpleGraphics } } = settings.local
- const { theme: { themeName = '' } = {}, hotkeys } = selectedDeviceSettings
-
- const defaultUrl = `${SETTINGS_DEVICE_URL}/${Object.keys( selectedDeviceSettings )[ 0 ]}`
+ const { theme: { themeName = '' } = {} } = selectedDeviceSettings
return (
@@ -177,34 +149,12 @@ const Settings = () => {
-
- } />
-
- {/* Device setting routes */}
- ( )}
- />
- } />
- } />
-
- {/* Server setting routes */}
- }
- />
- } />
-
- {/* Tool Routes */}
-
-
- } />
-
- } />
-
+
@@ -29,4 +30,6 @@ const ClosedCaptionSettings = () => (
)
-export default ClosedCaptionSettings
+export const Route = createFileRoute( '/settings/tools/closedCaptions/' )( {
+ component: ClosedCaptions,
+} )
diff --git a/apps/frontend/src/features/settings/OverlaySettings.css b/apps/frontend/src/app/settings/tools/overlay/index.css
similarity index 100%
rename from apps/frontend/src/features/settings/OverlaySettings.css
rename to apps/frontend/src/app/settings/tools/overlay/index.css
diff --git a/apps/frontend/src/features/settings/OverlaySettings.tsx b/apps/frontend/src/app/settings/tools/overlay/index.tsx
similarity index 66%
rename from apps/frontend/src/features/settings/OverlaySettings.tsx
rename to apps/frontend/src/app/settings/tools/overlay/index.tsx
index d7bfce40..18060c04 100644
--- a/apps/frontend/src/features/settings/OverlaySettings.tsx
+++ b/apps/frontend/src/app/settings/tools/overlay/index.tsx
@@ -1,25 +1,17 @@
-import './OverlaySettings.css'
-
-import { faShareSquare } from '@fortawesome/free-solid-svg-icons'
+import { faShareSquare } from '@fortawesome/free-regular-svg-icons'
import { Grid, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
-import { BACKEND_URL, isElectron, OVERLAY_PORT } from '~/helpers/consts'
+import { API_URL, isElectron, PORT } from '~/helpers/consts'
import controller from '~/services/controller'
-import CopyButton from './CopyButton'
-import DynamicOptions, { IconSlot, OptionGrid, slotSizes } from './DynamicOptions'
-import { Button } from './SettingComponents'
-import TutorialButton from './TutorialButton'
+import CopyButton from '../../-components/CopyButton'
+import DynamicOptions, { IconSlot, OptionGrid, slotSizes } from '../../-components/DynamicOptions'
+import { Button } from '../../-components/SettingsComponents'
+import TutorialButton from '../../-components/TutorialButton'
const OverlaySettings = () => {
- const [ addresses, setAddresses ] = useState( [] )
-
- useEffect( () => {
- void fetch( `${BACKEND_URL}/about` )
- .then( ( res ) => res.json() )
- .then( ( { addresses } ) => setAddresses( addresses ) )
- }, [] )
+ const { about: { addresses } } = Route.useLoaderData()
return (
@@ -46,7 +38,7 @@ const OverlaySettings = () => {
-
+
@@ -55,7 +47,7 @@ const OverlaySettings = () => {
Overlay URL
{Object.entries( addresses ).map( ( [ name, address ] ) => (
- {`${address}:${OVERLAY_PORT}/overlay (${name})`}
+ {`${address}:${PORT}/overlay (${name})`}
) )}
@@ -65,4 +57,16 @@ const OverlaySettings = () => {
)
}
-export default OverlaySettings
+type AboutType = {
+ addresses: string[],
+}
+
+export const Route = createFileRoute( '/settings/tools/overlay/' )( {
+ component: OverlaySettings,
+ loader: async () => {
+ const about = await fetch( `${API_URL}/about` )
+ .then( ( res ) => res.json() as Promise
)
+
+ return { about }
+ },
+} )
diff --git a/apps/frontend/src/components/Empty.tsx b/apps/frontend/src/components/Empty.tsx
new file mode 100644
index 00000000..a3862184
--- /dev/null
+++ b/apps/frontend/src/components/Empty.tsx
@@ -0,0 +1,3 @@
+const Empty = () => null
+
+export default Empty
diff --git a/apps/frontend/src/components/NavigationHotkeys.tsx b/apps/frontend/src/components/NavigationHotkeys.tsx
index 401e14ea..bbc71ded 100644
--- a/apps/frontend/src/components/NavigationHotkeys.tsx
+++ b/apps/frontend/src/components/NavigationHotkeys.tsx
@@ -36,14 +36,6 @@ type State = {
focusedIndex: number,
}
-/**
- * HOC to automatically add navigational key bindings to child elements.
- * @param {boolean} arrowKeys Navigate with arrow keys to the next and previous DOM elements.
- * @param {boolean} lineKeys Enable line jumping via hotkeys.
- * @param {boolean} clickOnFocus Simulate a click on the item that is newly focused.
- * @param {Object} keymap Keymap to combine with existing keymap.
- * @returns {Component} The decorated component.
- */
export const withNavigationHotkeys = ( {
arrowKeys = true,
lineKeys,
@@ -86,16 +78,10 @@ export const withNavigationHotkeys = ( {
this.setFocus()
}
- /**
- * Sets the length of the nodes to the correct size.
- */
setNodeSize = () => this.nodes.forEach( ( value, key ) => ( (
value || this.nodes.delete( key ) )
) )
- /**
- * Sets the focus in the DOM to the `focusedIndex`'th element of the children.
- */
setFocus = () => {
const { focusedIndex } = this.state
@@ -105,9 +91,6 @@ export const withNavigationHotkeys = ( {
if ( node ) scrollIntoCenter( node )
}
- /**
- * Simulates a click on the focused component.
- */
simulateClick = debounceHotKey( () => {
const { focusedIndex } = this.state
@@ -119,21 +102,11 @@ export const withNavigationHotkeys = ( {
}
} )
- /**
- * Jump to an item given it's name/identifier.
- * @param name The name of the element.
- * @param click Trigger the click.
- */
jumpToName = ( name: string, click = true ) => this.jumpTo(
[ ...this.nodes.keys() ].findIndex( ( key ) => key === name ),
click,
)
- /**
- * Jumps to an element.
- * @param focusedIndex The element index to jump to.
- * @param click Trigger the click.
- */
jumpTo = ( focusedIndex: number, click = true ) => {
this.setState( { focusedIndex } )
@@ -143,18 +116,12 @@ export const withNavigationHotkeys = ( {
}
}
- /**
- * Jumps to the first element, excluding inputs.
- */
jumpToFirst = () => {
const index = [ ...this.nodes.values() ].findIndex( ( element ) => !isInput( element ) )
this.jumpTo( index )
}
- /**
- * Focuses the previous item in the list of elements.
- */
prevItem = () => {
const { focusedIndex: prevIndex } = this.state
@@ -166,9 +133,6 @@ export const withNavigationHotkeys = ( {
this.jumpTo( focusedIndex )
}
- /**
- * Focuses the next item in the list of elements.
- */
nextItem = () => {
const { focusedIndex: prevIndex } = this.state
@@ -180,16 +144,8 @@ export const withNavigationHotkeys = ( {
this.jumpTo( focusedIndex )
}
- /**
- * Registers the ref under the current list of nodes.
- * @param name The name to identify the ref.
- * @param ref The ref to store.
- */
registerRef = ( name, ref ) => this.nodes.set( name, ref )
- /**
- * Generates handlers for each of the nodes, using the keys from LINE HOTKEYS to jump to them.
- */
lineHandlers = LINE_HOTKEYS.reduce( ( handlers, key, i ) => ( {
...handlers,
[ key ]: () => this.jumpTo( i ),
diff --git a/apps/frontend/src/components/NavigatorHotkeys.tsx b/apps/frontend/src/components/NavigatorHotkeys.tsx
index 1d791f97..b9669494 100644
--- a/apps/frontend/src/components/NavigatorHotkeys.tsx
+++ b/apps/frontend/src/components/NavigatorHotkeys.tsx
@@ -16,9 +16,6 @@ type NavigatorHotKeysProps = {
mouseTargetRef?: { current: EventTarget | null },
}
-/**
- * Hotkeys for controlling the navigator.
- */
const NavigatorHotKeys = (
{ active = false, children = null, mouseTargetRef = { current: null } }: NavigatorHotKeysProps
) => {
@@ -114,10 +111,6 @@ const NavigatorHotKeys = (
controller.line( id )
}
- /**
- * Prevents the default action from occurring for each handler.
- * @param events An object containing the event names and corresponding handlers.
- */
const preventDefault = ( events ) => Object.entries( events )
.reduce( ( events, [ name, handler ] ) => ( {
...events,
diff --git a/apps/frontend/src/components/ThemeLoader.tsx b/apps/frontend/src/components/ThemeLoader.tsx
index 310a5dfa..135d2a97 100644
--- a/apps/frontend/src/components/ThemeLoader.tsx
+++ b/apps/frontend/src/components/ThemeLoader.tsx
@@ -1,9 +1,11 @@
import defaultTheme from '@presenter/themes/presenter/Day.css?url'
import { useContext } from 'react'
-import { PRESENTER_THEMES_URL } from '~/helpers/consts'
+import { API_URL } from '~/helpers/consts'
import { StatusContext } from '~/helpers/contexts'
+const PRESENTER_THEMES_URL = `${API_URL}/themes/presenter`
+
type ThemeLoaderProps = { name: string }
const ThemeLoader = ( { name = 'Day' }: ThemeLoaderProps ) => {
diff --git a/apps/frontend/src/features/controller/index.tsx b/apps/frontend/src/features/controller/index.tsx
deleted file mode 100644
index 97016468..00000000
--- a/apps/frontend/src/features/controller/index.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import './index.css'
-
-import { faStar } from '@fortawesome/free-regular-svg-icons'
-import {
- faCog,
- faHistory,
- faMap,
- faSearch,
- faSignOutAlt,
- faVideoSlash,
- faWindowMaximize,
- faWindowMinimize,
-} from '@fortawesome/free-solid-svg-icons'
-import Toolbar from '@mui/material/Toolbar'
-import Typography from '@mui/material/Typography'
-import classNames from 'classnames'
-import queryString from 'qs'
-import { useContext, useEffect, useState } from 'react'
-import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
-
-import {
- BOOKMARKS_URL,
- CONTROLLER_URL,
- HISTORY_URL,
- NAVIGATOR_URL,
- PRESENTER_URL,
- SEARCH_URL,
- SETTINGS_URL,
- STATES,
-} from '~/helpers/consts'
-import { ContentContext, SettingsContext } from '~/helpers/contexts'
-import { getUrlState } from '~/helpers/utils'
-import { useCurrentLines, useEffectOnce, usePrevious } from '~/hooks'
-import controller from '~/services/controller'
-
-import Bookmarks from './Bookmarks'
-import History from './History'
-import Navigator, { Bar as NavigatorBar } from './Navigator'
-import Search from './Search'
-import ToolbarButton from './ToolbarButton'
-
-type OnHover = ( message: string | null ) => Record
-
-type TopBarProps = {
- title?: string,
- onHover?: OnHover,
-}
-
-/**
- * Renders the top navigation bar, showing the current path in the URL, and the hover state.
- * @param title The title text in the top bar.
- * @param onHover Fired on hover with name.
- */
-const TopBar = ( { title = '', onHover = () => ( {} ) }: TopBarProps ) => {
- const resetHover = () => onHover( null )
-
- const location = useLocation()
- const { search, pathname } = location
- const navigate = useNavigate()
-
- const state = getUrlState( search )
-
- return (
-
- controller.openWindow( SETTINGS_URL )}
- onMouseEnter={() => onHover( 'Settings' )}
- onMouseLeave={resetHover}
- />
- {title}
- navigate( PRESENTER_URL )}
- onMouseEnter={() => onHover( 'Hide Controller' )}
- onMouseLeave={resetHover}
- />
- {state[ STATES.controllerOnly ] ? (
- navigate( {
- ...location,
- search: queryString.stringify( { ...state, [ STATES.controllerOnly ]: undefined } ),
- } )}
- onMouseEnter={() => onHover( 'Minimize Controller' )}
- onMouseLeave={resetHover}
- />
- ) : (
- navigate( {
- ...location,
- search: queryString.stringify( { ...state, [ STATES.controllerOnly ]: true } ),
- } )}
- onMouseLeave={resetHover}
- />
- )}
- {
- const popOutQuery = queryString.stringify( { ...state, [ STATES.controllerOnly ]: true } )
-
- controller.openWindow( `${pathname}?${popOutQuery}`, { alwaysOnTop: true } )
- navigate( PRESENTER_URL )
- }}
- onMouseEnter={() => onHover( 'Pop Out Controller' )}
- onMouseLeave={resetHover}
- />
-
- )
-}
-
-type BottomBarProps = {
- onHover?: OnHover,
- renderContent?: () => any,
-}
-
-/**
- * Renders the bottom navigation bar.
- * @param history A `history` object.
- * @param renderContent A render prop for content in the bottom bar.
- * @param location A `location` object.
- * @param onHover Fired on hover with name.
- */
-const BottomBar = ( { renderContent = () => null, onHover = () => ( {} ) }: BottomBarProps ) => {
- const navigate = useNavigate()
- const location = useLocation()
-
- const lines = useCurrentLines()
-
- const go = ( pathname: string ) => () => navigate( { ...location, pathname } )
- const resetHover = () => onHover( null )
-
- return (
-
-
- onHover( 'History' )}
- onMouseLeave={resetHover}
- />
- onHover( 'Bookmarks' )}
- onMouseLeave={resetHover}
- />
- {renderContent()}
- {!!lines.length && (
- onHover( 'Navigator' )}
- onMouseLeave={resetHover}
- />
- )}
- onHover( 'Clear' )}
- onMouseLeave={resetHover}
- />
-
- )
-}
-
-/**
- * Controller controls the display and configures settings.
- */
-const Controller = ( props ) => {
- const { shabad, bani } = useContext( ContentContext )
- const lines = useCurrentLines()
-
- const previousLines = usePrevious( lines )
-
- const [ hovered, setHovered ] = useState( null )
-
- const location = useLocation()
- const { search } = location
-
- const navigate = useNavigate()
-
- const [ lastUrl, setLastUrl ] = useState( `${NAVIGATOR_URL}${search}` )
-
- // Save navigation to any subroutes by listening to history
- useEffectOnce( () => history.listen( ( { pathname, search } ) => {
- if ( pathname.match( `${CONTROLLER_URL}/.*` ) ) setLastUrl( `${pathname}${search}` )
- } ) )
-
- useEffect( () => {
- const { pathname } = location
- const redirects = [ SEARCH_URL, HISTORY_URL, BOOKMARKS_URL ]
-
- // Redirect to navigator tab if on one of the redirectable pages
- const isTransition = lines.length && lines !== previousLines
-
- if ( isTransition && redirects.some( ( route ) => pathname.includes( route ) ) ) {
- navigate( { ...location, pathname: NAVIGATOR_URL } )
- }
- }, [ history, lines, previousLines, location ] )
-
- const settings = useContext( SettingsContext )
- const { local: { theme: { simpleGraphics: simple } } } = settings
-
- const routes = [
- [ SEARCH_URL, Search ],
- [ NAVIGATOR_URL, Navigator, NavigatorBar ],
- [ HISTORY_URL, History ],
- [ BOOKMARKS_URL, Bookmarks ],
- ]
-
- return (
-
- {routes.map( ( [ route, Component, BarComponent ] ) => (
-
-
-
-
-
-
-
- BarComponent && (
-
- )}
- />
-