1
1
import React , { FunctionComponent , useState , useEffect , useRef } from 'react' ;
2
2
import { useRouteMatch } from 'react-router-dom' ;
3
3
import styled from 'styled-components' ;
4
- import { state } from '../shared/state' ;
4
+ import { state , view } from '../shared/state' ;
5
5
import { sendMainMessage } from '../shared/utils' ;
6
- import { SharedIcon } from '../shared/style' ;
6
+ import ColorPicker from './ColorPicker' ;
7
+ import { ConnectionEnum } from '../shared/interfaces' ;
7
8
8
9
interface ChatProps {
10
+ socket : SocketIOClient . Socket ;
9
11
sendMessage : ( event : any ) => void ;
10
12
setTextMessage : ( text : string ) => void ;
11
13
textMessage : string ;
12
14
setSelectionIsChecked : ( event : any ) => void ;
13
15
selectionIsChecked : boolean ;
16
+ init ?: ( url : string ) => void ;
14
17
}
15
18
16
19
const ChatBar : FunctionComponent < ChatProps > = ( props ) => {
@@ -20,6 +23,9 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
20
23
const [ show , setShow ] = useState ( hasSelection ) ;
21
24
const chatTextInput = useRef ( null ) ;
22
25
26
+ const isFailed = state . status === ConnectionEnum . ERROR ;
27
+ const isConnected = state . status === ConnectionEnum . CONNECTED ;
28
+
23
29
useEffect ( ( ) => {
24
30
if ( hasSelection ) {
25
31
setShow ( true ) ;
@@ -40,7 +46,19 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
40
46
chatTextInput . current . value = '' ;
41
47
} }
42
48
>
43
- { false ? (
49
+ { ! isConnected && (
50
+ < ConnectionInfo >
51
+ { isFailed ? (
52
+ < >
53
+ connection failed{ ' ' }
54
+ < span onClick = { ( ) => props . init ( state . url ) } > retry</ span >
55
+ </ >
56
+ ) : (
57
+ 'connecting...'
58
+ ) }
59
+ </ ConnectionInfo >
60
+ ) }
61
+ { /* {false ? (
44
62
<SelectionInfo
45
63
hasSelection={hasSelection}
46
64
onAnimationEnd={onAnimationEnd}
@@ -74,54 +92,96 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
74
92
</SelectionInfo>
75
93
) : (
76
94
''
77
- ) }
78
- < ChatInput hasSelection = { hasSelection } >
79
- < BellIcon >
80
- < svg
81
- xmlns = "http://www.w3.org/2000/svg"
82
- fill = "none"
83
- viewBox = "0 0 15 16"
84
- >
85
- < path
86
- fill = "#5751FF"
87
- fillRule = "evenodd"
88
- d = "M11 5v4l1 1H2l1-1V5a4 4 0 018 0zm1 4a2 2 0 002 2H0a2 2 0 002-2V5a5 5 0 0110 0v4zm-5 5l-2-2H4a3 3 0 106 0H9l-2 2z"
89
- clipRule = "evenodd"
95
+ )} */ }
96
+ { isConnected && (
97
+ < >
98
+ < ChatInput hasSelection = { hasSelection } >
99
+ < BellIcon
100
+ onClick = { ( ) =>
101
+ ( state . settings . enableNotificationSound = ! state . settings
102
+ . enableNotificationSound )
103
+ }
104
+ >
105
+ < svg
106
+ xmlns = "http://www.w3.org/2000/svg"
107
+ fill = "none"
108
+ viewBox = "0 0 15 16"
109
+ >
110
+ { state . settings . enableNotificationSound ? (
111
+ < path
112
+ fill = { state . settings . color }
113
+ fillRule = "evenodd"
114
+ d = "M11 5v4l1 1H2l1-1V5a4 4 0 018 0zm1 4a2 2 0 002 2H0a2 2 0 002-2V5a5 5 0 0110 0v4zm-5 5l-2-2H4a3 3 0 106 0H9l-2 2z"
115
+ clipRule = "evenodd"
116
+ />
117
+ ) : (
118
+ < path
119
+ fill = { state . settings . color }
120
+ fillRule = "evenodd"
121
+ d = "M4.998 11.472h9.475v-.882a1.76 1.76 0 01-1.764-1.765v-3.53a5.31 5.31 0 00-.134-1.188l-.88.854c.01.11.014.222.014.334v3.53c0 .617.202 1.187.544 1.647H6.027l-1.029 1zm5.718-8.924a4.295 4.295 0 00-7.597 2.747v3.53c0 .604-.194 1.162-.522 1.617l-1.06 1.03H.354v-.882a1.76 1.76 0 001.765-1.765v-3.53a5.295 5.295 0 019.315-3.445l-.718.698zm-5.009 9.807a1.706 1.706 0 103.413 0h1a2.706 2.706 0 11-5.413 0h1zM0 14.146l14-14 .707.708-14 14L0 14.146z"
122
+ clipRule = "evenodd"
123
+ />
124
+ ) }
125
+ </ svg >
126
+ </ BellIcon >
127
+ < input
128
+ ref = { chatTextInput }
129
+ type = "input"
130
+ onChange = { ( { target } : any ) =>
131
+ props . setTextMessage ( target . value . substr ( 0 , 1000 ) )
132
+ }
133
+ placeholder = { `Write something ... ${
134
+ props . selectionIsChecked ? '(optional)' : ''
135
+ } `}
90
136
/>
91
- </ svg >
92
- </ BellIcon >
93
- < input
94
- ref = { chatTextInput }
95
- type = "input"
96
- onChange = { ( { target } : any ) =>
97
- props . setTextMessage ( target . value . substr ( 0 , 1000 ) )
98
- }
99
- placeholder = { `Write something ... ${
100
- props . selectionIsChecked ? '(optional)' : ''
101
- } `}
102
- />
103
- </ ChatInput >
104
- < SelectionCheckbox hasSelection = { hasSelection } > lol</ SelectionCheckbox >
137
+ < ColorPicker socket = { props . socket } />
138
+ </ ChatInput >
139
+ < SelectionCheckbox hasSelection = { hasSelection } > lol</ SelectionCheckbox >
140
+ </ >
141
+ ) }
105
142
</ ChatBarForm >
106
143
) ;
107
144
} ;
108
145
146
+ const ConnectionInfo = styled . div `
147
+ display: flex;
148
+ justify-content: center;
149
+ align-items: center;
150
+ position: absolute;
151
+ left: 0;
152
+ top: 0;
153
+ width: 100%;
154
+ z-index: 6;
155
+ bottom: -5px;
156
+ text-align: center;
157
+ color: #fff;
158
+ font-weight: bold;
159
+ span {
160
+ text-decoration: underline;
161
+ cursor: pointer;
162
+ margin-left: 5px;
163
+ }
164
+ ` ;
165
+
109
166
const ChatBarForm = styled . form `
110
167
position: absolute;
168
+ z-index: 3;
169
+ height: 37px;
170
+ padding-top: 7px;
111
171
right: 14px;
112
172
left: 14px;
113
173
bottom: 7px;
114
174
margin: 0;
115
- transition: transform 0.3s ;
175
+ transition: transform 0.5s ;
116
176
transform: translateY(${ ( { isSettings } ) => ( isSettings ? 50 : 0 ) } px);
117
177
` ;
118
178
119
179
const SelectionCheckbox = styled . div `
120
180
position: absolute;
121
181
right: 0;
122
182
top: 0;
123
- animation-delay: 0.4s ;
124
- transition: all 0.4s ;
183
+ animation-delay: 0.5s ;
184
+ transition: all 0.5s ;
125
185
opacity: ${ ( p ) => ( p . hasSelection ? 1 : 0 ) } ;
126
186
color: #fff;
127
187
margin: 7px 14px;
@@ -133,7 +193,7 @@ const BellIcon = styled.div`
133
193
position: absolute;
134
194
z-index: 3;
135
195
left: 10px;
136
- top: 15px ;
196
+ top: 8px ;
137
197
svg {
138
198
width: 15px;
139
199
height: 16px;
@@ -187,18 +247,17 @@ const ChatInput = styled.div`
187
247
margin: 0;
188
248
position: relative;
189
249
z-index: 3;
250
+ transition: width 0.3s;
251
+ width: ${ ( p ) => ( p . hasSelection ? '200px' : '100%' ) } ;
190
252
input {
191
253
position: relative;
192
254
z-index: 2;
193
255
border-radius: 6px;
194
256
width: 100%;
195
257
border: 0;
196
258
padding: 10px 14px 10px 30px;
197
- margin: 7px 0 0;
198
259
height: 30px;
199
260
outline: none;
200
- transition: width 0.4s;
201
- width: ${ ( p ) => ( p . hasSelection ? '200px' : '100%' ) } ;
202
261
}
203
262
button {
204
263
border: 0;
@@ -217,4 +276,4 @@ const ChatInput = styled.div`
217
276
}
218
277
` ;
219
278
220
- export default ChatBar ;
279
+ export default view ( ChatBar ) ;
0 commit comments