137 lines
3.2 KiB
Vue
137 lines
3.2 KiB
Vue
<template>
|
|
<div
|
|
class="aplayer-pic"
|
|
:style="{backgroundColor: theme}"
|
|
@mousedown="onDragBegin"
|
|
@click="onClick"
|
|
>
|
|
<img v-if="pic" ref="thumbnailPic" :src="pic" @load="imgLoad" />
|
|
<div class="aplayer-button" :class="playing ? 'aplayer-pause' : 'aplayer-play'">
|
|
<icon-button
|
|
:icon="playing ? 'pause' : 'play'"
|
|
:class="playing ? 'aplayer-icon-pause' : 'aplayer-icon-play'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue'
|
|
import IconButton from './aplayer-iconbutton.vue'
|
|
import { themeColor } from '../utils'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
pic?: string
|
|
theme: string
|
|
playing: boolean
|
|
enableDrag: boolean
|
|
}>(), {
|
|
playing: false,
|
|
enableDrag: false
|
|
})
|
|
|
|
const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay', 'adaptingTheme'])
|
|
|
|
const hasMovedSinceMouseDown = ref(false)
|
|
const dragStartX = ref(0)
|
|
const dragStartY = ref(0)
|
|
const thumbnailPic = ref<unknown>(null)
|
|
|
|
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')
|
|
}
|
|
}
|
|
const imgLoad = () => {
|
|
const color = themeColor(<HTMLImageElement>thumbnailPic.value)
|
|
emit('adaptingTheme', `rgb(${color.r},${color.g},${color.b})`)
|
|
}
|
|
watch(() => props.pic, (pic?: string) => {
|
|
if (!pic) emit('adaptingTheme', null)
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../less/variables";
|
|
.aplayer-float {
|
|
.aplayer-pic:active {
|
|
cursor: move;
|
|
}
|
|
}
|
|
.aplayer-pic {
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
height: @aplayer-height;
|
|
width: @aplayer-height;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
&:hover {
|
|
.aplayer-button {
|
|
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;
|
|
}
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |