@ant-design/icons#PlayCircleOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#PlayCircleOutlined.
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: Controls.js From label-studio-frontend with Apache License 2.0 | 6 votes |
|
AudioControls = ({ item, store }) => {
return (
<div style={{ display: "flex", justifyContent: "space-between", marginTop: "1em" }}>
<Button
type="primary"
onClick={() => {
item._ws.playPause();
}}
>
{item.playing && (
<Fragment>
<PauseCircleOutlined /> <span>Pause</span>
{store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && (
<Hint>[{item.hotkey}]</Hint>
)}
</Fragment>
)}
{!item.playing && (
<Fragment>
<PlayCircleOutlined /> <span>Play</span>
{store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && (
<Hint>[{item.hotkey}]</Hint>
)}
</Fragment>
)}
</Button>
</div>
);
}
Example #2
| Source File: Phrases.js From label-studio-frontend with Apache License 2.0 | 6 votes |
|
Phrases = observer(({ item }) => {
const cls = item.layoutClasses;
const withAudio = !!item.audio;
if (!item._value) return null;
const val = item._value.map((v, idx) => {
const style = item.layoutStyles(v);
const classNames = [styles.phrase];
const isContentVisible = item.isVisibleForAuthorFilter(v);
if (withAudio) classNames.push(styles.withAudio);
if (!isContentVisible) classNames.push(styles.collapsed);
if (getRoot(item).settings.showLineNumbers) classNames.push(styles.numbered);
return (
<div key={`${item.name}-${idx}`} className={classNames.join(" ")} style={style.phrase}>
{isContentVisible && withAudio && !isNaN(v.start) && (
<Button
type="text"
className={styles.play}
icon={item.playingId === idx ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
onClick={() => item.play(idx)}
/>
)}
<span className={cls.name}>{v[item.namekey]}</span>
<span className={cls.text}>{v[item.textkey]}</span>
</div>
);
});
return val;
})
Example #3
| Source File: Playback.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
initPlayer(sessionId) {
const RECORDING_URL = `${server}/sessions/${sessionId}/recording?X-Auth-Token=${getToken()}`;
const display = document.getElementById('display');
const tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
const recording = new Guacamole.SessionRecording(tunnel);
const recordingDisplay = recording.getDisplay();
/**
* Converts the given number to a string, adding leading zeroes as necessary
* to reach a specific minimum length.
*
* @param {Numer} num
* The number to convert to a string.
*
* @param {Number} minLength
* The minimum length of the resulting string, in characters.
*
* @returns {String}
* A string representation of the given number, with leading zeroes
* added as necessary to reach the specified minimum length.
*/
const zeroPad = function zeroPad(num, minLength) {
// Convert provided number to string
var str = num.toString();
// Add leading zeroes until string is long enough
while (str.length < minLength)
str = '0' + str;
return str;
};
/**
* Converts the given millisecond timestamp into a human-readable string in
* MM:SS format.
*
* @param {Number} millis
* An arbitrary timestamp, in milliseconds.
*
* @returns {String}
* A human-readable string representation of the given timestamp, in
* MM:SS format.
*/
const formatTime = function formatTime(millis) {
// Calculate total number of whole seconds
var totalSeconds = Math.floor(millis / 1000);
// Split into seconds and minutes
var seconds = totalSeconds % 60;
var minutes = Math.floor(totalSeconds / 60);
// Format seconds and minutes as MM:SS
return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
};
// Add playback display to DOM
display.appendChild(recordingDisplay.getElement());
// Begin downloading the recording
recording.connect();
// If playing, the play/pause button should read "Pause"
recording.onplay = () => {
// 暂停
this.setState({
playPauseIcon: <PauseCircleOutlined/>,
playPauseIconTitle: '暂停',
})
};
// If paused, the play/pause button should read "Play"
recording.onpause = () => {
// 播放
this.setState({
playPauseIcon: <PlayCircleOutlined/>,
playPauseIconTitle: '播放',
})
};
// Toggle play/pause when display or button are clicked
display.onclick = this.handlePlayPause;
// Fit display within containing div
recordingDisplay.onresize = function displayResized(width, height) {
// Do not scale if display has no width
if (!width)
return;
// Scale display to fit width of container
recordingDisplay.scale(display.offsetWidth / width);
};
recording.onseek = (millis) => {
this.setState({
percent: millis,
position: formatTime(millis)
})
};
recording.onprogress = (millis) => {
this.setState({
max: millis,
duration: formatTime(millis)
})
};
this.setState({
recording: recording
}, () => {
this.handlePlayPause();
});
}
Example #4
| Source File: tasks.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
const { taskKey, task } = this.state;
return (
<>
<PageHeader
title="Tasks"
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={16} className="height-100 tree-height-100">
<Col className="max-height-100" span={5}>
<Tree
showIcon
blockNode
treeData={this.state.data}
onSelect={this.onSelect}
selectedKeys={[taskKey]}
style={{
height: '100%',
paddingRight: '.5rem',
overflow: 'auto',
background: '#0a0a0a',
border: '1px solid #303030'
}}
/>
</Col>
<Col className="max-height-100" span={19}>
{task ? (
<Row gutter={[16, 14]} className="height-100" style={{ flexDirection: "column", flexWrap: "nowrap" }}>
<Col flex="0 0 auto">
<Row gutter={[16, 14]}>
<Col span={24}>
<PageHeader
title={task.id}
tags={
task.stats.hasOwnProperty("status") ? (
HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="warning">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Tag color="processing">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Tag color="error">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Tag color="success">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Tag color="pink">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Tag color="yellow">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
) : (
<Tag color="default">{HASHCAT_STATUS_MESSAGES[task.stats["status"]]}</Tag>
)
) : null
}
style={{ padding: 0 }}
extra={
<Form layout="inline">
<Form.Item
label="Priority"
>
<InputNumber
min={-1}
max={999}
value={task.priority}
onChange={this.onChangePriority}
readOnly={this.state.isReadOnlyPriority}
bordered={false}
/>
</Form.Item>
<Button
icon={<ControlOutlined />}
onClick={this.onClickArguments}
style={{ marginRight: '1rem' }}
>
Arguments
</Button>
<Popconfirm
placement="topRight"
title="Are you sure you want to delete this task?"
onConfirm={this.onClickDelete}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<DeleteOutlined />}
loading={this.state.isLoadingDelete}
>
Delete
</Button>
</Popconfirm>
</Form>
}
/>
</Col>
<Col span={24}>
{task.stats.hasOwnProperty("progress") ? (
<Progress type="line" percent={Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100)} />
) : (
<Progress type="line" percent={0} />
)}
</Col>
<Col span={24}>
<Row gutter={[12, 10]}>
<Col>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={this.onClickStart}
loading={this.state.isLoadingStart}
>
Start
</Button>
</Col>
<Col>
<Button
icon={<ReloadOutlined />}
onClick={this.onClickRefresh}
loading={this.state.isLoadingRefresh}
>
Refresh
</Button>
</Col>
<Col>
<Button
icon={<PauseOutlined />}
onClick={this.onClickPause}
loading={this.state.isLoadingPause}
>
Pause
</Button>
</Col>
<Col>
<Button
icon={<CaretRightOutlined />}
onClick={this.onClickResume}
loading={this.state.isLoadingResume}
>
Resume
</Button>
</Col>
<Col>
<Button
icon={<EnvironmentOutlined />}
onClick={this.onClickCheckpoint}
loading={this.state.isLoadingCheckpoint}
>
Checkpoint
</Button>
</Col>
<Col>
<Button
icon={<StepForwardOutlined />}
onClick={this.onClickSkip}
loading={this.state.isLoadingSkip}
>
Skip
</Button>
</Col>
<Col>
<Popconfirm
placement="topRight"
title="Are you sure you want to quit this task?"
onConfirm={this.onClickQuit}
okText="Yes"
cancelText="No"
>
<Button
type="danger"
icon={<CloseOutlined />}
loading={this.state.isLoadingQuit}
>
Quit
</Button>
</Popconfirm>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col flex="1 1 auto">
<Row gutter={[16, 14]} className="height-100">
<Col className="max-height-100" span={16}>
<Descriptions
column={2}
layout="horizontal"
bordered
>
{task.stats.hasOwnProperty("status") && (
<Descriptions.Item label="Status" span={2}>
{HASHCAT_STATUS_BADGE_WARNING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="warning" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PROCESSING.indexOf(task.stats["status"]) > -1 ? (
<Badge status="processing" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_ERROR.indexOf(task.stats["status"]) > -1 ? (
<Badge status="error" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_SUCCESS.indexOf(task.stats["status"]) > -1 ? (
<Badge status="success" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_PINK.indexOf(task.stats["status"]) > -1 ? (
<Badge color="pink" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : HASHCAT_STATUS_BADGE_YELLOW.indexOf(task.stats["status"]) > -1 ? (
<Badge color="yellow" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
) : (
<Badge status="default" text={HASHCAT_STATUS_MESSAGES[task.stats["status"]]} />
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("target") && (
<Descriptions.Item label="Target" span={2}>
{task.stats["target"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("progress") && (
<Descriptions.Item label="Progress" span={2}>
{task.stats["progress"][0] + " / " + task.stats["progress"][1] + " (" + Math.trunc((task.stats["progress"][0] / task.stats["progress"][1])*100) + "%)"}
{task.stats.hasOwnProperty("guess") && (
<Tooltip title={
<Descriptions bordered size="small" column={1} layout="horizontal">
{task.stats.guess.guess_base !== null ? (
<Descriptions.Item label="Guess Base">{task.stats.guess.guess_base} ({task.stats.guess.guess_base_offset}/{task.stats.guess.guess_base_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Base">-</Descriptions.Item>
)}
{task.stats.guess.guess_mod !== null ? (
<Descriptions.Item label="Guess Mod">{task.stats.guess.guess_mod} ({task.stats.guess.guess_mod_offset}/{task.stats.guess.guess_mod_count})</Descriptions.Item>
) : (
<Descriptions.Item label="Guess Mod">-</Descriptions.Item>
)}
</Descriptions>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
)}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("rejected") && (
<Descriptions.Item label="Rejected" span={1}>
{task.stats["rejected"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("restore_point") && (
<Descriptions.Item label="Restore point" span={1}>
{task.stats["restore_point"]}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_hashes") && (
<Descriptions.Item label="Recovered hashes" span={1}>
{task.stats["recovered_hashes"][0] + " / " + task.stats["recovered_hashes"][1] + " (" + Math.trunc((task.stats["recovered_hashes"][0] / task.stats["recovered_hashes"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("recovered_salts") && (
<Descriptions.Item label="Recovered salts" span={1}>
{task.stats["recovered_salts"][0] + " / " + task.stats["recovered_salts"][1] + " (" + Math.trunc((task.stats["recovered_salts"][0] / task.stats["recovered_salts"][1])*100) + "%)"}
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("devices") && (
<Descriptions.Item label="Speed" span={2}>
{humanizeSpeed(totalSpeed(task.stats["devices"]))}
<Tooltip title={
<Table
columns={[
{
title: 'ID',
dataIndex: 'id',
key: 'ID'
},
{
title: 'Speed',
dataIndex: 'speed',
key: 'Speed'
},
{
title: 'Temp',
dataIndex: 'temp',
key: 'Temp'
},
{
title: 'Util',
dataIndex: 'util',
key: 'Util'
}
]}
dataSource={task.stats["devices"].map(device =>
({
key: device.device_id,
id: device.device_id,
speed: humanizeSpeed(device.speed),
temp: device.hasOwnProperty("temp") ? device.temp + " °C": "-",
util: device.util + "%",
})
)}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}>
<InfoCircleOutlined style={{ marginLeft: ".5rem" }} />
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("time_start") && (
<Descriptions.Item label="Started" span={1}>
<Tooltip title={moment.unix(task.stats["time_start"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["time_start"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
{task.stats.hasOwnProperty("estimated_stop") && (
<Descriptions.Item label="ETA" span={1}>
<Tooltip title={moment.unix(task.stats["estimated_stop"]).format("MMMM Do YYYY, HH:mm")}>
{moment.unix(task.stats["estimated_stop"]).fromNow()}
</Tooltip>
</Descriptions.Item>
)}
</Descriptions>
</Col>
<Col className="max-height-100" span={8}>
<div className="height-100" style={{ display: "flex", flexDirection: "column" }}>
<span><CodeOutlined /> Terminal</span>
<pre style={{
flex: 'auto',
overflow: 'auto',
padding: '.5rem',
margin: '0',
border: '1px solid #303030'
}}>
{task.journal.map(j => j.message + "\n")}
</pre>
</div>
</Col>
</Row>
</Col>
</Row>
) : (
"No selected task."
)}
</Col>
</Row>
</Content>
</>
)
}
