client/src/views/mediamessage.js

   1 _kiwi.view.MediaMessage = Backbone.View.extend({
   2     events: {
   3         'click .media_close': 'close'
   4     },
   5
   6     initialize: function () {
   7         // Get the URL from the data
   8         this.url = this.$el.data('url');
   9     },
  10
  11     toggle: function () {
  12         if (!this.$content || !this.$content.is(':visible')) {
  13             this.open();
  14         } else {
  15             this.close();
  16         }
  17     },
  18
  19     // Close the media content and remove it from display
  20     close: function () {
  21         var that = this;
  22         this.$content.slideUp('fast', function () {
  23             that.$content.remove();
  24         });
  25     },
  26
  27     // Open the media content within its wrapper
  28     open: function () {
  29         // Create the content div if we haven't already
  30         if (!this.$content) {
  31             this.$content = $('<div class="media_content"><a class="media_close"><i class="fa fa-chevron-up"></i> ' + _kiwi.global.i18n.translate('client_views_mediamessage_close').fetch() + '</a><br /><div class="content"></div></div>');
  32             this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || _kiwi.global.i18n.translate('client_views_mediamessage_notfound').fetch() + ' :(');
  33         }
  34
  35         // Now show the content if not already
  36         if (!this.$content.is(':visible')) {
  37             // Hide it first so the slideDown always plays
  38             this.$content.hide();
  39
  40             // Add the media content and slide it into view
  41             this.$el.append(this.$content);
  42             this.$content.slideDown();
  43         }
  44     },
  45
  46
  47
  48     // Generate the media content for each recognised type
  49     mediaTypes: {
  50         twitter: function () {
  51             var tweet_id = this.$el.data('tweetid');
  52             var that = this;
  53
  54             $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
  55                 that.$content.find('.content').html(data.html);
  56             });
  57
  58             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_tweet').fetch() + '...</div>');
  59         },
  60
  61
  62         image: function () {
  63             return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
  64         },
  65
  66
  67         imgur: function () {
  68             var that = this;
  69
  70             $.getJSON('http://api.imgur.com/oembed?url=' + this.url, function (data) {
  71                 var img_html = '<a href="' + data.url + '" target="_blank"><img height="100" src="' + data.url + '" /></a>';
  72                 that.$content.find('.content').html(img_html);
  73             });
  74
  75             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_image').fetch() + '...</div>');
  76         },
  77
  78
  79         reddit: function () {
  80             var that = this;
  81             var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
  82
  83             $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {
  84                 console.log('Loaded reddit data', data);
  85                 var post = data[0].data.children[0].data;
  86                 var thumb = '';
  87
  88                 // Show a thumbnail if there is one
  89                 if (post.thumbnail) {
  90                     //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
  91
  92                     // Hide the thumbnail if an over_18 image
  93                     if (post.over_18) {
  94                         thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
  95                         thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
  96                         thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';
  97                         thumb += '</span>';
  98                     } else {
  99                         thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
 100                     }
 101                 }
 102
 103                 // Build the template string up
 104                 var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
 105                 tmpl += '<i class="fa fa-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <i class="fa fa-arrow-down"></i> <%- downs %><br />';
 106                 tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
 107
 108                 that.$content.find('.content').html(_.template(tmpl, post));
 109             });
 110
 111             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_reddit').fetch() + '...</div>');
 112         },
 113
 114
 115         youtube: function () {
 116             var ytid = this.$el.data('ytid');
 117             var that = this;
 118             var yt_html = '<iframe width="480" height="270" src="https://www.youtube.com/embed/'+ ytid +'?feature=oembed" frameborder="0" allowfullscreen=""></iframe>';
 119             that.$content.find('.content').html(yt_html);
 120
 121             return $('');
 122         },
 123
 124
 125         gist: function () {
 126             var that = this,
 127                 matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url);
 128
 129             $.getJSON('https://gist.github.com/'+matches[1]+'.json?callback=?' + (matches[2] || ''), function (data) {
 130                 $('body').append('<link rel="stylesheet" href="' + data.stylesheet + '" type="text/css" />');
 131                 that.$content.find('.content').html(data.div);
 132             });
 133
 134             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_gist').fetch() + '...</div>');
 135         },
 136
 137         spotify: function () {
 138             var uri = this.$el.data('uri');
 139             var method = this.$el.data('method');
 140             var that = this;
 141
 142             switch (method) {
 143                 case "track":
 144                 case "album":
 145                      var spot = {
 146                          url: 'https://embed.spotify.com/?uri=' + uri,
 147                          width: 300,
 148                          height: 80
 149                      };
 150                      break;
 151                 case "artist":
 152                      var spot = {
 153                          url: 'https://embed.spotify.com/follow/1/?uri=' + uri +'&size=detail&theme=dark',
 154                          width: 300,
 155                          height: 56
 156                      };
 157                      break;
 158             };
 159
 160             var html = '<iframe src="' + spot.url + '" width="' + spot.width + '" height="' + spot.height + '" frameborder="0" allowtransparency="true"></iframe>';
 161
 162             return $(html);
 163         },
 164
 165
 166         custom: function() {
 167             var type = this.constructor.types[this.$el.data('index')];
 168
 169             if (!type)
 170                 return;
 171
 172             return $(type.buildHtml(this.$el.data('url')));
 173         }
 174
 175
 176     }
 177     }, {
 178
 179     /**
 180      * Add a media message type to append HTML after a matching URL
 181      * match() should return a truthy value if it wants to handle this URL
 182      * buildHtml() should return the HTML string to be used within the drop down
 183      */
 184     addType: function(match, buildHtml) {
 185         if (typeof match !== 'function' || typeof buildHtml !== 'function')
 186             return;
 187
 188         this.types = this.types || [];
 189         this.types.push({match: match, buildHtml: buildHtml});
 190     },
 191
 192
 193     // Build the closed media HTML from a URL
 194     buildHtml: function (url) {
 195         var html = '', matches;
 196
 197         _.each(this.types || [], function(type, type_idx) {
 198             if (!type.match(url))
 199                 return;
 200
 201             // Add which media type should handle this media message. Will be read when it's clicked on
 202             html += '<span class="media" title="Open" data-type="custom" data-index="'+type_idx+'" data-url="' + _.escape(url) + '"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 203         });
 204
 205         // Is it an image?
 206         if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
 207             html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 208         }
 209
 210         // Is this an imgur link not picked up by the images regex?
 211         matches = (/imgur\.com\/[^/]*(?!=\.[^!.]+($|\?))/ig).exec(url);
 212         if (matches && !url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
 213             html += '<span class="media imgur" data-type="imgur" data-url="' + url + '" title="Open Image"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 214         }
 215
 216         // Is it a tweet?
 217         matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
 218         if (matches) {
 219             html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 220         }
 221
 222         // Is reddit?
 223         matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
 224         if (matches) {
 225             html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 226         }
 227
 228         // Is youtube?
 229         matches = (/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url);
 230         if (matches) {
 231             html += '<span class="media youtube" data-type="youtube" data-url="' + url + '" data-ytid="' + matches[1] + '" title="YouTube Video"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 232         }
 233
 234         // Is a github gist?
 235         matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url);
 236         if (matches) {
 237             html += '<span class="media gist" data-type="gist" data-url="' + url + '" data-gist_id="' + matches[1] + '" title="GitHub Gist"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 238         }
 239
 240         // Is this a spotify link?
 241         matches = (/http:\/\/(?:play|open\.)?spotify.com\/(album|track|artist)\/([a-zA-Z0-9]+)\/?/i).exec(url);
 242         if (matches) {
 243             // Make it a Spotify URI! (spotify:<type>:<id>)
 244             var method = matches[1],
 245                 uri = "spotify:" + matches[1] + ":" + matches[2];
 246             html += '<span class="media spotify" data-type="spotify" data-uri="' + uri + '" data-method="' + method + '" title="Spotify ' + method + '"><a class="open"><i class="fa fa-chevron-right"></i></a></span>';
 247         }
 248
 249         return html;
 250     }
 251 });