diff --git a/assets/background.js b/assets/background.js index 3fb5ca2..5f52f41 100644 --- a/assets/background.js +++ b/assets/background.js @@ -109,7 +109,8 @@ function processGMUpdate(request, sender) { data.songData = request.songData; } - messageContentScript( data ); + messageContentScript( data ); + data.updated = false; gm_player = data; } @@ -139,7 +140,7 @@ var bubble = new function() { } this.shouldHideOnDisabled = function(data) { - self.options.hide = data.hideOnDisabled; + gm_player.hideOnDisabled = data.hideOnDisabled; } this.shouldShowTrackTitle = function(data) { @@ -159,7 +160,8 @@ var bubble = new function() { if (self.html != null && self.options.position != null) { self.options.showMinWidth = 400; - self.options.opacity = 0.5; + self.options.opacity = 0.25; + self.options.zindex = 2000000000; return format(self.html, self.options); } else return ""; diff --git a/assets/content_script.js b/assets/content_script.js index 15d01f5..49e6801 100644 --- a/assets/content_script.js +++ b/assets/content_script.js @@ -27,6 +27,10 @@ function loadExtension(data) { excuteCommand : function() { chrome.runtime.sendMessage({command: this.dataset.command}); }, + hide : function() { + blacklisted = true; + document.getElementById("gm-bubble-content").remove(); + }, blacklistUrl: function () { blacklisted = true; chrome.runtime.sendMessage({blacklist: window.location.hostname}); @@ -59,9 +63,10 @@ function loadExtension(data) { document.getElementById('gm-bubble-dislike').onclick=gm_Bubble_Control.excuteCommand; document.getElementById('gm-bubble-blacklist').onclick=gm_Bubble_Control.blacklistUrl; + document.getElementById('gm-bubble-hide').onclick=gm_Bubble_Control.hide; document.getElementById('gm-bubble-main').onmousewheel=gm_Bubble_Control.scroll; - document.getElementById('gm-bubble-content').ondblclick=gm_Bubble_Control.selectPlayer; + document.getElementById('gm-bubble-main').ondblclick=gm_Bubble_Control.selectPlayer; setDraggable(); update(data); } @@ -72,7 +77,7 @@ function update(data) { return; gm_player = data; element = document.getElementById("gm-bubble-content"); - element.setAttribute("data-hideoption", data.hideOnDisabled ); + element.setAttribute("data-hideoption", data.hideOnDisabled); if (data.disabled) { element.setAttribute("data-state", "disabled"); @@ -234,25 +239,19 @@ var progressBar = new function() { // Drag Stuff -var draggable, container,dragData=null; +var draggable, container, dragData=null; function setDraggable() { - draggable=document.getElementById("gm-bubble-drag"); + draggable1=document.getElementById("gm-bubble-main"); + draggable2=document.getElementById("gm-bubble-layer"); container=document.getElementById("gm-bubble-content"); - if(window.addEventListener) { - draggable.addEventListener('mousedown',startDrag,false); - document.body.addEventListener('mousemove',drag,false); - document.body.addEventListener('mouseup',stopDrag,false); - } - else if(window.attachEvent) { - draggable.attachEvent('onmousedown',startDrag); - document.body.attachEvent('onmousemove',drag); - document.body.attachEvent('onmouseup',stopDrag); - } + + draggable1.addEventListener('mousedown',startDrag,false); + draggable2.addEventListener('mousedown',startDrag,false); } function startDrag(ev) { -if(!dragData) { +if(!dragData) { containerOffset = document.getElementById("gm-bubble-content").dataset.state == "disabled"? 0 : 64; ev=ev||event; dragData={ @@ -260,13 +259,24 @@ if(!dragData) { y: ev.clientY-container.offsetTop-containerOffset }; }; + + document.body.addEventListener('mousemove',drag,false); + document.body.addEventListener('mouseup',stopDrag,false); } -function processDrag(ev) { +function processDrag(ev) { posX = ev.clientX-dragData.x; posY = ev.clientY-dragData.y; + maxX = document.body.clientWidth; maxY = window.innerHeight; + + if (!dragData.moved && Math.abs(container.offsetLeft - posX) < 20 && Math.abs(container.offsetTop - posY) < 20) { + return; + } + + dragData.moved = true; + pos = {}; if(maxX / 2 > posX) { pos.left = posX; @@ -291,17 +301,23 @@ function processDrag(ev) { } function drag(ev) { - if(dragData) { + if (dragData) { processDrag(ev||event); } } -function stopDrag(ev) { -if(dragData) { +function stopDrag(ev) { + if(dragData && dragData.moved) { + dragData.moved = false; processDrag(ev||event); - setLocation(dragData.pos); + if (dragData.pos) { + setLocation(dragData.pos); + } dragData=null; } + + document.body.removeEventListener('mousemove',drag,false); + document.body.removeEventListener('mouseup',stopDrag,false); } // End Drag stuff diff --git a/assets/gm-content-script.js b/assets/gm-content-script.js index d4fcdf5..a443fef 100644 --- a/assets/gm-content-script.js +++ b/assets/gm-content-script.js @@ -76,8 +76,7 @@ function setEnabled(enabled) { updatePlayerStatus("disabled", !enabled); } -function observePlayButton(mutations) { - console.log("BB"); +function observePlayButton(mutations) { var playButton = document.querySelector('[data-id="play-pause"]'); enabled = !playButton.hasAttribute("disabled"); setEnabled(enabled); @@ -110,7 +109,6 @@ var observers = { observeSongTitle(); }), playButtonObserver: new MutationObserver(function(mutations) { - console.log("AA"); observePlayButton(); }), thumbsUpObserver: new MutationObserver(function(mutations) { diff --git a/assets/options.css b/assets/options.css index 8839a7f..b321672 100644 --- a/assets/options.css +++ b/assets/options.css @@ -20,7 +20,7 @@ body { height: 100%; box-sizing: border-box; margin: 0 auto; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); + background: #4CAF50; } @@ -28,13 +28,13 @@ body { height: 100%; background-color: #fff; padding: 0 30px; - box-shadow: 0 0 10px #333; box-sizing: border-box; position: absolute; min-width: 1000px; max-width: 1280px; left: 0; right: 0; + top: 0; margin: auto; } @@ -187,27 +187,27 @@ width: 20px; } .pluginButton .pluginButtonLabel { --webkit-font-smoothing: antialiased; -border-collapse: collapse; -color: rgb(255, 255, 255); -cursor: pointer; -direction: ltr; -display: inline; -font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; -font-size: 11px; -font-weight: bold; -height: auto; -line-height: 20px; -padding-bottom: 0px; -padding-left: 0px; -padding-right: 5px; -padding-top: 0px; -position: relative; -text-align: left; -text-shadow: rgb(53, 76, 140) 0px -1px 0px; -vertical-align: top; -white-space: nowrap; -width: auto; + -webkit-font-smoothing: antialiased; + border-collapse: collapse; + color: rgb(255, 255, 255); + cursor: pointer; + direction: ltr; + display: inline; + font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; + font-size: 11px; + font-weight: bold; + height: auto; + line-height: 20px; + padding-bottom: 0px; + padding-left: 0px; + padding-right: 5px; + padding-top: 0px; + position: relative; + text-align: left; + text-shadow: rgb(53, 76, 140) 0px -1px 0px; + vertical-align: top; + white-space: nowrap; + width: auto; } input[type="checkbox"] { diff --git a/assets/tutorial.css b/assets/tutorial.css index f672205..e6da20c 100644 --- a/assets/tutorial.css +++ b/assets/tutorial.css @@ -113,7 +113,7 @@ h1 { [data-step="step5"] #tut-step-5 { background-color: #fff; - top: calc(30% + 200px); + top: calc(30%); transition: all 0.75s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } @@ -127,10 +127,10 @@ h1 { } #background-container { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: absolute; width:100%; height: 100%; + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } [data-step="step2"] #background-container { @@ -221,6 +221,10 @@ h1 { color: #F44336; } +.action.green { + color: #4CAF50; +} + .tip { font-style: italic; font-size: small; diff --git a/assets/tutorial.js b/assets/tutorial.js index 92384aa..7e1ff87 100644 --- a/assets/tutorial.js +++ b/assets/tutorial.js @@ -60,6 +60,18 @@ function onHashChange() { } +function temporaryHide() { + element = document.getElementById("gm-bubble-container"); + element.style.opacity = 0; + bubbleHighlight = document.getElementById('bubble-highlight'); + bubbleHighlight.classList.add("pop-highlight"); + setTimeout(function() { + element = document.getElementById("gm-bubble-container"); + bubbleHighlight.classList.remove("pop-highlight"); + element.style.opacity = 1; + }, 1500) +}; + function startTutorial() { document.getElementById("gm-bubble-content").setAttribute("style", "bottom: calc(70% - 32px); right: calc(50% - 32px)"); document.body.appendChild(document.getElementById("tut-container")); @@ -67,6 +79,8 @@ function startTutorial() { document.body.onhashchange = onHashChange; onHashChange(); + document.getElementById('gm-bubble-blacklist').onclick=temporaryHide; + document.getElementById('gm-bubble-hide').onclick=temporaryHide; } window.onload=function() { setTimeout(startTutorial, 100) }; \ No newline at end of file diff --git a/manifest.json b/manifest.json index 242c84d..3ab855e 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "manifest_version": 2, "author": "Joseph DeBono", "homepage_url": "https://plus.google.com/communities/114213776133869190328", - "version": "1.5.3", + "version": "1.6", "description": "Floating quick controls for Google Play Music", "options_page": "options.html", "content_security_policy": "script-src 'self' https://apis.google.com https://platform.twitter.com; object-src 'self'", diff --git a/music.html b/music.html index 79cd200..e5b49f9 100644 --- a/music.html +++ b/music.html @@ -18,19 +18,18 @@ right: 100px; bottom: 100px; - transition: opacity 0.5s ease; + transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity: {opacity}; width: 64px; height: 64px; - z-index: 2000000000; + z-index: {zindex}; -webkit-user-select: none; - zoom: reset; } #gm-bubble-content * { box-sizing: initial; - transition: opacity 0.45s ease, -webkit-transform 0.45s; + transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.45s; -webkit-user-select: none; text-align: left; } @@ -66,7 +65,7 @@ } #gm-bubble-content:not([data-state="disabled"]):hover { - transition: opacity 0.5s ease; + transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1.0; padding:64px 64px 32px 64px !important; margin:-64px -64px -32px -64px !important; @@ -76,7 +75,7 @@ } #gm-bubble-content:not([data-state="disabled"]).gm-bubble-notify { - transition: opacity 0.5s ease; + transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1.0; } @@ -209,7 +208,7 @@ #gm-bubble-content[data-rating="5"] #gm-bubble-like .gm-bubble-liked { opacity: 1; - transition: opacity 0.15s ease; + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* Thumbs down */ @@ -225,7 +224,7 @@ #gm-bubble-content[data-rating="1"] #gm-bubble-dislike .gm-bubble-disliked { opacity: 1; - transition: opacity 0.15s ease; + transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* Blacklist button */ @@ -235,14 +234,48 @@ opacity: 1; } + #gm-bubble-layer:hover:before { + position: absolute; + top: 32px; + left:-64px; + width: 192px; + height: 96px; + content: " "; + z-index: 15; + } + /* Move button */ - #gm-bubble-main:active ~ #gm-bubble-drag, #gm-bubble-layer:hover ~ #gm-bubble-drag, #gm-bubble-drag:hover, #gm-bubble-drag:active { + /*#gm-bubble-main:active ~ #gm-bubble-drag, #gm-bubble-layer:hover ~ #gm-bubble-drag, #gm-bubble-drag:hover, #gm-bubble-drag:active { transition: -webkit-transform 0.70s 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform:translate(-28px, 28px); opacity: 1; cursor: move; } + + #gm-bubble-drag:hover:before { + content: " "; + position: absolute; + width: 40px; + height: 40px; + left: -16px; + }*/ + + /* Hide button */ + #gm-bubble-main:active ~ #gm-bubble-hide, #gm-bubble-layer:hover ~ #gm-bubble-hide, #gm-bubble-hide:hover, #gm-bubble-hide:active { + transition: -webkit-transform 0.70s 0.2s cubic-bezier(0.4, 0, 0.2, 1); + -webkit-transform:translate(-28px, 28px); + + opacity: 1; + } + + #gm-bubble-hide:hover:before { + content: " "; + position: absolute; + width: 40px; + height: 40px; + left: -16px; + } #gm-bubble-progress-container { top: 0; @@ -267,14 +300,6 @@ border-radius: 50%; } - #gm-bubble-drag:hover:before { - content: " "; - position: absolute; - width: 40px; - height: 40px; - left: -16px; - } - #gm-bubble-blacklist:hover:before { content: " "; position: absolute; @@ -283,15 +308,6 @@ left: 0px; } - #gm-bubble-layer:hover:before { - position: absolute; - top: 32px; - left:-64px; - width: 192px; - height: 96px; - content: " "; - z-index: 15; - } #gm-bubble-layer:hover ~ .gm-bubble-button { z-index: 20; @@ -366,7 +382,7 @@ text-overflow: ellipsis; line-height: 20px; padding: 0 5px; - font-family: 'Segoe UI', 'Helvetica' sans-serif; + font-family: 'Segoe UI', 'Helvetica', sans-serif; font-weight: 400; max-width: 144px; box-sizing: border-box; @@ -503,28 +519,20 @@ - + - - - - - + + + - - - - - - - - - + + + diff --git a/options.html b/options.html index dcf3224..74a4726 100644 --- a/options.html +++ b/options.html @@ -18,6 +18,7 @@ Music Bubbles + < @@ -41,7 +42,17 @@

Edit Blacklist


-

Changelist

+

What's New

+ +
v1.6 + +
v1.5.3
  • Bug fixes.
    • @@ -64,7 +75,7 @@

    Changelist

  • Quick update to make Music Bubbles compatible with new Google Play Music layout. Please report bugs here.
-
v1.4.1: +
diff --git a/tutorial.html b/tutorial.html index c3a51b2..c77b107 100644 --- a/tutorial.html +++ b/tutorial.html @@ -76,7 +76,7 @@

Control

- Scrolling up and down will adjust volume. + Use your mouse wheel to scroll up and down and adjust the volume.

@@ -116,7 +116,7 @@

Customize

Done!

The bubble will now be there while you're browsing. Of course, you can move the bubble around any time.

-

That's it.

+

Thats it! Enjoy Music Bubbles.

Opened tabs will need to be refreshed before the bubble shows up.