@dxos/plugin-presenter 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/lib/browser/{CollectionPresenterContainer-IPDW4HZR.mjs → CollectionPresenterContainer-U7D57ZVN.mjs} +5 -5
  2. package/dist/lib/browser/CollectionPresenterContainer-U7D57ZVN.mjs.map +7 -0
  3. package/dist/lib/browser/{DocumentPresenterContainer-LJBJM5UB.mjs → DocumentPresenterContainer-F42V4KAL.mjs} +48 -50
  4. package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs.map +7 -0
  5. package/dist/lib/browser/{app-graph-builder-LURIPUEV.mjs → app-graph-builder-5LNLRZBN.mjs} +30 -2
  6. package/dist/lib/browser/app-graph-builder-5LNLRZBN.mjs.map +7 -0
  7. package/dist/lib/browser/{chunk-QWJM3ADC.mjs → chunk-NINDSVTB.mjs} +11 -7
  8. package/dist/lib/browser/chunk-NINDSVTB.mjs.map +7 -0
  9. package/dist/lib/browser/{chunk-TANLITL2.mjs → chunk-UVGTHJUO.mjs} +2 -2
  10. package/dist/lib/browser/{chunk-TANLITL2.mjs.map → chunk-UVGTHJUO.mjs.map} +2 -2
  11. package/dist/lib/browser/index.mjs +6 -5
  12. package/dist/lib/browser/index.mjs.map +3 -3
  13. package/dist/lib/browser/meta.json +1 -1
  14. package/dist/lib/browser/{react-surface-3SPF2ANF.mjs → react-surface-GZIAFGCD.mjs} +6 -6
  15. package/dist/lib/browser/react-surface-GZIAFGCD.mjs.map +7 -0
  16. package/dist/lib/browser/{settings-VBRYUIWN.mjs → settings-VQVVDAGY.mjs} +1 -1
  17. package/dist/lib/browser/{settings-VBRYUIWN.mjs.map → settings-VQVVDAGY.mjs.map} +1 -1
  18. package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -1
  19. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  20. package/dist/types/src/capabilities/index.d.ts +3 -3
  21. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  22. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  23. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  24. package/dist/types/src/capabilities/settings.d.ts +1 -1
  25. package/dist/types/src/components/CollectionPresenterContainer.d.ts.map +1 -1
  26. package/dist/types/src/components/DocumentPresenterContainer.d.ts.map +1 -1
  27. package/dist/types/src/components/Markdown/Container.stories.d.ts +14 -21
  28. package/dist/types/src/components/Markdown/Container.stories.d.ts.map +1 -1
  29. package/dist/types/src/components/Markdown/Slide.stories.d.ts +10 -11
  30. package/dist/types/src/components/Markdown/Slide.stories.d.ts.map +1 -1
  31. package/dist/types/src/components/Presenter/Pager.d.ts +1 -1
  32. package/dist/types/src/components/Presenter/Pager.d.ts.map +1 -1
  33. package/dist/types/src/components/Presenter/Pager.stories.d.ts +12 -3
  34. package/dist/types/src/components/Presenter/Pager.stories.d.ts.map +1 -1
  35. package/dist/types/src/components/PresenterSettings.d.ts.map +1 -1
  36. package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts.map +1 -1
  37. package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts +17 -1
  38. package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts.map +1 -1
  39. package/dist/types/src/components/index.d.ts +18 -3
  40. package/dist/types/src/components/index.d.ts.map +1 -1
  41. package/dist/types/src/translations.d.ts +1 -0
  42. package/dist/types/src/translations.d.ts.map +1 -1
  43. package/dist/types/src/types.d.ts +3 -3
  44. package/dist/types/tsconfig.tsbuildinfo +1 -1
  45. package/package.json +28 -28
  46. package/src/PresenterPlugin.tsx +1 -1
  47. package/src/capabilities/app-graph-builder.ts +35 -1
  48. package/src/capabilities/react-surface.tsx +18 -8
  49. package/src/capabilities/settings.ts +1 -1
  50. package/src/components/CollectionPresenterContainer.tsx +2 -1
  51. package/src/components/DocumentPresenterContainer.tsx +2 -1
  52. package/src/components/Markdown/Container.stories.tsx +20 -17
  53. package/src/components/Markdown/Slide.stories.tsx +9 -6
  54. package/src/components/Presenter/Pager.stories.tsx +7 -5
  55. package/src/components/Presenter/Pager.tsx +3 -3
  56. package/src/components/PresenterSettings.tsx +13 -9
  57. package/src/components/RevealPlayer/RevealPlayer.stories.tsx +4 -3
  58. package/src/components/RevealPlayer/RevealPlayer.tsx +50 -53
  59. package/src/translations.ts +1 -0
  60. package/src/useExitPresenter.ts +1 -1
  61. package/dist/lib/browser/CollectionPresenterContainer-IPDW4HZR.mjs.map +0 -7
  62. package/dist/lib/browser/DocumentPresenterContainer-LJBJM5UB.mjs.map +0 -7
  63. package/dist/lib/browser/app-graph-builder-LURIPUEV.mjs.map +0 -7
  64. package/dist/lib/browser/chunk-QWJM3ADC.mjs.map +0 -7
  65. package/dist/lib/browser/react-surface-3SPF2ANF.mjs.map +0 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/plugin-presenter",
3
- "version": "0.8.4-main.5acf9ea",
3
+ "version": "0.8.4-main.5ea62a8",
4
4
  "description": "Braneframe presenter plugin",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,9 +10,9 @@
10
10
  "type": "module",
11
11
  "exports": {
12
12
  ".": {
13
+ "source": "./src/index.ts",
13
14
  "types": "./dist/types/src/index.d.ts",
14
- "browser": "./dist/lib/browser/index.mjs",
15
- "source": "./src/index.ts"
15
+ "browser": "./dist/lib/browser/index.mjs"
16
16
  }
17
17
  },
18
18
  "types": "dist/types/src/index.d.ts",
@@ -36,37 +36,37 @@
36
36
  "remark-frontmatter": "^5.0.0",
37
37
  "remark-parse-frontmatter": "^1.0.3",
38
38
  "reveal.js": "^5.1.0",
39
- "@dxos/app-framework": "0.8.4-main.5acf9ea",
40
- "@dxos/async": "0.8.4-main.5acf9ea",
41
- "@dxos/echo": "0.8.4-main.5acf9ea",
42
- "@dxos/live-object": "0.8.4-main.5acf9ea",
43
- "@dxos/local-storage": "0.8.4-main.5acf9ea",
44
- "@dxos/echo-schema": "0.8.4-main.5acf9ea",
45
- "@dxos/log": "0.8.4-main.5acf9ea",
46
- "@dxos/plugin-deck": "0.8.4-main.5acf9ea",
47
- "@dxos/plugin-client": "0.8.4-main.5acf9ea",
48
- "@dxos/plugin-graph": "0.8.4-main.5acf9ea",
49
- "@dxos/plugin-markdown": "0.8.4-main.5acf9ea",
50
- "@dxos/plugin-stack": "0.8.4-main.5acf9ea",
51
- "@dxos/react-client": "0.8.4-main.5acf9ea",
52
- "@dxos/react-ui-stack": "0.8.4-main.5acf9ea",
53
- "@dxos/schema": "0.8.4-main.5acf9ea",
54
- "@dxos/react-ui-form": "0.8.4-main.5acf9ea"
39
+ "@dxos/app-framework": "0.8.4-main.5ea62a8",
40
+ "@dxos/async": "0.8.4-main.5ea62a8",
41
+ "@dxos/echo": "0.8.4-main.5ea62a8",
42
+ "@dxos/live-object": "0.8.4-main.5ea62a8",
43
+ "@dxos/echo-schema": "0.8.4-main.5ea62a8",
44
+ "@dxos/local-storage": "0.8.4-main.5ea62a8",
45
+ "@dxos/plugin-client": "0.8.4-main.5ea62a8",
46
+ "@dxos/log": "0.8.4-main.5ea62a8",
47
+ "@dxos/plugin-deck": "0.8.4-main.5ea62a8",
48
+ "@dxos/plugin-markdown": "0.8.4-main.5ea62a8",
49
+ "@dxos/plugin-graph": "0.8.4-main.5ea62a8",
50
+ "@dxos/plugin-stack": "0.8.4-main.5ea62a8",
51
+ "@dxos/react-client": "0.8.4-main.5ea62a8",
52
+ "@dxos/react-ui-form": "0.8.4-main.5ea62a8",
53
+ "@dxos/react-ui-stack": "0.8.4-main.5ea62a8",
54
+ "@dxos/schema": "0.8.4-main.5ea62a8"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@effect-rx/rx-react": "0.38.0",
58
- "@effect/platform": "0.89.0",
58
+ "@effect/platform": "0.90.2",
59
59
  "@types/react": "~18.2.0",
60
60
  "@types/react-dom": "~18.2.0",
61
61
  "@types/reveal.js": "^5.0.3",
62
- "effect": "3.17.0",
62
+ "effect": "3.17.7",
63
63
  "react": "~18.2.0",
64
64
  "react-dom": "~18.2.0",
65
- "vite": "5.4.7",
66
- "@dxos/random": "0.8.4-main.5acf9ea",
67
- "@dxos/react-ui": "0.8.4-main.5acf9ea",
68
- "@dxos/react-ui-theme": "0.8.4-main.5acf9ea",
69
- "@dxos/storybook-utils": "0.8.4-main.5acf9ea"
65
+ "vite": "7.1.1",
66
+ "@dxos/react-ui": "0.8.4-main.5ea62a8",
67
+ "@dxos/random": "0.8.4-main.5ea62a8",
68
+ "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
69
+ "@dxos/storybook-utils": "0.8.4-main.5ea62a8"
70
70
  },
71
71
  "peerDependencies": {
72
72
  "@effect-rx/rx-react": "^0.34.1",
@@ -74,8 +74,8 @@
74
74
  "effect": "^3.13.3",
75
75
  "react": "~18.2.0",
76
76
  "react-dom": "~18.2.0",
77
- "@dxos/react-ui": "0.8.4-main.5acf9ea",
78
- "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
77
+ "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
78
+ "@dxos/react-ui": "0.8.4-main.5ea62a8"
79
79
  },
80
80
  "publishConfig": {
81
81
  "access": "public"
@@ -2,7 +2,7 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { definePlugin, defineModule, Events, contributes, Capabilities } from '@dxos/app-framework';
5
+ import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
6
6
 
7
7
  import { AppGraphBuilder, PresenterSettings, ReactSurface } from './capabilities';
8
8
  import { meta } from './meta';
@@ -5,7 +5,7 @@
5
5
  import { Rx } from '@effect-rx/rx-react';
6
6
  import { Option, pipe } from 'effect';
7
7
 
8
- import { contributes, type PluginContext, Capabilities, createIntent, LayoutAction } from '@dxos/app-framework';
8
+ import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
9
9
  import { Obj } from '@dxos/echo';
10
10
  import { DeckCapabilities } from '@dxos/plugin-deck';
11
11
  import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
@@ -22,6 +22,39 @@ export default (context: PluginContext) =>
22
22
  Capabilities.AppGraphBuilder,
23
23
  createExtension({
24
24
  id: PRESENTER_PLUGIN,
25
+ // TODO(wittjosiah): This is a hack to work around presenter previously relying on "variant". Remove.
26
+ connector: (node) =>
27
+ Rx.make((get) =>
28
+ pipe(
29
+ get(node),
30
+ Option.flatMap((node) => {
31
+ const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
32
+ const settings = get(
33
+ rxFromSignal(() => settingsStore?.getStore<PresenterSettingsProps>(PRESENTER_PLUGIN)?.value),
34
+ );
35
+ const isPresentable = settings?.presentCollections
36
+ ? Obj.instanceOf(DataType.Collection, node.data) || Obj.instanceOf(Markdown.Document, node.data)
37
+ : Obj.instanceOf(Markdown.Document, node.data);
38
+ return isPresentable ? Option.some(node.data) : Option.none();
39
+ }),
40
+ Option.map((object) => {
41
+ const id = fullyQualifiedId(object);
42
+ return [
43
+ {
44
+ id: [id, 'presenter'].join(ATTENDABLE_PATH_SEPARATOR),
45
+ data: { type: PRESENTER_PLUGIN, object },
46
+ type: PRESENTER_PLUGIN,
47
+ properties: {
48
+ label: 'Presenter',
49
+ icon: 'ph--presentation--regular',
50
+ disposition: 'hidden',
51
+ },
52
+ },
53
+ ];
54
+ }),
55
+ Option.getOrElse(() => []),
56
+ ),
57
+ ),
25
58
  actions: (node) =>
26
59
  Rx.make((get) =>
27
60
  pipe(
@@ -67,6 +100,7 @@ export default (context: PluginContext) =>
67
100
  properties: {
68
101
  label: ['toggle presentation label', { ns: PRESENTER_PLUGIN }],
69
102
  icon: 'ph--presentation--regular',
103
+ disposition: 'list-item',
70
104
  keyBinding: {
71
105
  macos: 'shift+meta+p',
72
106
  windows: 'shift+alt+p',
@@ -11,10 +11,10 @@ import { Markdown } from '@dxos/plugin-markdown/types';
11
11
  import { DataType } from '@dxos/schema';
12
12
 
13
13
  import {
14
+ CollectionPresenterContainer,
15
+ DocumentPresenterContainer,
14
16
  MarkdownSlide,
15
17
  PresenterSettings,
16
- DocumentPresenterContainer,
17
- CollectionPresenterContainer,
18
18
  } from '../components';
19
19
  import { PRESENTER_PLUGIN } from '../meta';
20
20
  import { type PresenterSettingsProps } from '../types';
@@ -25,17 +25,27 @@ export default () =>
25
25
  id: `${PRESENTER_PLUGIN}/document`,
26
26
  role: 'article',
27
27
  position: 'hoist',
28
- filter: (data): data is { subject: Markdown.Document; variant: 'presenter' } =>
29
- Obj.instanceOf(Markdown.Document, data.subject) && data.variant === 'presenter',
30
- component: ({ data }) => <DocumentPresenterContainer document={data.subject} />,
28
+ filter: (data): data is { subject: { type: typeof PRESENTER_PLUGIN; object: Markdown.Document } } =>
29
+ !!data.subject &&
30
+ typeof data.subject === 'object' &&
31
+ 'type' in data.subject &&
32
+ 'object' in data.subject &&
33
+ data.subject.type === PRESENTER_PLUGIN &&
34
+ Obj.instanceOf(Markdown.Document, data.subject.object),
35
+ component: ({ data }) => <DocumentPresenterContainer document={data.subject.object} />,
31
36
  }),
32
37
  createSurface({
33
38
  id: `${PRESENTER_PLUGIN}/collection`,
34
39
  role: 'article',
35
40
  position: 'hoist',
36
- filter: (data): data is { subject: DataType.Collection; variant: 'presenter' } =>
37
- Obj.instanceOf(DataType.Collection, data.subject) && data.variant === 'presenter',
38
- component: ({ data }) => <CollectionPresenterContainer collection={data.subject} />,
41
+ filter: (data): data is { subject: { type: typeof PRESENTER_PLUGIN; object: DataType.Collection } } =>
42
+ !!data.subject &&
43
+ typeof data.subject === 'object' &&
44
+ 'type' in data.subject &&
45
+ 'object' in data.subject &&
46
+ data.subject.type === PRESENTER_PLUGIN &&
47
+ Obj.instanceOf(DataType.Collection, data.subject.object),
48
+ component: ({ data }) => <CollectionPresenterContainer collection={data.subject.object} />,
39
49
  }),
40
50
  createSurface({
41
51
  id: `${PRESENTER_PLUGIN}/slide`,
@@ -6,7 +6,7 @@ import { Capabilities, contributes } from '@dxos/app-framework';
6
6
  import { live } from '@dxos/live-object';
7
7
 
8
8
  import { meta } from '../meta';
9
- import { PresenterSettingsSchema, type PresenterSettingsProps } from '../types';
9
+ import { type PresenterSettingsProps, PresenterSettingsSchema } from '../types';
10
10
 
11
11
  export default () => {
12
12
  const settings = live<PresenterSettingsProps>({});
@@ -8,10 +8,11 @@ import { Surface } from '@dxos/app-framework';
8
8
  import { StackItem } from '@dxos/react-ui-stack';
9
9
  import { type DataType } from '@dxos/schema';
10
10
 
11
- import { Layout, PageNumber, Pager } from './Presenter';
12
11
  import { PresenterContext } from '../types';
13
12
  import { useExitPresenter } from '../useExitPresenter';
14
13
 
14
+ import { Layout, PageNumber, Pager } from './Presenter';
15
+
15
16
  const CollectionPresenterContainer: FC<{ collection: DataType.Collection }> = ({ collection }) => {
16
17
  const [slide, setSlide] = useState(0);
17
18
 
@@ -6,9 +6,10 @@ import React, { type FC } from 'react';
6
6
  import { type Markdown } from '@dxos/plugin-markdown/types';
7
7
  import { StackItem } from '@dxos/react-ui-stack';
8
8
 
9
- import { RevealPlayer } from './RevealPlayer';
10
9
  import { useExitPresenter } from '../useExitPresenter';
11
10
 
11
+ import { RevealPlayer } from './RevealPlayer';
12
+
12
13
  const DocumentPresenterContainer: FC<{ document: Markdown.Document }> = ({ document }) => {
13
14
  const handleExit = useExitPresenter(document);
14
15
 
@@ -4,14 +4,15 @@
4
4
 
5
5
  import '@dxos-theme';
6
6
 
7
- import { type Meta } from '@storybook/react-vite';
7
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
8
8
  import React from 'react';
9
9
 
10
10
  import { withLayout, withTheme } from '@dxos/storybook-utils';
11
11
 
12
+ import { createSlide } from '../../testing';
13
+
12
14
  import { Container } from './Container';
13
15
  import { Slide, type SlideProps } from './Slide';
14
- import { createSlide } from '../../testing';
15
16
 
16
17
  const DefaultStory = ({ content = '' }: SlideProps) => {
17
18
  return (
@@ -21,37 +22,39 @@ const DefaultStory = ({ content = '' }: SlideProps) => {
21
22
  );
22
23
  };
23
24
 
24
- export const Default = {
25
+ const meta = {
26
+ title: 'plugins/plugin-presenter/Container',
27
+ render: DefaultStory,
28
+ decorators: [withTheme, withLayout({ fullscreen: true })],
29
+ parameters: {
30
+ layout: 'fullscreen',
31
+ },
32
+ } satisfies Meta<typeof DefaultStory>;
33
+
34
+ export default meta;
35
+
36
+ type Story = StoryObj<typeof meta>;
37
+
38
+ export const Default: Story = {
25
39
  args: {
26
40
  content: createSlide({ number: 1 }),
27
41
  },
28
42
  };
29
43
 
30
- export const Code = {
44
+ export const Code: Story = {
31
45
  args: {
32
46
  content: createSlide({ code: true }),
33
47
  },
34
48
  };
35
49
 
36
- export const List = {
50
+ export const List: Story = {
37
51
  args: {
38
52
  content: createSlide({ list: 3 }),
39
53
  },
40
54
  };
41
55
 
42
- export const Ordered = {
56
+ export const Ordered: Story = {
43
57
  args: {
44
58
  content: createSlide({ ordered: 4 }),
45
59
  },
46
60
  };
47
-
48
- const meta: Meta<typeof Slide> = {
49
- title: 'plugins/plugin-presenter/Container',
50
- render: DefaultStory,
51
- decorators: [withTheme, withLayout({ fullscreen: true })],
52
- parameters: {
53
- layout: 'fullscreen',
54
- },
55
- };
56
-
57
- export default meta;
@@ -4,28 +4,31 @@
4
4
 
5
5
  import '@dxos-theme';
6
6
 
7
- import { type Meta } from '@storybook/react-vite';
7
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
8
8
 
9
- import { Slide } from './Slide';
10
9
  import { createSlide } from '../../testing';
11
10
 
12
- const meta: Meta = {
11
+ import { Slide } from './Slide';
12
+
13
+ const meta = {
13
14
  title: 'plugins/plugin-presenter/Slide',
14
15
  component: Slide,
15
16
  parameters: {
16
17
  layout: 'fullscreen',
17
18
  },
18
- };
19
+ } satisfies Meta<typeof Slide>;
19
20
 
20
21
  export default meta;
21
22
 
22
- export const Default = {
23
+ type Story = StoryObj<typeof meta>;
24
+
25
+ export const Default: Story = {
23
26
  args: {
24
27
  content: createSlide(),
25
28
  },
26
29
  };
27
30
 
28
- export const Code = {
31
+ export const Code: Story = {
29
32
  args: {
30
33
  content: createSlide({ code: true }),
31
34
  },
@@ -4,7 +4,7 @@
4
4
 
5
5
  import '@dxos-theme';
6
6
 
7
- import { type Meta } from '@storybook/react-vite';
7
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
8
8
  import React, { useState } from 'react';
9
9
 
10
10
  import { withTheme } from '@dxos/storybook-utils';
@@ -24,15 +24,17 @@ const DefaultStory = ({ count = 20 }: PagerProps) => {
24
24
  );
25
25
  };
26
26
 
27
- export const Default = {};
28
-
29
- const meta: Meta<PagerProps> = {
27
+ const meta = {
30
28
  title: 'plugins/plugin-presenter/Pager',
31
29
  render: DefaultStory,
32
30
  decorators: [withTheme],
33
31
  parameters: {
34
32
  layout: 'centered',
35
33
  },
36
- };
34
+ } satisfies Meta<typeof DefaultStory>;
37
35
 
38
36
  export default meta;
37
+
38
+ type Story = StoryObj<typeof meta>;
39
+
40
+ export const Default: Story = {};
@@ -4,7 +4,7 @@
4
4
 
5
5
  import React, { useEffect } from 'react';
6
6
 
7
- import { Button, useControlledState, Icon } from '@dxos/react-ui';
7
+ import { Button, Icon, useControlledState } from '@dxos/react-ui';
8
8
 
9
9
  export type PagerProps = {
10
10
  index?: number;
@@ -14,8 +14,8 @@ export type PagerProps = {
14
14
  onExit?: () => void;
15
15
  };
16
16
 
17
- export const Pager = ({ index: controlledIndex = 0, count = 0, keys, onChange, onExit }: PagerProps) => {
18
- const [index, setIndex] = useControlledState(controlledIndex);
17
+ export const Pager = ({ index: indexParam = 0, count = 0, keys, onChange, onExit }: PagerProps) => {
18
+ const [index, setIndex] = useControlledState(indexParam);
19
19
  useEffect(() => {
20
20
  onChange?.(index);
21
21
  }, [index]);
@@ -5,7 +5,7 @@
5
5
  import React from 'react';
6
6
 
7
7
  import { Input, useTranslation } from '@dxos/react-ui';
8
- import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
8
+ import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
9
9
 
10
10
  import { PRESENTER_PLUGIN } from '../meta';
11
11
  import { type PresenterSettingsProps } from '../types';
@@ -14,13 +14,17 @@ export const PresenterSettings = ({ settings }: { settings: PresenterSettingsPro
14
14
  const { t } = useTranslation(PRESENTER_PLUGIN);
15
15
 
16
16
  return (
17
- <DeprecatedFormContainer>
18
- <DeprecatedFormInput label={t('present collections label')}>
19
- <Input.Switch
20
- checked={settings.presentCollections}
21
- onCheckedChange={(checked) => (settings.presentCollections = !!checked)}
22
- />
23
- </DeprecatedFormInput>
24
- </DeprecatedFormContainer>
17
+ <ControlPage>
18
+ <ControlSection title={t('settings title', { ns: PRESENTER_PLUGIN })}>
19
+ <ControlGroup>
20
+ <ControlItemInput title={t('present collections label')}>
21
+ <Input.Switch
22
+ checked={settings.presentCollections}
23
+ onCheckedChange={(checked) => (settings.presentCollections = !!checked)}
24
+ />
25
+ </ControlItemInput>
26
+ </ControlGroup>
27
+ </ControlSection>
28
+ </ControlPage>
25
29
  );
26
30
  };
@@ -6,10 +6,11 @@ import '@dxos-theme';
6
6
 
7
7
  import { type Meta } from '@storybook/react-vite';
8
8
 
9
- import { RevealPlayer } from './RevealPlayer';
10
9
  import CONTENT from '../../../testing/deck.md?raw';
11
10
  import { translations } from '../../translations';
12
11
 
12
+ import { RevealPlayer } from './RevealPlayer';
13
+
13
14
  // https://revealjs.com/markdown
14
15
  // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
15
16
  // https://colorhunt.co/palettes/dark
@@ -18,14 +19,14 @@ import { translations } from '../../translations';
18
19
  // https://fontsource.org/fonts
19
20
  // https://fonts.google.com
20
21
 
21
- const meta: Meta<typeof RevealPlayer> = {
22
+ const meta = {
22
23
  title: 'plugins/plugin-presenter/RevealPlayer',
23
24
  component: RevealPlayer,
24
25
  parameters: {
25
26
  layout: 'fullscreen',
26
27
  translations,
27
28
  },
28
- };
29
+ } satisfies Meta<typeof RevealPlayer>;
29
30
 
30
31
  export default meta;
31
32
 
@@ -2,9 +2,8 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- // eslint-disable-next-line no-restricted-imports
6
5
  import 'reveal.js/dist/reveal.css';
7
- // eslint-disable-next-line no-restricted-imports
6
+
8
7
  import 'reveal.js/dist/theme/black.css';
9
8
 
10
9
  // https://github.com/highlightjs/highlight.js/tree/main/src/styles
@@ -13,12 +12,12 @@ import 'highlight.js/styles/tokyo-night-dark.css';
13
12
 
14
13
  import hljs from 'highlight.js';
15
14
  import typescript from 'highlight.js/lib/languages/typescript';
16
- import React, { useEffect, useRef } from 'react';
15
+ import React, { useRef } from 'react';
17
16
  import Reveal from 'reveal.js';
18
17
  import RevealHighlight from 'reveal.js/plugin/highlight/highlight';
19
18
  import RevealMarkdown from 'reveal.js/plugin/markdown/plugin.js';
20
19
 
21
- import { type ThemedClassName } from '@dxos/react-ui';
20
+ import { type ThemedClassName, useAsyncEffect } from '@dxos/react-ui';
22
21
  import { mx } from '@dxos/react-ui-theme';
23
22
 
24
23
  const styles = `
@@ -72,7 +71,8 @@ export type RevealProps = ThemedClassName<{
72
71
  export const RevealPlayer = ({ classNames, content, slide, fullscreen = true, onExit }: RevealProps) => {
73
72
  const deckDivRef = useRef<HTMLDivElement>(null);
74
73
  const deckRef = useRef<Reveal.Api | null>(null);
75
- useEffect(() => {
74
+
75
+ useAsyncEffect(async () => {
76
76
  if (deckRef.current) {
77
77
  return;
78
78
  }
@@ -80,66 +80,63 @@ export const RevealPlayer = ({ classNames, content, slide, fullscreen = true, on
80
80
  // Required for syntax highlighting.
81
81
  hljs.registerLanguage('typescript', typescript);
82
82
 
83
- const t = setTimeout(async () => {
84
- // https://revealjs.com/react
85
- // https://revealjs.com/config
86
- // https://github.com/hakimel/reveal.js
87
- // TODO(burdon): Fragments and scroll view steps 2 at a time (safe mode?)
88
- deckRef.current = new Reveal(deckDivRef.current!, {
89
- // view: 'scroll',
90
- progress: false,
91
- transition: 'none',
92
- slideNumber: false,
93
- embedded: true,
94
-
95
- // TODO(burdon): Speaker view requires server to serve popout window.
96
- // https://revealjs.com/speaker-view
97
- showNotes: false,
98
-
99
- // width: 1600,
100
- // height: 900,
101
- margin: 0.1,
102
- // center: false,
103
- // minScale: 0.1,
104
- // maxScale: 1.4,
105
-
106
- // https://revealjs.com/markdown
107
- // TODO(burdon): Requires server to serve popout window.
108
- plugins: [RevealMarkdown, RevealHighlight],
109
-
110
- // See https://marked.js.org/using_advanced#options
111
- markdown: {
112
- gfm: true,
113
- smartypants: true,
114
- highlight: (code, language) => {
115
- if (language) {
116
- return hljs.highlight(code, { language }).value;
117
- }
118
-
119
- return hljs.highlightAuto(code).value;
120
- },
83
+ // https://revealjs.com/react
84
+ // https://revealjs.com/config
85
+ // https://github.com/hakimel/reveal.js
86
+ // TODO(burdon): Fragments and scroll view steps 2 at a time (safe mode?)
87
+ deckRef.current = new Reveal(deckDivRef.current!, {
88
+ // view: 'scroll',
89
+ progress: false,
90
+ transition: 'none',
91
+ slideNumber: false,
92
+ embedded: true,
93
+
94
+ // TODO(burdon): Speaker view requires server to serve popout window.
95
+ // https://revealjs.com/speaker-view
96
+ showNotes: false,
97
+
98
+ // width: 1600,
99
+ // height: 900,
100
+ margin: 0.1,
101
+ // center: false,
102
+ // minScale: 0.1,
103
+ // maxScale: 1.4,
104
+
105
+ // https://revealjs.com/markdown
106
+ // TODO(burdon): Requires server to serve popout window.
107
+ plugins: [RevealMarkdown, RevealHighlight],
108
+
109
+ // See https://marked.js.org/using_advanced#options
110
+ markdown: {
111
+ gfm: true,
112
+ smartypants: true,
113
+ highlight: (code, language) => {
114
+ if (language) {
115
+ return hljs.highlight(code, { language }).value;
116
+ }
117
+
118
+ return hljs.highlightAuto(code).value;
121
119
  },
122
- });
120
+ },
121
+ });
123
122
 
124
- await deckRef.current.initialize();
123
+ await deckRef.current.initialize();
125
124
 
126
- if (slide !== undefined) {
127
- deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
128
- }
125
+ if (slide !== undefined) {
126
+ deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
127
+ }
129
128
 
130
- deckRef.current.addKeyBinding({ keyCode: 27, key: 'Escape', description: 'Exit full screen' }, () => {
131
- onExit?.();
132
- });
129
+ deckRef.current.addKeyBinding({ keyCode: 27, key: 'Escape', description: 'Exit full screen' }, () => {
130
+ onExit?.();
133
131
  });
134
132
 
135
133
  return () => {
136
134
  try {
137
- clearTimeout(t);
138
135
  if (deckRef.current) {
139
136
  deckRef.current.destroy();
140
137
  deckRef.current = null;
141
138
  }
142
- } catch (err) {
139
+ } catch {
143
140
  // Ignore.
144
141
  }
145
142
  };
@@ -11,6 +11,7 @@ export const translations = [
11
11
  'en-US': {
12
12
  [meta.id]: {
13
13
  'plugin name': 'Presenter',
14
+ 'settings title': 'Presenter settings',
14
15
  'toggle presentation label': 'Present',
15
16
  'present collections label': 'Present collections (experimental)',
16
17
  },
@@ -4,7 +4,7 @@
4
4
 
5
5
  import { useCallback } from 'react';
6
6
 
7
- import { createIntent, LayoutAction, useCapability, useIntentDispatcher } from '@dxos/app-framework';
7
+ import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
8
8
  import { type Live } from '@dxos/live-object';
9
9
  import { DeckCapabilities } from '@dxos/plugin-deck';
10
10
  import { DeckAction } from '@dxos/plugin-deck/types';