SoundCloud embedding. New JS injecting method.

chrome_point_plus/js/background.js

@@ -22,8 +22,12 @@ chrome.extension.onMessage.addListener(function(message, sender) {
                 )); 
                 break;
                 
-            case 'injectJS':
+            case 'injectJSFile':
-                
+                console.log('Injecting JS: %s', message.file);
+                chrome.tabs.executeScript(null, {
+                    file: message.file
+                    //,runAt: 'document_end'
+                });
                 break;
                 
             case 'injectCSSFile':

chrome_point_plus/js/options.js

@@ -19,6 +19,9 @@ var ppOptions = [
         'option_images_load_booru',
         // Wrap WEBM videos into the <video> tag
         'option_videos_parse_webm',
+        // SoundCloud
+        'option_embedding_soundcloud',
+            'option_embedding_soundcloud_orig_link',
     // Fluid layout
     'option_fluid_layout', 
     // Visual editor for posts
@@ -44,38 +47,39 @@ var ppOptions = [
 // Saves options to localStorage.
 function pp_save_options() {
     ppOptions = {};
-    ppOptions.option_ctrl_enter = document.getElementById('option-ctrl-enter').checked;
+    ppOptions.option_ctrl_enter = $('#option-ctrl-enter').prop('checked');
-    ppOptions.option_fancybox = document.getElementById('option-fancybox').checked;
+    ppOptions.option_fancybox = $('#option-fancybox').prop('checked');
-    ppOptions.option_fancybox_images = document.getElementById('option-fancybox-images').checked;
+    ppOptions.option_fancybox_images = $('#option-fancybox-images').prop('checked');
-    ppOptions.option_fancybox_videos = document.getElementById('option-fancybox-videos').checked;
+    ppOptions.option_fancybox_videos = $('#option-fancybox-videos').prop('checked');
-    ppOptions.option_fancybox_posts = document.getElementById('option-fancybox-posts').checked;
+    ppOptions.option_fancybox_posts = $('#option-fancybox-posts').prop('checked');
-    ppOptions.option_fancybox_bind_images_to_one_flow = document.getElementById('option-fancybox-bind-images-to-one-flow').checked;
+    ppOptions.option_fancybox_bind_images_to_one_flow = $('#option-fancybox-bind-images-to-one-flow').prop('checked');
-    ppOptions.option_fluid_layout = document.getElementById('option-fluid-layout').checked;
+    ppOptions.option_fluid_layout = $('#option-fluid-layout').prop('checked');
-    ppOptions.option_images_load_original = document.getElementById('option-images-load-original').checked;
+    ppOptions.option_images_load_original = $('#option-images-load-original').prop('checked');
-    ppOptions.option_embedding = document.getElementById('option-embedding').checked;
+    ppOptions.option_embedding = $('#option-embedding').prop('checked');
-    ppOptions.option_images_load_booru = document.getElementById('option-images-load-booru').checked;
+    ppOptions.option_images_load_booru = $('#option-images-load-booru').prop('checked');
-    ppOptions.option_videos_parse_webm = document.getElementById('option-videos-parse-webm').checked;
+    ppOptions.option_videos_parse_webm = $('#option-videos-parse-webm').prop('checked');
-    ppOptions.option_visual_editor_post = document.getElementById('option-visual-editor-post').checked;
+    ppOptions.option_embedding_soundcloud = $('#option-embedding-soundcloud').prop('checked');
-    ppOptions.checkbox_search_with_google = document.getElementById('option-search-with-google').checked;
+    ppOptions.option_embedding_soundcloud_orig_link = $('#option-embedding-soundcloud-orig-link').prop('checked');
-    ppOptions.option_ws = document.getElementById('option-ws').checked;
+    ppOptions.option_visual_editor_post = $('#option-visual-editor-post').prop('checked');
-    ppOptions.option_ws_comments = document.getElementById('option-ws-comments').checked;
+    ppOptions.checkbox_search_with_google = $('#option-search-with-google').prop('checked');
-    ppOptions.option_ws_comments_color_fadeout = document.getElementById('option-ws-comments-color-fadeout').checked;
+    ppOptions.option_ws = $('#option-ws').prop('checked');
-    ppOptions.option_ws_comments_notifications = document.getElementById('option-ws-comments-notifications').checked;
+    ppOptions.option_ws_comments = $('#option-ws-comments').prop('checked');
-    ppOptions.option_ws_feeds = document.getElementById('option-ws-feeds').checked;
+    ppOptions.option_ws_comments_color_fadeout = $('#option-ws-comments-color-fadeout').prop('checked');
-    ppOptions.option_ws_feeds_subscriptions = document.getElementById('option-ws-feeds-subscriptions').checked;
+    ppOptions.option_ws_comments_notifications = $('#option-ws-comments-notifications').prop('checked');
-    ppOptions.option_ws_feeds_blogs = document.getElementById('option-ws-feeds-blogs').checked;
+    ppOptions.option_ws_feeds = $('#option-ws-feeds').prop('checked');
-    ppOptions.option_enlarge_font = document.getElementById('option-enlarge-font').checked;
+    ppOptions.option_ws_feeds_subscriptions = $('#option-ws-feeds-subscriptions').prop('checked');
+    ppOptions.option_ws_feeds_blogs = $('#option-ws-feeds-blogs').prop('checked');
+    ppOptions.option_enlarge_font = $('#option-enlarge-font').prop('checked');
     ppOptions.option_enlarge_font_size = document.querySelector('input[name="pp-font-size"]:checked').value;
-    ppOptions.option_at_before_username = document.getElementById('option-at-before-username').checked;
+    ppOptions.option_at_before_username = $('#option-at-before-username').prop('checked');
-    ppOptions.option_other_hightlight_post_comments = document.getElementById('option-other-hightlight-post-comments').checked;
+    ppOptions.option_other_hightlight_post_comments = $('#option-other-hightlight-post-comments').prop('checked');
-    ppOptions.option_other_show_recommendation_count = document.getElementById('option-other-show-recommendation-count').checked;
+    ppOptions.option_other_show_recommendation_count = $('#option-other-show-recommendation-count').prop('checked');
 
 
     // Saving parameters
     chrome.storage.sync.set(ppOptions, function() {
         // Update status to let user know options were saved.
-        var status = document.getElementById('status');
+        $('#status').html('Options Saved.');
-        status.innerHTML = 'Options Saved.';
         setTimeout(function() {
             window.close();
         }, 1500);
@@ -105,9 +109,10 @@ function pp_restore_options() {
         });
         
         // Showing version
-        document.getElementById('pp-version').innerHTML = 'Point+ ' + getVersion() 
+        $('#pp-version').html('Point+ ' + getVersion() 
                 + ' by <a href="https://skobkin-ru.point.im/" target="_blank">@skobkin-ru</a><br>\n\
-                     & <a href="https://nokitakaze.point.im/" target="_blank">@NokitaKaze</a>';
+                     & <a href="https://nokitakaze.point.im/" target="_blank">@NokitaKaze</a>'
+        );
     });
     
 

chrome_point_plus/js/point-plus.js

@@ -19,6 +19,39 @@ $(document).ready(function() {
             if (options.option_videos_parse_webm == true){
                 parse_webm();
             }
+            // Soundcloud
+            if (options.option_embedding_soundcloud == true) {
+                // Injecting JS API
+                chrome.extension.sendMessage({
+                    type: 'injectJSFile',
+                    file: 'js/soundcloud/soundcloud.player.api.js'
+                });
+                
+                // Processing links 
+                $('.post .text-content a[href*="\\:\\/\\/soundcloud\\.com\\/"]').each(function(index) {
+                    console.log($(this));
+                    
+                    $player = $('<div class="pp-soundcloud">\
+                                    <object height="81" width="100%" id="pp-soundcloud-' + index + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">\
+                                      <param name="movie" value="http://player.soundcloud.com/player.swf?url=' + encodeURIComponent($(this).prop('href')) 
+                                            + '&enable_api=true&object_id=pp-soundcloud-' + index + '"></param>\
+                                      <param name="allowscriptaccess" value="always"></param>\
+                                      <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=' 
+                                            + encodeURIComponent($(this).prop('href')) + '&enable_api=true&object_id=pp-soundcloud-' + index 
+                                            + '" type="application/x-shockwave-flash" width="100%" name="pp-soundcloud-' + index + '"></embed>\
+                                    </object>\
+                                </div>');
+                    
+                    // Replace or prepend
+                    if (options.option_embedding_soundcloud_orig_link == true) {
+                        // Before
+                        $(this).before($player);
+                    } else {
+                        // Replace
+                        $(this).replaceWith($player);
+                    }
+                });
+            }
         }
 
         // Fancybox

chrome_point_plus/js/soundcloud/soundcloud.player.api.js

@@ -0,0 +1,140 @@
+/*
+*   JavaScript interface for the SoundCloud Player widget
+*   Author: Matas Petrikas, matas@soundcloud.com
+*   Copyright (c) 2009  SoundCloud Ltd.
+*   Licensed under the MIT license:
+*   http://www.opensource.org/licenses/mit-license.php
+*/
+(function(){
+  var isIE = (/msie (6|7|8)/i).test(navigator.userAgent) && !(/opera/i).test(navigator.userAgent);
+  
+  var soundcloud = window.soundcloud = {
+    version: "0.1",
+    debug: false,
+    _listeners: [],
+    // re-dispatches widget events in the DOM, using JS library support, the events also should bubble up the DOM
+    _redispatch: function(eventType, flashId, data) {
+      var playerNode,
+          lsnrs  = this._listeners[eventType] || [],
+          // construct the custom eventType  e.g. 'soundcloud:onPlayerReady'
+          customEventType = 'soundcloud:' + eventType;
+
+      try{
+        // find the flash player, might throw an exception
+        playerNode = this.getPlayer(flashId);
+      }catch(e){
+        if(this.debug && window.console){
+          console.error('unable to dispatch widget event ' + eventType + ' for the widget id ' + flashId, data, e);
+        }
+        return;
+      }
+      // re-dispatch SoundCloud events up in the DOM
+      if(window.jQuery){
+        // if jQuery is available, trigger the custom event
+        jQuery(playerNode).trigger(customEventType, [data]);
+      }else if(window.Prototype){
+        // if Prototype.js is available, fire the custom event
+        $(playerNode).fire(customEventType, data);
+      }else{
+        // TODO add more JS libraries that support custom DOM events
+      }
+      // if there are any listeners registered to this event, trigger them all
+      for(var i = 0, l = lsnrs.length; i < l; i += 1) {
+        lsnrs[i].apply(playerNode, [playerNode, data]);
+      }
+      // log the events in debug mode
+      if(this.debug && window.console){
+        console.log(customEventType, eventType, flashId, data);
+      }
+
+    },
+    // you can add multiple listeners to a certain event
+    // e.g. soundcloud.addEventListener('onPlayerReady', myFunctionOne);
+    //      soundcloud.addEventListener('onPlayerReady', myFunctionTwo);
+    addEventListener: function(eventType, callback) {
+      if(!this._listeners[eventType]){
+        this._listeners[eventType] = [];
+      }
+      this._listeners[eventType].push(callback);
+    },
+    // you can also remove the function listener if e.g you want to trigger it only once
+    // soundcloud.removeEventListener('onMediaPlay', myFunctionOne);
+    removeEventListener: function(eventType, callback) {
+      var lsnrs = this._listeners[eventType] || [];
+      for(var i = 0, l = lsnrs.length; i < l; i += 1) {
+        if(lsnrs[i] === callback){
+          lsnrs.splice(i, 1);
+        }
+      }
+    },
+    // get widget node based on its id (if object tag) or name (if embed tag)
+    // if you're using SWFObject or other dynamic Flash generators, please make sure that you set the id parameter
+    //  only if the DOM has an id/name it's possible to call player's methods.
+    // Important!: because of the bug in Opera browser, the Flash can't get its own id
+    // so the generator should set it additionally through flashvars parameter 'object_id'
+    getPlayer: function(id){
+      var flash;
+      try{
+        if(!id){
+          throw "The SoundCloud Widget DOM object needs an id atribute, please refer to SoundCloud Widget API documentation.";
+        }
+        flash = isIE ? window[id] : document[id];
+        if(flash){
+          if(flash.api_getFlashId){
+            return flash;
+          }else{
+            throw "The SoundCloud Widget External Interface is not accessible. Check that allowscriptaccess is set to 'always' in embed code";
+          }
+        }else{
+          throw "The SoundCloud Widget with an id " + id + " couldn't be found";
+        }
+      }catch(e){
+        if (console && console.error) {
+         console.error(e);
+        }
+        throw e;
+      }
+    },
+    // fired when widget has loaded its data and is ready to accept calls from outside
+    // the widget will call these functions only if in it's flashvars there's a parameter enable_api=true
+    // @flashId: the widget id, basically the Flash node should be accessible to JS with soundcloud.getPlayer(flashId)
+    // @data: an object containing .mediaUri (eg. 'http://api.soundcloud.com/tracks/49931') .mediaId (e.g. '4532')
+    // in buffering events data contains also .percent = (e.g. '99')
+    onPlayerReady: function(flashId, data) {
+      this._redispatch('onPlayerReady', flashId, data);
+    },
+    // fired when widget starts playing current track (fired only once per track)
+    onMediaStart : function(flashId, data) {
+      this._redispatch('onMediaStart', flashId, data);
+    },
+    // fired when the track/playlist has finished playing
+    onMediaEnd : function(flashId, data) {
+      this._redispatch('onMediaEnd', flashId, data);
+    },
+    // fired when widget starts playing current track (fired on every play, seek)
+    onMediaPlay : function(flashId, data) {
+      this._redispatch('onMediaPlay', flashId, data);
+    },
+    // fired when track was paused
+    onMediaPause : function(flashId, data) {
+      this._redispatch('onMediaPause', flashId, data);
+    },
+    // fired when the widget is still buffering, means you can't seek in the track fully yet
+    onMediaBuffering : function(flashId, data) {
+      this._redispatch('onMediaBuffering', flashId, data);
+    },
+    // fired when the user seeks in the track
+    onMediaSeek : function(flashId, data) {
+      this._redispatch('onMediaSeek', flashId, data);
+    },
+    // fired when the widget is done buffering and the whole track length is seekable
+    onMediaDoneBuffering : function(flashId, data) {
+      this._redispatch('onMediaDoneBuffering', flashId, data);
+    },
+    // fired when the widget can't get the requested data from the server (the resource is removed, hidden, etc.)
+    onPlayerError : function(flashId, data) {
+      this._redispatch('onPlayerError', flashId, data);
+    }
+  };
+  
+})();

chrome_point_plus/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Point+",
-    "version": "1.9.2",
+    "version": "1.10.0",
     "author": "Alexey Skobkin",
     "homepage_url": "https://bitbucket.org/skobkin/chrome_point_plus",
     "description": "More features for point.im",
@@ -29,7 +29,7 @@
                     "js/jquery-1.10.1.min.js",
                     "js/jquery.fancybox.pack.js", "js/jquery.fancybox-media.js",
                     "js/markitup/jquery.markitup.js", "js/markitup/sets/markdown/set.js",
-					"js/bquery_ajax.js",
+                    "js/bquery_ajax.js",
                     "js/options.js",
                     "js/point-plus.js"
                     ],

chrome_point_plus/options.html

@@ -54,7 +54,11 @@
                         </div>
                         
                         <div class="option">
-                            <input type="checkbox" id="option-embedding-soundcloud" disabled="disabled"><label for="option-embedding-soundcloud">Soundcloud</label>
+                            <input type="checkbox" id="option-embedding-soundcloud"><label for="option-embedding-soundcloud">Soundcloud</label>
+                            
+                            <div class="option">
+                                <input type="checkbox" id="option-embedding-soundcloud-orig-link"><label for="option-embedding-soundcloud-orig-link">Leave original link</label>
+                            </div>
                         </div>
                     </div>
                 </div>