talking_stick 0.0.1 → 1.0.0

data/app/assets/javascripts/talking_stick/talking_stick/partner.js

@@ -1,5 +1,6 @@
 TalkingStick.Partner = function(participant, options) {
   this.gatheringCandidates = false;
+  this.name          = participant.name;
   this.guid          = participant.guid;
   this.joinedAt      = new Date(participant.joined_at);
   this.localICECandidates = [];
@@ -8,7 +9,10 @@ TalkingStick.Partner = function(participant, options) {
   };
   $.extend(this._options, options);
   this.signalingEngine = this._options.signalingEngine;
-  this.videoElement    = this._options.videoElement;
+  this.videoElement    = $(this._options.videoElement);
+  this.videoStream     = undefined;
+  this.connected       = false;
+  this.trigger('created');
 }
 
 TalkingStick.Partner.prototype.log = function() {
@@ -19,68 +23,91 @@ TalkingStick.Partner.prototype.log = function() {
   TalkingStick.log.apply(this, args);
 }
 
+TalkingStick.Partner.prototype.trigger = function(name) {
+  name = 'talking_stick.partner.' + name;
+  args = Array.prototype.slice.call(arguments, 1);
+  // Syntactic sugar: make it easy to pass a list of args as the only argument
+  // This is the "right way" per
+  // http://stackoverflow.com/questions/4775722/check-if-object-is-array
+  if (args.length == 1 && Object.prototype.toString.call(args[0]) === '[object Array]') {
+    args = args[0];
+  }
+  args.unshift(this);
+  this.videoElement.trigger(name, args);
+};
+
 TalkingStick.Partner.prototype.errorCallback = function() {
   // Convert arguments to a real array
   var args = Array.prototype.slice.call(arguments);
+  this.trigger('error', args);
   args.unshift('error');
   this.log(args);
 }
 
-TalkingStick.Partner.prototype.setDescription = function(answer) {
-  this.log('trace', 'Setting remote description to', answer);
-  this.peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
-};
-
 TalkingStick.Partner.prototype.connect = function(stream) {
-  this.log('trace', 'Creating new peer connection');
-  this.peerConnection = new RTCPeerConnection();
+  var configuration = {
+    iceServers: this._options.iceServers,
+  };
+  this.log('trace', 'Creating new peer connection with configuration', configuration);
+  this.peerConnection = new RTCPeerConnection(configuration);
+
+  var self = this;
+  this.peerConnection.oniceconnectionstatechange = function(ev) {
+    self.trigger('ice_connection_state_change', ev);
+  };
 
-  var partner = this;
   this.peerConnection.onicecandidate = function() {
-    partner.handleLocalICECandidate.apply(partner, arguments);
+    self.handleLocalICECandidate.apply(self, arguments);
   }
 
   this.peerConnection.addStream(stream);
 };
 
-TalkingStick.Partner.prototype.sendOffer = function() {
+TalkingStick.Partner.prototype.sendOffer = function(options) {
   // Fix scope for "this" inside createOffer()
-  var partner = this;
+  var self = this;
   this.peerConnection.createOffer(function(offer) {
-    partner.log('trace', 'Created PeerConnection Offer; ICE candidate collection starting', offer);
-    partner.gatheringCandidates = true;
-    partner.peerConnection.setLocalDescription(offer);
-    partner.signalingEngine.sendOffer(partner.guid, offer);
-  }, this.errorCallback);
+    self.log('trace', 'Created PeerConnection Offer; ICE candidate collection starting', offer);
+    self.gatheringCandidates = true;
+    self.peerConnection.setLocalDescription(offer);
+    self.signalingEngine.sendOffer(self.guid, offer);
+    setTimeout(self._checkForConnection, self._options.connectionTimeout);
+  }, function() { self.errorCallback.apply(self, arguments) } );
 };
 
 TalkingStick.Partner.prototype.handleOffer = function(offer) {
-  this.log('debug', 'Processing Offer received from', this.guid);
-  this.peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
-  var partner = this;
+  var offer = new RTCSessionDescription(offer);
+  this.log('debug', 'Processing Offer received from', this.guid, offer);
+  var self = this;
 
   this.peerConnection.onaddstream = function(event) {
-    attachMediaStream($(partner.videoElement)[0], event.stream);
+    self._attachMediaStream(event.stream);
+    self.connected = true;
   };
+
+  this.peerConnection.setRemoteDescription(offer);
+
   this.peerConnection.createAnswer(function(answer) {
-    partner.peerConnection.setLocalDescription(new RTCSessionDescription(answer));
-    partner.log('debug', 'Sending Answer to', partner.guid);
-    partner.signalingEngine.sendAnswer(partner.guid, answer);
-  });
+    self.peerConnection.setLocalDescription(new RTCSessionDescription(answer));
+    self.log('debug', 'Sending Answer to', self.guid);
+    self.signalingEngine.sendAnswer(self.guid, answer);
+  }, function() { self.errorCallback.apply(self, arguments) } );
 };
 
 TalkingStick.Partner.prototype.handleAnswer = function(answer) {
   this.log('debug', 'Processing Answer received from', this.guid);
-  var partner = this;
+  var self = this;
   this.peerConnection.onaddstream = function(event) {
-    attachMediaStream($(partner.videoElement)[0], event.stream);
+    self._attachMediaStream(event.stream);
+    self.connected = true;
   };
   this.peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
 };
 
 TalkingStick.Partner.prototype.handleRemoteICECandidate = function(candidate) {
+  candidate = new RTCIceCandidate(candidate);
   this.log('trace', 'Adding remote ICE candidate', candidate);
-  this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
+  this.peerConnection.addIceCandidate(candidate);
 };
 
 TalkingStick.Partner.prototype.handleLocalICECandidate = function(event) {
@@ -98,3 +125,37 @@ TalkingStick.Partner.prototype.handleLocalICECandidate = function(event) {
   }
 };
 
+TalkingStick.Partner.prototype.cleanup = function() {
+  this.log('debug', 'Cleanup requested, shutting down.');
+  this.disconnect();
+  this.trigger('cleanup');
+}
+
+TalkingStick.Partner.prototype.disconnect = function() {
+  try {
+    this.peerConnection.close();
+  } catch(ex) {
+    // Ignore errors here in case the connection is already closed
+  }
+};
+
+TalkingStick.Partner.prototype._attachMediaStream = function(stream) {
+  this.log('trace', 'Attaching media stream');
+  var el = attachMediaStream(this.videoElement[0], stream);
+  if (el) {
+    // Compatibility with Temasys plugin
+    // See https://temasys.atlassian.net/wiki/display/TWPP/How+to+integrate+the+Temasys+WebRTC+Plugin+into+your+website - "Attach streams"
+    this.videoElement = $(el);
+  }
+  partner.videoStream = stream;
+  this.trigger('media');
+};
+
+TalkingStick.Partner._checkForConnection = function() {
+  this.log('trace', 'Checking for connection');
+  if (!this.connected) {
+    this.log('notice', 'Connection to partner timed out.');
+    this.trigger('connection_timeout');
+  }
+};
+

data/app/assets/javascripts/talking_stick/talking_stick/rails_signaling.js

@@ -1,15 +1,18 @@
 TalkingStick.RailsSignaling = function(options) {
   this.options = options;
   this.roomUrl = options.url;
+  var self = this;
+  $('#localvideo').on('talking_stick.connected', function() { self.connected.apply(self)} );
 }
 
 TalkingStick.RailsSignaling.prototype.connected = function() {
   // Check now, then schedule a timer to check for new participants
   this._updateRoom();
   var signaling = this;
-  setInterval(function() {
+  var pollingInterval = setInterval(function() {
     signaling._updateRoom.apply(signaling);
   }, 3000);
+  $('#localvideo').on('talking_stick.disconnected', function() { clearInterval(pollingInterval); });
 }
 
 TalkingStick.RailsSignaling.prototype.sendICECandidate = function(to, candidate) {
@@ -20,7 +23,9 @@ TalkingStick.RailsSignaling.prototype.sendICECandidate = function(to, candidate)
 TalkingStick.RailsSignaling.prototype.iceCandidateGatheringComplete = function(to, candidates) {
   var data = {
     signal_type: 'candidates',
-    data: JSON.stringify(candidates),
+    // IE doesn't like big objects, so filter down and
+    // only keep the actual candidate information
+    data: JSON.stringify(candidates, ['candidate', 'sdpMLineIndex', 'sdpMid']),
   }
   this._sendData('ICE Candidates', to, data);
 }
@@ -62,21 +67,34 @@ TalkingStick.RailsSignaling.prototype._updateRoom = function() {
 };
 
 TalkingStick.RailsSignaling.prototype._updateParticipants = function(participants) {
+  $.each(TalkingStick.partners, function(i, partner) {
+    // Mark each partner for cleanup
+    partner.fresh = false;
+  });
+
   $.each(participants, function(i, participant) {
     if (participant.guid === TalkingStick.guid) {
       // Don't try to set up a connection to ourself
-      //TalkingStick.log('trace', 'Skipping own GUID', participant.guid);
       return;
     }
 
-    if (TalkingStick.partners[participant.guid]) {
+    var partner;
+    if (partner = TalkingStick.partners[participant.guid]) {
       // We already have a connection to this participant
-      //TalkingStick.log('trace', 'Skipping participant since we already have a connection', participant.guid);
+      // Mark it active so it doesn't get removed
+      partner.fresh = true;
       return;
     }
+
     TalkingStick.log('trace', 'Handling new partner', participant.guid);
+    partner = TalkingStick.addPartner(participant);
+    partner.fresh = true;
+  });
 
-    TalkingStick.addPartner(participant);
+  $.each(TalkingStick.partners, function(i, partner) {
+    if (partner.fresh) { return; }
+    partner.cleanup();
+    delete TalkingStick.partners[i];
   });
 };
 

data/app/assets/stylesheets/talking_stick/application.css

@@ -13,3 +13,58 @@
  *= require_tree .
  *= require_self
  */
+html,
+body,
+body > .container-fluid,
+body > .container-fluid > .row
+body > .container-fluid > .row > [class^="col-xs-"]  {
+  height: 100%;
+}
+
+.container-fluid {
+  height: 100%;
+}
+
+#localvideo-container {
+  width: 100%;
+  left: 1em;
+  z-index: 99;
+}
+
+#localvideo {
+  width: 100%;
+  padding-top: 1em;
+  max-width: 200px;
+}
+
+.modal #localvideo {
+  max-height: 320px;
+  width: 100%;
+  max-width: none;
+}
+
+#partnervideos {
+  width: 100%;
+  height: 100%;
+}
+
+#partnervideos .video {
+  float: right;
+  padding: 1em;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+#partnervideos .video video {
+  width: 100%;
+}
+
+#video-preview p {
+  font-size: 1.4em;
+  line-height: 1.3em;
+  padding: 1em 0;
+}
+
+#form-submit-buttons {
+  padding-top: 20px;
+}

data/app/controllers/talking_stick/application_controller.rb

@@ -1,4 +1,10 @@
 module TalkingStick
   class ApplicationController < ActionController::Base
+    layout 'application'
+    before_action :set_locale
+
+    def set_locale
+      I18n.locale = params[:locale] || I18n.default_locale
+    end
   end
 end

data/app/controllers/talking_stick/participants_controller.rb

@@ -56,7 +56,7 @@ module TalkingStick
 
     private
       def set_room
-        @room = Room.find params[:room_id]
+        @room = Room.find_or_create(slug: params[:room_id])
       end
 
       # Use callbacks to share common setup or constraints between actions.

data/app/controllers/talking_stick/rooms_controller.rb

@@ -12,6 +12,9 @@ module TalkingStick
 
     # GET /rooms/1
     def show
+      @room.last_used = Time.now
+      @room.save
+
       if params[:guid]
         if @participant = Participant.where(guid: params[:guid]).first
           @participant.last_seen = Time.now
@@ -99,7 +102,7 @@ module TalkingStick
     private
       # Use callbacks to share common setup or constraints between actions.
       def set_room
-        @room = Room.find(params[:id] || params[:room_id])
+        @room = Room.find_or_create(slug: (params[:id] || params[:room_id]))
       end
 
       def set_participant

data/app/models/talking_stick/participant.rb

@@ -7,11 +7,12 @@ module TalkingStick
 
     def set_defaults
       self.joined_at ||= Time.now
+      self.last_seen ||= self.joined_at
     end
 
     class << self
       def remove_stale!(room)
-        self.where(room: room).where('last_seen < ?', Time.now - 5.minutes).delete_all
+        self.where(room: room).where('last_seen < ?', Time.now - 15.seconds).destroy_all
       end
     end
   end

data/app/models/talking_stick/room.rb

@@ -2,5 +2,22 @@ module TalkingStick
   class Room < ActiveRecord::Base
     has_many :participants, dependent: :destroy
     has_many :signals, dependent: :destroy
+
+    before_validation :sluggify_name
+
+    def self.find_or_create(slug:)
+      slug = slug.parameterize
+      find_by(slug: slug) || create(name: slug.titleize, slug: slug)
+    end
+
+    def to_param
+      slug
+    end
+
+    private
+
+    def sluggify_name
+      self.slug = name.parameterize unless slug.present?
+    end
   end
 end

data/app/models/talking_stick/signal.rb

@@ -5,6 +5,8 @@ module TalkingStick
     belongs_to :recipient, class_name: "TalkingStick::Participant"
     validates :room, :sender, :recipient, presence: true
 
+    default_scope { order 'created_at ASC' }
+
     # The normal delegate method seems to not be working for an unknown reason
     def sender_guid
       self.sender.guid

data/app/views/talking_stick/rooms/_form.html.erb

@@ -11,15 +11,18 @@
     </div>
   <% end %>
 
-  <div class="field">
-    <%= f.label :name %><br>
-    <%= f.text_field :name %>
-  </div>
-  <div class="field">
-    <%= f.label :last_used %><br>
-    <%= f.datetime_select :last_used %>
+  <div class="form-group">
+    <div class="field">
+      <p><%= f.label :name %></p>
+      <p><%= f.text_field :name, class: 'form-control' %></p>
+    </div>
   </div>
-  <div class="actions">
-    <%= f.submit %>
+  <div class="form-group">
+    <div id="form-submit-buttons" class="actions">
+      <p><%= f.submit "Save", class: 'btn btn-success' %>
+        <span><%= link_to 'Back', rooms_path, class: 'btn btn-default pull-right' %></span>
+      </p>
+    </div>
+
   </div>
 <% end %>

data/app/views/talking_stick/rooms/edit.html.erb

@@ -1,6 +1,7 @@
-<h1>Editing Room</h1>
+<div class="container">
 
-<%= render 'form' %>
+  <h1>Editing Room</h1>
 
-<%= link_to 'Show', @room %> |
-<%= link_to 'Back', rooms_path %>
+  <%= render 'form' %>
+
+</div>

data/app/views/talking_stick/rooms/index.html.erb

@@ -1,29 +1,36 @@
-<p id="notice"><%= notice %></p>
+<div class="container">
+  <p id="notice"><%= notice %></p>
 
-<h1>Listing Rooms</h1>
+  <%= link_to t(:new_room), new_room_path, class: 'btn btn-success pull-right' %>
 
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Last used</th>
-      <th colspan="3"></th>
-    </tr>
-  </thead>
+  <h1><%= t(:listing_rooms) %></h1>
 
-  <tbody>
-    <% @rooms.each do |room| %>
+  <table class="table">
+    <thead>
       <tr>
-        <td><%= room.name %></td>
-        <td><%= room.last_used %></td>
-        <td><%= link_to 'Show', room %></td>
-        <td><%= link_to 'Edit', edit_room_path(room) %></td>
-        <td><%= link_to 'Destroy', room, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        <th><%= t(:name) %></th>
+        <th><%= t(:last_used) %></th>
+        <th>Enter Room</th>
+        <th>Edit Room</th>
+        <th>Destroy Room</th>
+        <th colspan="3"></th>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
 
-<br>
+    <tbody>
+      <% @rooms.each do |room| %>
+        <tr>
+          <td><%= room.name %></td>
+          <td><%= room.last_used.try(:strftime, "%b %d, %l:%M %P") || t(:last_used_never) %></td>
+          <td><%= link_to 'Enter', room %></td>
+          <td><%= link_to t(:edit), edit_room_path(room) %></td>
+          <td><%= link_to t(:destroy), room, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
 
-<%= link_to 'New Room', new_room_path %>
+  <br>
+
+
+</div>