From 372efca385ed2caf90bbe41da84def7ef47dfd64 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 18 Jun 2018 13:06:22 -0400
Subject: [PATCH 1/3] Fix bugs and add experimental video features (#449)

---
 app/assets/stylesheets/chat.scss            |  68 ++++++++++++
 app/controllers/chat_channels_controller.rb |   1 -
 app/controllers/twilio_tokens_controller.rb |  14 +++
 app/javascript/chat/actions.js              |  11 ++
 app/javascript/chat/channels.jsx            |  13 ++-
 app/javascript/chat/chat.jsx                |  95 +++++++++++++----
 app/javascript/chat/video.jsx               | 110 ++++++++++++++++++++
 app/javascript/packs/chat.jsx               |   7 +-
 app/javascript/src/utils/pusher.js          |   3 +
 app/labor/twilio_token.rb                   |  15 ++-
 app/models/message.rb                       |   1 -
 app/views/chat_channels/index.html.erb      |  14 ++-
 config/routes.rb                            |   1 +
 13 files changed, 320 insertions(+), 33 deletions(-)
 create mode 100644 app/controllers/twilio_tokens_controller.rb
 create mode 100644 app/javascript/chat/video.jsx

diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss
index 3c96b4fd3..b12abfe52 100644
--- a/app/assets/stylesheets/chat.scss
+++ b/app/assets/stylesheets/chat.scss
@@ -137,6 +137,49 @@
   width: calc(100% - 45px);
 }
 
+.chat__videocall{
+  height: 480px;
+  width: 640px;
+  position:fixed;
+  background: $black;
+  border-radius: 12px;
+  left: 250px;
+  top: 200px;
+  cursor: grab;
+  &:active{
+    cursor: grabbing;
+  }
+  video{
+    border-radius: 12px;
+    width: 100%;
+    height: 100%;
+  }
+  .chat__localvideoscren{
+    height: 120px;
+    width: 160px;
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 5px;
+    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4);
+    video{
+      border-radius: 5px
+    }
+  }
+}
+
+.chat__videocallexitbutton{
+  border:  0px;
+  font-size: 20px;
+  color: $medium-gray;
+  padding:1px 6px 2px;
+  border-radius:6px;
+  background: rgba(0, 0, 0, 0.1);
+  position: absolute;
+  left: 3px;
+  top: 3px;
+}
+
 .activechatchannel {
   height: inherit;
   max-height: inherit;
@@ -215,6 +258,18 @@
 
 }
 
+.activechatchannel__incomingcall{
+  border: 2px solid $green;
+  box-shadow: 6px 6px 0px $green;
+  padding: 20px;
+  margin: 10px;
+  background: lighten($green, 28%);
+  font-size: 28px;
+  font-weight: bold;
+  cursor:pointer;
+  animation: pulser 0.5s linear infinite;
+}
+
 .activechatchannel__activecontent{
   border-left: 2px solid $outline-color;
   padding: 13px;
@@ -321,6 +376,11 @@
   }
 }
 
+.chatchanneltabindicator--phone{
+  background: $green;
+  padding: 0px 8px;
+}
+
 .chatchannels__channelslist {
   padding: 10px 0;
   flex-grow: 1;
@@ -520,6 +580,14 @@
   }
 }
 
+@keyframes pulser {
+  50% {
+    opacity: 0.8;
+    box-shadow: 2px 2px 0px $green;
+    padding: 18px;
+  }
+}
+
 .chat .container {
   box-shadow: 0px 0px 0px #ffffff !important;
   border: 0px !important;
diff --git a/app/controllers/chat_channels_controller.rb b/app/controllers/chat_channels_controller.rb
index 967302295..ee36cd46f 100644
--- a/app/controllers/chat_channels_controller.rb
+++ b/app/controllers/chat_channels_controller.rb
@@ -100,7 +100,6 @@ class ChatChannelsController < ApplicationController
       @active_channel.current_user = current_user if @active_channel
     end
     generate_algolia_search_key
-    # @twilio_token = TwilioToken.new(current_user).get
   end
 
   def generate_algolia_search_key
diff --git a/app/controllers/twilio_tokens_controller.rb b/app/controllers/twilio_tokens_controller.rb
new file mode 100644
index 000000000..e440cbc39
--- /dev/null
+++ b/app/controllers/twilio_tokens_controller.rb
@@ -0,0 +1,14 @@
+class TwilioTokensController < ApplicationController
+
+  def show
+    video_channel = params[:id]
+    if (video_channel.start_with?("private-video-channel-") &&
+      ChatChannel.find(video_channel.split("private-video-channel-")[1].to_i)).has_member?(current_user)
+      @twilio_token = TwilioToken.new(current_user, params[:id]).get
+      render json: { status: "success", token: @twilio_token }, status: 200
+    else
+      render json: { status: "failure", message: "User does not have permission" }, status: 401
+    end
+  end
+
+end
\ No newline at end of file
diff --git a/app/javascript/chat/actions.js b/app/javascript/chat/actions.js
index 5d54219b6..8d7e4b05c 100644
--- a/app/javascript/chat/actions.js
+++ b/app/javascript/chat/actions.js
@@ -109,6 +109,17 @@ export function sendKeys(subscription, successCb, failureCb) {
     .catch(failureCb);
 }
 
+export function getTwilioToken(videoChannelName, successCb, failureCb) {
+  fetch(`/twilio_tokens/${videoChannelName}`, {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    credentials: 'same-origin',
+  })
+    .then(response => response.json())
+    .then(successCb)
+    .catch(failureCb);
+}
+
 export function getContent(url, successCb, failureCb) {
   fetch(`https://dev.to${url}`, {
     Accept: 'application/json',
diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx
index c481b3c63..cbda38d8d 100644
--- a/app/javascript/chat/channels.jsx
+++ b/app/javascript/chat/channels.jsx
@@ -2,7 +2,13 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import ConfigImage from 'images/three-dots.svg';
 
-const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel, expanded, filterQuery, channelsLoaded }) => {
+const Channels = ({ activeChannelId,
+    chatChannels,
+    handleSwitchChannel,
+    expanded,
+    filterQuery,
+    channelsLoaded,
+    incomingVideoCallChannelIds }) => {
   const channels = chatChannels.map((channel, index) => {
     if (!channel) { return}
     const isActive = parseInt(activeChannelId, 10) === channel.id
@@ -58,6 +64,10 @@ const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel, expanded
         content = name
       }
     }
+    let callIndicator = ''
+    if (incomingVideoCallChannelIds && incomingVideoCallChannelIds.includes(channel.id)) {
+      callIndicator = <span className='chatchanneltabindicator chatchanneltabindicator--phone'>📞</span>
+    }
     return (
       <button
         key={channel.id}
@@ -71,6 +81,7 @@ const Channels = ({ activeChannelId, chatChannels, handleSwitchChannel, expanded
           data-channel-slug={modififedSlug}
           style={{border:`1px solid ${channelColor}`, boxShadow: `3px 3px 0px ${channelColor}`}}
         >
+          {callIndicator}
           {content}
         </span>
       </button>
diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx
index 1281bc630..bd3668d52 100644
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@@ -7,6 +7,8 @@ import Channels from './channels';
 import Compose from './compose';
 import Message from './message';
 import Content from './content';
+import Video from './video';
+
 import setupPusher from '../src/utils/pusher';
 
 export default class Chat extends Component {
@@ -32,10 +34,12 @@ export default class Chat extends Component {
       showChannelsList: chatOptions.showChannelsList,
       showTimestamp: chatOptions.showTimestamp,
       notificationsPermission: null,
-      activeContent: null,
+      activeContent: {},
       expanded: window.innerWidth > 600,
       isMobileDevice: typeof window.orientation !== "undefined",
-      subscribedPusherChannels: []
+      subscribedPusherChannels: [],
+      activeVideoChannelId: null,
+      incomingVideoCallChannelIds: []
     };
   }
 
@@ -76,7 +80,9 @@ export default class Chat extends Component {
 
   liveCoding = e => {
     if (this.state.activeContent != {type_of: "code_editor"}) {
-      this.setState({activeContent: {type_of: "code_editor"}})
+      let newActiveContent = this.state.activeContent
+      newActiveContent[this.state.activeChannelId] = {type_of: "code_editor"}
+      this.setState({activeContent: newActiveContent})
     }
     if (document.querySelector(".CodeMirror")) {
       let cm = document.querySelector(".CodeMirror").CodeMirror
@@ -112,6 +118,8 @@ export default class Chat extends Component {
         redactUserMessages: this.redactUserMessages,
         channelError: this.channelError,
         liveCoding: this.liveCoding,
+        videoCallInitiated: this.receiveVideoCall,
+        videoCallEnded: this.receiveVideoCallHangup
       });
       let subscriptions = this.state.subscribedPusherChannels;
       subscriptions.push(channelName);
@@ -238,6 +246,16 @@ export default class Chat extends Component {
     });
   };
 
+  receiveVideoCall = callObj => {
+    let incomingCalls = this.state.incomingVideoCallChannelIds;
+    incomingCalls.push(callObj.channelId)
+    this.setState({incomingVideoCallChannelIds: incomingCalls})
+  }
+
+  receiveVideoCallHangup = () => {
+    this.setState({activeVideoChannelId: null})
+  }
+
   redactUserMessages = res => {
     // This is shallow clone. This might cause a problem
     const clonedMessages = Object.assign({}, this.state.messages);
@@ -270,7 +288,18 @@ export default class Chat extends Component {
   handleMessageSubmit = message => {
     // should check if user has the priviledge
     if (message.startsWith('/code')) {
-      this.setState({activeContent: {type_of: "code_editor"}})
+      let newActiveContent = this.state.activeContent
+      newActiveContent[this.state.activeChannelId] = {type_of: "code_editor"}
+      this.setState({activeContent: newActiveContent})
+    } else if (message.startsWith('/call')) {
+      if (this.state.activeChannel.channel_type === 'direct') {
+        this.setState({activeVideoChannelId: this.state.activeChannelId})
+        window.pusher.channel(`presence-channel-${this.state.activeChannelId}`).trigger('client-initiatevideocall', {
+          channelId: this.state.activeChannelId
+        });
+      } else {
+        alert("Calls are only currently available in direct channels");
+      }
     } else if (message[0] === '/') {
       conductModeration(
         this.state.activeChannelId,
@@ -298,13 +327,26 @@ export default class Chat extends Component {
     this.triggerSwitchChannel(target.dataset.channelId, target.dataset.channelSlug);
   };
 
+  answerVideoCall = () => {
+    this.setState({
+      activeVideoChannelId: this.state.activeChannelId,
+      incomingVideoCallChannelIds: []
+    })
+  }
+
+  hangupVideoCall = () => {
+    window.pusher.channel(`presence-channel-${this.state.activeVideoChannelId}`).trigger('client-endvideocall', {});
+    this.setState({
+      activeVideoChannelId: null,
+    })
+  }
+
   triggerSwitchChannel = (id, slug) => {
     this.setState({
       activeChannel: this.filterForActiveChannel(this.state.chatChannels, id),
       activeChannelId: parseInt(id),
       scrolled: false,
       showAlert: false,
-      activeContent: null
     });
     this.setupChannel(id);
     window.history.replaceState(null, null, "/connect/"+slug);
@@ -348,23 +390,27 @@ export default class Chat extends Component {
 
   triggerActiveContent = e => {
     const target = e.target
+    let newActiveContent = this.state.activeContent
     if (e.target.dataset.content && e.target.dataset.content != "exit") {
       e.preventDefault();
-      this.setState({activeContent: {type_of: "loading-user"}})
+      newActiveContent[this.state.activeChannelId] = {type_of: "loading-user"}
       getContent('/api/'+target.dataset.content, this.setActiveContent, null)
-    }
-    else if (target.tagName.toLowerCase() === 'a' && target.href.startsWith('https://dev.to/')) {
+    } else if (target.tagName.toLowerCase() === 'a' && target.href.startsWith('https://dev.to/')) {
       e.preventDefault();
-      this.setState({activeContent: {type_of: "loading-post"}})
+      newActiveContent[this.state.activeChannelId] = {type_of: "loading-post"}
       getContent(`/api/articles/by_path?url=${target.href.split('https://dev.to')[1]}`, this.setActiveContent, null)
     } else if (target.dataset.content === "exit") {
       e.preventDefault();
-      this.setState({activeContent: null})
+      newActiveContent[this.state.activeChannelId] = null
     }
+      this.setState({activeContent: newActiveContent})
   }
 
   setActiveContent = response => {
-    this.setState({activeContent: response});
+    let newActiveContent = this.state.activeContent
+    newActiveContent[this.state.activeChannelId] = response
+    console.log(newActiveContent)
+    this.setState({activeContent: newActiveContent});
     setTimeout(function() {
       document.getElementById("chat_activecontent").scrollTop = 0;
     }, 10);
@@ -426,17 +472,17 @@ export default class Chat extends Component {
       let notificationsButton = "";
       let notificationsState = "";
       if (notificationsPermission === "waiting-permission") {
-        notificationsButton = <div><button class="chat__notificationsbutton " onClick={this.triggerNotificationRequest}>Turn on Notifications</button></div>;
+        notificationsButton = <div><button className="chat__notificationsbutton " onClick={this.triggerNotificationRequest}>Turn on Notifications</button></div>;
       } else if (notificationsPermission === "granted") {
-        notificationsState = <div class="chat_chatconfig chat_chatconfig--on">Notificatins On</div>
+        notificationsState = <div className="chat_chatconfig chat_chatconfig--on">Notificatins On</div>
       } else if (notificationsPermission === "denied") {
-        notificationsState = <div class="chat_chatconfig chat_chatconfig--off">Notificatins Off</div>
+        notificationsState = <div className="chat_chatconfig chat_chatconfig--off">Notificatins Off</div>
       }
       if (this.state.expanded) {
         return (
           <div className="chat__channels chat__channels--expanded">
             {notificationsButton}
-            <button class="chat__channelstogglebutt" onClick={this.toggleExpand}>{"<"}</button>
+            <button className="chat__channelstogglebutt" onClick={this.toggleExpand}>{"<"}</button>
             <input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
             <Channels
               activeChannelId={this.state.activeChannelId}
@@ -445,6 +491,7 @@ export default class Chat extends Component {
               channelsLoaded={this.state.channelsLoaded}
               filterQuery={this.state.filterQuery}
               expanded={this.state.expanded}
+              incomingVideoCallChannelIds={this.state.incomingVideoCallChannelIds}
             />
             {notificationsState}
           </div>
@@ -459,6 +506,7 @@ export default class Chat extends Component {
               style={{width: "100%"}}
               >{">"}</button>
             <Channels
+              incomingVideoCallChannelIds={this.state.incomingVideoCallChannelIds}
               activeChannelId={this.state.activeChannelId}
               chatChannels={this.state.chatChannels}
               handleSwitchChannel={this.handleSwitchChannel}
@@ -472,12 +520,13 @@ export default class Chat extends Component {
     return '';
   };
 
-  renderActiveChatChannel = (channelHeader) => (
+  renderActiveChatChannel = (channelHeader,incomingCall) => (
     <div className="activechatchannel">
       <div className="activechatchannel__conversation">
         {channelHeader}
         <div className="activechatchannel__messages" id="messagelist">
           {this.renderMessages()}
+          {incomingCall}
           <div className="messagelist__sentinel" id="messagelist__sentinel" />
         </div>
         <div className="activechatchannel__alerts">
@@ -492,7 +541,7 @@ export default class Chat extends Component {
         </div>
       </div>
       <Content
-        resource={this.state.activeContent}
+        resource={this.state.activeContent[this.state.activeChannelId]}
         onExit={this.triggerActiveContent}
         activeChannelId={this.state.activeChannelId}
         pusherKey={this.props.pusherKey}
@@ -503,7 +552,7 @@ export default class Chat extends Component {
   
 
   render() {
-    let channelHeader = ''
+    let channelHeader = <div className="activechatchannel__header">&nbsp;</div>
     let channelHeaderInner = ''
     const currentChannel = this.state.activeChannel
     if (currentChannel) {
@@ -519,11 +568,19 @@ export default class Chat extends Component {
                         {channelHeaderInner}
                       </div>
     }
+    let vid = ''
+    let incomingCall = ''
+    if (this.state.activeVideoChannelId) {
+      vid = <Video activeChannelId={this.state.activeChannelId} onExit={this.hangupVideoCall} />
+    } else if (this.state.incomingVideoCallChannelIds.includes(this.state.activeChannelId) ) {
+      incomingCall = <div className="activechatchannel__incomingcall" onClick={this.answerVideoCall}>👋 Incoming Video Call </div>
+    }
     return (
       <div className={"chat chat--" + (this.state.expanded ? "expanded" : "contracted")}>
         {this.renderChatChannels()}
         <div className="chat__activechat">
-          {this.renderActiveChatChannel(channelHeader)}
+          {vid}
+          {this.renderActiveChatChannel(channelHeader, incomingCall)}
         </div>
       </div>
     );
diff --git a/app/javascript/chat/video.jsx b/app/javascript/chat/video.jsx
new file mode 100644
index 000000000..64fd32276
--- /dev/null
+++ b/app/javascript/chat/video.jsx
@@ -0,0 +1,110 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+import { getTwilioToken } from './actions';
+const {connect, createLocalVideoTrack} = require('twilio-video');
+
+export default class Video extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      leftPx: 200,
+      topPx: 200,
+      pageX: null,
+      pageY: null,
+      token: null,
+      room: null
+    }
+  }
+  componentDidMount() {
+    getTwilioToken('private-video-channel-'+this.props.activeChannelId, this.setupCallChannel)
+  }
+
+  componentWillUnmount() {
+    this.state.room.disconnect();
+  }
+
+  setupCallChannel = (response) => {
+    const component = this;
+    connect(response.token,
+      {
+        name:`private-video-channel-${this.props.activeChannelId}`,
+        audio: true,
+        video: { width: 640 }
+      }).then(function(room) {
+      component.setState({token: response.token, room: room})
+      createLocalVideoTrack().then(track => {
+        let localMediaContainer = document.getElementById('videolocalscreen');
+        localMediaContainer.appendChild(track.attach());
+      });
+
+      room.participants.forEach(participant => {
+        component.triggerRemoteJoin(participant);
+      });
+
+      room.on('participantConnected', function(participant) {
+        component.triggerRemoteJoin(participant);
+        room.on('participantDisconnected', function(participant) {
+          component.props.onExit()
+        });
+      })
+    }, function(error) {
+      document.getElementById('videoremotescreen').innerHTML = "";
+        console.error('Unable to connect to Room: ' +  error.message);
+    });
+  }
+
+  triggerRemoteJoin = (participant) => {
+    document.getElementById('videoremotescreen').innerHTML = ""
+    participant.on('trackAdded', track => {
+      document.getElementById('videoremotescreen').appendChild(track.attach());
+    });
+  }
+
+  handleDrag = e => {
+    if (!this.state.pageX) {
+      this.setState({pageX:e.pageX,
+        pageY: e.pageY,
+        offsetDiffX: e.pageX - e.target.offsetLeft,
+        offsetDiffY: e.pageY - e.target.offsetTop,
+      })
+    } else if (e.pageX != 0){
+      this.setState({
+        leftPx: this.state.pageX + e.pageX - this.state.pageX - this.state.offsetDiffX,
+        topPx: this.state.pageY + e.pageY - this.state.pageY - this.state.offsetDiffY
+      })
+    } else if (e.pageX === 0) {
+      this.setState({pageX:null,
+        pageY: null,
+        offsetDiffX: null,
+        offsetDiffY: null,
+      })
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className="chat__videocall"
+          id="chat__videocall"
+          draggable="true"
+          onDrag={this.handleDrag}
+          style={{left:this.state.leftPx+'px', top: this.state.topPx+'px'}}
+          >
+        <div id="videoremotescreen"></div>
+        <div className="chat__localvideoscren" id="videolocalscreen"></div>
+        <button className="chat__videocallexitbutton" onClick={this.props.onExit}>
+          ×
+        </button>
+      </div>
+    )
+  }
+}
+
+
+
+
+
+
+
+
+
diff --git a/app/javascript/packs/chat.jsx b/app/javascript/packs/chat.jsx
index 60bd59f67..c35de1b9e 100644
--- a/app/javascript/packs/chat.jsx
+++ b/app/javascript/packs/chat.jsx
@@ -13,13 +13,15 @@ HTMLDocument.prototype.ready = new Promise(resolve => {
 document.ready.then(
   getUserDataAndCsrfToken().then(currentUser => {
     if (document.getElementById('chat')) {
-      const { chatChannels, pusherKey, chatOptions, algoliaKey, algoliaId, algoliaIndex } = document.getElementById(
+      const { chatChannels, pusherKey, chatOptions, algoliaKey, algoliaId, algoliaIndex, twilioToken } = document.getElementById(
         'chat',
       ).dataset;
       window.currentUser = currentUser;
       window.csrfToken = document.querySelector(
         "meta[name='csrf-token']",
       ).content;
+      const renderTarget = document.getElementById('chat');
+      const placeholder = document.getElementById('chat_placeholder')
       const root = render(
         <Chat
           pusherKey={pusherKey}
@@ -29,8 +31,9 @@ document.ready.then(
           algoliaKey={algoliaKey}
           algoliaIndex={algoliaIndex}
         />,
-        document.getElementById('chat'),
+        renderTarget, renderTarget.firstChild
       );
+      renderTarget.removeChild(placeholder);
       window.InstantClick.on('change', () => {
         render('', document.body, root);
       });
diff --git a/app/javascript/src/utils/pusher.js b/app/javascript/src/utils/pusher.js
index ec0f1de6a..8ade4e455 100644
--- a/app/javascript/src/utils/pusher.js
+++ b/app/javascript/src/utils/pusher.js
@@ -22,6 +22,9 @@ export default function setupPusher(key, callbackObjects) {
   channel.bind('channel-cleared', callbackObjects.channelCleared);
   channel.bind('user-banned', callbackObjects.redactUserMessages);
   channel.bind('client-livecode', callbackObjects.liveCoding);
+  channel.bind('client-initiatevideocall', callbackObjects.videoCallInitiated);
+  channel.bind('client-endvideocall', callbackObjects.videoCallEnded);
+  
   // channel.bind('pusher:subscription_succeeded', callbackObjects.channelSubscribed);
   channel.bind('pusher:subscription_error', callbackObjects.channelError);
   return channel;
diff --git a/app/labor/twilio_token.rb b/app/labor/twilio_token.rb
index fec3b68c4..45649a117 100644
--- a/app/labor/twilio_token.rb
+++ b/app/labor/twilio_token.rb
@@ -1,17 +1,16 @@
 class TwilioToken
-  attr_accessor :user
+  attr_accessor :user, :room_name
 
-  def initialize(user)
+  def initialize(user, room_name)
     @user = user
+    @room_name = room_name
   end
 
   def get
-    require 'twilio-ruby'
-
     # Replace with ENV vars
-    account_sid = 'AC1403f2c95cd4912bcb13e1fdc893aef1'
-    api_key = 'SK02d79fd84d84df170adce9a95f826c0d'
-    api_secret = 'MQC9HvLDMbwyQTJNs3x1IHNodidq2Zqf'
+    account_sid = ENV["TWILIO_ACCOUNT_SID"]
+    api_key = ENV["TWILIO_VIDEO_API_KEY"]
+    api_secret = ENV["TWILIO_VIDEO_API_SECRET"]
 
     token = Twilio::JWT::AccessToken.new(
       account_sid,
@@ -22,7 +21,7 @@ class TwilioToken
     )
 
     grant = Twilio::JWT::AccessToken::VideoGrant.new
-    grant.room = 'DailyStandup'
+    grant.room = room_name
     token.add_grant(grant)
 
     token.to_jwt
diff --git a/app/models/message.rb b/app/models/message.rb
index 7a6b9f2ea..7758d0896 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -55,7 +55,6 @@ class Message < ApplicationRecord
       not(user_id: user_id).
       update_all(has_unopened_messages: true)
   end
-  handle_asynchronously :update_all_has_unopened_messages_statuses
 
   def evaluate_markdown
     self.message_html = MarkdownParser.new(message_markdown).evaluate_inline_markdown
diff --git a/app/views/chat_channels/index.html.erb b/app/views/chat_channels/index.html.erb
index 5f0fcb09a..c99c9feda 100644
--- a/app/views/chat_channels/index.html.erb
+++ b/app/views/chat_channels/index.html.erb
@@ -20,8 +20,20 @@
       data-algolia-index="<%= "SecuredChatChannel_#{Rails.env}" %>"
       data-chat-channels="<%= [] %>"
       data-chat-options="<%= {showChannelsList:true, showTimestamp: true, activeChannelId: @active_channel&.id }.to_json %>"
-      data-twilio-token="<%= @twilio_token %>"
     >
+      <div class="chat" id="chat_placeholder">
+        <div class="chat__channels chat__channels--expanded">
+            <button class="chat__channelstogglebutt" onClick={this.toggleExpand}><</button>
+            <input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
+        </div>
+        <div class="chat__activechat">
+          <div class="activechatchannel">
+            <div class="activechatchannel__conversation">
+              <div class="activechatchannel__header"><span>&nbsp;</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 <% else %>
   <%= render "devise/registrations/registration_form" %>
diff --git a/config/routes.rb b/config/routes.rb
index 7a6f9c6a8..eb49c4a00 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -94,6 +94,7 @@ Rails.application.routes.draw do
   resources :additional_content_boxes, only: [:index]
   resources :videos, only: [:create, :new]
   resources :video_states, only: [:create]
+  resources :twilio_tokens, only: [:show]
   resources :push_notification_subscriptions, only: [:create]
   
   get "/notifications/:username" => "notifications#index"

From 4c76476f29c1c1986aee1ca4157fab6aa217cea9 Mon Sep 17 00:00:00 2001
From: Yechiel Kalmenson <contact@yechiel.me>
Date: Tue, 19 Jun 2018 10:43:50 -0400
Subject: [PATCH 2/3] Fix the order in the setup steps. (#451)

---
 README.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 02f7de835..be9609dd8 100644
--- a/README.md
+++ b/README.md
@@ -72,12 +72,13 @@ If a process could be improved, don't hesitate to bring it up, but there are alw
 1. `git clone git@github.com:thepracticaldev/dev.to_core.git`
 2. `bundle install`
 3. `bin/yarn`
-4. `bin/setup`
-5. Set up your environment variables/secrets
+4. Set up your environment variables/secrets
     - Create a `config/application.yml` file to store development secrets. This is a personal file that is ignored in git.
     - Copy [`config/sample_application.yml`](config/sample_application.yml) in order to create a valid `application.yml`
-    - You'll need to get your own free API keys for a few services. [**Follow this wiki to get them.**](https://github.com/thepracticaldev/dev.to_core/wiki/Getting-API-Keys-for-Basic-Development)
+    - You'll need to get your own free API keys for a few services in order to get your development environment running. [**Follow this wiki to get them.**](https://github.com/thepracticaldev/dev.to_core/wiki/Getting-API-Keys-for-Basic-Development)
     - If you are missing `ENV` variables on bootup, `_env_checker.rb` will let you know. If you add or remove `ENV` vars to the project, you must also modify this file before they can be merged. The wiki above should handle all the necessary keys for basic development.
+5. Run `bin/setup`
+
 
 #### Starting the application
 We're mostly a Rails app, with a bit of Webpack sprinkled in. **For most cases, simply running `bin/rails server` will do.** If you're working with Webpack though, you'll need to run the following:

From ce082da04165522930d14e68f3178db9faf952af Mon Sep 17 00:00:00 2001
From: Jess Lee <jessleenyc@gmail.com>
Date: Tue, 19 Jun 2018 10:51:20 -0400
Subject: [PATCH 3/3] Display Sidebar & Local Time For Events (#438)

* show timestamp in local time

* Implement initializeTimeFixer

* Add Misc work WIP

* add local time to calendar event

* add local dates

* update localtime for calendar event

* show timestamp in local time

* Implement initializeTimeFixer

* Add Misc work WIP

* add local time to calendar event

* add local dates

* update localtime for calendar event

* return if no utc times on page

* add events sidebar

* only show 3 events on sidebar

* Change wording on events header

They won't all be streams
---
 app/assets/javascripts/initializePage.js.erb  |  1 +
 .../initializers/initializeTimeFixer.js       | 70 +++++++++++++++++++
 .../javascripts/utilities/getLocalTime.js     | 15 ++++
 .../articles/_sidebar_additional.html.erb     | 15 ++++
 app/views/events/_event.html.erb              | 43 ++++++------
 app/views/events/index.html.erb               |  5 +-
 app/views/events/show.html.erb                |  2 +-
 config/features.rb                            |  3 +
 8 files changed, 127 insertions(+), 27 deletions(-)
 create mode 100644 app/assets/javascripts/initializers/initializeTimeFixer.js
 create mode 100644 app/assets/javascripts/utilities/getLocalTime.js

diff --git a/app/assets/javascripts/initializePage.js.erb b/app/assets/javascripts/initializePage.js.erb
index 8a9d74a1c..535503fbd 100644
--- a/app/assets/javascripts/initializePage.js.erb
+++ b/app/assets/javascripts/initializePage.js.erb
@@ -40,6 +40,7 @@ function callInitalizers(){
   initializeFooterMod();
   initializeCommentPreview();
   initializeAdditionalContentBoxes();
+  initializeTimeFixer();
   if (!initializeLiveArticle.called){
     initializeLiveArticle();
   }
diff --git a/app/assets/javascripts/initializers/initializeTimeFixer.js b/app/assets/javascripts/initializers/initializeTimeFixer.js
new file mode 100644
index 000000000..7ff8b5b13
--- /dev/null
+++ b/app/assets/javascripts/initializers/initializeTimeFixer.js
@@ -0,0 +1,70 @@
+function initializeTimeFixer() {
+  var utcTime = document.getElementsByClassName('utc-time');
+  var utcDate = document.getElementsByClassName('utc-date');
+  var utc = document.getElementsByClassName('utc');
+
+  if (!utc) {
+    return;
+  }
+
+  function convertUtcTime(utcTime) {
+    var time = new Date(utcTime);
+    var options = {
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    time = new Intl.DateTimeFormat('en-US', options).format(time);
+    return time;
+  }
+
+  function updateLocalTime(times) {
+    var localTime;
+    for (var i = 0; i < times.length; i++) {
+      localTime = convertUtcTime(times[i].innerHTML);
+      times[i].innerHTML = localTime;
+    }
+  }
+
+  function convertUtcDate(utcDate) {
+    var date = new Date(utcDate);
+    var options = {
+      month: 'short',
+      day: 'numeric',
+    };
+    date = new Intl.DateTimeFormat('en-US', options).format(date);
+    return date;
+  }
+
+  function updateLocalDate(dates) {
+    var localDate;
+    for (var i = 0; i < dates.length; i++) {
+      localDate = convertUtcDate(dates[i].innerHTML);
+      dates[i].innerHTML = localDate;
+    }
+  }
+
+  function convertCalEvent(utc) {
+    var date = new Date(utc);
+    var options = {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    date = new Intl.DateTimeFormat('en-US', options).format(date);
+    return date;
+  }
+
+  function updateCalendarTime(utcTimes) {
+    var calTime;
+    for (var i = 0; i < utcTimes.length; i++) {
+      calTime = convertCalEvent(utcTimes[i].innerHTML);
+      utcTimes[i].innerHTML = calTime;
+    }
+  }
+
+  updateLocalTime(utcTime);
+  updateLocalDate(utcDate);
+  updateCalendarTime(utc);
+}
diff --git a/app/assets/javascripts/utilities/getLocalTime.js b/app/assets/javascripts/utilities/getLocalTime.js
new file mode 100644
index 000000000..4da57bb48
--- /dev/null
+++ b/app/assets/javascripts/utilities/getLocalTime.js
@@ -0,0 +1,15 @@
+function updateLocalTime(times) {
+  function convertUtcTime(timestamp) {
+    var time = new Date(timestamp);
+    var options = {
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    time = new Intl.DateTimeFormat('en-US', options).format(time);
+    return time;
+  }
+  for (var i = 0; i < times.length; i++) {
+    localTime = convertUtcTime(times[i].innerHTML);
+    times[i].innerHTML = localTime;
+  }
+}
diff --git a/app/views/articles/_sidebar_additional.html.erb b/app/views/articles/_sidebar_additional.html.erb
index 1ad69759b..c76bf769a 100644
--- a/app/views/articles/_sidebar_additional.html.erb
+++ b/app/views/articles/_sidebar_additional.html.erb
@@ -95,6 +95,21 @@
           </div>
         </div>
       <% end %>
+      <% if Event.in_the_future_and_published.any? && Flipflop.upcoming_events? %>
+        <div class="widget">
+          <header>
+            <a href="/events">upcoming live events</a>
+          </header>
+          <div class="widget-body">
+            <div class="widget-link-list">
+              <% Event.in_the_future_and_published.limit(3).sort_by(&:starts_at).each do |event| %>
+                <%= render "events/widget_events_item", event: event %>
+              <% end %>
+            </div>
+            <a class="cta cta-button" href="/events">VIEW ALL EVENTS</a>
+          </div>
+        </div>
+      <% end %>
       <% if Article.active_help.any? %>
         <div class="widget">
           <header>
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index 1d7a72ce3..bf1707614 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -2,7 +2,7 @@
   .container .event {
     padding: 20px;
     border: solid 2px #66e2d5;;
-    border-radius: 3px; 
+    border-radius: 3px;
     margin: 50px auto;
     box-shadow: 5px 8px 0px #ccfff9;
     font-size: 17px;
@@ -24,7 +24,7 @@
   }
   .event .event-details p {
     margin: 5px;
-  }  
+  }
 
   .event .event-description p {
     text-align: justify;
@@ -33,8 +33,8 @@
     margin: 0 0 .5em 0;
     font-weight: 800;
     font-size: 1.11em;
-  }  
-  
+  }
+
   @media screen and (max-width: 900px) {
     .container .body .event .event-image {
       display: block;
@@ -45,7 +45,7 @@
   .copyx{
     display: none !important;
   }
-  .addeventatc {visibility:hidden;}  
+  .addeventatc {visibility:hidden;}
 </style>
 
 <div class="event">
@@ -55,18 +55,16 @@
   <div class="event-details" >
     <h3><a href="/events/<%= event.slug %>"><%= event.category %>: <%= event.title %></a></h3>
     <p>
-      <% if !event.cover_image.present? %>
-        Date: <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').strftime("%b %d %Y") %>
-        <br>
-      <% end %>
-      Time: <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %> - <%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %> EDT
+      Date: <span class="utc-date"><%= event.starts_at %></span>
       <br>
-      Location: <a href="<%= event.location_url %>"><%= event.location_name %></a> 
+      Time: <span class="utc-time"><%= event.starts_at %></span> - <span class="utc-time"><%= event.ends_at %></span>
+      <br>
+      Location: <a href="<%= event.location_url %>"><%= event.location_name %></a>
     </p>
     <div title="Add to Calendar" class="addeventatc">
         Add to Calendar
-        <span class="start"><%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').strftime("%m/%d/%Y") %> <%= event.starts_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %></span>
-        <span class="end"><%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').strftime("%m/%d/%Y") %> <%= event.ends_at.in_time_zone('Eastern Time (US & Canada)').to_formatted_s(:time) %></span>
+        <span class="start utc"><%= event.starts_at %></span>
+        <span class="end utc"><%= event.ends_at %></span>
         <span class="timezone">America/New_York</span>
         <span class="title"><%= event.title %></span>
         <span class="organizer">The DEV Community</span>
@@ -77,20 +75,19 @@
         <span class="description">
           <%= event.description_html.html_safe %>
           ------
-          
-          Link to attend - <%= event.location_url%> 
+          Link to attend - <%= event.location_url%>
         </span>
       </div>
   </div>
   <div class="event-description">
     <%= event.description_html.html_safe %>
-  </div>            
+  </div>
 </div>
 
-  <script defer>
-    window.addeventasync = function(){
-      addeventatc.register('button-dropdown-click', function(obj){
-          ga('send', 'event', 'click', 'Add Event To Calendar', 'User: <%= user_signed_in? %>');
-      });
-    }
-  </script>
\ No newline at end of file
+<script defer>
+  window.addeventasync = function(){
+    addeventatc.register('button-dropdown-click', function(obj){
+        ga('send', 'event', 'click', 'Add Event To Calendar', 'User: <%= user_signed_in? %>');
+    });
+  }
+</script>
\ No newline at end of file
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 204ab2167..a889eb40f 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -40,10 +40,9 @@
     <h1 style="font-size:1.9em;font-weight:600;text-align:center;">
       PAST <br> EVENTS
     </h1>
-    
+
     <% @past_events.each do |event|%>
       <%= render 'event', event: event %>
     <% end %>
-    
-  </div>
 
+  </div>
\ No newline at end of file
diff --git a/app/views/events/show.html.erb b/app/views/events/show.html.erb
index b38a3f4a6..62cecdac3 100644
--- a/app/views/events/show.html.erb
+++ b/app/views/events/show.html.erb
@@ -51,7 +51,7 @@
   }
   .container .event .event-details {
     font-size: 1.3em;
-  }  
+  }
   .addeventatc {
     border: solid 1px #66e2d5;
   }
diff --git a/config/features.rb b/config/features.rb
index a98f0f407..09677c765 100644
--- a/config/features.rb
+++ b/config/features.rb
@@ -31,4 +31,7 @@ Flipflop.configure do
   feature :sendbird,
     default: true,
     description: "Toggle between Sendbird and our custom chat"
+  feature :upcoming_events,
+    default: true,
+    description: "Toggle upcoming events in sidebar"
 end