From efeef48df7ade354ed59e4fbf37ac80b98d2559c Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Mon, 6 Apr 2020 21:43:41 -0400 Subject: [PATCH] [deploy] Add authorization and new styles for sidecar video (#7120) * Add authorization and new styles for sidecar video * Launch sidecar with /call * ensure html is string * Add test for authorization --- app/controllers/video_chats_controller.rb | 4 +++ app/javascript/chat/chat.jsx | 16 +++++++----- app/javascript/packs/videoChat.jsx | 24 +++++++++++++++--- app/models/message.rb | 21 ++++++++++------ app/views/video_chats/show.html.erb | 30 +++++++++++++++++++++-- spec/requests/video_chats_spec.rb | 10 +++++++- 6 files changed, 84 insertions(+), 21 deletions(-) diff --git a/app/controllers/video_chats_controller.rb b/app/controllers/video_chats_controller.rb index c8262322c..055eca400 100644 --- a/app/controllers/video_chats_controller.rb +++ b/app/controllers/video_chats_controller.rb @@ -1,7 +1,11 @@ class VideoChatsController < ApplicationController before_action :authenticate_user! + after_action :verify_authorized def show + @chat_channel = ChatChannel.find(params[:id]) || not_found + authorize @chat_channel + account_sid = ApplicationConfig["TWILIO_ACCOUNT_SID"] api_key = ApplicationConfig["TWILIO_VIDEO_API_KEY"] api_secret = ApplicationConfig["TWILIO_VIDEO_API_SECRET"] diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index 7fc9f0e74..858bd3598 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -597,12 +597,16 @@ export default class Chat extends Component { if (message.startsWith('/code')) { this.setActiveContentState(activeChannelId, { type_of: 'code_editor' }); } else if (message.startsWith('/call')) { - this.setState({ activeVideoChannelId: activeChannelId }); - window.pusher - .channel(`presence-channel-${activeChannelId}`) - .trigger('client-initiatevideocall', { - channelId: activeChannelId, - }); + const messageObject = { + activeChannelId, + message: '/call', + mentionedUsersId: this.getMentionedUsers(message), + }; + this.setActiveContent({ + path: '/video_chats/'+activeChannelId, + type_of: 'article', + }); + sendMessage(messageObject, this.handleSuccess, this.handleFailure); } else if (message.startsWith('/new')) { this.setActiveContentState(activeChannelId, { type_of: 'loading-post', diff --git a/app/javascript/packs/videoChat.jsx b/app/javascript/packs/videoChat.jsx index c9cdd1a0d..4ca92d5b7 100644 --- a/app/javascript/packs/videoChat.jsx +++ b/app/javascript/packs/videoChat.jsx @@ -1,22 +1,25 @@ const { createLocalVideoTrack, connect } = require('twilio-video'); -const root = document.getElementById('chat'); +const root = document.getElementById('videochat'); const muteButton = document.getElementById('mute-toggle'); -const videoToggleButton = document.getElementById('videohide-toggle') +const videoToggleButton = document.getElementById('videohide-toggle'); +let numConnected = 0; connect(root.dataset.token, { name: 'room-name', audio: true, type: 'peer-to-peer', video: { width: 640 } }).then(room => { room.participants.forEach(participantConnected); room.on('participantConnected', participantConnected); room.on('participantDisconnected', participantDisconnected); room.once('disconnected', error => room.participants.forEach(participantDisconnected)); - + console.log(room.participants.length) muteButton.onclick = function(e) { e.preventDefault(); room.localParticipant.audioTracks.forEach(function(trackPub) { if (muteButton.dataset.muted === 'true') { muteButton.dataset.muted = 'false' + muteButton.classList.remove('active'); trackPub.track.enable(); } else { muteButton.dataset.muted = 'true' + muteButton.classList.add('active'); trackPub.track.disable(); } }); @@ -27,9 +30,11 @@ connect(root.dataset.token, { name: 'room-name', audio: true, type: 'peer-to-pee room.localParticipant.videoTracks.forEach(function(trackPub) { if (videoToggleButton.dataset.hidden === 'true') { videoToggleButton.dataset.hidden = 'false' + videoToggleButton.classList.remove('active'); trackPub.track.enable(); } else { videoToggleButton.dataset.hidden = 'true' + videoToggleButton.classList.add('active'); trackPub.track.disable(); } }); @@ -59,8 +64,19 @@ function participantConnected(participant) { trackSubscribed(div, publication.track); } }); - root.appendChild(div); + numConnected += 1; + let gridStyle = 'one-per'; + if (numConnected > 2) { + gridStyle = 'two-per'; + } + if (numConnected > 6) { + gridStyle = 'three-per'; + } + if (numConnected > 9) { + gridStyle = 'four-per'; + } + root.className = 'video-chat-wrapper video-chat-wrapper-num-' + gridStyle; } function participantDisconnected(participant) { diff --git a/app/models/message.rb b/app/models/message.rb index e8bfd4c6e..7a123d31e 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -42,6 +42,7 @@ class Message < ApplicationRecord html = MarkdownParser.new(message_markdown).evaluate_markdown html = append_rich_links(html) html = wrap_mentions_with_links(html) + html = handle_call(html) self.message_html = html end @@ -118,19 +119,23 @@ class Message < ApplicationRecord #{user.name} ".html_safe - elsif anchor["href"].include?("/video_chats/") - html += " -

- 👾 Experimental Video Chat Started -

- ".html_safe end end html end + def handle_call(html) + return html if html.to_s.exclude?("

/call

") + + " +

+ Let's video chat 😄 +

+ ".html_safe + end + def cl_path(img_src) ActionController::Base.helpers. cl_image_path(img_src, diff --git a/app/views/video_chats/show.html.erb b/app/views/video_chats/show.html.erb index 65d56212c..d28739f8d 100644 --- a/app/views/video_chats/show.html.erb +++ b/app/views/video_chats/show.html.erb @@ -1,7 +1,7 @@ -
+
diff --git a/spec/requests/video_chats_spec.rb b/spec/requests/video_chats_spec.rb index cc887d6c6..5e6ba34d0 100644 --- a/spec/requests/video_chats_spec.rb +++ b/spec/requests/video_chats_spec.rb @@ -2,6 +2,8 @@ require "rails_helper" RSpec.describe "VideoChats", type: :request do let(:user) { create(:user) } + let(:second_user) { create(:user) } + let(:third_user) { create(:user) } describe "GET /video_chats/:id" do context "with user signed in" do @@ -10,9 +12,15 @@ RSpec.describe "VideoChats", type: :request do end it "displays basic html for working" do - get "/video_chats/1" + channel = ChatChannel.create_with_users(users: [user, second_user]) + get "/video_chats/#{channel.id}" expect(response.body).to include("