1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { ChatPanel } from './chat-app.js';
import { FilesPanel } from './files-app.js';
import { VideoApp } from './video-app.js';
import { MusicApp } from './music-app.js';
import { PhotosApp } from './photos-app.js';
import { ChatSettings } from './chat-app-settings.js';
import { VideoSettings } from './video-app-settings.js';
import { MusicSettings } from './music-app-settings.js';
import { PhotoSettings } from './photos-app-settings.js';
import { HelloWorldApp } from './helloworld-app.js';
import { HelloWorldSettings } from './helloworld-app-settings.js';
/**
* Whether apps marked `dev` are shown. Opt in once with `?dev=1`, off with
* `?dev=0` — persisted, the same shape as transport.js's `?trace=1`.
*
* HelloWorld exists to prove that adding an application is a registry entry
* and two files. Registering it normally would put a toy app in every
* operator's group; leaving it unregistered would prove nothing, since the
* claim is precisely that registration is enough. So it is registered, and
* hidden behind a flag that changes nothing else.
*/
const DEV_KEY = 'mb_dev_apps';
(function _initDevFlag() {
try {
const params = new URLSearchParams(location.search);
if (params.has('dev')) {
if (params.get('dev') === '0') localStorage.removeItem(DEV_KEY);
else localStorage.setItem(DEV_KEY, '1');
}
} catch { /* localStorage unavailable — dev apps stay hidden */ }
})();
function devAppsShown() {
try { return localStorage.getItem(DEV_KEY) === '1'; } catch { return false; }
}
/**
* Every group "application", in tab order.
*
* Adding one means a new file exporting a component, an optional second file
* exporting its settings pane, and one entry here. Nothing in `group-page.js`
* or `group-settings.js` changes: every registered component receives the same
* shared context (see `commonProps`) and renders itself into the active tab,
* and every registered `Settings` gets its own collapsible section with a
* toggle, rendered by a loop that names no app.
*
* `key` doubles as the identifier the node's `apps_enabled` setting and its
* `app_directories` op use, so it must match `ALLOWED_APPS` in the node's
* webrtc_server.py. It is also the key an app's directories are stored under
* (`<key>_directories`) — one identifier per app, everywhere.
*
* Fields:
* key the identifier, shared with the node
* icon, labelKey the tab
* Component the app itself
* Settings its operator settings pane, if it has any (optional)
* alwaysEnabled cannot be turned off, and is not offered as a toggle
*/
const APPS = [
{ key: 'chat', icon: 'chat', labelKey: 'group.tab_chat',
Component: ChatPanel, Settings: ChatSettings },
// Files has no settings of its own: it works over every shared directory by
// definition, which is what the shared-directories table already configures.
{ key: 'files', icon: 'folder', labelKey: 'group.tab_files',
Component: FilesPanel, alwaysEnabled: true },
{ key: 'video', icon: 'video', labelKey: 'group.tab_video',
Component: VideoApp, Settings: VideoSettings },
{ key: 'music', icon: 'music', labelKey: 'group.tab_music',
Component: MusicApp, Settings: MusicSettings },
{ key: 'photo', icon: 'image', labelKey: 'group.tab_photos',
Component: PhotosApp, Settings: PhotoSettings },
// The reference implementation (docs/refactor-groups.md §4.1). `dev` keeps
// it out of an operator's way; everything else about it is an ordinary
// entry, which is the point.
{ key: 'helloworld', icon: 'chat', labelKey: 'group.tab_helloworld',
Component: HelloWorldApp, Settings: HelloWorldSettings, dev: true },
];
/** Everything a reader of this page is allowed to see, in registry order. */
function availableApps() {
const dev = devAppsShown();
return APPS.filter(a => dev || !a.dev);
}
/** The registry filtered to what this group has enabled, in registry order. */
function visibleApps(enabledKeys) {
const registered = availableApps();
const enabled = new Set(
enabledKeys && enabledKeys.length ? enabledKeys : registered.map(a => a.key));
return registered.filter(a => a.alwaysEnabled || enabled.has(a.key));
}
/** The apps the Settings page offers a section for, in registry order. */
function configurableApps() {
return availableApps().filter(a => !a.alwaysEnabled && a.Settings);
}
export { APPS, availableApps, visibleApps, configurableApps };
|