229 lines
8.9 KiB
TypeScript
229 lines
8.9 KiB
TypeScript
// import {
|
|
// computed,
|
|
// ref,
|
|
// nextTick,
|
|
// watch,
|
|
// onMounted,
|
|
// onBeforeUnmount,
|
|
// } from 'vue'
|
|
// import { scrollTo } from '@common/utils/renderer'
|
|
|
|
// interface ListItem {
|
|
// item: LX.Music.MusicInfo
|
|
// top: number
|
|
// style: {
|
|
// position: string
|
|
// left: number
|
|
// right: number
|
|
// top: string
|
|
// height: string
|
|
// }
|
|
// index: number
|
|
// key: string
|
|
// }
|
|
|
|
// export default (props: { list: LX.Music.MusicInfo[], itemHeight: number }) => {
|
|
// const dom_scrollContainer = ref<HTMLElement | null>(null)
|
|
// const dom_list = ref<HTMLElement | null>(null)
|
|
// let startIndex = -1
|
|
// let endIndex = -1
|
|
// let scrollTop = -1
|
|
// let cachedList: ListItem[] = []
|
|
// let cancelScroll: null | (() => void) = null
|
|
// let isScrolling = false
|
|
// let scrollToValue = 0
|
|
|
|
// const createList = (startIndex: number, endIndex: number) => {
|
|
// if (startIndex == endIndex) return []
|
|
// console.log(startIndex, endIndex)
|
|
// const cache = cachedList.slice(startIndex, endIndex)
|
|
// const list = props.list.slice(startIndex, endIndex).map((item, i) => {
|
|
// if (cache[i]) return cache[i]
|
|
// const top = (startIndex + i) * props.itemHeight
|
|
// const index = startIndex + i
|
|
// return cachedList[index] = {
|
|
// item,
|
|
// top,
|
|
// style: { position: 'absolute', left: 0, right: 0, top: `${top}px`, height: `${props.itemHeight}px` },
|
|
// index,
|
|
// key: item.id,
|
|
// }
|
|
// })
|
|
// return list
|
|
// }
|
|
|
|
// // div.list-item(@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
|
|
// // :class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]")
|
|
// // div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{ index + 1 }}
|
|
// // div.list-item-cell.auto(:style="{ width: rowWidth.r2 }" :aria-label="item.name + (item.meta._qualitys.flac32bit ? ` - ${$t('tag__lossless_24bit')}` : (item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav) ? ` - ${$t('tag__lossless')}` : item.meta._qualitys['320k'] ? ` - ${$t('tag__high_quality')}` : '') + (sourceTag ? ` - ${item.source}` : '')")
|
|
// // span.select {{ item.name }}
|
|
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-if="item.meta._qualitys.flac32bit") {{ $t('tag__lossless_24bit') }}
|
|
// // span.badge.badge-theme-primary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys.ape || item.meta._qualitys.flac || item.meta._qualitys.wav") {{ $t('tag__lossless') }}
|
|
// // span.badge.badge-theme-secondary(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item.meta._qualitys['320k']") {{ $t('tag__high_quality') }}
|
|
// // span.badge.badge-theme-tertiary(:class="[$style.labelQuality, $style.noSelect]" v-if="sourceTag") {{ item.source }}
|
|
// // div.list-item-cell(:style="{ width: rowWidth.r3 }" :aria-label="item.singer")
|
|
// // span.select {{ item.singer }}
|
|
// // div.list-item-cell(:style="{ width: rowWidth.r4 }" :aria-label="item.albumName")
|
|
// // span.select {{ item.meta.albumName }}
|
|
// // div.list-item-cell(:style="{ width: rowWidth.r5 }")
|
|
// // span(:class="[$style.time, $style.noSelect]") {{ item.meta.interval || '--/--' }}
|
|
// // div.list-item-cell(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
|
|
// // material-list-buttons(:index="index" :class="$style.btns"
|
|
// // :remove-btn="false" @btn-click="handleListBtnClick"
|
|
// // :download-btn="assertApiSupport(item.source)")
|
|
// const renderListItem = (list: ListItem) => {
|
|
// const dom_listItem = document.createElement('div')
|
|
// dom_listItem.className = 'list-item'
|
|
// }
|
|
|
|
// const renderList = (list: ListItem[], type?: 'up' | 'down') => {
|
|
// if (!list.length) return
|
|
// console.log(list)
|
|
// const dom = document.createDocumentFragment()
|
|
// for (const item of list) {
|
|
// dom.appendChild(renderListItem(item))
|
|
// }
|
|
// switch (type) {
|
|
// case 'up':
|
|
// break
|
|
// case 'down':
|
|
// break
|
|
// default:
|
|
// // console.log()
|
|
// break
|
|
// }
|
|
// }
|
|
|
|
// const updateView = (force = false, currentScrollTop = dom_scrollContainer.value.scrollTop) => {
|
|
// // const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
|
|
// const itemHeight = props.itemHeight
|
|
// const currentStartIndex = Math.floor(currentScrollTop / itemHeight)
|
|
// const scrollContainerHeight = dom_scrollContainer.value.clientHeight
|
|
// const currentEndIndex = currentStartIndex + Math.ceil(scrollContainerHeight / itemHeight)
|
|
// const continuous = currentStartIndex <= endIndex && currentEndIndex >= startIndex
|
|
// const currentStartRenderIndex = Math.max(currentStartIndex, 0)
|
|
// const currentEndRenderIndex = currentEndIndex + 1
|
|
// // console.log(continuous, currentStartIndex, endIndex, currentEndIndex, startIndex)
|
|
// // debugger
|
|
// if (!force && continuous) {
|
|
// // if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * 0.6) return
|
|
// // console.log('update')
|
|
// if (currentScrollTop > scrollTop) { // scroll down
|
|
// console.log('scroll down')
|
|
// renderList(createList(endIndex + 1, currentEndRenderIndex))
|
|
// // // views.value.push(...list.slice(list.indexOf(views.value[views.value.length - 1]) + 1))
|
|
// // // // if (this.views.length > 100) {
|
|
// // // nextTick(() => {
|
|
// // // views.value.splice(0, views.value.indexOf(list[0]))
|
|
// // // })
|
|
// // // }
|
|
// } else if (currentScrollTop < scrollTop) { // scroll up
|
|
// console.log('scroll up')
|
|
// renderList(createList(currentStartRenderIndex, startIndex))
|
|
// // views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
|
|
// } else return
|
|
// // if (currentScrollTop == scrollTop && endIndex >= currentEndIndex) return
|
|
// // views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
|
|
// } else {
|
|
// renderList(createList(currentStartRenderIndex, currentEndRenderIndex))
|
|
// }
|
|
// startIndex = currentStartIndex
|
|
// endIndex = currentEndIndex
|
|
// scrollTop = currentScrollTop
|
|
// }
|
|
|
|
// const onScroll = event => {
|
|
// const currentScrollTop = dom_scrollContainer.value.scrollTop
|
|
// if (Math.abs(currentScrollTop - scrollTop) > props.itemHeight * 0.6) {
|
|
// updateView(false, currentScrollTop)
|
|
// }
|
|
// emit('scroll', event)
|
|
// }
|
|
|
|
// const scrollTo = async(scrollTop, animate = false) => {
|
|
// return await new Promise(resolve => {
|
|
// if (cancelScroll) {
|
|
// cancelScroll(resolve)
|
|
// } else {
|
|
// resolve()
|
|
// }
|
|
// }).then(async() => {
|
|
// return await new Promise((resolve, reject) => {
|
|
// if (animate) {
|
|
// isScrolling = true
|
|
// scrollToValue = scrollTop
|
|
// cancelScroll = handleScroll(dom_scrollContainer.value, scrollTop, 300, () => {
|
|
// cancelScroll = null
|
|
// isScrolling = false
|
|
// resolve()
|
|
// }, () => {
|
|
// cancelScroll = null
|
|
// isScrolling = false
|
|
// reject('canceled')
|
|
// })
|
|
// } else {
|
|
// dom_scrollContainer.value.scrollTop = scrollTop
|
|
// }
|
|
// })
|
|
// })
|
|
// }
|
|
|
|
// const scrollToIndex = async(index, offset = 0, animate = false) => {
|
|
// return await scrollTo(Math.max(index * props.itemHeight + offset, 0), animate)
|
|
// }
|
|
|
|
// const getScrollTop = () => {
|
|
// return isScrolling ? scrollToValue : dom_scrollContainer.value.scrollTop
|
|
// }
|
|
|
|
// const handleResize = () => {
|
|
// setTimeout(updateView)
|
|
// }
|
|
|
|
// const contentStyle = computed(() => ({
|
|
// display: 'block',
|
|
// height: props.list.length * props.itemHeight + 'px',
|
|
// }))
|
|
|
|
// const handleReset = list => {
|
|
// cachedList = Array(list.length)
|
|
// startIndex = -1
|
|
// endIndex = -1
|
|
// void nextTick(() => {
|
|
// updateView(true)
|
|
// })
|
|
// }
|
|
// watch(() => props.itemHeight, () => {
|
|
// handleReset(props.list)
|
|
// })
|
|
// watch(() => props.list, (list) => {
|
|
// handleReset(list)
|
|
// }, {
|
|
// deep: true,
|
|
// })
|
|
|
|
// onMounted(() => {
|
|
// dom_scrollContainer.value!.addEventListener('scroll', onScroll, false)
|
|
// cachedList = Array(props.list.length)
|
|
// startIndex = -1
|
|
// endIndex = -1
|
|
// updateView(true)
|
|
// window.addEventListener('resize', handleResize)
|
|
// })
|
|
// onBeforeUnmount(() => {
|
|
// dom_scrollContainer.value!.removeEventListener('scroll', onScroll)
|
|
// window.removeEventListener('resize', handleResize)
|
|
// if (cancelScroll) cancelScroll()
|
|
// })
|
|
|
|
// return {
|
|
// dom_scrollContainer,
|
|
// dom_list,
|
|
// contentStyle,
|
|
// scrollTo,
|
|
// scrollToIndex,
|
|
// getScrollTop,
|
|
// }
|
|
// }
|
|
export {}
|