오늘 한 일:

• prestoMusic: VueJS를 이용해 웹 스킨 제작
  • 컨트롤러
  • 레이아웃: 서치바 이동, 메뉴 리스트 변경(플레이리스트, 앨범, 아티스트, 장르)
  • 앨범 선택 시 레이아웃 및 애니메이션

내일 할 일:

• mongoDB
• nodejs
• git

prestomusic

player제작

요구사항

1. 음악에 대한 정보는 코어가 전부 갖고있다

   • 현재 재생중인 곡에 정보만 player에 넘김

   • 재생 곡 정보

     • {
           title: '',
           singer: '',
           albumCoverURL: '',
           IsHiRes: true,
           runningtime: 100000
       }
       

2. player가 사용하는 core API

   • 다음곡 재생: core.next()
   • 이전곡 재생: core.forward()
   • shuffle: core.shuffle()
   • repeat: core.repeat()
   • 볼륨(0~100): slider와 기능이 비슷하므로 컴포넌트화: core.setVolume(20)
   • setCurrentTime: core.setCurrentTime(200000)
   • play/pause: core.play() / core.pause()
   • currentTime을 넘겨줄 함수: core.onReturnCurrentTime
   • currentTime 반환만 멈춤: core.pauseToReturnCurrentTime
     • 주의 : 곡 재생은 일어나기 때문에 pause와는 다름

3. player의 data

   • currentTime
   • onPlay
   • currentMusic: {}

4. player의 methods

   • calcPosition(widthPercentage)
   • setCurrentTime
   • computed.formatTime()

설계

HorizonSlider 컴포넌트

Vue.component('horizon-slider', {
    methods: {
        holdSliderThumb(e) {
            this.setPosition(e);
            this.$emit('hold-slider-thumb', this.widthP);
        },
        releaseSliderThumb() {
            this.$emit('release-slider-thumb');
        }
    }
    template: `
	<div
		@mousedown='holdSliderThumb'
		@drag='holdSliderThumb'
		@mouseup='releaseSliderThumb'
		@dragend='releaseSliderThumb'>
	</div>`
})

Player Vue 인스턴스

const player = new Vue({
    data: {
        core,
        currentMusic: {...},
        currentTime: 0,
        onPlay: true;
    },
    methods: {
        calcCurrentTime(widthPercentage) {
            this.currentTime = this.currentMusic.runningTime * (widthP / 100);
        },
        formatTime(time) {}
    }
})

...
	<horizon-slider
		v-on:hold-slider-thumb='calcCurrentTime'
		b-on:release-slider-thumb=''>
	</horizon-slider>