@dxos/plugin-presenter 0.6.8-main.046e6cf

package/src/components/PresenterMain.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, useContext, useState } from 'react';
+
+import {
+  Surface,
+  useIntentDispatcher,
+  useResolvePlugin,
+  parseLayoutPlugin,
+  NavigationAction,
+} from '@dxos/app-framework';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import {
+  baseSurface,
+  topbarBlockPaddingStart,
+  fixedInsetFlexLayout,
+  bottombarBlockPaddingEnd,
+} from '@dxos/react-ui-theme';
+
+import { Layout, PageNumber, Pager, StartButton } from './Presenter';
+import { PRESENTER_PLUGIN } from '../meta';
+import { PresenterContext, TOGGLE_PRESENTATION } from '../types';
+
+const PresenterMain: FC<{ collection: CollectionType }> = ({ collection }) => {
+  const [slide, setSlide] = useState(0);
+
+  // TODO(burdon): Should not depend on split screen.
+  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
+  const fullscreen = layoutPlugin?.provides.layout.layoutMode === 'fullscreen';
+  const { running } = useContext(PresenterContext);
+
+  // TODO(burdon): Currently conflates fullscreen and running.
+  const dispatch = useIntentDispatcher();
+  const handleSetRunning = (running: boolean) => {
+    void dispatch([
+      {
+        plugin: PRESENTER_PLUGIN,
+        action: TOGGLE_PRESENTATION,
+        data: { state: running },
+      },
+      ...(!running
+        ? [
+            {
+              action: NavigationAction.CLOSE,
+              data: { activeParts: { fullScreen: fullyQualifiedId(collection) } },
+            },
+          ]
+        : []),
+    ]);
+  };
+
+  return (
+    <Main.Content
+      classNames={[
+        baseSurface,
+        fixedInsetFlexLayout,
+        !fullscreen && topbarBlockPaddingStart,
+        !fullscreen && bottombarBlockPaddingEnd,
+      ]}
+    >
+      <Layout
+        topRight={<StartButton running={running} onClick={(running) => handleSetRunning(running)} />}
+        bottomRight={<PageNumber index={slide} count={collection.objects.length} />}
+        bottomLeft={
+          <Pager
+            index={slide}
+            count={collection.objects.length}
+            keys={running}
+            onChange={setSlide}
+            onExit={() => handleSetRunning(false)}
+          />
+        }
+      >
+        {/* TODO(wittjosiah): Better slide placeholder. */}
+        <Surface role='slide' data={{ slide: collection.objects[slide] }} placeholder={<></>} />
+      </Layout>
+    </Main.Content>
+  );
+};
+
+export default PresenterMain;

package/src/components/PresenterSettings.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { PRESENTER_PLUGIN } from '../meta';
+import { type PresenterSettingsProps } from '../types';
+
+export const PresenterSettings = ({ settings }: { settings: PresenterSettingsProps }) => {
+  const { t } = useTranslation(PRESENTER_PLUGIN);
+
+  return (
+    <>
+      <SettingsValue label={t('present collections label')}>
+        <Input.Switch
+          checked={settings.presentCollections}
+          onCheckedChange={(checked) => (settings.presentCollections = !!checked)}
+        />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/Reveal/Reveal.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// eslint-disable-next-line no-restricted-imports
+import 'reveal.js/dist/reveal.css';
+// eslint-disable-next-line no-restricted-imports
+import 'reveal.js/dist/theme/black.css';
+
+import React, { useEffect, useRef } from 'react';
+import Reveal from 'reveal.js';
+import Markdown from 'reveal.js/plugin/markdown/plugin.js';
+// import Notes from 'reveal.js/plugin/notes/notes.js';
+
+const styles = `
+<style type="text/css">
+  .reveal h1 {
+    font-weight: 100;
+    padding-left: 36px;
+    opacity: 0.5;
+  }
+  .reveal h2 {
+    font-weight: 100;
+    padding-top: 60px;
+    padding-left: 40px;
+    font-size: 48px;
+    opacity: 0.3;
+  }
+  .reveal h1, h2, p {
+    font-family: "Raleway", sans-serif;
+    text-align: left;
+    font-weight: 200;
+  }
+  .reveal ul {
+    font-family: "Raleway", sans-serif;
+    display: block;
+    list-style: "- ";
+  }
+  .reveal blockquote p {
+    text-align: center;
+    font-weight: 100;
+    padding: 32px;
+  }
+</style>
+`;
+
+export type RevealProps = {
+  content: string;
+  slide?: number;
+  onExit?: () => void;
+};
+
+// https://revealjs.com/react
+export const RevealPlayer = ({ content, slide, onExit }: RevealProps) => {
+  const deckDivRef = useRef<HTMLDivElement>(null);
+  const deckRef = useRef<Reveal.Api | null>(null);
+  useEffect(() => {
+    if (deckRef.current) {
+      return;
+    }
+
+    setTimeout(async () => {
+      // https://revealjs.com/config
+      // https://github.com/hakimel/reveal.js
+      // TODO(burdon): Fragments and scroll view steps 2 at a time (safe mode?)
+      deckRef.current = new Reveal(deckDivRef.current!, {
+        // view: 'scroll',
+        progress: false,
+        transition: 'none',
+        slideNumber: false,
+        embedded: true,
+        // https://revealjs.com/speaker-view
+        showNotes: false,
+
+        center: true,
+        margin: 0.01,
+        minScale: 0.2,
+        maxScale: 1.4,
+
+        // https://revealjs.com/markdown
+        plugins: [
+          Markdown,
+          // TODO(burdon): Requires server to serve popout window.
+          // Notes
+        ],
+
+        // See https://marked.js.org/using_advanced#options
+        markdown: {
+          gfm: true,
+        },
+      });
+
+      await deckRef.current.initialize();
+      if (slide !== undefined) {
+        deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
+      }
+      // TODO(burdon): Translation.
+      deckRef.current.addKeyBinding({ keyCode: 27, key: 'Escape', description: 'Exit full screen' }, () => {
+        onExit?.();
+      });
+    });
+
+    return () => {
+      try {
+        if (deckRef.current) {
+          deckRef.current.destroy();
+          deckRef.current = null;
+        }
+      } catch (err) {
+        // Ignore.
+      }
+    };
+  });
+
+  return (
+    <div className='absolute inset-0 h-full'>
+      <div ref={deckDivRef} className='reveal'>
+        {/* TODO(burdon): Must be in head. */}
+        <style>
+          <link rel='preconnect' href='https://fonts.googleapis.com' />
+          <link rel='preconnect' href='https://fonts.gstatic.com' {...{ crossOrigin: '' }} />
+          <link
+            href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'
+            rel='stylesheet'
+          />
+        </style>
+        <div className='slides'>
+          <div className='!text-center' />
+          <section {...{ 'data-markdown': [] }}>
+            <textarea {...{ 'data-template': true }} defaultValue={[styles, content].join('\n')}></textarea>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Reveal/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Reveal';

package/src/components/Reveal.stories.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+// @ts-ignore
+// eslint-disable-next-line import/order
+import CONTENT from '../../testing/deck.md?raw';
+
+// eslint-disable-next-line import/order
+import { RevealPlayer } from './Reveal';
+
+// https://revealjs.com/markdown
+// https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
+// https://colorhunt.co/palettes/dark
+// https://colorhunt.co/palette/ff204ea0153e5d0e4100224d
+// https://colorhunt.co/palette/27374d526d829db2bfdde6ed
+// https://fontsource.org/fonts
+// https://fonts.google.com
+const Story = () => {
+  return <RevealPlayer content={CONTENT} />;
+};
+
+export default {
+  title: 'plugin-presenter/Reveal',
+  render: Story,
+};
+
+export const Default = {};

package/src/components/RevealMain.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { NavigationAction, useIntentDispatcher, useResolvePlugin, parseLayoutPlugin } from '@dxos/app-framework';
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import { topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';
+
+import { RevealPlayer } from './Reveal';
+import { PRESENTER_PLUGIN } from '../meta';
+import { TOGGLE_PRESENTATION } from '../types';
+
+const PresenterMain: FC<{ document: DocumentType }> = ({ document }) => {
+  const fullscreen = useResolvePlugin(parseLayoutPlugin)?.provides.layout.layoutMode === 'fullscreen';
+  const dispatch = useIntentDispatcher();
+
+  return (
+    <Main.Content
+      classNames={[
+        fixedInsetFlexLayout,
+        !fullscreen && topbarBlockPaddingStart,
+        !fullscreen && bottombarBlockPaddingEnd,
+      ]}
+    >
+      <RevealPlayer
+        content={document.content?.content ?? ''}
+        onExit={() => {
+          void dispatch([
+            {
+              plugin: PRESENTER_PLUGIN,
+              action: TOGGLE_PRESENTATION,
+              data: { state: false },
+            },
+            {
+              action: NavigationAction.CLOSE,
+              data: { activeParts: { fullScreen: fullyQualifiedId(document) } },
+            },
+          ]);
+        }}
+      />
+    </Main.Content>
+  );
+};
+
+export default PresenterMain;

package/src/components/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+export * from './PresenterSettings';
+
+// Lazily load components for content surfaces.
+export const RevealMain = React.lazy(() => import('./RevealMain'));
+export const PresenterMain = React.lazy(() => import('./PresenterMain'));
+export const MarkdownSlide = React.lazy(() => import('./MarkdownSlide'));

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './useControlledValue';

package/src/hooks/useControlledValue.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+
+// TODO(burdon): Factor out.
+export const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {
+  const [value, setValue] = useState<TValue>(controlledValue);
+  useEffect(() => {
+    setValue(controlledValue);
+  }, [controlledValue]);
+  return [value, setValue];
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { PresenterPlugin } from './PresenterPlugin';
+
+export default PresenterPlugin;
+
+export * from './components';
+
+export * from './PresenterPlugin';

package/src/meta.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Presentation, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const PRESENTER_PLUGIN = 'dxos.org/plugin/presenter';
+
+export default pluginMeta({
+  id: PRESENTER_PLUGIN,
+  name: 'Presenter',
+  description: 'Present documents as slideshows.',
+  iconComponent: (props: IconProps) => <Presentation {...props} />,
+  iconSymbol: 'ph--presentation--regular',
+});

package/src/testing.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { faker } from '@dxos/random';
+
+type SlideOptions = {
+  number?: number;
+  code?: boolean;
+  list?: number;
+  ordered?: number;
+};
+
+export const createSlide = (options: SlideOptions = {}) => {
+  const num = options.number === undefined ? '' : `${options.number}. `;
+
+  const code = () =>
+    [
+      '```tsx',
+      'const x = [1, 2, 3];',
+      'const f = (x: number[]) => x.reduce((acc, value) => acc + value, 0)',
+      'const y = f(x)',
+      '```',
+    ].join('\n');
+
+  const list = (length = 3) =>
+    Array.from({ length })
+      .map(() => `- ${faker.lorem.sentence(3)}`)
+      .join('\n');
+
+  const ordered = (length = 3) =>
+    Array.from({ length })
+      .map((_, i) => `${i + 1}. ${faker.lorem.sentence(3)}`)
+      .join('\n');
+
+  return [
+    `# ${num}${faker.lorem.sentence(3)}`,
+    faker.lorem.sentences(),
+    options.code && code(),
+    options.list && list(options.list),
+    options.ordered && ordered(options.ordered),
+    faker.lorem.sentences(),
+  ]
+    .filter(Boolean)
+    .join('\n\r');
+};
+
+export const createSlides = (length = 1) => Array.from({ length }).map((_, i) => createSlide({ number: i + 1 }));

package/src/translations.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { PRESENTER_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [PRESENTER_PLUGIN]: {
+        'plugin name': 'Presenter',
+        'toggle presentation label': 'Present',
+        'present collections label': 'Present collections (experimental)',
+      },
+    },
+  },
+];

package/src/types.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Context, createContext } from 'react';
+
+import type {
+  GraphBuilderProvides,
+  IntentResolverProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+
+import { PRESENTER_PLUGIN } from './meta';
+
+export type PresenterContextType = {
+  running: boolean;
+  start: () => void;
+  stop: () => void;
+};
+
+export const PresenterContext: Context<PresenterContextType> = createContext<PresenterContextType>({
+  running: false,
+  start: () => {},
+  stop: () => {},
+});
+
+export type PresenterSettingsProps = {
+  presentCollections?: boolean;
+};
+
+export type PresenterPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  TranslationsProvides &
+  SettingsProvides<PresenterSettingsProps>;
+
+export const TOGGLE_PRESENTATION = `${PRESENTER_PLUGIN}/toggle-presentation`;

package/src/typings.d.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+declare module 'rehype-add-classes' {
+  export default function Module();
+}
+
+declare module 'reveal.js/plugin/markdown/plugin.js' {
+  export default function Plugin();
+}
+
+declare module 'reveal.js/plugin/notes/notes.js' {
+  export default function Plugin();
+}