153 lines
4.0 KiB
Vue
153 lines
4.0 KiB
Vue
<template>
|
|
<div
|
|
class="aplayer-bar-wrap"
|
|
@mousedown="onThumbMouseDown"
|
|
ref="barWrap"
|
|
>
|
|
<div class="aplayer-bar">
|
|
<div
|
|
class="aplayer-loaded"
|
|
:style="{width: `${loadProgress * 100}%`}">
|
|
</div>
|
|
<div
|
|
class="aplayer-played"
|
|
:style="{width: `${playProgress * 100}%`, background: theme}"
|
|
>
|
|
<span
|
|
ref="thumb"
|
|
@mouseover="thumbHovered = true"
|
|
@mouseout="thumbHovered = false"
|
|
class="aplayer-thumb"
|
|
:style="{borderColor: theme, backgroundColor: thumbHovered ? theme : '#fff'}"
|
|
>
|
|
<span class="aplayer-loading-icon" :style="{backgroundColor: theme }">
|
|
<player-icon type="loading"/>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { getElementViewLeft } from '../utils'
|
|
import PlayerIcon from './aplayer-icon.vue'
|
|
|
|
defineProps<{
|
|
loadProgress: number
|
|
playProgress: number
|
|
theme?: string
|
|
}>()
|
|
|
|
const emit = defineEmits(['dragbegin', 'dragging', 'dragend'])
|
|
|
|
const thumbHovered = ref(false)
|
|
const barWrap = ref<unknown>(null)
|
|
|
|
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)
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
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;
|
|
height: 2px;
|
|
width: 100%;
|
|
background: #cdcdcd;
|
|
.aplayer-loaded {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0)
|
|
}
|
|
100% {
|
|
transform: rotate(360deg)
|
|
}
|
|
}
|
|
</style> |