@100mslive/hms-whiteboard 0.0.6-alpha.0 → 0.0.6-alpha.2

package/src/ErrorFallback.tsx

@@ -0,0 +1,169 @@
+import React, { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useValue } from '@tldraw/state';
+import { Editor, hardResetEditor } from '@tldraw/tldraw';
+import classNames from 'classnames';
+
+const DISCORD_URL = 'https://discord.gg/pTge2BwDBq';
+
+export type TLErrorFallbackComponent = ComponentType<{
+  error: unknown;
+  refresh: () => void;
+  editor?: Editor;
+}>;
+
+export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV !== 'production');
+  const [didCopy, setDidCopy] = useState(false);
+  const [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false);
+
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : null;
+
+  const isDarkModeFromApp = useValue(
+    'isDarkMode',
+    () => {
+      try {
+        if (editor) {
+          return editor.user.getIsDarkMode();
+        }
+      } catch {
+        // we're in a funky error state so this might not work for spooky
+        // reasons. if not, we'll have another attempt later:
+      }
+      return null;
+    },
+    [editor],
+  );
+  const [
+    ,
+    // isDarkMode
+    setIsDarkMode,
+  ] = useState<null | boolean>(null);
+  useLayoutEffect(() => {
+    // if we found a theme class from the app, we can just use that
+    if (isDarkModeFromApp !== null) {
+      setIsDarkMode(isDarkModeFromApp);
+    }
+
+    // do any of our parents have a theme class? if yes then we can just
+    // rely on that and don't need to set our own class
+    let parent = containerRef.current?.parentElement;
+    let foundParentThemeClass = false;
+    while (parent) {
+      if (parent.classList.contains('tl-theme__dark') || parent.classList.contains('tl-theme__light')) {
+        foundParentThemeClass = true;
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (foundParentThemeClass) {
+      setIsDarkMode(null);
+      return;
+    }
+
+    // if we can't find a theme class from the app or from a parent, we have
+    // to fall back on using a media query:
+    setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }, [isDarkModeFromApp]);
+
+  useEffect(() => {
+    if (didCopy) {
+      const timeout = setTimeout(() => {
+        setDidCopy(false);
+      }, 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [didCopy]);
+
+  const copyError = () => {
+    const textarea = document.createElement('textarea');
+    textarea.value = errorStack ?? errorMessage;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    textarea.remove();
+    setDidCopy(true);
+  };
+
+  const resetLocalState = async () => {
+    hardResetEditor();
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        'tl-container tl-error-boundary',
+        // error-boundary is sometimes used outside of the theme
+        // container, so we need to provide it with a theme for our
+        // styles to work correctly
+        // 100ms: default light theme
+        // isDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light',
+        'tl-theme__light',
+      )}
+      style={{ position: 'static' }}
+    >
+      <div className="tl-error-boundary__overlay" />
+      {/* {editor && (
+        // opportunistically attempt to render the canvas to reassure
+        // the user that their document is still there. there's a good
+        // chance this won't work (ie the error that we're currently
+        // notifying the user about originates in the canvas) so it's
+        // not a big deal if it doesn't work - in that case we just have
+        // a plain grey background.
+        <ErrorBoundary onError={noop} fallback={() => null}>
+          <EditorContext.Provider value={editor}>
+            <div className="tl-overlay tl-error-boundary__canvas">
+              <Canvas />
+            </div>
+          </EditorContext.Provider>
+        </ErrorBoundary>
+      )} */}
+      <div
+        className={classNames('tl-modal', 'tl-error-boundary__content', {
+          'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,
+        })}
+      >
+        {shouldShowResetConfirmation ? (
+          <>
+            <h2>Are you sure?</h2>
+            <p>Resetting your data will delete your drawing and cannot be undone.</p>
+            <div className="tl-error-boundary__content__actions">
+              <button onClick={() => setShouldShowResetConfirmation(false)}>Cancel</button>
+              <button className="tl-error-boundary__reset" onClick={resetLocalState}>
+                Reset data
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <h2>Something&apos;s gone wrong.</h2>
+            <p>
+              Sorry, we encountered an error. Please refresh the page to continue. If you keep seeing this error, you
+              can <a href={DISCORD_URL}>ask for help on Discord</a>.
+            </p>
+            {shouldShowError && (
+              <div className="tl-error-boundary__content__error">
+                <pre>
+                  <code>{errorStack ?? errorMessage}</code>
+                </pre>
+                <button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>
+              </div>
+            )}
+            <div className="tl-error-boundary__content__actions">
+              <button onClick={() => setShouldShowError(!shouldShowError)}>
+                {shouldShowError ? 'Hide details' : 'Show details'}
+              </button>
+              <div className="tl-error-boundary__content__actions__group">
+                <button className="tl-error-boundary__refresh" onClick={refresh}>
+                  Refresh
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Whiteboard.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Editor, Tldraw } from '@tldraw/tldraw';
+import { ErrorFallback } from './ErrorFallback';
+import { useCollaboration } from './hooks/useCollaboration';
+import './index.css';
+
+export interface WhiteboardProps {
+  endpoint?: string;
+  token: string;
+  zoomToContent?: boolean;
+  transparentCanvas?: boolean;
+  onMount?: (args: { store?: unknown; editor?: unknown }) => void;
+}
+export function Whiteboard(props: WhiteboardProps) {
+  const [key, setKey] = useState(Date.now() + props.token);
+
+  return <CollaborativeEditor key={key} refresh={() => setKey(Date.now() + props.token)} {...props} />;
+}
+
+function CollaborativeEditor({
+  endpoint,
+  token,
+  zoomToContent,
+  transparentCanvas,
+  onMount,
+  refresh,
+}: WhiteboardProps & { refresh: () => void }) {
+  const [editor, setEditor] = useState<Editor>();
+  const store = useCollaboration({
+    endpoint,
+    token,
+    editor,
+    zoomToContent,
+  });
+
+  const handleMount = (editor: Editor) => {
+    setEditor(editor);
+    // @ts-expect-error - for debugging
+    window.editor = editor;
+    onMount?.({ store: store.store, editor });
+  };
+
+  if (store.status === 'synced-remote' && store.connectionStatus === 'offline') {
+    return <ErrorFallback error={Error('Network connection lost')} editor={editor} refresh={refresh} />;
+  }
+
+  return (
+    <Tldraw
+      className={transparentCanvas ? 'transparent-canvas' : ''}
+      autoFocus
+      store={store}
+      onMount={handleMount}
+      components={{
+        ErrorFallback: ({ error, editor }) => <ErrorFallback editor={editor} error={error} refresh={refresh} />,
+      }}
+      hideUi={editor?.getInstanceState()?.isReadonly}
+      initialState={editor?.getInstanceState()?.isReadonly ? 'hand' : 'select'}
+    />
+  );
+}

package/src/grpc/sessionstore.client.ts

@@ -0,0 +1,174 @@
+// @generated by protobuf-ts 2.9.4 with parameter long_type_string
+// @generated from protobuf file "sessionstore.proto" (package "sessionstorepb", syntax proto3)
+// tslint:disable
+import type { RpcOptions, RpcTransport, ServerStreamingCall, ServiceInfo, UnaryCall } from '@protobuf-ts/runtime-rpc';
+import { stackIntercept } from '@protobuf-ts/runtime-rpc';
+import type {
+  ChangeStream,
+  CountRequest,
+  CountResponse,
+  DeleteRequest,
+  DeleteResponse,
+  Event,
+  GetRequest,
+  GetResponse,
+  HelloRequest,
+  HelloResponse,
+  OpenRequest,
+  SetRequest,
+  SetResponse,
+  SubscribeRequest,
+} from './sessionstore';
+import { Api, Store } from './sessionstore';
+/**
+ * @generated from protobuf service sessionstorepb.Api
+ */
+export interface IApiClient {
+  /**
+   * @generated from protobuf rpc: Hello(sessionstorepb.HelloRequest) returns (sessionstorepb.HelloResponse);
+   */
+  hello(input: HelloRequest, options?: RpcOptions): UnaryCall<HelloRequest, HelloResponse>;
+  /**
+   * @generated from protobuf rpc: Subscribe(sessionstorepb.SubscribeRequest) returns (stream sessionstorepb.Event);
+   */
+  subscribe(input: SubscribeRequest, options?: RpcOptions): ServerStreamingCall<SubscribeRequest, Event>;
+}
+/**
+ * @generated from protobuf service sessionstorepb.Api
+ */
+export class ApiClient implements IApiClient, ServiceInfo {
+  typeName = Api.typeName;
+  methods = Api.methods;
+  options = Api.options;
+  constructor(private readonly _transport: RpcTransport) {}
+  /**
+   * @generated from protobuf rpc: Hello(sessionstorepb.HelloRequest) returns (sessionstorepb.HelloResponse);
+   */
+  hello(input: HelloRequest, options?: RpcOptions): UnaryCall<HelloRequest, HelloResponse> {
+    const method = this.methods[0],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<HelloRequest, HelloResponse>('unary', this._transport, method, opt, input);
+  }
+  /**
+   * @generated from protobuf rpc: Subscribe(sessionstorepb.SubscribeRequest) returns (stream sessionstorepb.Event);
+   */
+  subscribe(input: SubscribeRequest, options?: RpcOptions): ServerStreamingCall<SubscribeRequest, Event> {
+    const method = this.methods[1],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<SubscribeRequest, Event>('serverStreaming', this._transport, method, opt, input);
+  }
+}
+// metadata token -> session id, room id, user id, username
+
+// open is used for presence
+
+// change stream will return all keys in order of oldest to newsest.
+
+// max number of keys -> 5000
+// max size per key -> 10240 Bytes
+
+/**
+ * @generated from protobuf service sessionstorepb.Store
+ */
+export interface IStoreClient {
+  /**
+   * open - start listening to updates in keys with provided match patterns
+   * provide change_id as last received ID to resume updates
+   *
+   * @generated from protobuf rpc: open(sessionstorepb.OpenRequest) returns (stream sessionstorepb.ChangeStream);
+   */
+  open(input: OpenRequest, options?: RpcOptions): ServerStreamingCall<OpenRequest, ChangeStream>;
+  /**
+   * get last stored value in given key
+   *
+   * @generated from protobuf rpc: get(sessionstorepb.GetRequest) returns (sessionstorepb.GetResponse);
+   */
+  get(input: GetRequest, options?: RpcOptions): UnaryCall<GetRequest, GetResponse>;
+  /**
+   * set key value
+   *
+   * @generated from protobuf rpc: set(sessionstorepb.SetRequest) returns (sessionstorepb.SetResponse);
+   */
+  set(input: SetRequest, options?: RpcOptions): UnaryCall<SetRequest, SetResponse>;
+  /**
+   * delete key from store
+   *
+   * @generated from protobuf rpc: delete(sessionstorepb.DeleteRequest) returns (sessionstorepb.DeleteResponse);
+   */
+  delete(input: DeleteRequest, options?: RpcOptions): UnaryCall<DeleteRequest, DeleteResponse>;
+  /**
+   * count get count of keys
+   *
+   * @generated from protobuf rpc: count(sessionstorepb.CountRequest) returns (sessionstorepb.CountResponse);
+   */
+  count(input: CountRequest, options?: RpcOptions): UnaryCall<CountRequest, CountResponse>;
+}
+// metadata token -> session id, room id, user id, username
+
+// open is used for presence
+
+// change stream will return all keys in order of oldest to newsest.
+
+// max number of keys -> 5000
+// max size per key -> 10240 Bytes
+
+/**
+ * @generated from protobuf service sessionstorepb.Store
+ */
+export class StoreClient implements IStoreClient, ServiceInfo {
+  typeName = Store.typeName;
+  methods = Store.methods;
+  options = Store.options;
+  constructor(private readonly _transport: RpcTransport) {}
+  /**
+   * open - start listening to updates in keys with provided match patterns
+   * provide change_id as last received ID to resume updates
+   *
+   * @generated from protobuf rpc: open(sessionstorepb.OpenRequest) returns (stream sessionstorepb.ChangeStream);
+   */
+  open(input: OpenRequest, options?: RpcOptions): ServerStreamingCall<OpenRequest, ChangeStream> {
+    const method = this.methods[0],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<OpenRequest, ChangeStream>('serverStreaming', this._transport, method, opt, input);
+  }
+  /**
+   * get last stored value in given key
+   *
+   * @generated from protobuf rpc: get(sessionstorepb.GetRequest) returns (sessionstorepb.GetResponse);
+   */
+  get(input: GetRequest, options?: RpcOptions): UnaryCall<GetRequest, GetResponse> {
+    const method = this.methods[1],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<GetRequest, GetResponse>('unary', this._transport, method, opt, input);
+  }
+  /**
+   * set key value
+   *
+   * @generated from protobuf rpc: set(sessionstorepb.SetRequest) returns (sessionstorepb.SetResponse);
+   */
+  set(input: SetRequest, options?: RpcOptions): UnaryCall<SetRequest, SetResponse> {
+    const method = this.methods[2],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<SetRequest, SetResponse>('unary', this._transport, method, opt, input);
+  }
+  /**
+   * delete key from store
+   *
+   * @generated from protobuf rpc: delete(sessionstorepb.DeleteRequest) returns (sessionstorepb.DeleteResponse);
+   */
+  delete(input: DeleteRequest, options?: RpcOptions): UnaryCall<DeleteRequest, DeleteResponse> {
+    const method = this.methods[3],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<DeleteRequest, DeleteResponse>('unary', this._transport, method, opt, input);
+  }
+  /**
+   * count get count of keys
+   *
+   * @generated from protobuf rpc: count(sessionstorepb.CountRequest) returns (sessionstorepb.CountResponse);
+   */
+  count(input: CountRequest, options?: RpcOptions): UnaryCall<CountRequest, CountResponse> {
+    const method = this.methods[4],
+      opt = this._transport.mergeOptions(options);
+    return stackIntercept<CountRequest, CountResponse>('unary', this._transport, method, opt, input);
+  }
+}