               opacity: .9999 # http://stackoverflow.com/questions/5736503
               borderRadius: 1 # TODO: why is this necessary? https://github.com/invisible-college/tawk.space/issues/40
       else
-        DIV
-          style:
-            backgroundColor: 'black'
-            height: '100%'
-            width: '100%'
-            textAlign: 'center'
-            fontSize: (height / 180) + 'em'
-            textColor: 'white'
-
-          DIV {},
-            DIV
-              person.name
-            BR {},
-            DIV
-              if person.audio
-                '(Audio-Only)'
-              else
-                '(Muted)'
+        NO_VIDEO_AVATAR
+          person: person
+          height: height
       if person.audio
         DIV
           style:

  Math.round((Math.pow(10, length + 1) - Math.random() * Math.pow(10, length)))
    .toString(10)
    .slice(1)

should_hear_fully = (person, me) ->
  me.group in [person.group, person.mouseover] or

      borderRadius: 4
    @props.children

dom.NO_VIDEO_AVATAR = ->
  person = @props.person
  height = @props.height
  me = sb[server + '/connection']
  DIV
    style:
      height: '100%'
      width: '100%'
      textAlign: 'center'
      fontSize: (height / 180) + 'em'
      textColor: 'white'
    DIV
      style:
        height: '20%'
      DIV
        person.name
      BR {},
      DIV
        if person.audio
          '(Audio-Only)'
        else
          '(Muted)'
    DIV
      style:
        backgroundImage: "url('#{person.avatar_url}')"
        backgroundSize: 'contain'
        backgroundPosition: 'center bottom'
        backgroundRepeat: 'no-repeat'
        height: '80%'
      if person.id == me.id
        onClick: ->
          me.avatar_url = next_avatar_url(me.avatar_url)
          sb[server + '/connection'] = me

dom.AVATAR_PICKER = ->
  me = sb[server + '/connection']
  DIV({})


VIDEO_ICON = (props) ->
  SVG
