@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/Animation/useAnimation.ts

@@ -0,0 +1,281 @@
+import _ from 'lodash';
+import type { ITimelineCallBack } from 'rc-tween-one';
+import { Ref, useImperativeHandle, useMemo, useRef, useState } from 'react';
+
+export interface AnimationOpts {
+  effect: string;
+  animation: any[];
+  repeat: number | 'custom';
+  reverse: boolean;
+  ease: string;
+  autoPlay: boolean;
+  repeatCustom: number;
+  left?: string | 'custom';
+  top?: string | 'custom';
+  xCustom?: number;
+  yCustom?: number;
+  opacity?: number;
+  scale?: number;
+  rotate?: number;
+  onChange: (v: ITimelineCallBack) => void;
+  onStart: (v: any) => void;
+  onEnd: (v: ITimelineCallBack) => void;
+  duration: number;
+  yoyo: boolean;
+  repeatDelay: number;
+  visible?: 0 | 1;
+}
+
+const removeNullOrUndefined = (obj: Record<string, any>) => {
+  if (!obj) {
+    return obj;
+  }
+  Object.keys(obj).forEach((key) => {
+    if (_.isNull(obj[key]) || _.isUndefined(obj[key])) {
+      delete obj[key];
+    }
+  });
+  return obj;
+};
+
+export const useAnimation = (
+  opts: AnimationOpts,
+  ref: Ref<unknown> | undefined,
+) => {
+  const {
+    effect,
+    repeatCustom,
+    reverse,
+    ease,
+    autoPlay,
+    opacity,
+    scale,
+    yoyo,
+    rotate,
+    duration,
+    repeatDelay = 0,
+    xCustom: leftCustom,
+    yCustom: topCustom,
+    visible,
+  } = opts;
+
+  const [paused, setPaused] = useState(!autoPlay);
+  const [moment, setMoment] = useState<number>(null as any);
+  const needRestartRef = useRef(false); // 是否需要重新播放
+
+  /**
+   * 播放动画
+   */
+  const playAnimation = () => {
+    onStart();
+    setMoment(needRestartRef.current ? 0 : (null as any));
+    setPaused(false);
+    needRestartRef.current = false;
+  };
+
+  /**
+   * 暂停动画
+   */
+  const pasueAnimation = () => {
+    setMoment(null as any);
+    setPaused(true);
+  };
+
+  /**
+   * 特殊处理onStart函数
+   * @param v
+   */
+  const onStart = () => {
+    if (opts.onStart) {
+      opts.onStart({
+        mode: 'onTimelineStart',
+        moment,
+        repeat,
+      });
+    }
+  };
+
+  /**
+   * 切换动画播放
+   */
+  const toggleAnimation = () => {
+    if (paused) {
+      playAnimation();
+    } else {
+      pasueAnimation();
+    }
+  };
+
+  const onEnd = (v: ITimelineCallBack) => {
+    if (opts.onEnd) {
+      opts.onEnd(v);
+    }
+    needRestartRef.current = true;
+    setMoment(null as any);
+    setPaused(true);
+  };
+
+  const onChangeTimeline = (v: ITimelineCallBack) => {
+    const { mode } = v;
+    switch (mode) {
+      case 'onTimelineStart':
+        if (autoPlay) {
+          onStart();
+        }
+        break;
+      case 'onTimelineComplete':
+        onEnd(v);
+        break;
+      case 'onTimelineUpdate':
+        opts.onChange && opts.onChange(v);
+      // eslint-disable-next-line no-fallthrough
+      default:
+        break;
+    }
+  };
+
+  const toggelAudioStatus = (type: string) => {
+    switch (type) {
+      case 'play':
+        playAnimation();
+        break;
+      case 'pasue':
+        pasueAnimation();
+        break;
+      case 'toggle':
+        toggleAnimation();
+        break;
+      default:
+        break;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onOperationAudio: (status: string) => {
+      toggelAudioStatus(status);
+    },
+    get visible() {
+      return visible;
+    },
+  }));
+
+  const repeat = useMemo(() => {
+    let rep = opts.repeat;
+    if (opts.repeat === 'custom') {
+      rep = repeatCustom * 2;
+      // 理论上当重复次数大于0时 动画执行一个来回才算是一个执行周期。
+      if (repeatCustom > 0) {
+        rep = (repeatCustom - 1) * 2;
+      }
+      // 不允许倒放时，只需要配置重复次数即可
+      if (!yoyo && repeatCustom > 0) {
+        rep = repeatCustom - 1;
+      }
+    }
+    return rep as number;
+  }, [opts.repeat]);
+
+  const IAnimation = useMemo(() => {
+    const animation = opts.animation || [];
+    return animation?.map((item) => ({
+      ...item,
+      ...item.style,
+    }));
+  }, [opts.animation]);
+
+  if (effect === 'custom') {
+    return {
+      animation: IAnimation,
+      paused,
+      moment,
+      onChangeTimeline,
+      visible,
+    };
+  }
+
+  const { x, y } = useMemo(() => {
+    const { left: optsX, top: optsY } = opts;
+    let newX: number | string | undefined = optsX;
+    let newY: number | string | undefined = optsY;
+    if (optsX === 'custom') {
+      newX = leftCustom;
+    }
+
+    if (optsY === 'custom') {
+      newY = topCustom;
+    }
+
+    return {
+      x: newX,
+      y: newY,
+    };
+  }, [opts.left, opts.top, leftCustom, topCustom]);
+
+  const getMoveAni = () => {
+    const ani: any = {
+      left: x,
+      top: y,
+    };
+    // 这里选择位置时，保持组件的中心移动到指定位置
+    if (opts.left !== 'custom') {
+      if (['25vw', '33.33vw', '50vw', '75vw'].includes(`${x || ''}`)) {
+        ani.x = '-50%';
+      } else if (['100vw'].includes(`${x || ''}`)) {
+        ani.x = '-100%';
+      }
+    }
+    if (opts.top !== 'custom') {
+      if (['25vh', '33.33vh', '50vh', '75vh'].includes(`${y || ''}`)) {
+        ani.y = '-50%';
+      } else if (['100vh'].includes(`${y || ''}`)) {
+        ani.y = '-100%';
+      }
+    }
+
+    return ani;
+  };
+
+  const animation = useMemo(() => {
+    let ani = {};
+    switch (effect) {
+      case 'move':
+        ani = getMoveAni();
+        break;
+      case 'opacity':
+        ani = {
+          opacity,
+        };
+        break;
+      case 'scale':
+        ani = {
+          scale,
+        };
+        break;
+      case 'rotate':
+        ani = {
+          rotate,
+        };
+        break;
+      default:
+        break;
+    }
+
+    return {
+      ...ani,
+      ease,
+      reverse,
+      duration,
+    };
+  }, [effect, x, y, opacity, scale, rotate, duration, ease, reverse]);
+
+  return {
+    yoyo,
+    repeat,
+    paused,
+    moment,
+    animation: removeNullOrUndefined(animation),
+    repeatDelay,
+    onChangeTimeline,
+    visible,
+  };
+};

package/lib/h5public/src/components/factory/src/Animation/useStyle.ts

@@ -0,0 +1,124 @@
+import _ from 'lodash';
+import type React from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { $$componentItem } from '../interfaces/types';
+import { getImageSize } from '../utils/getImageSize';
+
+export interface AppViewProps {
+  style?: CSSProperties;
+  src?: string;
+  visible?: 0 | 1;
+  fileCode?: string;
+  backgroundType: any;
+  $$componentItem?: $$componentItem;
+}
+
+const useStyle = (
+  props: AppViewProps,
+  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
+) => {
+  const { src: imgSrc, style, backgroundType = {} } = props;
+  const { mode, type, color, startColor, endColor } = backgroundType || {};
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (imgSrc && type === 'image') {
+      (async () => {
+        try {
+          setSize(await getImageSize(imgSrc));
+        } catch (error) {
+          console.log(error);
+        }
+      })();
+    }
+  }, [imgSrc, type]);
+
+  const getImageStyle = useCallback((): CSSProperties => {
+    // 不设置图片时，要使用真实宽高
+    if (!imgSrc) {
+      return {};
+    }
+    switch (mode) {
+      case 'scaleToFill':
+        return {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+      case 'widthFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewWidth = ref.current?.getBoundingClientRect().width;
+
+        if (viewWidth && size.width) {
+          iStyle.height = (size.height / size.width) * viewWidth;
+          if (!iStyle.overflowY) {
+            iStyle.overflowY = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      case 'heightFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewHeight = ref.current?.getBoundingClientRect().height;
+        if (viewHeight && size.height) {
+          iStyle.width = (size.width / size.height) * viewHeight;
+          if (!iStyle.overflowX) {
+            iStyle.overflowX = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      default:
+        break;
+    }
+    return {};
+  }, [imgSrc, mode, ref, size]);
+
+  return useMemo(() => {
+    const targetStyle = _.cloneDeep(style || {});
+    // / 兼容旧数据，如果没有背景类型，有imgSrc，说明需要设置背景图片，
+    if (!type) {
+      if (imgSrc) {
+        _.setWith(targetStyle, ['backgroundImage'], `url(${imgSrc})`);
+      }
+      return targetStyle;
+    }
+    if (targetStyle.backgroundColor) {
+      targetStyle.backgroundColor = undefined;
+    }
+    if (targetStyle.backgroundImage) {
+      targetStyle.backgroundImage = undefined;
+    }
+    if (type === 'cleanColor') {
+      targetStyle.backgroundColor = color;
+    } else if (type === 'hGradient') {
+      targetStyle.background = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    } else if (type === 'vGradient') {
+      targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
+    } else if (type === 'image') {
+      const imageStyle = getImageStyle();
+      Object.keys(imageStyle).forEach((key) => {
+        // @ts-ignore
+        targetStyle[key] = imageStyle[key];
+      });
+    }
+    return targetStyle;
+  }, [color, endColor, getImageStyle, startColor, style, type]);
+};
+
+export default useStyle;

package/lib/h5public/src/components/factory/src/Audio/Audio.tsx

@@ -0,0 +1,219 @@
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+// @ts-ignore
+import { LingXiFC } from '@lingxiteam/types';
+import { PlayButton, Progress, Timer } from 'react-soundplayer/components';
+// it's just an alias for `withSoundCloudAudio` but makes code clearer
+// @ts-ignore
+import { withCustomAudio } from 'react-soundplayer/addons';
+import useStyle from '../View/useStyle';
+
+import { $$componentItem } from '../interfaces/types';
+import './index.less';
+
+export interface ForwardRefProps {
+  toggelAudioStatus: (type: string) => void;
+  audio: any;
+}
+
+export interface MyAudioProps {
+  audioTitle?: string;
+  autoPlay?: string;
+  preloadType?: string;
+  streamUrl?: string;
+  streamType?: string;
+  fileCode?: string;
+  style?: React.CSSProperties;
+  backgroundType?: any;
+  visible?: any;
+  hideType?: string;
+  $$componentItem?: $$componentItem;
+  forwardRef: React.MutableRefObject<ForwardRefProps | undefined>;
+  componentDidLoad(): void;
+}
+
+const prefixCls = 'lcdp-audio';
+
+function getAbsoluteUrl(path?: string) {
+  if (path) {
+    if (path.startsWith('http:') || path.startsWith('https:')) {
+      return path;
+    }
+    if (path.startsWith('/')) {
+      return window.location.origin + path;
+    }
+  }
+  return path;
+}
+
+// 预留扩展
+// PlayButton, VolumeControl 等可支持换皮肤
+const CustomAudio = withCustomAudio((props: any) => {
+  const { audioTitle, soundCloudAudio, autoPlay } = props;
+
+  // preloadType = "none" // auto | metadata | none
+
+  const { audio } = soundCloudAudio || {};
+  if (autoPlay && audio && !audio.autoPlay) {
+    audio.autoplay = true;
+  }
+  if (audio && !audio.crossOrigin) {
+    audio.crossOrigin = 'anonymous';
+  }
+  return (
+    <div className={prefixCls}>
+      <div className="audioTitle">{audioTitle}</div>
+      <div className="audioContent">
+        <PlayButton {...props} />
+        <Progress className="progress" {...props} />
+        <Timer className="audioTimer" {...props} />
+      </div>
+    </div>
+  );
+});
+
+const Audio: LingXiFC<MyAudioProps> = (props) => {
+  // eslint-disable-next-line max-len
+  const {
+    audioTitle,
+    autoPlay,
+    preloadType,
+    streamUrl,
+    streamType,
+    fileCode,
+    visible,
+    hideType,
+    style,
+    backgroundType,
+    getEngineApis,
+    forwardRef,
+    componentDidLoad,
+  } = props;
+  const { getAppFileUrlByFileCode } = getEngineApis();
+  const [audioUrl, setAudioUrl] = useState<any>('');
+  const [imgSrc, setImgSrc] = useState();
+  const sRef = useRef<any>();
+  useEffect(() => {
+    if (streamType === 'fileCode') {
+      // 选择的文件资源
+      if (fileCode) {
+        try {
+          const url = getAppFileUrlByFileCode(fileCode);
+          setAudioUrl(url);
+        } catch (e) {
+          console.error(`音频文件获取出错:${e}`);
+        }
+      } else {
+        setAudioUrl('');
+      }
+    } else if (streamUrl) {
+      setAudioUrl(getAbsoluteUrl(streamUrl)); // 外部资源
+    }
+  }, [streamType, fileCode, streamUrl]);
+
+  useEffect(() => {
+    const code = backgroundType?.image;
+    if (code) {
+      // @ts-ignore
+      setImgSrc(getAppFileUrlByFileCode(code));
+    }
+  }, [backgroundType]);
+  const viewRef = useRef<HTMLDivElement>();
+  const restStyle = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+      backgroundType,
+    },
+    viewRef,
+  );
+  const onMediaPlay = () => {
+    if (!visible && hideType === 'remove') {
+      console.info('音频节点被移除,无法播放');
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      if (targetAudio?.play) {
+        targetAudio?.play();
+      }
+    }
+  };
+  const onMediaPause = () => {
+    if (!visible && hideType === 'remove') {
+      console.info('音频节点被移除,无法暂停');
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      if (targetAudio?.pause) {
+        targetAudio?.pause();
+      }
+    }
+  };
+  const onMediaToggle = () => {
+    if (!visible && hideType === 'remove') {
+      console.info('音频节点被移除,无法切换');
+    } else if (sRef && sRef?.current) {
+      const targetAudio = (sRef?.current as any)?.soundCloudAudio?.audio;
+      const paused = targetAudio?.paused;
+      if (targetAudio) {
+        if (!paused && targetAudio?.pause) {
+          targetAudio?.pause();
+        } else if (paused && targetAudio?.play) {
+          targetAudio?.play();
+        }
+      }
+    }
+  };
+  const toggelAudioStatus = (type: string) => {
+    switch (type) {
+      case 'play':
+        onMediaPlay();
+        break;
+      case 'pasue':
+        onMediaPause();
+        break;
+      case 'toggle':
+        onMediaToggle();
+        break;
+      default:
+        break;
+    }
+  };
+
+  useImperativeHandle(forwardRef, () => {
+    return {
+      toggelAudioStatus,
+      audio: sRef.current,
+    };
+  });
+
+  useEffect(() => {
+    componentDidLoad();
+  }, []);
+
+  if (!visible && hideType === 'remove') {
+    return null;
+  }
+  const audioDisplay = useMemo(() => {
+    if (visible) {
+      return 'block';
+    }
+    return 'none';
+  }, [visible, hideType]);
+  return (
+    <div style={{ ...style, ...restStyle, display: audioDisplay }}>
+      <CustomAudio
+        audioTitle={audioTitle}
+        autoPlay={autoPlay}
+        preloadType={preloadType}
+        streamUrl={audioUrl}
+        ref={sRef}
+      />
+    </div>
+  );
+};
+
+export default Audio;

package/lib/h5public/src/components/factory/src/Audio/index.less

@@ -0,0 +1,96 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-audio;
+
+.@{prefixCls} {
+  display: flex;
+  align-items: center;
+
+  .sb-soundplayer-btn {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    flex: none;
+    height: auto;
+    vertical-align: middle;
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  .sb-soundplayer-play-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24 * @hd;
+    height: 24 * @hd;
+    background-color: #47e;
+    border-radius: 100%;
+
+    &>.sb-soundplayer-icon {
+      position: relative;
+      width: 8 * @hd;
+      height: 8 * @hd;
+      vertical-align: middle;
+      color: #fff;
+    }
+  }
+
+
+  .sb-soundplayer-progress-container {
+    width: 100%;
+    height: 4 * @hd;
+    overflow: hidden;
+    background-color: rgba(68, 119, 238, 0.2);
+    cursor: pointer;
+    border-radius: 25 * @hd;
+  }
+
+  .sb-soundplayer-progress-inner {
+    height: 100%;
+    background-color: #47e;
+    transition: width 0.2s ease-in;
+    border-radius: 25 * @hd;
+
+  }
+
+  .audioTitle {
+    flex: 1;
+    overflow: hidden;
+    color: #1C242E;
+    font-weight: 400;
+    font-size: 16 * @hd;
+    letter-spacing: 0.2em;
+    white-space: nowrap;
+    text-transform: uppercase;
+    text-overflow: ellipsis;
+  }
+
+  .audioContent {
+    flex: 3;
+    display: flex;
+    align-items: center;
+
+    .playBtn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24 * @hd;
+      height: 24 * @hd;
+      background-color: #47e;
+      border-radius: 100%;
+    }
+
+    .progress {
+      margin: 0 8 * @hd;
+    }
+  }
+
+  .audioTimer {
+    flex: none;
+    font-size: 14* @hd;
+    font-weight: 400;
+    color: #1C242E;
+    width: 38* @hd;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}