Fix react videochat component

Guardfile

@@ -35,7 +35,7 @@ guard :bundler do
   files.each { |file| watch(helper.real_path(file)) }
 end
 
-guard 'rails', host: '0.0.0.0', port: 9913 do
+guard 'rails', host: '0.0.0.0', port: 9914 do
   watch('Gemfile.lock')
   watch(%r{^(config|lib)/.*})
 end

app/assets/javascripts/cable.js

@@ -6,8 +6,8 @@
 //= require_tree ./channels
 
 (function() {
-  this.App || (this.App = {});
+  this.VideoCall || (this.VideoCall = {});
 
-  App.cable = ActionCable.createConsumer();
+  VideoCall.cable = ActionCable.createConsumer();
 
 }).call(this);

app/views/calls/root.html.haml

@@ -1,3 +1,3 @@
 %main#root
-  %h1 If you're seeing this, something broke
+  %h1 react component failed to load
   -# , props = {id: @game.id, current_user: current_user}, html_options = {id: "game-component-container"}

frontend/components/VideoCall.jsx

@@ -22,7 +22,7 @@ class VideoCall extends React.Component{
   joinCall(e){
     console.log("Hello from joinCall");
     console.log(e);
-    App.cable.subscriptions.create(
+    VideoCall.cable.subscriptions.create(
       { channel: "CallChannel" },
       { 
         connected: () => {
@@ -130,7 +130,7 @@ class VideoCall extends React.Component{
       .forEach(function (track) { track.stop(); })
 
     this.localVideo.srcObject = null;
-    App.cable.subscriptions.subscriptions = [];
+    VideoCall.cable.subscriptions.subscriptions = [];
     this.remoteVideoContainer.innerHTML = "";
     broadcastData({ type: LEAVE_CALL, from: this.userId });
   }
@@ -150,4 +150,4 @@ class VideoCall extends React.Component{
     </div>)
   }
 }
-export default App;
+export default VideoCall;