@ant-design/icons#StopOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#StopOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AiDrive.js From network-rc with Apache License 2.0 | 5 votes |
|
render() {
const {
state: { isPredicting, actionKey, probability, interval },
props: { cameraEnabled, ai },
drive,
stop,
test,
loadModel,
} = this;
return (
<div className="ai-train">
<Form layout="inline">
<Form.Item label="操作间隔">
<InputNumber
value={interval}
onChange={(interval) => this.setState({ interval })}
/>
</Form.Item>
<Form.Item label="动作">
<Tag>
{aiAction[actionKey].name} {aiAction[actionKey].icon}{" "}
{probability.toFixed(2)}
</Tag>
</Form.Item>
</Form>
<br />
<Form layout="inline">
<Form.Item>
<Button
icon={<ImportOutlined />}
loading={isPredicting}
onClick={loadModel}
>
导入模型
</Button>
</Form.Item>
<Form.Item>
<Button
icon={<BugOutlined />}
loading={isPredicting}
onClick={test}
disabled={!cameraEnabled || !ai || !ai.model}
>
测试
</Button>
<Button
type="danger"
key="predic"
loading={isPredicting}
onClick={drive}
icon={<CarOutlined />}
disabled={!cameraEnabled || !ai || !ai.model}
>
开始 Ai 驾驶
</Button>
</Form.Item>
<Form.Item>
<Button
onClick={stop}
icon={<StopOutlined />}
disabled={!isPredicting}
key="stop"
>
停止 Ai 驾驶
</Button>
</Form.Item>
<br />
</Form>
</div>
);
}
Example #2
| Source File: AppRouter.jsx From React-Nest-Admin with MIT License | 4 votes |
|
sidebar = () => {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1">
<Link to={{ pathname: "/" }}>
<HomeOutlined />
<span>首页</span>
</Link>
</Menu.Item>
<Menu.Item key="5">
<Link to={{ pathname: "/user-management" }}>
<UserOutlined />
<span>用户管理</span>
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<FileOutlined />
<span>文件管理</span>
</span>
}
>
<Menu.Item key="sub1-1">
<Link to={{ pathname: "/file/list" }}>
<OrderedListOutlined />
<span>文件列表</span>
</Link>
</Menu.Item>
<Menu.Item key="sub1-2">
<Link to={{ pathname: "/file/add" }}>
<UploadOutlined />
<span>文件上传</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<DashboardOutlined />
<span>可视化图表</span>
</span>
}
>
<Menu.Item key="sub2-1">
<Link to={{ pathname: "/charts/line-chart" }}>
<LineChartOutlined />
<span>折线图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-2">
<Link to={{ pathname: "/charts/bar-chart" }}>
<BarChartOutlined />
<span>柱状图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-3">
<Link to={{ pathname: "/charts/pie-chart" }}>
<PieChartOutlined />
<span>饼状图</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub5"
title={
<span>
<FileExcelOutlined />
<span>Excel表格</span>
</span>
}
>
<Menu.Item key="sub5-1">
<Link to={{ pathname: "/excel/export-csv" }}>
<ExportOutlined />
<span>Export csv</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<EditOutlined />
<span>文本编辑器</span>
</span>
}
>
<Menu.Item key="sub4-1">
<Link to={{ pathname: "/rich-text-editor" }}>
<Html5Outlined />
<span>富文本编辑器</span>
</Link>
</Menu.Item>
<Menu.Item key="sub4-2">
<Link to={{ pathname: "/md-editor" }}>
<FileMarkdownOutlined />
<span>Markdown编辑器</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={
<span>
<BugOutlined />
<span>错误页面</span>
</span>
}
>
<Menu.Item key="sub3-1">
<Link to={{ pathname: "/not-found" }}>
<InboxOutlined />
<span>404</span>
</Link>
</Menu.Item>
<Menu.Item key="sub3-2">
<Link to={{ pathname: "/not-allow" }}>
<StopOutlined />
<span>403</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="6">
<a
href="https://github.com/cnscorpions/React-Nest-Admin"
target="_blank"
rel="noopener noreferrer"
>
<GithubOutlined />
<span>Github</span>
</a>
</Menu.Item>
</Menu>
);
}
Example #3
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
function Files(props) {
const {
currentConfig,
configList,
configListLoading,
currentContent,
deleteConfig,
aid,
env,
loadConfigList,
appName,
k8sClusters,
} = props;
let { zoneList } = props;
const fileChanged = currentConfig && currentConfig.content !== currentContent;
useEffect(() => {
if (props.appName && props.env) {
loadConfigList(props.appName, props.env);
}
}, []);
k8sClusters.forEach((cluster) => {
if (
cluster.env.indexOf(env) > -1 &&
zoneList.findIndex((zone) => zone.zone_code === cluster.zone_code) < 0
) {
zoneList.push({
zone_code: cluster.zone_code,
zone_name: cluster.zone_name,
});
}
});
const renderConfigListByZone = (zone) => {
let configs = (configList || []).filter((item) => item.zone === zone);
if (configs.length === 0) {
return (
<div className={styles.noConfigTip}>
<StopOutlined />
该Zone暂无配置
</div>
);
}
return configs.map((cfg, index) => {
const active = cfg.id === currentConfig?.id;
return (
<li
key={index}
className={[styles.configItem, active && styles.configItemActive].join(' ')}
onClick={() => {
if (fileChanged) {
confirm({
title: '当前配置未保存',
content: '当前文件修改未保存，切换配置后当前的修改将丢失。是否切换文件?',
cancelText: '我点错了',
okText: '确认',
onOk: () => {
props.loadConfigDetail(cfg.id);
},
});
} else {
props.loadConfigDetail(cfg.id);
}
}}
>
<div className={styles.configListTextItem}>
<div>
{cfg.config_status === 1 ? (
<Tag color="green">已发布</Tag>
) : cfg.config_status === 2 ? (
<Tag color="yellow">未发布</Tag>
) : (
''
)}
{cfg.name}.{cfg.format}
</div>
<div>
{currentConfig &&
currentConfig.content !== currentContent &&
cfg.id === currentConfig.id && <span className={styles.notSavedTip}>未保存</span>}
</div>
</div>
<div>
<div onClick={(ev) => ev.stopPropagation()}>
<Popconfirm
title={'谨慎操作，删除后无法找回.确定删除?'}
onConfirm={(ev) => {
deleteConfig(cfg.id).then((r) => {
loadConfigList(props.appName, props.env);
});
}}
>
<OptionButton type={'text'}>
<DeleteOutlined />
</OptionButton>
</Popconfirm>
</div>
</div>
</li>
);
});
};
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div className={styles.options}>
<OptionButton onClick={() => props.showCreateModal(true)} title={'新增配置'}>
<FileOutlined />
</OptionButton>
{currentConfig && (
<OptionButton title={'历史变更'} onClick={() => props.showHistoryModal(true)}>
<HistoryOutlined />
</OptionButton>
)}
</div>
<ul className={styles.zoneList}>
<ScrollArea style={{ height: '100%' }}>
{configListLoading && (
<div style={{ textAlign: 'center', paddingTop: '30px' }}>
<Spin />
<div>加载中</div>
</div>
)}
{!configListLoading &&
zoneList &&
zoneList.map((zone, index) => {
return (
<li key={index}>
<div className={styles.zoneTitle}>{zone.zone_name}</div>
<ul className={styles.configList}>{renderConfigListByZone(zone.zone_code)}</ul>
</li>
);
})}
{!configListLoading && (!zoneList || !zoneList.length) && (
<div className={styles.noConfigTip}>
<StopOutlined />
当前应用环境无机房
</div>
)}
</ScrollArea>
</ul>
</div>
);
}
Example #4
| Source File: Annotations.js From label-studio-frontend with Apache License 2.0 | 4 votes |
|
Annotation = observer(({ item, store }) => {
const removeHoney = () => (
<Tooltip placement="topLeft" title="Unset this result as a ground truth">
<Button
size="small"
type="primary"
onClick={ev => {
ev.preventDefault();
item.setGroundTruth(false);
}}
>
<StarOutlined />
</Button>
</Tooltip>
);
const setHoney = () => {
const title = item.ground_truth
? "Unset this result as a ground truth"
: "Set this result as a ground truth";
return (
<Tooltip placement="topLeft" title={title}>
<Button
size="small"
look="link"
onClick={ev => {
ev.preventDefault();
item.setGroundTruth(!item.ground_truth);
}}
>
{item.ground_truth ? (
<StarFilled />
) : (
<StarOutlined />
)}
</Button>
</Tooltip>
);
};
const toggleVisibility = e => {
e.preventDefault();
e.stopPropagation();
item.toggleVisibility();
const c = document.getElementById(`c-${item.id}`);
if (c) c.style.display = item.hidden ? "none" : "unset";
};
const highlight = () => {
const c = document.getElementById(`c-${item.id}`);
if (c) c.classList.add("hover");
};
const unhighlight = () => {
const c = document.getElementById(`c-${item.id}`);
if (c) c.classList.remove("hover");
};
/**
* Default badge for saved annotations
*/
let badge = <Badge status="default" />;
/**
*
*/
let annotationID;
/**
* Title of card
*/
if (item.userGenerate && !item.sentUserGenerate) {
annotationID = <span className={styles.title}>Unsaved Annotation</span>;
} else {
if (item.pk) {
annotationID = <span className={styles.title}>ID {item.pk}</span>;
} else if (item.id) {
annotationID = <span className={styles.title}>ID {item.id}</span>;
}
}
/**
* Badge for processing of user generate annotation
*/
if (item.userGenerate) {
badge = <Badge status="processing" />;
}
/**
* Badge for complete of user generate annotation
*/
if (item.userGenerate && item.sentUserGenerate) {
badge = <Badge status="success" />;
}
const btnsView = () => {
const confirm = () => {
// ev.preventDefault();
// debugger;
item.list.deleteAnnotation(item);
};
return (
<div className={styles.buttons}>
{store.hasInterface("ground-truth") && (item.ground_truth ? removeHoney() : setHoney())}
{store.hasInterface("annotations:delete") && (
<Tooltip placement="topLeft" title="Delete selected annotation">
<Popconfirm
placement="bottomLeft"
title={"Please confirm you want to delete this annotation"}
onConfirm={confirm}
okText="Delete"
okType="danger"
cancelText="Cancel"
>
<Button size="small" danger style={{ background: "transparent" }}>
<DeleteOutlined />
</Button>
</Popconfirm>
</Tooltip>
)}
</div>
);
};
return (
<List.Item
key={item.id}
className={item.selected ? `${styles.annotation} ${styles.annotation_selected}` : styles.annotation}
onClick={() => {
!item.selected && store.annotationStore.selectAnnotation(item.id);
}}
onMouseEnter={highlight}
onMouseLeave={unhighlight}
>
<div className={styles.annotationcard}>
<div>
<div className={styles.title}>
{badge}
{annotationID}
</div>
{item.pk ? "Created" : "Started"}
<i>{item.createdAgo ? ` ${item.createdAgo} ago` : ` ${Utils.UDate.prettyDate(item.createdDate)}`}</i>
{item.createdBy && item.pk ? ` by ${item.createdBy}` : null}
<DraftPanel item={item} />
</div>
{/* platform uses was_cancelled so check both */}
{store.hasInterface("skip") && (item.skipped || item.was_cancelled) && (
<Tooltip placement="topLeft" title="Skipped annotation">
<StopOutlined className={styles.skipped} />
</Tooltip>
)}
{store.annotationStore.viewingAllAnnotations && (
<Button size="small" type="primary" ghost onClick={toggleVisibility}>
{item.hidden ? <EyeInvisibleOutlined /> : <EyeOutlined />}
</Button>
)}
{item.selected && btnsView()}
</div>
</List.Item>
);
})
Example #5
| Source File: Controller.js From network-rc with Apache License 2.0 | 4 votes |
|
render() {
const {
fixContent,
ttsInput,
props: {
statusInfo,
action,
cameraEnabled,
videoEl,
onTTS,
ttsPlaying,
setting,
playAudio,
serverConfig,
changeChannel,
editabled,
cameraList,
channelStatus,
saveServerConfig,
isFullscreen,
session,
webrtcChannel,
},
} = this;
const { isShowButton, ttsInputVisible, text } = this.state;
const { channelList = [], specialChannel = {} } = serverConfig;
const speedChannel = channelList.find(
({ id }) => id === specialChannel.speed
);
const { audioList = [] } = serverConfig;
return (
<div className="controller">
<Router className="controller-router">
<Ai
path="ai/learn/*"
canvasRef={videoEl}
cameraEnabled={cameraEnabled}
action={action}
onAi={(isAiControlling) => this.setState({ isAiControlling })}
/>
<ObjectDetection
path="ai/coco-ssd/*"
videoEl={videoEl}
cameraEnabled={cameraEnabled}
action={action}
onAi={(isAiControlling) => this.setState({ isAiControlling })}
/>
</Router>
{!isFullscreen && (
<Form className="controller-form" size="small" layout="inline">
<Form.Item>
<Popover
content={fixContent}
title="修正"
trigger="click"
placement="topLeft"
>
<Button icon={<SlidersOutlined />}>修正</Button>
</Popover>
</Form.Item>
{speedChannel && (
<>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
defaultValue={speedChannel.valuePostive * 100}
min={0}
max={100}
onChange={(v) => {
speedChannel.valuePostive = v / 100;
saveServerConfig({
channelList,
});
}}
arrowPointAtCenter
style={{ width: "30vw" }}
/>
}
>
<Button shape="round">
前进:{Math.round(speedChannel.valuePostive * 100)}
</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
defaultValue={speedChannel.valueNegative * -100}
min={0}
max={100}
style={{ width: "30vw" }}
onChange={(v) => {
speedChannel.valueNegative = (v / 100) * -1;
saveServerConfig({
channelList,
});
}}
/>
}
>
<Button shape="round">
倒退:{Math.round(speedChannel.valueNegative * -100)}
</Button>
</Popover>
</Form.Item>
</>
)}
<Form.Item>
<Gamepad
changeChannel={changeChannel}
channelList={serverConfig.channelList}
channelStatus={channelStatus}
playAudio={playAudio}
serverConfig={serverConfig}
/>
</Form.Item>
<Form.Item>
<Orientation
changeChannel={changeChannel}
channelStatus={channelStatus}
serverConfig={serverConfig}
/>
</Form.Item>
<Form.Item>
<Keybord
playAudio={playAudio}
channelStatus={channelStatus}
channelList={serverConfig.channelList}
changeChannel={changeChannel}
serverConfig={serverConfig}
onEnter={() => {
this.setState({ ttsInputVisible: true });
setTimeout(() => {
ttsInput.current && ttsInput.current.focus();
}, 200);
}}
/>
</Form.Item>
<Form.Item>
<Popover
arrowPointAtCenter
trigger="click"
placement="topRight"
visible={ttsInputVisible}
onVisibleChange={(ttsInputVisible) => {
this.setState({ ttsInputVisible });
setTimeout(() => {
ttsInput.current && ttsInput.current.focus();
}, 200);
}}
content={
<form>
<Input.Search
ref={ttsInput}
name="tts"
style={{ width: "60vw" }}
placeholder="发送语音"
enterButton="发送"
value={text}
onChange={(e) => this.setState({ text: e.target.value })}
onSearch={(text) => {
onTTS(text);
this.setState({ text: "" });
}}
loading={ttsPlaying}
onKeyDown={(e) => {
e.stopPropagation();
if (e.key === "Escape") {
this.setState({ ttsInputVisible: false });
}
}}
/>
</form>
}
>
<Button shape="round">
<SendOutlined />
</Button>
</Popover>
</Form.Item>
{audioList
.filter((i) => i.showFooter)
.map(({ path, text, name }) => (
<Form.Item key={name}>
<Button
shape="round"
onClick={() => playAudio({ path, text })}
icon={<SoundOutlined />}
>
{name}
</Button>
</Form.Item>
))}
<Form.Item>
<Popover
placement="topRight"
content={
<Space size={[16, 16]} wrap>
<Form.Item extra="显示触控 UI">
<Switch
checked={isShowButton}
onChange={(isShowButton) => {
store.set("is-show-button", isShowButton);
this.setState({ isShowButton });
}}
checkedChildren={<DragOutlined />}
unCheckedChildren={<DragOutlined />}
/>
</Form.Item>
{audioList
.filter((i) => !i.showFooter)
.map(({ path, text, name, type }) => (
<Form.Item extra={`播放${name}`} key={name}>
{type === "audio" && (
<Button
shape="round"
onClick={() => playAudio({ path })}
icon={<SoundOutlined />}
>
{name}
</Button>
)}
{type === "text" && (
<Button
shape="round"
onClick={() => playAudio({ text })}
icon={<SoundOutlined />}
>
{name}
</Button>
)}
{type === "stop" && (
<Button
shape="round"
onClick={() => playAudio({ stop: true })}
icon={<StopOutlined />}
>
{name}
</Button>
)}
</Form.Item>
))}
</Space>
}
>
<Button shape="round">
<MoreOutlined />
</Button>
</Popover>
</Form.Item>
<Form.Item>
<Microphone
url={
setting.host &&
`${
window.location.protocol === "https:" ? "wss://" : "ws://"
}${setting.host}/audio`
}
/>
</Form.Item>
</Form>
)}
<ControlUI
webrtcChannel={webrtcChannel}
session={session}
channelStatus={channelStatus}
isShowButton={isShowButton}
uiComponentList={serverConfig.uiComponentList}
channelList={serverConfig.channelList}
changeChannel={changeChannel}
editabled={editabled}
cameraList={cameraList}
setting={setting}
isFullscreen={isFullscreen}
statusInfo={statusInfo}
/>
</div>
);
}
Example #6
| Source File: ObjectDetection.js From network-rc with Apache License 2.0 | 4 votes |
|
render() {
const {
state: {
loading,
threshold,
interval,
detecting,
driving,
detectionList,
targetClass,
pauseThreshold,
},
props: { videoSize, cameraEnabled, action, videoEl },
startDetect,
start,
stop,
stopDetect,
} = this;
return (
<div className="ai-object-detection">
<Spin spinning={loading} tip={loading}>
<Form
className="inline-form"
layout="inline"
style={{ padding: "1em" }}
size="small"
>
<Form.Item>
<Switch
onChange={(v) => (v ? startDetect() : stopDetect())}
checked={detecting}
disabled={!cameraEnabled}
checkedChildren="检测"
unCheckedChildren="检测"
/>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Radio.Group
onChange={({ target: { value: targetClass } }) =>
this.setState({ targetClass })
}
value={targetClass}
>
{detectionList.map((i) => (
<Radio value={i}>{i}</Radio>
))}
</Radio.Group>
}
>
<Button shape="round">目标:{targetClass || "无"}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
min={0}
max={100}
value={threshold}
onChange={(threshold) => this.setState({ threshold })}
arrowPointAtCenter
style={{ width: "30vw" }}
/>
}
>
<Button shape="round">目标阀值:{threshold}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<Slider
min={0}
max={100}
value={pauseThreshold}
onChange={(pauseThreshold) =>
this.setState({ pauseThreshold })
}
arrowPointAtCenter
style={{ width: "30vw" }}
/>
}
>
<Button shape="round">跟随阀值:{pauseThreshold}</Button>
</Popover>
</Form.Item>
<Form.Item>
<Popover
placement="topLeft"
content={
<InputNumber
min={0}
max={1000}
value={interval}
onChange={(interval) => this.setState({ interval })}
/>
}
>
<Button shape="round">间隔:{interval} ms</Button>
</Popover>
</Form.Item>
<Form.Item>
<Button
icon={<CarOutlined />}
type="danger"
onClick={start}
disabled={!detecting || driving || !targetClass}
>
开始驾驶
</Button>
</Form.Item>
<Form.Item>
<Button
icon={<StopOutlined />}
onClick={stop}
disabled={!driving}
>
停止驾驶
</Button>
</Form.Item>
<Form.Item>
<Tag>方向{action.direction.toFixed(2)}</Tag>
<Tag>油门{action.speed.toFixed(2)}</Tag>
</Form.Item>
</Form>
</Spin>
<div
className="ai-object-detection-canvas-container"
style={{
opacity: cameraEnabled ? 1 : 0,
transform: `scale(${videoSize / 50})`,
}}
>
{videoEl &&
<canvas ref={this.canvas} width={videoEl.width} height={videoEl.height}></canvas>
}
</div>
</div>
);
}
Example #7
| Source File: Status.js From network-rc with Apache License 2.0 | 4 votes |
|
export default function Status({
statusInfo,
piPowerOff,
wsConnected,
delay = 0,
isFullscreen,
setting,
isLogin,
session,
changeEditabled,
channelStatus,
changeChannel,
serverConfig,
version,
connectType,
onCarMicphoneChange,
locked,
onControllerMicphoneChange = () => {},
enabledControllerMicphone = true,
}) {
const isWebRTC = connectType === "webrtc";
const { sharedEndTime } = serverConfig;
const gamepadPress = ({ detail: { index, value } }) => {
if (index === 3 && value > 0.5) {
onControllerMicphoneChange(!enabledControllerMicphone);
}
};
useKeyPress(
"t",
() => onControllerMicphoneChange(!enabledControllerMicphone),
{
events: ["keyup"],
}
);
useEventListener("gamepadpress", gamepadPress);
return (
<Form layout="inline" className="app-status" size="small">
<Form.Item>
<Link to={`${process.env.PUBLIC_URL}/controller`}>
<img className="logo" src="/logo-256.png" alt="N-RC" />
</Link>
<span>N RC</span>
</Form.Item>
<Form.Item>
<Tag
style={{
width: "7em",
}}
icon={
locked ? (
<StopOutlined />
) : wsConnected ? (
<LinkOutlined />
) : (
<DisconnectOutlined />
)
}
color={locked || delay > 80 || !wsConnected ? "red" : "green"}
size="xs"
>
{isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
</Tag>
</Form.Item>
{(serverConfig.channelList || [])
.filter(({ enabled, type }) => enabled && type === "switch")
.map(({ pin, name }) => (
<Form.Item key={pin}>
<Switch
checked={channelStatus[pin] || false}
checkedChildren={name}
unCheckedChildren={name}
onChange={(value) => changeChannel({ pin, value })}
/>
</Form.Item>
))}
{isLogin && isWebRTC && (
<Form.Item>
<Switch
checked={enabledControllerMicphone}
onChange={onControllerMicphoneChange}
checkedChildren={
<>
<DesktopOutlined /> <AudioOutlined />
</>
}
unCheckedChildren={
<>
<DesktopOutlined /> <AudioMutedOutlined />
</>
}
/>
</Form.Item>
)}
{isLogin && (
<Form.Item>
<AudioPlayer
session={session}
connectType={connectType}
onMicphoneChange={onCarMicphoneChange}
url={`${
window.location.protocol === "https:" ? "wss://" : "ws://"
}${setting.host}/microphone`}
/>
</Form.Item>
)}
<Form.Item>
<Switch
checkedChildren={<FormOutlined />}
unCheckedChildren={<FormOutlined />}
onChange={changeEditabled}
></Switch>
</Form.Item>
<Form.Item>
<Link to={`${process.env.PUBLIC_URL}/setting`}>
<Button
size="small"
icon={<SettingOutlined />}
shape="circle"
></Button>
</Link>
</Form.Item>
{document.body.requestFullscreen && (
<Form.Item>
<Button
type="primary"
shape="circle"
icon={
isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
}
onClick={() => {
if (isFullscreen) {
document.exitFullscreen();
} else {
document.body.requestFullscreen();
}
}}
></Button>
</Form.Item>
)}
{wsConnected && isLogin && (
<Form.Item>
<Button
type="danger"
shape="circle"
icon={<PoweroffOutlined />}
onClick={piPowerOff}
></Button>
</Form.Item>
)}
{wsConnected &&
isLogin &&
Object.keys(statusInfo).map((key) => {
const { color, label, value } = statusInfo[key];
return !["gps"].includes(label) ? (
<Form.Item key={key}>
<Tag color={color}>
{label}:{value}
</Tag>
</Form.Item>
) : undefined;
})}
{wsConnected && sharedEndTime && (
<Form.Item>
<Tag
icon={<HourglassOutlined />}
color={session && session.endTime && "orange"}
>
{((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
</Tag>
</Form.Item>
)}
{version && (
<Form.Item>
<Tag>v{version}</Tag>
</Form.Item>
)}
</Form>
);
}
