@dxos/plugin-presenter 0.8.4-main.ae835ea → 0.8.4-main.bcb3aa67d6
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/PresenterSettings-DSPIGNOL.mjs +32 -0
- package/dist/lib/browser/PresenterSettings-DSPIGNOL.mjs.map +7 -0
- package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
- package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +533 -46
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/operations/index.mjs +30 -0
- package/dist/lib/browser/operations/index.mjs.map +7 -0
- package/dist/types/src/PresenterPlugin.d.ts +2 -1
- package/dist/types/src/PresenterPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts +4 -2
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +8 -3
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +3 -2
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/capabilities/settings.d.ts +8 -2
- package/dist/types/src/capabilities/settings.d.ts.map +1 -1
- package/dist/types/src/components/Markdown/Panel.d.ts +8 -0
- package/dist/types/src/components/Markdown/Panel.d.ts.map +1 -0
- package/dist/types/src/components/Markdown/{Container.stories.d.ts → Panel.stories.d.ts} +1 -1
- package/dist/types/src/components/Markdown/Panel.stories.d.ts.map +1 -0
- package/dist/types/src/components/Markdown/index.d.ts +1 -1
- package/dist/types/src/components/Markdown/index.d.ts.map +1 -1
- package/dist/types/src/components/Presenter/Layout.d.ts +9 -5
- package/dist/types/src/components/Presenter/Layout.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/PresenterSettings/PresenterSettings.d.ts +6 -0
- package/dist/types/src/components/PresenterSettings/PresenterSettings.d.ts.map +1 -0
- package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts +25 -0
- package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts.map +1 -0
- package/dist/types/src/components/PresenterSettings/index.d.ts +3 -0
- package/dist/types/src/components/PresenterSettings/index.d.ts.map +1 -0
- package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts +9 -4
- package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts.map +1 -1
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts +12 -5
- package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +5 -27
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts +7 -0
- package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts.map +1 -0
- package/dist/types/src/containers/CollectionPresenterContainer/index.d.ts +3 -0
- package/dist/types/src/containers/CollectionPresenterContainer/index.d.ts.map +1 -0
- package/dist/types/src/{components/MarkdownSlide.d.ts → containers/DocumentPresenterContainer/DocumentPresenterContainer.d.ts} +2 -3
- package/dist/types/src/containers/DocumentPresenterContainer/DocumentPresenterContainer.d.ts.map +1 -0
- package/dist/types/src/containers/DocumentPresenterContainer/index.d.ts +3 -0
- package/dist/types/src/containers/DocumentPresenterContainer/index.d.ts.map +1 -0
- package/dist/types/src/containers/MarkdownSlide/MarkdownSlide.d.ts +8 -0
- package/dist/types/src/containers/MarkdownSlide/MarkdownSlide.d.ts.map +1 -0
- package/dist/types/src/containers/MarkdownSlide/index.d.ts +3 -0
- package/dist/types/src/containers/MarkdownSlide/index.d.ts.map +1 -0
- package/dist/types/src/containers/index.d.ts +5 -0
- package/dist/types/src/containers/index.d.ts.map +1 -0
- package/dist/types/src/meta.d.ts +2 -2
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/operations/definitions.d.ts +17 -0
- package/dist/types/src/operations/definitions.d.ts.map +1 -0
- package/dist/types/src/operations/index.d.ts +2 -0
- package/dist/types/src/operations/index.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +6 -5
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/Settings.d.ts +6 -0
- package/dist/types/src/types/Settings.d.ts.map +1 -0
- package/dist/types/src/types/index.d.ts +18 -0
- package/dist/types/src/types/index.d.ts.map +1 -0
- package/dist/types/src/useExitPresenter.d.ts +3 -4
- package/dist/types/src/useExitPresenter.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +62 -40
- package/src/PresenterPlugin.tsx +12 -25
- package/src/capabilities/app-graph-builder.ts +91 -100
- package/src/capabilities/index.ts +4 -4
- package/src/capabilities/react-surface.tsx +57 -53
- package/src/capabilities/settings.ts +24 -12
- package/src/components/Markdown/{Container.stories.tsx → Panel.stories.tsx} +7 -7
- package/src/components/Markdown/{Container.tsx → Panel.tsx} +6 -6
- package/src/components/Markdown/Slide.stories.tsx +4 -4
- package/src/components/Markdown/index.ts +1 -1
- package/src/components/Markdown/theme.ts +5 -5
- package/src/components/Presenter/Layout.tsx +24 -23
- package/src/components/Presenter/Pager.stories.tsx +2 -2
- package/src/components/Presenter/Pager.tsx +53 -18
- package/src/components/PresenterSettings/PresenterSettings.stories.tsx +32 -0
- package/src/components/PresenterSettings/PresenterSettings.tsx +32 -0
- package/src/components/PresenterSettings/index.ts +7 -0
- package/src/components/RevealPlayer/RevealPlayer.stories.tsx +3 -3
- package/src/components/RevealPlayer/RevealPlayer.tsx +104 -93
- package/src/components/index.ts +5 -5
- package/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.tsx +43 -0
- package/src/containers/CollectionPresenterContainer/index.ts +7 -0
- package/src/containers/DocumentPresenterContainer/DocumentPresenterContainer.tsx +23 -0
- package/src/containers/DocumentPresenterContainer/index.ts +7 -0
- package/src/{components → containers/MarkdownSlide}/MarkdownSlide.tsx +9 -7
- package/src/containers/MarkdownSlide/index.ts +7 -0
- package/src/containers/index.ts +9 -0
- package/src/meta.ts +3 -3
- package/src/operations/definitions.ts +23 -0
- package/src/operations/index.ts +5 -0
- package/src/translations.ts +6 -5
- package/src/types/Settings.ts +15 -0
- package/src/types/index.ts +30 -0
- package/src/useExitPresenter.ts +26 -24
- package/dist/lib/browser/CollectionPresenterContainer-ASH2TGJR.mjs +0 -191
- package/dist/lib/browser/CollectionPresenterContainer-ASH2TGJR.mjs.map +0 -7
- package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs +0 -183
- package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs.map +0 -7
- package/dist/lib/browser/MarkdownSlide-BLVWTH3U.mjs +0 -223
- package/dist/lib/browser/MarkdownSlide-BLVWTH3U.mjs.map +0 -7
- package/dist/lib/browser/app-graph-builder-UGCZOBA6.mjs +0 -106
- package/dist/lib/browser/app-graph-builder-UGCZOBA6.mjs.map +0 -7
- package/dist/lib/browser/chunk-EOT6RIHJ.mjs +0 -39
- package/dist/lib/browser/chunk-EOT6RIHJ.mjs.map +0 -7
- package/dist/lib/browser/chunk-TMTUZQCK.mjs +0 -18
- package/dist/lib/browser/chunk-TMTUZQCK.mjs.map +0 -7
- package/dist/lib/browser/chunk-UVGTHJUO.mjs +0 -36
- package/dist/lib/browser/chunk-UVGTHJUO.mjs.map +0 -7
- package/dist/lib/browser/chunk-WWKBVJB3.mjs +0 -41
- package/dist/lib/browser/chunk-WWKBVJB3.mjs.map +0 -7
- package/dist/lib/browser/react-surface-UIAHN2NJ.mjs +0 -57
- package/dist/lib/browser/react-surface-UIAHN2NJ.mjs.map +0 -7
- package/dist/lib/browser/settings-RZWQTJI2.mjs +0 -22
- package/dist/lib/browser/settings-RZWQTJI2.mjs.map +0 -7
- package/dist/types/src/components/CollectionPresenterContainer.d.ts +0 -7
- package/dist/types/src/components/CollectionPresenterContainer.d.ts.map +0 -1
- package/dist/types/src/components/DocumentPresenterContainer.d.ts +0 -7
- package/dist/types/src/components/DocumentPresenterContainer.d.ts.map +0 -1
- package/dist/types/src/components/Markdown/Container.d.ts +0 -8
- package/dist/types/src/components/Markdown/Container.d.ts.map +0 -1
- package/dist/types/src/components/Markdown/Container.stories.d.ts.map +0 -1
- package/dist/types/src/components/MarkdownSlide.d.ts.map +0 -1
- package/dist/types/src/components/PresenterSettings.d.ts +0 -6
- package/dist/types/src/components/PresenterSettings.d.ts.map +0 -1
- package/dist/types/src/types.d.ts +0 -40
- package/dist/types/src/types.d.ts.map +0 -1
- package/src/components/CollectionPresenterContainer.tsx +0 -44
- package/src/components/DocumentPresenterContainer.tsx +0 -23
- package/src/components/PresenterSettings.tsx +0 -30
- package/src/types.ts +0 -46
|
@@ -2,23 +2,25 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React
|
|
5
|
+
import React from 'react';
|
|
6
6
|
|
|
7
7
|
import { type Markdown } from '@dxos/plugin-markdown/types';
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { Panel, Slide } from '#components';
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
type MarkdownSlideProps = {
|
|
12
|
+
document: Markdown.Document;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const MarkdownSlide = ({ document }: MarkdownSlideProps) => {
|
|
12
16
|
const content = document.content.target?.content;
|
|
13
17
|
if (!content) {
|
|
14
18
|
return null;
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
return (
|
|
18
|
-
<
|
|
22
|
+
<Panel>
|
|
19
23
|
<Slide content={content} />
|
|
20
|
-
</
|
|
24
|
+
</Panel>
|
|
21
25
|
);
|
|
22
26
|
};
|
|
23
|
-
|
|
24
|
-
export default MarkdownSlide;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type ComponentType, lazy } from 'react';
|
|
6
|
+
|
|
7
|
+
export const CollectionPresenterContainer: ComponentType<any> = lazy(() => import('./CollectionPresenterContainer'));
|
|
8
|
+
export const DocumentPresenterContainer: ComponentType<any> = lazy(() => import('./DocumentPresenterContainer'));
|
|
9
|
+
export const MarkdownSlide: ComponentType<any> = lazy(() => import('./MarkdownSlide'));
|
package/src/meta.ts
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { type
|
|
5
|
+
import { type Plugin } from '@dxos/app-framework';
|
|
6
6
|
import { trim } from '@dxos/util';
|
|
7
7
|
|
|
8
|
-
export const meta:
|
|
9
|
-
id: 'dxos.
|
|
8
|
+
export const meta: Plugin.Meta = {
|
|
9
|
+
id: 'org.dxos.plugin.presenter',
|
|
10
10
|
name: 'Presenter',
|
|
11
11
|
description: trim`
|
|
12
12
|
Transform markdown documents into interactive presentation slideshows.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Schema from 'effect/Schema';
|
|
6
|
+
|
|
7
|
+
import { Collection } from '@dxos/echo';
|
|
8
|
+
import { Operation } from '@dxos/operation';
|
|
9
|
+
import { Markdown } from '@dxos/plugin-markdown/types';
|
|
10
|
+
|
|
11
|
+
import { meta } from '#meta';
|
|
12
|
+
|
|
13
|
+
const PRESENTER_OPERATION = `${meta.id}.operation`;
|
|
14
|
+
|
|
15
|
+
// TODO(wittjosiah): This appears to be unused.
|
|
16
|
+
export const TogglePresentation = Operation.make({
|
|
17
|
+
meta: { key: `${PRESENTER_OPERATION}.toggle-presentation`, name: 'Toggle Presentation' },
|
|
18
|
+
input: Schema.Struct({
|
|
19
|
+
object: Schema.Union(Markdown.Document, Collection.Collection),
|
|
20
|
+
state: Schema.optional(Schema.Boolean),
|
|
21
|
+
}),
|
|
22
|
+
output: Schema.Void,
|
|
23
|
+
});
|
package/src/translations.ts
CHANGED
|
@@ -4,16 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
import { type Resource } from '@dxos/react-ui';
|
|
6
6
|
|
|
7
|
-
import { meta } from '
|
|
7
|
+
import { meta } from '#meta';
|
|
8
8
|
|
|
9
9
|
export const translations = [
|
|
10
10
|
{
|
|
11
11
|
'en-US': {
|
|
12
12
|
[meta.id]: {
|
|
13
|
-
'plugin
|
|
14
|
-
'settings
|
|
15
|
-
'toggle
|
|
16
|
-
'present
|
|
13
|
+
'plugin.name': 'Presenter',
|
|
14
|
+
'settings.title': 'Presenter settings',
|
|
15
|
+
'toggle-presentation.label': 'Present',
|
|
16
|
+
'present-collections.label': 'Present collections (experimental)',
|
|
17
|
+
'present-collections.description': 'Enable presenting collections of documents as a slideshow.',
|
|
17
18
|
},
|
|
18
19
|
},
|
|
19
20
|
},
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
// @import-as-namespace
|
|
6
|
+
|
|
7
|
+
import * as Schema from 'effect/Schema';
|
|
8
|
+
|
|
9
|
+
export const Settings = Schema.mutable(
|
|
10
|
+
Schema.Struct({
|
|
11
|
+
presentCollections: Schema.optional(Schema.Boolean),
|
|
12
|
+
}),
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
export type Settings = Schema.Schema.Type<typeof Settings>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type Atom } from '@effect-atom/atom-react';
|
|
6
|
+
import { type Context, createContext } from 'react';
|
|
7
|
+
|
|
8
|
+
import { Capability } from '@dxos/app-framework';
|
|
9
|
+
|
|
10
|
+
import { meta } from '#meta';
|
|
11
|
+
|
|
12
|
+
import * as Settings from './Settings';
|
|
13
|
+
|
|
14
|
+
export type PresenterContextType = {
|
|
15
|
+
running: boolean;
|
|
16
|
+
start: () => void;
|
|
17
|
+
stop: () => void;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const PresenterContext: Context<PresenterContextType> = createContext<PresenterContextType>({
|
|
21
|
+
running: false,
|
|
22
|
+
start: () => {},
|
|
23
|
+
stop: () => {},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export * as Settings from './Settings';
|
|
27
|
+
|
|
28
|
+
export namespace PresenterCapabilities {
|
|
29
|
+
export const Settings = Capability.make<Atom.Writable<Settings.Settings>>(`${meta.id}.capability.settings`);
|
|
30
|
+
}
|
package/src/useExitPresenter.ts
CHANGED
|
@@ -2,34 +2,36 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { useAtomValue } from '@effect-atom/atom-react';
|
|
6
|
+
import { useCallback, useMemo } from 'react';
|
|
6
7
|
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
8
|
+
import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
|
|
9
|
+
import { LayoutOperation, getObjectPathFromObject, getSpacePath } from '@dxos/app-toolkit';
|
|
10
|
+
import { Obj } from '@dxos/echo';
|
|
9
11
|
import { DeckCapabilities } from '@dxos/plugin-deck';
|
|
10
|
-
import {
|
|
11
|
-
import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
|
|
12
|
+
import { DeckOperation } from '@dxos/plugin-deck/operations';
|
|
12
13
|
|
|
13
|
-
export const useExitPresenter = (object:
|
|
14
|
-
const {
|
|
15
|
-
const
|
|
14
|
+
export const useExitPresenter = (object: any) => {
|
|
15
|
+
const { invokePromise } = useOperationInvoker();
|
|
16
|
+
const stateAtom = useCapability(DeckCapabilities.State);
|
|
17
|
+
const state = useAtomValue(stateAtom);
|
|
18
|
+
|
|
19
|
+
// Compute deck from decks[activeDeck] since the getter doesn't survive spread operations.
|
|
20
|
+
const deck = useMemo(() => state.decks[state.activeDeck], [state.decks, state.activeDeck]);
|
|
16
21
|
|
|
17
22
|
return useCallback(() => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
);
|
|
23
|
+
const objectPath = getObjectPathFromObject(object);
|
|
24
|
+
const db = Obj.getDatabase(object);
|
|
25
|
+
if (deck?.fullscreen) {
|
|
26
|
+
void invokePromise(DeckOperation.Adjust, {
|
|
27
|
+
type: 'solo--fullscreen' as const,
|
|
28
|
+
id: objectPath,
|
|
29
|
+
});
|
|
26
30
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
);
|
|
34
|
-
}, [dispatch, object]);
|
|
31
|
+
|
|
32
|
+
return invokePromise(LayoutOperation.Open, {
|
|
33
|
+
subject: [objectPath],
|
|
34
|
+
workspace: db ? getSpacePath(db.spaceId) : undefined,
|
|
35
|
+
});
|
|
36
|
+
}, [invokePromise, object, deck]);
|
|
35
37
|
};
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useExitPresenter
|
|
3
|
-
} from "./chunk-UVGTHJUO.mjs";
|
|
4
|
-
import {
|
|
5
|
-
PresenterContext
|
|
6
|
-
} from "./chunk-EOT6RIHJ.mjs";
|
|
7
|
-
import "./chunk-TMTUZQCK.mjs";
|
|
8
|
-
|
|
9
|
-
// src/components/CollectionPresenterContainer.tsx
|
|
10
|
-
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
11
|
-
import React3, { useContext, useState } from "react";
|
|
12
|
-
import { Surface } from "@dxos/app-framework";
|
|
13
|
-
import { StackItem } from "@dxos/react-ui-stack";
|
|
14
|
-
|
|
15
|
-
// src/components/Presenter/Layout.tsx
|
|
16
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
17
|
-
import React from "react";
|
|
18
|
-
import { mx } from "@dxos/react-ui-theme";
|
|
19
|
-
var Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }) => {
|
|
20
|
-
var _effect = _useSignals();
|
|
21
|
-
try {
|
|
22
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
23
|
-
className: mx("flex grow relative overflow-hidden bg-attention", classNames)
|
|
24
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
25
|
-
className: mx("flex flex-col grow overflow-hidden")
|
|
26
|
-
}, children), /* @__PURE__ */ React.createElement("div", {
|
|
27
|
-
className: "z-[200]"
|
|
28
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
29
|
-
className: "absolute top-4 left-4"
|
|
30
|
-
}, topLeft), /* @__PURE__ */ React.createElement("div", {
|
|
31
|
-
className: "absolute top-4 right-4"
|
|
32
|
-
}, topRight), /* @__PURE__ */ React.createElement("div", {
|
|
33
|
-
className: "absolute bottom-4 left-4"
|
|
34
|
-
}, bottomLeft), /* @__PURE__ */ React.createElement("div", {
|
|
35
|
-
className: "absolute bottom-4 right-4"
|
|
36
|
-
}, bottomRight)));
|
|
37
|
-
} finally {
|
|
38
|
-
_effect.f();
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
// src/components/Presenter/Pager.tsx
|
|
43
|
-
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
44
|
-
import React2, { useEffect } from "react";
|
|
45
|
-
import { Button, Icon, useControlledState } from "@dxos/react-ui";
|
|
46
|
-
var Pager = ({ index: indexParam = 0, count = 0, keys, onChange, onExit }) => {
|
|
47
|
-
var _effect = _useSignals2();
|
|
48
|
-
try {
|
|
49
|
-
const [index, setIndex] = useControlledState(indexParam);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
onChange?.(index);
|
|
52
|
-
}, [
|
|
53
|
-
index
|
|
54
|
-
]);
|
|
55
|
-
const handleChangeIndex = (dir) => {
|
|
56
|
-
setIndex((index2) => {
|
|
57
|
-
const next = index2 + dir;
|
|
58
|
-
return next >= 0 && next < count ? next : index2;
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
if (!keys) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const keydownHandler = (event) => {
|
|
66
|
-
switch (event.key) {
|
|
67
|
-
case "Escape": {
|
|
68
|
-
onExit?.();
|
|
69
|
-
break;
|
|
70
|
-
}
|
|
71
|
-
case "ArrowLeft": {
|
|
72
|
-
if (event.shiftKey) {
|
|
73
|
-
onChange?.(0);
|
|
74
|
-
} else {
|
|
75
|
-
handleChangeIndex(-1);
|
|
76
|
-
}
|
|
77
|
-
break;
|
|
78
|
-
}
|
|
79
|
-
case "ArrowRight": {
|
|
80
|
-
if (event.shiftKey) {
|
|
81
|
-
onChange?.(count - 1);
|
|
82
|
-
} else {
|
|
83
|
-
handleChangeIndex(1);
|
|
84
|
-
}
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
case "ArrowUp": {
|
|
88
|
-
onChange?.(0);
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
case "ArrowDown": {
|
|
92
|
-
onChange?.(count - 1);
|
|
93
|
-
break;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
window.addEventListener("keydown", keydownHandler);
|
|
98
|
-
return () => window.removeEventListener("keydown", keydownHandler);
|
|
99
|
-
}, [
|
|
100
|
-
keys,
|
|
101
|
-
count
|
|
102
|
-
]);
|
|
103
|
-
if (index === void 0 || !count) {
|
|
104
|
-
return null;
|
|
105
|
-
}
|
|
106
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
107
|
-
className: "flex items-center text-neutral-500"
|
|
108
|
-
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
109
|
-
variant: "ghost",
|
|
110
|
-
classNames: "p-0",
|
|
111
|
-
onClick: () => onChange?.(0)
|
|
112
|
-
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
113
|
-
icon: "ph--caret-double-left--regular",
|
|
114
|
-
size: 6
|
|
115
|
-
})), /* @__PURE__ */ React2.createElement(Button, {
|
|
116
|
-
variant: "ghost",
|
|
117
|
-
classNames: "p-0",
|
|
118
|
-
onClick: () => handleChangeIndex(-1)
|
|
119
|
-
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
120
|
-
icon: "ph--caret-left--regular",
|
|
121
|
-
size: 6
|
|
122
|
-
})), /* @__PURE__ */ React2.createElement(Button, {
|
|
123
|
-
variant: "ghost",
|
|
124
|
-
classNames: "p-0",
|
|
125
|
-
onClick: () => handleChangeIndex(1)
|
|
126
|
-
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
127
|
-
icon: "ph--caret-right--regular",
|
|
128
|
-
size: 6
|
|
129
|
-
})), /* @__PURE__ */ React2.createElement(Button, {
|
|
130
|
-
variant: "ghost",
|
|
131
|
-
classNames: "p-0",
|
|
132
|
-
onClick: () => onChange?.(count - 1)
|
|
133
|
-
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
134
|
-
icon: "ph--caret-double-right--regular",
|
|
135
|
-
size: 6
|
|
136
|
-
})));
|
|
137
|
-
} finally {
|
|
138
|
-
_effect.f();
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
var PageNumber = ({ index = 0, count = 1 }) => {
|
|
142
|
-
var _effect = _useSignals2();
|
|
143
|
-
try {
|
|
144
|
-
if (index === void 0 || !count) {
|
|
145
|
-
return null;
|
|
146
|
-
}
|
|
147
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
148
|
-
className: "flex items-center text-neutral-500 text-2xl"
|
|
149
|
-
}, /* @__PURE__ */ React2.createElement("div", null, index + 1, " / ", count));
|
|
150
|
-
} finally {
|
|
151
|
-
_effect.f();
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
// src/components/CollectionPresenterContainer.tsx
|
|
156
|
-
var CollectionPresenterContainer = ({ collection }) => {
|
|
157
|
-
var _effect = _useSignals3();
|
|
158
|
-
try {
|
|
159
|
-
const [slide, setSlide] = useState(0);
|
|
160
|
-
const { running } = useContext(PresenterContext);
|
|
161
|
-
const handleExit = useExitPresenter(collection);
|
|
162
|
-
return /* @__PURE__ */ React3.createElement(StackItem.Content, {
|
|
163
|
-
classNames: "relative"
|
|
164
|
-
}, /* @__PURE__ */ React3.createElement(Layout, {
|
|
165
|
-
bottomRight: /* @__PURE__ */ React3.createElement(PageNumber, {
|
|
166
|
-
index: slide,
|
|
167
|
-
count: collection.objects.length
|
|
168
|
-
}),
|
|
169
|
-
bottomLeft: /* @__PURE__ */ React3.createElement(Pager, {
|
|
170
|
-
index: slide,
|
|
171
|
-
count: collection.objects.length,
|
|
172
|
-
keys: running,
|
|
173
|
-
onChange: setSlide,
|
|
174
|
-
onExit: handleExit
|
|
175
|
-
})
|
|
176
|
-
}, /* @__PURE__ */ React3.createElement(Surface, {
|
|
177
|
-
role: "slide",
|
|
178
|
-
data: {
|
|
179
|
-
subject: collection.objects[slide]
|
|
180
|
-
},
|
|
181
|
-
placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
|
|
182
|
-
})));
|
|
183
|
-
} finally {
|
|
184
|
-
_effect.f();
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
var CollectionPresenterContainer_default = CollectionPresenterContainer;
|
|
188
|
-
export {
|
|
189
|
-
CollectionPresenterContainer_default as default
|
|
190
|
-
};
|
|
191
|
-
//# sourceMappingURL=CollectionPresenterContainer-ASH2TGJR.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/CollectionPresenterContainer.tsx", "../../../src/components/Presenter/Layout.tsx", "../../../src/components/Presenter/Pager.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC, useContext, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { PresenterContext } from '../types';\nimport { useExitPresenter } from '../useExitPresenter';\n\nimport { Layout, PageNumber, Pager } from './Presenter';\n\nconst CollectionPresenterContainer: FC<{ collection: DataType.Collection }> = ({ collection }) => {\n const [slide, setSlide] = useState(0);\n\n const { running } = useContext(PresenterContext);\n\n const handleExit = useExitPresenter(collection);\n\n return (\n <StackItem.Content classNames='relative'>\n <Layout\n bottomRight={<PageNumber index={slide} count={collection.objects.length} />}\n bottomLeft={\n <Pager\n index={slide}\n count={collection.objects.length}\n keys={running}\n onChange={setSlide}\n onExit={handleExit}\n />\n }\n >\n {/* TODO(wittjosiah): Better slide placeholder. */}\n <Surface role='slide' data={{ subject: collection.objects[slide] }} placeholder={<></>} />\n </Layout>\n </StackItem.Content>\n );\n};\n\nexport default CollectionPresenterContainer;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type LayoutProps = ThemedClassName<\n PropsWithChildren<{\n className?: string;\n topLeft?: ReactNode;\n topRight?: ReactNode;\n bottomLeft?: ReactNode;\n bottomRight?: ReactNode;\n }>\n>;\n\nexport const Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }: LayoutProps) => {\n return (\n <div className={mx('flex grow relative overflow-hidden bg-attention', classNames)}>\n <div className={mx('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// Copyright 2023 DXOS.org\n//\n\nimport React, { useEffect } from 'react';\n\nimport { Button, Icon, 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: indexParam = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n const [index, setIndex] = useControlledState(indexParam);\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 <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(0)}>\n <Icon icon='ph--caret-double-left--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(-1)}>\n <Icon icon='ph--caret-left--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(1)}>\n <Icon icon='ph--caret-right--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(count - 1)}>\n <Icon icon='ph--caret-double-right--regular' size={6} />\n </Button>\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 <Button variant='ghost' classNames='p-0' onClick={() => onClick?.(!running)}>\n {(running && <Icon icon='ph--x--regular' size={6} />) || <Icon icon='ph--play--regular' size={6} />}\n </Button>\n );\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "useContext", "useState", "Surface", "StackItem", "React", "mx", "Layout", "children", "classNames", "topLeft", "topRight", "bottomLeft", "bottomRight", "div", "className", "mx", "React", "useEffect", "Button", "Icon", "useControlledState", "Pager", "index", "indexParam", "count", "keys", "onChange", "onExit", "setIndex", "useControlledState", "useEffect", "handleChangeIndex", "dir", "next", "keydownHandler", "event", "key", "shiftKey", "window", "addEventListener", "removeEventListener", "undefined", "React", "div", "className", "Button", "variant", "classNames", "onClick", "Icon", "icon", "size", "PageNumber", "CollectionPresenterContainer", "collection", "slide", "setSlide", "useState", "running", "useContext", "PresenterContext", "handleExit", "useExitPresenter", "React", "StackItem", "Content", "classNames", "Layout", "bottomRight", "PageNumber", "index", "count", "objects", "length", "bottomLeft", "Pager", "keys", "onChange", "onExit", "Surface", "role", "data", "subject", "placeholder"]
|
|
7
|
-
}
|
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useExitPresenter
|
|
3
|
-
} from "./chunk-UVGTHJUO.mjs";
|
|
4
|
-
|
|
5
|
-
// src/components/DocumentPresenterContainer.tsx
|
|
6
|
-
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
7
|
-
import React2 from "react";
|
|
8
|
-
import { StackItem } from "@dxos/react-ui-stack";
|
|
9
|
-
|
|
10
|
-
// src/components/RevealPlayer/RevealPlayer.tsx
|
|
11
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
12
|
-
import "reveal.js/dist/reveal.css";
|
|
13
|
-
import "reveal.js/dist/theme/black.css";
|
|
14
|
-
import "highlight.js/styles/tokyo-night-dark.css";
|
|
15
|
-
import hljs from "highlight.js";
|
|
16
|
-
import typescript from "highlight.js/lib/languages/typescript";
|
|
17
|
-
import React, { useRef } from "react";
|
|
18
|
-
import Reveal from "reveal.js";
|
|
19
|
-
import RevealHighlight from "reveal.js/plugin/highlight/highlight";
|
|
20
|
-
import RevealMarkdown from "reveal.js/plugin/markdown/plugin.js";
|
|
21
|
-
import { useAsyncEffect } from "@dxos/react-ui";
|
|
22
|
-
import { mx } from "@dxos/react-ui-theme";
|
|
23
|
-
var styles = `
|
|
24
|
-
<style type="text/css">
|
|
25
|
-
.reveal h1 {
|
|
26
|
-
font-weight: 100;
|
|
27
|
-
font-size: 60px;
|
|
28
|
-
opacity: 0.5;
|
|
29
|
-
}
|
|
30
|
-
.reveal h2 {
|
|
31
|
-
font-weight: 100;
|
|
32
|
-
padding-top: 60px;
|
|
33
|
-
padding-left: 40px;
|
|
34
|
-
font-size: 48px;
|
|
35
|
-
opacity: 0.3;
|
|
36
|
-
}
|
|
37
|
-
.reveal h1, h2, p {
|
|
38
|
-
font-family: "Raleway", sans-serif;
|
|
39
|
-
text-align: left;
|
|
40
|
-
font-weight: 200;
|
|
41
|
-
}
|
|
42
|
-
.reveal ul {
|
|
43
|
-
font-family: "Raleway", sans-serif;
|
|
44
|
-
display: block;
|
|
45
|
-
list-style: "- ";
|
|
46
|
-
}
|
|
47
|
-
.reveal blockquote p {
|
|
48
|
-
text-align: center;
|
|
49
|
-
font-weight: 100;
|
|
50
|
-
padding: 32px;
|
|
51
|
-
}
|
|
52
|
-
.reveal pre {
|
|
53
|
-
margin-left: 0;
|
|
54
|
-
}
|
|
55
|
-
.reveal code {
|
|
56
|
-
font-size: 20px;
|
|
57
|
-
background: #111111;
|
|
58
|
-
color: #eeeeee;
|
|
59
|
-
max-height: unset !important;
|
|
60
|
-
}
|
|
61
|
-
</style>
|
|
62
|
-
`;
|
|
63
|
-
var RevealPlayer = ({ classNames, content, slide, fullscreen = true, onExit }) => {
|
|
64
|
-
var _effect = _useSignals();
|
|
65
|
-
try {
|
|
66
|
-
const deckDivRef = useRef(null);
|
|
67
|
-
const deckRef = useRef(null);
|
|
68
|
-
useAsyncEffect(async () => {
|
|
69
|
-
if (deckRef.current) {
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
hljs.registerLanguage("typescript", typescript);
|
|
73
|
-
deckRef.current = new Reveal(deckDivRef.current, {
|
|
74
|
-
// view: 'scroll',
|
|
75
|
-
progress: false,
|
|
76
|
-
transition: "none",
|
|
77
|
-
slideNumber: false,
|
|
78
|
-
embedded: true,
|
|
79
|
-
// TODO(burdon): Speaker view requires server to serve popout window.
|
|
80
|
-
// https://revealjs.com/speaker-view
|
|
81
|
-
showNotes: false,
|
|
82
|
-
// width: 1600,
|
|
83
|
-
// height: 900,
|
|
84
|
-
margin: 0.1,
|
|
85
|
-
// center: false,
|
|
86
|
-
// minScale: 0.1,
|
|
87
|
-
// maxScale: 1.4,
|
|
88
|
-
// https://revealjs.com/markdown
|
|
89
|
-
// TODO(burdon): Requires server to serve popout window.
|
|
90
|
-
plugins: [
|
|
91
|
-
RevealMarkdown,
|
|
92
|
-
RevealHighlight
|
|
93
|
-
],
|
|
94
|
-
// See https://marked.js.org/using_advanced#options
|
|
95
|
-
markdown: {
|
|
96
|
-
gfm: true,
|
|
97
|
-
smartypants: true,
|
|
98
|
-
highlight: (code, language) => {
|
|
99
|
-
if (language) {
|
|
100
|
-
return hljs.highlight(code, {
|
|
101
|
-
language
|
|
102
|
-
}).value;
|
|
103
|
-
}
|
|
104
|
-
return hljs.highlightAuto(code).value;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
await deckRef.current.initialize();
|
|
109
|
-
if (slide !== void 0) {
|
|
110
|
-
deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
|
|
111
|
-
}
|
|
112
|
-
deckRef.current.addKeyBinding({
|
|
113
|
-
keyCode: 27,
|
|
114
|
-
key: "Escape",
|
|
115
|
-
description: "Exit full screen"
|
|
116
|
-
}, () => {
|
|
117
|
-
onExit?.();
|
|
118
|
-
});
|
|
119
|
-
return () => {
|
|
120
|
-
try {
|
|
121
|
-
if (deckRef.current) {
|
|
122
|
-
deckRef.current.destroy();
|
|
123
|
-
deckRef.current = null;
|
|
124
|
-
}
|
|
125
|
-
} catch {
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
});
|
|
129
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
130
|
-
className: mx("absolute flex h-full w-full items-center justify-center", fullscreen && "inset-0", classNames)
|
|
131
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
132
|
-
className: "relative aspect-video w-full"
|
|
133
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
134
|
-
ref: deckDivRef,
|
|
135
|
-
className: "reveal"
|
|
136
|
-
}, /* @__PURE__ */ React.createElement("style", null, /* @__PURE__ */ React.createElement("link", {
|
|
137
|
-
rel: "preconnect",
|
|
138
|
-
href: "https://fonts.googleapis.com"
|
|
139
|
-
}), /* @__PURE__ */ React.createElement("link", {
|
|
140
|
-
rel: "preconnect",
|
|
141
|
-
href: "https://fonts.gstatic.com",
|
|
142
|
-
crossOrigin: ""
|
|
143
|
-
}), /* @__PURE__ */ React.createElement("link", {
|
|
144
|
-
rel: "stylesheet",
|
|
145
|
-
href: "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
|
|
146
|
-
})), /* @__PURE__ */ React.createElement("div", {
|
|
147
|
-
className: "slides"
|
|
148
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
149
|
-
className: "!text-center"
|
|
150
|
-
}), /* @__PURE__ */ React.createElement("section", {
|
|
151
|
-
"data-markdown": []
|
|
152
|
-
}, /* @__PURE__ */ React.createElement("textarea", {
|
|
153
|
-
"data-template": true,
|
|
154
|
-
defaultValue: [
|
|
155
|
-
styles,
|
|
156
|
-
content
|
|
157
|
-
].join("\n")
|
|
158
|
-
}))))));
|
|
159
|
-
} finally {
|
|
160
|
-
_effect.f();
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
// src/components/DocumentPresenterContainer.tsx
|
|
165
|
-
var DocumentPresenterContainer = ({ document }) => {
|
|
166
|
-
var _effect = _useSignals2();
|
|
167
|
-
try {
|
|
168
|
-
const handleExit = useExitPresenter(document);
|
|
169
|
-
return /* @__PURE__ */ React2.createElement(StackItem.Content, {
|
|
170
|
-
classNames: "relative"
|
|
171
|
-
}, /* @__PURE__ */ React2.createElement(RevealPlayer, {
|
|
172
|
-
content: document.content.target?.content ?? "",
|
|
173
|
-
onExit: handleExit
|
|
174
|
-
}));
|
|
175
|
-
} finally {
|
|
176
|
-
_effect.f();
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
var DocumentPresenterContainer_default = DocumentPresenterContainer;
|
|
180
|
-
export {
|
|
181
|
-
DocumentPresenterContainer_default as default
|
|
182
|
-
};
|
|
183
|
-
//# sourceMappingURL=DocumentPresenterContainer-F42V4KAL.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/DocumentPresenterContainer.tsx", "../../../src/components/RevealPlayer/RevealPlayer.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\nimport React, { type FC } from 'react';\n\nimport { type Markdown } from '@dxos/plugin-markdown/types';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { useExitPresenter } from '../useExitPresenter';\n\nimport { RevealPlayer } from './RevealPlayer';\n\nconst DocumentPresenterContainer: FC<{ document: Markdown.Document }> = ({ document }) => {\n const handleExit = useExitPresenter(document);\n\n return (\n <StackItem.Content classNames='relative'>\n <RevealPlayer content={document.content.target?.content ?? ''} onExit={handleExit} />\n </StackItem.Content>\n );\n};\n\nexport default DocumentPresenterContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport 'reveal.js/dist/reveal.css';\n\nimport 'reveal.js/dist/theme/black.css';\n\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 { type ThemedClassName, useAsyncEffect } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-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 = ThemedClassName<{\n content: string;\n slide?: number;\n fullscreen?: boolean;\n onExit?: () => void;\n}>;\n\nexport const RevealPlayer = ({ classNames, content, slide, fullscreen = true, onExit }: RevealProps) => {\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 // 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 return (\n <div className={mx('absolute flex h-full w-full items-center justify-center', fullscreen && 'inset-0', classNames)}>\n <div className='relative aspect-video w-full'>\n <div ref={deckDivRef} className='reveal'>\n {/* TODO(burdon): 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"],
|
|
5
|
-
"mappings": ";;;;;;AAGA,OAAOA,YAAwB;AAG/B,SAASC,iBAAiB;;;;ACF1B,OAAO;AAEP,OAAO;AAIP,OAAO;AAEP,OAAOC,UAAU;AACjB,OAAOC,gBAAgB;AACvB,OAAOC,SAASC,cAAc;AAC9B,OAAOC,YAAY;AACnB,OAAOC,qBAAqB;AAC5B,OAAOC,oBAAoB;AAE3B,SAA+BC,sBAAsB;AACrD,SAASC,UAAU;AAEnB,IAAMC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDR,IAAMC,eAAe,CAAC,EAAEC,YAAYC,SAASC,OAAOC,aAAa,MAAMC,OAAM,MAAe;;;AACjG,UAAMC,aAAaC,OAAuB,IAAA;AAC1C,UAAMC,UAAUD,OAA0B,IAAA;AAE1CE,mBAAe,YAAA;AACb,UAAID,QAAQE,SAAS;AACnB;MACF;AAGAC,WAAKC,iBAAiB,cAAcC,UAAAA;AAMpCL,cAAQE,UAAU,IAAII,OAAOR,WAAWI,SAAU;;QAEhDK,UAAU;QACVC,YAAY;QACZC,aAAa;QACbC,UAAU;;;QAIVC,WAAW;;;QAIXC,QAAQ;;;;;;QAORC,SAAS;UAACC;UAAgBC;;;QAG1BC,UAAU;UACRC,KAAK;UACLC,aAAa;UACbC,WAAW,CAACC,MAAMC,aAAAA;AAChB,gBAAIA,UAAU;AACZ,qBAAOlB,KAAKgB,UAAUC,MAAM;gBAAEC;cAAS,CAAA,EAAGC;YAC5C;AAEA,mBAAOnB,KAAKoB,cAAcH,IAAAA,EAAME;UAClC;QACF;MACF,CAAA;AAEA,YAAMtB,QAAQE,QAAQsB,WAAU;AAEhC,UAAI7B,UAAU8B,QAAW;AACvBzB,gBAAQE,QAAQP,MAAMA,QAAQ,IAAIK,QAAQE,SAASwB,eAAAA,IAAmB/B,QAAQA,QAAQ,CAAA;MACxF;AAEAK,cAAQE,QAAQyB,cAAc;QAAEC,SAAS;QAAIC,KAAK;QAAUC,aAAa;MAAmB,GAAG,MAAA;AAC7FjC,iBAAAA;MACF,CAAA;AAEA,aAAO,MAAA;AACL,YAAI;AACF,cAAIG,QAAQE,SAAS;AACnBF,oBAAQE,QAAQ6B,QAAO;AACvB/B,oBAAQE,UAAU;UACpB;QACF,QAAQ;QAER;MACF;IACF,CAAA;AAEA,WACE,sBAAA,cAAC8B,OAAAA;MAAIC,WAAWC,GAAG,2DAA2DtC,cAAc,WAAWH,UAAAA;OACrG,sBAAA,cAACuC,OAAAA;MAAIC,WAAU;OACb,sBAAA,cAACD,OAAAA;MAAIG,KAAKrC;MAAYmC,WAAU;OAE9B,sBAAA,cAACG,SAAAA,MACC,sBAAA,cAACC,QAAAA;MAAKC,KAAI;MAAaC,MAAK;QAC5B,sBAAA,cAACF,QAAAA;MAAKC,KAAI;MAAaC,MAAK;MAAkCC,aAAa;QAC3E,sBAAA,cAACH,QAAAA;MACCC,KAAI;MACJC,MAAK;SAGT,sBAAA,cAACP,OAAAA;MAAIC,WAAU;OACb,sBAAA,cAACD,OAAAA;MAAIC,WAAU;QACf,sBAAA,cAACQ,WAAY;MAAE,iBAAiB,CAAA;IAAG,GACjC,sBAAA,cAACC,YAAAA;MAAe,iBAAiB;MAAQC,cAAc;QAACpD;QAAQG;QAASkD,KAAK,IAAA;;;;;AAO5F;;;AD3JA,IAAMC,6BAAkE,CAAC,EAAEC,SAAQ,MAAE;;;AACnF,UAAMC,aAAaC,iBAAiBF,QAAAA;AAEpC,WACE,gBAAAG,OAAA,cAACC,UAAUC,SAAO;MAACC,YAAW;OAC5B,gBAAAH,OAAA,cAACI,cAAAA;MAAaC,SAASR,SAASQ,QAAQC,QAAQD,WAAW;MAAIE,QAAQT;;;;;AAG7E;AAEA,IAAA,qCAAeF;",
|
|
6
|
-
"names": ["React", "StackItem", "hljs", "typescript", "React", "useRef", "Reveal", "RevealHighlight", "RevealMarkdown", "useAsyncEffect", "mx", "styles", "RevealPlayer", "classNames", "content", "slide", "fullscreen", "onExit", "deckDivRef", "useRef", "deckRef", "useAsyncEffect", "current", "hljs", "registerLanguage", "typescript", "Reveal", "progress", "transition", "slideNumber", "embedded", "showNotes", "margin", "plugins", "RevealMarkdown", "RevealHighlight", "markdown", "gfm", "smartypants", "highlight", "code", "language", "value", "highlightAuto", "initialize", "undefined", "getTotalSlides", "addKeyBinding", "keyCode", "key", "description", "destroy", "div", "className", "mx", "ref", "style", "link", "rel", "href", "crossOrigin", "section", "textarea", "defaultValue", "join", "DocumentPresenterContainer", "document", "handleExit", "useExitPresenter", "React", "StackItem", "Content", "classNames", "RevealPlayer", "content", "target", "onExit"]
|
|
7
|
-
}
|