@dxos/plugin-presenter 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef
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/index.mjs +4 -530
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/operations/index.mjs +1 -1
- package/dist/lib/browser/operations/index.mjs.map +3 -3
- package/dist/lib/browser/translations.mjs +19 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/types/src/PresenterPlugin.d.ts +1 -0
- package/dist/types/src/PresenterPlugin.d.ts.map +1 -1
- package/dist/types/src/PresenterPlugin.node.d.ts +4 -0
- package/dist/types/src/PresenterPlugin.node.d.ts.map +1 -0
- package/dist/types/src/PresenterPlugin.test.d.ts +2 -0
- package/dist/types/src/PresenterPlugin.test.d.ts.map +1 -0
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +1 -5
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/capabilities/settings.d.ts +2 -5
- package/dist/types/src/capabilities/settings.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Panel.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Panel.stories.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Slide.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Slide.stories.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/theme.d.ts.map +1 -1
- package/dist/types/src/components/Presenter/Layout.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.map +1 -1
- package/dist/types/src/components/PresenterSettings/PresenterSettings.d.ts +1 -1
- package/dist/types/src/components/PresenterSettings/PresenterSettings.d.ts.map +1 -1
- package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts +4 -6
- package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts.map +1 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts +1 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts +5 -7
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts.map +1 -1
- package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts +1 -1
- package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts.map +1 -1
- package/dist/types/src/containers/MarkdownSlide/MarkdownSlide.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +2 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/operations/definitions.d.ts +4 -4
- package/dist/types/src/operations/definitions.d.ts.map +1 -1
- package/dist/types/src/testing.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +4 -7
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/Settings.d.ts +3 -2
- package/dist/types/src/types/Settings.d.ts.map +1 -1
- package/dist/types/src/types/index.d.ts +2 -5
- package/dist/types/src/types/index.d.ts.map +1 -1
- package/dist/types/src/useExitPresenter.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +41 -31
- package/src/PresenterPlugin.node.ts +16 -0
- package/src/PresenterPlugin.test.ts +23 -0
- package/src/PresenterPlugin.tsx +3 -2
- package/src/capabilities/app-graph-builder.ts +1 -1
- package/src/capabilities/react-surface.tsx +22 -20
- package/src/components/PresenterSettings/PresenterSettings.stories.tsx +2 -1
- package/src/components/PresenterSettings/PresenterSettings.tsx +8 -9
- package/src/components/RevealPlayer/RevealPlayer.stories.tsx +2 -1
- package/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.tsx +9 -3
- package/src/index.ts +5 -2
- package/src/operations/definitions.ts +1 -1
- package/src/translations.ts +0 -2
- package/src/types/Settings.ts +7 -2
- package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs +0 -29
- package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs.map +0 -7
|
@@ -1,495 +1,7 @@
|
|
|
1
1
|
import "./chunk-J5LGTIGS.mjs";
|
|
2
2
|
|
|
3
|
-
// src/
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
// src/components/Markdown/Panel.tsx
|
|
7
|
-
import React, { useState } from "react";
|
|
8
|
-
import { useResizeDetector } from "react-resize-detector";
|
|
9
|
-
import { mx } from "@dxos/ui-theme";
|
|
10
|
-
var Panel = ({ children, classNames }) => {
|
|
11
|
-
const [props, setProps] = useState({});
|
|
12
|
-
const { ref: containerRef, width, height } = useResizeDetector({
|
|
13
|
-
refreshMode: "debounce",
|
|
14
|
-
refreshRate: 200,
|
|
15
|
-
refreshOptions: {
|
|
16
|
-
leading: true
|
|
17
|
-
},
|
|
18
|
-
onResize: ({ width: width2, height: height2 }) => {
|
|
19
|
-
if (width2 && height2) {
|
|
20
|
-
setProps(createLayoutProps({
|
|
21
|
-
width: width2,
|
|
22
|
-
height: height2
|
|
23
|
-
}));
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
28
|
-
ref: containerRef,
|
|
29
|
-
className: mx("flex grow relative overflow-hidden bg-attention-surface", classNames)
|
|
30
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
31
|
-
className: mx("dx-container absolute"),
|
|
32
|
-
style: props
|
|
33
|
-
}, width && height && children));
|
|
34
|
-
};
|
|
35
|
-
var createLayoutProps = ({ width, height }) => {
|
|
36
|
-
const aspectRatio = 16 / 9;
|
|
37
|
-
const nominalWidth = 2560;
|
|
38
|
-
const nominalHeight = nominalWidth / aspectRatio;
|
|
39
|
-
const scale = Math.min(width / nominalWidth, height / nominalHeight);
|
|
40
|
-
return {
|
|
41
|
-
left: (width - nominalWidth) / 2,
|
|
42
|
-
top: (height - nominalHeight) / 2,
|
|
43
|
-
width: nominalWidth,
|
|
44
|
-
height: nominalHeight,
|
|
45
|
-
transform: `scale(${scale})`
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
// src/components/Markdown/Slide.tsx
|
|
50
|
-
import "highlight.js/styles/github.css";
|
|
51
|
-
import { h } from "hastscript";
|
|
52
|
-
import React2 from "react";
|
|
53
|
-
import ReactMarkdown from "react-markdown";
|
|
54
|
-
import rehypeAddClasses from "rehype-add-classes";
|
|
55
|
-
import rehypeHighlight from "rehype-highlight";
|
|
56
|
-
import remarkFrontmatter from "remark-frontmatter";
|
|
57
|
-
import remarkParseFrontmatter from "remark-parse-frontmatter";
|
|
58
|
-
|
|
59
|
-
// raw-loader:/__w/dxos/dxos/packages/plugins/plugin-presenter/src/components/Markdown/styles.css?raw
|
|
60
|
-
var styles_default = "/*!\n Theme: GitHub Dark\n Description: Dark theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n Outdated base version: https://github.com/primer/github-syntax-dark\n Current colors taken from GitHub's CSS\n*/\n/* TODO(burdon): Use tokens. */\n.dark pre code.hljs {\n display: block;\n overflow-x: auto;\n padding: 1em;\n}\n.dark code.hljs {\n padding: 3px 5px;\n}\n.dark .hljs {\n color: #c9d1d9;\n background: #0d1117;\n}\n.dark .hljs-doctag,\n.dark .hljs-keyword,\n.dark .hljs-meta .hljs-keyword,\n.dark .hljs-template-tag,\n.dark .hljs-template-variable,\n.dark .hljs-type,\n.dark .hljs-variable.language_ {\n color: #ff7b72;\n}\n.dark .hljs-title,\n.dark .hljs-title.class_,\n.dark .hljs-title.class_.inherited__,\n.dark .hljs-title.function_ {\n color: #d2a8ff;\n}\n.dark .hljs-attr,\n.dark .hljs-attribute,\n.dark .hljs-literal,\n.dark .hljs-meta,\n.dark .hljs-number,\n.dark .hljs-operator,\n.dark .hljs-variable,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-class,\n.dark .hljs-selector-id {\n color: #79c0ff;\n}\n.dark .hljs-regexp,\n.dark .hljs-string,\n.dark .hljs-meta .hljs-string {\n color: #a5d6ff;\n}\n.dark .hljs-built_in,\n.dark .hljs-symbol {\n color: #ffa657;\n}\n.dark .hljs-comment,\n.dark .hljs-code,\n.dark .hljs-formula {\n color: #8b949e;\n}\n.dark .hljs-name,\n.dark .hljs-quote,\n.dark .hljs-selector-tag,\n.dark .hljs-selector-pseudo {\n color: #7ee787;\n}\n.dark .hljs-subst {\n color: #c9d1d9;\n}\n.dark .hljs-section {\n color: #1f6feb;\n font-weight: bold;\n}\n.dark .hljs-bullet {\n color: #f2cc60;\n}\n.dark .hljs-emphasis {\n color: #c9d1d9;\n font-style: italic;\n}\n.dark .hljs-strong {\n color: #c9d1d9;\n font-weight: bold;\n}\n.dark .hljs-addition {\n color: #aff5b4;\n background-color: #033a16;\n}\n.dark .hljs-deletion {\n color: #ffdcd7;\n background-color: #67060c;\n}\n.dark .hljs-char.escape_,\n.dark .hljs-link,\n.dark .hljs-params,\n.dark .hljs-property,\n.dark .hljs-punctuation,\n.dark .hljs-tag {\n /* purposely ignored */\n all: unset;\n}\n";
|
|
61
|
-
|
|
62
|
-
// src/components/Markdown/theme.ts
|
|
63
|
-
var theme = {
|
|
64
|
-
root: "bg-attention-surface leading-relaxed font-mono",
|
|
65
|
-
padding: "px-40 py-16 gap-8",
|
|
66
|
-
nodes: {
|
|
67
|
-
h1: "text-[80px] text-accent-text",
|
|
68
|
-
h2: "text-[60px] text-accent-text",
|
|
69
|
-
h3: "text-[48px] text-accent-text",
|
|
70
|
-
p: "text-[48px]",
|
|
71
|
-
ul: "my-[16px] ml-12 leading-relaxed list-disc",
|
|
72
|
-
ol: "my-[16px] ml-24 leading-relaxed list-decimal",
|
|
73
|
-
li: "pl-6 text-[48px]",
|
|
74
|
-
pre: "w-full mx-0 my-[32px] p-4 bg-input-surface",
|
|
75
|
-
code: "p-0 text-[40px]"
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
// src/components/Markdown/Slide.tsx
|
|
80
|
-
var Slide = ({ content = "", classes = theme.nodes }) => {
|
|
81
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, styles_default), /* @__PURE__ */ React2.createElement(ReactMarkdown, {
|
|
82
|
-
components,
|
|
83
|
-
// Markdown to HTML.
|
|
84
|
-
remarkPlugins: [
|
|
85
|
-
[
|
|
86
|
-
remarkFrontmatter,
|
|
87
|
-
"yaml"
|
|
88
|
-
],
|
|
89
|
-
remarkParseFrontmatter
|
|
90
|
-
],
|
|
91
|
-
// HTML processing.
|
|
92
|
-
rehypePlugins: [
|
|
93
|
-
[
|
|
94
|
-
rehypeAddClasses,
|
|
95
|
-
classes
|
|
96
|
-
],
|
|
97
|
-
rehypeHighlight,
|
|
98
|
-
slideLayout
|
|
99
|
-
]
|
|
100
|
-
}, content));
|
|
101
|
-
};
|
|
102
|
-
var slideLayout = (_options = {}) => (tree, file) => {
|
|
103
|
-
const { data: { frontmatter = {} } } = file;
|
|
104
|
-
let content = tree.children;
|
|
105
|
-
const { layout, image } = frontmatter;
|
|
106
|
-
if (image) {
|
|
107
|
-
const img = h("div", {
|
|
108
|
-
class: "flex grow shrink-0 bg-cover bg-center bg-no-repeat",
|
|
109
|
-
style: {
|
|
110
|
-
backgroundImage: `url(${image})`
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
switch (layout) {
|
|
114
|
-
case "fullscreen": {
|
|
115
|
-
content = img;
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
case "columns": {
|
|
119
|
-
content = h("div", {
|
|
120
|
-
class: "flex grow grid grid-cols-2"
|
|
121
|
-
}, [
|
|
122
|
-
h("div", {
|
|
123
|
-
class: theme.padding
|
|
124
|
-
}, [
|
|
125
|
-
content
|
|
126
|
-
]),
|
|
127
|
-
img
|
|
128
|
-
]);
|
|
129
|
-
break;
|
|
130
|
-
}
|
|
131
|
-
case "rows": {
|
|
132
|
-
content = h("div", {
|
|
133
|
-
class: "flex grow flex-col"
|
|
134
|
-
}, [
|
|
135
|
-
h("div", {
|
|
136
|
-
class: theme.padding
|
|
137
|
-
}, [
|
|
138
|
-
content
|
|
139
|
-
]),
|
|
140
|
-
h("div", {
|
|
141
|
-
class: [
|
|
142
|
-
"flex grow pt-0",
|
|
143
|
-
theme.padding
|
|
144
|
-
]
|
|
145
|
-
}, [
|
|
146
|
-
img
|
|
147
|
-
])
|
|
148
|
-
]);
|
|
149
|
-
break;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
} else {
|
|
153
|
-
content = h("div", {
|
|
154
|
-
class: [
|
|
155
|
-
"flex grow flex-col",
|
|
156
|
-
theme.padding
|
|
157
|
-
]
|
|
158
|
-
}, [
|
|
159
|
-
content
|
|
160
|
-
]);
|
|
161
|
-
}
|
|
162
|
-
const root = h("div", {
|
|
163
|
-
class: [
|
|
164
|
-
"flex flex-col grow",
|
|
165
|
-
theme.root
|
|
166
|
-
]
|
|
167
|
-
}, [
|
|
168
|
-
content
|
|
169
|
-
]);
|
|
170
|
-
tree.children = [
|
|
171
|
-
root
|
|
172
|
-
];
|
|
173
|
-
};
|
|
174
|
-
var ImageWrapper = ({ node: _, ...props }) => {
|
|
175
|
-
const { alt = "", src } = props;
|
|
176
|
-
return /* @__PURE__ */ React2.createElement("img", {
|
|
177
|
-
alt,
|
|
178
|
-
src
|
|
179
|
-
});
|
|
180
|
-
};
|
|
181
|
-
var components = {
|
|
182
|
-
img: ({ node, ...props }) => /* @__PURE__ */ React2.createElement(ImageWrapper, {
|
|
183
|
-
node,
|
|
184
|
-
...props
|
|
185
|
-
})
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
// src/components/Presenter/Layout.tsx
|
|
189
|
-
import React3 from "react";
|
|
190
|
-
import { composable, composableProps } from "@dxos/ui-theme";
|
|
191
|
-
var Layout = composable(({ children, topLeft, topRight, bottomLeft, bottomRight, ...props }, forwardedRef) => {
|
|
192
|
-
return /* @__PURE__ */ React3.createElement("div", {
|
|
193
|
-
...composableProps(props, {
|
|
194
|
-
classNames: "flex grow relative overflow-hidden bg-attention-surface"
|
|
195
|
-
}),
|
|
196
|
-
ref: forwardedRef
|
|
197
|
-
}, /* @__PURE__ */ React3.createElement("div", {
|
|
198
|
-
className: "flex flex-col grow overflow-hidden"
|
|
199
|
-
}, children), /* @__PURE__ */ React3.createElement("div", {
|
|
200
|
-
className: "z-[200]"
|
|
201
|
-
}, /* @__PURE__ */ React3.createElement("div", {
|
|
202
|
-
className: "absolute top-4 left-4"
|
|
203
|
-
}, topLeft), /* @__PURE__ */ React3.createElement("div", {
|
|
204
|
-
className: "absolute top-4 right-4"
|
|
205
|
-
}, topRight), /* @__PURE__ */ React3.createElement("div", {
|
|
206
|
-
className: "absolute bottom-4 left-4"
|
|
207
|
-
}, bottomLeft), /* @__PURE__ */ React3.createElement("div", {
|
|
208
|
-
className: "absolute bottom-4 right-4"
|
|
209
|
-
}, bottomRight)));
|
|
210
|
-
});
|
|
211
|
-
|
|
212
|
-
// src/components/Presenter/Pager.tsx
|
|
213
|
-
import React4, { useEffect } from "react";
|
|
214
|
-
import { IconButton, useControlledState } from "@dxos/react-ui";
|
|
215
|
-
var Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }) => {
|
|
216
|
-
const [index, setIndex] = useControlledState(indexProp);
|
|
217
|
-
useEffect(() => {
|
|
218
|
-
onChange?.(index);
|
|
219
|
-
}, [
|
|
220
|
-
index
|
|
221
|
-
]);
|
|
222
|
-
const handleChangeIndex = (dir) => {
|
|
223
|
-
setIndex((index2) => {
|
|
224
|
-
const next = index2 + dir;
|
|
225
|
-
return next >= 0 && next < count ? next : index2;
|
|
226
|
-
});
|
|
227
|
-
};
|
|
228
|
-
useEffect(() => {
|
|
229
|
-
if (!keys) {
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
const keydownHandler = (event) => {
|
|
233
|
-
switch (event.key) {
|
|
234
|
-
case "Escape": {
|
|
235
|
-
onExit?.();
|
|
236
|
-
break;
|
|
237
|
-
}
|
|
238
|
-
case "ArrowLeft": {
|
|
239
|
-
if (event.shiftKey) {
|
|
240
|
-
onChange?.(0);
|
|
241
|
-
} else {
|
|
242
|
-
handleChangeIndex(-1);
|
|
243
|
-
}
|
|
244
|
-
break;
|
|
245
|
-
}
|
|
246
|
-
case "ArrowRight": {
|
|
247
|
-
if (event.shiftKey) {
|
|
248
|
-
onChange?.(count - 1);
|
|
249
|
-
} else {
|
|
250
|
-
handleChangeIndex(1);
|
|
251
|
-
}
|
|
252
|
-
break;
|
|
253
|
-
}
|
|
254
|
-
case "ArrowUp": {
|
|
255
|
-
onChange?.(0);
|
|
256
|
-
break;
|
|
257
|
-
}
|
|
258
|
-
case "ArrowDown": {
|
|
259
|
-
onChange?.(count - 1);
|
|
260
|
-
break;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
};
|
|
264
|
-
window.addEventListener("keydown", keydownHandler);
|
|
265
|
-
return () => window.removeEventListener("keydown", keydownHandler);
|
|
266
|
-
}, [
|
|
267
|
-
keys,
|
|
268
|
-
count
|
|
269
|
-
]);
|
|
270
|
-
if (index === void 0 || !count) {
|
|
271
|
-
return null;
|
|
272
|
-
}
|
|
273
|
-
return /* @__PURE__ */ React4.createElement("div", {
|
|
274
|
-
className: "flex items-center text-neutral-500"
|
|
275
|
-
}, /* @__PURE__ */ React4.createElement(IconButton, {
|
|
276
|
-
icon: "ph--caret-double-left--regular",
|
|
277
|
-
size: 6,
|
|
278
|
-
label: "Jump to first",
|
|
279
|
-
iconOnly: true,
|
|
280
|
-
noTooltip: true,
|
|
281
|
-
variant: "ghost",
|
|
282
|
-
classNames: "p-0",
|
|
283
|
-
onClick: () => onChange?.(0)
|
|
284
|
-
}), /* @__PURE__ */ React4.createElement(IconButton, {
|
|
285
|
-
icon: "ph--caret-left--regular",
|
|
286
|
-
size: 6,
|
|
287
|
-
label: "Previous",
|
|
288
|
-
iconOnly: true,
|
|
289
|
-
noTooltip: true,
|
|
290
|
-
variant: "ghost",
|
|
291
|
-
classNames: "p-0",
|
|
292
|
-
onClick: () => handleChangeIndex(-1)
|
|
293
|
-
}), /* @__PURE__ */ React4.createElement(IconButton, {
|
|
294
|
-
icon: "ph--caret-right--regular",
|
|
295
|
-
size: 6,
|
|
296
|
-
label: "Next",
|
|
297
|
-
iconOnly: true,
|
|
298
|
-
noTooltip: true,
|
|
299
|
-
variant: "ghost",
|
|
300
|
-
classNames: "p-0",
|
|
301
|
-
onClick: () => handleChangeIndex(1)
|
|
302
|
-
}), /* @__PURE__ */ React4.createElement(IconButton, {
|
|
303
|
-
icon: "ph--caret-double-right--regular",
|
|
304
|
-
size: 6,
|
|
305
|
-
label: "Jump to last",
|
|
306
|
-
iconOnly: true,
|
|
307
|
-
noTooltip: true,
|
|
308
|
-
variant: "ghost",
|
|
309
|
-
classNames: "p-0",
|
|
310
|
-
onClick: () => onChange?.(count - 1)
|
|
311
|
-
}));
|
|
312
|
-
};
|
|
313
|
-
var PageNumber = ({ index = 0, count = 1 }) => {
|
|
314
|
-
if (index === void 0 || !count) {
|
|
315
|
-
return null;
|
|
316
|
-
}
|
|
317
|
-
return /* @__PURE__ */ React4.createElement("div", {
|
|
318
|
-
className: "flex items-center text-neutral-500 text-2xl"
|
|
319
|
-
}, /* @__PURE__ */ React4.createElement("div", null, index + 1, " / ", count));
|
|
320
|
-
};
|
|
321
|
-
var StartButton = ({ running, onClick }) => {
|
|
322
|
-
return /* @__PURE__ */ React4.createElement(IconButton, {
|
|
323
|
-
icon: running ? "ph--x--regular" : "ph--play--regular",
|
|
324
|
-
size: 6,
|
|
325
|
-
label: running ? "Stop" : "Play",
|
|
326
|
-
iconOnly: true,
|
|
327
|
-
noTooltip: true,
|
|
328
|
-
variant: "ghost",
|
|
329
|
-
classNames: "p-0",
|
|
330
|
-
onClick: () => onClick?.(!running)
|
|
331
|
-
});
|
|
332
|
-
};
|
|
333
|
-
|
|
334
|
-
// src/components/RevealPlayer/RevealPlayer.tsx
|
|
335
|
-
import "reveal.js/dist/reveal.css";
|
|
336
|
-
import "reveal.js/dist/theme/black.css";
|
|
337
|
-
import "highlight.js/styles/tokyo-night-dark.css";
|
|
338
|
-
import hljs from "highlight.js";
|
|
339
|
-
import typescript from "highlight.js/lib/languages/typescript";
|
|
340
|
-
import React5, { useRef } from "react";
|
|
341
|
-
import Reveal from "reveal.js";
|
|
342
|
-
import RevealHighlight from "reveal.js/plugin/highlight/highlight";
|
|
343
|
-
import RevealMarkdown from "reveal.js/plugin/markdown/plugin.js";
|
|
344
|
-
import { useAsyncEffect } from "@dxos/react-ui";
|
|
345
|
-
import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
|
|
346
|
-
var styles = `
|
|
347
|
-
<style type="text/css">
|
|
348
|
-
.reveal h1 {
|
|
349
|
-
font-weight: 100;
|
|
350
|
-
font-size: 60px;
|
|
351
|
-
opacity: 0.5;
|
|
352
|
-
}
|
|
353
|
-
.reveal h2 {
|
|
354
|
-
font-weight: 100;
|
|
355
|
-
padding-top: 60px;
|
|
356
|
-
padding-left: 40px;
|
|
357
|
-
font-size: 48px;
|
|
358
|
-
opacity: 0.3;
|
|
359
|
-
}
|
|
360
|
-
.reveal h1, h2, p {
|
|
361
|
-
font-family: "Raleway", sans-serif;
|
|
362
|
-
text-align: left;
|
|
363
|
-
font-weight: 200;
|
|
364
|
-
}
|
|
365
|
-
.reveal ul {
|
|
366
|
-
font-family: "Raleway", sans-serif;
|
|
367
|
-
display: block;
|
|
368
|
-
list-style: "- ";
|
|
369
|
-
}
|
|
370
|
-
.reveal blockquote p {
|
|
371
|
-
text-align: center;
|
|
372
|
-
font-weight: 100;
|
|
373
|
-
padding: 32px;
|
|
374
|
-
}
|
|
375
|
-
.reveal pre {
|
|
376
|
-
margin-left: 0;
|
|
377
|
-
}
|
|
378
|
-
.reveal code {
|
|
379
|
-
font-size: 20px;
|
|
380
|
-
background: #111111;
|
|
381
|
-
color: #eeeeee;
|
|
382
|
-
max-height: unset !important;
|
|
383
|
-
}
|
|
384
|
-
</style>
|
|
385
|
-
`;
|
|
386
|
-
var RevealPlayer = composable2(({ content, slide, fullscreen = true, onExit, children, ...props }, forwardedRef) => {
|
|
387
|
-
const deckDivRef = useRef(null);
|
|
388
|
-
const deckRef = useRef(null);
|
|
389
|
-
useAsyncEffect(async () => {
|
|
390
|
-
if (deckRef.current) {
|
|
391
|
-
return;
|
|
392
|
-
}
|
|
393
|
-
hljs.registerLanguage("typescript", typescript);
|
|
394
|
-
deckRef.current = new Reveal(deckDivRef.current, {
|
|
395
|
-
// view: 'scroll',
|
|
396
|
-
progress: false,
|
|
397
|
-
transition: "none",
|
|
398
|
-
slideNumber: false,
|
|
399
|
-
embedded: true,
|
|
400
|
-
// Disable autoplay to prevent errors in headless environments (e.g., CI).
|
|
401
|
-
autoPlayMedia: false,
|
|
402
|
-
// TODO(burdon): Speaker view requires server to serve popout window.
|
|
403
|
-
// https://revealjs.com/speaker-view
|
|
404
|
-
showNotes: false,
|
|
405
|
-
// width: 1600,
|
|
406
|
-
// height: 900,
|
|
407
|
-
margin: 0.1,
|
|
408
|
-
// center: false,
|
|
409
|
-
// minScale: 0.1,
|
|
410
|
-
// maxScale: 1.4,
|
|
411
|
-
// https://revealjs.com/markdown
|
|
412
|
-
// TODO(burdon): Requires server to serve popout window.
|
|
413
|
-
plugins: [
|
|
414
|
-
RevealMarkdown,
|
|
415
|
-
RevealHighlight
|
|
416
|
-
],
|
|
417
|
-
// See https://marked.js.org/using_advanced#options
|
|
418
|
-
markdown: {
|
|
419
|
-
gfm: true,
|
|
420
|
-
smartypants: true,
|
|
421
|
-
highlight: (code, language) => {
|
|
422
|
-
if (language) {
|
|
423
|
-
return hljs.highlight(code, {
|
|
424
|
-
language
|
|
425
|
-
}).value;
|
|
426
|
-
}
|
|
427
|
-
return hljs.highlightAuto(code).value;
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
});
|
|
431
|
-
await deckRef.current.initialize();
|
|
432
|
-
if (slide !== void 0) {
|
|
433
|
-
deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
|
|
434
|
-
}
|
|
435
|
-
deckRef.current.addKeyBinding({
|
|
436
|
-
keyCode: 27,
|
|
437
|
-
key: "Escape",
|
|
438
|
-
description: "Exit full screen"
|
|
439
|
-
}, () => {
|
|
440
|
-
onExit?.();
|
|
441
|
-
});
|
|
442
|
-
return () => {
|
|
443
|
-
try {
|
|
444
|
-
if (deckRef.current) {
|
|
445
|
-
deckRef.current.destroy();
|
|
446
|
-
deckRef.current = null;
|
|
447
|
-
}
|
|
448
|
-
} catch {
|
|
449
|
-
}
|
|
450
|
-
};
|
|
451
|
-
});
|
|
452
|
-
return /* @__PURE__ */ React5.createElement("div", {
|
|
453
|
-
...composableProps2(props, {
|
|
454
|
-
classNames: [
|
|
455
|
-
"dx-container grid place-items-center bg-black",
|
|
456
|
-
fullscreen && "absolute inset-0"
|
|
457
|
-
]
|
|
458
|
-
}),
|
|
459
|
-
ref: forwardedRef
|
|
460
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
461
|
-
role: "none",
|
|
462
|
-
className: "relative aspect-video h-full w-full h-auto max-h-full overflow-hidden"
|
|
463
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
464
|
-
ref: deckDivRef,
|
|
465
|
-
className: "absolute inset-0 reveal"
|
|
466
|
-
}, /* @__PURE__ */ React5.createElement("style", null, /* @__PURE__ */ React5.createElement("link", {
|
|
467
|
-
rel: "preconnect",
|
|
468
|
-
href: "https://fonts.googleapis.com"
|
|
469
|
-
}), /* @__PURE__ */ React5.createElement("link", {
|
|
470
|
-
rel: "preconnect",
|
|
471
|
-
href: "https://fonts.gstatic.com",
|
|
472
|
-
crossOrigin: ""
|
|
473
|
-
}), /* @__PURE__ */ React5.createElement("link", {
|
|
474
|
-
rel: "stylesheet",
|
|
475
|
-
href: "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
|
|
476
|
-
})), /* @__PURE__ */ React5.createElement("div", {
|
|
477
|
-
className: "slides"
|
|
478
|
-
}, /* @__PURE__ */ React5.createElement("div", {
|
|
479
|
-
className: "text-center!"
|
|
480
|
-
}), /* @__PURE__ */ React5.createElement("section", {
|
|
481
|
-
"data-markdown": []
|
|
482
|
-
}, /* @__PURE__ */ React5.createElement("textarea", {
|
|
483
|
-
"data-template": true,
|
|
484
|
-
defaultValue: [
|
|
485
|
-
styles,
|
|
486
|
-
content
|
|
487
|
-
].join("\n")
|
|
488
|
-
}))))));
|
|
489
|
-
});
|
|
490
|
-
|
|
491
|
-
// src/components/index.ts
|
|
492
|
-
var PresenterSettings = lazy(() => import("./PresenterSettings-DZO2DC53.mjs"));
|
|
3
|
+
// src/index.ts
|
|
4
|
+
import { Plugin } from "@dxos/app-framework";
|
|
493
5
|
|
|
494
6
|
// src/meta.ts
|
|
495
7
|
import { trim } from "@dxos/util";
|
|
@@ -505,48 +17,10 @@ var meta = {
|
|
|
505
17
|
source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter"
|
|
506
18
|
};
|
|
507
19
|
|
|
508
|
-
// src/
|
|
509
|
-
|
|
510
|
-
import { AppPlugin } from "@dxos/app-toolkit";
|
|
511
|
-
import { AppGraphBuilder, PresenterSettings as PresenterSettings2, ReactSurface } from "#capabilities";
|
|
512
|
-
import { meta as meta3 } from "#meta";
|
|
513
|
-
|
|
514
|
-
// src/translations.ts
|
|
515
|
-
import { meta as meta2 } from "#meta";
|
|
516
|
-
var translations = [
|
|
517
|
-
{
|
|
518
|
-
"en-US": {
|
|
519
|
-
[meta2.id]: {
|
|
520
|
-
"plugin.name": "Presenter",
|
|
521
|
-
"settings.title": "Presenter settings",
|
|
522
|
-
"toggle-presentation.label": "Present",
|
|
523
|
-
"present-collections.label": "Present collections (experimental)",
|
|
524
|
-
"present-collections.description": "Enable presenting collections of documents as a slideshow."
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
];
|
|
529
|
-
|
|
530
|
-
// src/PresenterPlugin.tsx
|
|
531
|
-
var PresenterPlugin = Plugin.define(meta3).pipe(AppPlugin.addAppGraphModule({
|
|
532
|
-
activate: AppGraphBuilder
|
|
533
|
-
}), AppPlugin.addSettingsModule({
|
|
534
|
-
activate: PresenterSettings2
|
|
535
|
-
}), AppPlugin.addSurfaceModule({
|
|
536
|
-
activate: ReactSurface
|
|
537
|
-
}), AppPlugin.addTranslationsModule({
|
|
538
|
-
translations
|
|
539
|
-
}), Plugin.make);
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var PresenterPlugin = Plugin.lazy(meta, () => import("#plugin"));
|
|
540
22
|
export {
|
|
541
|
-
Layout,
|
|
542
|
-
PageNumber,
|
|
543
|
-
Pager,
|
|
544
|
-
Panel,
|
|
545
23
|
PresenterPlugin,
|
|
546
|
-
PresenterSettings,
|
|
547
|
-
RevealPlayer,
|
|
548
|
-
Slide,
|
|
549
|
-
StartButton,
|
|
550
24
|
meta
|
|
551
25
|
};
|
|
552
26
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport * from './Markdown';\nexport * from './Presenter';\nexport * from './RevealPlayer';\n\nexport const PresenterSettings: ComponentType<any> = lazy(() => import('./PresenterSettings'));\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type PanelProps = ThemedClassName<PropsWithChildren<{}>>;\n\n/**\n * Scaled markdown panel.\n */\nexport const Panel = ({ children, classNames }: PanelProps) => {\n const [props, setProps] = useState({});\n const {\n ref: containerRef,\n width,\n height,\n } = useResizeDetector({\n refreshMode: 'debounce',\n refreshRate: 200,\n refreshOptions: {\n leading: true,\n },\n onResize: ({ width, height }) => {\n if (width && height) {\n setProps(createLayoutProps({ width, height }));\n }\n },\n });\n\n // TODO(burdon): Reconcile highlight colors with markdown editor.\n // https://www.npmjs.com/package/react-markdown\n return (\n <div ref={containerRef} className={mx('flex grow relative overflow-hidden bg-attention-surface', classNames)}>\n <div className={mx('dx-container absolute')} style={props}>\n {width && height && children}\n </div>\n </div>\n );\n};\n\n/**\n * Compute CSS properties to transform DIV to be full screen.\n *\n * Display resolutions:\n * window.screen.{availWidth, availHeight}\n * 5K Studio 16.2-inch Macbook Pro\n * Max 5120 x 2880 3456 x 2234\n * Default 2560 x 1440 1728 x 1117 (Actual height 1080 - 37 pixel notch)\n * Aspect 1.77 (16/9) 1.54\n */\nconst createLayoutProps = ({ width, height }: { width: number; height: number }) => {\n // Config.\n const aspectRatio = 16 / 9;\n const nominalWidth = 2560;\n const nominalHeight = nominalWidth / aspectRatio;\n\n // NOTE: Hack to detect full height on Macbook Pro due to notch.\n // const macIntelNotch = 1117 - 1080;\n // const fullscreen =\n // height === screen.availHeight ||\n // (window.navigator.platform === 'MacIntel' && height === screen.availHeight - macIntelNotch);\n\n // If not fullscreen then make scale slightly smaller so there's a natural border.\n // const scaleFactor = fullscreen ? 1 : 0.95;\n\n // Compute scaling factor required.\n const scale = Math.min(width / nominalWidth, height / nominalHeight);\n\n return {\n left: (width - nominalWidth) / 2,\n top: (height - nominalHeight) / 2,\n width: nominalWidth,\n height: nominalHeight,\n transform: `scale(${scale})`,\n };\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport 'highlight.js/styles/github.css';\n\nimport { h } from 'hastscript';\nimport React from 'react';\nimport ReactMarkdown, { type Options as ReactMarkdownOptions } from 'react-markdown';\nimport rehypeAddClasses from 'rehype-add-classes';\nimport rehypeHighlight from 'rehype-highlight';\nimport remarkFrontmatter from 'remark-frontmatter';\nimport remarkParseFrontmatter from 'remark-parse-frontmatter';\n\nimport styles from './styles.css?raw';\nimport { theme } from './theme';\n\nexport type SlideProps = {\n content?: string;\n classes?: Record<string, string>;\n};\n\nexport const Slide = ({ content = '', classes = theme.nodes }: SlideProps) => {\n // TODO(thure): `rehype-highlight` ends up using `github.css` from `highlight.js`, but this does not appear to be\n // configurable. Find a way to remove the literal stylesheet here.\n return (\n <>\n <style>{styles}</style>\n <ReactMarkdown\n components={components}\n // Markdown to HTML.\n remarkPlugins={[[remarkFrontmatter, 'yaml'], remarkParseFrontmatter as any]}\n // HTML processing.\n rehypePlugins={[[rehypeAddClasses, classes], rehypeHighlight as any, slideLayout]}\n >\n {content}\n </ReactMarkdown>\n </>\n );\n};\n\n/**\n * Rehype plugin to format DOM based on frontmatter.\n * https://github.com/unifiedjs/unified#plugin\n * TODO(burdon): See tools/presenter: remarkPluginLayout\n * E.g., layout image from front-matter.\n */\nconst slideLayout =\n (_options = {}) =>\n (tree: any, file: any) => {\n const {\n data: { frontmatter = {} },\n } = file;\n\n let content = tree.children;\n const { layout, image } = frontmatter;\n if (image) {\n const img = h('div', {\n class: 'flex grow shrink-0 bg-cover bg-center bg-no-repeat',\n style: {\n backgroundImage: `url(${image})`,\n },\n });\n\n switch (layout) {\n case 'fullscreen': {\n content = img;\n break;\n }\n\n case 'columns': {\n content = h('div', { class: 'flex grow grid grid-cols-2' }, [\n h('div', { class: theme.padding }, [content]),\n img,\n ]);\n break;\n }\n\n case 'rows': {\n content = h('div', { class: 'flex grow flex-col' }, [\n h('div', { class: theme.padding }, [content]),\n h('div', { class: ['flex grow pt-0', theme.padding] }, [img]),\n ]);\n break;\n }\n }\n } else {\n content = h('div', { class: ['flex grow flex-col', theme.padding] }, [content]);\n }\n\n const root = h('div', { class: ['flex flex-col grow', theme.root] }, [content]);\n tree.children = [root];\n };\n\nconst ImageWrapper = ({ node: _, ...props }: { node: any }) => {\n const { alt = '', src } = props as { alt: string; src: string };\n return <img alt={alt} src={src} />;\n};\n\nconst components: ReactMarkdownOptions['components'] = {\n img: ({ node, ...props }) => <ImageWrapper node={node} {...props} />,\n};\n", "/*!\n Theme: GitHub Dark\n Description: Dark theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n Outdated base version: https://github.com/primer/github-syntax-dark\n Current colors taken from GitHub's CSS\n*/\n/* TODO(burdon): Use tokens. */\n.dark pre code.hljs {\n display: block;\n overflow-x: auto;\n padding: 1em;\n}\n.dark code.hljs {\n padding: 3px 5px;\n}\n.dark .hljs {\n color: #c9d1d9;\n background: #0d1117;\n}\n.dark .hljs-doctag,\n.dark .hljs-keyword,\n.dark .hljs-meta .hljs-keyword,\n.dark .hljs-template-tag,\n.dark .hljs-template-variable,\n.dark .hljs-type,\n.dark .hljs-variable.language_ {\n color: #ff7b72;\n}\n.dark .hljs-title,\n.dark .hljs-title.class_,\n.dark .hljs-title.class_.inherited__,\n.dark .hljs-title.function_ {\n color: #d2a8ff;\n}\n.dark .hljs-attr,\n.dark .hljs-attribute,\n.dark .hljs-literal,\n.dark .hljs-meta,\n.dark .hljs-number,\n.dark .hljs-operator,\n.dark .hljs-variable,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-class,\n.dark .hljs-selector-id {\n color: #79c0ff;\n}\n.dark .hljs-regexp,\n.dark .hljs-string,\n.dark .hljs-meta .hljs-string {\n color: #a5d6ff;\n}\n.dark .hljs-built_in,\n.dark .hljs-symbol {\n color: #ffa657;\n}\n.dark .hljs-comment,\n.dark .hljs-code,\n.dark .hljs-formula {\n color: #8b949e;\n}\n.dark .hljs-name,\n.dark .hljs-quote,\n.dark .hljs-selector-tag,\n.dark .hljs-selector-pseudo {\n color: #7ee787;\n}\n.dark .hljs-subst {\n color: #c9d1d9;\n}\n.dark .hljs-section {\n color: #1f6feb;\n font-weight: bold;\n}\n.dark .hljs-bullet {\n color: #f2cc60;\n}\n.dark .hljs-emphasis {\n color: #c9d1d9;\n font-style: italic;\n}\n.dark .hljs-strong {\n color: #c9d1d9;\n font-weight: bold;\n}\n.dark .hljs-addition {\n color: #aff5b4;\n background-color: #033a16;\n}\n.dark .hljs-deletion {\n color: #ffdcd7;\n background-color: #67060c;\n}\n.dark .hljs-char.escape_,\n.dark .hljs-link,\n.dark .hljs-params,\n.dark .hljs-property,\n.dark .hljs-punctuation,\n.dark .hljs-tag {\n /* purposely ignored */\n all: unset;\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// TODO(burdon): Create theme type and picker.\n\nexport const theme = {\n root: 'bg-attention-surface leading-relaxed font-mono',\n\n padding: 'px-40 py-16 gap-8',\n\n nodes: {\n h1: 'text-[80px] text-accent-text',\n h2: 'text-[60px] text-accent-text',\n h3: 'text-[48px] text-accent-text',\n\n p: 'text-[48px]',\n\n ul: 'my-[16px] ml-12 leading-relaxed list-disc',\n ol: 'my-[16px] ml-24 leading-relaxed list-decimal',\n li: 'pl-6 text-[48px]',\n\n pre: 'w-full mx-0 my-[32px] p-4 bg-input-surface',\n code: 'p-0 text-[40px]',\n },\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nexport type LayoutProps = PropsWithChildren<{\n topLeft?: ReactNode;\n topRight?: ReactNode;\n bottomLeft?: ReactNode;\n bottomRight?: ReactNode;\n}>;\n\nexport const Layout = composable<HTMLDivElement, LayoutProps>(\n ({ children, topLeft, topRight, bottomLeft, bottomRight, ...props }, forwardedRef) => {\n return (\n <div\n {...composableProps(props, { classNames: 'flex grow relative overflow-hidden bg-attention-surface' })}\n ref={forwardedRef}\n >\n <div className='flex flex-col grow overflow-hidden'>{children}</div>\n\n <div className='z-[200]'>\n <div className='absolute top-4 left-4'>{topLeft}</div>\n <div className='absolute top-4 right-4'>{topRight}</div>\n <div className='absolute bottom-4 left-4'>{bottomLeft}</div>\n <div className='absolute bottom-4 right-4'>{bottomRight}</div>\n </div>\n </div>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useEffect } from 'react';\n\nimport { IconButton, useControlledState } from '@dxos/react-ui';\n\nexport type PagerProps = {\n index?: number;\n count?: number;\n keys?: boolean; // TODO(burdon): Rename.\n onChange?: (index: number) => void;\n onExit?: () => void;\n};\n\nexport const Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n const [index, setIndex] = useControlledState(indexProp);\n useEffect(() => {\n onChange?.(index);\n }, [index]);\n\n const handleChangeIndex = (dir: number) => {\n setIndex((index) => {\n const next = index + dir;\n return next >= 0 && next < count ? next : index;\n });\n };\n\n // TODO(burdon): Standardize via system key binding.\n useEffect(() => {\n if (!keys) {\n return;\n }\n\n const keydownHandler = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'Escape': {\n onExit?.();\n break;\n }\n case 'ArrowLeft': {\n if (event.shiftKey) {\n onChange?.(0);\n } else {\n handleChangeIndex(-1);\n }\n break;\n }\n case 'ArrowRight': {\n if (event.shiftKey) {\n onChange?.(count - 1);\n } else {\n handleChangeIndex(1);\n }\n break;\n }\n case 'ArrowUp': {\n onChange?.(0);\n break;\n }\n case 'ArrowDown': {\n onChange?.(count - 1);\n break;\n }\n }\n };\n\n window.addEventListener('keydown', keydownHandler);\n return () => window.removeEventListener('keydown', keydownHandler);\n }, [keys, count]);\n\n if (index === undefined || !count) {\n return null;\n }\n\n return (\n <div className='flex items-center text-neutral-500'>\n <IconButton\n icon='ph--caret-double-left--regular'\n size={6}\n label='Jump to first'\n iconOnly\n noTooltip\n variant='ghost'\n classNames='p-0'\n onClick={() => onChange?.(0)}\n />\n <IconButton\n icon='ph--caret-left--regular'\n size={6}\n label='Previous'\n iconOnly\n noTooltip\n variant='ghost'\n classNames='p-0'\n onClick={() => handleChangeIndex(-1)}\n />\n <IconButton\n icon='ph--caret-right--regular'\n size={6}\n label='Next'\n iconOnly\n noTooltip\n variant='ghost'\n classNames='p-0'\n onClick={() => handleChangeIndex(1)}\n />\n <IconButton\n icon='ph--caret-double-right--regular'\n size={6}\n label='Jump to last'\n iconOnly\n noTooltip\n variant='ghost'\n classNames='p-0'\n onClick={() => onChange?.(count - 1)}\n />\n </div>\n );\n};\n\nexport type PageNumberProps = {\n index?: number;\n count?: number;\n};\n\nexport const PageNumber = ({ index = 0, count = 1 }: PageNumberProps) => {\n if (index === undefined || !count) {\n return null;\n }\n\n return (\n <div className='flex items-center text-neutral-500 text-2xl'>\n <div>\n {index + 1} / {count}\n </div>\n </div>\n );\n};\n\nexport const StartButton = ({ running, onClick }: { running?: boolean; onClick?: (start: boolean) => void }) => {\n return (\n <IconButton\n icon={running ? 'ph--x--regular' : 'ph--play--regular'}\n size={6}\n label={running ? 'Stop' : 'Play'}\n iconOnly\n noTooltip\n variant='ghost'\n classNames='p-0'\n onClick={() => onClick?.(!running)}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport 'reveal.js/dist/reveal.css';\nimport 'reveal.js/dist/theme/black.css';\n// https://github.com/highlightjs/highlight.js/tree/main/src/styles\n// import 'highlight.js/styles/github-dark.css';\nimport 'highlight.js/styles/tokyo-night-dark.css';\n\nimport hljs from 'highlight.js';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport React, { useRef } from 'react';\nimport Reveal from 'reveal.js';\nimport RevealHighlight from 'reveal.js/plugin/highlight/highlight';\nimport RevealMarkdown from 'reveal.js/plugin/markdown/plugin.js';\n\nimport { useAsyncEffect } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst styles = `\n<style type=\"text/css\">\n .reveal h1 {\n font-weight: 100;\n font-size: 60px;\n opacity: 0.5;\n }\n .reveal h2 {\n font-weight: 100;\n padding-top: 60px;\n padding-left: 40px;\n font-size: 48px;\n opacity: 0.3;\n }\n .reveal h1, h2, p {\n font-family: \"Raleway\", sans-serif;\n text-align: left;\n font-weight: 200;\n }\n .reveal ul {\n font-family: \"Raleway\", sans-serif;\n display: block;\n list-style: \"- \";\n }\n .reveal blockquote p {\n text-align: center;\n font-weight: 100;\n padding: 32px;\n }\n .reveal pre {\n margin-left: 0;\n }\n .reveal code {\n font-size: 20px;\n background: #111111;\n color: #eeeeee;\n max-height: unset !important;\n }\n</style>\n`;\n\nexport type RevealProps = {\n content: string;\n slide?: number;\n fullscreen?: boolean;\n onExit?: () => void;\n};\n\nexport const RevealPlayer = composable<HTMLDivElement, RevealProps>(\n ({ content, slide, fullscreen = true, onExit, children, ...props }, forwardedRef) => {\n const deckDivRef = useRef<HTMLDivElement>(null);\n const deckRef = useRef<Reveal.Api | null>(null);\n\n useAsyncEffect(async () => {\n if (deckRef.current) {\n return;\n }\n\n // Required for syntax highlighting.\n hljs.registerLanguage('typescript', typescript);\n\n // https://revealjs.com/react\n // https://revealjs.com/config\n // https://github.com/hakimel/reveal.js\n // TODO(burdon): Fragments and scroll view steps 2 at a time (safe mode?)\n deckRef.current = new Reveal(deckDivRef.current!, {\n // view: 'scroll',\n progress: false,\n transition: 'none',\n slideNumber: false,\n embedded: true,\n\n // Disable autoplay to prevent errors in headless environments (e.g., CI).\n autoPlayMedia: false,\n\n // TODO(burdon): Speaker view requires server to serve popout window.\n // https://revealjs.com/speaker-view\n showNotes: false,\n\n // width: 1600,\n // height: 900,\n margin: 0.1,\n // center: false,\n // minScale: 0.1,\n // maxScale: 1.4,\n\n // https://revealjs.com/markdown\n // TODO(burdon): Requires server to serve popout window.\n plugins: [RevealMarkdown, RevealHighlight],\n\n // See https://marked.js.org/using_advanced#options\n markdown: {\n gfm: true,\n smartypants: true,\n highlight: (code, language) => {\n if (language) {\n return hljs.highlight(code, { language }).value;\n }\n\n return hljs.highlightAuto(code).value;\n },\n },\n });\n\n await deckRef.current.initialize();\n\n if (slide !== undefined) {\n deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);\n }\n\n deckRef.current.addKeyBinding({ keyCode: 27, key: 'Escape', description: 'Exit full screen' }, () => {\n onExit?.();\n });\n\n return () => {\n try {\n if (deckRef.current) {\n deckRef.current.destroy();\n deckRef.current = null;\n }\n } catch {\n // Ignore.\n }\n };\n });\n\n // TOOD(burdon): Trap cursor keys (otherwise tabster grabs focus.)\n return (\n <div\n {...composableProps(props, {\n classNames: ['dx-container grid place-items-center bg-black', fullscreen && 'absolute inset-0'],\n })}\n ref={forwardedRef}\n >\n <div role='none' className='relative aspect-video h-full w-full h-auto max-h-full overflow-hidden'>\n <div ref={deckDivRef} className='absolute inset-0 reveal'>\n {/* NOTE: Must be in head. */}\n <style>\n <link rel='preconnect' href='https://fonts.googleapis.com' />\n <link rel='preconnect' href='https://fonts.gstatic.com' {...{ crossOrigin: '' }} />\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'\n />\n </style>\n <div className='slides'>\n <div className='text-center!' />\n <section {...{ 'data-markdown': [] }}>\n <textarea {...{ 'data-template': true }} defaultValue={[styles, content].join('\\n')}></textarea>\n </section>\n </div>\n </div>\n </div>\n </div>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n id: 'org.dxos.plugin.presenter',\n name: 'Presenter',\n description: trim`\n Transform markdown documents into interactive presentation slideshows.\n Navigate between slides with keyboard controls and present content in full-screen mode.\n `,\n icon: 'ph--presentation--regular',\n iconHue: 'indigo',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter',\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { AppPlugin } from '@dxos/app-toolkit';\n\nimport { AppGraphBuilder, PresenterSettings, ReactSurface } from '#capabilities';\nimport { meta } from '#meta';\n\nimport { translations } from './translations';\n\n// TODO(burdon): Only scale markdown content.\n// TODO(burdon): Map stack content; Slide content type (e.g., markdown, sketch, IPFS image, table, etc.)\n\nexport const PresenterPlugin = Plugin.define(meta).pipe(\n AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),\n AppPlugin.addSettingsModule({ activate: PresenterSettings }),\n AppPlugin.addSurfaceModule({ activate: ReactSurface }),\n AppPlugin.addTranslationsModule({ translations }),\n Plugin.make,\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nexport const translations = [\n {\n 'en-US': {\n [meta.id]: {\n 'plugin.name': 'Presenter',\n 'settings.title': 'Presenter settings',\n 'toggle-presentation.label': 'Present',\n 'present-collections.label': 'Present collections (experimental)',\n 'present-collections.description': 'Enable presenting collections of documents as a slideshow.',\n },\n },\n },\n] as const satisfies Resource[];\n"],
|
|
5
|
-
"mappings": ";;;AAIA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/meta.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\nexport * from './meta';\n\nexport const PresenterPlugin = Plugin.lazy(meta, () => import('#plugin'));\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n id: 'org.dxos.plugin.presenter',\n name: 'Presenter',\n description: trim`\n Transform markdown documents into interactive presentation slideshows.\n Navigate between slides with keyboard controls and present content in full-screen mode.\n `,\n icon: 'ph--presentation--regular',\n iconHue: 'indigo',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter',\n};\n"],
|
|
5
|
+
"mappings": ";;;AAIA,SAASA,cAAc;;;ACCvB,SAASC,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaJ;;;;EAIbK,MAAM;EACNC,SAAS;EACTC,QAAQ;AACV;;;ADPO,IAAMC,kBAAkBC,OAAOC,KAAKC,MAAM,MAAM,OAAO,SAAA,CAAA;",
|
|
6
|
+
"names": ["Plugin", "trim", "meta", "id", "name", "description", "icon", "iconHue", "source", "PresenterPlugin", "Plugin", "lazy", "meta"]
|
|
7
7
|
}
|