SoundCloud embedding. New JS injecting method.
This commit is contained in:
Alexey Skobkin
parent
d07a560233
commit
93362d112a
|
|
@ -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':
|
||||
|
|
|
|||
|
|
@ -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_fancybox = document.getElementById('option-fancybox').checked;
|
||||
ppOptions.option_fancybox_images = document.getElementById('option-fancybox-images').checked;
|
||||
ppOptions.option_fancybox_videos = document.getElementById('option-fancybox-videos').checked;
|
||||
ppOptions.option_fancybox_posts = document.getElementById('option-fancybox-posts').checked;
|
||||
ppOptions.option_fancybox_bind_images_to_one_flow = document.getElementById('option-fancybox-bind-images-to-one-flow').checked;
|
||||
ppOptions.option_fluid_layout = document.getElementById('option-fluid-layout').checked;
|
||||
ppOptions.option_images_load_original = document.getElementById('option-images-load-original').checked;
|
||||
ppOptions.option_embedding = document.getElementById('option-embedding').checked;
|
||||
ppOptions.option_images_load_booru = document.getElementById('option-images-load-booru').checked;
|
||||
ppOptions.option_videos_parse_webm = document.getElementById('option-videos-parse-webm').checked;
|
||||
ppOptions.option_visual_editor_post = document.getElementById('option-visual-editor-post').checked;
|
||||
ppOptions.checkbox_search_with_google = document.getElementById('option-search-with-google').checked;
|
||||
ppOptions.option_ws = document.getElementById('option-ws').checked;
|
||||
ppOptions.option_ws_comments = document.getElementById('option-ws-comments').checked;
|
||||
ppOptions.option_ws_comments_color_fadeout = document.getElementById('option-ws-comments-color-fadeout').checked;
|
||||
ppOptions.option_ws_comments_notifications = document.getElementById('option-ws-comments-notifications').checked;
|
||||
ppOptions.option_ws_feeds = document.getElementById('option-ws-feeds').checked;
|
||||
ppOptions.option_ws_feeds_subscriptions = document.getElementById('option-ws-feeds-subscriptions').checked;
|
||||
ppOptions.option_ws_feeds_blogs = document.getElementById('option-ws-feeds-blogs').checked;
|
||||
ppOptions.option_enlarge_font = document.getElementById('option-enlarge-font').checked;
|
||||
ppOptions.option_ctrl_enter = $('#option-ctrl-enter').prop('checked');
|
||||
ppOptions.option_fancybox = $('#option-fancybox').prop('checked');
|
||||
ppOptions.option_fancybox_images = $('#option-fancybox-images').prop('checked');
|
||||
ppOptions.option_fancybox_videos = $('#option-fancybox-videos').prop('checked');
|
||||
ppOptions.option_fancybox_posts = $('#option-fancybox-posts').prop('checked');
|
||||
ppOptions.option_fancybox_bind_images_to_one_flow = $('#option-fancybox-bind-images-to-one-flow').prop('checked');
|
||||
ppOptions.option_fluid_layout = $('#option-fluid-layout').prop('checked');
|
||||
ppOptions.option_images_load_original = $('#option-images-load-original').prop('checked');
|
||||
ppOptions.option_embedding = $('#option-embedding').prop('checked');
|
||||
ppOptions.option_images_load_booru = $('#option-images-load-booru').prop('checked');
|
||||
ppOptions.option_videos_parse_webm = $('#option-videos-parse-webm').prop('checked');
|
||||
ppOptions.option_embedding_soundcloud = $('#option-embedding-soundcloud').prop('checked');
|
||||
ppOptions.option_embedding_soundcloud_orig_link = $('#option-embedding-soundcloud-orig-link').prop('checked');
|
||||
ppOptions.option_visual_editor_post = $('#option-visual-editor-post').prop('checked');
|
||||
ppOptions.checkbox_search_with_google = $('#option-search-with-google').prop('checked');
|
||||
ppOptions.option_ws = $('#option-ws').prop('checked');
|
||||
ppOptions.option_ws_comments = $('#option-ws-comments').prop('checked');
|
||||
ppOptions.option_ws_comments_color_fadeout = $('#option-ws-comments-color-fadeout').prop('checked');
|
||||
ppOptions.option_ws_comments_notifications = $('#option-ws-comments-notifications').prop('checked');
|
||||
ppOptions.option_ws_feeds = $('#option-ws-feeds').prop('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_other_hightlight_post_comments = document.getElementById('option-other-hightlight-post-comments').checked;
|
||||
ppOptions.option_other_show_recommendation_count = document.getElementById('option-other-show-recommendation-count').checked;
|
||||
ppOptions.option_at_before_username = $('#option-at-before-username').prop('checked');
|
||||
ppOptions.option_other_hightlight_post_comments = $('#option-other-hightlight-post-comments').prop('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.innerHTML = 'Options Saved.';
|
||||
$('#status').html('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>'
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -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"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue