forked from nikita/muzika-gromche
32 lines
708 B
Vue
32 lines
708 B
Vue
<script setup lang="ts">
|
|
import type { TimelineMarkerData } from '@/lib/Timeline'
|
|
import { markerToAbsoluteTime } from '@/lib/Timeline'
|
|
import { usePx } from '@/lib/usePx'
|
|
import { useTimelineStore } from '@/store/TimelineStore'
|
|
|
|
const {
|
|
marker,
|
|
} = defineProps<{
|
|
marker: TimelineMarkerData
|
|
}>()
|
|
|
|
const timeline = useTimelineStore()
|
|
|
|
const left = usePx(() => {
|
|
const seconds = markerToAbsoluteTime(timeline.audioTrack!, marker)
|
|
const px = timeline.secondsToPixels(seconds)
|
|
return px
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="tw:absolute tw:w-0 tw:h-full tw:opacity-60 tw:border-l" :style="{
|
|
left: left.string,
|
|
borderColor: marker.color,
|
|
}"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped></style>
|