fix: lost global hook vars

Author: sarike

client/packages/openblocks/src/components/resultPanel/BottomResultPanel.tsx

@@ -57,6 +57,7 @@ export const BottomResultPanel = (props: BottomResultPanelProps) => {
     <Draggable
       disabled={unDraggable}
       bounds={bounds}
+      enableUserSelectHack={false}
       onStart={(event, uiData) => {
         const { clientWidth, clientHeight } = window.document.documentElement;
         const targetRect = draggableRef.current?.getBoundingClientRect();

client/packages/openblocks/src/comps/comps/dataChangeResponderComp.tsx

@@ -99,17 +99,17 @@ class DataChangeResponderAsBottomRes extends DataResponderItemCompBase implement
   }
   reduce(action: CompAction<any>) {
     if (action.type === CompActionTypes.UPDATE_NODES_V2) {
-      const depends = this.children.data.node().dependValues();
+      const value = action.value.data.value;
       const dsl = this.children.data.toJsonValue();
-      const lastDependsKey = "__data_responder_data_last_depends";
-      const lastDslKey = "__data_responder_last_node";
+      const lastDataValueKey = "__data_responder_data_last_value";
+      const lastDataDslKey = "__data_responder_last_dsl";
       const target = this as any;
-      const preDepends = target[lastDependsKey];
-      const preDsl = target[lastDslKey];
-      const dependsChanged = !_.isEqual(preDepends, depends);
+      const preValue = target[lastDataValueKey];
+      const preDsl = target[lastDataDslKey];
+      const valueChanged = !_.isEqual(preValue, value);
       const dslNotChanged = _.isEqual(preDsl, dsl);
 
-      if (dependsChanged && dslNotChanged) {
+      if (valueChanged && dslNotChanged) {
         const onEvent = this.children.onEvent.getView();
         setTimeout(() => {
           onEvent("dataChange");
@@ -118,8 +118,8 @@ class DataChangeResponderAsBottomRes extends DataResponderItemCompBase implement
 
       const next = super.reduce(action);
       return setFieldsNoTypeCheck(next, {
-        [lastDependsKey]: depends,
-        [lastDslKey]: dsl,
+        [lastDataValueKey]: value,
+        [lastDataDslKey]: dsl,
       });
     }
     return super.reduce(action);

client/packages/openblocks/src/comps/comps/layout/layoutMenuItemComp.tsx

@@ -12,7 +12,7 @@ import {
 } from "comps/generators/multi";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { AppTypeEnum } from "constants/applicationConstants";
-import { BranchDiv, Dropdown } from "openblocks-design";
+import { BranchDiv, Dropdown, Treediv } from "openblocks-design";
 import _ from "lodash";
 import { ReactNode, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -130,7 +130,7 @@ export class LayoutMenuItemComp extends MultiBaseComp<ChildrenType> {
             label: trans("aggregation.hideWhenNoPermission"),
           })}
         {isLeaf && (
-          <>
+          <Treediv>
             <BranchDiv>
               {this.children.queryParam.propertyView({
                 label: trans("aggregation.queryParam"),
@@ -143,7 +143,7 @@ export class LayoutMenuItemComp extends MultiBaseComp<ChildrenType> {
                 layout: "vertical",
               })}
             </BranchDiv>
-          </>
+          </Treediv>
         )}
       </>
     );

client/packages/openblocks/src/comps/comps/mediaComp/audioComp.tsx

@@ -5,17 +5,14 @@ import { StringStateControl } from "../../controls/codeStateControl";
 import { UICompBuilder } from "../../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
 import { RecordConstructorToView } from "openblocks-core";
-import { useRef } from "react";
 import { styleControl } from "comps/controls/styleControl";
 import { ImageStyle } from "comps/controls/styleControlConstants";
 import { TacoAudio } from "openblocks-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { trans } from "i18n";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
-import { RefControl } from "comps/controls/refControl";
-import { refMethods } from "comps/generators/withMethodExposing";
-import ReactPlayer from "react-player";
+import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 
 const Container = styled.div`
   height: 100%;
@@ -42,10 +39,8 @@ const EventOptions = [
 ] as const;
 
 const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
-  const conRef = useRef<HTMLDivElement>(null);
-
   return (
-    <Container ref={conRef}>
+    <Container ref={props.containerRef}>
       <TacoAudio
         audioRef={props.viewRef}
         url={props.src.value}
@@ -65,7 +60,7 @@ const childrenMap = {
   style: styleControl(ImageStyle),
   autoPlay: BoolControl,
   loop: BoolControl,
-  viewRef: RefControl<ReactPlayer>,
+  ...mediaCommonChildren,
 };
 
 let AudioBasicComp = (function () {
@@ -93,7 +88,7 @@ let AudioBasicComp = (function () {
         </>
       );
     })
-    .setExposeMethodConfigs(refMethods(["seekTo", "showPreview"]))
+    .setExposeMethodConfigs(mediaMethods())
     .build();
 })();
 

client/packages/openblocks/src/comps/comps/mediaComp/mediaUtils.tsx

@@ -0,0 +1,71 @@
+import { RefControl } from "comps/controls/refControl";
+import { ToInstanceType } from "comps/generators/multi";
+import {
+  ExposeMethodCompConstructor,
+  MethodConfigInfo,
+  refMethods,
+} from "comps/generators/withMethodExposing";
+import { trans } from "i18n";
+import { MultiBaseComp } from "openblocks-core";
+import ReactPlayer from "react-player";
+
+export const mediaCommonChildren = {
+  viewRef: RefControl<ReactPlayer>,
+  containerRef: RefControl<HTMLDivElement>,
+};
+
+type MediaCompType = ExposeMethodCompConstructor<
+  MultiBaseComp<ToInstanceType<typeof mediaCommonChildren>>
+>;
+
+export function mediaMethods(): MethodConfigInfo<MediaCompType>[] {
+  return [
+    ...refMethods<MediaCompType>(["seekTo", "showPreview"]),
+    {
+      method: {
+        name: "play",
+        description: trans("media.playDesc"),
+        params: [],
+      },
+      execute: (comp) => {
+        const player = comp.children.viewRef.viewRef?.getInternalPlayer();
+        if (player && player["play"]) {
+          return (player as HTMLMediaElement).play();
+        } else {
+          const element = comp.children.containerRef.viewRef
+            ?.getElementsByClassName("react-player__preview")
+            ?.item(0);
+          if (element) {
+            (element as HTMLElement).click?.();
+          }
+        }
+      },
+    },
+    {
+      method: {
+        name: "pause",
+        description: trans("media.pauseDesc"),
+        params: [],
+      },
+      execute: (comp) => {
+        const player = comp.children.viewRef.viewRef?.getInternalPlayer();
+        if (player && player["pause"]) {
+          (player as HTMLMediaElement).pause();
+        }
+      },
+    },
+    {
+      method: {
+        name: "load",
+        description: trans("media.loadDesc"),
+        params: [],
+      },
+      execute: (comp) => {
+        const player = comp.children.viewRef.viewRef?.getInternalPlayer();
+        if (player && player["load"]) {
+          (player as HTMLMediaElement).load();
+        }
+      },
+    },
+  ];
+}

client/packages/openblocks/src/comps/comps/mediaComp/videoComp.tsx

@@ -15,8 +15,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "openblocks-design";
 import ReactPlayer from "react-player";
-import { RefControl } from "comps/controls/refControl";
-import { refMethods } from "comps/generators/withMethodExposing";
+import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 
 const EventOptions = [
   { label: trans("video.play"), value: "play", description: trans("video.playDesc") },
@@ -27,10 +26,9 @@ const EventOptions = [
 
 const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
   const videoRef = useRef<ReactPlayer | null>(null);
-  const conRef = useRef<HTMLDivElement>(null);
   let [posterClicked, setPosterClicked] = useState(false);
   return (
-    <Container ref={conRef}>
+    <Container ref={props.containerRef}>
       <Video
         config={{
           file: {
@@ -84,7 +82,7 @@ const childrenMap = {
   playbackRate: RangeControl.closed(1, 2, 1),
   currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
   duration: numberExposingStateControl("duration"),
-  viewRef: RefControl<ReactPlayer>,
+  ...mediaCommonChildren,
 };
 
 let VideoBasicComp = (function () {
@@ -129,7 +127,7 @@ let VideoBasicComp = (function () {
         </>
       );
     })
-    .setExposeMethodConfigs(refMethods(["seekTo", "showPreview"]))
+    .setExposeMethodConfigs(mediaMethods())
     .build();
 })();
 

client/packages/openblocks/src/comps/hooks/hookListComp.tsx

@@ -1,5 +1,5 @@
 import { withDefault } from "comps/generators";
-import { list } from "comps/generators/list";
+import { list, ListDataType } from "comps/generators/list";
 import { NameAndExposingInfo } from "comps/utils/exposingTypes";
 import {
   CompTree,
@@ -9,13 +9,36 @@ import {
 } from "comps/comps/containerBase/utils";
 import { HookComp } from "./hookComp";
 import { hookCompCategory } from "./hookCompTypes";
+import { CompParams } from "openblocks-core";
+
+const defaultHookListValue = [
+  // { compType: "title", name: "title" },
+  // { compType: "windowSize", name: "windowSize" },
+  { compType: "urlParams", name: "url" },
+  { compType: "momentJsLib", name: "moment" },
+  { compType: "lodashJsLib", name: "_" },
+  { compType: "utils", name: "utils" },
+  { compType: "message", name: "message" },
+  { compType: "localStorage", name: "localStorage" },
+  { compType: "currentUser", name: "currentUser" },
+  { compType: "theme", name: "theme" },
+] as const;
 
 const HookListTmpComp = list(HookComp);
 const HookListTmp2Comp = class extends HookListTmpComp {
   getAllCompItems() {
     return getAllCompItems(this.getCompTree());
   }
 
+  override parseChildrenFromValue(params: CompParams<ListDataType<typeof HookComp>>) {
+    const existed = (params.value || []).map((i) => i.compType);
+    const lostItems = defaultHookListValue.filter((i) => !existed.includes(i.compType));
+    return super.parseChildrenFromValue({
+      ...params,
+      value: [...(params.value || []), ...lostItems],
+    });
+  }
+
   private getCompTree(): CompTree {
     const compMap = Object.values(this.children).reduce<Record<string, HookComp>>((res, cur) => {
       res[cur.children.name.getView()] = cur;
@@ -71,16 +94,8 @@ const HookListTmp2Comp = class extends HookListTmpComp {
   }
 };
 
-const HookListTmp3Comp = withDefault(HookListTmp2Comp, [
-  // { compType: "title", name: "title" },
-  // { compType: "windowSize", name: "windowSize" },
-  { compType: "urlParams", name: "url" },
-  { compType: "momentJsLib", name: "moment" },
-  { compType: "lodashJsLib", name: "_" },
-  { compType: "utils", name: "utils" },
-  { compType: "message", name: "message" },
-  { compType: "localStorage", name: "localStorage" },
-  { compType: "currentUser", name: "currentUser" },
-  { compType: "theme", name: "theme" },
-]);
+const HookListTmp3Comp = withDefault(
+  HookListTmp2Comp,
+  defaultHookListValue as unknown as ListDataType<typeof HookComp>
+);
 export const HookListComp = HookListTmp3Comp;

client/packages/openblocks/src/i18n/locales/en.ts

@@ -1239,6 +1239,11 @@ export const en = {
     currentTimeStamp: "The current playback position of the video in seconds",
     duration: "The total duration of the video in seconds",
   },
+  media: {
+    playDesc: "Begins playback of the media.",
+    pauseDesc: "Pauses the media playback.",
+    loadDesc: "Resets the media to the beginning and restart selecting the media resource.",
+  },
   rangeSlider: {
     start: "Start value",
     end: "End value",