Permalink
Browse files

First commit.

  • Loading branch information...
jason2506 committed Dec 25, 2011
0 parents commit 5759e14fabc7452c196152483ff6d4fef703d12c
@@ -0,0 +1,3 @@
+*.crx
+*.pem
+.DS_Store
25 LICENSE
@@ -0,0 +1,25 @@
+Copyright (c) 2011, Chi-En Wu
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ * Neither the name of the organization nor the
+ names of its contributors may be used to endorse or promote products
+ derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,15 @@
+# MusicTube
+
+## Screenshots
+
+![Screenshots 1](http://dl.dropbox.com/u/10533595/MusicTube1.png)
+
+![Screenshots 2](http://dl.dropbox.com/u/10533595/MusicTube2.png)
+
+## License
+
+This extension is [BSD-licensed](http://www.opensource.org/licenses/BSD-3-Clause). See LICENSE file for more detail.
+
+The icons I used as the extension's icon are designed by [Everaldo Coelho](http://www.everaldo.com/). All of those are released under [GNU Lesser General Public License](http://www.gnu.org/licenses/lgpl.html).
+
+The icons I used for the embedded music player are designed by [Gentleface.com](http://www.gentleface.com/), which are released under [CC License Attribution-Noncommercial 3.0](http://creativecommons.org/licenses/by-nc/3.0/).
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <body>
+ <audio id="player" src=""></audio>
+ <script src="scripts/jquery.js"></script>
+ <script src="scripts/player.js"></script>
+ <script>
+ chrome.extension.onRequest.addListener(function(request) {
+ player.add(request.id, request.title);
+ });
+ </script>
+ </body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,23 @@
+{
+ "name": "MusicTube",
+ "version": "0.1.0",
+ "description": "Playing YouTube music in your web browser.",
+ "icons": {
+ "128": "icons/icon_128.png",
+ "48": "icons/icon_48.png",
+ "16": "icons/icon_16.png"
+ },
+ "background_page": "background.html",
+ "browser_action": {
+ "default_icon": "icons/icon_48.png",
+ "default_popup": "popup.html"
+ },
+ "content_scripts": [{
+ "matches": ["http://www.youtube.com/watch*"],
+ "js": ["scripts/jquery.js", "scripts/contentscript.js"]
+ }],
+ "permissions": [
+ "http://www.youtube.com/watch"
+ ]
+}
+
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="styles/popup.css" />
+ <title>MusicTube Player</title>
+ </head>
+ <body>
+ <div id="player">
+ <canvas id="progress"></canvas>
+ <div id="control">
+ <img id="toggle" src="" alt="play/pause" />
+ <span id="time"></span>
+ <span id="volume">
+ <img id="mute" src="" alt="mute/unmute" />
+ <input type="range" id="volume-range" max="1" min="0" step="0.01" />
+ </span>
+ </div>
+ </div>
+ <ol id="playlist"></ol>
+ <script src="scripts/jquery.js"></script>
+ <script src="scripts/controller.js"></script>
+ </body>
+</html>
@@ -0,0 +1,37 @@
+(function() {
+ $(document).ready(function() {
+ var button = $('<button>')
+ .append($('<span>Add to MusicTube</span>')
+ .addClass('yt-uix-button-content'))
+ .click(add)
+ .attr({
+ 'id': 'playlist-add-button',
+ 'class': 'yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip',
+ 'data-tooltip': 'Add to MusicTube Playlist',
+ 'data-tooltip-text': 'Add to MusicTube Playlist'
+ });
+ $('#watch-share').after(button);
+ });
+
+ var added = false;
+ function add(event) {
+ var id = window.location.search.split('v=')[1].split('&')[0];
+ var title = $('meta[name="title"]').attr('content');
+ chrome.extension.sendRequest({id: id, title: title});
+
+ if (!added) {
+ added = true;
+ var bgUrl = 'http://s.ytimg.com/yt/imgbin/www-refresh-vflj8-2O7.png';
+ var successImg = $('<img>')
+ .addClass('yt-uix-button-icon yt-uix-button-icon-subscribe')
+ .attr('src', 'http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif')
+ .css({
+ background: 'no-repeat url("' + bgUrl + '") -109px 0',
+ height: '16px',
+ width: '16px'
+ });
+ $(this).prepend(successImg);
+ }
+ }
+})();
+
@@ -0,0 +1,160 @@
+(function() {
+ var bgPage = chrome.extension.getBackgroundPage();
+ var player = bgPage.player;
+ var components = {
+ progress: $('#progress'),
+ mute: $('#mute'),
+ volume: $('#volume-range'),
+ time: $('#time'),
+ toggle: $('#toggle'),
+ playlist: $('#playlist')
+ };
+
+ displayPlaylist();
+ startListenEvent();
+ startUpdate();
+
+ function displayPlaylist () {
+ var playlist = player.playlist;
+ for (var index = 0; index < playlist.length; index++) {
+ appendPlaylistItem(index + 1, playlist[index].title);
+ }
+ }
+
+ function appendPlaylistItem(index, title) {
+ var item = $('<li>')
+ .attr('index', index)
+ .dblclick(function() {
+ var index = $(this).attr('index') - 1;
+ player.play(index);
+ });
+
+ var itemTitle = $('<span>').addClass('title').text(title);
+ item.append(itemTitle);
+
+ var deleteButton = $('<img>')
+ .attr('src', 'icons/remove.png')
+ .addClass('remove')
+ .click(function() {
+ var index = $(this).parent().attr('index') - 1;
+ player.remove(index);
+ removePlaylistItem(index);
+ });
+ item.append(deleteButton);
+
+ components.playlist.append(item);
+ }
+
+ function removePlaylistItem(index) {
+ var items = components.playlist.children();
+ $(items[index]).remove();
+ for ( ; index <= player.playlist.length; index++) {
+ $(items[index]).attr('index', index);
+ }
+ }
+
+ function startListenEvent() {
+ components.progress.click(function(event) {
+ var percent = (event.pageX - $(this).offset().left) / $(this).width();
+ player.seek(percent);
+ });
+
+ components.toggle.click(function(event) {
+ player.toggle();
+ });
+
+ components.mute.click(function(event) {
+ player.toggleMute();
+ updateVolume();
+ updateMute();
+ });
+
+ components.volume.change(function(event) {
+ var volume = $(this).val();
+ player.volume(volume);
+ if (volume > 0)
+ player.muted(false);
+ updateMute();
+ });
+ }
+
+ function startUpdate() {
+ function update() {
+ updateProgress();
+ updateToggleButton();
+ updateTime();
+ updatePlaylist();
+ }
+
+ updateVolume();
+ updateMute();
+ update();
+ setInterval(update, 500);
+ }
+
+ function updateVolume() {
+ var volume = player.muted() ? 0 : player.volume();
+ components.volume.val(volume);
+ }
+
+ function updateMute() {
+ var muted = player.muted() || (player.volume() == 0);
+ var url = 'icons/' + (muted ? 'mute' : 'volume') + '.png';
+ components.mute.attr('src', url);
+ }
+
+ function updateProgress() {
+ var width = 300;
+ var height = components.progress.height() * 50;
+
+ var currentTime = player.currentTime();
+ var bufferedTime = player.bufferedTime();
+ var duration = player.duration();
+
+ var ctx = components.progress[0].getContext("2d");
+ ctx.clearRect(0, 0, width, height);
+
+ ctx.fillStyle = "#999";
+ ctx.fillRect(0, 0, width * bufferedTime / duration, height);
+ ctx.fillStyle = "#49F";
+ ctx.fillRect(0, 0, width * currentTime / duration, height);
+ }
+
+ function updateToggleButton() {
+ var url = 'icons/' + (player.paused() ? 'play' : 'pause') + '.png';
+ components.toggle.attr('src', url);
+ }
+
+ function updateTime() {
+ var currentTime = player.currentTime();
+ var duration = player.duration() || 0;
+ var text = timeToText(currentTime) + ' / ' + timeToText(duration);
+ components.time.text(text);
+ }
+
+ function timeToText(seconds) {
+ var minutes;
+ minutes = Math.floor(seconds / 60);
+ seconds = Math.floor(seconds % 60);
+
+ var text = '';
+ if (minutes < 10) { text += '0'; }
+ text += minutes + ':';
+ if (seconds < 10) { text += '0'; }
+ text += seconds;
+ return text;
+ }
+
+ function updatePlaylist() {
+ var items = components.playlist.children();
+ var currentIndex = player.currentIndex();
+ for (var index = 0; index < items.length; index++)
+ {
+ if (index == currentIndex)
+ $(items[index]).addClass('current');
+ else
+ $(items[index]).removeClass('current');
+ }
+ }
+})();
+

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 5759e14

Please sign in to comment.