@capytale/meta-player 0.0.1

package/src/settings.ts

@@ -0,0 +1,6 @@
+const settings = {
+  STATEMENT_MAX_SIZE: 2000000, // 2 MB
+  TOOLTIP_SHOW_DELAY: 500,
+};
+
+export default settings;

package/src/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest"

package/src/utils/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { Component, ErrorInfo, PropsWithChildren, ReactNode } from "react";
+
+type ErrorBoundaryProps = PropsWithChildren<{
+  fallback: ReactNode;
+}>;
+type ErrorBoundaryState = {
+  hasError: boolean;
+};
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_error: Error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // Example "componentStack":
+    //   in ComponentThatThrows (created by App)
+    //   in ErrorBoundary (created by App)
+    //   in div (created by App)
+    //   in App
+    console.error(error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

package/src/utils/PopupButton.tsx

@@ -0,0 +1,135 @@
+import { Button, ButtonProps } from "primereact/button";
+import { MenuItem } from "primereact/menuitem";
+import { TieredMenu } from "primereact/tieredmenu";
+import { useMountEffect } from "primereact/hooks";
+import {
+  IconType,
+  ObjectUtils,
+  UniqueComponentId,
+  classNames,
+} from "primereact/utils";
+import {
+  CSSProperties,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+  useRef,
+  useState,
+} from "react";
+import { Tooltip } from "primereact/tooltip";
+import { TooltipOptions } from "primereact/tooltip/tooltipoptions";
+
+type PopupButtonProps = {
+  id?: string;
+  icon?: IconType<ButtonProps>;
+  buttonClassName?: string;
+  disabled?: boolean;
+  buttonProps?: ButtonProps;
+  size?: "small" | "large";
+  severity?: "secondary" | "success" | "info" | "warning" | "danger" | "help";
+  outlined?: boolean;
+  text?: boolean;
+  raised?: boolean;
+  unstyled?: boolean;
+  onButtonKeydown?: KeyboardEventHandler<HTMLButtonElement>;
+  model?: MenuItem[];
+  appendTo?: HTMLElement | "self" | (() => HTMLElement) | null;
+  tooltip?: ReactNode;
+  menuStyle?: CSSProperties;
+  autoZIndex?: boolean;
+  baseZIndex?: number;
+  menuClassName?: string;
+  tooltipOptions?: TooltipOptions;
+};
+
+const PopupButton: React.FC<PopupButtonProps> = ({
+  id,
+  icon,
+  buttonClassName,
+  disabled,
+  buttonProps,
+  size,
+  severity,
+  outlined,
+  text,
+  raised,
+  unstyled,
+  onButtonKeydown,
+  model,
+  appendTo,
+  tooltip,
+  menuStyle,
+  autoZIndex,
+  baseZIndex,
+  menuClassName,
+  tooltipOptions,
+  ...props
+}: PopupButtonProps) => {
+  const [idState, setIdState] = useState(id);
+  useMountEffect(() => {
+    if (!idState) {
+      setIdState(UniqueComponentId());
+    }
+  });
+
+  const [overlayVisibleState, _setOverlayVisibleState] =
+    useState<boolean>(false);
+  const menuRef = useRef(null);
+  const elementRef = useRef(null);
+
+  const hasTooltip = ObjectUtils.isNotEmpty(tooltip);
+
+  const onDropdownButtonClick: MouseEventHandler<HTMLButtonElement> = (
+    event,
+  ) => {
+    menuRef && (menuRef.current as any)?.toggle(event);
+  };
+
+  const menuId = idState + "_overlay";
+
+  return (
+    <>
+      <div {...props}>
+        <Button
+          type="button"
+          className={classNames(buttonClassName)}
+          icon={icon}
+          onClick={onDropdownButtonClick}
+          disabled={disabled}
+          aria-expanded={overlayVisibleState}
+          aria-haspopup="true"
+          aria-controls={menuId}
+          {...buttonProps}
+          size={size}
+          severity={severity}
+          outlined={outlined}
+          text={text}
+          raised={raised}
+          onKeyDown={onButtonKeydown}
+          unstyled={unstyled}
+        />
+        <TieredMenu
+          ref={menuRef}
+          popup={true}
+          unstyled={unstyled}
+          model={model}
+          appendTo={appendTo}
+          id={menuId}
+          style={menuStyle}
+          autoZIndex={autoZIndex}
+          baseZIndex={baseZIndex}
+          className={menuClassName}
+        />
+      </div>
+      {hasTooltip && (
+        <Tooltip
+          target={elementRef}
+          content={tooltip}
+          {...tooltipOptions}
+        />
+      )}
+    </>
+  );
+};
+
+export default PopupButton;

package/src/utils/activity.ts

@@ -0,0 +1,8 @@
+export function getIdFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+  const id = params.get("id");
+  if (id !== null) {
+    return parseInt(id, 10);
+  }
+  return null;
+}

package/src/utils/breakpoints.ts

@@ -0,0 +1,5 @@
+export const SM = 576;
+export const MD = 768;
+export const ML = 850;
+export const LG = 992;
+export const XL = 1200;

package/src/utils/clipboard.ts

@@ -0,0 +1,11 @@
+export async function copyToClipboard(
+  text: string,
+  callback?: (success: boolean, error?: any) => any,
+) {
+  try {
+    await navigator.clipboard.writeText(text);
+    callback?.(true);
+  } catch (err) {
+    callback?.(false, err);
+  }
+}

package/src/utils/test-utils.tsx

@@ -0,0 +1,65 @@
+import type { RenderOptions } from "@testing-library/react"
+import { render } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import type { PropsWithChildren, ReactElement } from "react"
+import { Provider } from "react-redux"
+import type { AppStore, RootState } from "../app/store"
+import { makeStore } from "../app/store"
+
+/**
+ * This type extends the default options for
+ * React Testing Library's render function. It allows for
+ * additional configuration such as specifying an initial Redux state and
+ * a custom store instance.
+ */
+interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
+  /**
+   * Defines a specific portion or the entire initial state for the Redux store.
+   * This is particularly useful for initializing the state in a
+   * controlled manner during testing, allowing components to be rendered
+   * with predetermined state conditions.
+   */
+  preloadedState?: Partial<RootState>
+
+  /**
+   * Allows the use of a specific Redux store instance instead of a
+   * default or global store. This flexibility is beneficial when
+   * testing components with unique store requirements or when isolating
+   * tests from a global store state. The custom store should be configured
+   * to match the structure and middleware of the store used by the application.
+   *
+   * @default makeStore(preloadedState)
+   */
+  store?: AppStore
+}
+
+/**
+ * Renders the given React element with Redux Provider and custom store.
+ * This function is useful for testing components that are connected to the Redux store.
+ *
+ * @param ui - The React component or element to render.
+ * @param extendedRenderOptions - Optional configuration options for rendering. This includes `preloadedState` for initial Redux state and `store` for a specific Redux store instance. Any additional properties are passed to React Testing Library's render function.
+ * @returns An object containing the Redux store used in the render, User event API for simulating user interactions in tests, and all of React Testing Library's query functions for testing the component.
+ */
+export const renderWithProviders = (
+  ui: ReactElement,
+  extendedRenderOptions: ExtendedRenderOptions = {},
+) => {
+  const {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = makeStore(preloadedState),
+    ...renderOptions
+  } = extendedRenderOptions
+
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={store}>{children}</Provider>
+  )
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  }
+}

package/src/utils/useFullscreen.ts

@@ -0,0 +1,65 @@
+// From https://github.com/streamich/react-use/blob/master/src/useFullscreen.ts
+// Modified to use <body> instead of react ref
+
+import { useState, useEffect, useLayoutEffect } from "react";
+import screenfull from "screenfull";
+
+const noop = () => {};
+const isBrowser = typeof window !== "undefined";
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+export interface FullScreenOptions {
+  onClose?: (error?: Error) => void;
+}
+
+const useFullscreen = (
+  enabled: boolean,
+  onClose: (error?: Error) => void = noop,
+): boolean => {
+  const [isFullscreen, setIsFullscreen] = useState(enabled);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const onChange = () => {
+      if (screenfull.isEnabled) {
+        const isScreenfullFullscreen = screenfull.isFullscreen;
+        setIsFullscreen(isScreenfullFullscreen);
+        if (!isScreenfullFullscreen) {
+          onClose();
+        }
+      }
+    };
+
+    if (screenfull.isEnabled) {
+      try {
+        screenfull.request(window.document.body);
+        setIsFullscreen(true);
+      } catch (error) {
+        onClose(error as Error | undefined);
+        setIsFullscreen(false);
+      }
+      screenfull.on("change", onChange);
+    } else {
+      onClose();
+      setIsFullscreen(false);
+    }
+
+    return () => {
+      setIsFullscreen(false);
+      if (screenfull.isEnabled) {
+        try {
+          screenfull.off("change", onChange);
+          screenfull.exit();
+        } catch {}
+      }
+    };
+  }, [enabled]);
+
+  return isFullscreen;
+};
+
+export default useFullscreen;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
+  
+  "include": ["src/**/*"],
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "src/setupTests",
+    mockReset: true,
+  },
+})