Romain added hangup

app/assets/stylesheets/components/_hand.scss

@@ -0,0 +1,12 @@
+.hand {
+  position: absolute;
+  bottom: 20px;
+  z-index: 10000000000;
+  left: 48%;
+  font-size: 26px;
+  cursor: pointer;
+}
+
+.call-container {
+  // position: relative;
+}

app/assets/stylesheets/components/_index.scss

@@ -2,3 +2,4 @@
 @import "alert";
 @import "navbar";
 @import "banner";
+@import "hand";

app/assets/stylesheets/components/_navbar.scss

@@ -66,6 +66,7 @@
     img {
       width: 3em;
       padding: 0.2em;
+      border-radius: 50%;
     }
   }
 

app/channels/chat_rooms_channel.rb

@@ -5,5 +5,13 @@ class ChatRoomsChannel < ApplicationCable::Channel
 
   def unsubscribed
     # Any cleanup needed when channel is unsubscribed
+    puts "I am now destroyed"
+    # redirect_to root_path
+      #   ActionCable.server.broadcast('notifications', {
+      # head: 302, # redirection code, just to make it clear what you're doing
+      # path: chat_room_path(chat_room), # you'll need to use url_helpers, so include them in your file
+      # body: { caller: other_caller.id }
+      # }
+    # redirect_to root_path
   end
 end

app/controllers/chat_rooms_controller.rb

@@ -14,6 +14,13 @@ class ChatRoomsController < ApplicationController
     ActionCable.server.broadcast "chat_room_#{params[:room]}", session_params
   end
 
+  def destroy
+    # chat_room = ChatRoom.find(params[:id])
+    # chat_room.destroy
+    ActionCable.server.broadcast "chat_room_#{params[:id]}", { hangUp: true }
+    head :ok
+  end
+
   private
 
   def session_params

app/javascript/packs/chatrooms.js

@@ -19,9 +19,26 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
   connected: () => {
   },
   received: data => {
+    if (data.hangUp) {
+      document.location.pathname = '/contacts'
+    }
+  },
+  disconnected: () => {
+    document.location.pathname = '/contacts'
   }
 })
 
+const hangUpIcon = document.querySelector('.fa-hand-paper')
+hangUpIcon.addEventListener('click', event => {
+  fetch(`/chat_rooms/${chatroomId}`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content
+    }
+  })
+  document.location.pathname = '/contacts'
+})
+
 // Testing ActionCable
 // const testBtn = document.getElementById('test-btn')
 // testBtn.addEventListener('click', event => {

app/models/user.rb

@@ -10,6 +10,8 @@ class User < ApplicationRecord
   has_many :chat_rooms, through: :chat_room_participations
   has_many :requests
 
+  validates :email, uniqueness: true
+
   mount_uploader :photo, PhotoUploader
 
   def contacts

app/views/chat_rooms/show.html.erb

@@ -5,8 +5,10 @@
 <div class="call-container">
   <div id="remote-video-container">
     <div id="video_overlays">
+
       <video id="local-video" autoplay muted></video>
     </div>
+      <i class="far fa-hand-paper hand"></i>
   </div>
 </div>
 
@@ -15,5 +17,3 @@
 <%= javascript_pack_tag 'chatrooms' %>
 <%= javascript_pack_tag 'webrtc' %>
 
-
-

config/routes.rb

@@ -27,7 +27,7 @@ Rails.application.routes.draw do
 
   post '/chat_rooms/chat_room_sessions', to: 'chat_rooms#create'
 
-  resources :chat_rooms, only: [ :show ] do
+  resources :chat_rooms, only: [ :show, :destroy ] do
     # testing action cable
     post '/cable_testing', to: 'pages#cable_testing'
   end