audio/video recorders in one swf file

We've made modifications to Kaltura's swf recorder that will
allow it to record either just audio or audio and video, with
both options now available from the same swf file.  I've also
made some additional tweaks to the UI to help clean things up
in this interface.

Also included a fix for enabling storing to Kaltura over SSL.

Change-Id: Ia30b407ea1f0b049f7553d11195fceee75f23e7a
Reviewed-on: https://gerrit.instructure.com/3404
Tested-by: Hudson <[email protected]>
Reviewed-by: Zach Wily <[email protected]>

Author: zwily

Diff for: app/stylesheets/g_media_comments.sass

@@ -24,14 +24,14 @@
     width: 600px
     height: 600px
     z-index: 9999
-    background-color: #888
+    background-color: #666666
     position: absolute
     display: none
     .recorder_message
       color: #eee
       font-size: 1.5em
       opacity: 1.0
-      margin: 100px 20px
+      margin: 120px 55px
       width: 300px
       text-align: center
     &.saving
@@ -78,7 +78,10 @@ div#audio_upload,div#video_upload
   height: 300px
   overflow: hidden
   position: relative
-  border: 2px solid #888
+  border: 0
+  background: #fff url(/images/ajax-loader-medium-444.gif) no-repeat 10px 10px
+  +box-shadow( rgba(0,0,0,1.0), 0, 0, 10px)
+  margin: 10px
 
 #audio_record,#video_record 
   border: 0px solid #888

Diff for: public/javascripts/media_comments.js

@@ -413,8 +413,8 @@
       $dialog.dialog('close').dialog({
         autoOpen: false,
         title: "Record/Upload Media Comment",
-        width: 530,
-        height: 440,
+        width: 560,
+        height: 460,
         modal: (opts.modal == false ? false : true)
       }).dialog('open');
       $dialog.dialog('option', 'close', function() {
@@ -451,7 +451,7 @@
       var temporaryName = $.trim($("#identity .user_name").text()) + " " + (new Date()).toISOString();
       setTimeout(function() {
         var recordVars = {
-          host:INST.kalturaSettings.domain,
+          host:location.protocol + "//" + INST.kalturaSettings.domain,
           rtmpHost:"rtmp://" + INST.kalturaSettings.domain,
           kshowId:"-1",
           pid:INST.kalturaSettings.partner_id,
@@ -463,7 +463,7 @@
           thumbOffset:"1",
           licenseType:"CC-0.1",
           showUi:"true",
-          useCamera:"false",
+          useCamera:"0",
           maxFileSize: INST.kalturaSettings.max_file_size_bytes / 1048576,
           maxUploads: 1,
           partnerData: $.mediaComment.partnerData(),
@@ -481,11 +481,12 @@
           "wmode": "opaque"
         }
         $("#audio_record").html("Flash required for recording audio.")
-        swfobject.embedSWF("/media_record/KRecordAudio.swf", "audio_record", "400", "300", "9.0.0", false, recordVars, params);
+        swfobject.embedSWF("/media_record/KRecord.swf", "audio_record", "400", "300", "9.0.0", false, recordVars, params);
 
-        var params = $.extend({}, params, {name: 'KRecordVideo'})
+        var params = $.extend({}, params, {name: 'KRecordVideo'});
+        var recordVars = $.extend({}, recordVars, {useCamera: '1'});
         $("#video_record").html("Flash required for recording video.")
-        swfobject.embedSWF("/media_record/KRecordVideo.swf", "video_record", "400", "300", "9.0.0", false, recordVars, params);
+        swfobject.embedSWF("/media_record/KRecord.swf", "video_record", "400", "300", "9.0.0", false, recordVars, params);
         // give the dialog time to initialize or the recorder will
         // render funky in ie
       }, INST.browser.ie ? 500 : 10);
@@ -607,7 +608,8 @@
       $div.dialog('close').dialog({
         autoOpen: false,
         title: "Record/Upload Media Comment",
-        width: 450,
+        resizable: false,
+        width: 470,
         height: 300
       }).dialog('open');
       $.ajaxJSON('/dashboard/comment_session', 'GET', {}, function(data) {
@@ -719,7 +721,7 @@ function beforeAddEntry() {
     if($.mediaComment.lastAddAttemptId == attemptId) {
       $(document).triggerHandler('media_recording_error');
     }
-  }, 300000);
+  }, 30000);
   $("#audio_record_holder_message,#video_record_holder_message").addClass('saving');
 }
 function addEntryFail() {

Diff for: public/media_record/KRecord.swf

@@ -22,7 +22,7 @@
       <div id="video_record_holder_message">
         <div class="recorder_message">Saving Recording...</div>
       </div>
-      <div style="margin-bottom: 1px;">
+      <div style="margin-bottom: 1px; margin-left: 10px;">
         Title: <input id="video_record_title" type="text" style="width: 250px;"/>
       </div>
       <div id="video_record_holder">
@@ -46,7 +46,7 @@
       <div id="audio_record_holder_message">
         <div class="recorder_message">Saving Recording...</div>
       </div>
-      <div style="margin-bottom: 1px;">
+      <div style="margin-bottom: 1px; margin-left: 10px;">
         Title: <input id="audio_record_title" type="text" style="width: 250px;"/>
       </div>
       <div id="audio_record_holder">