Allow recordings to be 'unlisted'

Unlisted is a state between published and unpublished. They are still
published in the server, but will not appear to anyone other than the
user that created the recording.
It is done using a metadata attribute and required several changes in how
the application handles publishing and unpublishing.

app/assets/javascripts/channels/recording_update.js

@@ -23,17 +23,21 @@
     },
     {
       received: function(data) {
+
         var recordings = Recordings.getInstance();
-        var table = recordings.table.api()
+        var table = recordings.table.api();
         var row = table.row("#"+data.record_id);
+
         if (data.action === 'update') {
           var rowData = row.data();
-          rowData.published = data.published
+
+          rowData.published = data.published;
+          rowData.listed = data.listed;
           table.row("#"+data.record_id).data(rowData);
           recordings.draw();
 
-          var published = (data.published) ? 'published' : 'unpublished';
-          showAlert(I18n['recording_'+published], 4000);
+          var status = data.published ? (data.listed ? 'published' : 'unlisted') : 'unpublished';
+          showAlert(I18n['recording_'+status], 4000);
         } else if (data.action === 'delete') {
           row.remove();
           recordings.draw();

app/assets/javascripts/landing.js

@@ -100,7 +100,8 @@
         .tooltip('fixTitle');
     });
 
-    $('.center-panel-wrapper').on ('click', '.meeting-invite', function (event) {
+    // button used to send invitations to the meeting (i.e. "mailto:" link)
+    $('.center-panel-wrapper').on('click', '.meeting-invite', function (event) {
       var meetingURL = Meeting.getInstance().getURL();
       var subject = $(this).data("invite-subject");
       var body = $(this).data("invite-body").replace("&&URL&&", meetingURL);

app/assets/javascripts/recordings.coffee

@@ -37,7 +37,7 @@ class @Recordings
         { data: "previews", orderable: false },
         { data: "duration", orderable: false },
         { data: "playbacks", orderable: false },
-        { data: "published", visible: false },
+        { data: "listed", visible: false },
         { data: "id", orderable: false }
       ],
       columnDefs: [
@@ -78,18 +78,18 @@ class @Recordings
           render: (data, type, row) ->
             if type == 'display'
               roomName = Meeting.getInstance().getId()
-              published = row.published
-              publishText = if published then 'unpublish' else 'publish'
               recordingActions = $('.hidden-elements').find('.recording-actions')
-              recordingActions.find('.recording-update > i.default')
-                .removeClass(PUBLISHED_CLASSES.join(' '))
-                .addClass(getPublishClass(published))
-              recordingActions.find('.recording-update > i.hover')
-                .removeClass(PUBLISHED_CLASSES.join(' '))
-                .addClass(getPublishClass(!published))
-              recordingActions.find('.recording-update')
-                .attr('data-published', published)
-                .attr('title', I18n[publishText+'_recording'])
+              classes = ['recording-inaccessible', 'recording-unlisted', 'recording-published']
+              if row.published
+                if row.listed
+                  cls = classes[2]
+                else
+                  cls = classes[1]
+              else
+                cls = classes[0]
+              trigger = recordingActions.find('.recording-update-trigger')
+              trigger.removeClass(classes.join(' '))
+              trigger.addClass(cls)
               return recordingActions.html()
             return data
         }
@@ -111,9 +111,10 @@ class @Recordings
       html: true,
       trigger: 'focus',
       title: ->
-        return I18n.are_you_sure;
+        return $(this).data("popover-title");
       content: ->
-        return $(".delete-popover-body").html()
+        bodySelector = $(this).data("popover-body")
+        return $(bodySelector).html()
     }
     $('#recordings').popover(options)
 
@@ -153,17 +154,25 @@ class @Recordings
   # setup click handlers for the action buttons
   setupActionHandlers: ->
     table_api = this.table.api()
+
     @getTable().on 'click', '.recording-update', (event) ->
       btn = $(this)
       row = table_api.row($(this).closest('tr')).data()
       url = $('.meeting-url').val()
       id = row.id
-      published = btn.data('published')
+
+      published = btn.data('visibility') == "unlisted" ||
+        btn.data('visibility') == "published"
+      listed = btn.data('visibility') == "published"
+
       btn.prop('disabled', true)
       $.ajax({
         method: 'PATCH',
         url: url+'/recordings/'+id,
-        data: {published: (!published).toString()}
+        data: {
+          published: published.toString(),
+          "meta_greenlight-listed": listed.toString()
+        }
       }).done((data) ->
 
       ).fail((data) ->

app/assets/javascripts/shared.js

@@ -20,12 +20,6 @@ $.ajaxSetup({
   }
 });
 
-var PUBLISHED_CLASSES = ['fa-eye-slash', 'fa-eye']
-
-var getPublishClass = function(published) {
-  return PUBLISHED_CLASSES[+published];
-}
-
 var loopJoin = function() {
   var jqxhr = Meeting.getInstance().getJoinMeetingResponse();
   jqxhr.done(function(data) {
@@ -57,4 +51,4 @@ var showAlert = function(html, timeout_delay) {
 
 var displayRoomURL = function() {
   $('.meeting-url').val(Meeting.getInstance().getURL());
-}
+};

app/assets/stylesheets/landing.scss

@@ -86,3 +86,17 @@
     }
   }
 }
+
+.recording-update-trigger {
+  &.recording-inaccessible {
+    color: red;
+  }
+
+  &.recording-unlisted {
+    color: #e3a91e;
+  }
+
+  &.recording-published {
+    color: green;
+  }
+}

app/assets/stylesheets/shared.scss

@@ -106,3 +106,7 @@ html, body {
     text-align: center;
   }
 }
+
+.popover {
+  max-width: none;
+}