hardwin1014 / music_sunshine Goto Github PK

import { createApp } from 'vue'
import Loading from './loading.vue'

const loadingDirective = {
    mounted(el, binding) {
        // vue 是可以多实例的
        const app = createApp(Loading) // loading 组件
        // DOM 对象
        const instance = app.mount(document.createElement('div'))
        // 保存起来 方便多次使用
        el.instance = instance
        if (binding.value) {
            append(el)
        }
    },
    updated(el, binding) {
        // 当 前后值不一样时
        if (binding.value !== binding.oldValue) {
            // 执行添加 或 移除 操作
            binding.value ? append(el) : remove(el)
        }
    }
}

function append(el) {
    el.appendChild(el.instance.$el)
}

function remove(el) {
    el.removeChild(el.instance.$el)
}

export default loadingDirective

import { createApp } from 'vue'
import { addClass, removeClass } from '../../../assets/js/dom'
import Loading from './loading.vue'
const relativeCls = 'g-relative'

const loadingDirective = {
    mounted(el, binding) {
        // vue 是可以多实例的
        const app = createApp(Loading) // loading 组件
        // DOM 对象
        const instance = app.mount(document.createElement('div'))
        // 保存起来 方便多次使用
        el.instance = instance
        if (binding.value) {
            append(el)
        }
    },
    updated(el, binding) {
        // 当 前后值不一样时
        if (binding.value !== binding.oldValue) {
            // 执行添加 或 移除 操作
            binding.value ? append(el) : remove(el)
        }
    }
}

function append(el) {
    console.log(el.classList)
    // el.instance.$el  loading 组件的DOM对象
    /** 还存在一些问题 ：：
     * loading 组件要求 外层容器的定位是 'absolute', 'fixed', 'relative'
     */
    const style = getComputedStyle(el) // getComputedStyle 用于获取指定元素的css
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
        addClass(el, relativeCls)
    }
    console.log(el.style)
    el.appendChild(el.instance.$el)
}

function remove(el) {
    removeClass(el, relativeCls)
    el.removeChild(el.instance.$el)
}

export default loadingDirective

export function addClass(el, className) {
    console.log(el.classList)
    if (!el.classList.contains(className)) {
        el.classList.add(className)
    }
}

export function removeClass(el, className) {
    // 删除一个不存在的 class 不会报错 所以不用判断
    el.classList.remove(className)
}

 mounted(el, binding) {
        console.log(binding)
        // vue 是可以多实例的
        const app = createApp(Loading) // loading 组件
        // DOM 对象
        const instance = app.mount(document.createElement('div'))
        // 保存起来 方便多次使用
        el.instance = instance
        const title = binding.arg
        if (typeof title !== 'undefined') {
            instance.setTitle(title)
        }
        if (binding.value) {
            append(el)
        }
    },
    updated(el, binding) {
        const title = binding.arg
        if (typeof title !== 'undefined') {
            el.instance.setTitle(title)
        }
        // 当 前后值不一样时
        if (binding.value !== binding.oldValue) {
            // 执行添加 或 移除 操作
            binding.value ? append(el) : remove(el)
        }
    }

emits: ['scroll'],
  setup(props, { emit }) {
    const rootRef = ref(null)
    useScroll(rootRef, props, emit)
    return { rootRef }
  }

  // 根据传入的probeType来控制 滚动的监听强度 来节约资源
        if (options.probeType > 0) {
            scrollVal.on('scroll', (pos) => {
                emit('scroll', pos)
            })
        }

import { computed, nextTick, ref, watch } from 'vue'

export default function useFixed(props) {
    const groupRef = ref(null)
    const listHeights = ref([])
    const scrollY = ref(0)
    const currentIndex = ref(0) // 当前渲染组的索引
    // const distance = ref(0)

    const fixedTitle = computed(() => {
        if (scrollY.value < 0) {
            return ''
        }
        const currentGroup = props.data[currentIndex.value]
        return currentGroup ? currentGroup.title : ''
    })

    watch(() => props.data, async () => {
        /**
         * 这样写还是存在问题
         * 当数据发生变化之后，这个回调函数内部的DOM还是没有发生变化的
         * DOM发生变化是在nextTick 之后
         */
        // nextTick(() => {
        //     calculate()
        // })
        await nextTick()
        calculate()
    })

    watch(scrollY, (newY) => {
        const listHeightsVal = listHeights.value
        for (let i = 0; i < listHeightsVal.length - 1; i++) {
            const heightTop = listHeightsVal[i]
            const heightBottom = listHeightsVal[i + 1]
            // 此时落在区间上
            if (newY >= heightTop && newY <= heightBottom) {
                currentIndex.value = i
                return
            }
        }
    })
    /** 计算
     * 什么情况的时候去计算，当数据变化时，DOM就会发生变化，也就是DOM变化后要去计算
     */
    function calculate() {
        const list = groupRef.value.children
        const listHeightsVal = listHeights.value
        let height = 0
        listHeightsVal.length = 0
        listHeightsVal.push(height)
        for (let i = 0; i < list.length; i++) {
            // 每个元素对应的DOM
            /**
             * 这里为什么要累加? 因为滚动的一个值 就列表的高度 从0到最大滚动高度就一个不断递增的值
             * 所以区间也要这样记录，方便对应它们的关系
             */
            height += list[i].clientHeight
            listHeightsVal.push(height)
        }
        console.log(listHeightsVal)
    }

    function onScroll(pos) {
        // 这里scroll 往下滑动时反馈的值是一个负值
        scrollY.value = -pos.y
    }
    return { groupRef, onScroll, fixedTitle }
}

watch(scrollY, (newY) => {
        const listHeightsVal = listHeights.value
        for (let i = 0; i < listHeightsVal.length - 1; i++) {
            const heightTop = listHeightsVal[i]
            const heightBottom = listHeightsVal[i + 1]
            // 此时落在区间上
            // newY >= 0 && newT <= 760
            if (newY >= heightTop && newY <= heightBottom) {
                currentIndex.value = i
                distance.value = heightBottom - newY // 距离
            }
        }
    })

 const fixedStyle = computed(() => {
        const distanceVal = distance.value
        const diff = (distanceVal > 0 && distanceVal < TITLE_HEIGHT) ? distanceVal - TITLE_HEIGHT : 0
        return {
            transform: `translate3d(0,${diff}px,0)`
        }
    })

setup(props, { emit }) {
    const rootRef = ref(null)
    const scroll = useScroll(rootRef, props, emit)
    return { rootRef, scroll }
  }

export default function useScroll(wrapperRef, options, emit) {
    const scroll = ref(null)
    onMounted(() => {
        /** BScroll 判断能不能滚动 new 的时候 此时会做计算
         *  debugger 的时候scroll 标签里面的内容是没有的，所以就不满足滚动条件，就不能滚动
         * 解决： 利用 observe-dom 当 DOM 元素发生变化时去自动调用 refresh 方法
         */
        const scrollVal = scroll.value = new BScroll(wrapperRef.value, {
            observeDOM: true,
            ...options
        })

        // 根据传入的probeType来控制 滚动的监听强度 来节约资源
        if (options.probeType > 0) {
            scrollVal.on('scroll', (pos) => {
                emit('scroll', pos)
            })
        }
    })
    onUnmounted(() => {
        scroll.value.destroy()
    })
    return scroll
}

    function onShortcutTouchStart(e) {
        const anchorIndex = parseInt(e.target.dataset.index) // 索引
        const targetEl = groupRef.value.children[anchorIndex] // 通过索引拿到对应组的DOM
        const scroll = scrollRef.value.scroll
        scroll.scrollToElement(targetEl, 500) // 调用betterScroll 的 scrollToElement 方法
    }

import { computed, ref } from 'vue'

export default function useShortcut(props, groupRef) {
    const scrollRef = ref(null)
    const ANCHOR_HEIGHT = 18
    const touch = {} // 记录坐标
    const shortcutList = computed(() => {
        return props.data.map((group) => {
            return group.title
        })
    })
    function onShortcutTouchStart(e) {
        const anchorIndex = parseInt(e.target.dataset.index) // 索引
        touch.y1 = e.touches[0].pageY
        touch.anchorIndex = anchorIndex
        scrollTo(anchorIndex)
    }
    function onShortcutTouchMove(e) {
        // 记录touchstart、touchmove的纵坐标
        touch.y2 = e.touches[0].pageY
        const delta = (touch.y2 - touch.y1) / ANCHOR_HEIGHT | 0 // 差值 | 0 意思是整数向下取整的简写法
        const anchorIndex = touch.anchorIndex + delta
        scrollTo(anchorIndex)
    }

    function scrollTo(index) {
        if (isNaN(index)) {
            return
        }
        index = Math.max(0, Math.min(shortcutList.value.length - 1, index))
        const targetEl = groupRef.value.children[index] // 通过索引拿到对应组的DOM
        const scroll = scrollRef.value.scroll
        scroll.scrollToElement(targetEl, 500) // 调用betterScroll 的 scrollToElement 方法
    }
    return { shortcutList, onShortcutTouchStart, scrollRef, onShortcutTouchMove }
}

  computed: {
    scrollStyle() {
      return {
        top: `${this.imageHeight}px`
      }
    }
  },
  mounted() {
    this.imageHeight = this.$refs.bgImage.clientHeight
  }

    this.maxTranslateY = this.imageHeight - RESERVED_HEIGHT // 可以滚动最大距离的高度

bgImageStyle() {
      const scrollY = this.scrollY
      let zIndex = 0
      let paddingTop = '70%'
      let height = 0
      let translateZ = 0 // 处理ios兼容
      let scale = 1
      if (scrollY > this.maxTranslateY) {
        zIndex = 10
        paddingTop = 0
        height = `${RESERVED_HEIGHT}px`
        translateZ = 1
      }

      if (scrollY < 0) {
        scale = 1 + Math.abs(scrollY / this.imageHeight)
      }
      return {
        paddingTop,
        height,
        backgroundImage: `url(${this.pic})`,
        zIndex,
        transform: `scale(${scale})translateZ(${translateZ}px)`
      }
    },

 filterStyle() {
      let blur = 0
      const scrollY = this.scrollY
      const imageHeight = this.imageHeight
      if (scrollY >= 0) {
        blur = Math.min(this.maxTranslateY / imageHeight, scrollY / imageHeight) * 20
      }
      return {
        backdropFilter: `blur(${blur}px)`
      }
    }

methods: {
    selectSinger(singer) {
      this.selectedSinger = singer
      this.cacheSinger(singer)
      this.$router.push({
        path: `/singer/${singer.mid}`
      })
    },
    cacheSinger(singer) {
      storage.session.set(SINGER_KEY, singer)
    }
  }

computedData() {
      let ret = null
      const singer = this.singer
      if (singer) {
        return singer
      } else {
        const cacheSinger = storage.session.get(SINGER_KEY)
        if (cacheSinger && cacheSinger.mid === this.$route.params.id) {
          ret = cacheSinger
        }
      }
      return ret
    }

async created() {
    if (!this.computedData) {
      const path = this.$route.matched[0].path
      this.$router.push({ path })
    }
    const result = await getSingerDetail(this.computedData)
    const songs = await processSongs(result.songs)
    this.songs = songs
    this.loading = false
  }

import { createApp } from 'vue'
import { addClass, removeClass } from '@/assets/js/dom'
const relativeCls = 'g-relative'

export default function createLoadingLikeDirective(Comp) {
    return {
        mounted(el, binding) {
            // vue 是可以多实例的
            const app = createApp(Comp) // loading 组件
            // DOM 对象
            const instance = app.mount(document.createElement('div'))
            // 保存起来 方便多次使用
            el.instance = instance
            const title = binding.arg
            if (typeof title !== 'undefined') {
                instance.setTitle(title)
            }
            if (binding.value) {
                append(el)
            }
        },
        updated(el, binding) {
            const title = binding.arg
            if (typeof title !== 'undefined') {
                el.instance.setTitle(title)
            }
            // 当 前后值不一样时
            if (binding.value !== binding.oldValue) {
                // 执行添加 或 移除 操作
                binding.value ? append(el) : remove(el)
            }
        }
    }

    function append(el) {
        // el.instance.$el  loading 组件的DOM对象
        /** 还存在一些问题 ：：
         * loading 组件要求 外层容器的定位是 'absolute', 'fixed', 'relative'
         */
        const style = getComputedStyle(el) // getComputedStyle 用于获取指定元素的css
        if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
            addClass(el, relativeCls)
        }
        el.appendChild(el.instance.$el)
    }

    function remove(el) {
        removeClass(el, relativeCls)
        el.removeChild(el.instance.$el)
    }
}

import Loading from './loading.vue'
import createLoadingLikeDirective from '@/assets/js/create-loading-like-directive'
const loadingDirective = createLoadingLikeDirective(Loading)
export default loadingDirective

import NoResult from './no-result'
import createLoadingLikeDirective from '@/assets/js/create-loading-like-directive'

const noResultDirective = createLoadingLikeDirective(NoResult)
export default noResultDirective

import { createApp } from 'vue'
import { addClass, removeClass } from '@/assets/js/dom'
const relativeCls = 'g-relative'

export default function createLoadingLikeDirective(Comp) {
    return {
        mounted(el, binding) {
            // vue 是可以多实例的
            const app = createApp(Comp) // loading 组件
            // DOM 对象
            const instance = app.mount(document.createElement('div'))
            const name = Comp.name
            if (!el[name]) {
                el[name] = {}
            }
            // 保存起来 方便多次使用
            el[name].instance = instance
            const title = binding.arg
            if (typeof title !== 'undefined') {
                el[name].instance.setTitle(title)
            }
            if (binding.value) {
                append(el)
            }
        },
        updated(el, binding) {
            const name = Comp.name
            const title = binding.arg
            if (typeof title !== 'undefined') {
                el[name].instance.setTitle(title)
            }
            // 当 前后值不一样时
            if (binding.value !== binding.oldValue) {
                // 执行添加 或 移除 操作
                binding.value ? append(el) : remove(el)
            }
        }
    }

    function append(el) {
        // el.instance.$el  loading 组件的DOM对象
        /** 还存在一些问题 ：：
         * loading 组件要求 外层容器的定位是 'absolute', 'fixed', 'relative'
         */
        const name = Comp.name
        const style = getComputedStyle(el) // getComputedStyle 用于获取指定元素的css
        if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
            addClass(el, relativeCls)
        }
        el.appendChild(el[name].instance.$el)
    }

    function remove(el) {
        const name = Comp.name
        removeClass(el, relativeCls)
        el.removeChild(el[name].instance.$el)
    }
}

// 开发环境下使用 createLogger 插件 查看提交状态
import { createStore, createLogger } from 'vuex'
import mutations from './mutations'
import state from './state'
import * as getters from './getters'
import * as actions from './actions'
const debug = process.env.NODE_ENV !== 'production' // 开发环境
export default createStore({
  state,
  mutations,
  getters,
  actions,
  /*
  严格模式：当去检测state修改是不是在提交mutations的时候, 就会深度watch state,
          当state有任何变化，就会检测是不是在提交mutations，如果不是的话就会报警告，
          当人这个严格模式会有性能消耗，因为深度watch了，所以在开发环境开启
   */
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

import { PLAY_MODE } from '@/assets/js/constant'

const state = {
  sequenceList: [],
  playlist: [], // 播放列表
  playing: false, // 播放状态
  playMode: PLAY_MODE.sequence, // 播放模式
  currentIndex: 0, // 歌曲索引
  fullScreen: false // 播放器的状态
}
export default state

const mutations = {
    setPlayingState(state, playing) {
        state.playing = playing
    },
    setSequenceList(state, list) {
        state.sequenceList = list
    },
    setPlaylist(state, list) {
        state.playlist = list
    },
    setPlayMode(state, mode) {
        state.playMode = mode
    },
    setCurrentIndex(state, index) {
        state.currentIndex = index
    },
    setFullScreen(state, fullScreen) {
        state.fullScreen = fullScreen
    }
}
export default mutations

import { PLAY_MODE } from '@/assets/js/constant'

export function selectPlay({ commit }, { list, index }) {
    commit('setPlayMode', PLAY_MODE.sequence)
    commit('setSequenceList', list)
    commit('setPlayingState', true)
    commit('setFullScreen', true)
    commit('setPlaylist', list)
    commit('setCurrentIndex', index)
}

export const currentSong = (state) => {
    return state.playlist[state.currentIndex] || {}
}

  selectItem({ song, index }) {
      this.selectPlay({
        list: this.songs,
        index
      })
    }

/** 洗牌算法 */
export function shuffle(source) {
    /**
     * 在编写一些工具函数时，尽量不要用副作用，就是不要改变原始的值
     */
    const arr = source.slice()
    for (let i = 0; i < arr.length; i++) {
        const j = getRandomInt(i)
        swap(arr, i, j)
    }
    return arr
}

function getRandomInt(max) {
    return Math.floor(Math.random() * (max + 1))
}

function swap(arr, i, j) {
    const t = arr[i]
    arr[i] = arr[j]
    arr[j] = t
}

export default {
  setup() {
    // data
    const audioRef = ref(null)
    // vuex
    // computed 响应式 这里的东西一旦变化 数据立马改变
    const store = useStore()
    const currentSong = computed(() => store.getters.currentSong)
    const playlist = computed(() => store.state.playlist)
    const fullScreen = computed(() => store.state.fullScreen)
    const playing = computed(() => store.state.playing)
    const playIcon = computed(() => {
      return playing.value ? 'icon-pause' : 'icon-play'
    })
    const currentIndex = computed(() => store.state.currentIndex)

    // watch
    watch(currentSong, (newSong) => {
      if (!newSong.id || !newSong.url) {
        return
      }
      const audioEl = audioRef.value
      audioEl.src = newSong.url
      audioEl.play()
    })
    watch(playing, (newPlaying) => {
      const audioEl = audioRef.value
      newPlaying ? audioEl.play() : audioEl.pause()
    })
    // methods
    function goBack() {
      store.commit('setFullScreen', false)
    }
    function togglePlay() {
      store.commit('setPlayingState', !playing.value)
    }
    function prev() {
      const list = playlist.value
      if (!list.length) { // 没有任何歌曲
        return
      }
      // 当列表只有一首歌的时候 循环播放
      if (list.length === 1) {
        loop()
      } else {
        let index = currentIndex.value - 1
        if (index === -1) { // 如果是第一页跳转到最后一页
          index = list.length - 1
        }
        store.commit('setCurrentIndex', index)
        if (!playing.value) {
          store.commit('setPlayingState', true)
        }
      }
    }
    function next() {
      const list = playlist.value
      if (!list.length) { // 没有任何歌曲
        return
      }
      let index = currentIndex.value + 1
      if (list.length === 1) {
        loop()
      } else {
        if (index === list.length) { // 如果是第一页跳转到最后一页
          index = 0
        }
        store.commit('setCurrentIndex', index)
        if (!playing.value) {
          store.commit('setPlayingState', true)
        }
      }
    }

    function loop() {
      const audioEl = audioRef.value
      audioEl.currentTime = 0
      audioEl.play()
      store.commit('setPlayingState', true)
    }
    /** 防止电脑待机状态等时候，playing 还是 true的状态 */
    function pause() {
      store.commit('setPlayingState', false)
    }
    return { currentSong, playlist, fullScreen, audioRef, goBack, playIcon, togglePlay, pause, prev, next }
  }
}

   function ready() {
      // 会多次缓存数据所以会多次执行 ready, 如果已经是true 直接返回
      if (songReady.value) {
        return
      }
      songReady.value = true
    }

    watch(playing, (newPlaying) => {
      // 当 songReady 还是false 的时候什么都不做 解决播放报错问题
      if (!songReady.value) {
        return
      }
      const audioEl = audioRef.value
      newPlaying ? audioEl.play() : audioEl.pause()
    })

    watch(currentSong, (newSong) => {
      if (!newSong.id || !newSong.url) {
        return
      }
      /**
       * 当切换歌曲的时候将 songReady 置为 false
       * 然后再去执行 audioEl.play()，然后歌曲去进行缓存，触发canplay事件，然后执行ready函数 将songReady 置为 true
       */
      songReady.value = false
      const audioEl = audioRef.value
      audioEl.src = newSong.url
      audioEl.play()
    })

      if (!songReady.value || !list.length) { // 没有任何歌曲
        return
      }

    const disableCls = computed(() => {
      return songReady.value ? '' : 'disable'
    })

    function error() {
      // 这里的作用是，如果是error 的状态，歌曲是可以前进和后退的
      songReady.value = true
    }

<i @click="changeMode" :class="modeIcon"></i>

import { computed } from 'vue'
import { useStore } from 'vuex'
import { PLAY_MODE } from '@/assets/js/constant'

export default function useMode() {
    const store = useStore()
    const playMode = computed(() => store.state.playMode)
    const modeIcon = computed(() => {
        const playModeVal = playMode.value
        return playModeVal === PLAY_MODE.sequence ? 'icon-sequence' : (playModeVal === PLAY_MODE.random ? 'icon-random' : 'icon-loop')
    })
    function changeMode() {
        const mode = (playMode.value + 1) % 3
        console.log(mode)
        store.dispatch('changeMode', mode)
    }
    return { modeIcon, changeMode }
}

export function changeMode({ commit, state }, mode) {
    // 顺序播放 => 随机播放
    if (mode === PLAY_MODE.random) {
        // 洗牌
        commit('setPlaylist', shuffle(state.sequenceList))
    } else {
        commit('setPlaylist', state.sequenceList)
    }
    commit('setPlayMode', mode)
}

export function changeMode({ commit, state, getters }, mode) {
    const currentId = getters.currentSong.id
    // 顺序播放 => 随机播放
    if (mode === PLAY_MODE.random) {
        // 洗牌
        commit('setPlaylist', shuffle(state.sequenceList))
    } else {
        commit('setPlaylist', state.sequenceList)
    }
    const index = state.playlist.findIndex(song => {
        return song.id === currentId
    })
    commit('setCurrentIndex', index)
    commit('setPlayMode', mode)
}

const state = {
  favoriteList: []
}

    setFavoriteList(state, list) {
        state.favoriteList = list
    }

import storage from 'good-storage'

export function save(item, key, compare, maxLen) {
    const items = storage.get(key, []) // 默认为空
    inertArray(items, item, compare, maxLen)
    storage.set(key, items)
    return items
}

export function remove(key, compare) {
    const items = storage.get(key, [])
    deleteFromArray(items, compare)
    storage.set(key, items)
    return items
}

export function load(key) {
    return storage.get(key, [])
}

function inertArray(arr, val, compare, maxLen) {
    const index = arr.findIndex(compare) // -1
    if (index > 1) {
        return
    }
    arr.unshift(val) // 插入array第一项
    // 收藏最大值
    if (maxLen && arr.length > maxLen) {
        arr.pop() // 先进先出
    }
}

function deleteFromArray(arr, compare) {
    const index = arr.findIndex(compare)
    if (index > -1) {
        arr.splice(index, 1)
    }
}

import { computed } from 'vue'
import { useStore } from 'vuex'
import { save, remove } from '@/assets/js/array-store'
import { FAVORITE_KEY } from '@/assets/js/constant'
export default function useFavorite() {
    // data
    const maxLen = 100

    // vuex
    const store = useStore()
    const favoriteList = computed(() => store.state.favoriteList)

    // methods
    /** 判断歌曲是否存在 favoriteList 中 */
    function getFavoriteIcon(song) {
        console.log(isFavorite(song))
        return isFavorite(song) ? 'icon-favorite' : 'icon-not-favorite'
    }
    /** 收藏或删除歌曲 */
    function toggleFavorite(song) {
        let list
        if (isFavorite(song)) {
            list = remove(FAVORITE_KEY, compare)
        } else {
            list = save(song, FAVORITE_KEY, compare, maxLen)
        }
        store.commit('setFavoriteList', list)

        /**
         * 下面的findIndex 可以让开发人员自定义传参数compare，可以传id,也可以传mid
         * 所以可以利用这点，可以传入一个compare函数，这个compare函数的具体实现是在外部实现的
         * 对于这个库而言，只要支持用户可以传入一个compare函数，不用关心具体的实现细节，这个细节是外部来决定的
         * 只管调用就行了，相当于将这部分的逻辑剥离出去耦合了
        */
        function compare(item) {
            return item.id === song.id
        }
    }

    function isFavorite(song) {
        return favoriteList.value.findIndex((item) => {
            return item.id === song.id
        }) > -1
    }
    return { getFavoriteIcon, toggleFavorite }
}

<template>
  <div class="progress-bar" @click="onClick">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper">
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onclick() {
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-bar {
  height: 30px;
  .bar-inner {
    position: relative;
    top: 13px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    .progress {
      position: absolute;
      height: 100%;
      background: $color-theme;
    }
    .progress-btn-wrapper {
      position: absolute;
      left: -8px;
      top: -13px;
      width: 30px;
      height: 30px;
      .progress-btn {
        position: relative;
        top: 7px;
        left: 7px;
        width: 16px;
        box-sizing: border-box;
        height: 16px;
        border: 3px solid $color-text;
        border-radius: 50%;
        background: $color-theme;
      }
    }
  }
}
</style>

const progressBtnWidth = 16

export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      offset: 0
    }
  },
  watch: {
    progress(newProgress) {
      this.setOffset(newProgress)
    }
  },
  computed: {
    progressStyle() {
      return `width:${this.offset}px`
    },
    btnStyle() {
      return `transform:translate3d(${this.offset}px,0,0)`
    }
  },
  methods: {
    onclick() {
    },
    setOffset(progress) {
      const barWidth = this.$el.clientWidth - progressBtnWidth
      this.offset = barWidth * progress
    }
  }
}

    function updateTime(e) {
      currentTime.value = e.target.currentTime
    }

export function formatTime(interval) {
    interval = interval | 0 // 向下取整
    const minute = ((interval / 60 | 0) + '').padStart(2, '0')
    const second = (interval % 60 + '').padStart(2, '0')
    return `${minute}:${second}`
}

 btnStyle() {
      return `transform:translate3d(${this.offset}px,0,0)`
    }

 setOffset(progress) {
      const barWidth = this.$el.clientWidth - progressBtnWidth // 204
      this.offset = barWidth * progress
    },

    setOffset(progress) {
      const barWidth = this.$el.clientWidth - progressBtnWidth // 减去按钮的16 === 204
      this.offset = barWidth * progress // 转化百分比
      console.log(`${barWidth} * ${progress}`)
    },

 onTouchStart(e) {
      this.touch.x1 = e.touches[0].pageX
      this.touch.beginWidth = this.$refs.progress.clientWidth // 黄色条初始化宽度
    },
    onTouchMove(e) {
      const delta = e.touches[0].pageX - this.touch.x1 // 偏移
      const tempWidth = this.touch.beginWidth + delta // 位移过后 + 黄色条的宽度
      const barWidth = this.$el.clientWidth - progressBtnWidth // 整个进度条的宽度
      const progress = Math.min(1, Math.max(tempWidth / barWidth, 0)) // 0 - 1 区间
      this.offset = barWidth * progress
      this.$emit('progress-changing', progress) // 手指未离开
    },
    onTouchEnd() {
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = this.$refs.progress.clientWidth / barWidth
      this.$emit('progress-changed', progress)
    }

  function onProgressChanging(progress) {
      currentTime.value = currentSong.value.duration * progress
    }
    function onProgressChanged(progress) {
      // 当收松开 再去修改audio的时间
      audioRef.value.currentTime = currentTime.value = currentSong.value.duration * progress
      // 如果当时歌曲是暂停的让它播放
      if (!playing.value) {
        store.commit('setPlayingState', true)
      }
    }

  function updateTime(e) {
      if (!progressChanging) {
        currentTime.value = e.target.currentTime
      }
    }
    function onProgressChanging(progress) {
      progressChanging = true
      currentTime.value = currentSong.value.duration * progress
    }
    function onProgressChanged(progress) {
      progressChanging = false
      // 当收松开 再去修改audio的时间
      audioRef.value.currentTime = currentTime.value = currentSong.value.duration * progress
      // 如果当时歌曲是暂停的让它播放
      if (!playing.value) {
        store.commit('setPlayingState', true)
      }
    }

onClick(e) {
      // getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
      const rect = this.$el.getBoundingClientRect()
      const offsetWidth = e.pageX - rect.left
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = offsetWidth / barWidth
      this.$emit('progress-changed', progress)
    },

   function syncTransform(wrapper, inner) {
        // 外层同步内层
        const wrapperTransform = getComputedStyle(wrapper).transform
        const innerTransform = getComputedStyle(inner).transform
        wrapper.style.transform = wrapperTransform === 'none' ? innerTransform : innerTransform.concat(' ', wrapperTransform)
    }
    return { cdCls, cdRef, cdImageRef }

export function getLyric(song) {
    const mid = song.mid

    return get('api/getLyric', {
        mid
    }).then(result => {
        const lyric = result ? result.lyric : '[00:00:00]该歌曲暂无法获取歌词'
        return lyric
    })
}

import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import { getLyric } from '../../service/song'

export default function useLyric() {
    const store = useStore()
    const currentSong = computed(() => store.getters.currentSong)
    watch(currentSong, async (newSong) => {
        if (!newSong.url || !newSong.id) {
            return
        }
        const lyric = await getLyric(newSong)
        console.log(lyric)
    })
}

const lyricMap = {}

export function getLyric(song) {
    // 如果存在歌词就直接return
    console.log(lyricMap)
    if (song.lyric) {
        return Promise.resolve(song.lyric)
    }
    const mid = song.mid
    /** 进一步优化
     * song 这个对象，不同对象它的mid可能是相等的，所以这里可以定义lyricMap
     * lyricMap key是id 值是lyric
     */
    const lyric = lyricMap[mid]
    if (lyric) {
        return Promise.resolve(lyric)
    }
    return get('api/getLyric', {
        mid
    }).then(result => {
        const lyric = result ? result.lyric : '[00:00:00]该歌曲暂无法获取歌词'
        lyricMap[mid] = lyric
        console.log('发送了http请求歌词')
        return lyric
    })
}

import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { getLyric } from '../../service/song'
import Lyric from 'lyric-parser'

export default function useLyric() {
    const currentLyric = ref(null)
    const store = useStore()
    const currentSong = computed(() => store.getters.currentSong)
    watch(currentSong, async (newSong) => {
        if (!newSong.url || !newSong.id) {
            return
        }
        const lyric = await getLyric(newSong)
        store.commit('addSongLyric', {
            song: newSong,
            lyric
        })
        /**
         * 注意 getLyric 是个异步的过程是有网络延迟的，如果一首歌曲，比如说a切换到b这个时候 b在 getLyric过程中
         * 又从b切到了c, 那么之前b getLyric 返回的逻辑都不用执行了，所以需要做一个判断
         */
        if (currentSong.value.lyric !== lyric) {
            return
        }
        currentLyric.value = new Lyric(lyric, handleLyric)
    })
}
/** 当歌词切换过程中触发 */
function handleLyric() {
}

        /** 这里虽然实例化了 但是没有播放 什么时候播放呢，可以在实例化后播放
         * 但是这里判断，注意这里有两个异步过程 currentSong变化 和 歌曲播放的canplay 触发的 ready 也是一个异步过程
         * 所以要判断 songReady 是否为 true ，为true时证明已经开始播放这时去触发实例播放才有意思
         */
        currentLyric.value = new Lyric(lyric, handleLyric)
        if (songReady.value) {
            playLyric()
        }
    function playLyric() {
        const currentLyricVal = currentLyric.value
        if (currentLyricVal) {
            currentLyricVal.seek(currentTime.value * 1000)
        }
    }

 /** 当歌词切换过程中触发 */
    function handleLyric({ lineNum, txt }) {
        // lineNum 当前行号
        currentLineNum.value = lineNum
        // 因为 lyricListRef 是组件实例所以 加上 Comp
        const scrollComp = lyricScrollRef.value
        // DOM 实例 加上 El
        const listEl = lyricListRef.value
        // 如果没有这个列表就 return
        if (!listEl) {
            return
        }
        if (lineNum > 5) {
            // 保持歌词居中的位置
            const lineEl = listEl.children[lineNum - 5]
            scrollComp.scroll.scrollToElement(lineEl, 1000)
        } else {
            scrollComp.scroll.scrollTo(0, 0, 1000)
        }
    }

    const lyricScrollRef = ref(null)
    const lyricListRef = ref(null)

 /** 当歌词切换过程中触发 */
    function handleLyric({ lineNum, txt }) {
        // lineNum 当前行号
        currentLineNum.value = lineNum
        // 因为 lyricListRef 是组件实例所以 加上 Comp
        const scrollComp = lyricScrollRef.value
        // DOM 实例 加上 El
        const listEl = lyricListRef.value
        // 如果没有这个列表就 return
        if (!listEl) {
            return
        }
        if (lineNum > 5) {
            // 保持歌词居中的位置
            const lineEl = listEl.children[lineNum - 5]
            scrollComp.scroll.scrollToElement(lineEl, 1000)
        } else {
            scrollComp.scroll.scrollTo(0, 0, 1000)
        }
    }

 /** 停止歌曲滚动 */
    function stopLyric() {
        const currentLyricVal = currentLyric.value
        if (currentLyricVal) {
            currentLyricVal.stop()
        }
    }

watch(playing, (newPlaying) => {
      // 当 songReady 还是false 的时候什么都不做 解决播放报错问题
      if (!songReady.value) {
        return
      }
      const audioEl = audioRef.value
      if (newPlaying) {
        audioEl.play()
        playLyric()
      } else {
        audioEl.pause()
        // 因为当歌曲暂停时，歌词还没有暂停，这里要同时暂停歌词 做到同步
        stopLyric()
      }
    })

  function onProgressChanging(progress) {
      progressChanging = true
      currentTime.value = currentSong.value.duration * progress
      // 正在拖动的过程中 先play 同步到当前的位置 再stop 因为changing的时候是不需要变化的
      playLyric()
      stopLyric()
    }
    function onProgressChanged(progress) {
      progressChanging = false
      // 当收松开 再去修改audio的时间
      audioRef.value.currentTime = currentTime.value = currentSong.value.duration * progress
      // 如果当时歌曲是暂停的让它播放
      if (!playing.value) {
        store.commit('setPlayingState', true)
      }
      // 当 拖动结束时 播放歌词
      playLyric()
    }

watch(currentSong, async (newSong) => {
        if (!newSong.url || !newSong.id) {
            return
        }
        stopLyric()
        const lyric = await getLyric(newSong)
        ....
    })

 currentLyric.value = new Lyric(lyric, handleLyric)
        const hasLyric = currentLyric.value.lines.length
        if (hasLyric) {
            if (songReady.value) {
                playLyric()
            }
        } else {
            pureMusicLyric.value = lyric.replace(/\[(\d{2}):(\d{2}):(\d{2})\]/g, '') // 这里的作用是 截取掉[00:00:00]
        }

  // methods
    function onMiddleTouchStart(e) {
        touch.startX = e.touches[0].pageX
    }
    function onMiddleTouchMove(e) {
        const deltaX = e.touches[0].pageX - touch.startX
        // 如果 currentView === 'lyric' 则它的初始值为负的 window.innerWidth
        const left = currentView === 'cd' ? 0 : -window.innerWidth
        const offsetWidth = Math.min(0, Math.max(-window.innerHeight, left + deltaX))
        console.log(offsetWidth)
        touch.percent = Math.abs(offsetWidth / window.innerWidth) // abs 返回绝对值
        if (currentView === 'cd') {
            if (touch.percent > 0.2) {
                currentShow.value = 'lyric'
            } else {
                currentShow.value = 'cd'
            }
        } else {
            if (touch.percent < 0.8) {
                currentShow.value = 'cd'
            } else {
                currentShow.value = 'lyric'
            }
        }
        middleLStyle.value = {
            opacity: 1 - touch.percent,
            transitionDuration: '0ms'
        }

        middleRStyle.value = {
            transform: `translate3d(${offsetWidth}px, 0, 0)`,
            transitionDuration: '0ms'
        }
    }
    function onMiddleTouchEnd() {
        let offsetWidth
        let opacity
        if (currentShow.value === 'cd') {
            currentView = 'cd'
            offsetWidth = 0
            opacity = 1
        } else {
            currentView = 'lyric'
            offsetWidth = -window.innerWidth
            opacity = 0
        }

        const duration = 300
        middleLStyle.value = {
            opacity,
            transitionDuration: `${duration}ms`
        }

        middleRStyle.value = {
            transform: `translate3d(${offsetWidth}px, 0, 0)`,
            transitionDuration: `${duration}ms`
        }
    }

  function onMiddleTouchStart(e) {
        touch.startX = e.touches[0].pageX
        touch.startY = e.touches[0].pageY
        touch.directionLocked = ''
    }

 function onMiddleTouchMove(e) {
        const deltaX = e.touches[0].pageX - touch.startX
        const deltaY = e.touches[0].pageY - touch.startY

        const absDeltaX = Math.abs(deltaX)
        const absDeltaY = Math.abs(deltaY)
        if (!touch.directionLocked) {
            touch.directionLocked = absDeltaX >= absDeltaY ? 'h' : 'v'
        }
        if (touch.directionLocked === 'v') {
            return
        }
    }

<template>
  <transition name="mini">
    <div class="mini-player" v-show="!fullScreen" @click="showNormalPlayer">
      <div class="cd-wrapper">
        <div class="cd" ref="cdRef">
          <img
            ref="cdImageRef"
            width="40"
            height="40"
            :src="currentSong.pic"
            :class="cdCls"
          />
        </div>
      </div>
      <div>
        <h2 class="name">{{ currentSong.name }}</h2>
        <p class="desc">{{ currentSong.singer }}</p>
      </div>
    </div>
  </transition>
</template>

// watch
progress(newProgress) {
      this.setOffset(newProgress)
    }
// methods
setOffset(progress) {
      const barWidth = this.$el.clientWidth - progressBtnWidth // 减去按钮的16 === 204
      this.offset = barWidth * progress // 转化百分比
    },

watch(fullScreen, async (newFullScreen) => {
      if (newFullScreen) {
        await nextTick()
        barRef.value.setOffset(progress.value)
      }
    })

import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useStore } from 'vuex'
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

BScroll.use(Slide)
export default function useMiniSlider() {
    const sliderWrapperRef = ref(null)
    const slider = ref(null)

    const store = useStore()
    const fullScreen = computed(() => store.state.fullScreen)
    const playlist = computed(() => store.state.playlist)
    const currentIndex = computed(() => store.state.currentIndex)
    const sliderShow = computed(() => {
        return !fullScreen.value && !!playlist.value // !! 强制转换为布尔类型
    })

    onMounted(() => {
        let sliderVal
        watch(sliderShow, async (newSliderShow) => {
            if (newSliderShow) {
                await nextTick() // 等待DOM渲染完 如果没有DOM数据 那么 new BScroll 没有意义
                if (!sliderVal) {
                    // 只执行一次
                    sliderVal = slider.value = new BScroll(sliderWrapperRef.value, {
                        click: true, // 配置意思参照官网
                        scrollX: true,
                        scrollY: false,
                        momentum: false,
                        bounce: false,
                        probeType: 2,
                        slide: {
                            autoplay: false, // 禁止自动播放
                            loop: true
                        }
                    })
                    console.log(sliderVal)
                    // 触发时机：当 slide 切换 page 之后触发
                    sliderVal.on('slidePageChanged', ({ pageX }) => {
                        store.commit('setCurrentIndex', pageX)
                        store.commit('setPlayingState', true)
                    })
                } else {
                    sliderVal.refresh()
                }
                // 滚动到对应的歌曲
                sliderVal.goToPage(currentIndex.value, 0, 0)
            }
        })
        watch(currentIndex, async (newIndex) => {
            if (sliderVal && sliderShow.value) {
                await nextTick()
                sliderVal.goToPage(newIndex, 0, 0)
            }
        })
    })
    onUnmounted(() => {
        if (slider.value) {
            slider.value.destroy()
        }
    })
    return { slider, sliderWrapperRef }
}