changed implementation of video embed from Livestream channel to ifra…

…me embed
mitmedialab · Mar 22, 2016 · c0dc3ce · c0dc3ce
1 parent 9c4b510
commit c0dc3ce
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 80 deletions.
diff --git a/conf.json.example b/conf.json.example
@@ -37,7 +37,6 @@
     "TESTING_SELENIUM_VERBOSE": false,
     "TESTING_FIREFOX_BIN": null,
     "MANDRILL_API_KEY": "...mandrill api key...",
-    "LIVESTREAM_API_KEY": "...livestream api key...",
 
     "CUSTOM_CSS_FILES": [],
     "CUSTOM_FACILITATOR_CSS_FILES": []

diff --git a/lib/unhangout-sockets.js b/lib/unhangout-sockets.js
@@ -408,18 +408,18 @@ _.extend(UnhangoutSocketManager.prototype, events.EventEmitter.prototype, {
             }
         }.bind(this));
 
-        mgr.on("embed-livestream", function(socket, args) {
-            if (!("channel" in args)) {
-                return mgr.writeErr(socket, "embed-livestream", "Missing channel");
+        mgr.on("insert-iframe", function(socket, args) {
+            if (!("iframeCode" in args)) {
+                return mgr.writeErr(socket, "insert-iframe", "Missing Iframe Code");
             }
             var event = this.getEvent(args.roomId);
             if (event && socket.user.isAdminOf(event)) {
-                event.set("livestreamChannel", args.channel);
+                event.set("iframeEmbedCode", args.iframeCode);
                 event.save();
-                mgr.writeAck(socket, "embed-livestream");
-                event.logAnalytics({action: "embed-livestream", user: socket.user, channel: args.channel});
+                mgr.writeAck(socket, "embed-iframe");
+                event.logAnalytics({action: "embed-iframe", user: socket.user, iframeCode: args.iframeCode});
             } else {
-                return mgr.writeErr(socket, "embed-livestream", "Missing event or not admin");
+                return mgr.writeErr(socket, "embed-iframe", "Missing event or not admin");
             }
         }.bind(this));
 
@@ -708,11 +708,11 @@ _.extend(UnhangoutSocketManager.prototype, events.EventEmitter.prototype, {
             });
         });
 
-        this.db.events.on("change:livestreamChannel", function(event, livestreamChannel){
+        this.db.events.on("change:iframeEmbedCode", function(event, iframeEmbedCode){
             mgr.sync(event.getRoomId(), "state", {
-                path: ["event", "livestreamChannel"],
+                path: ["event", "iframeEmbedCode"],
                 op: "set",
-                value: livestreamChannel
+                value: iframeEmbedCode
             });
         });
 

diff --git a/public/css/screen.styl b/public/css/screen.styl
@@ -1449,6 +1449,12 @@ user-admin-border-size = 2px
  *  Video
  */
 
+#iframePlayer {
+  iframe {
+    width: 480px  
+  }
+}
+
 #video-embed {
 
   .current-video-controls {
@@ -2543,6 +2549,12 @@ user-admin-border-size = 2px
   }
 }
 
+#embed-iframe-code-modal {
+  .modal-dialog {
+    width: 40%
+  }  
+}
+
 #propose-session-modal {
 
   .modal-dialog {

diff --git a/public/js/event-views.js b/public/js/event-views.js
@@ -611,7 +611,7 @@ views.DialogView = Backbone.Marionette.Layout.extend({
         'click #send-email-button': 'sendFollowupEmail',
         'click #submit-contact-info': 'submitContactInfo',
         'click #btn-propose-session': 'proposeSessionDialog',
-        'click #set-ls-channel': 'setLsChannel',
+        'click #set-iframe-code': 'setIframeCode',
         'click #propose': 'proposeSession', 
         'input .input-topic-title': 'fillTopicPreview',
     },
@@ -706,18 +706,17 @@ views.DialogView = Backbone.Marionette.Layout.extend({
         $("#propose-session-dialog").modal('show');
     },
 
-    setLsChannel: function(event) {
+    setIframeCode: function(event) {
         event.preventDefault();
-        var channelName = $(".input-channel-title").val();
-        var clipId = $(".input-clip-id").val();
-        if(!channelName) {
+        var iframeCode = $(".input-iframe-code").val();
+        if(!iframeCode) {
             return;
         }
         var args = {
-            channel: channelName,
+            iframeCode: iframeCode,
             roomId: this.options.event.getRoomId()
         };
-        this.options.transport.send("embed-livestream", args);
+        this.options.transport.send("insert-iframe", args);
     },
 
     sendSessionMessage: function(event) {
@@ -1595,8 +1594,8 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
             this.renderControls();
         }, this);
 
-        this.listenTo(this.model, "change:livestreamChannel", function() {
-            this.embedLSPlayer();
+        this.listenTo(this.model, "change:iframeEmbedCode", function() {
+            this.embedIframePlayer();
             this.renderControls();
         }, this);
 
@@ -1630,24 +1629,26 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
         var youtubeInputParent = youtubeInput.parent();
         var youtubeInputError = this.$(".text-warning");
         var ytId = video.extractYoutubeId(youtubeInput.val());
-        if (ytId === null || ytId === undefined) {
+
+        if (ytId === null || ytId === undefined || ytId.length === 0) {
             // Invalid youtube URL/embed code specified.
             youtubeInputError.show();
             youtubeInputParent.addClass("error");
+            return;
         } else {
             youtubeInputParent.removeClass("error");
             youtubeInputError.hide();
             this.options.transport.send(action, {
                 ytId: ytId, roomId: this.model.getRoomId()
             });
         }
-        this.removeLSChannel();
+        this.removeIframeEmbed();
     },
     removeVideoEmbed: function(jqevt) {
         jqevt.preventDefault();
         this.removeYouTubeEmbed();
         this.removeHoA();
-        this.removeLSChannel();
+        this.removeIframeEmbed();
     },
     removeYouTubeEmbed: function() {
         if(this.model.get("youtubeEmbed")) {
@@ -1665,46 +1666,33 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
             });
         }
     },
-    removeLSChannel: function() {
-        if(this.model.get("livestreamChannel").length > 0) {
-            this.model.set("livestreamChannel", "");
-            this.options.transport.send("embed-livestream", {
-                channel: "",
+    removeIframeEmbed: function() {
+        if(this.model.get("iframeEmbedCode").length > 0) {
+            this.model.set("iframeEmbedCode", "");
+            this.options.transport.send("insert-iframe", {
+                iframeCode: "",
                 roomId: this.model.getRoomId()
             });
         }  
     },
-    embedLSPlayer: function() {
+    embedIframePlayer: function() {
         this.removeYouTubeEmbed();
         this.removeHoA();
-        if(this.model.get("livestreamChannel").length == 0) {
-            $("#livestreamPlayer").remove();
+        if(this.model.get("iframeEmbedCode").length == 0) {
+            $("#iframePlayer").remove();
             return;
         }
-        this.ls = new video.LivestreamVideo({
-            lsChannel: this.model.get("livestreamChannel"),
+        this.ifV = new video.IframeVideo({
+            ifCode: this.model.get("iframeEmbedCode"),
         });
-        this.$(".ls-player").html(this.ls.el);
-        if(this.model.get("livestreamChannel")) {
-            this.ls.render(); 
+        this.$(".iframe-player").html(this.ifV.el);
+        if(this.model.get("iframeEmbedCode")) {
+            this.ifV.render(); 
         }
-        setTimeout(_.bind(this.loadSwfObject, this), 100);
-        setTimeout(_.bind(this.loadLiveStream, this), 500);
-    },
-    loadSwfObject: function() {
-        swfobject.embedSWF(
-            "http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf", 
-            "livestreamPlayer", 
-            "480", "340", "9.0.0", 
-            "expressInstall.swf", 
-            null, {AllowScriptAccess: 'always'});
-    },
-    loadLiveStream: function() {
-        var channel = this.model.get("livestreamChannel");
-        player = document.getElementById("livestreamPlayer");
-        player.setDevKey(LIVESTREAM_API_KEY);
-        player.load(channel);
-        player.startPlayback();
+        setTimeout(_.bind(this.loadIframePlayer, this), 100);
+    },
+    loadIframePlayer: function() {
+        $("#iframePlayer").append(this.model.get("iframeEmbedCode"));
     },
     playForAll: function(jqevt) {
         this.yt.playForEveryone(jqevt);
@@ -1716,7 +1704,7 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
             ytId: ytId,
             roomId: this.model.getRoomId()
         });
-        this.removeLSChannel();
+        this.removeIframeEmbed();
     },
     clearPreviousVideos: function(jqevt) {
         jqevt.preventDefault();
@@ -1735,7 +1723,7 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
     },
     setPlayerVisibility: function() {
         yt_embed = this.model.get("youtubeEmbed");
-        ls_channel = this.model.get("livestreamChannel");
+        ls_channel = this.model.get("iframeEmbedCode");
         visible = true;
         if(yt_embed == null || ls_channel.length > 0) {
             visible = false;
@@ -1779,7 +1767,7 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
     },
     onRender: function() {
         youtubeEmbed = this.model.get("youtubeEmbed");
-        lsChannel = this.model.get("livestreamChannel");
+        lsChannel = this.model.get("iframeEmbedCode");
 
         this.yt = new video.YoutubeVideo({
             ytID: youtubeEmbed,
@@ -1802,7 +1790,7 @@ views.VideoEmbedView = Backbone.Marionette.ItemView.extend({
         this.setPlayerVisibility();
 
         if(lsChannel.length > 0) {
-            this.embedLSPlayer(this.model.get("livestreamChannel"));
+            this.embedIframePlayer(this.model.get("iframeEmbedCode"));
         } 
 
         if (youtubeEmbed) {

diff --git a/public/js/models.js b/public/js/models.js
@@ -102,7 +102,7 @@ models.Event = models.BaseModel.extend({
             sessions: null,
             hoa: null,
             youtubeEmbed: null,
-            livestreamChannel: "",
+            iframeEmbedCode: "",
             previousVideoEmbeds: [],
             sessionsOpen: false,
             adminProposedSessions: true,

diff --git a/public/js/video.js b/public/js/video.js
@@ -380,13 +380,13 @@ video.YoutubeVideo = Backbone.View.extend({
     }
 });
 
-video.LivestreamVideo = Backbone.View.extend({ 
+video.IframeVideo = Backbone.View.extend({ 
     tagName: "div",
-    template: _.template($("#livestream-video").html()),
-    id: "livestreamPlayer", 
+    template: _.template($("#iframe-video").html()),
+    id: "iframePlayer", 
 
     initialize: function(options) {
-        this.lsChannel = options.lsChannel;
+        this.ifCode = options.ifCode;
     },
 
     render: function() {

diff --git a/views/_video-templates.ejs b/views/_video-templates.ejs
@@ -1,4 +1,4 @@
-<script type='text/template' id='livestream-video'>
+<script type='text/template' id='iframe-video'>
 </script>
 
 <script type='text/template' id='youtube-video'>

diff --git a/views/event.ejs b/views/event.ejs
@@ -8,7 +8,6 @@
     var USER = <%- JSON.stringify(user) %>;
     var NUM_HANGOUT_URLS_AVAILABLE = <%= numHangoutUrlsAvailable %>;
     var NUM_HANGOUT_URLS_WARNING = <%= numHangoutUrlsWarning %>;
-    var LIVESTREAM_API_KEY = <%- JSON.stringify(livestreamAPIKey) %>;
 
     <% if(!_.isUndefined(event)) { %>
         var EVENT_ATTRS = <%- JSON.stringify(event.toClientJSON()) %>;
@@ -428,14 +427,14 @@
 </script>
 
 <script type="text/template" id="video-embed-template">
-    <div class='ls-player'></div>
+    <div class='iframe-player'></div>
     <div class='video-player'></div>
     <div class='video-controls row'></div>
 </script>
 
 <script type='text/template' id="video-embed-controls-template">
         <div class='row youtube-video-controls'>
-            {{ if (youtubeEmbed || livestreamChannel.length > 0) { }}
+            {{ if (youtubeEmbed || iframeEmbedCode.length > 0) { }}
             <div class="row video-play-trash-row">
                 <div class='col-lg-7 col-xs-6 btn-play-pause'>
                     <div class='current-video-controls'>
@@ -519,11 +518,6 @@
             <button class='btn btn-default set-video'
             type="button">Embed</button>
         </div>
-
-        <div class="col-xs-12 alert alert-warning alert-dismissible text-warning" role="alert">
-          <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-          <strong>Warning!</strong> Unrecognized youtube URL! Please try again.
-        </div>
     </div>
 
     <div class="row create-join-hoa">
@@ -547,12 +541,18 @@
 
         <div class="col-lg-5 col-xs-6 btn-embed-ls">
             <a target="_blank"
-                    href="#embed-livestream-modal" data-toggle="modal">
+                    href="#embed-iframe-code-modal" data-toggle="modal">
                 <button class="btn btn-default embed-ls">
-                    <i class='fa fa-video-camera'></i> Embed Livestream
+                    <i class="fa fa-code"></i> Insert Iframe Code
                 </button>
             </a>
         </div>
+
+    </div>
+
+    <div class="col-xs-12 alert alert-warning alert-dismissible text-warning" role="alert">
+      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+      <strong>Warning!</strong> Unrecognized youtube URL! Please try again.
     </div>
 </script>
 
@@ -1085,25 +1085,23 @@
         </div>
     </div>
 
-    <div class="modal embed-livestream-modal" id="embed-livestream-modal" role="dialog" aria-hidden="true">
+    <div class="modal embed-iframe-code-modal" id="embed-iframe-code-modal" role="dialog" aria-hidden="true">
 
         <div class="modal-dialog">
             
             <div class="modal-content">
                 
                 <div class="modal-header">
-                    <h4 class="modal-title">Embed a Livestream</h4>
+                    <h4 class="modal-title">Insert an Iframe Code</h4>
                 </div>
 
                 <div class="modal-body">
                     <div class="row modal-row">
                         <div class="col-lg-12 no-padding">
                             <div class="col-lg-12 no-padding">
                                 <div class="form-group">
-                                    <label class="col-lg-3 control-label no-padding channel-title-label" for="channel_title">Channel Name</label>
-
-                                    <div class="col-lg-9 no-padding">
-                                        <input class="form-control input-channel-title" type="text" name="channel_title" placeholder="Enter your livestream channel name"value="" id="channel_title">
+                                    <div class="col-lg-12 no-padding">
+                                        <textarea class="form-control input-iframe-code" rows="3" type="text" name="iframe_code" placeholder="Enter your iframe code here"value="" id="iframe_code"/> 
                                     </div>
                                 </div>
 
@@ -1116,7 +1114,7 @@
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 
-                    <button type="button" class="btn btn-primary" class="embed-stream" id="set-ls-channel" data-dismiss="modal">Embed</button>
+                    <button type="button" class="btn btn-primary" class="embed-stream" id="set-iframe-code" data-dismiss="modal">Insert</button>
                 </div>
 
             </div>