Browse Source

JS cleanup

pull/52/head
Samuel Attard 7 years ago
parent
commit
1f74173bff
  1. 40
      Google Play Music/Resources/custom-interface.js
  2. 40
      Google Play Music/Resources/dark-theme.js
  3. 275
      Google Play Music/Resources/mini-player.js

40
Google Play Music/Resources/custom-interface.js

@ -1,8 +1,8 @@
window.nowPlaying = function() {
window.nowPlaying = function () {
var container = document.getElementsByClassName('now-playing-info-content'),
info = {},
element;
info = {},
element;
if (container.length > 0) {
container = container[0];
element = container.getElementsByClassName('player-album');
@ -13,7 +13,7 @@ window.nowPlaying = function() {
info.title = element.innerText || element.textContent;
element = document.getElementById('player-artist');
info.artist = element.innerText || element.textContent;
info.albumArt = document.getElementById('playingAlbumArt').src;
info.albumArt = document.getElementById('playingAlbumArt').src;
}
}
if (!info.title) {
@ -21,43 +21,45 @@ window.nowPlaying = function() {
} else {
return info;
}
}
};
var currentPlaying = JSON.stringify(null);
setInterval(function() {
setInterval(function () {
if (JSON.stringify(window.nowPlaying()) != currentPlaying) {
currentPlaying = JSON.stringify(window.nowPlaying());
tmp = window.nowPlaying();
var event = new CustomEvent('song-change', {'detail': window.nowPlaying()});
var tmp = window.nowPlaying(),
event = new CustomEvent('song-change', {
'detail': window.nowPlaying()
});
window.dispatchEvent(event);
csharpinterface.songChangeEvent(tmp.title, tmp.album, tmp.artist, tmp.albumArt);
csharpinterface.songChangeEvent(tmp.title, tmp.album, tmp.artist, tmp.albumArt);
}
}, 20);
var check = setInterval(function() {
var check = setInterval(function () {
if (document.querySelectorAll('.nav-item-container[data-action=upload-music]').length !== 0) {
clearInterval(check);
var hideDiv = function(div) {
var hideDiv = function (div) {
div.style.display = "none";
};
hideDiv(document.querySelectorAll('.nav-item-container[data-action=upload-music]')[0]);
hideDiv(document.querySelectorAll('.nav-item-container[data-action=help-and-feedback]')[0]);
divs = document.querySelectorAll('[aria-label="Account Information"] > div');
var divs = document.querySelectorAll('[aria-label="Account Information"] > div');
hideDiv(divs[0]);
hideDiv(divs[1]);
hideDiv(divs[2].querySelectorAll('div')[0]);
divs[2].querySelectorAll('div')[1].querySelectorAll('a')[0].setAttribute('style', 'color: black !important');
divs[2].querySelectorAll('div')[1].querySelectorAll('a')[0].setAttribute('style', 'color: black !important');
hideDiv(document.querySelectorAll('#gbwa')[0]);
hideDiv(document.querySelectorAll('#gbwa + div')[0]);
hideDiv(document.querySelectorAll('#gbwa + div')[0]);
document.querySelectorAll('#gbwa + div + div')[0].setAttribute('style', 'margin-left: auto !important');
var e = document.getElementById('material-one-right');
var e = document.getElementById('material-one-right');
e.innerHTML = '' +
'<style>[data-id=prev-history][disabled], [data-id=next-history][disabled] { opacity: 0.3; }</style>' +
'<paper-icon-button data-id="prev-history" icon="arrow-back" role="button" tabindex="0" title="Navigate Back" aria-label="Navigate Back" style="color: white" onclick="window.history.back()"></paper-icon-button>' +
'<paper-icon-button data-id="next-history" icon="arrow-forward" role="button" tabindex="0" title="Navigate Forward" aria-label="Navigate Forward" style="color: white" onclick="window.history.forward()"></paper-icon-button>'+
e.innerHTML;
'<style>[data-id=prev-history][disabled], [data-id=next-history][disabled] { opacity: 0.3; }</style>' +
'<paper-icon-button data-id="prev-history" icon="arrow-back" role="button" tabindex="0" title="Navigate Back" aria-label="Navigate Back" style="color: white" onclick="window.history.back()"></paper-icon-button>' +
'<paper-icon-button data-id="next-history" icon="arrow-forward" role="button" tabindex="0" title="Navigate Forward" aria-label="Navigate Forward" style="color: white" onclick="window.history.forward()"></paper-icon-button>' +
e.innerHTML;
}
}, 10);

40
Google Play Music/Resources/dark-theme.js

@ -1,8 +1,8 @@
var BACK_PRIMARY = '#222326',
BACK_SECONDARY = '#121314',
BACK_HIGHLIGHT = '#615F59',
FORE_PRIMARY = '#FFFFFF',
FORE_SECONDARY = '#EF6C00';
BACK_SECONDARY = '#121314',
BACK_HIGHLIGHT = '#615F59',
FORE_PRIMARY = '#FFFFFF',
FORE_SECONDARY = '#EF6C00';
// Custom
FORE_SECONDARY = '#1ED760';
@ -16,24 +16,24 @@ var subColors = function (style) {
style = style.replace(/\{\{FORE_PRIMARY\}\}/g, FORE_PRIMARY);
style = style.replace(/\{\{FORE_SECONDARY\}\}/g, FORE_SECONDARY);
return style;
}
};
var setStyle = function (selector, style, imp) {
selector = "body.custom " + selector
selector = "body.custom " + selector;
selector = selector.replace(/, /g, ", body.custom ");
string = selector + " {";
var string = selector + " {";
for (var i = 0; i < style.length; i++) {
string += subColors(style[i]) + (imp ? "" : " !important;");
}
string += "}";
GLOBAL_STYLES += string;
}
};
var flushStyles = function () {
var s = document.createElement('style');
s.innerHTML = GLOBAL_STYLES;
document.body.appendChild(s);
}
};
if (localStorage.getItem("custom-theme") === null) {
localStorage.setItem("custom-theme", "false");
@ -44,12 +44,12 @@ setInterval(function () {
if (labsCard.length > 0) {
labsCard = labsCard[0];
var labsList = labsCard.querySelectorAll('.labs-list')[0],
exists = labsList.querySelectorAll('.lab-list-item.black-custom-gpm');
exists = labsList.querySelectorAll('.lab-list-item.black-custom-gpm');
if (exists.length === 0) {
darkOn = localStorage.getItem("custom-theme");
var blackDiv = document.createElement('div');
var darkOn = localStorage.getItem("custom-theme"),
blackDiv = document.createElement('div');
blackDiv.className = "lab-list-item black-custom-gpm";
blackDiv.innerHTML = '<div class="lab-info"><div class="lab-name">Custom Theme</div><div class="lab-description">Changes the look of Google Play Music to a Custom Theme</div></div><paper-toggle-button data-id="custom_theme" title="Custom Theme" tabindex="0" style="touch-action: none;" toggles="" onclick="window.turn' + (darkOn === "false" ? "On" : "Off") + 'Custom(this);return false;" ' + (darkOn === 'true' ? 'checked' : '') + ' class="x-scope paper-toggle-button-0"></paper-toggle-button>'
blackDiv.innerHTML = '<div class="lab-info"><div class="lab-name">Custom Theme</div><div class="lab-description">Changes the look of Google Play Music to a Custom Theme</div></div><paper-toggle-button data-id="custom_theme" title="Custom Theme" tabindex="0" style="touch-action: none;" toggles="" onclick="window.turn' + (darkOn === "false" ? "On" : "Off") + 'Custom(this);return false;" ' + (darkOn === 'true' ? 'checked' : '') + ' class="x-scope paper-toggle-button-0"></paper-toggle-button>';
labsList.appendChild(blackDiv);
}
}
@ -96,7 +96,7 @@ var BlackTheme = function () {
setStyle('#queue-overlay::after', ['border-color: transparent transparent {{BACK_PRIMARY}} {{BACK_PRIMARY}}']);
setStyle('.upload-dialog-content', ['background-color: {{BACK_SECONDARY}}']);
setStyle('.upload-dialog-description', ['color: {{FORE_PRIMARY}}']);
setStyle('.material .song-row:hover [data-col="index"] .hover-button[data-id="play"]', ['background-color: {{BACK_HIGHLIGHT}}'])
setStyle('.material .song-row:hover [data-col="index"] .hover-button[data-id="play"]', ['background-color: {{BACK_HIGHLIGHT}}']);
setStyle('.goog-menuheader', ['color: {{FORE_PRIMARY}}']);
setStyle('.paper-progress-1 #primaryProgress.paper-progress', ['background-color: {{FORE_SECONDARY}}']);
setStyle('.album-view .material-container-details .info .title .explicit', ['background-color: {{FORE_SECONDARY}}']);
@ -135,9 +135,9 @@ var BlackTheme = function () {
setStyle('.nav-toolbar .menu-logo', ['-webkit-filter: hue-rotate(90deg)']);
flushStyles();
}
};
window['turnOnCustom'] = function (self) {
window.turnOnCustom = function (self) {
csharpinterface.darkTheme();
var old = document.body.className;
if (old.split('custom').length === 1) {
@ -147,18 +147,18 @@ window['turnOnCustom'] = function (self) {
if (self !== null) {
self.setAttribute('onclick', 'window.turnOffCustom()');
}
}
};
window['turnOffCustom'] = function (self) {
window.turnOffCustom = function (self) {
csharpinterface.lightTheme();
document.body.className = document.body.className.toString().replace(/ ?custom/g, '');
localStorage.setItem("custom-theme", "false");
if (self !== null) {
self.setAttribute('onclick', 'window.turnOnCustom()');
}
}
};
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("DOMContentLoaded", function () {
BlackTheme();
if (localStorage.getItem("custom-theme") === "true") {
window.turnOnCustom(null);

275
Google Play Music/Resources/mini-player.js

@ -1,148 +1,161 @@
document.addEventListener("DOMContentLoaded", function(event) {
GLOBAL_STYLES = "";
document.addEventListener("DOMContentLoaded", function () {
var GLOBAL_STYLES = "";
var setStyle = function (selector, style, prefix) {
if (typeof prefix === 'undefined') {
prefix = true;
}
selector = (prefix ? "html.mini " : '') + selector
selector = selector.replace(/, /g, ", html.mini ");
string = selector + " {";
for (var i = 0; i < style.length; i++) {
string += subColors(style[i]) + " !important;";
}
string += "}";
GLOBAL_STYLES += string;
}
var setStyle = function (selector, style, prefix) {
if (typeof prefix === 'undefined') {
prefix = true;
}
selector = (prefix ? "html.mini " : '') + selector;
selector = selector.replace(/, /g, ", html.mini ");
var string = selector + " {";
for (var i = 0; i < style.length; i++) {
string += subColors(style[i]) + " !important;";
}
string += "}";
GLOBAL_STYLES += string;
};
setStyle(', body', ['height: 300px', 'width: 300px']);
setStyle('#player', ['width: 300px', 'min-width: 280px', 'z-index: 9999999', 'height: 65px', 'min-height: 65px']);
setStyle('#player', ['transition: bottom 0.3s', 'bottom: -100px', 'transition-timing-function: ease-in-out', 'width: 280px', 'left: 10px', 'right: 10px',
'border-bottom-left-radius: 8px', 'border-bottom-right-radius: 8px']);
setStyle('body[ready]:hover #player', ['bottom: 10px']);
setStyle('body[ready]:hover #mini-info', ['opacity: 1']);
setStyle('#material-player-left-wrapper, #material-player-right-wrapper', ['display: none']);
setStyle('#mini-album', ['position: fixed', 'top: 0', 'left: 0', 'display: block', 'width: 100%', 'height: 100%', 'z-index: 9999998']);
setStyle('.player-progress-wrapper', ['left: 0']);
setStyle('.material-player-middle', ['margin: 0px auto']);
setStyle('#player.material .material-player-middle sj-icon-button[data-id="play-pause"] core-icon, #player.material .material-player-middle paper-icon-button[data-id="play-pause"] iron-icon', ['height: 50px', 'width: 50px', 'top: -8px']);
setStyle('[data-id=play-pause]::shadow paper-ripple.circle', ['height: 50px', 'width: 50px', 'margin-left: 6px', 'margin-top: -2px']);
setStyle('[data-id=forward], [data-id=rewind], [data-id=repeat], [data-id=shuffle]', ['top: -8px']);
setStyle('[data-id=shuffle]', ['left: -8px']);
setStyle('[data-id=repeat]', ['left: 8px']);
setStyle('[data-id=show-miniplayer-dp]', ['color: #9e9e9e', 'position: absolute', 'top: auto', 'bottom: 0', 'right: 0', 'margin: 0'], false);
setStyle('#player paper-icon-button[data-id="show-miniplayer-dp"] iron-icon', ['width: 16px', 'height: 16px'], false)
setStyle('#current-track-prog-mini', ['position: absolute', 'top: 8px', 'left: 6px', 'font-size: 11px', 'display: block']);
setStyle('#end-track-prog-mini', ['position: absolute', 'top: 8px', 'right: 6px', 'font-size: 11px', 'display: block']);
setStyle('::shadow #mainContainer', ['overflow: hidden']);
setStyle('#embed-container', ['width: 0', 'overflow: hidden'], false);
setStyle('#mini-info', ['position: fixed', 'top: 0px', 'left: 0', 'width: 100%', 'height: 90px', 'overflow: hidden',
'background: -webkit-linear-gradient(top, rgba(45,45,45,0.85) 0%,rgba(9,9,9,0.41) 79%,rgba(0,0,0,0) 100%)', 'display: block',
'z-index: 9999999', 'transition: opacity 0.3s', 'transition-timing-function: ease-in-out', 'opacity: 0']);
setStyle('#mini-info span', ['color: #EEE', 'display: block', 'font-size: 20px', 'padding: 4px 12px', 'cursor: default']);
setStyle('#mini-info span:last-child', ['font-size: 16px', 'height: 18px', 'overflow: hidden']);
setStyle(', body', ['height: 300px', 'width: 300px']);
setStyle('#player', ['width: 300px', 'min-width: 280px', 'z-index: 9999999', 'height: 65px', 'min-height: 65px']);
setStyle('#player', ['transition: bottom 0.3s', 'bottom: -100px', 'transition-timing-function: ease-in-out', 'width: 280px', 'left: 10px', 'right: 10px',
'border-bottom-left-radius: 8px', 'border-bottom-right-radius: 8px'
]);
setStyle('body[ready]:hover #player', ['bottom: 10px']);
setStyle('body[ready]:hover #mini-info', ['opacity: 1']);
setStyle('#material-player-left-wrapper, #material-player-right-wrapper', ['display: none']);
setStyle('#mini-album', ['position: fixed', 'top: 0', 'left: 0', 'display: block', 'width: 100%', 'height: 100%', 'z-index: 9999998']);
setStyle('.player-progress-wrapper', ['left: 0']);
setStyle('.material-player-middle', ['margin: 0px auto']);
setStyle('#player.material .material-player-middle sj-icon-button[data-id="play-pause"] core-icon, #player.material .material-player-middle paper-icon-button[data-id="play-pause"] iron-icon', ['height: 50px', 'width: 50px', 'top: -8px']);
setStyle('[data-id=play-pause]::shadow paper-ripple.circle', ['height: 50px', 'width: 50px', 'margin-left: 6px', 'margin-top: -2px']);
setStyle('[data-id=forward], [data-id=rewind], [data-id=repeat], [data-id=shuffle]', ['top: -8px']);
setStyle('[data-id=shuffle]', ['left: -8px']);
setStyle('[data-id=repeat]', ['left: 8px']);
setStyle('[data-id=show-miniplayer-dp]', ['color: #9e9e9e', 'position: absolute', 'top: auto', 'bottom: 0', 'right: 0', 'margin: 0'], false);
setStyle('#player paper-icon-button[data-id="show-miniplayer-dp"] iron-icon', ['width: 16px', 'height: 16px'], false);
setStyle('#current-track-prog-mini', ['position: absolute', 'top: 8px', 'left: 6px', 'font-size: 11px', 'display: block']);
setStyle('#end-track-prog-mini', ['position: absolute', 'top: 8px', 'right: 6px', 'font-size: 11px', 'display: block']);
setStyle('::shadow #mainContainer', ['overflow: hidden']);
setStyle('#embed-container', ['width: 0', 'overflow: hidden'], false);
setStyle('#mini-info', ['position: fixed', 'top: 0px', 'left: 0', 'width: 100%', 'height: 90px', 'overflow: hidden',
'background: -webkit-linear-gradient(top, rgba(45,45,45,0.85) 0%,rgba(9,9,9,0.41) 79%,rgba(0,0,0,0) 100%)', 'display: block',
'z-index: 9999999', 'transition: opacity 0.3s', 'transition-timing-function: ease-in-out', 'opacity: 0'
]);
setStyle('#mini-info span', ['color: #EEE', 'display: block', 'font-size: 20px', 'padding: 4px 12px', 'cursor: default']);
setStyle('#mini-info span:last-child', ['font-size: 16px', 'height: 18px', 'overflow: hidden']);
var newStyle = document.createElement("style");
newStyle.innerHTML = GLOBAL_STYLES;
document.body.appendChild(newStyle);
var info = document.createElement('div');
info.id = "mini-info";
info.setAttribute('style', 'display: none');
info.innerHTML = '<span></span><span></span>';
document.body.appendChild(info);
var newStyle = document.createElement("style");
newStyle.innerHTML = GLOBAL_STYLES;
document.body.appendChild(newStyle);
var info = document.createElement('div');
info.id = "mini-info";
info.setAttribute('style', 'display: none');
info.innerHTML = '<span></span><span></span>';
document.body.appendChild(info);
var art = document.createElement('img');
art.id = "mini-album";
art.src = "https://www.samuelattard.com/img/gpm_placeholder.jpg";
art.setAttribute('style', 'display: none');
var art = document.createElement('img');
art.id = "mini-album";
art.src = "https://www.samuelattard.com/img/gpm_placeholder.jpg";
art.setAttribute('style', 'display: none');
// If the album art load ever fails, use the placeholder
art.addEventListener('error', function (e) { e.target.src = "https://www.samuelattard.com/img/gpm_placeholder.jpg" });
art.addEventListener('mousedown', function (e) { e.preventDefault(); });
document.body.appendChild(art);
art.addEventListener('error', function (e) {
e.target.src = "https://www.samuelattard.com/img/gpm_placeholder.jpg";
});
art.addEventListener('mousedown', function (e) {
e.preventDefault();
});
document.body.appendChild(art);
var addTimeSpans = setInterval(function() {
var player = document.getElementById('player');
if (document.getElementById('material-player-left-wrapper')) {
var span = document.createElement('span');
span.id = "current-track-prog-mini";
span.setAttribute('style', 'display: none');
span.innerHTML = "0:00";
player.appendChild(span);
var span = document.createElement('span');
span.id = "end-track-prog-mini";
span.setAttribute('style', 'display: none');
span.innerHTML = "0:00";
player.appendChild(span);
var addTimeSpans = setInterval(function () {
var player = document.getElementById('player');
if (document.getElementById('material-player-left-wrapper')) {
span = document.createElement('span');
span.id = "current-track-prog-mini";
span.setAttribute('style', 'display: none');
span.innerHTML = "0:00";
player.appendChild(span);
var span = document.createElement('span');
span.id = "end-track-prog-mini";
span.setAttribute('style', 'display: none');
span.innerHTML = "0:00";
player.appendChild(span);
container = document.createElement('div');
container.innerHTML = '<paper-icon-button data-id="show-miniplayer-dp" icon="open-in-new" title="Show mini player" aria-label="Show mini player" role="button" tabindex="0" no-focus="" onclick="window.toggleMini(); this.blur(); return false;"></paper-icon-button>';
document.getElementById('player').appendChild(container);
clearInterval(addTimeSpans);
}
}, 10);
var container = document.createElement('div');
container.innerHTML = '<paper-icon-button data-id="show-miniplayer-dp" icon="open-in-new" title="Show mini player" aria-label="Show mini player" role="button" tabindex="0" no-focus="" onclick="window.toggleMini(); this.blur(); return false;"></paper-icon-button>';
document.getElementById('player').appendChild(container);
clearInterval(addTimeSpans);
}
}, 10);
var monitorTime = setInterval(function() {
var currentTime = document.getElementById('time_container_current');
var targetSpan = document.getElementById('current-track-prog-mini');
if (currentTime && targetSpan) {
if (targetSpan.innerHTML != currentTime.innerHTML) {
targetSpan.innerHTML = currentTime.innerHTML;
}
}
targetSpan = document.getElementById('end-track-prog-mini');
var maxTime = document.getElementById('time_container_duration');
if (targetSpan && maxTime) {
if (targetSpan.innerHTML != maxTime.innerHTML) {
targetSpan.innerHTML = maxTime.innerHTML;
}
}
}, 10);
var monitorTime = setInterval(function () {
var currentTime = document.getElementById('time_container_current');
var targetSpan = document.getElementById('current-track-prog-mini');
if (currentTime && targetSpan) {
if (targetSpan.innerHTML != currentTime.innerHTML) {
targetSpan.innerHTML = currentTime.innerHTML;
}
}
targetSpan = document.getElementById('end-track-prog-mini');
var maxTime = document.getElementById('time_container_duration');
if (targetSpan && maxTime) {
if (targetSpan.innerHTML != maxTime.innerHTML) {
targetSpan.innerHTML = maxTime.innerHTML;
}
}
}, 10);
window.addEventListener('song-change', function(e) {
document.getElementById('mini-album').src = e.detail.albumArt.replace('=s90', '=s300');
var infoSpans = document.getElementById('mini-info').getElementsByTagName('span');
infoSpans[0].innerHTML = e.detail.title;
infoSpans[1].innerHTML = e.detail.artist + " - " + e.detail.album;
});
window.addEventListener('song-change', function (e) {
document.getElementById('mini-album').src = e.detail.albumArt.replace('=s90', '=s300');
var infoSpans = document.getElementById('mini-info').getElementsByTagName('span');
infoSpans[0].innerHTML = e.detail.title;
infoSpans[1].innerHTML = e.detail.artist + " - " + e.detail.album;
});
window.miniState = false;
window.miniButton = true;
window.toggleMini = function () {
if (window.miniButton) {
if (window.miniState) {
window.goBig();
} else {
window.goMini();
}
window.miniState = !window.miniState;
window.miniButton = false;
}
};
window.miniState = false;
window.miniButton = true;
window.toggleMini = function () {
if (window.miniButton) {
if (window.miniState) {
window.goBig();
} else {
window.goMini();
}
window.miniState = !window.miniState;
window.miniButton = false;
}
};
// Scroll to change volume when in mini state
window.addEventListener('mousewheel', function (e) {
if (window.miniState) {
var slider = document.getElementById('material-vslider');
if (e.wheelDelta < 0) {
slider.decrement();
} else {
slider.increment();
}
}
});
window.addEventListener('mousewheel', function (e) {
if (window.miniState) {
var slider = document.getElementById('material-vslider');
if (e.wheelDelta < 0) {
slider.decrement();
} else {
slider.increment();
}
}
});
// Rely on the ready attribute because when the window is resized CEF does not check the hover state
document.body.addEventListener('mouseover', function () {
document.body.setAttribute('ready', 'ready');
});
window.goMini = function () {
document.body.removeAttribute('ready');
csharpinterface.goMini();
};
document.body.addEventListener('mouseover', function () {
document.body.setAttribute('ready', 'ready');
});
window.goMini = function () {
document.body.removeAttribute('ready');
csharpinterface.goMini();
};
window.goBig = function() {
csharpinterface.goBig();
};
window.goBig = function () {
csharpinterface.goBig();
};
document.addEventListener('mousedown', function (e) { if (window.miniState && e.clientY <= 210) { csharpinterface.dragStart(); e.preventDefault(); e.stopPropagation(); return false;}});
document.addEventListener('mousedown', function (e) {
if (window.miniState && e.clientY <= 210) {
csharpinterface.dragStart();
e.preventDefault();
e.stopPropagation();
return false;
}
});
});
Loading…
Cancel
Save