Detect click outside from the streamBar, close the chatBox if it's open (#209)

[NassimBounouas]

Types of changes

• [ ] Bugfix (change which fixes an issue)
• [x] New feature (change which adds functionality)
• [ ] Refactor (change which changes the codebase without affecting its external behavior)
• [ ] Non-breaking change (fix or feature that would causes existing functionality to work as expected)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Purpose

#209

Approach

I added an event listener on mousedown and if the chatbox is open I'm checking if the click was outside the streamBar. If the click was outside, I'm closing the chatBox.

Learning

I was inspired by this thread : here

Screenshot(s)

Checklist

• [x] My branch follows the branch naming scheme of UCLA Radio, and can merge into master without error.
• [x] My code follows the code style of this project, and I have linted it to confirm this.
• [ ] I have added tests that prove my fix is effective or that my feature works.
• [ ] My change requires a change to the documentation and I have updated the documentation accordingly.
• [x] All new and existing tests passed.

Platform

Operating System: macOS High Sierra, 10.13.3
Node Version: v9.6.1

Further Comments

[haejinjo]

This looks great Nassim. Does it still close when you click the red chat bubble icon even though it's inside the chat box?

[NassimBounouas]

Hi haejinjo !

Yes the red chat bubble is always closing the chat box !

Edit : While I was using this new feature on another computer I found a problem, StreamBar left/ride sides are considered as outside...

[jdliaw]

Hey Nassim! This looks great. Only thing I found was that when I click on the far left side inside the chat box, it will still close. Here's a little capture of the behavior I found:

^Not sure why it's not uploading into this comment directly, but here's a link to the capture: https://puu.sh/zE9QD/1816150596.gif

[NassimBounouas]

Hi jdliaw,

Yes as wrote in the edit section of my last message I found this after pushing my modifications. Didn't get the time to check why it's happening but I'll do it as soon I can !

[NassimBounouas]

The DOM of the stream bar is quite strange. The problem was that on sides the click was detected as in CanvasContent. The only simple way I found to fix this is to check if the click was done in CanvasContent.

If someone find a glitch I missed, please tell me !