diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3662b37 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} \ No newline at end of file diff --git a/src/model/api/music.ts b/src/model/api/music.ts index c9066cf..df48824 100644 --- a/src/model/api/music.ts +++ b/src/model/api/music.ts @@ -33,4 +33,10 @@ export interface MusicPlayerItem { src: string pic: string lrc?: string +} + +export interface StatType { + duration: number, + loadedTime: number, + playedTime: number, } \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-controller-progress.vue b/src/views/api/aplayer/components/aplayer-controller-progress.vue index 3771aa5..e714614 100644 --- a/src/views/api/aplayer/components/aplayer-controller-progress.vue +++ b/src/views/api/aplayer/components/aplayer-controller-progress.vue @@ -2,7 +2,6 @@
@@ -21,10 +20,8 @@ class="aplayer-thumb" :style="{borderColor: theme, backgroundColor: thumbHovered ? theme : '#fff'}" > - - + +
@@ -32,169 +29,125 @@
- \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-controller-volume.vue b/src/views/api/aplayer/components/aplayer-controller-volume.vue index 668967f..5a0db24 100644 --- a/src/views/api/aplayer/components/aplayer-controller-volume.vue +++ b/src/views/api/aplayer/components/aplayer-controller-volume.vue @@ -23,106 +23,95 @@ - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-controller.vue b/src/views/api/aplayer/components/aplayer-controller.vue index 7bbe52d..b368513 100644 --- a/src/views/api/aplayer/components/aplayer-controller.vue +++ b/src/views/api/aplayer/components/aplayer-controller.vue @@ -14,12 +14,12 @@ class="aplayer-dtime">{{secondToTime(stat.duration)}} - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-icon.vue b/src/views/api/aplayer/components/aplayer-icon.vue index 11f1a3c..a268bfe 100644 --- a/src/views/api/aplayer/components/aplayer-icon.vue +++ b/src/views/api/aplayer/components/aplayer-icon.vue @@ -2,26 +2,23 @@ - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-iconbutton.vue b/src/views/api/aplayer/components/aplayer-iconbutton.vue index 88c505a..091178c 100644 --- a/src/views/api/aplayer/components/aplayer-iconbutton.vue +++ b/src/views/api/aplayer/components/aplayer-iconbutton.vue @@ -3,43 +3,34 @@ type="button" class="aplayer-icon" > - + - - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-list.vue b/src/views/api/aplayer/components/aplayer-list.vue index 8c395ab..f8d799a 100644 --- a/src/views/api/aplayer/components/aplayer-list.vue +++ b/src/views/api/aplayer/components/aplayer-list.vue @@ -6,10 +6,7 @@ ref="list" v-show="show" > -
    +
    1. {{ index + 1}} {{ aMusic.title || 'Untitled' }} - {{ aMusic.artist || aMusic.author || 'Unknown' }} + {{ aMusic.artist || 'Unknown' }}
    - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-lrc.vue b/src/views/api/aplayer/components/aplayer-lrc.vue index de1e08c..8833a12 100644 --- a/src/views/api/aplayer/components/aplayer-lrc.vue +++ b/src/views/api/aplayer/components/aplayer-lrc.vue @@ -15,150 +15,114 @@ - \ No newline at end of file diff --git a/src/views/api/aplayer/components/aplayer-thumbnail.vue b/src/views/api/aplayer/components/aplayer-thumbnail.vue index 2cd2f2f..2b57db0 100644 --- a/src/views/api/aplayer/components/aplayer-thumbnail.vue +++ b/src/views/api/aplayer/components/aplayer-thumbnail.vue @@ -13,139 +13,121 @@ - \ No newline at end of file diff --git a/src/views/api/aplayer/utils.js b/src/views/api/aplayer/utils.js deleted file mode 100644 index 0256a0b..0000000 --- a/src/views/api/aplayer/utils.js +++ /dev/null @@ -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]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 -} diff --git a/src/views/api/aplayer/utils.ts b/src/views/api/aplayer/utils.ts new file mode 100644 index 0000000..fdb6c78 --- /dev/null +++ b/src/views/api/aplayer/utils.ts @@ -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]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 = 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: HTMLElement): number { + 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 +} diff --git a/src/views/api/aplayer/vue-aplayer.vue b/src/views/api/aplayer/vue-aplayer.vue index b99a999..bc9e3b4 100644 --- a/src/views/api/aplayer/vue-aplayer.vue +++ b/src/views/api/aplayer/vue-aplayer.vue @@ -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() } diff --git a/tsconfig.json b/tsconfig.json index 7d4d797..c832412 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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"] } diff --git a/vue.config.js b/vue.config.js index 3b8f50d..a197c96 100644 --- a/vue.config.js +++ b/vue.config.js @@ -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()],