@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,141 @@
+import React, { useMemo, useRef, useState, useEffect } from 'react';
+import type { ReactPlayerProps } from 'react-player';
+import ReactPlayer from 'react-player';
+
+const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
+  const {
+    style,
+    volume = 100,
+    fileCode,
+    playing,
+    url,
+    streamType,
+    videoCode,
+    playbackRate,
+    speed,
+    getEngineApis,
+    onReady,
+    onStart,
+    onPlay,
+    onPause,
+    onProgress,
+    onError,
+    onDuration,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+  
+  const { width, height, ...restStyle } = style || {};
+  const [videoHeight, setVideoHeight] = useState<any>();
+  const [light, setLight] = useState<any>(false);
+  const videoRef = useRef<any>();
+  const [curPlaying, setCurPlaying] = useState(playing);
+  const [videoUrl, setVideoUrl] = useState<any>('');
+  const totalTime = useRef<number>();
+  const rate = useMemo(() => {
+    if (speed && typeof playbackRate === 'number' && playbackRate && playbackRate > 0) {
+      return playbackRate;
+    }
+    return 1;
+  }, [playbackRate, speed]);
+
+  useEffect(() => {
+    setCurPlaying(playing);
+  }, [playing]);
+
+  /**
+  * 音量的值为0-1
+  */
+  const myVolume = useMemo(() => {
+    if (!isNaN(volume)) {
+      return volume / 100;
+    }
+    return 1;
+  }, [volume]);
+  useEffect(() => {
+    if (!height && videoRef?.current?.offsetWidth) { // UI要求默认按照16:9设置高度
+      const targetHeigth = videoRef?.current?.offsetWidth / 16 * 9;
+      setVideoHeight(targetHeigth);
+    } else {
+      setVideoHeight(height);
+    }
+  }, [height]);
+
+  /**
+   * 封面图片
+   */
+  useEffect(() => {
+    if (fileCode) {
+      (async () => {
+        try {
+          setLight(await engineApis?.service?.getAppFileUrlByFileCode(fileCode));
+        } catch (e) {
+          console.log(`获取视频封面出错:${e}`);
+        }
+      })();
+    } else {
+      setLight(false);
+    }
+  }, [fileCode]);
+
+  useEffect(() => {
+    if (streamType === 'fileCode') {
+      if (videoCode) {
+        (async () => {
+          try {
+            setVideoUrl(await engineApis?.service?.getAppFileUrlByFileCode(videoCode));
+          } catch (e) {
+            console.log(`获取视频资源出错:${e}`);
+          }
+        })();
+      } else {
+        setVideoUrl('');
+      }
+    } else {
+      setVideoUrl(url);
+    }
+  }, [streamType, videoCode, url]);
+  return (
+    <div ref={videoRef} style={{ width: '100%', height: videoHeight, borderRadius: style?.borderRadius || '0px' }}>
+      <ReactPlayer
+        width={width || '100%'}
+        height={videoHeight || '100%'}
+        style={restStyle}
+        volume={myVolume}
+        light={light}
+        playing={curPlaying}
+        playbackRate={rate}
+        onClickPreview={() => {
+          setCurPlaying(true);// 点击封面的图标加载完成需要自动播放
+        }}
+        onEnded={() => {
+          if (!playing) { // 当前没有设置自动播放则需要在播放完成时将自动播放的时改为用户设置的值
+            setCurPlaying(false);
+          }
+          if (props?.onEnded) {
+            // 播放结束，回掉总时长
+            // @ts-ignore
+            props?.onEnded(totalTime.current);
+          }
+        }}
+        url={videoUrl}
+        onReady={onReady}
+        onStart={onStart}
+        onPlay={onPlay}
+        onPause={onPause}
+        onProgress={onProgress}
+        onError={onError}
+        onDuration={(total: number) => {
+          totalTime.current = total;
+          onDuration && onDuration(total);
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+VideoPlayer.displayName = 'VideoPlayer';
+
+export default VideoPlayer;

package/lib/pcpublic/src/components/pcfactory/src/VideoPlayer/index.tsx

@@ -1,150 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useImperativeHandle } from 'react';
+import ViewPlayerLoader from './loader';
 import type { ReactPlayerProps } from 'react-player';
-import ReactPlayer from 'react-player';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
-const VideoPlayer: React.FC<ReactPlayerProps> = (props, ref) => {
-  const {
-    style,
-    volume = 100,
-    fileCode,
-    playing,
-    url,
-    streamType,
-    videoCode,
-    playbackRate,
-    speed,
-    getEngineApis,
-    onReady,
-    onStart,
-    onPlay,
-    onPause,
-    onProgress,
-    onError,
-    onDuration,
-    ...restProps
-  } = props;
 
-  const engineApis = getEngineApis?.() || {};
-
-  const { width, height, ...restStyle } = style || {};
-  const [videoHeight, setVideoHeight] = useState<any>();
-  const [light, setLight] = useState<any>(false);
-  const videoRef = useRef<any>();
-  const [curPlaying, setCurPlaying] = useState(playing);
-  const [videoUrl, setVideoUrl] = useState<any>('');
-  const totalTime = useRef<number>();
-  const rate = useMemo(() => {
-    if (speed && typeof playbackRate === 'number' && playbackRate && playbackRate > 0) {
-      return playbackRate;
-    }
-    return 1;
-  }, [playbackRate, speed]);
-
-  useEffect(() => {
-    setCurPlaying(playing);
-  }, [playing]);
-
-  /**
-   * 音量的值为0-1
-   */
-  const myVolume = useMemo(() => {
-    if (!isNaN(volume)) {
-      return volume / 100;
-    }
-    return 1;
-  }, [volume]);
-  useEffect(() => {
-    if (!height && videoRef?.current?.offsetWidth) {
-      // UI要求默认按照16:9设置高度
-      const targetHeigth = (videoRef?.current?.offsetWidth / 16) * 9;
-      setVideoHeight(targetHeigth);
-    } else {
-      setVideoHeight(height);
-    }
-  }, [height]);
-
-  /**
-   * 封面图片
-   */
-  useEffect(() => {
-    if (fileCode) {
-      (async () => {
-        try {
-          setLight(await engineApis?.service?.getAppFileUrlByFileCode(fileCode));
-        } catch (e) {
-          console.log(`获取视频封面出错:${e}`);
-        }
-      })();
-    } else {
-      setLight(false);
-    }
-  }, [fileCode]);
-
-  useEffect(() => {
-    if (streamType === 'fileCode') {
-      if (videoCode) {
-        (async () => {
-          try {
-            setVideoUrl(await engineApis?.service?.getAppFileUrlByFileCode(videoCode));
-          } catch (e) {
-            console.log(`获取视频资源出错:${e}`);
-          }
-        })();
-      } else {
-        setVideoUrl('');
-      }
-    } else {
-      setVideoUrl(url);
-    }
-  }, [streamType, videoCode, url]);
-  return (
-    <div
-      ref={videoRef}
-      style={{
-        width: '100%',
-        height: videoHeight,
-        borderRadius: style?.borderRadius || '0px',
-      }}
-    >
-      <ReactPlayer
-        width={width || '100%'}
-        height={videoHeight || '100%'}
-        style={restStyle}
-        volume={myVolume}
-        light={light}
-        playing={curPlaying}
-        playbackRate={rate}
-        onClickPreview={() => {
-          setCurPlaying(true); // 点击封面的图标加载完成需要自动播放
-        }}
-        onEnded={() => {
-          if (!playing) {
-            // 当前没有设置自动播放则需要在播放完成时将自动播放的时改为用户设置的值
-            setCurPlaying(false);
-          }
-          if (props?.onEnded) {
-            // 播放结束，回掉总时长
-            // @ts-ignore
-            props?.onEnded(totalTime.current);
-          }
-        }}
-        url={videoUrl}
-        onReady={onReady}
-        onStart={onStart}
-        onPlay={onPlay}
-        onPause={onPause}
-        onProgress={onProgress}
-        onError={onError}
-        onDuration={(total: number) => {
-          totalTime.current = total;
-          onDuration && onDuration(total);
-        }}
-        {...restProps}
-      />
-    </div>
-  );
-};
-
-VideoPlayer.displayName = 'VideoPlayer';
+const VideoPlayer = LingxiForwardRef<unknown, ReactPlayerProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return <ViewPlayerLoader {...props} />;
+});
 
 export default VideoPlayer;

package/lib/pcpublic/src/components/pcfactory/src/VideoPlayer/loader.tsx

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+import type { ReactPlayerProps } from 'react-player';
+
+
+const ViewPlayerLoader = Loadable<ReactPlayerProps, React.ComponentType<ReactPlayerProps>>({
+  // eslint-disable-next-line func-call-spacing
+  loader: async () => (await import /* webpackChunkName: 'pcFactory-VideoPlayer' */ ('./VideoPlayer')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ViewPlayerLoader;

package/lib/pcpublic/src/components/pcfactory/src/View/index.tsx

@@ -1,11 +1,4 @@
-import React, {
-  CSSProperties,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useBackgroundStyle from './useBackgroundStyle';
 import { useHiddenStyle, useListenProps } from '../utils';
 import { LingxiForwardRef } from '@lingxiteam/types';
@@ -23,7 +16,8 @@ export interface MyViewProps {
   visibility?: boolean;
 }
 
-const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
+
+const View = LingxiForwardRef<any, MyViewProps>((props:any, ref) => {
   const {
     children,
     style,
@@ -45,12 +39,7 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
 
   const { lang } = useLocale(engineApis);
 
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId: restProps?.appId,
-    mode: 'engine',
-  });
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId: restProps?.appId, mode: 'engine' });
 
   const finalStyle = useHiddenStyle(visible, style, visibility);
 
@@ -62,10 +51,18 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
   const getLoadingStyle = (isShow: boolean): CSSProperties => {
     const res: CSSProperties = {};
     if (containerRef.current && loadingRef.current) {
-      const { offsetWidth, offsetHeight } = containerRef.current;
       const containerRefProps = window.getComputedStyle(containerRef.current);
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      const containerOffset = containerRef.current.getBoundingClientRect();
+      // 获取loading基于父级的偏移量
+      const loadingOffset = loadingRef.current.getBoundingClientRect();
 
-      // res.position = 'absolute';
+      const offset = {
+        x: loadingOffset.left - containerOffset.left,
+        y: loadingOffset.top - containerOffset.top,
+      };
+
+      res.position = 'absolute';
       res.width = `${offsetWidth}px`;
       res.height = `${offsetHeight}px`;
       res.zIndex = containerRefProps.zIndex;
@@ -73,8 +70,11 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
       res.display = 'flex';
       res.justifyContent = 'center';
       res.alignItems = 'center';
-      // res.left = 0;
-      // res.top = 0;
+      res.left = 0;
+      res.top = 0;
+      if (offset.x > 0 || offset.y > 0) {
+        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
+      }
     }
     if (!isShow) {
       res.display = 'none';
@@ -91,14 +91,7 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
       );
     }
     return null;
-  }, [
-    loading,
-    loadingRef.current,
-    reload,
-    lang,
-    dataState?.loading,
-    loadingText,
-  ]);
+  }, [loading, loadingRef.current, reload, lang, dataState?.loading, loadingText]);
 
   useEffect(() => {
     if (loading) {
@@ -119,23 +112,12 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
   //   return null;
   // }
 
-  const combineStyle = useMemo(() => {
-    if (loading) {
-      return {
-        ...backgroundStyle,
-        ...finalStyle,
-        overflow: 'hidden',
-      };
-    }
-    return {
-      ...backgroundStyle,
-      ...finalStyle,
-    };
-  }, [backgroundStyle, finalStyle, loading]);
-
   return (
     <div
-      style={combineStyle}
+      style={{
+        ...backgroundStyle,
+        ...finalStyle,
+      }}
       className={className}
       data-compid={props?.['data-compid']}
       {...restProps}
@@ -143,24 +125,16 @@ const View = LingxiForwardRef<any, MyViewProps>((props: any, ref) => {
     >
       {children}
       {/* loading 定位元素 */}
-      {loading && (
-        <div
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            left: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 99,
-          }}
-          ref={loadingRef}
-        >
-          {renderLoadingComp}
-        </div>
-      )}
+      {
+        loading && (
+          <div
+            style={{ width: 0, height: 0, position: 'relative', backgroundColor: 'transparent', visibility: loading ? 'visible' : 'hidden' }}
+            ref={loadingRef}
+          >
+            {renderLoadingComp}
+          </div>
+        )
+      }
     </div>
   );
 });

package/lib/pcpublic/src/components/pcfactory/src/View/useBackgroundStyle.ts

@@ -1,13 +1,17 @@
 import { useEffect, useMemo, useState } from 'react';
 
 interface BackgroundConfig {
-  backgroundType?: any;
-  mode?: string;
-  appId?: string;
+  backgroundType?:any;
+  mode?:string;
+  appId?:string;
   engineApis?: any;
 }
-const useBackgroundStyle = (props: BackgroundConfig) => {
-  const { backgroundType, mode = 'editor', engineApis } = props || {};
+const useBackgroundStyle = (props:BackgroundConfig) => {
+  const {
+    backgroundType,
+    mode = 'editor',
+    engineApis,
+  } = props || {};
 
   const [imgSrc, setImgSrc] = useState('');
 
@@ -27,12 +31,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
               func = engineApis.getAppFileUrlByFileCode;
             }
             if (func) {
-              setImgSrc(
-                await func({
-                  appId: props?.appId || window.appId,
-                  fileCode: code,
-                })
-              );
+              setImgSrc(await func({ appId: props?.appId || window.appId, fileCode: code }));
             }
           } else if (mode === 'engine') {
             setImgSrc(await engineApis?.service?.getAppFileUrlByFileCode(code));
@@ -48,7 +47,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
     if (backgroundType) {
       const { type, color, image, imageType } = backgroundType || {};
       const { fileUrl } = image || {};
-      const obj: any = {};
+      const obj:any = {};
       if (type === 'image') {
         let url = '';
         if (imageType === 'custom') {

package/lib/pcpublic/src/components/pcfactory/src/VirtualGroup/index.tsx

@@ -1,5 +1,5 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { CSSProperties } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
 
 export interface VirtualGroupProps {
   style: CSSProperties;

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/WebComponent.tsx

@@ -10,17 +10,7 @@ const WebComponent = LingxiForwardRef<any, WebComponentProps>((props, ref) => {
   const { iframeRef, src, style } = useWebComponent(props);
   const hiddenStyle = useHiddenStyle(visible, style);
 
-  return (
-    <iframe
-      data-compid={props?.['data-compid']}
-      className={classNames('ued-webComponent', className)}
-      ref={iframeRef}
-      style={hiddenStyle}
-      src={src}
-      title="WebComponent"
-      name={name}
-    />
-  );
+  return <iframe data-compid={props?.['data-compid']} className={classNames('ued-webComponent', className)} ref={iframeRef} style={hiddenStyle} src={src} title="WebComponent" name={name} />;
 });
 
 export default WebComponent;

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/index.tsx

@@ -3,7 +3,7 @@ import { LoadingComponennt } from '../utils/LoaderHelper';
 
 const WebComponent = Loadable({
   // eslint-disable-next-line func-call-spacing
-  loader: async () => (await import(/* webpackChunkName: 'factory-Upload' */ './WebComponent')) as unknown as React.ComponentType<any>,
+  loader: async () => (await import /* webpackChunkName: 'factory-Upload' */('./WebComponent')) as unknown as React.ComponentType<any>,
   loading: LoadingComponennt,
 });
 

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/useWebComponent.ts

@@ -19,7 +19,7 @@ export interface WebComponentProps
   style: React.CSSProperties & {
     // 暴漏的样式
     exposeStyle: Record<string, any>;
-  };
+  }
 
   // 暴露的方法
   [key: string]: any;
@@ -57,7 +57,7 @@ const useWebComponent = (props: WebComponentProps) => {
         data,
         key: messageKey,
       };
-
+  
       iframeRef.current?.contentWindow?.postMessage(contentWindowData, {
         targetOrigin: getURLOrigin(src),
       });

package/lib/pcpublic/src/components/pcfactory/src/WebComponent/utils.ts

@@ -20,6 +20,7 @@ export const appendUrlParams = (url?: string, params?: Record<string, any>, opti
   return `${host}?${urlParams.toString()}`;
 };
 
+
 export const getURLOrigin = (url?: string) => {
   if (typeof url !== 'string') return '*';
   if (!/^http[s]{0,1}:\/\//.test(url)) return '*';

package/lib/pcpublic/src/components/pcfactory/src/Webview/index.tsx

@@ -1,29 +1,47 @@
+import React, { useRef, useEffect, useImperativeHandle, useState, CSSProperties } from 'react';
+import {
+  addEventListenerMessage,
+  postMessageToContentWindow,
+  removeEventListenerMessage,
+} from 'lcdp-message';
+import { useHiddenStyle } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { addEventListenerMessage, postMessageToContentWindow, removeEventListenerMessage } from 'lcdp-message';
-import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useHiddenStyle, useListenProps } from '../utils';
+import classNames from 'classnames';
 
 export interface MyWebviewProps {
   __compId?: string;
   getWebviewApis?: (e: MyWebviewProps['__compId'], opts: Record<string, any>) => void;
   onMessage?: React.FC<any>;
   title?: string;
-  src?: string;
+  src?: {
+    type: 'url' | 'bote',
+    url?: string,
+    standardServiceNbr?: string,
+  };
   visible: boolean;
   style?: CSSProperties;
+  backgroundType?: any;
+  appId?: string;
+  getEngineApis?: any;
 }
 
-// const prefixCls = 'webview';
+const webviewCls = 'ued-webview';
 
 const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
-  const { __compId, getWebviewApis, onMessage = () => {}, style, visible, title, ...restProps } = props;
+  const {
+    __compId, getWebviewApis, onMessage = () => { }, style, visible, title, getEngineApis, appId, backgroundType, className, ...restProps
+  } = props;
   const hiddenStyle = useHiddenStyle(visible, style);
   const webViewRef = useRef<HTMLIFrameElement | null>(null);
   const getContentWindow = () => webViewRef?.current?.contentWindow;
+  const engineApis = getEngineApis?.() || {};
 
   const [update, setUpdate] = useState(() => String(Date.now()));
 
-  const [src, setSrc] = useListenProps(props.src);
+  const [src, setSrc] = useState('');
+
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId, mode: 'engine' });
 
   const postMessage = (data: unknown) => {
     if (webViewRef.current) {
@@ -50,6 +68,32 @@ const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
     onMessage && onMessage(d);
   };
 
+  useEffect(() => {
+    if (!props.src) {
+      return;
+    }
+    const { url, standardServiceNbr } = props.src || {};
+    if (url) {
+      setSrc(url);
+    } else if (standardServiceNbr) {
+      (async () => {
+        try {
+          const boteUrl = await engineApis?.service?.callRhinEngineForPage({
+            appId,
+            pageId: props.$$componentItem.pageId,
+            serviceRequest: {},
+            providerType: 'botePage',
+            capabilityCode: standardServiceNbr,
+            apiCode: standardServiceNbr,
+          });
+          setSrc(boteUrl);
+        } catch (e) {
+          console.log(e);
+        }
+      })();
+    }
+  }, [props.src]);
+
   useImperativeHandle(ref, () => ({
     setSrc: (_url: string) => {
       setSrc(_url);
@@ -69,7 +113,18 @@ const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
     };
   }, []);
 
-  return <iframe title="title" ref={webViewRef} {...restProps} src={src} key={update} style={hiddenStyle} />;
+  return <iframe
+    title="title"
+    ref={webViewRef}
+    {...restProps}
+    className={classNames(`${webviewCls}-iframe`, className)}
+    src={src}
+    key={update}
+    style={{
+      ...hiddenStyle,
+      ...backgroundStyle,
+    }}
+  />;
 });
 
 export default Webview;