lyrics ( semi-func)
This commit is contained in:
vapormusic
parent
d8078e0299
commit
7179ed6361
3 changed files with 190 additions and 6 deletions
|
|
@ -99,7 +99,7 @@
|
|||
<button class="playback-button--small queue"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics"></button>
|
||||
<button class="playback-button--small lyrics" @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="window-controls">
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
@click="chrome.menuOpened = !chrome.menuOpened">
|
||||
<template v-if="chrome.userinfo.attributes">
|
||||
<div class="sidebar-user-icon"
|
||||
style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
|
||||
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -319,7 +319,7 @@
|
|||
</transition>
|
||||
</div>
|
||||
<div class="app-drawer" v-if="drawertest">
|
||||
|
||||
<lyrics-view v-if="drawertest && lyricon"></lyrics-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -470,7 +470,7 @@
|
|||
</template>
|
||||
</script>
|
||||
|
||||
<!-- Horizontal MediaItem Scroller (SP?) -->
|
||||
<!-- Horizontal MediaItem Scroller (SP : Special) -->
|
||||
|
||||
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
|
||||
<template>
|
||||
|
|
@ -598,7 +598,31 @@
|
|||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="lyrics-view">
|
||||
<div class="md-body lyric-body">
|
||||
<template v-if="app.lyrics">
|
||||
<template v-for="lyric in app.lyrics" v-if="lyric.line != 'lrcInstrumental'">
|
||||
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
|
||||
:class="app.getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
{{ lyric.line }}
|
||||
</h3>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
|
||||
:class="app.getLyricClass(lyric.startTime, lyric.endTime)">
|
||||
<div class="lyricWaiting">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</h3>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No Lyrics Available
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
|
||||
<script src="index.js?v=1"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,11 @@ Vue.component('mediaitem-list-item', {
|
|||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('lyrics-view', {
|
||||
template: '#lyrics-view',
|
||||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
|
|
@ -121,6 +126,14 @@ const app = new Vue({
|
|||
listing: [],
|
||||
details: {}
|
||||
},
|
||||
lyricon: false,
|
||||
lyrics: [],
|
||||
lyricsMediaItem: {},
|
||||
lyricsDebug: {
|
||||
current: 0,
|
||||
start: 0,
|
||||
end: 0
|
||||
},
|
||||
chrome: {
|
||||
hideUserInfo: false,
|
||||
artworkReady: false,
|
||||
|
|
@ -146,6 +159,7 @@ const app = new Vue({
|
|||
|
||||
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
|
||||
self.chrome.artworkReady = false
|
||||
app.loadLyrics()
|
||||
})
|
||||
|
||||
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
|
||||
|
|
@ -299,6 +313,112 @@ const app = new Vue({
|
|||
showSearch() {
|
||||
this.page = "search"
|
||||
},
|
||||
loadLyrics() {
|
||||
const songID = (MusicKit.getInstance().nowPlayingItem != null) ? MusicKit.getInstance().nowPlayingItem["_songId"] ?? -1 : -1;
|
||||
if (songID != -1){
|
||||
MusicKit.getInstance().api.lyric(songID)
|
||||
.then((response) => {
|
||||
this.lyricsMediaItem = response.attributes["ttml"]
|
||||
this.parseTTML()
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
toMS(str) {
|
||||
var rawTime = str.match(/(\d+:)?(\d+:)?(\d+)(\.\d+)?/);
|
||||
hours = (rawTime[2] != null) ? (rawTime[1].replace(":", "")) : 0;
|
||||
minutes = (rawTime[2] != null) ? (hours * 60 + rawTime[2].replace(":", "") * 1 ) : ((rawTime[1] != null) ? rawTime[1].replace(":", "") : 0);
|
||||
seconds = (rawTime[3] != null) ? (rawTime[3]) : 0;
|
||||
milliseconds = (rawTime[4] != null) ? (rawTime[4].replace(".", "") ) : 0
|
||||
return parseFloat(`${minutes * 60 + seconds * 1 }.${milliseconds * 1}`) ;
|
||||
},
|
||||
parseTTML(){
|
||||
this.lyrics = [];
|
||||
let preLrc = [];
|
||||
let xml = this.stringToXml(this.lyricsMediaItem);
|
||||
let lyricsLines = xml.getElementsByTagName('p');
|
||||
for (element of lyricsLines){
|
||||
preLrc.push({startTime: this.toMS(element.getAttribute('begin')),endTime: this.toMS(element.getAttribute('end')), line: element.textContent});
|
||||
}
|
||||
this.lyrics = preLrc;
|
||||
},
|
||||
parseLyrics() {
|
||||
var xml = this.stringToXml(this.lyricsMediaItem)
|
||||
var json = xmlToJson(xml);
|
||||
this.lyrics = json
|
||||
},
|
||||
stringToXml(st) {
|
||||
// string to xml
|
||||
var xml = (new DOMParser()).parseFromString(st, "text/xml");
|
||||
return xml;
|
||||
|
||||
},
|
||||
getCurrentTime() {
|
||||
return parseFloat(this.hmsToSecondsOnly(this.parseTime(this.mk.nowPlayingItem.attributes.durationInMillis - app.mk.currentPlaybackTimeRemaining *1000)));
|
||||
},
|
||||
getLyricClass(start, end) {
|
||||
let currentTime = app.getCurrentTime();
|
||||
// check if currenttime is between start and end
|
||||
if (currentTime >= start && currentTime <= end) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".lyric-line.active")) {
|
||||
document.querySelector(".lyric-line.active").scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
})
|
||||
}
|
||||
}, 200)
|
||||
return "active"
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
seekTo(time){
|
||||
this.mk.seekToTime(time);
|
||||
},
|
||||
parseTime(value) {
|
||||
var minutes = Math.floor(value / 60000);
|
||||
var seconds = ((value % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
parseTimeDecimal(value) {
|
||||
var minutes = Math.floor(value / 60000);
|
||||
var seconds = ((value % 60000) / 1000).toFixed(0);
|
||||
return minutes + "." + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
hmsToSecondsOnly(str) {
|
||||
var p = str.split(':'),
|
||||
s = 0,
|
||||
m = 1;
|
||||
|
||||
while (p.length > 0) {
|
||||
s += m * parseInt(p.pop(), 10);
|
||||
m *= 60;
|
||||
}
|
||||
|
||||
return s;
|
||||
},
|
||||
getLyricBGStyle(start, end) {
|
||||
var currentTime = this.getCurrentTime();
|
||||
var duration = this.mk.nowPlayingItem.attributes.durationInMillis
|
||||
var start2 = this.hmsToSecondsOnly(start)
|
||||
var end2 = this.hmsToSecondsOnly(end)
|
||||
var currentProgress = ((100 * (currentTime)) / (end2))
|
||||
// check if currenttime is between start and end
|
||||
this.player.lyricsDebug.start = start2
|
||||
this.player.lyricsDebug.end = end2
|
||||
this.player.lyricsDebug.current = currentTime
|
||||
if (currentTime >= start2 && currentTime <= end2) {
|
||||
return {
|
||||
"--bgSpeed": `${(end2 - start2)}s`
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
playMediaItemById(id, kind, isLibrary, raurl = "") {
|
||||
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
||||
console.log(id, truekind, isLibrary)
|
||||
|
|
@ -452,4 +572,43 @@ document.addEventListener('musickitloaded', function () {
|
|||
}, 1000)
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
function xmlToJson(xml) {
|
||||
|
||||
// Create the return object
|
||||
var obj = {};
|
||||
|
||||
if (xml.nodeType == 1) { // element
|
||||
// do attributes
|
||||
if (xml.attributes.length > 0) {
|
||||
obj["@attributes"] = {};
|
||||
for (var j = 0; j < xml.attributes.length; j++) {
|
||||
var attribute = xml.attributes.item(j);
|
||||
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
|
||||
}
|
||||
}
|
||||
} else if (xml.nodeType == 3) { // text
|
||||
obj = xml.nodeValue;
|
||||
}
|
||||
|
||||
// do children
|
||||
if (xml.hasChildNodes()) {
|
||||
for (var i = 0; i < xml.childNodes.length; i++) {
|
||||
var item = xml.childNodes.item(i);
|
||||
var nodeName = item.nodeName;
|
||||
if (typeof (obj[nodeName]) == "undefined") {
|
||||
obj[nodeName] = xmlToJson(item);
|
||||
} else {
|
||||
if (typeof (obj[nodeName].push) == "undefined") {
|
||||
var old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(xmlToJson(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(obj);
|
||||
return obj;
|
||||
};
|
||||
|
|
@ -358,6 +358,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background: transparent;
|
||||
color: white;
|
||||
transition: transform .1s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-sidebar-item:hover {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue