@ant-design/icons#VideoCameraOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#VideoCameraOutlined.
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: custom-trigger.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
Example #2
| Source File: responsive.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/layout', module).add('responsive', () =>
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined />}>
nav 4
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0' }}>
<div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Layout.Sider supports responsive layout.</p>
<blockquote>
<p>Note: You can get a responsive layout by setting <code>breakpoint</code>, the Sider will collapse to the width of <code>collapsedWidth</code> when window width is below the <code>breakpoint</code>. And a special trigger will appear if the <code>collapsedWidth</code> is set to 0.</p>
</blockquote></>) } });
Example #3
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({
visible = false,
onCancel = () => {},
showDetail = () => {},
showIncomingCall = () => {},
}) {
const { channel } = useDashboard()
const name = channel?.name
return (
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
}}
>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={3}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={onCancel}
/>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={12}
>
{name}
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
}}
span={9}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<PhoneOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={showIncomingCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={showIncomingCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: visible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={showDetail}
/>
</Col>
</Row>
)
}
Example #4
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({ detailVisible = false, toggleShowDetail = () => {} }) {
const { channel, setShowVideoCall } = useDashboard()
const [showIncomingCall, setShowIncomingCall] = useState(false)
const handleAudioCall = () => {
setShowIncomingCall((prevState) => !prevState)
}
const handleVideoCall = () => {
setShowIncomingCall((prevState) => !prevState)
}
const handleOk = () => {
setShowVideoCall(true)
setShowIncomingCall(false)
}
const handleCancel = () => {
setShowIncomingCall(false)
}
const url = channel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(channel.name)
)
const name = channel.name
return (
<Fragment>
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
borderBottom: `1px solid ${THIRD_COLOR}`,
}}
>
<Col
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Avatar
style={{
color: PRIMARY_COLOR,
backgroundColor: SECONDARY_COLOR,
marginRight: 12,
}}
src={url}
>
{shortName}
</Avatar>
<Title style={{ margin: 0 }} level={4}>
{name}
</Title>
</Col>
<Col>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<PhoneOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={handleAudioCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleVideoCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: detailVisible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={toggleShowDetail}
/>
</Col>
</Row>
<IncomingCallModal
visible={showIncomingCall}
onOk={handleOk}
onCancel={handleCancel}
/>
</Fragment>
)
}
Example #5
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({
visible = false,
onCancel = () => {},
showDetail = () => {},
handleAudioCall = () => {},
handleVideoCall = () => {},
}) {
const { channel } = useDashboard()
const formatChannel = channelDto(channel)
const name = formatChannel.name
return (
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
}}
>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={3}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={onCancel}
/>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={12}
>
{name}
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
}}
span={9}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<PhoneOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={handleAudioCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={handleVideoCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: visible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={showDetail}
/>
</Col>
</Row>
)
}
Example #6
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({ detailVisible = false, toggleShowDetail = () => {} }) {
const {
channel,
setShowVideoCall,
directCall,
setDirectCall,
setMediaAccess,
} = useDashboard()
const {
requireMediaAccess,
dial,
accept,
onRinging,
onAudioInputDeviceChanged,
onAudioOutputDeviceChanged,
onVideoInputDeviceChanged,
dispose,
} = useSendBird()
const [showIncomingCall, setShowIncomingCall] = useState(false)
const listenOnRinging = async () => {
const { call } = await onRinging()
console.log(call.caller.nickname, call.caller.userId)
const mediaAccess = await requireMediaAccess()
setMediaAccess(mediaAccess)
setDirectCall(call)
setShowIncomingCall(true)
call.onEstablished = (call) => {
// ...
console.log('onEstablished', call)
}
call.onConnected = (call) => {
// ...
console.log('onConnected', call)
}
call.onEnded = (call) => {
// ...
console.log('onEnded')
call.end()
dispose(mediaAccess)
setDirectCall(null)
setShowVideoCall(false)
}
call.onRemoteAudioSettingsChanged = (call) => {
// ...
console.log('onRemoteAudioSettingsChanged', call)
if (call.isRemoteAudioEnabled) {
console.log('isRemoteAudioEnabled', call)
// The remote user has been unmuted.
// TODO: Display an unmuted icon.
} else {
console.log('isLocalAudioEnabled', call)
// The remote user has been muted.
// TODO: Display and toggles a muted icon.
}
}
call.onRemoteVideoSettingsChanged = (call) => {
// ...
console.log('onRemoteVideoSettingsChanged', call)
}
}
const listenOnAudioInputDeviceChanged = async () => {
const { call } = await onAudioInputDeviceChanged()
console.log(call)
}
const listenOnAudioOutputDeviceChanged = async () => {
const { call } = await onAudioOutputDeviceChanged()
console.log(call)
}
const listenOnVideoInputDeviceChanged = async () => {
const { call } = await onVideoInputDeviceChanged()
console.log(call)
}
useLayoutEffect(() => {
listenOnRinging()
listenOnAudioInputDeviceChanged()
listenOnAudioOutputDeviceChanged()
listenOnVideoInputDeviceChanged()
})
const handleAudioCall = () => {
console.log('handleAudioCall')
}
const handleVideoCall = () => {
setShowVideoCall(true)
setShowIncomingCall(false)
setTimeout(async () => {
const mediaAccess = await requireMediaAccess()
// console.log(mediaAccess)
const callee = channel.members.find(
(element) => element.userId !== localStorage.getItem('userId')
).userId
const call = await dial(callee)
// console.log(call)
setMediaAccess(mediaAccess)
setDirectCall(call)
}, 500)
}
const handleOk = () => {
// console.log(directCall)
setShowVideoCall(true)
setShowIncomingCall(false)
setTimeout(async () => {
accept(directCall)
}, 500)
}
const handleCancel = () => {
directCall.end()
setDirectCall(null)
setShowIncomingCall(false)
}
const formatChannel = channelDto(channel)
const url = formatChannel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(formatChannel.name)
)
const name = formatChannel.name
return (
<Fragment>
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
borderBottom: `1px solid ${THIRD_COLOR}`,
}}
>
<Col
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Avatar
style={{
color: PRIMARY_COLOR,
backgroundColor: SECONDARY_COLOR,
marginRight: 12,
}}
src={url}
>
{shortName}
</Avatar>
<Title style={{ margin: 0 }} level={4}>
{name}
</Title>
</Col>
<Col style={{ display: 'flex' }}>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<PhoneOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleAudioCall}
/>
</ScaleIn>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleVideoCall}
/>
</ScaleIn>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: detailVisible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={toggleShowDetail}
/>
</ScaleIn>
</Col>
</Row>
<IncomingCallModal
caller={directCall?.caller}
visible={showIncomingCall}
onOk={handleOk}
onCancel={handleCancel}
/>
</Fragment>
)
}
Example #7
| Source File: index.js From getlink-next with MIT License | 4 votes |
|
App = ({ user, isAdmin, isDev }) => {
const [type, setType] = useState('image');
const handleTypeChange = useCallback((e) => {
setType(e.key);
}, []);
return (
<Context.Provider value={{ user, isAdmin, isDev }}>
<Layout style={{ height: '100%', flexDirection: 'row' }}>
<HTMLHead />
<Sider
breakpoint="lg"
collapsedWidth={0}
>
<a className="logo" href="https://github.com/int64ago/getlink-next" target="_blank">
Get Link!
</a>
<Menu
theme="dark"
mode="inline"
selectedKeys={[type]}
onClick={handleTypeChange}
>
<Menu.Item key="image">
<FileImageOutlined />IMAGE
</Menu.Item>
<Menu.Item key="video">
<VideoCameraOutlined />VIDEO
</Menu.Item>
<Menu.Item key="file">
<FileOutlined />FILE
</Menu.Item>
<Menu.Item key="placeholder">
<ContainerOutlined />Placeholder
</Menu.Item>
<Menu.Item key="qrcode">
<QrcodeOutlined />QR Code
</Menu.Item>
<Menu.Item key="urlshorten">
<LinkOutlined />URL Shortener
</Menu.Item>
</Menu>
</Sider>
<Layout style={{ background: '#fff', overflow: 'hidden' }}>
<Header>
{user ? (
<Dropdown overlay={(
<Menu>
<Menu.Item>
<a href="/api/logout">Logout</a>
</Menu.Item>
</Menu>
)}>
<Avatar src={user.picture} />
</Dropdown>
) : (
<div>
<Button type="link" href="/api/login">Login</Button>
</div>
)}
</Header>
<Content
style={{
padding: 24,
height: '100%',
background: '#fff',
overflow: 'auto',
}}
>
{type === 'image' && <Uploader type="image" />}
{type === 'video' && <Uploader type="video" />}
{type === 'file' && <Uploader type="file" />}
{type === 'qrcode' && <QRCode />}
{type === 'urlshorten' && <ShortUrl />}
{type === 'placeholder' && <Placeholder />}
</Content>
</Layout>
</Layout>
</Context.Provider>
);
}
Example #8
| Source File: fixed-sider.jsx From virtuoso-design-system with MIT License | 4 votes |
|
storiesOf('antd/layout', module).add('fixed-sider', () =>
<Layout>
<Sider
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<BarChartOutlined />}>
nav 4
</Menu.Item>
<Menu.Item key="5" icon={<CloudOutlined />}>
nav 5
</Menu.Item>
<Menu.Item key="6" icon={<AppstoreOutlined />}>
nav 6
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
nav 7
</Menu.Item>
<Menu.Item key="8" icon={<ShopOutlined />}>
nav 8
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout" style={{ marginLeft: 200 }}>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
...
<br />
Really
<br />
...
<br />
...
<br />
...
<br />
long
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>When dealing with long content, a fixed sider can provide a better user experience.</p></>) } });
