@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.
- package/dist/lib/browser/{CollectionPresenterContainer-IPDW4HZR.mjs → CollectionPresenterContainer-U7D57ZVN.mjs} +5 -5
- package/dist/lib/browser/CollectionPresenterContainer-U7D57ZVN.mjs.map +7 -0
- package/dist/lib/browser/{DocumentPresenterContainer-LJBJM5UB.mjs → DocumentPresenterContainer-F42V4KAL.mjs} +48 -50
- package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs.map +7 -0
- package/dist/lib/browser/{app-graph-builder-LURIPUEV.mjs → app-graph-builder-5LNLRZBN.mjs} +30 -2
- package/dist/lib/browser/app-graph-builder-5LNLRZBN.mjs.map +7 -0
- package/dist/lib/browser/{chunk-QWJM3ADC.mjs → chunk-NINDSVTB.mjs} +11 -7
- package/dist/lib/browser/chunk-NINDSVTB.mjs.map +7 -0
- package/dist/lib/browser/{chunk-TANLITL2.mjs → chunk-UVGTHJUO.mjs} +2 -2
- package/dist/lib/browser/{chunk-TANLITL2.mjs.map → chunk-UVGTHJUO.mjs.map} +2 -2
- package/dist/lib/browser/index.mjs +6 -5
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-3SPF2ANF.mjs → react-surface-GZIAFGCD.mjs} +6 -6
- package/dist/lib/browser/react-surface-GZIAFGCD.mjs.map +7 -0
- package/dist/lib/browser/{settings-VBRYUIWN.mjs → settings-VQVVDAGY.mjs} +1 -1
- package/dist/lib/browser/{settings-VBRYUIWN.mjs.map → settings-VQVVDAGY.mjs.map} +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +3 -3
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/capabilities/settings.d.ts +1 -1
- package/dist/types/src/components/CollectionPresenterContainer.d.ts.map +1 -1
- package/dist/types/src/components/DocumentPresenterContainer.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Container.stories.d.ts +14 -21
- package/dist/types/src/components/Markdown/Container.stories.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Slide.stories.d.ts +10 -11
- package/dist/types/src/components/Markdown/Slide.stories.d.ts.map +1 -1
- package/dist/types/src/components/Presenter/Pager.d.ts +1 -1
- package/dist/types/src/components/Presenter/Pager.d.ts.map +1 -1
- package/dist/types/src/components/Presenter/Pager.stories.d.ts +12 -3
- package/dist/types/src/components/Presenter/Pager.stories.d.ts.map +1 -1
- package/dist/types/src/components/PresenterSettings.d.ts.map +1 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts.map +1 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts +17 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +18 -3
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +1 -0
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +3 -3
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +28 -28
- package/src/PresenterPlugin.tsx +1 -1
- package/src/capabilities/app-graph-builder.ts +35 -1
- package/src/capabilities/react-surface.tsx +18 -8
- package/src/capabilities/settings.ts +1 -1
- package/src/components/CollectionPresenterContainer.tsx +2 -1
- package/src/components/DocumentPresenterContainer.tsx +2 -1
- package/src/components/Markdown/Container.stories.tsx +20 -17
- package/src/components/Markdown/Slide.stories.tsx +9 -6
- package/src/components/Presenter/Pager.stories.tsx +7 -5
- package/src/components/Presenter/Pager.tsx +3 -3
- package/src/components/PresenterSettings.tsx +13 -9
- package/src/components/RevealPlayer/RevealPlayer.stories.tsx +4 -3
- package/src/components/RevealPlayer/RevealPlayer.tsx +50 -53
- package/src/translations.ts +1 -0
- package/src/useExitPresenter.ts +1 -1
- package/dist/lib/browser/CollectionPresenterContainer-IPDW4HZR.mjs.map +0 -7
- package/dist/lib/browser/DocumentPresenterContainer-LJBJM5UB.mjs.map +0 -7
- package/dist/lib/browser/app-graph-builder-LURIPUEV.mjs.map +0 -7
- package/dist/lib/browser/chunk-QWJM3ADC.mjs.map +0 -7
- 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.
|
|
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.
|
|
40
|
-
"@dxos/async": "0.8.4-main.
|
|
41
|
-
"@dxos/echo": "0.8.4-main.
|
|
42
|
-
"@dxos/live-object": "0.8.4-main.
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/plugin-
|
|
48
|
-
"@dxos/plugin-
|
|
49
|
-
"@dxos/plugin-
|
|
50
|
-
"@dxos/plugin-stack": "0.8.4-main.
|
|
51
|
-
"@dxos/react-client": "0.8.4-main.
|
|
52
|
-
"@dxos/react-ui-
|
|
53
|
-
"@dxos/
|
|
54
|
-
"@dxos/
|
|
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.
|
|
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.
|
|
62
|
+
"effect": "3.17.7",
|
|
63
63
|
"react": "~18.2.0",
|
|
64
64
|
"react-dom": "~18.2.0",
|
|
65
|
-
"vite": "
|
|
66
|
-
"@dxos/
|
|
67
|
-
"@dxos/
|
|
68
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
69
|
-
"@dxos/storybook-utils": "0.8.4-main.
|
|
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.
|
|
78
|
-
"@dxos/react-ui
|
|
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"
|
package/src/PresenterPlugin.tsx
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
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 {
|
|
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:
|
|
29
|
-
|
|
30
|
-
|
|
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:
|
|
37
|
-
|
|
38
|
-
|
|
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 {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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:
|
|
18
|
-
const [index, setIndex] = useControlledState(
|
|
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 {
|
|
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
|
-
<
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
|
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
|
-
|
|
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, {
|
|
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
|
-
|
|
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
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
123
|
+
await deckRef.current.initialize();
|
|
125
124
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
125
|
+
if (slide !== undefined) {
|
|
126
|
+
deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
|
|
127
|
+
}
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
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
|
|
139
|
+
} catch {
|
|
143
140
|
// Ignore.
|
|
144
141
|
}
|
|
145
142
|
};
|
package/src/translations.ts
CHANGED
package/src/useExitPresenter.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import { useCallback } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
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';
|