@capytale/meta-player 0.8.2 → 0.8.3

package/src/features/functionalities/PreviewDialog.tsx

@@ -1,83 +1,83 @@
-import { FC, memo, useEffect, useRef, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import {
-  PreviewFile,
-  selectPreviewFile,
-  setPreviewFile,
-} from "./functionalitiesSlice";
-import { Dialog } from "primereact/dialog";
-import { useThemeType } from "../theming/hooks";
-
-const HighlightedCode = memo(({ code }: { code: string }) => {
-  const codeRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (codeRef.current != null) {
-      if ((window as any).hljs) {
-        (window as any).hljs.highlightBlock(codeRef.current);
-      } else {
-        console.warn("Highlight.js not loaded");
-      }
-    }
-  }, [code]);
-
-  const theme = useThemeType();
-
-  return (
-    <pre>
-      <code
-        ref={codeRef}
-        style={{
-          padding: 0,
-          background: theme === "light" ? "white" : "#1f2937",
-          maxWidth: "100%",
-        }}
-      >
-        {code}
-      </code>
-    </pre>
-  );
-});
-
-const PreviewDialog: FC = () => {
-  const previewFile = useAppSelector(selectPreviewFile);
-  const [persistentPreviewFile, setPersistentPreviewFile] =
-    useState<PreviewFile | null>(null);
-
-  const dispatch = useAppDispatch();
-  const visible = previewFile != null;
-
-  useEffect(() => {
-    if (previewFile != null) {
-      setPersistentPreviewFile(previewFile);
-    }
-  }, [previewFile]);
-
-  if (persistentPreviewFile == null) {
-    return null;
-  }
-
-  return (
-    <Dialog
-      visible={visible}
-      header={persistentPreviewFile.title}
-      onHide={() => {
-        dispatch(setPreviewFile(null));
-      }}
-      style={{ maxWidth: "100%" }}
-    >
-      {persistentPreviewFile.type === "text" ? (
-        <HighlightedCode code={persistentPreviewFile.content} />
-      ) : (
-        <img
-          src={persistentPreviewFile.url}
-          alt={persistentPreviewFile.title}
-          style={{
-            maxWidth: "100%",
-          }}
-        />
-      )}
-    </Dialog>
-  );
-};
-
-export default PreviewDialog;
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import {
+  PreviewFile,
+  selectPreviewFile,
+  setPreviewFile,
+} from "./functionalitiesSlice";
+import { Dialog } from "primereact/dialog";
+import { useThemeType } from "../theming/hooks";
+
+const HighlightedCode = memo(({ code }: { code: string }) => {
+  const codeRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (codeRef.current != null) {
+      if ((window as any).hljs) {
+        (window as any).hljs.highlightBlock(codeRef.current);
+      } else {
+        console.warn("Highlight.js not loaded");
+      }
+    }
+  }, [code]);
+
+  const theme = useThemeType();
+
+  return (
+    <pre>
+      <code
+        ref={codeRef}
+        style={{
+          padding: 0,
+          background: theme === "light" ? "white" : "#1f2937",
+          maxWidth: "100%",
+        }}
+      >
+        {code}
+      </code>
+    </pre>
+  );
+});
+
+const PreviewDialog: FC = () => {
+  const previewFile = useAppSelector(selectPreviewFile);
+  const [persistentPreviewFile, setPersistentPreviewFile] =
+    useState<PreviewFile | null>(null);
+
+  const dispatch = useAppDispatch();
+  const visible = previewFile != null;
+
+  useEffect(() => {
+    if (previewFile != null) {
+      setPersistentPreviewFile(previewFile);
+    }
+  }, [previewFile]);
+
+  if (persistentPreviewFile == null) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      visible={visible}
+      header={persistentPreviewFile.title}
+      onHide={() => {
+        dispatch(setPreviewFile(null));
+      }}
+      style={{ maxWidth: "100%" }}
+    >
+      {persistentPreviewFile.type === "text" ? (
+        <HighlightedCode code={persistentPreviewFile.content} />
+      ) : (
+        <img
+          src={persistentPreviewFile.url}
+          alt={persistentPreviewFile.title}
+          style={{
+            maxWidth: "100%",
+          }}
+        />
+      )}
+    </Dialog>
+  );
+};
+
+export default PreviewDialog;

package/src/features/functionalities/functionalitiesSlice.ts

@@ -1,98 +1,98 @@
-import type { PayloadAction } from "@reduxjs/toolkit";
-import { createAppSlice } from "../../app/createAppSlice";
-
-export type AttachedFileData = {
-  name: string;
-  isTemporary: boolean;
-  downloadMode: "default" | "custom" | "none";
-  copyLinkMode: "default" | "custom" | "none";
-  interactMode: "download" | "preview" | "custom" | "none";
-  urlOrId: string;
-}
-
-export type UploadedFileInfo = {
-  source: URL,
-  name: string,
-  size: number,
-  file: File,
-};
-
-export type AttachedFilesOptions = {
-  enabled: boolean;
-  uploadTemporaryFiles?: {
-    uploadButtonLabel?: string;
-    mimeTypes?: string[];
-    multiple: boolean;
-    handler: (fileInfos: UploadedFileInfo[]) => any;
-  };
-  listFilesMiddleware?: (originalFiles: AttachedFileData[]) => AttachedFileData[];
-  customHandlers?: {
-    downloadFile?: ((originalFile: AttachedFileData) => any);
-    copyFileLink?: ((originalFile: AttachedFileData) => any);
-    interactWithFile?: ((originalFile: AttachedFileData) => any);
-  };
-  onViewFiles?: () => any;
-};
-
-export type PreviewFile = { title: string } & (
-  { type: "text", content: string } |
-  { type: "image", url: string }
-);
-
-export type FunctionalitiesState = {
-  attachedFilesOptions: AttachedFilesOptions;
-  attachedFilesRefresher: number;
-  previewFile: PreviewFile | null;
-}
-
-export const defaultAttachedFilesOptions: AttachedFilesOptions = {
-  enabled: false,
-};
-
-export const initialState: FunctionalitiesState = {
-  attachedFilesOptions: defaultAttachedFilesOptions,
-  attachedFilesRefresher: 0,
-  previewFile: null,
-};
-
-// If you are not using async thunks you can use the standalone `createSlice`.
-export const functionalitiesSlice = createAppSlice({
-  name: "functionalities",
-  // `createSlice` will infer the state type from the `initialState` argument
-  initialState,
-  // The `reducers` field lets us define reducers and generate associated actions
-  reducers: (create) => ({
-    setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
-      state.attachedFilesOptions = action.payload;
-    }),
-    refreshAttachedFiles: create.reducer((state) => {
-      state.attachedFilesRefresher += 1;
-    }),
-    setPreviewFile: create.reducer((state, action: PayloadAction<PreviewFile | null>) => {
-      state.previewFile = action.payload;
-    }),
-  }),
-  // You can define your selectors here. These selectors receive the slice
-  // state as their first argument.
-  selectors: {
-    selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
-    selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
-    selectAttachedFilesRefresher: (state) => state.attachedFilesRefresher,
-    selectPreviewFile: (state) => state.previewFile,
-  },
-});
-
-// Action creators are generated for each case reducer function.
-export const {
-  setAttachedFilesOptions,
-  refreshAttachedFiles,
-  setPreviewFile,
-} = functionalitiesSlice.actions;
-
-// Selectors returned by `slice.selectors` take the root state as their first argument.
-export const {
-  selectAttachedFilesOptions,
-  selectAttachedFilesEnabled,
-  selectAttachedFilesRefresher,
-  selectPreviewFile,
-} = functionalitiesSlice.selectors;
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type AttachedFileData = {
+  name: string;
+  isTemporary: boolean;
+  downloadMode: "default" | "custom" | "none";
+  copyLinkMode: "default" | "custom" | "none";
+  interactMode: "download" | "preview" | "custom" | "none";
+  urlOrId: string;
+}
+
+export type UploadedFileInfo = {
+  source: URL,
+  name: string,
+  size: number,
+  file: File,
+};
+
+export type AttachedFilesOptions = {
+  enabled: boolean;
+  uploadTemporaryFiles?: {
+    uploadButtonLabel?: string;
+    mimeTypes?: string[];
+    multiple: boolean;
+    handler: (fileInfos: UploadedFileInfo[]) => any;
+  };
+  listFilesMiddleware?: (originalFiles: AttachedFileData[]) => AttachedFileData[];
+  customHandlers?: {
+    downloadFile?: ((originalFile: AttachedFileData) => any);
+    copyFileLink?: ((originalFile: AttachedFileData) => any);
+    interactWithFile?: ((originalFile: AttachedFileData) => any);
+  };
+  onViewFiles?: () => any;
+};
+
+export type PreviewFile = { title: string } & (
+  { type: "text", content: string } |
+  { type: "image", url: string }
+);
+
+export type FunctionalitiesState = {
+  attachedFilesOptions: AttachedFilesOptions;
+  attachedFilesRefresher: number;
+  previewFile: PreviewFile | null;
+}
+
+export const defaultAttachedFilesOptions: AttachedFilesOptions = {
+  enabled: false,
+};
+
+export const initialState: FunctionalitiesState = {
+  attachedFilesOptions: defaultAttachedFilesOptions,
+  attachedFilesRefresher: 0,
+  previewFile: null,
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const functionalitiesSlice = createAppSlice({
+  name: "functionalities",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
+      state.attachedFilesOptions = action.payload;
+    }),
+    refreshAttachedFiles: create.reducer((state) => {
+      state.attachedFilesRefresher += 1;
+    }),
+    setPreviewFile: create.reducer((state, action: PayloadAction<PreviewFile | null>) => {
+      state.previewFile = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
+    selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
+    selectAttachedFilesRefresher: (state) => state.attachedFilesRefresher,
+    selectPreviewFile: (state) => state.previewFile,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  setAttachedFilesOptions,
+  refreshAttachedFiles,
+  setPreviewFile,
+} = functionalitiesSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectAttachedFilesOptions,
+  selectAttachedFilesEnabled,
+  selectAttachedFilesRefresher,
+  selectPreviewFile,
+} = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -1,70 +1,70 @@
-import { useMemo } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks"
-import { useActivityJS } from "../activityJS/ActivityJSProvider";
-import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher, setPreviewFile } from "./functionalitiesSlice"
-
-export const useAttachedFiles = () => {
-  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
-  const attachedFilesRefresher = useAppSelector(selectAttachedFilesRefresher);
-
-  const activityJS = useActivityJS();
-  const files = useMemo(
-    () =>
-      activityJS.activitySession?.activityBunch.activityNode.attached_files
-        .items || [],
-    [activityJS, attachedFilesRefresher],
-  );
-  const filesData = useMemo<AttachedFileData[]>(() => {
-    return files.map((file) => {
-      const name = decodeURIComponent(file.split("/").pop() || "");
-      return {
-        name: name,
-        urlOrId: file,
-        isTemporary: false,
-        downloadMode: "default",
-        copyLinkMode: "default",
-        interactMode: "preview",
-      };
-    });
-  }, [files]);
-
-  const treatedFilesData = useMemo(() => {
-    if (!attachedFilesOptions.enabled || !attachedFilesOptions.listFilesMiddleware) {
-      return filesData;
-    }
-    return attachedFilesOptions.listFilesMiddleware(filesData);
-  }, [filesData, attachedFilesOptions, attachedFilesRefresher]);
-
-  return treatedFilesData;
-};
-
-export const useRefreshAttachedFiles = () => {
-  const dispatch = useAppDispatch();
-  return () => dispatch(refreshAttachedFiles());
-};
-
-export const usePreviewTextFile = () => {
-  const dispatch = useAppDispatch();
-  return (title: string, content: string) => {
-    dispatch(
-      setPreviewFile({
-        title,
-        type: "text",
-        content,
-      }),
-    );
-  }
-};
-
-export const usePreviewImageFile = () => {
-  const dispatch = useAppDispatch();
-  return (title: string, url: string) => {
-    dispatch(
-      setPreviewFile({
-        title,
-        type: "image",
-        url,
-      }),
-    );
-  }
-};
+import { useMemo } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks"
+import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import { AttachedFileData, refreshAttachedFiles, selectAttachedFilesOptions, selectAttachedFilesRefresher, setPreviewFile } from "./functionalitiesSlice"
+
+export const useAttachedFiles = () => {
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+  const attachedFilesRefresher = useAppSelector(selectAttachedFilesRefresher);
+
+  const activityJS = useActivityJS();
+  const files = useMemo(
+    () =>
+      activityJS.activitySession?.activityBunch.activityNode.attached_files
+        .items || [],
+    [activityJS, attachedFilesRefresher],
+  );
+  const filesData = useMemo<AttachedFileData[]>(() => {
+    return files.map((file) => {
+      const name = decodeURIComponent(file.split("/").pop() || "");
+      return {
+        name: name,
+        urlOrId: file,
+        isTemporary: false,
+        downloadMode: "default",
+        copyLinkMode: "default",
+        interactMode: "preview",
+      };
+    });
+  }, [files]);
+
+  const treatedFilesData = useMemo(() => {
+    if (!attachedFilesOptions.enabled || !attachedFilesOptions.listFilesMiddleware) {
+      return filesData;
+    }
+    return attachedFilesOptions.listFilesMiddleware(filesData);
+  }, [filesData, attachedFilesOptions, attachedFilesRefresher]);
+
+  return treatedFilesData;
+};
+
+export const useRefreshAttachedFiles = () => {
+  const dispatch = useAppDispatch();
+  return () => dispatch(refreshAttachedFiles());
+};
+
+export const usePreviewTextFile = () => {
+  const dispatch = useAppDispatch();
+  return (title: string, content: string) => {
+    dispatch(
+      setPreviewFile({
+        title,
+        type: "text",
+        content,
+      }),
+    );
+  }
+};
+
+export const usePreviewImageFile = () => {
+  const dispatch = useAppDispatch();
+  return (title: string, url: string) => {
+    dispatch(
+      setPreviewFile({
+        title,
+        type: "image",
+        url,
+      }),
+    );
+  }
+};

package/src/features/layout/hooks.ts

@@ -1,7 +1,7 @@
-import { useAppSelector } from "../../app/hooks";
-import { selectOrientation } from "./layoutSlice";
-
-export const useOrientation = () => {
-  const orientation = useAppSelector(selectOrientation);
-  return orientation;
-};
+import { useAppSelector } from "../../app/hooks";
+import { selectOrientation } from "./layoutSlice";
+
+export const useOrientation = () => {
+  const orientation = useAppSelector(selectOrientation);
+  return orientation;
+};