diff --git a/package.json b/package.json index f70942f..0fe6ca1 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-dom": "^16.2.0" }, "dependencies": { + "react-svg-inline": "^2.1.0", "styled-components": "^3.2.1" }, "devDependencies": { diff --git a/src/defaults/button.js b/src/defaults/button.js index 566a635..0012928 100644 --- a/src/defaults/button.js +++ b/src/defaults/button.js @@ -4,9 +4,12 @@ const Button = styled.button` background: ${props => props.backgroundColor}; color: ${props => props.color}; border-radius: 3px; - padding: 10px; + padding: 10px 15px; border: none; margin: 5px; + font-size: 18px; + outline: none; + cursor: pointer; ` Button.defaultProps = { diff --git a/src/defaults/buttonRec.js b/src/defaults/buttonRec.js new file mode 100644 index 0000000..35927e9 --- /dev/null +++ b/src/defaults/buttonRec.js @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +const Button = styled.button` + background: ${props => props.backgroundColor}; + color: ${props => props.color}; + border-radius: 100px; + margin: 5px; + width: 54px; + height: 54px; + background: #e55226; + border: 6px solid white; + outline: none; + cursor: pointer; +` + +Button.defaultProps = { + color: 'black', + backgroundColor: 'white' +} + +export default Button diff --git a/src/defaults/buttonStop.js b/src/defaults/buttonStop.js new file mode 100644 index 0000000..ffddfa2 --- /dev/null +++ b/src/defaults/buttonStop.js @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +const Button = styled.button` + background: ${props => props.backgroundColor}; + color: ${props => props.color}; + border-radius: 6px; + margin: 5px; + width: 54px; + height: 54px; + background: #e55226; + border: 6px solid white; + outline: none; + cursor: pointer; +` + +Button.defaultProps = { + color: 'black', + backgroundColor: 'white' +} + +export default Button diff --git a/src/defaults/disconnected-view.js b/src/defaults/disconnected-view.js index 8094396..03fcb28 100644 --- a/src/defaults/disconnected-view.js +++ b/src/defaults/disconnected-view.js @@ -1,3 +1,37 @@ import React from 'react' +import SVGInline from 'react-svg-inline' -export default () =>
Your camera is off
+export default () => ( +
+ +
+) + +const icon = ` + + + + Group + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + +` diff --git a/src/defaults/render-actions.js b/src/defaults/render-actions.js index d56a5c4..72483ce 100644 --- a/src/defaults/render-actions.js +++ b/src/defaults/render-actions.js @@ -1,6 +1,8 @@ import React from 'react' import styled from 'styled-components' import Button from './button' +import ButtonRec from './buttonRec' +import ButtonStop from './buttonStop' const ActionsWrapper = styled.div` position: absolute; @@ -39,19 +41,19 @@ export default ({ } if (isRecording) { - return + return } if (isCameraOn && streamIsReady) { return (
- - + {/* */} +
) } - return + return } return {renderContent()} diff --git a/yarn.lock b/yarn.lock index 774e889..c718f3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2239,7 +2239,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5: +classnames@^2.2.1, classnames@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -7545,6 +7545,13 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" +react-svg-inline@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-svg-inline/-/react-svg-inline-2.1.0.tgz#1ee3a1a2b2ca0b3629822cddd5327a1125c0184f" + dependencies: + classnames "^2.2.1" + prop-types "^15.5.8" + react-test-renderer@^16.0.0-0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"