dage-web-tools/packages/docs/docs/utils/hooks.md

React

yarn add @dage/hooks --registry http://192.168.20.245:4873/

useCreate

在组件首次创建时调用

useCreate(cb: Function): void

usePreloader

预加载资源

usePreloader({
  list: string[],
  /**
   * 百分比保留几位小数
   */
  decimals?: number;
  success?: Function;
  error?: Function;
}): {
  status: PRELOADER_STATUS;
  /**
    进度
   */
  percent: string;
  /**
    已接收字节长度
   */
  downloadLength: number;
  /**
    总字节长度
   */
  totalLength: number;
  /**
   * 本地媒体资源url
   */
  mediaUrlMap: Map<string, string>;
  /**
   * 开始预加载
   */
  start: () => void;
  /**
   * 中断请求
   */
  abort: () => void;
}

示例

import React from "react";
import { usePreloader, PRELOADER_STATUS } from "@dage/hooks";
import { Progress, Space, Button } from "antd";

export default () => {
  const { percent, status, start, abort, mediaUrlMap } = usePreloader({
    list: [
      "https://houseoss.4dkankan.com/project/yzdyh-dadu/media/end.bad6e656.mp4",
      "https://houseoss.4dkankan.com/project/yzdyh-dadu/media/epilogue.ff00412e.mp4",
    ],
  });
  const isDone = status === PRELOADER_STATUS.DONE;

  return (
    <>
      <Space wrap>
        <Progress type="circle" percent={percent} />
      </Space>

      {status === PRELOADER_STATUS.LOADING ? (
        <Button danger style={{ marginLeft: "20px" }} onClick={() => abort()}>
          中断
        </Button>
      ) : (
        <Button style={{ marginLeft: "20px" }} onClick={() => start()}>
          开始预加载
        </Button>
      )}

      {isDone && (
        <video
          controls
          src={mediaUrlMap.get("end")}
          style={{
            display: "block",
            marginTop: "20px",
            width: "667px",
            height: "375px",
          }}
        />
      )}
    </>
  );
};