zy-react-library 1.2.15 → 1.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,40 +1,43 @@
|
|
|
1
|
-
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
2
|
-
|
|
3
|
-
export interface AliPlayerProps {
|
|
4
|
-
/** 播放地址 */
|
|
5
|
-
source?: string | string[];
|
|
6
|
-
/** 阿里的 vid */
|
|
7
|
-
vid?: string;
|
|
8
|
-
/** 阿里的 playAuth */
|
|
9
|
-
playAuth?: string;
|
|
10
|
-
/** 封面地址 */
|
|
11
|
-
cover?: string;
|
|
12
|
-
/** 播放器宽度，默认 100% */
|
|
13
|
-
width?: string;
|
|
14
|
-
/** 播放器高度，默认 600px */
|
|
15
|
-
height?: string;
|
|
16
|
-
/** 是否自动播放 */
|
|
17
|
-
autoplay?: boolean;
|
|
18
|
-
/** 是否显示进度条 */
|
|
19
|
-
showProgress?: boolean;
|
|
20
|
-
/** 是否直播模式 */
|
|
21
|
-
isLive?: boolean;
|
|
22
|
-
/** 播放开始时间 */
|
|
23
|
-
playTime?: number;
|
|
24
|
-
/** 播放结束事件 */
|
|
25
|
-
onEnded?: () => void;
|
|
26
|
-
/** 播放进度更新事件 */
|
|
27
|
-
onTimeupdate?: (currentTime: number) => void;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
1
|
+
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
2
|
+
|
|
3
|
+
export interface AliPlayerProps {
|
|
4
|
+
/** 播放地址 */
|
|
5
|
+
source?: string | string[];
|
|
6
|
+
/** 阿里的 vid */
|
|
7
|
+
vid?: string;
|
|
8
|
+
/** 阿里的 playAuth */
|
|
9
|
+
playAuth?: string;
|
|
10
|
+
/** 封面地址 */
|
|
11
|
+
cover?: string;
|
|
12
|
+
/** 播放器宽度，默认 100% */
|
|
13
|
+
width?: string;
|
|
14
|
+
/** 播放器高度，默认 600px */
|
|
15
|
+
height?: string;
|
|
16
|
+
/** 是否自动播放 */
|
|
17
|
+
autoplay?: boolean;
|
|
18
|
+
/** 是否显示进度条 */
|
|
19
|
+
showProgress?: boolean;
|
|
20
|
+
/** 是否直播模式 */
|
|
21
|
+
isLive?: boolean;
|
|
22
|
+
/** 播放开始时间 */
|
|
23
|
+
playTime?: number;
|
|
24
|
+
/** 播放结束事件 */
|
|
25
|
+
onEnded?: () => void;
|
|
26
|
+
/** 播放进度更新事件 */
|
|
27
|
+
onTimeupdate?: (currentTime: number) => void;
|
|
28
|
+
/** 传递给 AliPlayer 的属性 */
|
|
29
|
+
aliPlayerProps?: Record<string, any>;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export interface AliPlayerRef {
|
|
33
|
+
play: () => void;
|
|
34
|
+
pause: () => void;
|
|
35
|
+
getPlayerInstance: () => any;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* 视频播放组件
|
|
40
|
+
*/
|
|
41
|
+
declare const AliPlayer: ForwardRefExoticComponent<AliPlayerProps & RefAttributes<AliPlayerRef>>;
|
|
42
|
+
|
|
43
|
+
export default AliPlayer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useDocumentVisibility as a}from"ahooks";import{uniqueId as e}from"lodash-es";import{forwardRef as i,useRef as t,useImperativeHandle as r,useEffect as n}from"react";import{dynamicLoadJs as l,dynamicLoadCss as s}from"../../utils/index.js";import{jsx as o}from"react/jsx-runtime";const p=i(({source:i="",vid:p="",playAuth:
|
|
1
|
+
import{useDocumentVisibility as a}from"ahooks";import{uniqueId as e}from"lodash-es";import{forwardRef as i,useRef as t,useImperativeHandle as r,useEffect as n}from"react";import{dynamicLoadJs as l,dynamicLoadCss as s}from"../../utils/index.js";import{jsx as o}from"react/jsx-runtime";const p=i(({source:i="",vid:p="",playAuth:y="",cover:c="",width:m="100%",height:u="600px",autoplay:d=!0,showProgress:g=!0,isLive:h=!1,playTime:b=0,onEnded:w,onTimeupdate:x,aliPlayerProps:f},v)=>{const P=t(null),k=t(null),D=a(),j=t(e("_")).current;r(v,()=>({play:()=>{P.current&&P.current.play()},pause:()=>{P.current&&P.current.pause()},getPlayerInstance:()=>P.current}));const B=()=>{P.current&&(P.current.dispose(),P.current=null)};return n(()=>((i||p&&y)&&(async()=>{if(!k.current)return;window.Aliplayer||(window?.base?.loadDynamicResource?(await window.base.loadDynamicResource({url:"https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js",type:"script",attr:{type:"text/javascript"}}),await window.base.loadDynamicResource({url:"https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css",type:"link",attr:{rel:"stylesheet",type:"text/css"}})):(await l("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js"),await s("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css"))),B();const a=[{name:"bigPlayButton",align:"blabs",x:30,y:80},{name:"H5Loading",align:"cc"},{name:"errorDisplay",align:"tlabs",x:0,y:0},{name:"infoDisplay"},{name:"tooltip",align:"blabs",x:0,y:56},{name:"thumbnail"},{name:"controlBar",align:"blabs",x:0,y:0,children:[{name:"playButton",align:"tl",x:15,y:12},{name:"timeDisplay",align:"tl",x:10,y:7},{name:"fullScreenButton",align:"tr",x:10,y:12},{name:"setting",align:"tr",x:15,y:12},{name:"volume",align:"tr",x:5,y:10}]}];g&&a[a.length-1].children.unshift({name:"progress",align:"blabs",x:0,y:44}),P.current=new window.Aliplayer({id:j,...i?{source:i}:{vid:p,playauth:y,qualitySort:"asc",format:"m3u8",encryptType:1,mediaType:"video",isLive:!0,rePlay:!1,playsinline:!0,controlBarVisibility:"hover"},cover:c,width:m,height:u,autoplay:d,isLive:h,useH5Prism:!0,skinLayout:a,...f},a=>{d&&a.play(),a.on("ended",()=>{w&&w()}),a.on("timeupdate",()=>{x&&x(a.getCurrentTime())}),b>0&&a.seek(b)})})(),()=>{B()}),[i,p,y]),n(()=>{"hidden"===D?P.current&&P.current.pause():P.current&&P.current.play()},[D]),o("div",{ref:k,id:j,style:{width:m,height:u}})});p.displayName="AliPlayer";export{p as default};
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
2
|
-
import type { AliPlayerProps, AliPlayerRef } from "./AliPlayer";
|
|
3
|
-
|
|
4
|
-
export interface VideoProps extends
|
|
5
|
-
/** 弹窗标题，默认 “视频” */
|
|
6
|
-
title?: string;
|
|
7
|
-
/** 是否显示弹窗 */
|
|
8
|
-
visible?: boolean;
|
|
9
|
-
/** 是否内联模式 */
|
|
10
|
-
inline?: boolean;
|
|
11
|
-
/** 弹窗关闭事件 */
|
|
12
|
-
onCancel?: () => void;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* 视频播放组件
|
|
17
|
-
*/
|
|
18
|
-
declare const Video: ForwardRefExoticComponent<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export default Video;
|
|
1
|
+
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
2
|
+
import type { AliPlayerProps, AliPlayerRef } from "./AliPlayer";
|
|
3
|
+
|
|
4
|
+
export interface VideoProps extends AliPlayerProps {
|
|
5
|
+
/** 弹窗标题，默认 “视频” */
|
|
6
|
+
title?: string;
|
|
7
|
+
/** 是否显示弹窗 */
|
|
8
|
+
visible?: boolean;
|
|
9
|
+
/** 是否内联模式 */
|
|
10
|
+
inline?: boolean;
|
|
11
|
+
/** 弹窗关闭事件 */
|
|
12
|
+
onCancel?: () => void;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* 视频播放组件
|
|
17
|
+
*/
|
|
18
|
+
declare const Video: ForwardRefExoticComponent<VideoProps & RefAttributes<AliPlayerRef>>;
|
|
19
|
+
|
|
20
|
+
export default Video;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Modal as e,Button as r}from"antd";import{
|
|
1
|
+
import{Modal as e,Button as r}from"antd";import{forwardRef as t,useState as n,useRef as i,useImperativeHandle as o,useEffect as a}from"react";import{getFileUrl as l}from"../../utils/index.js";import s from"./AliPlayer.js";import{jsx as c}from"react/jsx-runtime";const u=t(({source:t="",vid:u="",playAuth:p="",cover:d="",autoplay:m=!0,showProgress:h=!0,playTime:y=0,inline:f=!1,isLive:P=!1,width:v="100%",height:g="600px",title:w="视频",visible:x=!1,onCancel:C,onEnded:T,onTimeupdate:j,aliPlayerProps:A={}},b)=>{const[k,E]=n(!1),I=i(null);o(b,()=>({play:()=>{I.current&&I.current.play()},pause:()=>{I.current&&I.current.pause()},getPlayerInstance:()=>I.current&&I.current.getPlayerInstance()}));const L=C?x:k,N=C||E;a(()=>{f||(L?I.current&&I.current.play():I.current&&I.current.pause())},[L,f]);const V=c(s,{ref:I,source:(()=>{if(t)return t.includes("http")||t.includes("https")?t:l()+t})(),vid:u,playAuth:p,cover:d,autoplay:m,showProgress:h,playTime:y,isLive:P,width:v,height:g,aliPlayerProps:A,onEnded:T,onTimeupdate:j});return f?V:c(e,{open:L,width:800,title:w,footer:[c(r,{onClick:()=>N(!1),children:"关闭"},"cancel")],maskClosable:!1,onCancel:()=>N(!1),children:V})});u.displayName="Video";export{u as default};
|