@glodon-aiot/react-components
Version:
aiot react components
85 lines (84 loc) • 2.11 kB
JavaScript
import { jsxs as j, jsx as e } from "react/jsx-runtime";
import { IconButton as c } from "../IconButton/index.mjs";
import { Iconfont as r } from "../Iconfont/index.mjs";
import { useState as p, useEffect as f } from "react";
const N = (b) => {
const {
className: k,
style: x,
length: i = 0,
current: u = 0,
speed: P = 2e3,
play: y = !1,
loop: I = !1,
loading: o = !1,
onChange: t
} = b, [s, m] = p(y), [n, l] = p(u), [a, h] = p(null);
f(() => {
l(u);
}, [u]), f(() => {
m(y);
}, [y]), f(() => {
s ? g() : n >= i - 1 && (l(0), t(0));
}, [s]), f(() => {
s && (o ? a && (clearTimeout(a), h(null)) : h(setTimeout(g, P)));
}, [o]);
const g = () => {
l((d) => d < i - 1 ? (t(d + 1), d + 1) : I ? (t(0), 0) : (C(), d));
}, T = () => {
n >= i - 1 && l(0), m(!0);
}, C = () => {
m(!1), a && (clearTimeout(a), h(null));
};
return /* @__PURE__ */ j("div", {
className: k,
style: x,
children: [/* @__PURE__ */ e(c, {
disabled: n <= 0 || o,
onClick: () => {
t(0), l(0);
},
children: /* @__PURE__ */ e(r, {
type: "icon-diyige"
})
}), /* @__PURE__ */ e(c, {
disabled: n <= 0 || o,
onClick: () => {
t(n - 1), l(n - 1);
},
children: /* @__PURE__ */ e(r, {
type: "icon-qianyige"
})
}), s ? /* @__PURE__ */ e(c, {
onClick: C,
children: /* @__PURE__ */ e(r, {
type: "icon-zanting"
})
}) : /* @__PURE__ */ e(c, {
disabled: n >= i - 1 || o,
onClick: T,
children: /* @__PURE__ */ e(r, {
type: "icon-bofang"
})
}), /* @__PURE__ */ e(c, {
disabled: n >= i - 1 || o,
onClick: () => {
t(n + 1), l(n + 1);
},
children: /* @__PURE__ */ e(r, {
type: "icon-xiayige"
})
}), /* @__PURE__ */ e(c, {
disabled: n >= i - 1 || o,
onClick: () => {
t(i - 1), l(i - 1);
},
children: /* @__PURE__ */ e(r, {
type: "icon-zuihouyige"
})
})]
});
};
export {
N as PanoramaRecordPlayer
};