okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lyrics dots

Browse source
This commit is contained in:
vapormusic 2021-12-05 18:16:11 +07:00
parent 83ce79046e
commit 11611b334d
3 changed files with 88 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
resources/cider-ui-tests/index.html
View file

@ -608,12 +608,12 @@
</h3> </h3>
</template> </template>
<template v-else> <template v-else>
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime" :end="lyric.endTime"
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}"> v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
<div class="lyricWaiting" > <div class="lyricWaiting" >
<div></div> <div class='WaitingDot1'></div>
<div></div> <div class='WaitingDot2'></div>
<div></div> <div class='WaitingDot3'></div>
</div> </div>
</h3> </h3>
</template> </template>

73
resources/cider-ui-tests/index.js
View file

@ -158,6 +158,65 @@ const app = new Vue({
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime) self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
self.lyriccurrenttime = app.mk.currentPlaybackTime; self.lyriccurrenttime = app.mk.currentPlaybackTime;
if (self.lyricon){
let currentLine = document.querySelector(`.lyric-line.active`)
if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0){
var duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
var u = ( self.lyriccurrenttime - currentLine.getAttribute("start") ) / duration;
if (u < 0.25 && !currentLine.classList.contains('mode1')){
console.log('mode1');
try{
currentLine.classList.add('mode1');
currentLine.classList.remove('mode3');
currentLine.classList.remove('mode2');
} catch(e){}
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 0.25;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
} else if (u >= 0.25 && u < 0.5 && !currentLine.classList.contains('mode2')){
console.log('mode2');
try{
currentLine.classList.add('mode2');
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode3');
}
catch(e){}
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot3')[0].style.opacity = 0.25;
} else if (u >= 0.5 && u < 0.75 && !currentLine.classList.contains('mode3')){
console.log('mode3');
try{
currentLine.classList.add('mode3');
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode2');
} catch(e){}
currentLine.getElementsByClassName('WaitingDot3')[0].style.animation = `dotOpacity ${0.25 * duration}s cubic-bezier(0.42, 0, 0.58, 1) forwards`;
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
} else if (u >= 0.75 && currentLine.classList.contains('mode3')){
console.log('mode4');
try{
currentLine.classList.remove('mode1');
currentLine.classList.remove('mode2');
currentLine.classList.remove('mode3');}
catch(e){}
currentLine.getElementsByClassName('WaitingDot1')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot2')[0].style.animation = ``;
currentLine.getElementsByClassName('WaitingDot1')[0].style.opacity = 1;
currentLine.getElementsByClassName('WaitingDot2')[0].style.opacity = 1;
}
}}
}) })
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
@ -344,9 +403,21 @@ const app = new Vue({
let preLrc = []; let preLrc = [];
let xml = this.stringToXml(this.lyricsMediaItem); let xml = this.stringToXml(this.lyricsMediaItem);
let lyricsLines = xml.getElementsByTagName('p'); let lyricsLines = xml.getElementsByTagName('p');
let endTimes = [];
endTimes.push(0);
for (element of lyricsLines){ for (element of lyricsLines){
preLrc.push({startTime: this.toMS(element.getAttribute('begin')),endTime: this.toMS(element.getAttribute('end')), line: element.textContent}); start = this.toMS(element.getAttribute('begin'))
end = this.toMS(element.getAttribute('end'))
if (start - endTimes[endTimes.length - 1] > 5 && endTimes[endTimes.length - 1] != 0 ){
preLrc.push({startTime: endTimes[endTimes.length - 1],endTime: start, line: "lrcInstrumental"});
} }
preLrc.push({startTime: start ,endTime: end, line: element.textContent});
endTimes.push(end);
}
// first line dot
if (preLrc.length > 0)
preLrc.unshift({startTime: 0,endTime: preLrc[0].startTime, line: "lrcInstrumental"});
this.lyrics = preLrc; this.lyrics = preLrc;
}, },
parseLyrics() { parseLyrics() {

13
resources/cider-ui-tests/style.css
View file

@ -1266,7 +1266,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
@keyframes lyricWaitingLine { @keyframes lyricWaitingLine {
0% { 0% {
opacity: 0; opacity: 0.25;
transform: scale(0.85); transform: scale(0.85);
} }
50% { 50% {
@ -1274,11 +1274,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0.25;
transform: scale(0.85); transform: scale(0.85);
} }
} }
@keyframes dotOpacity {
0% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
.lyric-line2:before { .lyric-line2:before {
background: var(--keyColor); background: var(--keyColor);