blob: 4e984f3d6d3bddb7f86ac2b7538425b38a9942b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import { IconLookup } from '@fortawesome/fontawesome-svg-core';
import { faPhoneSlash, faSync } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../fields/Doc';
import { InkTool } from '../../../fields/InkField';
import { SnappingManager } from '../../util/SnappingManager';
import '../../views/nodes/WebBox.scss';
import { FieldView, FieldViewProps } from '../nodes/FieldView';
import './DashWebRTCVideo.scss';
import { hangup, initialize, refreshVideos } from './WebCamLogic';
/**
* This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
*/
@observer
export class DashWebRTCVideo extends React.Component<FieldViewProps> {
private roomText: HTMLInputElement | undefined;
@observable remoteVideoAdded: boolean = false;
@action
changeUILook = () => (this.remoteVideoAdded = true);
/**
* Function that submits the title entered by user on enter press.
*/
private onEnterKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === 13) {
const submittedTitle = this.roomText!.value;
this.roomText!.value = '';
this.roomText!.blur();
initialize(submittedTitle, this.changeUILook);
}
};
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(DashWebRTCVideo, fieldKey);
}
onClickRefresh = () => refreshVideos();
onClickHangUp = () => hangup();
render() {
const content = (
<div className="webcam-cont" style={{ width: '100%', height: '100%' }}>
<div className="webcam-header">DashWebRTC</div>
<input id="roomName" type="text" placeholder="Enter room name" ref={e => (this.roomText = e!)} onKeyDown={this.onEnterKeyDown} />
<div className="videoContainer">
<video id="localVideo" className={'RTCVideo' + (this.remoteVideoAdded ? ' side' : ' main')} autoPlay playsInline muted ref={e => {}}></video>
<video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={e => {}}></video>
</div>
<div className="buttonContainer">
<div className="videoButtons" style={{ background: 'red' }} onClick={this.onClickHangUp}>
<FontAwesomeIcon icon={faPhoneSlash as IconLookup} color="white" />
</div>
<div className="videoButtons" style={{ background: 'green' }} onClick={this.onClickRefresh}>
<FontAwesomeIcon icon={faSync as IconLookup} color="white" />
</div>
</div>
</div>
);
const frozen = !this.props.isSelected() || SnappingManager.IsResizing;
const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !SnappingManager.IsResizing ? '-interactive' : '');
return (
<>
<div className={classname}>{content}</div>
{!frozen ? null : <div className="webBox-overlay" />}
</>
);
}
}
|
