164 lines
4.1 KiB
Vue
164 lines
4.1 KiB
Vue
<template>
|
|
<div class="aplayer-lrc">
|
|
<div
|
|
class="aplayer-lrc-contents"
|
|
:style="transformStyle"
|
|
>
|
|
<p
|
|
v-for="(line, index) of lrcLines"
|
|
:key="index"
|
|
:class="{ 'aplayer-lrc-current': index === currentLineIndex }"
|
|
>
|
|
{{ line[1] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {parseLrc} from '../utils'
|
|
|
|
export default {
|
|
props: {
|
|
currentMusic: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
playStat: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
displayLrc: '',
|
|
currentLineIndex: 0,
|
|
}
|
|
},
|
|
computed: {
|
|
lrcLines () {
|
|
return parseLrc(this.displayLrc)
|
|
},
|
|
currentLine () {
|
|
if (this.currentLineIndex > this.lrcLines.length - 1) {
|
|
return null
|
|
}
|
|
return this.lrcLines[this.currentLineIndex]
|
|
},
|
|
transformStyle () {
|
|
// transform: translateY(0); -webkit-transform: translateY(0);
|
|
return {
|
|
transform: `translateY(${-this.currentLineIndex * 16}px)`,
|
|
webkitTransform: `translateY(${-this.currentLineIndex * 16}px)`,
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
applyLrc (lrc) {
|
|
if (/^https?:\/\//.test(lrc)) {
|
|
this.fetchLrc(lrc)
|
|
} else {
|
|
this.displayLrc = lrc
|
|
}
|
|
},
|
|
fetchLrc (src) {
|
|
fetch(src)
|
|
.then(response => response.text())
|
|
.then((lrc) => {
|
|
this.displayLrc = lrc
|
|
})
|
|
},
|
|
hideLrc () {
|
|
this.displayLrc = ''
|
|
},
|
|
},
|
|
watch: {
|
|
currentMusic: {
|
|
immediate: true,
|
|
handler (music) {
|
|
this.currentLineIndex = 0
|
|
if (music.lrc) {
|
|
this.applyLrc(music.lrc)
|
|
} else {
|
|
this.hideLrc()
|
|
}
|
|
}
|
|
},
|
|
'playStat.playedTime' (playedTime) {
|
|
for (let i = 0; i < this.lrcLines.length; i++) {
|
|
const line = this.lrcLines[i]
|
|
const nextLine = this.lrcLines[i + 1]
|
|
if (playedTime >= line[0] && (!nextLine || playedTime < nextLine[0])) {
|
|
this.currentLineIndex = i
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import "../less/variables";
|
|
|
|
.aplayer-lrc {
|
|
position: relative;
|
|
height: @lrc-height;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
margin-bottom: 7px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 10%;
|
|
content: ' ';
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
|
|
}
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 33%;
|
|
content: ' ';
|
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ccffffff', GradientType=0);
|
|
}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
color: #666;
|
|
line-height: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
transition: all 0.5s ease-out;
|
|
opacity: 0.4;
|
|
overflow: hidden;
|
|
|
|
&.aplayer-lrc-current {
|
|
opacity: 1;
|
|
overflow: visible;
|
|
height: initial;
|
|
}
|
|
}
|
|
|
|
.aplayer-lrc-contents {
|
|
width: 100%;
|
|
transition: all 0.5s ease-out;
|
|
user-select: text;
|
|
cursor: default;
|
|
}
|
|
}
|
|
</style> |