skobkin/chrome_point_plus
1
0
Fork 0
mirror of https://bitbucket.org/skobkin/chrome_point_plus.git synced 2024-11-23 18:56:04 +00:00
Code Issues Projects Releases Wiki Activity

SoundCloud embedding. New JS injecting method.

Browse source
This commit is contained in:
Alexey Skobkin 2014-11-16 06:01:31 +04:00
parent d07a560233
commit 93362d112a
6 changed files with 219 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
chrome_point_plus/js/background.js
View file

@ -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':

61
chrome_point_plus/js/options.js
View file

@ -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>'
);
});

33
chrome_point_plus/js/point-plus.js
View file

@ -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

140
chrome_point_plus/js/soundcloud/soundcloud.player.api.js Normal file
View file

@ -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);
}
};
})();

4
chrome_point_plus/manifest.json
View file

@ -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"
],

6
chrome_point_plus/options.html
View file

@ -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>