17 | Sylk client is part of Sylk Suite, a set of 18 | applications for real-time communications using SIP and WebRTC specifications 19 |
20 |21 |
Copyright © AG Projects
22 |
83 | You've been invited to call
87 |
103 |
104 | );
105 | }
106 |
107 | return (
108 | You've been invited to call
{this.props.targetUri}
87 |
103 |
109 | {!this.props.account && this.props.localMedia &&
114 | );
115 | }
116 | }
117 |
118 | CallByUriBox.propTypes = {
119 | handleCallByUri : PropTypes.func.isRequired,
120 | notificationCenter : PropTypes.func.isRequired,
121 | hangupCall : PropTypes.func.isRequired,
122 | setDevice : PropTypes.func.isRequired,
123 | shareScreen : PropTypes.func.isRequired,
124 | getLocalMedia : PropTypes.func.isRequired,
125 | targetUri : PropTypes.string,
126 | localMedia : PropTypes.object,
127 | account : PropTypes.object,
128 | currentCall : PropTypes.object,
129 | generatedVideoTrack : PropTypes.bool
130 | };
131 |
132 |
133 | module.exports = CallByUriBox;
134 |
--------------------------------------------------------------------------------
/src/app/components/CallCompleteBox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 | const Logo = require('./Logo');
7 | const config = require('../config');
8 |
9 |
10 | const CallCompleteBox = (props) => {
11 | return (
12 |
111 | {content}
112 |
113 |
13 |
32 | );
33 | };
34 |
35 |
36 | CallCompleteBox.propTypes = {
37 | wasCall : PropTypes.bool,
38 | targetUri : PropTypes.string,
39 | retryHandler: PropTypes.func,
40 | failureReason: PropTypes.string
41 | };
42 |
43 | module.exports = CallCompleteBox;
44 |
--------------------------------------------------------------------------------
/src/app/components/CallMeMaybeModal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const ReactBootstrap = require('react-bootstrap');
6 | const Modal = ReactBootstrap.Modal;
7 |
8 | const utils = require('../utils');
9 |
10 |
11 | class CallMeMaybeModal extends React.Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | // ES6 classes no longer autobind
16 | this.handleClipboardButton = this.handleClipboardButton.bind(this);
17 | this.handleEmailButton = this.handleEmailButton.bind(this);
18 |
19 | const sipUri = this.props.callUrl.split('/').slice(-1)[0]; // hack!
20 | const emailMessage = `You can call me using a Web browser at ${this.props.callUrl} or a SIP client at ${sipUri} ` +
21 | 'or Sylk app from https://sylkserver.com';
22 | const subject = 'Call me, maybe?';
23 |
24 | this.emailLink = `mailto:?subject=${encodeURI(subject)}&body=${encodeURI(emailMessage)}`;
25 | }
26 |
27 | handleClipboardButton(event) {
28 | utils.copyToClipboard(this.props.callUrl);
29 | this.props.notificationCenter().postSystemNotification('Call me, maybe?', {body: 'URL copied to the clipboard'});
30 | this.props.close();
31 | }
32 |
33 | handleEmailButton(event) {
34 | if (navigator.userAgent.indexOf('Chrome') > 0) {
35 | let emailWindow = window.open(this.emailLink, '_blank');
36 | setTimeout(() => {
37 | emailWindow.close();
38 | }, 500);
39 | } else {
40 | window.open(this.emailLink, '_self');
41 | }
42 | this.props.close();
43 | }
44 |
45 | render() {
46 |
47 | return (
48 |
14 |
31 |
17 |
20 |
25 | : We hope you enjoyed this {props.wasCall === true ? 'call' : 'conference'}.
If you did, you can try using Sylk Client application:
20 |
Or you can {props.wasCall === true ? 'call' : 'join'} again:
21 | 24 |
26 |
29 | }
30 | The {props.wasCall === true ? 'call' : 'conference'} cannot be completed at this moment.
The reason was: {props.failureReason}
54 | Share this link with others so they can easily call you.
55 |
56 | You can copy it to the clipboard or send it via email.
57 |
59 |
68 |
60 |
63 |
66 |
67 | {parse(postHtmlEntities(linkfiedContent))}
86 | );
87 | } else if (message.contentType === 'text/pgp-public-key') {
88 | setParsedContent(
89 |
103 |
104 | Edit message
105 |
106 | {parsedContent}
107 |
108 | );
109 | };
110 |
111 | Message.propTypes = {
112 | message: PropTypes.object.isRequired
113 | };
114 |
115 |
116 | module.exports = Message;
117 |
--------------------------------------------------------------------------------
/src/app/components/Chat/VoiceMessageRecorderModal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const { useEffect, useRef, useState } = React;
5 | const PropTypes = require('prop-types');
6 |
7 | const {
8 | IconButton,
9 | Popover
10 | } = require('@material-ui/core');
11 | const {
12 | CancelRounded: CancelIcon
13 | } = require('@material-ui/icons');
14 | const { makeStyles } = require('@material-ui/core/styles');
15 |
16 | const { useReactMediaRecorder } = require('react-media-recorder');
17 |
18 | const VoiceMessageRecorderRenderer = require('./VoiceMessageRecorderRenderer');
19 |
20 |
21 | const styleSheet = makeStyles({
22 | top: {
23 | position: 'absolute',
24 | top: -20,
25 | right: -20
26 | },
27 | iconSize: {
28 | fontSize: '2rem'
29 | },
30 | popoverRoot: {
31 | overflow: 'visible'
32 | }
33 | });
34 |
35 | const VoiceMessageRecorderModal = (props) => {
36 | const classes = styleSheet();
37 |
38 | const { status, startRecording, stopRecording, previewAudioStream } =
39 | useReactMediaRecorder({
40 | video: false,
41 | mediaRecorderOptions: { mimeType: 'audio/wav' },
42 | onStop: (t, u) => {
43 | recordingStopped(t, u)
44 | }
45 | });
46 |
47 | const [voiceMessage, setVoiceMessage] = useState(null);
48 | const [isPreviewStarted, setIsPreviewStarted] = useState(false);
49 |
50 | const shouldUnmount = useRef(true);
51 |
52 | useEffect(() => {
53 | let ignore = false;
54 | if (props.show && startRecording && !isPreviewStarted) {
55 | if (!ignore) {
56 | setIsPreviewStarted(true);
57 | startRecording();
58 | }
59 | }
60 | return () => {
61 | ignore = true;
62 | }
63 | }, [startRecording, isPreviewStarted, props.show]);
64 |
65 | const recordingStopped = (blobUrl, blob) => {
66 | if (shouldUnmount.current !== false) {
67 | setVoiceMessage(blob);
68 | } else {
69 | props.close();
70 | }
71 | }
72 |
73 | const handleClose = () => {
74 | shouldUnmount.current = false;
75 |
76 | if (status !== 'stopped') {
77 | stopRecording();
78 | } else {
79 | props.close();
80 | }
81 | }
82 |
83 | return (
84 |
102 | {
113 | props.sendAudioMessage([
114 | new File(
115 | [voiceMessage],
116 | 'sylk-audio-recording.' + voiceMessage.type.split(';')[0].split('/')[1] || 'webm',
117 | { type: voiceMessage.type }
118 | )
119 | ]);
120 | handleClose();
121 | }}
122 | />
123 |
124 |
126 |
127 |
95 | {box}
96 |
97 | );
98 | }
99 | }
100 |
101 | Conference.propTypes = {
102 | notificationCenter : PropTypes.func.isRequired,
103 | account : PropTypes.object.isRequired,
104 | hangupCall : PropTypes.func.isRequired,
105 | setDevice : PropTypes.func.isRequired,
106 | shareScreen : PropTypes.func.isRequired,
107 | propagateKeyPress : PropTypes.func.isRequired,
108 | toggleShortcuts : PropTypes.func.isRequired,
109 | currentCall : PropTypes.object,
110 | localMedia : PropTypes.object,
111 | targetUri : PropTypes.string,
112 | participantsToInvite : PropTypes.array,
113 | generatedVideoTrack : PropTypes.bool,
114 | muteAudioFromStart : PropTypes.bool,
115 | participantIsGuest : PropTypes.bool,
116 | roomMedia : PropTypes.object,
117 | lowBandwidth : PropTypes.bool,
118 | toggleChatInCall : PropTypes.func,
119 | unreadMessages : PropTypes.object
120 |
121 | };
122 |
123 |
124 | module.exports = Conference;
125 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceCarousel.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const { default: TransitionGroup } = require('react-transition-group/TransitionGroup');
6 | const { default: CSSTransition } = require('react-transition-group/CSSTransition');
7 | const { default: clsx } = require('clsx');
8 |
9 | class ConferenceCarousel extends React.Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | displayLeftArrow: false,
14 | displayRightArrow: false
15 | };
16 |
17 | this.carouselList = null;
18 |
19 | // ES6 classes no longer autobind
20 | this.handleScroll = this.handleScroll.bind(this);
21 | this.handleResize = this.handleResize.bind(this);
22 | this.scrollToRight = this.scrollToRight.bind(this);
23 | this.scrollToLeft = this.scrollToLeft.bind(this);
24 | }
25 |
26 | componentDidMount() {
27 | // Get UL from children of the carousel
28 | const children = this.refs.carousel.children;
29 | for (let child of children) {
30 | if (child.tagName == 'UL') {
31 | this.carouselList = child;
32 | }
33 | };
34 |
35 | if (this.canScroll()) {
36 | this.setState({displayRightArrow: true}); // eslint-disable-line react/no-did-mount-set-state
37 | }
38 |
39 | window.addEventListener('resize', this.handleResize);
40 | }
41 |
42 | componentWillUnmount() {
43 | window.removeEventListener('resize', this.handleResize);
44 | }
45 |
46 | componentDidUpdate(prevProps) {
47 | if (prevProps.children.length != this.props.children.length) {
48 | // We need to wait for the animation to end before calculating
49 | setTimeout(() => {
50 | this.handleScroll();
51 | }, 310);
52 | }
53 | }
54 |
55 | canScroll() {
56 | return (this.carouselList.scrollWidth > this.carouselList.clientWidth);
57 | }
58 |
59 | handleScroll(event) {
60 | const newState = {
61 | displayRightArrow : false,
62 | displayLeftArrow : false
63 | };
64 |
65 | if (this.canScroll()) {
66 | const scrollWidth = this.carouselList.scrollWidth;
67 | const scrollLeft = this.carouselList.scrollLeft;
68 | const clientWidth = this.carouselList.clientWidth;
69 | newState.displayRightArrow = true;
70 | if (scrollLeft > 0) {
71 | newState.displayLeftArrow = true;
72 | if (scrollLeft === (scrollWidth - clientWidth)) {
73 | newState.displayRightArrow = false;
74 | }
75 | } else {
76 | newState.displayLeftArrow = false;
77 | }
78 | }
79 |
80 | this.setState(newState);
81 | }
82 |
83 | scrollToRight(event) {
84 | this.carouselList.scrollLeft += 100;
85 | }
86 |
87 | scrollToLeft(event) {
88 | this.carouselList.scrollLeft -= 100;
89 | }
90 |
91 | handleResize(event) {
92 | if (this.canScroll()) {
93 | this.setState({displayRightArrow: true})
94 | } else {
95 | if (this.state.displayRightArrow) {
96 | this.setState({displayRightArrow: false});
97 | }
98 | }
99 | }
100 |
101 | render() {
102 | const items = [];
103 | let idx = 0;
104 | React.Children.forEach(this.props.children, (child) => {
105 | items.push();
112 | }
113 | if (this.state.displayRightArrow) {
114 | arrows.push(
);
115 | }
116 | const classes = clsx({
117 | 'carousel-list' : true,
118 | 'list-inline' : true,
119 | 'text-right' : this.props.align === 'right'
120 | });
121 | return (
122 |
123 | {arrows}
124 |
130 | );
131 | }
132 | }
133 |
134 | ConferenceCarousel.propTypes = {
135 | children: PropTypes.node,
136 | align: PropTypes.string
137 | };
138 |
139 |
140 | module.exports = ConferenceCarousel;
141 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceChat.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useEffect = React.useEffect;
5 | const useRef = React.useRef;
6 | const useState = React.useState;
7 | const PropTypes = require('prop-types');
8 | const Message = require('./Chat/Message');
9 |
10 |
11 | const ConferenceChat = (props) => {
12 | const messagesEndRef = useRef(null);
13 |
14 | const scrollToBottom = () => {
15 | messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
16 | }
17 |
18 | useEffect(scrollToBottom, [props.scroll]);
19 |
20 | const [entries, setEntries] = useState([])
21 |
22 | useEffect(() => {
23 | let prevMessage = null;
24 | const entries = props.messages.filter((message) => {
25 | return !message.content.startsWith('?OTRv')
26 | }).map((message, idx) => {
27 | let continues = false;
28 | if (prevMessage !== null && prevMessage.sender.uri == message.sender.uri) {
29 | continues = true;
30 | }
31 | prevMessage = message;
32 | return (
33 |
125 |
126 | {items}
127 |
128 |
129 |
41 | {entries}
42 |
43 |
44 | );
45 | };
46 |
47 | ConferenceChat.propTypes = {
48 | scroll: PropTypes.bool,
49 | messages: PropTypes.array.isRequired
50 | };
51 |
52 |
53 | module.exports = ConferenceChat;
54 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceDrawerFiles.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const utils = require('../utils');
6 |
7 | const ReactBootstrap = require('react-bootstrap');
8 | const ListGroup = ReactBootstrap.ListGroup;
9 | const ListGroupItem = ReactBootstrap.ListGroupItem;
10 |
11 |
12 | const ConferenceDrawerFiles = (props) => {
13 | const entries = props.sharedFiles.slice(0).reverse().map((elem, idx) => {
14 | const uploader = elem.uploader.displayName || elem.uploader.uri || elem.uploader;
15 | const color = utils.generateMaterialColor(elem.uploader.uri || elem.uploader)['300'];
16 | return (
17 | Shared by {uploader}
19 |
20 | {props.downloadFile(elem.filename)}}>
21 | {elem.filename}
22 |
23 | ({(elem.filesize / 1048576).toFixed(2)} MB)
24 |
25 |
31 |
33 | {entries}
34 |
35 |
36 | );
37 | };
38 |
39 | ConferenceDrawerFiles.propTypes = {
40 | sharedFiles: PropTypes.array.isRequired,
41 | downloadFile: PropTypes.func.isRequired,
42 | embed: PropTypes.bool,
43 | wide: PropTypes.bool
44 | };
45 |
46 |
47 | module.exports = ConferenceDrawerFiles;
48 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceDrawerLog.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const { default: clsx } = require('clsx');
6 | const utils = require('../utils');
7 |
8 |
9 | const ConferenceDrawerLog = (props) => {
10 | const entries = props.log.map((elem, idx) => {
11 | const classes = clsx({
12 | 'text-danger' : elem.level === 'error',
13 | 'text-warning' : elem.level === 'warning',
14 | 'log-entry' : true
15 | });
16 |
17 | const originator = elem.originator.displayName || elem.originator.uri || elem.originator;
18 |
19 | const messages = elem.messages.map((message, index) => {
20 | return {message}Shared Files
32 |; 21 | }); 22 | 23 | const color = utils.generateMaterialColor(elem.originator.uri || elem.originator)['300']; 24 | return ( 25 |
26 |
31 | )
32 | });
33 |
34 | return (
35 | {props.log.length - idx}
27 |
28 | {originator} {elem.action}
{messages} 29 |
30 | {messages} 29 |
36 |
41 | );
42 | };
43 |
44 | ConferenceDrawerLog.propTypes = {
45 | log: PropTypes.array.isRequired
46 | };
47 |
48 |
49 | module.exports = ConferenceDrawerLog;
50 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceDrawerMute.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 |
7 | const ConferenceDrawerMute = (props) => {
8 | return (
9 | Configuration Events
37 |
38 | {entries}
39 |
40 |
10 |
14 |
15 | );
16 | };
17 |
18 | ConferenceDrawerMute.propTypes = {
19 | muteEverybody: PropTypes.func.isRequired
20 | };
21 |
22 |
23 | module.exports = ConferenceDrawerMute;
24 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceDrawerParticipant.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useState = React.useState;
5 | const useEffect = React.useEffect;
6 | const PropTypes = require('prop-types');
7 | const ReactBootstrap = require('react-bootstrap');
8 | const Label = ReactBootstrap.Label;
9 | const Media = ReactBootstrap.Media;
10 | const ButtonGroup = ReactBootstrap.ButtonGroup;
11 | const hark = require('hark');
12 |
13 | const UserIcon = require('./UserIcon');
14 | const HandIcon = require('./HandIcon');
15 | const CallQuality = require('./CallQuality');
16 |
17 |
18 | const ConferenceDrawerParticipant = (props) => {
19 | let [active, setActive] = useState(false);
20 | let [speech, setSpeech] = useState(null);
21 | const streams = props.participant.streams;
22 |
23 | React.useEffect(() => {
24 | return () => {
25 | if (speech !== null) {
26 | speech.stop();
27 | setSpeech(null);
28 | }
29 | };
30 | },[speech]);
31 |
32 | if (speech === null && props.enableSpeakingIndication && streams.length > 0 && streams[0].getAudioTracks().length !== 0) {
33 | const options = {
34 | interval: 150,
35 | play: false
36 | };
37 |
38 | const speechEvents = hark(streams[0], options);
39 | speechEvents.on('speaking', () => {
40 | setActive(true);
41 | });
42 | speechEvents.on('stopped_speaking', () => {
43 | setActive(false);
44 | });
45 | setSpeech(speechEvents);
46 | }
47 |
48 | let tag = '';
49 | let callQuality;
50 | if (props.isLocal) {
51 | tag = ;
52 | } else {
53 | if (props.stats) {
54 | callQuality = (
20 |
22 | {items}
23 |
24 |
25 | );
26 | };
27 |
28 | ConferenceDrawerParticipantList.propTypes = {
29 | children: PropTypes.node
30 | };
31 |
32 |
33 | module.exports = ConferenceDrawerParticipantList;
34 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceHeader.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useState = React.useState;
5 | const useEffect = React.useEffect;
6 | const useRef = React.useRef;
7 | const PropTypes = require('prop-types');
8 | const { default: clsx } = require('clsx');
9 | const { default: TransitionGroup } = require('react-transition-group/TransitionGroup');
10 | const { default: CSSTransition } = require('react-transition-group/CSSTransition');
11 | const { Duration } = require('luxon');
12 |
13 | const useInterval = (callback, delay) => {
14 | const savedCallback = useRef();
15 |
16 | // Remember the latest callback.
17 | useEffect(() => {
18 | savedCallback.current = callback;
19 | }, [callback]);
20 |
21 | // Set up the interval.
22 | useEffect(() => {
23 | function tick() {
24 | savedCallback.current();
25 | }
26 | if (delay !== null) {
27 | let id = setInterval(tick, delay);
28 | return () => clearInterval(id);
29 | }
30 | }, [delay]);
31 | }
32 |
33 | const ConferenceHeader = (props) => {
34 | let [seconds, setSeconds] = useState(0);
35 |
36 | useInterval(() => {
37 | setSeconds(seconds + 1);
38 | }, 1000);
39 |
40 | const duration = Duration.fromObject({seconds: seconds}).toFormat('hh:mm:ss');
41 |
42 | let videoHeader;
43 | let callButtons;
44 |
45 | const mainClasses = clsx({
46 | 'top-overlay': true,
47 | 'on-top': props.onTop
48 | });
49 | if (props.show) {
50 | const participantCount = props.participants.length + 1;
51 |
52 | const callDetail = (
53 |
54 | {duration}
55 | —
56 | {participantCount} participant{participantCount > 1 ? 's' : ''}
57 | {props.callQuality}
58 |
59 | );
60 |
61 | let electron = false;
62 | if (typeof window.process !== 'undefined') {
63 | if (window.process.versions.electron !== '' && window.process.platform === 'darwin') {
64 | electron = true;
65 | }
66 | }
67 |
68 | const leftButtonClasses = clsx({
69 | 'conference-top-left-buttons': true,
70 | 'electron-margin': electron
71 | });
72 |
73 | const headerClasses = clsx({
74 | 'call-header': true,
75 | 'solid-background': props.transparent === false
76 | });
77 |
78 | videoHeader = (
79 | Participants
21 |
85 |
97 |
86 |
96 |
87 | {props.buttons.top.left}
88 |
89 | Conference: {props.remoteIdentity}
90 |{callDetail}
91 |
92 | {props.buttons.top.right}
93 |
94 |
95 |
107 | {props.buttons.bottom}
108 |
109 |
115 |
116 | {videoHeader}
117 | {callButtons}
118 |
119 |
120 | );
121 | }
122 |
123 | ConferenceHeader.propTypes = {
124 | show: PropTypes.bool.isRequired,
125 | remoteIdentity: PropTypes.string.isRequired,
126 | participants: PropTypes.array.isRequired,
127 | buttons: PropTypes.object.isRequired,
128 | transparent: PropTypes.bool,
129 | callQuality: PropTypes.object,
130 | onTop: PropTypes.bool
131 | };
132 |
133 |
134 | module.exports = ConferenceHeader;
135 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceMenu.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const { makeStyles } = require('@material-ui/core/styles');
6 | const { Menu, MenuItem, ListItemIcon } = require('@material-ui/core');
7 |
8 |
9 | const styleSheet = makeStyles({
10 | item: {
11 | fontSize: '14px',
12 | color: '#333',
13 | minHeight: 0,
14 | lineHeight: '20px'
15 | },
16 | icon: {
17 | minWidth: '20px'
18 | }
19 | });
20 |
21 | const ConferenceMenu = (props) => {
22 | const classes = styleSheet();
23 |
24 | const handleShortcut = (event) => {
25 | props.toggleShortcuts();
26 | props.close(event);
27 | };
28 |
29 | const handleDevices = (event) => {
30 | props.toggleDevices();
31 | props.close(event);
32 | };
33 | return (
34 |
35 |
58 |
59 | );
60 | }
61 |
62 | ConferenceMenu.propTypes = {
63 | show: PropTypes.bool.isRequired,
64 | close: PropTypes.func.isRequired,
65 | anchor: PropTypes.object,
66 | toggleShortcuts: PropTypes.func,
67 | toggleDevices: PropTypes.func
68 | };
69 |
70 |
71 | module.exports = ConferenceMenu;
72 |
--------------------------------------------------------------------------------
/src/app/components/ConferenceParticipantSelf.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const ReactBootstrap = require('react-bootstrap');
6 | const Tooltip = ReactBootstrap.Tooltip;
7 | const OverlayTrigger = ReactBootstrap.OverlayTrigger;
8 | const sylkrtc = require('sylkrtc');
9 | const hark = require('hark');
10 | const { default: clsx } = require('clsx');
11 | const UserIcon = require('./UserIcon');
12 |
13 | class ConferenceParticipantSelf extends React.Component {
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | active: false,
18 | hasVideo: false,
19 | sharesScreen: false
20 | }
21 | this.speechEvents = null;
22 | }
23 |
24 | componentDidMount() {
25 | sylkrtc.utils.attachMediaStream(this.props.stream, this.refs.videoElement, {disableContextMenu: true, muted: true});
26 |
27 | // factor it out to a function to avoid lint warning about calling setState here
28 | this.attachSpeechEvents();
29 | this.refs.videoElement.onresize = (event) => {
30 | this.handleResize(event)
31 | };
32 | if (this.props.audioOnly) {
33 | this.props.stream
34 | }
35 | }
36 |
37 | handleResize(event) {
38 | const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
39 | const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
40 | if (resolutions.indexOf(videoResolution) === -1) {
41 | this.setState({sharesScreen: true});
42 | } else {
43 | this.setState({sharesScreen: false});
44 | }
45 | }
46 |
47 | componentWillUnmount() {
48 | if (this.speechEvents !== null) {
49 | this.speechEvents.stop();
50 | this.speechEvents = null;
51 | }
52 | }
53 |
54 | attachSpeechEvents() {
55 | this.setState({hasVideo: this.props.stream.getVideoTracks().length > 0});
56 |
57 | const options = {
58 | interval: 150,
59 | play: false
60 | };
61 | this.speechEvents = hark(this.props.stream, options);
62 | this.speechEvents.on('speaking', () => {
63 | this.setState({active: true});
64 | });
65 | this.speechEvents.on('stopped_speaking', () => {
66 | this.setState({active: false});
67 | });
68 | }
69 |
70 | render() {
71 | if (this.props.stream == null) {
72 | return false;
73 | }
74 |
75 | const tooltip = (
76 |
91 |
92 |
93 | );
94 | }
95 |
96 | return (
97 |
98 | {muteIcon}
99 |
100 |
105 |
106 | );
107 | }
108 | }
109 |
110 | ConferenceParticipantSelf.propTypes = {
111 | stream: PropTypes.object.isRequired,
112 | identity: PropTypes.object.isRequired,
113 | audioMuted: PropTypes.bool.isRequired,
114 | generatedVideoTrack: PropTypes.bool,
115 | audioOnly: PropTypes.bool
116 | };
117 |
118 |
119 | module.exports = ConferenceParticipantSelf;
120 |
--------------------------------------------------------------------------------
/src/app/components/CustomContextMenu.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const { Popper, MenuList, Paper } = require('@material-ui/core');
8 | const { ClickAwayListener, Fade } = require('@material-ui/core');
9 |
10 |
11 | /* copied from https://github.com/mui-org/material-ui/blob/v4.3.2/packages/material-ui/src/Menu/Menu.js#L21 */
12 | const useMenuStyles = makeStyles({
13 | /* Styles applied to the `Paper` component. */
14 | paper: {
15 | // specZ: The maximum height of a simple menu should be one or more rows less than the view
16 | // height. This ensures a tapable area outside of the simple menu with which to dismiss
17 | // the menu.
18 | maxHeight: 'calc(100% - 96px)',
19 | // Add iOS momentum scrolling.
20 | WebkitOverflowScrolling: 'touch'
21 | },
22 | /* Styles applied to the `List` component via `MenuList`. */
23 | list: {
24 | // We disable the focus ring for mouse, touch and keyboard users.
25 | outline: 0
26 | }
27 | });
28 |
29 | const CustomContentMenu = ({anchorEl, open, children, onClose, keepMounted}) => {
30 | const menuClasses = useMenuStyles();
31 | const id = open ? 'faked-reference-popper' : undefined;
32 |
33 | return (
34 |
101 | {(!this.state.hasVideo) &&
104 |
71 | {
72 | this.state.drag &&
73 |
102 | )
103 | }
104 | }
105 |
106 | DragAndDrop.propTypes = {
107 | handleDrop: PropTypes.func.isRequired,
108 | children: PropTypes.node,
109 | title: PropTypes.string,
110 | useFlex: PropTypes.bool,
111 | small: PropTypes.bool,
112 | marginTop: PropTypes.string,
113 | style: PropTypes.object
114 | };
115 |
116 |
117 | module.exports = DragAndDrop;
118 |
--------------------------------------------------------------------------------
/src/app/components/EncryptionModal.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | const React = require('react');
5 | const PropTypes = require('prop-types');
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const {
8 | Dialog,
9 | DialogTitle,
10 | DialogContent,
11 | DialogContentText,
12 | DialogActions } = require('@material-ui/core');
13 | const { Button } = require('../MaterialUIAsBootstrap');
14 |
15 |
16 | const styleSheet = makeStyles({
17 | bigger: {
18 | '&> h2': {
19 | fontSize: '20px'
20 | },
21 | '&> div > p ': {
22 | fontSize: '14px'
23 | },
24 | '&> li.MuiListSubheader-root': {
25 | fontSize: '14px',
26 | textAlign: 'left'
27 | }
28 | },
29 | fixFont: {
30 | fontFamily: 'inherit',
31 | fontSize: '14px',
32 | textAlign: 'left'
33 | },
34 | number: {
35 | fontSize: 32,
36 | textAlign: 'center',
37 | display: 'block',
38 | letterSpacing: 12,
39 | padding: 8
40 | }
41 | });
42 |
43 | function getContent(step = 0, exp) {
44 | if (step === 1 && exp) {
45 | return (
85 |
99 | }
100 | {this.props.children}
101 |
96 |
98 | {this.props.title ? this.props.title : 'Drop files to share them to the conference'}
97 | 47 | Press Export and enter this code when prompted on your other device:
48 |
52 | Enter this code when prompted on your other device:
53 |
57 | To use the private key from the other device, choose the menu option 'Export private key' on that device.
58 | Do you want to keep this key? 59 |
Please enter the account(s) you wish to add to this call. After pressing Move, all parties will be invited to join a conference.
41 | 52 |
9 |
15 | );
16 | };
17 |
18 |
19 | module.exports = FooterBox;
20 |
--------------------------------------------------------------------------------
/src/app/components/HandIcon.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const { Badge } = require('@material-ui/core');
8 |
9 |
10 | const styleSheet = makeStyles({
11 | badge: {
12 | width: '20px',
13 | height: '20px',
14 | fontWeight: 'bold',
15 | fontSize: '1rem',
16 | backgroundColor: '#337ab7'
17 | },
18 | badgeDrawer: {
19 | width: '20px',
20 | height: '20px',
21 | fontWeight: 'bold',
22 | fontSize: '1rem',
23 | backgroundColor: '#337ab7',
24 | position: 'unset',
25 | marginLeft: '-10px',
26 | transform: 'none'
27 | },
28 | rootThumb: {
29 | display: 'block',
30 | bottom: '25px',
31 | position: 'absolute',
32 | zIndex: 3
33 | }
34 | });
35 |
36 | const HandIcon = (props) => {
37 | let content = null;
38 | const classes = styleSheet();
39 | let badgeClass = classes.badge;
40 | if (props.drawer) {
41 | badgeClass = classes.badgeDrawer;
42 | }
43 | let rootClass;
44 | if (props.thumb) {
45 | rootClass = classes.rootThumb;
46 | }
47 | if (props.raisedHand !== -1) {
48 | let button = (
49 |
52 | );
53 | if (props.disableHandToggle) {
54 | button = ();
55 | }
56 | content = (
57 |
10 |
14 |
11 |
13 | Copyright © AG Projects
12 |
111 |
112 | {name} ({duration})
113 |
114 | {date}
115 |
116 |
117 |
118 |
121 |
124 |
127 |
128 |
129 |
130 |
132 |
12 |
19 | {props.children}
20 |
21 |
22 | );
23 | }
24 |
25 | HistoryTileBox.propTypes = {
26 | children: PropTypes.node
27 | };
28 |
29 |
30 | module.exports = HistoryTileBox;
31 |
--------------------------------------------------------------------------------
/src/app/components/IncomingCallModal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useEffect = React.useEffect;
5 | const PropTypes = require('prop-types');
6 | const ReactBootstrap = require('react-bootstrap');
7 | const Popover = ReactBootstrap.Popover;
8 | const OverlayTrigger = ReactBootstrap.OverlayTrigger;
9 |
10 | const UserIcon = require('./UserIcon');
11 |
12 |
13 | const IncomingCallModal = (props) => {
14 | useEffect(() => {
15 | document.addEventListener('keyup', onKeyUp);
16 | return (() => {
17 | document.removeEventListener('keyup', onKeyUp);
18 | });
19 | });
20 |
21 | const onKeyUp = (event) => {
22 | switch (event.which) {
23 | case 27:
24 | // ESC
25 | props.onHangup()
26 | break;
27 | default:
28 | break;
29 | }
30 | };
31 |
32 | const answerAudioOnly = () => {
33 | props.onAnswer({audio: true, video: false});
34 | }
35 |
36 | const answer = () => {
37 | props.onAnswer({audio: true, video: true});
38 | };
39 |
40 | if (props.call == null) {
41 | return false;
42 | }
43 |
44 | const buttonText = ['Decline', 'Accept', 'Audio'];
45 |
46 | let answerButtons = [
47 | 50 | {buttonText.shift()} 51 |
60 | {buttonText.shift()} 61 |
67 | {buttonText.shift()} 68 |
, 80 |
81 | ]; 82 | return ( 83 |
84 |
85 |
100 | );
101 | }
102 |
103 | IncomingCallModal.propTypes = {
104 | call : PropTypes.object,
105 | onAnswer : PropTypes.func.isRequired,
106 | onHangup : PropTypes.func.isRequired,
107 | autoFocus: PropTypes.bool.isRequired,
108 | compact : PropTypes.bool
109 | };
110 |
111 |
112 | module.exports = IncomingCallModal;
113 |
--------------------------------------------------------------------------------
/src/app/components/IncomingCallWindow.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const React = require('react');
3 | const ReactDOM = require('react-dom');
4 | const PropTypes = require('prop-types');
5 |
6 |
7 | class IncomingCallWindow extends React.Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.width = 425;
12 | this.height = 475;
13 | this.ipcRenderer = null;
14 | const { BrowserWindow } = window.require('electron').remote;
15 |
16 | this.browserWindowObject = new BrowserWindow({
17 | show: false,
18 | width: this.width,
19 | height: this.height,
20 | frame: false,
21 | skipTaskBar: true,
22 | title: 'Incoming Call',
23 | alwaysOnTop: true,
24 | backgroundColor: '#333',
25 | type: 'toolbar',
26 | webPreferences: {
27 | nodeIntegration: true,
28 | enableRemoteModule: true,
29 | contextIsolation: false
30 | }
31 | });
32 | this.el = document.createElement('div');
33 |
34 | [
35 | 'copyStyles',
36 | 'buttonClick',
37 | 'answer',
38 | 'answerAudioOnly'
39 | ].forEach((name) => {
40 | this[name] = this[name].bind(this);
41 | });
42 | }
43 |
44 | componentDidMount() {
45 | this.browserWindowObject.loadURL(`file://${window.__dirname}/incomingWindow.html`);
46 |
47 | this.browserWindowObject.once('ready-to-show', () => {
48 | if (this.props.enabled) {
49 | this.browserWindowObject.showInactive();
50 | }
51 | });
52 |
53 | this.browserWindowObject.webContents.once('dom-ready', () => {
54 | const fs = window.require('fs');
55 | const incomingWindow = fs.readFileSync(`${window.__dirname}/../incomingWindow.js`).toString('utf-8');
56 | this.browserWindowObject.webContents.executeJavaScript(incomingWindow)
57 | .then(() => {
58 | this.browserWindowObject.webContents.send('updateContent', this.el.innerHTML);
59 | this.copyStyles(document);
60 | });
61 | });
62 |
63 | this.ipcRenderer = window.require('electron').ipcRenderer;
64 | this.ipcRenderer.on('buttonClick', this.buttonClick);
65 | }
66 |
67 | componentDidUpdate(prevProps) {
68 | if (this.props.enabled !== prevProps.enabled) {
69 | if (this.props.enabled) {
70 | this.browserWindowObject.showInactive();
71 | } else {
72 | this.browserWindowObject.hide();
73 | }
74 | }
75 | }
76 |
77 | componentWillUnmount() {
78 | this.browserWindowObject.close();
79 | if (this.ipcRenderer != null) {
80 | this.ipcRenderer.removeListener('buttonClick', this.buttonClick)
81 | }
82 | }
83 |
84 | copyStyles(sourceDoc) {
85 | Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
86 | if (!styleSheet.href && styleSheet.cssRules) {
87 | const newStyleEl = sourceDoc.createElement('style');
88 | Array.from(styleSheet.cssRules).forEach(cssRule => {
89 | newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
90 | });
91 | this.browserWindowObject.webContents.send('updateStyles', newStyleEl.innerHTML);
92 | }
93 | });
94 | }
95 |
96 | buttonClick(event, store) {
97 | if (store === 'audio') {
98 | this.answerAudioOnly();
99 | } else if (store === 'accept') {
100 | this.answer();
101 | } else {
102 | this.props.setFocus(false);
103 | this.props.onHangup();
104 | window.require('electron').remote.getCurrentWindow().blur();
105 | }
106 | }
107 |
108 | answerAudioOnly() {
109 | this.props.onAnswer({ audio: true, video: false });
110 | }
111 |
112 | answer() {
113 | this.props.onAnswer({ audio: true, video: true });
114 | };
115 |
116 | render() {
117 | return this.browserWindowObject ? ReactDOM.render(this.props.children, this.el) : null;
118 | }
119 | }
120 |
121 | IncomingCallWindow.propTypes = {
122 | onAnswer: PropTypes.func.isRequired,
123 | onHangup: PropTypes.func.isRequired,
124 | setFocus: PropTypes.func.isRequired,
125 | enabled: PropTypes.bool,
126 | children: PropTypes.node
127 | };
128 |
129 | module.exports = IncomingCallWindow;
130 |
--------------------------------------------------------------------------------
/src/app/components/InviteParticipantsModal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const ReactBootstrap = require('react-bootstrap');
6 | const Modal = ReactBootstrap.Modal;
7 |
8 | const config = require('../config');
9 |
10 |
11 | class InviteParticipantsModal extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | this.invitees = React.createRef();
15 |
16 | this.invite = this.invite.bind(this);
17 | }
18 |
19 | invite(event) {
20 | event.preventDefault();
21 | const uris = [];
22 | this.invitees.current.value.split(',').forEach((item) => {
23 | item = item.trim();
24 | if (item.indexOf('@') === -1) {
25 | item = `${item}@${config.defaultDomain}`;
26 | }
27 | uris.push(item);
28 | });
29 | if (uris && this.props.call) {
30 | this.props.call.inviteParticipants(uris);
31 | }
32 | this.props.close();
33 | }
34 |
35 | render() {
36 | return (
37 |
86 |
99 |
87 |
98 |
88 |
89 |
91 |
94 | {props.compact ? '' : spacers} 95 |
97 | {remoteIdentityLine}
92 |is calling with {callType}
93 |94 | {props.compact ? '' : spacers} 95 |
- {answerButtons}
Enter the users you wish to invite
43 | 54 |{header}
33 | {children}
34 |
14 |
15 |
24 | );
25 | }
26 | LoadingScreen.propTypes = {
27 | text: PropTypes.string
28 | };
29 |
30 | module.exports = LoadingScreen;
31 |
--------------------------------------------------------------------------------
/src/app/components/LocalMedia.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const sylkrtc = require('sylkrtc');
6 | const { default: clsx } = require('clsx');
7 |
8 | const CallOverlay = require('./CallOverlay');
9 |
10 |
11 | class LocalMedia extends React.Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.localVideo = React.createRef();
16 |
17 | // ES6 classes no longer autobind
18 | this.hangupCall = this.hangupCall.bind(this);
19 | this.localVideoElementPlaying = this.localVideoElementPlaying.bind(this);
20 | }
21 |
22 | componentDidMount() {
23 | this.localVideo.current.addEventListener('playing', this.localVideoElementPlaying);
24 | sylkrtc.utils.attachMediaStream(this.props.localMedia, this.localVideo.current, {disableContextMenu: true, muted: true});
25 | }
26 |
27 | componentWillUnmount() {
28 | this.localVideo.current.removeEventListener('playing', this.localVideoElementPlaying);
29 | }
30 |
31 | localVideoElementPlaying() {
32 | this.localVideo.current.removeEventListener('playing', this.localVideoElementPlaying);
33 | this.props.mediaPlaying();
34 | }
35 |
36 | hangupCall(event) {
37 | event.preventDefault();
38 | this.props.hangupCall();
39 | }
40 |
41 | render() {
42 | const localVideoClasses = clsx({
43 | 'large' : true,
44 | 'animated' : true,
45 | 'fadeIn' : true,
46 | 'mirror' : !this.props.generatedVideoTrack
47 | });
48 |
49 | return (
50 |
16 |
23 |
17 |
22 |
18 |
19 |
21 | 19 |
{props.text}
20 |
51 |
61 | );
62 | }
63 | }
64 |
65 | LocalMedia.propTypes = {
66 | hangupCall : PropTypes.func,
67 | localMedia : PropTypes.object.isRequired,
68 | mediaPlaying : PropTypes.func.isRequired,
69 | remoteIdentity : PropTypes.string,
70 | generatedVideoTrack : PropTypes.bool
71 | };
72 |
73 |
74 | module.exports = LocalMedia;
75 |
--------------------------------------------------------------------------------
/src/app/components/Logo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 |
5 |
6 | const Logo = () => {
7 | return (
8 |
58 |
59 |
60 |
9 |
10 |
12 | );
13 | }
14 |
15 |
16 | module.exports = Logo;
17 |
--------------------------------------------------------------------------------
/src/app/components/LogoutModal.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | const React = require('react');
5 | const PropTypes = require('prop-types');
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const {
8 | Checkbox,
9 | Dialog,
10 | DialogActions,
11 | DialogContent,
12 | DialogContentText,
13 | DialogTitle,
14 | IconButton,
15 | FormGroup,
16 | FormControlLabel } = require('@material-ui/core');
17 | const {
18 | Close: CloseIcon } = require('@material-ui/icons');
19 | const { Button } = require('../MaterialUIAsBootstrap');
20 |
21 |
22 | const styleSheet = makeStyles((theme) => ({
23 | bigger: {
24 | '&> h2': {
25 | fontSize: '20px'
26 | },
27 | '&> div > p ': {
28 | fontSize: '14px'
29 | },
30 | '&> li.MuiListSubheader-root': {
31 | fontSize: '14px',
32 | textAlign: 'left'
33 | }
34 | },
35 | root: {
36 | marginTop: -5,
37 | '&$checked': {
38 | },
39 | '& .MuiSvgIcon-root': {
40 | fontSize: 24
41 | }
42 | },
43 | checked: {},
44 | center: {
45 | flexGrow: 1,
46 | paddingLeft: 12,
47 | color: 'rgba(0, 0, 0, 0.54)',
48 | marginBottom: 0
49 | },
50 | fixFont: {
51 | fontFamily: 'inherit',
52 | fontSize: '14px',
53 | textAlign: 'left'
54 | },
55 | fixFontCheck: {
56 | marginBottom: 0
57 | },
58 | closeButton: {
59 | position: 'absolute',
60 | right: theme.spacing(1),
61 | top: theme.spacing(1),
62 | color: theme.palette.grey[500],
63 | '&> span > svg': {
64 | fontSize: 24
65 | }
66 | }
67 | }));
68 |
69 |
70 | const LogoutModal = (props) => {
71 | const classes = styleSheet();
72 | const [removeData, _setRemoveData] = React.useState(false);
73 |
74 | const setRemoveData = (event) => {
75 | _setRemoveData(event.target.checked);
76 | }
77 |
78 | return (
79 |
132 | );
133 | }
134 |
135 | LogoutModal.propTypes = {
136 | show: PropTypes.bool.isRequired,
137 | close: PropTypes.func.isRequired,
138 | logout: PropTypes.func.isRequired
139 | };
140 |
141 |
142 | module.exports = LogoutModal;
143 |
--------------------------------------------------------------------------------
/src/app/components/MessagesLoadingScreen.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 | const { LinearProgress } = require('@material-ui/core');
7 |
8 |
9 | const MessagesLoadingScreen = (props) => {
10 | return (
11 | Sylk
11 |
12 |
13 |
34 | );
35 | }
36 |
37 | MessagesLoadingScreen.propTypes = {
38 | progress: PropTypes.any.isRequired
39 | };
40 |
41 |
42 | module.exports = MessagesLoadingScreen;
43 |
--------------------------------------------------------------------------------
/src/app/components/MuteAudioParticipantsModal.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const ReactBootstrap = require('react-bootstrap');
6 | const Modal = ReactBootstrap.Modal;
7 |
8 |
9 | const MuteAudioParticipantsModal = (props) => {
10 | const handleMute = () => {
11 | props.handleMute();
12 | props.close();
13 | }
14 | return (
15 |
14 |
33 |
15 |
32 |
16 |
17 | {props.progress !== 'storing' 18 | ?
31 | 17 | {props.progress !== 'storing' 18 | ?
Decrypting messages ...
19 | :Processing messages ...
20 | } 21 |
22 |
29 |
30 | 29 |
You can mute the audio from everybody, but you can't unmute them. 21 | They can unmute themselves at any time.
22 |
23 |
24 |
25 |
26 | 39 | Please choose 'Export private key' on a device/browser where you signed in before.
40 | If you lost access to this device/browser, please continue with 'Generate a new private key', 41 | or 'Cancel' and messaging will be disabled. 42 | If you choose to generate a new key, your previous messages cannot be read on newer devices. 43 |
81 | {props.localMedia &&
82 |
88 |
93 | }
94 |
95 | );
96 | }
97 |
98 | PreMedia.propTypes = {
99 | localMedia: PropTypes.object,
100 | hide: PropTypes.bool
101 | };
102 |
103 |
104 | module.exports = PreMedia;
105 |
--------------------------------------------------------------------------------
/src/app/components/RedialScreen.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useState = React.useState;
5 | const useEffect = React.useEffect;
6 | const useRef = React.useRef;
7 | const PropTypes = require('prop-types');
8 |
9 | const { LinearProgress } = require('@material-ui/core');
10 |
11 |
12 | const useInterval = (callback, delay) => {
13 | const savedCallback = useRef();
14 |
15 | // Remember the latest callback.
16 | useEffect(() => {
17 | savedCallback.current = callback;
18 | }, [callback]);
19 |
20 | // Set up the interval.
21 | useEffect(() => {
22 | function tick() {
23 | savedCallback.current();
24 | }
25 | if (delay !== null) {
26 | let id = setInterval(tick, delay);
27 | return () => clearInterval(id);
28 | }
29 | }, [delay]);
30 | }
31 |
32 | const RedialScreen = (props) => {
33 | let [progress, setProgress] = useState(0);
34 |
35 | let retryTime = 60;
36 | if (props.router.getPath().startsWith('/conference')) {
37 | retryTime = 180;
38 | }
39 | let interval = 500;
40 |
41 | useInterval(() => {
42 | progress = progress + .5
43 |
44 | if (progress !== retryTime) {
45 | setProgress(progress);
46 | } else {
47 | hide();
48 | }
49 | }, interval);
50 |
51 | const hide = () => {
52 | props.hide();
53 | props.router.navigate('/ready');
54 | }
55 |
56 | return (
57 |
89 |
90 |
91 |
92 |
58 |
59 |
79 | );
80 | }
81 |
82 | RedialScreen.propTypes = {
83 | router: PropTypes.object.isRequired,
84 | hide: PropTypes.func.isRequired
85 | };
86 |
87 |
88 | module.exports = RedialScreen;
89 |
--------------------------------------------------------------------------------
/src/app/components/RegisterBox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 | const RegisterForm = require('./RegisterForm');
7 | const Logo = require('./Logo');
8 |
9 |
10 | const RegisterBox = (props) => {
11 | return (
12 |
60 |
78 |
61 |
77 |
62 |
63 |
76 | 63 |
Please wait...
64 |The connection has been lost. Attempting to resume the call.
65 |
66 |
73 | 74 |
75 | 73 | 74 |
13 |
22 | );
23 | };
24 |
25 | RegisterBox.propTypes = {
26 | handleRegistration : PropTypes.func.isRequired,
27 | registrationInProgress : PropTypes.bool,
28 | autoLogin : PropTypes.bool
29 | };
30 |
31 |
32 | module.exports = RegisterBox;
33 |
--------------------------------------------------------------------------------
/src/app/components/ShortcutsModal.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | const React = require('react');
5 | const PropTypes = require('prop-types');
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const { Dialog, DialogTitle, DialogContent, DialogActions, Divider } = require('@material-ui/core');
8 | const { List, ListSubheader, ListItem, ListItemText, ListItemSecondaryAction } = require('@material-ui/core');
9 |
10 | const { Button } = require('../MaterialUIAsBootstrap');
11 |
12 | const styleSheet = makeStyles({
13 | bigger: {
14 | '&> h2': {
15 | fontSize: '20px'
16 | },
17 | '&> li > div > div > span ': {
18 | fontSize: '14px'
19 | },
20 | '&> li.MuiListSubheader-root': {
21 | fontSize: '14px',
22 | textAlign: 'left'
23 | }
24 | }
25 | });
26 |
27 | const ShortcutsModal = (props) => {
28 | const classes = styleSheet();
29 | return (
30 |
89 | );
90 | }
91 |
92 | ShortcutsModal.propTypes = {
93 | show: PropTypes.bool.isRequired,
94 | close: PropTypes.func.isRequired
95 | };
96 |
97 |
98 | module.exports = ShortcutsModal;
99 |
--------------------------------------------------------------------------------
/src/app/components/Statistics.js:
--------------------------------------------------------------------------------
1 |
2 | 'use strict';
3 |
4 | const React = require('react');
5 | const PropTypes = require('prop-types');
6 |
7 | const { Box } = require('@material-ui/core');
8 |
9 | const {Tab, Tabs} = require('../MaterialUIAsBootstrap');
10 | const Charts = require('./Statistics/Charts');
11 |
12 | /* eslint-disable react/no-multi-comp */
13 | const TabPanel = (props) => {
14 | const { children, value, index } = props;
15 | return (
16 |
14 |
21 |
22 | {value === index && (
23 | {children}
24 | )}
25 |
26 | );
27 | }
28 |
29 | TabPanel.propTypes = {
30 | children: PropTypes.node,
31 | index: PropTypes.any.isRequired,
32 | value: PropTypes.any.isRequired
33 | };
34 |
35 | function a11yProps(index) {
36 | return {
37 | id: `tab-${index}`,
38 | 'aria-controls': `tabpanel-${index}`
39 | };
40 | }
41 |
42 | const Statistics = ({
43 | videoData,
44 | audioData,
45 | lastData,
46 | videoElements,
47 | video,
48 | details
49 | }) => {
50 | const [value, setValue] = React.useState(0);
51 | const videoGraphs = video !== undefined && video !== false;
52 |
53 | const handleChange = (event, newValue) => {
54 | setValue(newValue);
55 | };
56 |
57 | return (
58 |
59 | {videoGraphs ?
60 |
61 |
70 |
73 |
74 |
82 |
83 |
88 |
89 | :
90 |
96 | )
97 | };
98 |
99 | Statistics.propTypes = {
100 | videoData: PropTypes.array,
101 | audioData: PropTypes.array,
102 | lastData: PropTypes.object,
103 | videoElements: PropTypes.object,
104 | video: PropTypes.bool,
105 | details: PropTypes.bool
106 | };
107 |
108 |
109 | module.exports = Statistics;
110 |
111 |
--------------------------------------------------------------------------------
/src/app/components/Statistics/AreaGradientChart.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const {
6 | ResponsiveContainer,
7 | AreaChart,
8 | Area } = require('recharts');
9 |
10 |
11 | const AreaGradientGraph = ({
12 | data,
13 | dataKey,
14 | height,
15 | color
16 | }) => {
17 | let stroke = '#2e6da4';
18 | let fill = 'url(#colorBlue)';
19 |
20 | if (color && color === 'green') {
21 | fill = 'url(#colorGreen)';
22 | stroke = '#4cae4c';
23 | }
24 | if (!height) {
25 | height = 60
26 | }
27 |
28 | return (
29 | {props.title}
{props.message}
);
25 | } else {
26 | message = ({props.message}
{props.message}
);
27 | }
28 |
29 | return (
30 |
31 |
35 | );
36 | };
37 |
38 | StatusBox.propTypes = {
39 | level: PropTypes.string,
40 | message: PropTypes.string.isRequired,
41 | title: PropTypes.string,
42 | width: PropTypes.oneOf(['small', 'medium','large'])
43 | };
44 |
45 |
46 | module.exports = StatusBox;
47 |
--------------------------------------------------------------------------------
/src/app/components/SwitchDevicesMenu/AudioMenuItem.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const { useRef } = React;
5 | const PropTypes = require('prop-types');
6 | const { makeStyles } = require('@material-ui/core/styles');
7 | const { ListItemIcon } = require('@material-ui/core');
8 | const { default: clsx } = require('clsx');
9 | const sylkrtc = require('sylkrtc');
10 |
11 | const VolumeBar = require('../VolumeBar')
12 |
13 |
14 | const styleSheet = makeStyles((theme) => ({
15 | audioLabel: {
16 | overflow: 'hidden',
17 | textOverflow: 'ellipsis',
18 | paddingLeft: '20px',
19 | flex: 3
20 | },
21 | audioLabelSelected: {
22 | paddingLeft: 0
23 | },
24 | icon: {
25 | minWidth: '20px'
26 | }
27 | }));
28 |
29 | const AudioMenuItem = (props) => {
30 | const classes = styleSheet();
31 | const volume = useRef();
32 |
33 | const failed = () => {
34 | return props.stream && props.stream === 'failed'
35 | }
36 |
37 | return (
38 |
32 | {message}
33 |
34 | {props.label}
45 | {props.stream && !failed() &&
46 |
75 | { failed() &&
76 |
83 |
84 |
85 |
86 | ) : (
87 |
101 | );
102 | }
103 |
104 | VideoMenuItem.propTypes = {
105 | stream: PropTypes.any,
106 | selected: PropTypes.bool,
107 | label: PropTypes.string
108 | };
109 |
110 |
111 | module.exports = VideoMenuItem;
112 |
--------------------------------------------------------------------------------
/src/app/components/TabPanel.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 |
6 |
7 | const TabPanel = (props) => {
8 | const { children, value, index, ...other } = props;
9 | return (
10 | Camera unavailable
77 | }
78 | { props.stream && !failed() &&
79 | {props.label}
80 | }
81 | { props.stream ? (
82 |
88 |
96 |
98 |
99 | )}
100 |
17 | {value === index && (
18 |
23 | );
24 | }
25 |
26 |
27 | TabPanel.propTypes = {
28 | children: PropTypes.node,
29 | index: PropTypes.any.isRequired,
30 | value: PropTypes.any.isRequired
31 | };
32 |
33 | module.exports = TabPanel;
34 |
--------------------------------------------------------------------------------
/src/app/components/URIInput.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const autocomplete = require('autocomplete.js');
6 |
7 |
8 | class URIInput extends React.Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | selecting: false
13 | };
14 |
15 | this.uriInput = React.createRef();
16 |
17 | // ES6 classes no longer autobind
18 | this.onInputBlur = this.onInputBlur.bind(this);
19 | this.onInputChange = this.onInputChange.bind(this);
20 | this.onInputKeyDown = this.onInputKeyDown.bind(this);
21 | this.onInputClick = this.onInputClick.bind(this);
22 | this.clicked = false;
23 | this.autoComplete;
24 | }
25 |
26 | componentDidMount() {
27 | this.autoComplete = autocomplete('#uri-input', { hint: false }, [
28 | {
29 | source: (query, cb) => {
30 | let data = this.props.data.filter((item) => {
31 | return item.startsWith(query);
32 | });
33 | cb(data);
34 | },
35 | displayKey: String,
36 | templates: {
37 | suggestion: (suggestion) => {
38 | return suggestion;
39 | }
40 | }
41 | }
42 | ]).on('autocomplete:selected', (event, suggestion, dataset) => {
43 | this.setValue(suggestion);
44 | });
45 |
46 | if (this.props.autoFocus) {
47 | this.uriInput.current.focus();
48 | }
49 | }
50 |
51 | componentDidUpdate(prevProps) {
52 | if (prevProps.defaultValue !== this.props.defaultValue && this.props.autoFocus) {
53 | this.uriInput.current.focus();
54 | }
55 | }
56 |
57 | setValue(value) {
58 | this.props.onChange(value);
59 | }
60 |
61 | onInputChange(event) {
62 | this.setValue(event.target.value);
63 | }
64 |
65 | onInputClick(event) {
66 | if (!this.clicked) {
67 | this.uriInput.current.select();
68 | this.clicked = true;
69 | }
70 | }
71 |
72 | onInputKeyDown(event) {
73 | switch (event.which) {
74 | case 13:
75 | // ENTER
76 | if (this.state.selecting) {
77 | this.setState({selecting: false});
78 | } else {
79 | this.props.onSelect(event.target.value);
80 | }
81 | break;
82 | case 27:
83 | // ESC
84 | this.setState({selecting: false});
85 | break;
86 | case 38:
87 | case 40:
88 | // UP / DOWN ARROW
89 | this.setState({selecting: true});
90 | break;
91 | default:
92 | break;
93 | }
94 | }
95 |
96 | onInputBlur(event) {
97 | // focus was lost, reset selecting state
98 | if (this.state.selecting) {
99 | this.setState({selecting: false});
100 | }
101 | this.clicked = false;
102 | }
103 |
104 | render() {
105 | return (
106 |
19 | {children}
20 |
21 | )}
22 |
107 |
119 |
120 | );
121 |
122 | }
123 | }
124 |
125 | URIInput.propTypes = {
126 | defaultValue: PropTypes.string.isRequired,
127 | data: PropTypes.array.isRequired,
128 | autoFocus: PropTypes.bool.isRequired,
129 | onChange: PropTypes.func.isRequired,
130 | onSelect: PropTypes.func.isRequired,
131 | placeholder : PropTypes.string
132 | };
133 |
134 |
135 | module.exports = URIInput;
136 |
--------------------------------------------------------------------------------
/src/app/components/UserIcon.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const PropTypes = require('prop-types');
5 | const utils = require('../utils');
6 |
7 | const { makeStyles } = require('@material-ui/core/styles');
8 | const { Avatar } = require('@material-ui/core');
9 |
10 | const { default: clsx } = require('clsx');
11 |
12 |
13 | const styleSheet = makeStyles({
14 | root: {
15 | transition: 'box-shadow 0.3s'
16 | },
17 | drawerAvatar: {
18 | fontFamily: 'Helvetica Neue ,Helvetica, Arial, sans-serif',
19 | textTransform: 'uppercase'
20 | },
21 | margin: {
22 | margin: '5px'
23 | },
24 | card: {
25 | width: '70px',
26 | height: '70px',
27 | fontSize: '2.5rem',
28 | margin: '10px'
29 | },
30 | chatContact: {
31 | width: '50px',
32 | height: '50px',
33 | fontSize: '1.5625rem',
34 | margin: 0
35 | },
36 | carousel: {
37 | width: '80px',
38 | height: '80px',
39 | fontSize: '2.85rem',
40 | margin: 'auto'
41 | },
42 | large: {
43 | width: '144px',
44 | height: '144px',
45 | fontSize: '5rem',
46 | margin: 'auto'
47 | },
48 | shadow: {
49 | boxShadow: '0 0 2px 2px #999'
50 | },
51 | shadowSmall: {
52 | boxShadow: '0 0 5px 2px #999'
53 | }
54 | });
55 |
56 | const UserIcon = (props) => {
57 | const classes = styleSheet();
58 | const name = props.identity.displayName || props.identity.uri;
59 | let initials = name.split(' ', 2).map(x => x[0]).join('');
60 | const color = utils.generateMaterialColor(props.identity.uri)['300'];
61 | const avatarClasses = clsx(
62 | classes.root,
63 | classes.drawerAvatar,
64 | {[`${classes.card}`]: props.card},
65 | {[`${classes.chatContact}`]: props.chatContact},
66 | {[`${classes.large}`]: props.large},
67 | {[`${classes.shadow}`]: props.active},
68 | {[`${classes.shadowSmall}`]: props.active && props.small},
69 | {[`${classes.carousel}`]: props.carousel},
70 | {[`${classes.margin}`]: props.small}
71 | );
72 |
73 | if (props.identity.uri === 'anonymous@anonymous.invalid') {
74 | initials = ;
75 | }
76 |
77 | return (
78 |
107 |
108 |
109 |
110 | {isPlaying ?
111 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | {formatTime(currentTime)}
124 |
125 |
126 |
127 |
128 | {!ready &&
130 | )
131 | }
132 |
133 | module.exports = WaveSurferPlayer;
134 |
--------------------------------------------------------------------------------
/src/app/config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const defaultDomain = 'sylk.link';
4 |
5 | const configOptions = {
6 | defaultDomain : defaultDomain,
7 | enrollmentDomain : defaultDomain,
8 | nonSipDomains : [], // Each domain configured here will be used for alternate authentication methods
9 | publicUrl : 'https://webrtc.sipthor.net',
10 | enrollmentUrl : 'https://blink.sipthor.net/enrollment-sylk-mobile.phtml',
11 | useServerCallHistory : true,
12 | serverCallHistoryUrl : 'https://blink.sipthor.net/settings-webrtc.phtml',
13 | defaultConferenceDomain : 'videoconference.sip2sip.info',
14 | defaultGuestDomain : `guest.${defaultDomain}`,
15 | wsServer : 'wss://webrtc-gateway.sipthor.net:9999/webrtcgateway/ws',
16 | fileSharingUrl : 'https://webrtc-gateway.sipthor.net:9999/webrtcgateway/filesharing',
17 | fileTransferUrl : 'https://webrtc-gateway.sipthor.net:9999/webrtcgateway/filetransfer',
18 | iceServers : [{urls: 'stun:stun.sipthor.net:3478'}],
19 | muteGuestAudioOnJoin : false,
20 | guestUserPermissions : {
21 | allowMuteAllParticipants : false,
22 | allowToggleHandsParticipants : false
23 | },
24 | showGuestCompleteScreen : true,
25 | downloadUrl : 'https://sylkserver.com'
26 | };
27 |
28 |
29 | module.exports = configOptions;
30 |
--------------------------------------------------------------------------------
/src/app/history.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const storage = require('./storage');
4 |
5 |
6 | function add(uri) {
7 | return load().then((history) => {
8 | if (history) {
9 | const idx = history.indexOf(uri);
10 | if (idx !== -1) {
11 | history.splice(idx, 1);
12 | }
13 | history.unshift(uri);
14 | // keep just the last 50
15 | history = history.slice(0, 50);
16 | } else {
17 | history = [uri];
18 | }
19 | storage.set('history', history);
20 | return history;
21 | });
22 | }
23 |
24 | function load() {
25 | return storage.get('history');
26 | }
27 |
28 | function clear() {
29 | return storage.remove('history');
30 | }
31 |
32 | exports.add = add;
33 | exports.load = load;
34 | exports.clear = clear;
35 |
--------------------------------------------------------------------------------
/src/app/hooks/index.js:
--------------------------------------------------------------------------------
1 | const { usePrevious } = require('./usePrevious');
2 | const { useResize } = require('./useResize');
3 | const { useHasChanged } = require('./useHasChanged');
4 |
5 | export { usePrevious, useResize, useHasChanged };
6 |
--------------------------------------------------------------------------------
/src/app/hooks/useHasChanged.js:
--------------------------------------------------------------------------------
1 | const { usePrevious } = require('./');
2 |
3 | const useHasChanged = (value) => {
4 | const previousValue = usePrevious(value);
5 | return JSON.stringify(previousValue) !== JSON.stringify(value);
6 | }
7 |
8 | export { useHasChanged };
9 |
10 |
--------------------------------------------------------------------------------
/src/app/hooks/usePrevious.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const React = require('react');
4 | const useEffect = React.useEffect;
5 | const useRef = React.useRef;
6 |
7 | const usePrevious = (value) => {
8 | const ref = useRef([]);
9 | useEffect(() => {
10 | ref.current = value;
11 | }, [value]);
12 |
13 | return ref.current;
14 | }
15 |
16 | export { usePrevious };
17 |
--------------------------------------------------------------------------------
/src/app/hooks/useResize.js:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const useEffect = React.useEffect;
3 | const useState = React.useState;
4 |
5 | const useResize = () => {
6 | const [myRef, setRef] = useState(null);
7 | const [width, setWidth] = useState(0);
8 | const [height, setHeight] = useState(0);
9 |
10 | useEffect(() => {
11 | const handleResize = () => {
12 | if (!ignore) {
13 | setWidth(myRef.offsetWidth)
14 | setHeight(myRef.offsetHeight)
15 | }
16 | }
17 | let ignore = false;
18 |
19 | if (myRef) {
20 | window.addEventListener('resize', handleResize)
21 | handleResize()
22 | }
23 |
24 | return () => {
25 | ignore = true;
26 | window.removeEventListener('resize', handleResize)
27 | }
28 | }, [myRef])
29 |
30 | return [setRef, width, height]
31 | }
32 |
33 | export { useResize };
34 |
--------------------------------------------------------------------------------
/src/app/mixins/FullScreen.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const screenfull = require('screenfull');
4 |
5 |
6 | const FullscreenMixin = {
7 | isFullScreen: function() {
8 | return screenfull.isFullscreen;
9 | },
10 |
11 | isFullscreenSupported: function() {
12 | return screenfull.isEnabled;
13 | },
14 |
15 | requestFullscreen: function(elem) {
16 | if (screenfull.isEnabled) {
17 | screenfull.request(elem);
18 | }
19 | },
20 |
21 | exitFullscreen: function() {
22 | if (screenfull.isEnabled) {
23 | screenfull.exit();
24 | }
25 | },
26 |
27 | toggleFullscreen: function(elem) {
28 | if (screenfull.isEnabled) {
29 | screenfull.toggle(elem);
30 | }
31 | }
32 | };
33 |
34 | module.exports = FullscreenMixin;
35 |
--------------------------------------------------------------------------------
/src/app/utils/Queue.js:
--------------------------------------------------------------------------------
1 | class Queue {
2 | static queue = [];
3 | static pendingPromise = false;
4 |
5 | static enqueue(promise) {
6 | return new Promise((resolve, reject) => {
7 | this.queue.push({
8 | promise,
9 | resolve,
10 | reject
11 | });
12 | this.dequeue();
13 | });
14 | }
15 |
16 | static dequeue() {
17 | if (this.workingOnPromise) {
18 | return false;
19 | }
20 | const item = this.queue.shift();
21 | if (!item) {
22 | return false;
23 | }
24 | try {
25 | this.workingOnPromise = true;
26 | item.promise()
27 | .then((value) => {
28 | this.workingOnPromise = false;
29 | item.resolve(value);
30 | this.dequeue();
31 | })
32 | .catch(err => {
33 | this.workingOnPromise = false;
34 | item.reject(err);
35 | this.dequeue();
36 | })
37 | } catch (err) {
38 | this.workingOnPromise = false;
39 | item.reject(err);
40 | this.dequeue();
41 | }
42 | return true;
43 | }
44 | }
45 |
46 | export { Queue };
47 |
--------------------------------------------------------------------------------
/src/assets/images/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/32.png
--------------------------------------------------------------------------------
/src/assets/images/blink-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-48.png
--------------------------------------------------------------------------------
/src/assets/images/blink-grey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-grey.png
--------------------------------------------------------------------------------
/src/assets/images/blink-grey@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-grey@2x.png
--------------------------------------------------------------------------------
/src/assets/images/blink-white-big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-white-big.png
--------------------------------------------------------------------------------
/src/assets/images/blink-white-big@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-white-big@2x.png
--------------------------------------------------------------------------------
/src/assets/images/blink-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-white.png
--------------------------------------------------------------------------------
/src/assets/images/blink-white@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink-white@2x.png
--------------------------------------------------------------------------------
/src/assets/images/blink.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/blink.ico
--------------------------------------------------------------------------------
/src/assets/images/dark_linen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/dark_linen.png
--------------------------------------------------------------------------------
/src/assets/images/dark_linen@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/dark_linen@2x.png
--------------------------------------------------------------------------------
/src/assets/images/noise1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/noise1.png
--------------------------------------------------------------------------------
/src/assets/images/noise_dark2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/noise_dark2.png
--------------------------------------------------------------------------------
/src/assets/images/transparent-1px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/transparent-1px.png
--------------------------------------------------------------------------------
/src/assets/images/video-camera-slash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/images/video-camera-slash.png
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/0.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/0.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/1.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/1.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/2.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/2.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/3.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/3.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/4.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/4.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/5.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/5.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/6.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/6.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/7.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/7.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/8.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/8.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/9.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/9.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/hash.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/hash.wav
--------------------------------------------------------------------------------
/src/assets/sounds/dtmf/star.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/dtmf/star.wav
--------------------------------------------------------------------------------
/src/assets/sounds/hangup_tone.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/hangup_tone.wav
--------------------------------------------------------------------------------
/src/assets/sounds/inbound_ringtone.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/inbound_ringtone.wav
--------------------------------------------------------------------------------
/src/assets/sounds/outbound_ringtone.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/outbound_ringtone.wav
--------------------------------------------------------------------------------
/src/assets/sounds/participant_joined.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/participant_joined.wav
--------------------------------------------------------------------------------
/src/assets/sounds/participant_left.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AGProjects/sylk-webrtc/57ba33d212b657fafa5ecb8fa13abdd83774e094/src/assets/sounds/participant_left.wav
--------------------------------------------------------------------------------
/src/assets/styles/blink.scss:
--------------------------------------------------------------------------------
1 | // Blink (http://icanblink.com)
2 |
3 | // Variables
4 | @import 'blink/variables';
5 |
6 | // Sass functions
7 | @import 'blink/functions';
8 |
9 | // Mixins
10 | @import 'blink/mixins';
11 |
12 | // Base
13 | @import 'blink/base';
14 |
15 | // Utils
16 | @import 'blink/utils';
17 |
18 | // Calls
19 | @import 'blink/call';
20 |
21 | // Video
22 | @import 'blink/video';
23 |
24 | // Notifications
25 | @import 'blink/notifications';
26 |
27 | // Forms
28 | @import 'blink/forms';
29 |
30 | // Buttons
31 | @import 'blink/buttons';
32 |
33 | // Modals
34 | @import 'blink/modals';
35 |
36 | // Popovers
37 | @import 'blink/popovers';
38 |
39 | // Animations
40 | @import 'blink/animations';
41 |
42 | // Conference
43 | @import 'blink/conference';
44 |
45 | // Conference Drawer
46 | @import 'blink/conferenceDrawer';
47 |
48 | // Components:
49 |
50 | // Loading Screen
51 | @import 'blink/LoadingScreen';
52 |
53 | // Navbar
54 | @import 'blink/NavigationBar';
55 |
56 | // URIInput
57 | @import 'blink/URIInput';
58 |
59 | // DTMFModal
60 | @import 'blink/DTMFModal';
61 |
62 | // Preview
63 | @import 'blink/Preview';
64 |
65 | // History Tile Box
66 | @import 'blink/HistoryTileBox';
67 |
68 | // Toolbar audio player
69 | @import 'blink/_ToolbarAudioPlayer';
70 |
71 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_DTMFModal.scss:
--------------------------------------------------------------------------------
1 |
2 | // Custom default button for DTMF keypad
3 | .btn-dtmf {
4 | &,
5 | &:hover,
6 | &:focus {
7 | color: $gray;
8 | text-shadow: none; // Prevent inheritence from `body`
9 | background-color: $white;
10 | border: 1px solid $gray;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_HistoryTileBox.scss:
--------------------------------------------------------------------------------
1 | .history-tile-box {
2 | display: flex;
3 | flex: 1 0 auto;
4 | align-items: self-start;
5 | width: 100%;
6 | max-width: 1200px;
7 | margin: auto;
8 |
9 | // Show hide history cards
10 | .card-hidden {
11 | height: 100%;
12 | visibility: hidden;
13 | }
14 |
15 | .card-visible {
16 | height: 100%;
17 | visibility: visible;
18 | animation-delay: .3s;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_LoadingScreen.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | display: table;
3 | width: 100%;
4 | height: 100%; // For at least Firefox
5 | min-height: 100%;
6 | }
7 |
8 | .loading-inner {
9 | display: table-cell;
10 | vertical-align: middle;
11 | }
12 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_NavigationBar.scss:
--------------------------------------------------------------------------------
1 | // Values
2 | // 31 -> inner buttonsize + border
3 | // 38 -> default padding is 6 on a 50px 50-12
4 | // 20 -> default line-height
5 |
6 | .navbar-header {
7 | float: left !important;
8 | }
9 |
10 | .navbar-blink-logo {
11 | @include background-image-retina($navbar-logo-image, $navbar-height, $navbar-height);
12 | width: $navbar-height;
13 | height: $navbar-height;
14 | margin: 0 auto;
15 | margin-left: 15px;
16 | }
17 |
18 | .navbar-btn-toolbar {
19 | margin-top: ($navbar-height - 31 - zero($navbar-height - 38)) * 0.5; // 40 -> 7/2, 50 -> 7/2
20 |
21 | button.active {
22 | padding-top: 6 + ($navbar-height - 31 - zero($navbar-height - 38)) * 0.5; // 40 -> 7/2, 50 -> 7/2
23 | padding-bottom: 4 + ($navbar-height - 31 - zero($navbar-height - 38)) * 0.5; // 40 -> 7/2, 50 -> 7/2
24 | margin-top: -($navbar-height - 31 - zero($navbar-height - 38)) * 0.5; // 40 -> 7/2, 50 -> 7/2
25 | color: #fff;
26 | background-color: rgb(8, 8, 8);
27 | }
28 | }
29 |
30 | .navbar {
31 | z-index: 1201;
32 | min-height: $navbar-height;
33 |
34 | button {
35 | padding: zero(($navbar-height - 38) * 0.5) 12px;
36 |
37 | &.btn-fw {
38 | width: 58px;
39 | margin-right: -5px;
40 | }
41 | }
42 | }
43 |
44 | .navbar-brand {
45 | height: $navbar-height;
46 | padding: ($navbar-height - 20) * 0.5 15px;
47 | padding-left: 0;
48 | margin-left: 0 !important;
49 | }
50 |
51 | .navbar-text {
52 | margin: ($navbar-height - 20) * 0.5 15px;
53 | }
54 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_Preview.scss:
--------------------------------------------------------------------------------
1 | .video-icon {
2 | &.drawer-visible {
3 | width: calc(100% - 350px) !important;
4 | margin-right: 350px;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_URIInput.scss:
--------------------------------------------------------------------------------
1 | div {
2 | &.uri-input {
3 | .algolia-autocomplete {
4 | width: 100%;
5 |
6 | .aa-hint {
7 | color: $lighter-gray;
8 | }
9 |
10 | .aa-input,
11 | .aa-hint {
12 | width: 100%;
13 | }
14 |
15 | .aa-dropdown-menu {
16 | width: 100%;
17 | background-color: $white;
18 | border: 1px solid $lighter-gray;
19 | border-top: 0;
20 |
21 | .aa-suggestion {
22 | padding: 5px 4px;
23 | color: $gray;
24 | text-align: left;
25 | cursor: pointer;
26 |
27 | &.aa-cursor {
28 | color: darken($gray, 5%);
29 | background-color: $bootstrap-link-hover-bg;
30 | }
31 | }
32 | }
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_animations.scss:
--------------------------------------------------------------------------------
1 | // Sound animation
2 |
3 | .animate-sound1 {
4 | animation: fade-custom 3s ease-in-out infinite;
5 | }
6 |
7 | @keyframes fade-custom {
8 | from {opacity: 0;}
9 | to {opacity: 1;}
10 | }
11 |
12 |
13 | // BELL
14 | @keyframes ring {
15 | 0% {
16 | transform: rotate(-15deg);
17 | }
18 |
19 | 2% {
20 | transform: rotate(15deg);
21 | }
22 |
23 | 4% {
24 | transform: rotate(-18deg);
25 | }
26 |
27 | 6% {
28 | transform: rotate(18deg);
29 | }
30 |
31 | 8% {
32 | transform: rotate(-22deg);
33 | }
34 |
35 | 10% {
36 | transform: rotate(22deg);
37 | }
38 |
39 | 12% {
40 | transform: rotate(-18deg);
41 | }
42 |
43 | 14% {
44 | transform: rotate(18deg);
45 | }
46 |
47 | 16% {
48 | transform: rotate(-12deg);
49 | }
50 |
51 | 18% {
52 | transform: rotate(12deg);
53 | }
54 |
55 | 20% {
56 | transform: rotate(0deg);
57 | }
58 | }
59 |
60 | .faa-ring {
61 | &.animated {
62 | animation: ring 2s ease infinite;
63 | transform-origin-x: 50%;
64 | transform-origin-y: 0;
65 | transform-origin-z: initial;
66 |
67 | &.faa-fast {
68 | animation: ring 1s ease infinite;
69 | }
70 |
71 | &.faa-slow {
72 | animation: ring 3s ease infinite;
73 | }
74 | }
75 | }
76 |
77 | // Incoming Modal animation
78 | .incoming-modal-enter {
79 | animation: fadeIn ease .3s;
80 | }
81 |
82 | .incoming-modal-exit {
83 | &.incoming-modal-exit-active {
84 | animation: fadeOut ease .3s;
85 | }
86 | }
87 |
88 | .premedia-display-enter-active {
89 | animation: fadeIn ease .3s;
90 | }
91 |
92 | .premedia-display-exit {
93 | &.premedia-display-exit-active {
94 | animation: fadeOut ease .5s;
95 | }
96 | }
97 |
98 | .premedia-display-exit-done {
99 | visibility: hidden;
100 | opacity: 0;
101 | }
102 |
103 | /* starting ENTER animation */
104 | .message-enter {
105 | opacity: 0;
106 | }
107 |
108 | /* ending ENTER animation */
109 | .message-enter-active {
110 | opacity: 1;
111 | transition: all 1000ms ease-in-out;
112 | }
113 |
114 | /* starting EXIT animation */
115 | .message-exit {
116 | opacity: 1;
117 | }
118 |
119 | /* ending EXIT animation */
120 | .messageout-exit-active {
121 | opacity: 0;
122 | transition: opacity 1000ms ease-in-out;
123 | }
124 |
125 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_base.scss:
--------------------------------------------------------------------------------
1 | // Base structure
2 |
3 | html,
4 | body {
5 | height: 100%;
6 | overflow: hidden;
7 | }
8 |
9 | body {
10 | @include background-image-retina($base-background-image, 512px, 512px);
11 | color: $base-foreground-color;
12 | text-align: center;
13 | background-color: $base-background-color;
14 | }
15 |
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6,
22 | .h1,
23 | .h2,
24 | .h3,
25 | .h4,
26 | .h5 {
27 | font-weight: 300;
28 | }
29 |
30 | // This will get the negative margin when >768px
31 | %site-wrapper {
32 | display: table;
33 | width: 100%;
34 | height: 100%; // For at least Firefox
35 | min-height: 100%;
36 | }
37 |
38 | .site-wrapper {
39 | @extend %site-wrapper;
40 | }
41 |
42 | // Extra markup and styles for table-esque vertical and horizontal centering
43 | .site-wrapper-shadow {
44 | @extend %site-wrapper;
45 | box-shadow: inset 0 0 100px $black-transparent;
46 | }
47 |
48 | .site-wrapper-inner {
49 | display: table-cell;
50 | vertical-align: middle;
51 | }
52 |
53 | .cover-container {
54 | margin-right: auto;
55 | margin-left: auto;
56 | }
57 |
58 |
59 | // Padding for spacing
60 | .inner {
61 | padding: 30px;
62 | }
63 |
64 | .inner-small {
65 | padding: 10px;
66 | }
67 |
68 | .blink-logo {
69 | @include background-image-retina($base-logo-image, 125px, 125px);
70 | width: 125px;
71 | height: 125px;
72 | margin: 0 auto;
73 | }
74 |
75 | // Stckiy layer to top
76 | .sticky-wrapper {
77 | position: sticky;
78 | top: -1px;
79 | z-index: 1;
80 | margin-top: calc(50vh - 159px);
81 | margin-right: -20px;
82 | margin-left: -20px;
83 | }
84 |
85 | .sticky {
86 | //sass-lint:disable-block no-color-literals, property-sort-order
87 | /* stylelint-disable order/properties-order,declaration-block-no-shorthand-property-overrides */
88 | background-color: $black-less-transparent;
89 | background: linear-gradient(180deg, $black 0%, rgba($black, .95) 15%, rgba($black, .55) 80%, rgba($black, 0) 100%);
90 | /* stylelint-enable */
91 | }
92 |
93 |
94 | // Cover
95 |
96 | .cover {
97 | padding: 0 20px;
98 |
99 | .btn-lg {
100 | padding: 10px 20px;
101 | font-weight: bold;
102 | }
103 | }
104 |
105 | // Scroll main section
106 |
107 | .scroll {
108 | display: flex;
109 | flex-direction: column;
110 | height: calc(100vh - 50px);
111 | margin-top: 50px;
112 | overflow-x: hidden;
113 | overflow-y: auto;
114 |
115 | .footer {
116 | position: static;
117 | padding-top: 10px;
118 | }
119 | }
120 |
121 | // Footer
122 |
123 | .footer {
124 | position: fixed;
125 | bottom: 0;
126 | font-size: 11px;
127 | color: $white-transparent;
128 | text-shadow: 0 1px 3px $black-transparent;
129 | }
130 |
131 | // Handle the widths
132 | .footer,
133 | .cover-container,
134 | .half-width {
135 | width: 100%; // Must be percentage or pixels for horizontal alignment
136 | }
137 |
138 |
139 | @media (min-width: 992px) {
140 | .half-width {
141 | width: 500px;
142 | margin: auto;
143 | }
144 | }
145 |
146 | // Helper to include shadow if footer is not displayed from main
147 | .extra-shadow {
148 | position: fixed;
149 | bottom: -100px;
150 | z-index: 10;
151 | width: 100vw;
152 | height: 100px;
153 | margin: 0 -20px;
154 | box-shadow: 0 -5px 100px $black-transparent;
155 | }
156 |
157 | .chat-image {
158 | width: 300px;
159 | height: 300px;
160 | @include background-image-retina($video-big-poster-image, 300px, 300px);
161 | filter: brightness(75%);
162 | opacity: .8;
163 | }
164 |
165 | .chat {
166 | .conference-drawer {
167 | .editor-wrapper {
168 | border: 0;
169 | box-shadow: none;
170 | }
171 | .top-editor-wrapper {
172 | padding-top: 10px;
173 | border-top: 1px solid rgba(0, 0, 0, 0.12);
174 | }
175 | }
176 | }
177 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Custom default button
2 | .btn-default {
3 | &,
4 | &:hover,
5 | &:focus {
6 | color: $default-button-foreground-color;
7 | text-shadow: none; // Prevent inheritence from `body`
8 | background-color: $default-button-background-color;
9 | border: 1px solid $default-button-background-color;
10 | }
11 | }
12 |
13 | // Round Button
14 |
15 | %btn-round {
16 | margin: 4px;
17 | border-radius: 50%;
18 | opacity: .9;
19 | }
20 |
21 | .btn-round {
22 | @extend %btn-round;
23 | width: 45px;
24 | height: 45px;
25 | font-size: 20px;
26 | }
27 |
28 | .btn-round-big {
29 | @extend %btn-round;
30 | width: 55px;
31 | height: 55px;
32 | font-size: 22px;
33 | }
34 |
35 | .btn-round-xxl {
36 | @extend %btn-round;
37 | width: 65px;
38 | height: 65px;
39 | font-size: 24px;
40 | }
41 |
42 | .btn-round-xs {
43 | @extend %btn-round;
44 | width: 20px;
45 | height: 20px;
46 | padding: 0;
47 | font-size: 10px;
48 | }
49 |
50 | .btn-link,
51 | .btn-round,
52 | .btn-round-big,
53 | .btn-round-xxl,
54 | .btn-round-xs {
55 | &:focus {
56 | &,
57 | &:active {
58 | outline: 0;
59 | }
60 | }
61 | }
62 |
63 | .overlap {
64 | position: absolute;
65 | bottom: 0;
66 | margin-left: -20px;
67 | background-color: $light-gray !important;
68 | border: $lighter-gray;
69 | box-shadow: 0 1px 4px rgba(0,0,0,.25);
70 | }
71 |
72 | .overlap-top {
73 | position: absolute;
74 | top: 0;
75 | margin-left: -20px;
76 | }
77 |
78 | .btn-container {
79 | position: relative;
80 | display: inline-block;
81 | }
82 |
83 | .btn-hand {
84 | padding-top: 0;
85 | padding-bottom: 0;
86 | color: $white;
87 |
88 | &:hover {
89 | color: $bootstrap-primary;
90 | }
91 |
92 | i {
93 | font-size: 21px;
94 | }
95 | }
96 |
97 | .media-right {
98 | .btn-hand {
99 | padding-top: 0;
100 | padding-bottom: 0;
101 | color: $gray;
102 |
103 | &:hover {
104 | color: $bootstrap-primary;
105 | }
106 |
107 | i {
108 | font-size: inherit;
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_call.scss:
--------------------------------------------------------------------------------
1 | .call-buttons {
2 | position: absolute;
3 | right: 0;
4 | bottom: 0 !important;
5 | left: 0;
6 | z-index: 1;
7 | padding-bottom: 35px;
8 | margin: auto;
9 | overflow: hidden;
10 | }
11 |
12 | .top-overlay {
13 | position: absolute;
14 | top: 0;
15 | right: 0;
16 | left: 0;
17 | z-index: 2;
18 |
19 | &.on-top {
20 | z-index: 1500;
21 | }
22 | }
23 |
24 | .drawer-visible {
25 | position: absolute;
26 | top: 0;
27 | right:0;
28 | bottom: 0;
29 | left: 0;
30 | display: flex;
31 | width: calc(100% - 350px) !important;
32 | margin-right: 350px;
33 | }
34 |
35 | .drawer-half-visible {
36 | @extend .drawer-visible;
37 | width: 50% !important;
38 | }
39 |
40 | .drawer-wide-visible {
41 | @extend .drawer-visible;
42 | width: calc(100% - 450px) !important;
43 | margin-right: 450px;
44 | }
45 |
46 | .call-header {
47 | padding: 4px 0;
48 | color: $white;
49 | background-color: $darker-gray-transparent;
50 |
51 | p {
52 | margin-bottom: 2px !important;
53 | overflow: hidden;
54 | font-size: 17px !important;
55 | line-height: 1.2 !important;
56 | text-overflow: ellipsis;
57 | }
58 |
59 | p + p {
60 | margin-bottom: 0 !important;
61 | }
62 |
63 | &.solid-background {
64 | background-color: $darker-gray;
65 | }
66 |
67 | .btn-link {
68 | padding-top: 9.5px;
69 | padding-bottom: 7.5px;
70 | margin-top: -3.5px;
71 | color: $lighter-gray;
72 |
73 | &:hover {
74 | color: $white;
75 | }
76 |
77 | &.active {
78 | color: #fff;
79 | background-color: rgb(8, 8, 8);
80 | }
81 |
82 | }
83 |
84 | .blink {
85 | animation: blink 1s infinite;
86 | animation-direction: alternate;
87 | }
88 |
89 | @keyframes blink {
90 | 0% { color: #5cb85c; opacity: 1; }
91 | 50% { color: #5cb85c;transform: scale(1.1); }
92 | 100% { color: #5cb85c;transform: scale(0.9); }
93 | }
94 |
95 | .call-top-left-buttons {
96 | position: absolute;
97 | top: 0;
98 | left: 0;
99 | margin-top: 3.5px;
100 |
101 | }
102 |
103 | .call-top-buttons {
104 | position: absolute;
105 | top: 0;
106 | right: 0;
107 | margin-top: 3.5px;
108 | }
109 |
110 |
111 | }
112 |
113 | .call-user-icon {
114 | padding-bottom: 100px;
115 | margin: auto;
116 | }
117 |
118 | // Buttons Animation
119 |
120 | .videobuttons-enter {
121 | animation: fadeInUp linear .3s;
122 | }
123 |
124 | .videobuttons-exit {
125 | &.videobuttons-exit-active {
126 | animation: fadeOutDown linear .3s;
127 | }
128 | }
129 |
130 | // Video header animation
131 | .videoheader-enter {
132 | animation: fadeInDown linear .3s;
133 | }
134 |
135 | .videoheader-exit {
136 | &.videoheader-exit-active {
137 | animation: fadeOutUp linear .3s;
138 | }
139 | }
140 |
141 | // Watermark animation
142 | .watermark-enter {
143 | animation: fadeIn linear .6s;
144 | }
145 |
146 | .watermark-exit {
147 | &.watermark-exit-active {
148 | animation: fadeOut linear .3s;
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_forms.scss:
--------------------------------------------------------------------------------
1 | // General
2 |
3 | // Forms
4 |
5 | .form-dial,
6 | .form-guest,
7 | .form-signin {
8 | max-width: 330px;
9 | padding: 15px;
10 | margin: 0 auto;
11 | }
12 |
13 | .form-dial {
14 | max-width: 360px;
15 | }
16 |
17 | .form-signin {
18 | .checkbox,
19 | .form-signin-heading {
20 | margin-bottom: 10px;
21 | }
22 |
23 | .checkbox {
24 | font-weight: normal;
25 | }
26 |
27 | input {
28 | &[type='password'] {
29 | border-top-left-radius: 0;
30 | border-top-right-radius: 0;
31 | }
32 | }
33 |
34 | .input-group {
35 | &:first-of-type {
36 | input {
37 | margin-bottom: -1px;
38 | border-bottom-right-radius: 0;
39 | border-bottom-left-radius: 0;
40 |
41 | // Needed to display blue border over next input group
42 | &:focus {
43 | z-index: 3;
44 | }
45 | }
46 |
47 | .input-group-addon {
48 | &:first-child {
49 | padding: 10px;
50 | padding-top: 11px;
51 | margin-bottom: -1px;
52 | font-size: 16px;
53 | border: 0;
54 | border-bottom-right-radius: 0;
55 | border-bottom-left-radius: 0;
56 | }
57 | }
58 | }
59 |
60 | ~.input-group {
61 | .input-group-addon {
62 | &:first-child {
63 | padding: 10px;
64 | padding-top: 12px;
65 | padding-bottom: 11px;
66 | font-size: 16px;
67 | border: 0;
68 | border-top: 1px solid $light-gray;
69 | border-top-left-radius: 0;
70 | border-top-right-radius: 0;
71 | }
72 | }
73 | }
74 | }
75 | }
76 |
77 | .form-guest,
78 | .form-signin-electron {
79 | .input-group {
80 | ~.input-group {
81 | margin-bottom: 20px;
82 | }
83 | }
84 | }
85 |
86 | .form-guest,
87 | .form-signin {
88 | .form-control {
89 | position: relative;
90 | box-sizing: border-box;
91 | height: auto;
92 | padding: 10px;
93 | font-size: 16px;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_functions.scss:
--------------------------------------------------------------------------------
1 | @function zero($number) {
2 | $value: 0;
3 |
4 | @if $number > 0 {
5 | $value: $number;
6 | }
7 |
8 | @return $value;
9 | }
10 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin background-image-retina($file, $width: auto, $height: auto, $type: 'png') {
2 | background-image: url($file + '.' + $type);
3 | background-size: $width $height;
4 | @media only screen and (min-resolution: 1.5dppx) {
5 | & {
6 | background-image: url($file + '@2x.' + $type);
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_modals.scss:
--------------------------------------------------------------------------------
1 |
2 | .modal-content {
3 | a {
4 | &,
5 | &:focus,
6 | &:hover {
7 | color: $bootstrap-primary;
8 | }
9 |
10 | &.btn-primary {
11 | color: $white;
12 | }
13 | }
14 | }
15 |
16 | .modal-body {
17 | .lead {
18 | font-size: 16px;
19 | }
20 | }
21 |
22 | .modal,
23 | .modal-backdrop {
24 | z-index: 9999 !important;
25 | }
26 |
27 | // Modal colors, text should not be white
28 |
29 | .modal-body,
30 | .modal-header,
31 | .modal-footer {
32 | color: $gray;
33 | }
34 |
35 | .modal-danger > .modal-content > .modal-header {
36 | padding: 10px;
37 | color: $bootstrap-danger !important;
38 | background-color: $bootstrap-danger-bg;
39 | border-color: $bootstrap-danger-border;
40 | border-radius: 6px 6px 0 0;
41 | }
42 |
43 | .modal-danger > .modal-content {
44 | border-color: $bootstrap-danger-border;
45 | }
46 |
47 | .bd {
48 | background: linear-gradient(transparent, rgba(255,255,255,.9)) !important;
49 | }
50 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_notifications.scss:
--------------------------------------------------------------------------------
1 | .notifications-tr {
2 | right: 40px !important;
3 | z-index: 1500 !important;
4 | }
5 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_popovers.scss:
--------------------------------------------------------------------------------
1 | .popover {
2 | color: $gray;
3 |
4 | &.on-top {
5 | z-index: 2000;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_utils.scss:
--------------------------------------------------------------------------------
1 | .semi-transparent {
2 | opacity: .7;
3 | }
4 |
5 | // Rotate 135 degrees
6 |
7 | .rotate-135 {
8 | transform: rotate(135deg);
9 | }
10 |
11 | // Bigger fa-4
12 |
13 | .fa-4 {
14 | font-size: 7em;
15 | }
16 |
17 | .fa-5 {
18 | font-size: 8em;
19 | }
20 | // First letter is a capital
21 |
22 | .capitalize {
23 | text-transform: capitalize;
24 | }
25 |
26 | // Shift icons so they overlap
27 |
28 | // TODO: rename
29 | .move-icon {
30 | z-index: 0;
31 | margin-left: -21px;
32 | }
33 |
34 | .move-icon2 {
35 | z-index: 1;
36 | margin-left: 28px;
37 | }
38 |
39 | .blue-bar {
40 | background-color: $bootstrap-primary !important;
41 | }
42 |
43 | .rotate-minus-45 {
44 | transform: rotate(-45deg);
45 | }
46 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_variables.scss:
--------------------------------------------------------------------------------
1 | $black: #000;
2 | $gray: #333;
3 | $darker-gray: #222;
4 | $lighter-gray: #999;
5 | $gray888: #888;
6 | $light-gray: #ccc;
7 | $white: #fff;
8 |
9 | $black-transparent: rgba($black, .5);
10 | $black-less-transparent: rgba($black, .7);
11 | $darker-gray-transparent: rgba($darker-gray, .7);
12 | $white-transparent: rgba($white, .5);
13 | $white-less-transparent: rgba($white, .8);
14 |
15 | $bootstrap-danger: #a94442;
16 | $bootstrap-danger-bg: #f2dede;
17 | $bootstrap-danger-border: darken(adjust-hue($bootstrap-danger-bg, -10), 5%);
18 | $bootstrap-base: #428bca;
19 | $bootstrap-primary: darken($bootstrap-base, 6.5%); // #337ab7
20 | $bootstrap-link-hover-bg: #f5f5f5;
21 | $bootstrap-text-info: #31708f;
22 |
23 | $base-foreground-color: $white;
24 | $base-background-color: $gray;
25 |
26 | $default-button-foreground-color: $gray;
27 | $default-button-background-color: $white;
28 |
29 | $base-background-image: '../images/dark_linen';
30 |
31 | // Needs to be 125 x 125px
32 | $base-logo-image: '../images/blink-white';
33 |
34 | $navbar-logo-image: '../images/blink-white';
35 | $navbar-height: 50px;
36 |
37 | $video-poster-image: '../images/blink-white';
38 | $video-big-poster-image: '../images/blink-white-big';
39 | $video-watermark-image: '../images/aglogo-white.svg';
40 |
41 | $video-thumbnail-width: 150px;
42 | $video-thumbnail-height: 100px;
43 |
--------------------------------------------------------------------------------
/src/assets/styles/blink/_video.scss:
--------------------------------------------------------------------------------
1 | .video-container {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 100% !important;
6 | height: 100% !important;
7 | overflow: hidden;
8 |
9 | &.drawer-visible {
10 | width: calc(100% - 350px) !important;
11 | margin-right: 350px;
12 | }
13 |
14 | video {
15 | object-fit: cover;
16 |
17 | &.mirror {
18 | transform: scaleX(-1) !important; // mirror
19 | }
20 |
21 | &.large {
22 | z-index: 0;
23 | width: 100% !important;
24 | height: auto !important;
25 | min-height: 100%;
26 | max-height: 100%;
27 | }
28 |
29 | &.video-thumbnail {
30 | position: absolute;
31 | bottom: 10px;
32 | left: 30px;
33 | z-index: 3;
34 | width: $video-thumbnail-width !important;
35 | height: $video-thumbnail-height !important;
36 | border: 2px solid $white;
37 | border-radius: 10px;
38 | }
39 |
40 | &.poster {
41 | @include background-image-retina($video-poster-image, 75px, 75px);
42 | background-repeat: no-repeat;
43 | background-position: center;
44 | background-blend-mode: luminosity;
45 |
46 | &.large {
47 | @include background-image-retina($video-big-poster-image, 350px, 350px);
48 | background-color: $black-transparent;
49 | }
50 | }
51 |
52 | &.fit {
53 | background-color: $white-transparent;
54 | object-fit: contain !important;
55 | }
56 | }
57 |
58 | .watermark {
59 | position: absolute;
60 | top: 0;
61 | right: 5px;
62 | z-index: 2;
63 | width: 160px;
64 | height: 50px;
65 | background-image: url($video-watermark-image);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/incomingWindow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
49 |
22 |
48 |
23 |
24 |
25 |
47 |
21 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
22 |
50 |
23 |
49 |
24 |
25 |
26 |
48 |