@player-tools/devtools-basic-web-plugin 0.8.0-next.0 → 0.8.0

package/dist/index.legacy-esm.js

@@ -8,7 +8,7 @@ import { usePluginState } from "@player-tools/devtools-desktop-plugins-common";
 import { dequal } from "dequal";
 import { produce } from "immer";
 import set from "lodash.set";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/basic/src/constants/index.ts
 var PLUGIN_ID = "player-ui-basic-devtools-plugin";
@@ -17,7 +17,8 @@ var PLUGIN_DESCRIPTION = "Standard Player UI Devtools";
 var PLUGIN_VERSION = "0.0.1";
 var INTERACTIONS = {
   EVALUATE_EXPRESSION: "evaluate-expression",
-  OVERRIDE_FLOW: "override-flow"
+  OVERRIDE_FLOW: "override-flow",
+  PLAYER_SELECTED: "player-selected"
 };
 var BASE_PLUGIN_DATA = {
   id: PLUGIN_ID,
@@ -892,14 +893,16 @@ var WrapperComponent = ({
   logs,
   flow,
   expressionEvaluator,
-  overrideFlow
+  overrideFlow,
+  id: playerID
 }) => {
-  const [state, playerID, dispatch] = usePluginState();
-  const lastProcessedInteraction = React.useRef(0);
+  const [state, dispatch] = usePluginState({ playerID });
+  const [highlight, setHighlight] = useState(false);
+  const lastProcessedInteraction = useRef(0);
   const expEvaluator = useCallback(getEvaluateExpression(expressionEvaluator), [
     expressionEvaluator
   ]);
-  const id = pluginData.id;
+  const pluginID = pluginData.id;
   const processInteraction = useCallback(
     (interaction) => {
       const {
@@ -908,10 +911,10 @@ var WrapperComponent = ({
       if (type === INTERACTIONS.EVALUATE_EXPRESSION && expressionEvaluator && payload) {
         const result = expEvaluator(payload);
         const newState = produce(state, (draft) => {
-          const current = state?.plugins?.[id]?.flow?.data?.history || [];
+          const current = state?.plugins?.[pluginID]?.flow?.data?.history || [];
           set(
             draft,
-            ["plugins", id, "flow", "data", "history"],
+            ["plugins", pluginID, "flow", "data", "history"],
             [...current, result]
           );
         });
@@ -919,12 +922,12 @@ var WrapperComponent = ({
           id: -1,
           type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
           payload: {
-            pluginID: id,
-            data: newState.plugins[id].flow.data
+            pluginID,
+            data: newState.plugins[pluginID].flow.data
           },
           sender: playerID,
           context: "player",
-          target: "player",
+          target: playerID,
           timestamp: Date.now(),
           _messenger_: true
         });
@@ -939,9 +942,30 @@ var WrapperComponent = ({
         }
         newFlow && overrideFlow(newFlow);
       }
+      if (type === INTERACTIONS.PLAYER_SELECTED && payload) {
+        dispatch({
+          id: -1,
+          type: "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE",
+          payload: { playerID: payload },
+          sender: playerID,
+          context: "player",
+          target: playerID,
+          timestamp: Date.now(),
+          _messenger_: true
+        });
+      }
     },
-    [dispatch, expressionEvaluator, id, state]
+    [dispatch, expressionEvaluator, pluginID, state]
   );
+  useEffect(() => {
+    if (playerID === state.currentPlayer) {
+      setHighlight(true);
+      const timer = setTimeout(() => {
+        setHighlight(false);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }
+  }, [playerID, state.currentPlayer]);
   const pluginDataWithPlayerConfig = produce(pluginData, (draft) => {
     set(draft, ["flow", "data", "playerConfig"], playerConfig);
   });
@@ -951,7 +975,7 @@ var WrapperComponent = ({
       type: "PLAYER_DEVTOOLS_PLAYER_INIT",
       payload: {
         plugins: {
-          [id]: pluginDataWithPlayerConfig
+          [pluginID]: pluginDataWithPlayerConfig
         }
       },
       sender: playerID,
@@ -968,46 +992,50 @@ var WrapperComponent = ({
     }
   }, [state.interactions.length]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.data, data)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.data, data)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "data"], data);
+      set(draft, ["plugins", pluginID, "flow", "data", "data"], data);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [data]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.logs, logs)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.logs, logs)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "logs"], logs);
+      set(draft, ["plugins", pluginID, "flow", "data", "logs"], logs);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [logs]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.flow, flow)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.flow, flow)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "flow"], flow);
+      set(draft, ["plugins", pluginID, "flow", "data", "flow"], flow);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [flow]);
-  return children;
+  return /* @__PURE__ */ React.createElement("div", { id: playerID, style: highlight ? { border: "2px solid blue" } : {} }, children);
 };
 
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/basic/src/index.tsx
 var BasicWevDevtoolsPlugin = class {
+  id;
+  constructor(id) {
+    this.id = id ?? "default-id";
+  }
   name = PLUGIN_ID;
   data = {};
   playerConfig = {};
@@ -1068,7 +1096,8 @@ var BasicWevDevtoolsPlugin = class {
           flow: this.flow,
           view: this.view,
           overrideFlow: this.overrideFlow,
-          expressionEvaluator: this.expressionEvaluator
+          expressionEvaluator: this.expressionEvaluator,
+          id: this.id
         },
         /* @__PURE__ */ React2.createElement(Component, null)
       );

package/dist/index.mjs

@@ -8,7 +8,7 @@ import { usePluginState } from "@player-tools/devtools-desktop-plugins-common";
 import { dequal } from "dequal";
 import { produce } from "immer";
 import set from "lodash.set";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/basic/src/constants/index.ts
 var PLUGIN_ID = "player-ui-basic-devtools-plugin";
@@ -17,7 +17,8 @@ var PLUGIN_DESCRIPTION = "Standard Player UI Devtools";
 var PLUGIN_VERSION = "0.0.1";
 var INTERACTIONS = {
   EVALUATE_EXPRESSION: "evaluate-expression",
-  OVERRIDE_FLOW: "override-flow"
+  OVERRIDE_FLOW: "override-flow",
+  PLAYER_SELECTED: "player-selected"
 };
 var BASE_PLUGIN_DATA = {
   id: PLUGIN_ID,
@@ -892,14 +893,16 @@ var WrapperComponent = ({
   logs,
   flow,
   expressionEvaluator,
-  overrideFlow
+  overrideFlow,
+  id: playerID
 }) => {
-  const [state, playerID, dispatch] = usePluginState();
-  const lastProcessedInteraction = React.useRef(0);
+  const [state, dispatch] = usePluginState({ playerID });
+  const [highlight, setHighlight] = useState(false);
+  const lastProcessedInteraction = useRef(0);
   const expEvaluator = useCallback(getEvaluateExpression(expressionEvaluator), [
     expressionEvaluator
   ]);
-  const id = pluginData.id;
+  const pluginID = pluginData.id;
   const processInteraction = useCallback(
     (interaction) => {
       const {
@@ -908,10 +911,10 @@ var WrapperComponent = ({
       if (type === INTERACTIONS.EVALUATE_EXPRESSION && expressionEvaluator && payload) {
         const result = expEvaluator(payload);
         const newState = produce(state, (draft) => {
-          const current = state?.plugins?.[id]?.flow?.data?.history || [];
+          const current = state?.plugins?.[pluginID]?.flow?.data?.history || [];
           set(
             draft,
-            ["plugins", id, "flow", "data", "history"],
+            ["plugins", pluginID, "flow", "data", "history"],
             [...current, result]
           );
         });
@@ -919,12 +922,12 @@ var WrapperComponent = ({
           id: -1,
           type: "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE",
           payload: {
-            pluginID: id,
-            data: newState.plugins[id].flow.data
+            pluginID,
+            data: newState.plugins[pluginID].flow.data
           },
           sender: playerID,
           context: "player",
-          target: "player",
+          target: playerID,
           timestamp: Date.now(),
           _messenger_: true
         });
@@ -939,9 +942,30 @@ var WrapperComponent = ({
         }
         newFlow && overrideFlow(newFlow);
       }
+      if (type === INTERACTIONS.PLAYER_SELECTED && payload) {
+        dispatch({
+          id: -1,
+          type: "PLAYER_DEVTOOLS_SELECTED_PLAYER_CHANGE",
+          payload: { playerID: payload },
+          sender: playerID,
+          context: "player",
+          target: playerID,
+          timestamp: Date.now(),
+          _messenger_: true
+        });
+      }
     },
-    [dispatch, expressionEvaluator, id, state]
+    [dispatch, expressionEvaluator, pluginID, state]
   );
+  useEffect(() => {
+    if (playerID === state.currentPlayer) {
+      setHighlight(true);
+      const timer = setTimeout(() => {
+        setHighlight(false);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }
+  }, [playerID, state.currentPlayer]);
   const pluginDataWithPlayerConfig = produce(pluginData, (draft) => {
     set(draft, ["flow", "data", "playerConfig"], playerConfig);
   });
@@ -951,7 +975,7 @@ var WrapperComponent = ({
       type: "PLAYER_DEVTOOLS_PLAYER_INIT",
       payload: {
         plugins: {
-          [id]: pluginDataWithPlayerConfig
+          [pluginID]: pluginDataWithPlayerConfig
         }
       },
       sender: playerID,
@@ -968,46 +992,50 @@ var WrapperComponent = ({
     }
   }, [state.interactions.length]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.data, data)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.data, data)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "data"], data);
+      set(draft, ["plugins", pluginID, "flow", "data", "data"], data);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [data]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.logs, logs)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.logs, logs)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "logs"], logs);
+      set(draft, ["plugins", pluginID, "flow", "data", "logs"], logs);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [logs]);
   useEffect(() => {
-    if (dequal(state.plugins[id]?.flow?.data?.flow, flow)) return;
+    if (dequal(state.plugins[pluginID]?.flow?.data?.flow, flow)) return;
     const newState = produce(state, (draft) => {
-      set(draft, ["plugins", id, "flow", "data", "flow"], flow);
+      set(draft, ["plugins", pluginID, "flow", "data", "flow"], flow);
     });
     const transaction = genDataChangeTransaction({
       playerID,
-      data: newState.plugins[id].flow.data,
-      pluginID: id
+      data: newState.plugins[pluginID].flow.data,
+      pluginID
     });
     dispatch(transaction);
   }, [flow]);
-  return children;
+  return /* @__PURE__ */ React.createElement("div", { id: playerID, style: highlight ? { border: "2px solid blue" } : {} }, children);
 };
 
 // ../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/devtools/plugins/desktop/basic/src/index.tsx
 var BasicWevDevtoolsPlugin = class {
+  id;
+  constructor(id) {
+    this.id = id ?? "default-id";
+  }
   name = PLUGIN_ID;
   data = {};
   playerConfig = {};
@@ -1068,7 +1096,8 @@ var BasicWevDevtoolsPlugin = class {
           flow: this.flow,
           view: this.view,
           overrideFlow: this.overrideFlow,
-          expressionEvaluator: this.expressionEvaluator
+          expressionEvaluator: this.expressionEvaluator,
+          id: this.id
         },
         /* @__PURE__ */ React2.createElement(Component, null)
       );