@capytale/meta-player 0.2.4 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,6 +13,11 @@
     "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
+  "overrides": {
+    "use-file-upload": {
+      "react": "^18.3.1"
+    }
+  },
   "dependencies": {
     "@capytale/activity.js": "^3.1.0",
     "@capytale/capytale-anti-triche": "^0.2.1",
@@ -23,7 +28,8 @@
     "primereact": "^10.8.3",
     "react-html-props": "^2.0.9",
     "react-redux": "^9.1.0",
-    "screenfull": "^6.0.2"
+    "screenfull": "^6.0.2",
+    "use-file-upload": "^1.0.11"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.4",

package/src/demo.tsx

@@ -15,11 +15,13 @@ const DemoActivity: FC = () => {
       <ActivityQuickActionsSetter
         actions={[
           {
+            type: "action",
             title: "Pause",
             icon: "pi pi-pause",
             action: () => console.log("Pause"),
           },
           {
+            type: "action",
             title: "Play",
             icon: "pi pi-play",
             action: () => console.log("Play"),
@@ -29,11 +31,13 @@ const DemoActivity: FC = () => {
       <ActivitySidebarActionsSetter
         actions={[
           {
+            type: "action",
             title: "Pause",
             icon: "pi pi-pause",
             action: () => console.log("Pause"),
           },
           {
+            type: "action",
             title: "Play",
             icon: "pi pi-play",
             action: () => console.log("Play"),

package/src/features/activityData/activityDataSlice.ts

@@ -23,7 +23,7 @@ export type Instructions = {
 
 export type Icon = {
   path: string;
-  style: any;
+  style?: any;
 };
 
 interface ActivityJSData {

package/src/features/navbar/ActivityInfo.tsx

@@ -30,7 +30,9 @@ const ActivityInfo: React.FC = () => {
           className={styles.activityLogo}
           src={icon.path}
           style={{
-            backgroundColor: icon.style["background-color"],
+            backgroundColor: icon.style
+              ? icon.style["background-color"] || "white"
+              : "white",
           }}
         />
       )}

package/src/features/navbar/ActivityQuickActions.tsx

@@ -4,12 +4,14 @@ import {
   QuickAction,
   selectQuickActions,
   setQuickActions,
+  usePerformQuickAction,
 } from "./navbarSlice";
 import { Button } from "primereact/button";
 import settings from "../../settings";
 
 const ActivityQuickActions: FC<{}> = () => {
   const quickActions = useAppSelector(selectQuickActions);
+  const performQuickAction = usePerformQuickAction();
   return (
     <>
       {quickActions.map((action) => (
@@ -18,7 +20,9 @@ const ActivityQuickActions: FC<{}> = () => {
           severity="secondary"
           size="small"
           icon={action.icon}
-          onClick={action.action}
+          onClick={() => {
+            performQuickAction(action);
+          }}
           outlined
           tooltip={action.title}
           tooltipOptions={{

package/src/features/navbar/ActivitySidebarActions.tsx

@@ -4,12 +4,14 @@ import {
   QuickAction,
   selectSidebarActions,
   setSidebarActions,
+  usePerformQuickAction,
 } from "./navbarSlice";
 import { Button } from "primereact/button";
 import settings from "../../settings";
 
 const ActivitySidebarActions: FC<{}> = () => {
   const sidebarActions = useAppSelector(selectSidebarActions);
+  const performQuickAction = usePerformQuickAction();
   return (
     <>
       {sidebarActions.map((action) => (
@@ -18,7 +20,9 @@ const ActivitySidebarActions: FC<{}> = () => {
           severity="secondary"
           size="small"
           icon={action.icon}
-          onClick={action.action}
+          onClick={() => {
+            performQuickAction(action);
+          }}
           outlined
           label={action.title}
           tooltipOptions={{

package/src/features/navbar/navbarSlice.ts

@@ -1,11 +1,39 @@
 import type { PayloadAction } from "@reduxjs/toolkit";
 import { createAppSlice } from "../../app/createAppSlice";
+import { Callback, useFileUpload } from "use-file-upload";
+export type QuickAction =
+  | {
+      type: "action";
+      title: string;
+      icon: string;
+      action: () => void;
+    }
+  | {
+      type: "file-upload";
+      accept?: string;
+      title: string;
+      icon: string;
+      action: (file: {
+        source: URL;
+        name: string;
+        size: number;
+        file: File;
+      }) => void;
+    };
 
-export type QuickAction = {
-  title: string;
-  icon: string;
-  action: () => void;
-};
+export function usePerformQuickAction() {
+  const [_, selectFile] = useFileUpload();
+  return (action: QuickAction) => {
+    if (action.type === "action") {
+      action.action();
+    } else if (action.type === "file-upload") {
+      selectFile(
+        { accept: action.accept, multiple: false },
+        action.action as Callback,
+      );
+    }
+  };
+}
 
 export interface NavbarState {
   quickActions: QuickAction[];