CoCalc -- chat-indicator.cjsx

Path: cocalc/src / smc-webapp / chat-indicator.cjsx
Views: ³⁹⁵⁴⁹
1
##############################################################################
2
#
3
#    CoCalc: Collaborative Calculation in the Cloud
4
#
5
#    Copyright (C) 2016, SageMath, Inc.
6
#
7
#    This program is free software: you can redistribute it and/or modify
8
#    it under the terms of the GNU General Public License as published by
9
#    the Free Software Foundation, either version 3 of the License, or
10
#    (at your option) any later version.
11
#
12
#    This program is distributed in the hope that it will be useful,
13
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
14
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
15
#    GNU General Public License for more details.
16
#
17
#    You should have received a copy of the GNU General Public License
18
#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
19
#
20
###############################################################################
21

22
{debounce} = require('underscore')
23

24
misc = require('smc-util/misc')
25

26
{React, ReactDOM, rclass, redux, rtypes, Redux, COLOR} = require('./smc-react')
27
{Icon, Tip, Loading, Space} = require('./r_misc')
28

29
{UsersViewing} = require('./other-users')
30
{VideoChatButton} = require('./video-chat')
31

32
CHAT_INDICATOR_STYLE =
33
    fontSize     : '14pt'
34
    borderRadius : '3px'
35

36
USERS_VIEWING_STYLE =
37
    maxWidth:"120px"
38
    paddingTop : "3px"
39

40
CHAT_INDICATOR_TIP = <span>
41
    Hide or show the chat for this file.
42
    <hr/>
43
    Use HTML, Markdown, and LaTeX in your chats,
44
    and press shift+enter to send them.
45
    Your collaborators will be notified.
46
</span>
47

48
exports.ChatIndicator = rclass
49
    reduxProps :
50
        file_use :
51
            file_use : rtypes.immutable
52
        page :
53
            fullscreen : rtypes.oneOf(['default', 'kiosk'])
54

55
    propTypes :
56
        project_id   : rtypes.string.isRequired
57
        path         : rtypes.string.isRequired
58
        is_chat_open : rtypes.bool
59

60

61
    componentWillMount: ->
62
        @toggle_chat = debounce(@toggle_chat, 500, true)
63

64
    toggle_chat: ->
65
        a = redux.getProjectActions(@props.project_id)
66
        if @props.is_chat_open
67
            a.close_chat({path:@props.path})
68
        else
69
            a.open_chat({path:@props.path})
70

71
    is_new_chat: ->
72
        return redux.getStore('file_use')?.get_file_info(@props.project_id, @props.path)?.is_unseenchat ? false
73

74
    render_users: ->
75
        <UsersViewing
76
            project_id = {@props.project_id}
77
            path       = {@props.path}
78
            style      = {USERS_VIEWING_STYLE}
79
        />
80

81
    render_video_button: ->
82
        <span style={marginLeft:'5px', marginRight:'5px', color:'#428bca'}>
83
            <VideoChatButton
84
                project_id = {@props.project_id}
85
                path       = {@props.path}
86
                short      = {true}
87
            />
88
        </span>
89

90
    render_chat_button: ->
91
        if misc.filename_extension(@props.path) == 'sage-chat'
92
            # Special case: do not show side chat for chatrooms
93
            return
94

95
        new_chat = @is_new_chat()
96
        color    = if new_chat then COLOR.FG_RED else COLOR.FG_BLUE
97
        action   = if @props.is_chat_open then 'Hide' else 'Show'
98
        title    = <span><Icon name='comment'/><Space/> <Space/> {action} chat</span>
99
        dir      = if @props.is_chat_open then 'down' else 'left'
100
        clz      = if new_chat then 'smc-chat-notification' else ''
101

102
        <div style={cursor: 'pointer', color: color, marginLeft:'5px', marginRight:'5px'} className={clz} >
103
            {@render_video_button() if @props.is_chat_open}
104
            <Tip
105
                title     = {title}
106
                tip       = {CHAT_INDICATOR_TIP}
107
                placement = 'left'
108
                delayShow = 2500
109
                >
110
                <span onClick={@toggle_chat}>
111
                    <Icon name="caret-#{dir}" />
112
                    <Space />
113
                    <Icon name='comment' />
114
                </span>
115
            </Tip>
116
        </div>
117

118
    render : ->
119
        style = misc.copy(CHAT_INDICATOR_STYLE)
120
        style.display = 'flex'
121
        if @props.fullscreen
122
            style.top   = '1px'
123
            style.right = '23px'
124
        else
125
            style.top   = '-30px'
126
            style.right = '3px'
127

128
        <div style={style}>
129
            {@render_users()}
130
            {@render_chat_button()}
131
        </div>
132

133

134

135