90 lines
No EOL
3.3 KiB
HTML
90 lines
No EOL
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lyrics</title>
|
|
<script type="text/javascript" src="Vibrant.js"></script>
|
|
<script type="text/javascript" src="../js/lyrics.js"></script>
|
|
<link rel="stylesheet" href="../css/lyricer.css">
|
|
<link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v4|SF+Pro+Icons,v1&display=swap">
|
|
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
|
|
</head>
|
|
<body style="margin: 0;">
|
|
<img style="" id="backgroundImage"></img>
|
|
<div style="width: 100%; height: 100%; opacity: 0.8; z-index: 1; background-color: rgba(0, 0, 0, 0.5); position: absolute;"></div>
|
|
<div id ='info' style="z-index: 2;">
|
|
<img id="albumart"></img>
|
|
<div id="title"></div>
|
|
<div id="details"></div>
|
|
</div>
|
|
|
|
<div id="lyricer">
|
|
</div>
|
|
<script type="text/javascript">
|
|
const { ipcRenderer } = require('electron');
|
|
|
|
function changeStylesheetRule(stylesheet, selector, property, value) {
|
|
selector = selector.toLowerCase();
|
|
property = property.toLowerCase();
|
|
value = value.toLowerCase();
|
|
|
|
for(var i = 0; i < stylesheet.cssRules.length; i++) {
|
|
var rule = stylesheet.cssRules[i];
|
|
if(rule.selectorText === selector) {
|
|
rule.style[property] = value;
|
|
return;
|
|
}
|
|
}
|
|
|
|
stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
|
|
}
|
|
var w = window.innerWidth;
|
|
var h = window.innerHeight;
|
|
document.getElementById("title").style.top = Math.floor(0.1*h + 0.40*w)+'px'
|
|
document.getElementById("details").style.top = Math.floor(0.1*h + 0.42*w)+'px'
|
|
var text = "";
|
|
var lrc = new Lyricer({focus:'start'});
|
|
lrc.setFocus('start');
|
|
ipcRenderer.on('truelyrics', function (event, lrcfile) {
|
|
if (lrc != null && lrcfile!= null && lrcfile.length > 0)
|
|
lrc.setLrc(lrcfile);
|
|
|
|
});
|
|
ipcRenderer.on('albumart', function (event, data) {
|
|
document.getElementById("albumart").setAttribute('src',`${data}`);
|
|
document.getElementById("backgroundImage").setAttribute('src',`${data}`);
|
|
document.getElementById("backgroundImage").onload = function() {
|
|
var vibrant = new Vibrant(this,128,3);
|
|
for (var swatch in swatches);
|
|
var swatches = vibrant.swatches();
|
|
if (swatches.hasOwnProperty(swatch) && swatches[swatch])
|
|
console.log(swatch, swatches[swatch].getHex());
|
|
var selectedswatch = (swatches['LightVibrant'] != null ) ? swatches['LightVibrant'] : swatches['Vibrant'];
|
|
changeStylesheetRule(document.styleSheets[0],'#lyricer ul li','color',selectedswatch.getHex());
|
|
}
|
|
|
|
|
|
});
|
|
ipcRenderer.on('updateMiniPlayerMetaData', function (event, track, artist, album) {
|
|
console.log('ugh');
|
|
var w = window.innerWidth;
|
|
var h = window.innerHeight;
|
|
document.getElementById("title").style.top = Math.floor(0.1*h + 0.40*w)+'px'
|
|
document.getElementById("details").style.top = Math.floor(0.1*h + 0.42*w)+'px'
|
|
document.getElementById("title").textContent = track;
|
|
document.getElementById("details").textContent = artist + " - " + album ;
|
|
});
|
|
|
|
ipcRenderer.on('ProgressTimeUpdate', function (event, data) {
|
|
if (data < 0){data = 0};
|
|
lrc.move(data);
|
|
});
|
|
|
|
lrc.setLrc(text);
|
|
window.addEventListener("lyricerclick", function(e){
|
|
ipcRenderer.send('ProgressTimeUpdateFromLyrics',e.detail.time);
|
|
console.log('clicked on ' + e.detail.time);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |