APlayer内部组件ts改造
This commit is contained in:
parent
34b92fbd1a
commit
b49bebf654
GPG Key ID:
691E688C160D3188
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
@ -33,4 +33,10 @@ export interface MusicPlayerItem {
|
||||
src: string
|
||||
pic: string
|
||||
lrc?: string
|
||||
}
|
||||
|
||||
export interface StatType {
|
||||
duration: number,
|
||||
loadedTime: number,
|
||||
playedTime: number,
|
||||
}
|
||||
@ -2,7 +2,6 @@
|
||||
<div
|
||||
class="aplayer-bar-wrap"
|
||||
@mousedown="onThumbMouseDown"
|
||||
@touchstart="onThumbTouchStart"
|
||||
ref="barWrap"
|
||||
>
|
||||
<div class="aplayer-bar">
|
||||
@ -21,10 +20,8 @@
|
||||
class="aplayer-thumb"
|
||||
:style="{borderColor: theme, backgroundColor: thumbHovered ? theme : '#fff'}"
|
||||
>
|
||||
<span class="aplayer-loading-icon"
|
||||
:style="{backgroundColor: theme }"
|
||||
>
|
||||
<icon type="loading"/>
|
||||
<span class="aplayer-loading-icon" :style="{backgroundColor: theme }">
|
||||
<player-icon type="loading"/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -32,169 +29,125 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getElementViewLeft} from '../utils'
|
||||
import Icon from './aplayer-icon.vue'
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { getElementViewLeft } from '../utils'
|
||||
import PlayerIcon from './aplayer-icon.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
props: ['loadProgress', 'playProgress', 'theme'],
|
||||
data () {
|
||||
return {
|
||||
thumbHovered: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onThumbMouseDown (e) {
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
defineProps<{
|
||||
loadProgress: number,
|
||||
playProgress: number,
|
||||
theme?: string
|
||||
}>()
|
||||
|
||||
this.$emit('dragbegin', percentage)
|
||||
document.addEventListener('mousemove', this.onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', this.onDocumentMouseUp)
|
||||
},
|
||||
onDocumentMouseMove (e) {
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
const emit = defineEmits(['dragbegin', 'dragging', 'dragend'])
|
||||
|
||||
this.$emit('dragging', percentage)
|
||||
},
|
||||
onDocumentMouseUp (e) {
|
||||
document.removeEventListener('mouseup', this.onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', this.onDocumentMouseMove)
|
||||
const thumbHovered = ref(false)
|
||||
const barWrap = ref<unknown>(null)
|
||||
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
this.$emit('dragend', percentage)
|
||||
},
|
||||
onThumbTouchStart (e) {
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
const onThumbMouseDown = (e: MouseEvent) => {
|
||||
const barWidth = (<HTMLElement>barWrap.value).clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
emit('dragbegin', percentage)
|
||||
document.addEventListener('mousemove', onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', onDocumentMouseUp)
|
||||
}
|
||||
|
||||
this.$emit('dragbegin', percentage)
|
||||
document.addEventListener('touchmove', this.onDocumentTouchMove)
|
||||
document.addEventListener('touchend', this.onDocumentTouchEnd)
|
||||
},
|
||||
onDocumentTouchMove (e) {
|
||||
const touch = e.changedTouches[0]
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (touch.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
const onDocumentMouseMove = (e: MouseEvent) => {
|
||||
const barWidth = (<HTMLElement>barWrap.value).clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
emit('dragging', percentage)
|
||||
}
|
||||
|
||||
this.$emit('dragging', percentage)
|
||||
},
|
||||
onDocumentTouchEnd (e) {
|
||||
document.removeEventListener('touchend', this.onDocumentTouchEnd)
|
||||
document.removeEventListener('touchmove', this.onDocumentTouchMove)
|
||||
|
||||
const touch = e.changedTouches[0]
|
||||
const barWidth = this.$refs.barWrap.clientWidth
|
||||
let percentage = (touch.clientX - getElementViewLeft(this.$refs.barWrap)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
this.$emit('dragend', percentage)
|
||||
},
|
||||
},
|
||||
}
|
||||
const onDocumentMouseUp = (e: MouseEvent) => {
|
||||
document.removeEventListener('mouseup', onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', onDocumentMouseMove)
|
||||
const barWidth = (<HTMLElement>barWrap.value).clientWidth
|
||||
let percentage = (e.clientX - getElementViewLeft(<HTMLElement>barWrap.value)) / barWidth
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
emit('dragend', percentage)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.aplayer-bar-wrap {
|
||||
margin: 0 0 0 5px;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
|
||||
.aplayer-bar {
|
||||
position: relative;
|
||||
.aplayer-bar-wrap {
|
||||
margin: 0 0 0 5px;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
.aplayer-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #cdcdcd;
|
||||
.aplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #aaa;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #cdcdcd;
|
||||
|
||||
.aplayer-loaded {
|
||||
transition: all 0.5s ease;
|
||||
will-change: width;
|
||||
}
|
||||
.aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
transition: background-color .3s;
|
||||
will-change: width;
|
||||
.aplayer-thumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #aaa;
|
||||
height: 2px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
will-change: width;
|
||||
}
|
||||
|
||||
.aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
transition: background-color .3s;
|
||||
will-change: width;
|
||||
|
||||
.aplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -5px;
|
||||
margin-right: -10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid;
|
||||
transform: scale(.8);
|
||||
will-change: transform;
|
||||
transition: transform 300ms, background-color .3s, border-color .3s;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
.aplayer-loading-icon {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.icon-svg {
|
||||
position: absolute;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
right: 5px;
|
||||
margin-top: -5px;
|
||||
margin-right: -10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid;
|
||||
transform: scale(.8);
|
||||
will-change: transform;
|
||||
transition: transform 300ms, background-color .3s, border-color .3s;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
overflow: hidden;
|
||||
.aplayer-loading-icon {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.icon-svg {
|
||||
position: absolute;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-loading {
|
||||
.aplayer-bar-wrap .aplayer-bar .aplayer-thumb .aplayer-loading-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.aplayer-loading {
|
||||
.aplayer-bar-wrap .aplayer-bar .aplayer-thumb .aplayer-loading-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
.aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,106 +23,95 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
import {getElementViewTop} from '../utils'
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
import {getElementViewTop} from '../utils'
|
||||
|
||||
const barHeight = 40
|
||||
const props = defineProps<{
|
||||
volume: number,
|
||||
muted: boolean,
|
||||
theme: string
|
||||
}>()
|
||||
const emit = defineEmits(['setvolume'])
|
||||
const barHeight = 40
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconButton,
|
||||
},
|
||||
props: ['volume', 'muted', 'theme'],
|
||||
computed: {
|
||||
volumeIcon () {
|
||||
if (this.muted || this.volume <= 0) return 'volume_off'
|
||||
if (this.volume >= 1) return 'volume_up'
|
||||
return 'volume_down'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
adjustVolume (e) {
|
||||
let percentage = (barHeight - e.clientY + getElementViewTop(this.$refs.bar)) / barHeight
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
this.$emit('setvolume', percentage)
|
||||
},
|
||||
onBarMouseDown () {
|
||||
document.addEventListener('mousemove', this.onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', this.onDocumentMouseUp)
|
||||
},
|
||||
onDocumentMouseMove (e) {
|
||||
let percentage = (barHeight - e.clientY + getElementViewTop(this.$refs.bar)) / barHeight
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
this.$emit('setvolume', percentage)
|
||||
},
|
||||
onDocumentMouseUp (e) {
|
||||
document.removeEventListener('mouseup', this.onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', this.onDocumentMouseMove)
|
||||
const volumeIcon = computed(() => {
|
||||
if (props.muted || props.volume <= 0) return 'volume_off'
|
||||
if (props.volume >= 1) return 'volume_up'
|
||||
return 'volume_down'
|
||||
})
|
||||
|
||||
let percentage = (barHeight - e.clientY + getElementViewTop(this.$refs.bar)) / barHeight
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
this.$emit('setvolume', percentage)
|
||||
}
|
||||
}
|
||||
}
|
||||
const bar = ref<unknown>(null)
|
||||
|
||||
const onBarMouseDown = () => {
|
||||
document.addEventListener('mousemove', onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', onDocumentMouseUp)
|
||||
}
|
||||
const onDocumentMouseMove = (e: MouseEvent) => {
|
||||
let percentage = (barHeight - e.clientY + getElementViewTop(<HTMLElement>bar.value)) / barHeight
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
emit('setvolume', percentage)
|
||||
}
|
||||
const onDocumentMouseUp = (e: MouseEvent) => {
|
||||
document.removeEventListener('mouseup', onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', onDocumentMouseMove)
|
||||
|
||||
let percentage = (barHeight - e.clientY + getElementViewTop(<HTMLElement>bar.value)) / barHeight
|
||||
percentage = percentage > 0 ? percentage : 0
|
||||
percentage = percentage < 1 ? percentage : 1
|
||||
emit('setvolume', percentage)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.aplayer-volume-wrap {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
|
||||
&:hover .aplayer-volume-bar-wrap {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer-volume-bar-wrap {
|
||||
display: none;
|
||||
.aplayer-volume-wrap {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
&:hover .aplayer-volume-bar-wrap {
|
||||
display: block;
|
||||
}
|
||||
.aplayer-volume-bar-wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
transition: all .2s ease;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 62px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.07), 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.aplayer-volume-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 11px;
|
||||
width: 5px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
transition: all .2s ease;
|
||||
background: #aaa;
|
||||
border-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 62px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.07), 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.aplayer-volume-bar {
|
||||
.aplayer-volume {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 11px;
|
||||
width: 5px;
|
||||
height: 40px;
|
||||
background: #aaa;
|
||||
border-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.aplayer-volume {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: height 0.1s ease, background-color .3s;
|
||||
will-change: height;
|
||||
}
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: height 0.1s ease, background-color .3s;
|
||||
will-change: height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -14,12 +14,12 @@
|
||||
class="aplayer-dtime">{{secondToTime(stat.duration)}}</span>
|
||||
</div>
|
||||
<volume
|
||||
v-if="!$parent.isMobile"
|
||||
v-if="!isMobile"
|
||||
:volume="volume"
|
||||
:theme="theme"
|
||||
:muted="muted"
|
||||
@togglemute="$emit('togglemute')"
|
||||
@setvolume="v => $emit('setvolume', v)"
|
||||
@setvolume="(v: number) => $emit('setvolume', v)"
|
||||
/>
|
||||
<icon-button
|
||||
class="aplayer-icon-mode"
|
||||
@ -36,112 +36,94 @@
|
||||
<icon-button
|
||||
class="aplayer-icon-menu"
|
||||
icon="menu"
|
||||
:class="{ 'inactive': !$parent.showList }"
|
||||
:class="{ 'inactive': !showList }"
|
||||
@click="$emit('togglelist')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
import VProgress from './aplayer-controller-progress.vue'
|
||||
import Volume from './aplayer-controller-volume.vue'
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
import VProgress from './aplayer-controller-progress.vue'
|
||||
import Volume from './aplayer-controller-volume.vue'
|
||||
import { StatType } from '@/model/api/music'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconButton,
|
||||
VProgress,
|
||||
Volume,
|
||||
},
|
||||
props: ['shuffle', 'repeat', 'stat', 'theme', 'volume', 'muted'],
|
||||
computed: {
|
||||
loadProgress () {
|
||||
if (this.stat.duration === 0) return 0
|
||||
return this.stat.loadedTime / this.stat.duration
|
||||
},
|
||||
playProgress () {
|
||||
if (this.stat.duration === 0) return 0
|
||||
return this.stat.playedTime / this.stat.duration
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
secondToTime (second) {
|
||||
if (isNaN(second)) {
|
||||
return '00:00'
|
||||
}
|
||||
const pad0 = (num) => {
|
||||
return num < 10 ? '0' + num : '' + num
|
||||
}
|
||||
const props = defineProps<{
|
||||
shuffle: boolean,
|
||||
repeat: string,
|
||||
stat: StatType,
|
||||
theme: string
|
||||
volume: number,
|
||||
muted: boolean,
|
||||
showList: boolean,
|
||||
isMobile: boolean
|
||||
}>()
|
||||
const loadProgress = computed(() => {
|
||||
if (props.stat.duration === 0) return 0
|
||||
return props.stat.loadedTime / props.stat.duration
|
||||
})
|
||||
const playProgress = computed(() => {
|
||||
if (props.stat.duration === 0) return 0
|
||||
return props.stat.playedTime / props.stat.duration
|
||||
})
|
||||
|
||||
const min = Math.trunc(second / 60)
|
||||
const sec = Math.trunc(second - min * 60)
|
||||
const hours = Math.trunc(min / 60)
|
||||
const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
|
||||
return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
|
||||
},
|
||||
},
|
||||
const secondToTime = (second: number) => {
|
||||
if (isNaN(second)) {
|
||||
return '00:00'
|
||||
}
|
||||
const pad0 = (num: number) => {
|
||||
return num < 10 ? '0' + num : '' + num
|
||||
}
|
||||
|
||||
const min = Math.trunc(second / 60)
|
||||
const sec = Math.trunc(second - min * 60)
|
||||
const hours = Math.trunc(min / 60)
|
||||
const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
|
||||
return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.aplayer-controller {
|
||||
.aplayer-controller {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.aplayer-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.aplayer-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 17px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
padding-left: 7px;
|
||||
|
||||
.aplayer-volume-wrap {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
height: 17px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
padding-left: 7px;
|
||||
.aplayer-volume-wrap {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.aplayer-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-left: 4px;
|
||||
&.inactive {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.aplayer-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-left: 4px;
|
||||
|
||||
&.inactive {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.aplayer-fill {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.aplayer-fill {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
&.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
.aplayer-volume-wrap + .aplayer-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
.aplayer-volume-wrap + .aplayer-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
&.aplayer-time-narrow {
|
||||
.aplayer-icon-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.aplayer-time-narrow {
|
||||
.aplayer-icon-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -2,26 +2,23 @@
|
||||
<img class="icon-svg" :src="svg" :style="style" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const requireAssets = require.context('../assets', false, /\.svg$/)
|
||||
const SVGs = requireAssets.keys().reduce((svgs, path) => {
|
||||
const svgFile = requireAssets(path)
|
||||
svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = svgFile
|
||||
return svgs
|
||||
}, {})
|
||||
export default {
|
||||
props: ['type'],
|
||||
computed: {
|
||||
svg () {
|
||||
return SVGs[this.type] || {}
|
||||
},
|
||||
style () {
|
||||
if (this.type === 'next') {
|
||||
return {
|
||||
transform: 'rotate(180deg)',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
const props = defineProps<{type: string}>()
|
||||
const requireAssets = require.context('../assets', false, /\.svg$/)
|
||||
const SVGs = requireAssets.keys().reduce((svgs: {[propName:string]: string}, path: string) => {
|
||||
const svgFile = requireAssets(path)
|
||||
const fileNameMatch = path.match(/^.*\/(.+?)\.svg$/)
|
||||
if (fileNameMatch) {
|
||||
svgs[fileNameMatch[1]] = svgFile
|
||||
}
|
||||
return svgs
|
||||
}, {})
|
||||
|
||||
const svg = computed(() => SVGs[props.type])
|
||||
const style = computed(() => {
|
||||
if (props.type === 'next') {
|
||||
return { transform: 'rotate(180deg)' }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -3,43 +3,34 @@
|
||||
type="button"
|
||||
class="aplayer-icon"
|
||||
>
|
||||
<icon :type="icon"/>
|
||||
<player-icon :type="icon"/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from './aplayer-icon.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: ['icon'],
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
import PlayerIcon from './aplayer-icon.vue'
|
||||
defineProps<{icon: string}>()
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.aplayer-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aplayer-fill {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.aplayer-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.aplayer-fill {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,10 +6,7 @@
|
||||
ref="list"
|
||||
v-show="show"
|
||||
>
|
||||
<ol
|
||||
ref="ol"
|
||||
:style="listHeightStyle"
|
||||
>
|
||||
<ol ref="ol" :style="listHeightStyle">
|
||||
<li
|
||||
v-for="(aMusic, index) of musicList"
|
||||
:key="index"
|
||||
@ -19,148 +16,120 @@
|
||||
<span class="aplayer-list-cur" :style="{background: theme}"></span>
|
||||
<span class="aplayer-list-index">{{ index + 1}}</span>
|
||||
<span class="aplayer-list-title">{{ aMusic.title || 'Untitled' }}</span>
|
||||
<span class="aplayer-list-author">{{ aMusic.artist || aMusic.author || 'Unknown' }}</span>
|
||||
<span class="aplayer-list-author">{{ aMusic.artist || 'Unknown' }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
currentMusic: Object,
|
||||
musicList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
playIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
theme: String,
|
||||
listMaxHeight: String,
|
||||
},
|
||||
computed: {
|
||||
listHeightStyle () {
|
||||
return {
|
||||
height: `${33 * this.musicList.length - 1}px`,
|
||||
maxHeight: this.listMaxHeight || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { MusicPlayerItem } from '@/model/api/music'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean,
|
||||
currentMusic: MusicPlayerItem,
|
||||
musicList: MusicPlayerItem[],
|
||||
theme?: string,
|
||||
listMaxHeight?: string
|
||||
}>()
|
||||
const listHeightStyle = computed(() => {
|
||||
return {
|
||||
height: `${33 * props.musicList.length - 1}px`,
|
||||
maxHeight: props.listMaxHeight || ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.aplayer-list {
|
||||
overflow: hidden;
|
||||
|
||||
&.slide-v-enter-active,
|
||||
&.slide-v-leave-active {
|
||||
transition: height 500ms ease;
|
||||
will-change: height;
|
||||
.aplayer-list {
|
||||
overflow: hidden;
|
||||
&.slide-v-enter-active,
|
||||
&.slide-v-leave-active {
|
||||
transition: height 500ms ease;
|
||||
will-change: height;
|
||||
}
|
||||
&.slide-v-enter,
|
||||
&.slide-v-leave-to {
|
||||
height: 0 !important;
|
||||
}
|
||||
ol {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&.slide-v-enter,
|
||||
&.slide-v-leave-to {
|
||||
height: 0 !important;
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: #eee;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
li.aplayer-list-light:not(:hover) {
|
||||
background-color: inherit;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
&:not(:hover) {
|
||||
li.aplayer-list-light {
|
||||
transition: background-color .6s ease;
|
||||
}
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
li.aplayer-list-light:not(:hover) {
|
||||
background-color: inherit;
|
||||
transition: inherit;
|
||||
}
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
li.aplayer-list-light {
|
||||
transition: background-color .6s ease;
|
||||
}
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
&.aplayer-list-light {
|
||||
background: #efefef;
|
||||
|
||||
.aplayer-list-cur {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.aplayer-list-light {
|
||||
background: #efefef;
|
||||
.aplayer-list-cur {
|
||||
display: none;
|
||||
width: 3px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
transition: background-color .3s;
|
||||
}
|
||||
.aplayer-list-index {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.aplayer-list-title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.aplayer-list-author {
|
||||
flex-shrink: 0;
|
||||
color: #666;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.aplayer-list-cur {
|
||||
display: none;
|
||||
width: 3px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
transition: background-color .3s;
|
||||
}
|
||||
.aplayer-list-index {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.aplayer-list-title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.aplayer-list-author {
|
||||
flex-shrink: 0;
|
||||
color: #666;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -15,150 +15,114 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {parseLrc} from '../utils'
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { parseLrc } from '../utils'
|
||||
import { MusicPlayerItem, StatType } from '@/model/api/music'
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
const props = defineProps<{
|
||||
currentMusic: MusicPlayerItem,
|
||||
playStat: StatType
|
||||
}>()
|
||||
|
||||
const displayLrc = ref('')
|
||||
const currentLineIndex = ref(0)
|
||||
|
||||
const lrcLines = computed(() => parseLrc(displayLrc.value))
|
||||
|
||||
const transformStyle = computed(() => {
|
||||
return {
|
||||
transform: `translateY(${-currentLineIndex.value * 16}px)`,
|
||||
webkitTransform: `translateY(${-currentLineIndex.value * 16}px)`,
|
||||
}
|
||||
})
|
||||
|
||||
const applyLrc = (lrc: string) => {
|
||||
if (/^https?:\/\//.test(lrc)) {
|
||||
fetch(lrc)
|
||||
.then(response => response.text())
|
||||
.then((lrc) => displayLrc.value = lrc)
|
||||
} else {
|
||||
displayLrc.value = lrc
|
||||
}
|
||||
}
|
||||
|
||||
watch(props.currentMusic, (music: MusicPlayerItem) => {
|
||||
currentLineIndex.value = 0
|
||||
if (music.lrc) {
|
||||
applyLrc(music.lrc)
|
||||
} else {
|
||||
displayLrc.value = ''
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(() => props.playStat.playedTime, (playedTime: number) => {
|
||||
for (let i = 0; i < lrcLines.value.length; i++) {
|
||||
const line = lrcLines.value[i]
|
||||
const nextLine = lrcLines.value[i + 1]
|
||||
if (playedTime >= line[0] && (!nextLine || playedTime < nextLine[0])) {
|
||||
currentLineIndex.value = i
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "../less/variables";
|
||||
|
||||
.aplayer-lrc {
|
||||
position: relative;
|
||||
height: @lrc-height;
|
||||
text-align: center;
|
||||
@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;
|
||||
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;
|
||||
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>
|
||||
@ -13,139 +13,121 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import IconButton from './aplayer-iconbutton.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconButton,
|
||||
},
|
||||
props: {
|
||||
pic: String,
|
||||
theme: String,
|
||||
playing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
enableDrag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
hasMovedSinceMouseDown: false,
|
||||
dragStartX: 0,
|
||||
dragStartY: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPicStyleObj () {
|
||||
if (!this.pic) return {}
|
||||
return {
|
||||
backgroundImage: `url(${this.pic})`,
|
||||
backgroundColor: this.theme
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onDragBegin (e) {
|
||||
if (this.enableDrag) {
|
||||
this.hasMovedSinceMouseDown = false
|
||||
this.$emit('dragbegin')
|
||||
this.dragStartX = e.clientX
|
||||
this.dragStartY = e.clientY
|
||||
document.addEventListener('mousemove', this.onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', this.onDocumentMouseUp)
|
||||
}
|
||||
},
|
||||
onDocumentMouseMove (e) {
|
||||
this.hasMovedSinceMouseDown = true
|
||||
this.$emit('dragging', {offsetLeft: e.clientX - this.dragStartX, offsetTop: e.clientY - this.dragStartY})
|
||||
},
|
||||
onDocumentMouseUp (e) {
|
||||
document.removeEventListener('mouseup', this.onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', this.onDocumentMouseMove)
|
||||
const props = withDefaults(defineProps<{
|
||||
pic?: string,
|
||||
theme?: string,
|
||||
playing: boolean
|
||||
enableDrag: boolean
|
||||
}>(), {
|
||||
playing: false,
|
||||
enableDrag: false
|
||||
})
|
||||
|
||||
this.$emit('dragend')
|
||||
},
|
||||
onClick () {
|
||||
if (!this.hasMovedSinceMouseDown) {
|
||||
this.$emit('toggleplay')
|
||||
}
|
||||
}
|
||||
}
|
||||
const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay'])
|
||||
|
||||
const hasMovedSinceMouseDown = ref(false)
|
||||
const dragStartX = ref(0)
|
||||
const dragStartY = ref(0)
|
||||
|
||||
const currentPicStyleObj = computed(() => {
|
||||
if (!props.pic) return {}
|
||||
return {
|
||||
backgroundImage: `url(${props.pic})`,
|
||||
backgroundColor: props.theme
|
||||
}
|
||||
})
|
||||
|
||||
const onDragBegin = (e: MouseEvent) => {
|
||||
if (props.enableDrag) {
|
||||
hasMovedSinceMouseDown.value = false
|
||||
emit('dragbegin')
|
||||
dragStartX.value = e.clientX
|
||||
dragStartY.value = e.clientY
|
||||
document.addEventListener('mousemove', onDocumentMouseMove)
|
||||
document.addEventListener('mouseup', onDocumentMouseUp)
|
||||
}
|
||||
}
|
||||
const onDocumentMouseMove = (e: MouseEvent) => {
|
||||
hasMovedSinceMouseDown.value = true
|
||||
emit('dragging', {offsetLeft: e.clientX - dragStartX.value, offsetTop: e.clientY - dragStartY.value})
|
||||
}
|
||||
const onDocumentMouseUp = () => {
|
||||
document.removeEventListener('mouseup', onDocumentMouseUp)
|
||||
document.removeEventListener('mousemove', onDocumentMouseMove)
|
||||
emit('dragend')
|
||||
}
|
||||
const onClick = () => {
|
||||
if (!hasMovedSinceMouseDown.value) {
|
||||
emit('toggleplay')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../less/variables";
|
||||
|
||||
.aplayer-float {
|
||||
.aplayer-pic:active {
|
||||
cursor: move;
|
||||
}
|
||||
@import "../less/variables";
|
||||
.aplayer-float {
|
||||
.aplayer-pic:active {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.aplayer-pic {
|
||||
flex-shrink: 0;
|
||||
|
||||
position: relative;
|
||||
height: @aplayer-height;
|
||||
width: @aplayer-height;
|
||||
background-image: url(../default.jpg);
|
||||
background-size: cover;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
.aplayer-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.aplayer-pic {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
height: @aplayer-height;
|
||||
width: @aplayer-height;
|
||||
background-image: url(../default.jpg);
|
||||
background-size: cover;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
.aplayer-button {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.1s ease;
|
||||
|
||||
.aplayer-fill {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
margin: 0 -15px -15px 0;
|
||||
.aplayer-icon-play {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
.aplayer-icon-pause {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-button {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.1s ease;
|
||||
.aplayer-fill {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
margin: 0 -15px -15px 0;
|
||||
.aplayer-icon-play {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
.aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
.aplayer-icon-pause {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
/**
|
||||
* Parse lrc, suppose multiple time tag
|
||||
* @see https://github.com/MoePlayer/APlayer/blob/master/src/js/lrc.js#L83
|
||||
* @author DIYgod(https://github.com/DIYgod)
|
||||
*
|
||||
* @param {String} lrc_s - Format:
|
||||
* [mm:ss]lyric
|
||||
* [mm:ss.xx]lyric
|
||||
* [mm:ss.xxx]lyric
|
||||
* [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
|
||||
* [mm:ss.xx]<mm:ss.xx>lyric
|
||||
*
|
||||
* @return {String} [[time, text], [time, text], [time, text], ...]
|
||||
*/
|
||||
export function parseLrc (lrc_s) {
|
||||
if (lrc_s) {
|
||||
lrc_s = lrc_s.replace(/([^\]^\n])\[/g, (match, p1) => p1 + '\n[')
|
||||
const lyric = lrc_s.split('\n')
|
||||
const lrc = []
|
||||
const lyricLen = lyric.length
|
||||
for (let i = 0; i < lyricLen; i++) {
|
||||
// match lrc time
|
||||
const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g)
|
||||
// match lrc text
|
||||
const lrcText = lyric[i].replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '').replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '').replace(/^\s+|\s+$/g, '')
|
||||
|
||||
if (lrcTimes) {
|
||||
// handle multiple time tag
|
||||
const timeLen = lrcTimes.length
|
||||
for (let j = 0; j < timeLen; j++) {
|
||||
const oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j])
|
||||
const min2sec = oneTime[1] * 60
|
||||
const sec2sec = parseInt(oneTime[2])
|
||||
const msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0
|
||||
const lrcTime = min2sec + sec2sec + msec2sec
|
||||
lrc.push([lrcTime, lrcText])
|
||||
}
|
||||
}
|
||||
}
|
||||
// sort by time
|
||||
lrc.sort((a, b) => a[0] - b[0])
|
||||
return lrc
|
||||
}
|
||||
else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export function warn (message) {
|
||||
return console.warn(`[Vue-APlayer] ${message}`)
|
||||
}
|
||||
|
||||
export function getElementViewLeft (element) {
|
||||
let actualLeft = element.offsetLeft
|
||||
let current = element.offsetParent
|
||||
let elementScrollLeft
|
||||
while (current !== null) {
|
||||
actualLeft += current.offsetLeft
|
||||
current = current.offsetParent
|
||||
}
|
||||
elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft
|
||||
return actualLeft - elementScrollLeft
|
||||
}
|
||||
|
||||
export function getElementViewTop (element) {
|
||||
let actualTop = element.offsetTop
|
||||
let current = element.offsetParent
|
||||
let elementScrollTop
|
||||
while (current !== null) {
|
||||
actualTop += current.offsetTop
|
||||
current = current.offsetParent
|
||||
}
|
||||
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop
|
||||
return actualTop - elementScrollTop
|
||||
}
|
||||
69
src/views/api/aplayer/utils.ts
Normal file
69
src/views/api/aplayer/utils.ts
Normal file
@ -0,0 +1,69 @@
|
||||
/**
|
||||
* Parse lrc, suppose multiple time tag
|
||||
* @param {string} lrc_s - Format:
|
||||
* [mm:ss]lyric
|
||||
* [mm:ss.xx]lyric
|
||||
* [mm:ss.xxx]lyric
|
||||
* [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric
|
||||
* [mm:ss.xx]<mm:ss.xx>lyric
|
||||
*
|
||||
* @return {Array} [[time, text], [time, text], [time, text], ...]
|
||||
*/
|
||||
export function parseLrc (lrc_s: string): Array<[number, string]> {
|
||||
if (!lrc_s) return []
|
||||
lrc_s = lrc_s.replace(/([^\]^\n])\[/g, (match, p1) => p1 + '\n[')
|
||||
const lyric = lrc_s.split('\n')
|
||||
const lrc: Array<[number, string]> = []
|
||||
const lyricLen = lyric.length
|
||||
for (let i = 0; i < lyricLen; i++) {
|
||||
// match lrc time
|
||||
const lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g)
|
||||
// match lrc text
|
||||
const lrcText = lyric[i].replace(/.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/g, '').replace(/<(\d{2}):(\d{2})(\.(\d{2,3}))?>/g, '').replace(/^\s+|\s+$/g, '')
|
||||
|
||||
if (lrcTimes) {
|
||||
// handle multiple time tag
|
||||
const timeLen = lrcTimes.length
|
||||
for (let j = 0; j < timeLen; j++) {
|
||||
const oneTime = /\[(\d{2}):(\d{2})(\.(\d{2,3}))?]/.exec(lrcTimes[j])
|
||||
if (!oneTime) continue
|
||||
const min2sec = parseInt(oneTime[1]) * 60
|
||||
const sec2sec = parseInt(oneTime[2])
|
||||
const msec2sec = oneTime[4] ? parseInt(oneTime[4]) / ((oneTime[4] + '').length === 2 ? 100 : 1000) : 0
|
||||
const lrcTime = min2sec + sec2sec + msec2sec
|
||||
lrc.push([lrcTime, lrcText])
|
||||
}
|
||||
}
|
||||
}
|
||||
// sort by time
|
||||
lrc.sort((item1, item2) => item1[0] - item2[0])
|
||||
return lrc
|
||||
}
|
||||
|
||||
export function warn (message: string) {
|
||||
return console.warn(`[Vue-APlayer] ${message}`)
|
||||
}
|
||||
|
||||
export function getElementViewLeft (element: HTMLElement): number {
|
||||
let actualLeft = element.offsetLeft
|
||||
let current = <HTMLElement>element.offsetParent
|
||||
let elementScrollLeft
|
||||
while (current !== null) {
|
||||
actualLeft += current.offsetLeft
|
||||
current = <HTMLElement>current.offsetParent
|
||||
}
|
||||
elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft
|
||||
return actualLeft - elementScrollLeft
|
||||
}
|
||||
|
||||
export function getElementViewTop (element: HTMLElement): number {
|
||||
let actualTop = element.offsetTop
|
||||
let current = <HTMLElement>element.offsetParent
|
||||
let elementScrollTop
|
||||
while (current !== null) {
|
||||
actualTop += current.offsetTop
|
||||
current = <HTMLElement>current.offsetParent
|
||||
}
|
||||
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop
|
||||
return actualTop - elementScrollTop
|
||||
}
|
||||
@ -35,6 +35,8 @@
|
||||
:volume="audioVolume"
|
||||
:muted="isAudioMuted"
|
||||
:theme="currentTheme"
|
||||
:showList="showList"
|
||||
:isMobile="isMobile"
|
||||
@toggleshuffle="shouldShuffle = !shouldShuffle"
|
||||
@togglelist="showList = !showList"
|
||||
@togglemute="toggleMute"
|
||||
@ -490,7 +492,6 @@
|
||||
},
|
||||
onProgressDragEnd (val) {
|
||||
this.isSeeking = false
|
||||
|
||||
if (this.wasPlayingBeforeSeeking) {
|
||||
this.thenPlay()
|
||||
}
|
||||
|
||||
@ -11,7 +11,11 @@
|
||||
"esModuleInterop": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"allowJs": true
|
||||
"allowJs": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
const path = require('path')
|
||||
const AutoImport = require('unplugin-auto-import/webpack')
|
||||
const Components = require('unplugin-vue-components/webpack')
|
||||
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
|
||||
@ -12,6 +13,9 @@ module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
productionSourceMap: false,
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: { '@': path.resolve(__dirname, './src') }
|
||||
},
|
||||
plugins: [
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user