mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 13:04:23 +00:00
some more progress
This commit is contained in:
@@ -27,13 +27,13 @@
|
||||
<div class="player-wrapper">
|
||||
<div class="player">
|
||||
<div class="controls">
|
||||
<span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'previous' )">skip_previous</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'replay10' )">replay_10</span>
|
||||
<span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying && audioLoaded" @click="control( 'play' )">play_arrow</span>
|
||||
<span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying && audioLoaded" @click="control( 'pause' )">pause</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'previous' )">skip_previous</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'replay10' )">replay_10</span>
|
||||
<span class="material-symbols-outlined control-icon play-pause" v-if="!isPlaying && hasSelectedPlaylist" @click="control( 'play' )">play_arrow</span>
|
||||
<span class="material-symbols-outlined control-icon play-pause" v-else-if="isPlaying && hasSelectedPlaylist" @click="control( 'pause' )">pause</span>
|
||||
<span class="material-symbols-outlined control-icon play-pause" style="cursor: default;" v-else>play_disabled</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'forward10' )">forward_10</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="audioLoaded ? 'active': 'inactive'" @click="control( 'next' )" style="margin-right: 1vw;">skip_next</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'forward10' )">forward_10</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" @click="control( 'next' )" style="margin-right: 1vw;">skip_next</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-if="!isShuffleEnabled" @click="control( 'shuffleOn' )">shuffle</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-else @click="control( 'shuffleOff' )">shuffle_on</span>
|
||||
<span class="material-symbols-outlined control-icon" :class="hasSelectedPlaylist ? 'active': 'inactive'" v-if="repeatMode === 'off'" @click="control( 'repeatOne' )">repeat</span>
|
||||
@@ -48,9 +48,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="song-info">
|
||||
<audio v-if="audioLoaded" :src="'http://localhost:8081/getSongFile?filename=' + playingSong.filename" id="music-player"></audio>
|
||||
<div class="song-info-wrapper">
|
||||
<div v-if="audioLoaded" style="cursor: pointer;">
|
||||
<div v-if="hasSelectedPlaylist" style="cursor: pointer;">
|
||||
<span class="material-symbols-outlined image" v-if="!playingSong.hasCoverArt">music_note</span>
|
||||
<img v-else :src="playingSong.coverArtURL" class="image">
|
||||
</div>
|
||||
|
||||
@@ -16,8 +16,9 @@ const app = Vue.createApp( {
|
||||
isPlaying: false,
|
||||
isShuffleEnabled: false,
|
||||
repeatMode: 'off',
|
||||
audioLoaded: false,
|
||||
// TODO: Set audio loaded to true
|
||||
playbackPosBeautified: '',
|
||||
durationBeautified: '',
|
||||
isShowingRemainingTime: false,
|
||||
|
||||
// slider
|
||||
offset: 0,
|
||||
@@ -151,6 +152,126 @@ const app = Vue.createApp( {
|
||||
},
|
||||
calcPlaybackPos() {
|
||||
this.pos = Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * this.duration );
|
||||
},
|
||||
sendUpdate( update ) {
|
||||
let data = {};
|
||||
if ( update === 'pos' ) {
|
||||
data = this.pos;
|
||||
} else if ( update === 'playingSong' ) {
|
||||
data = this.playingSong;
|
||||
} else if ( update === 'isPlaying' ) {
|
||||
data = this.isPlaying;
|
||||
} else if ( update === 'songQueue' ) {
|
||||
data = this.songQueue;
|
||||
} else if ( update === 'queuePos' ) {
|
||||
data = this.queuePos;
|
||||
}
|
||||
let fetchOptions = {
|
||||
method: 'post',
|
||||
body: JSON.stringify( { 'type': update, 'data': data } ),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'charset': 'utf-8'
|
||||
},
|
||||
};
|
||||
fetch( 'http://localhost:8081/statusUpdate', fetchOptions ).catch( err => {
|
||||
console.error( err );
|
||||
} );
|
||||
},
|
||||
control( action ) {
|
||||
if ( action === 'play' ) {
|
||||
this.musicKit.play();
|
||||
this.progressTracker = setInterval( () => {
|
||||
this.pos = this.musicKit.currentPlaybackTime;
|
||||
|
||||
const minuteCount = Math.floor( this.pos / 60 );
|
||||
this.playbackPosBeautified = minuteCount + ':';
|
||||
if ( ( '' + minuteCount ).length === 1 ) {
|
||||
this.playbackPosBeautified = '0' + minuteCount + ':';
|
||||
}
|
||||
const secondCount = Math.floor( this.pos - minuteCount * 60 );
|
||||
if ( ( '' + secondCount ).length === 1 ) {
|
||||
this.playbackPosBeautified += '0' + secondCount;
|
||||
} else {
|
||||
this.playbackPosBeautified += secondCount;
|
||||
}
|
||||
|
||||
if ( this.isShowingRemainingTime ) {
|
||||
const minuteCounts = Math.floor( ( this.playingSong.duration - this.pos ) / 60 );
|
||||
this.durationBeautified = '-' + String( minuteCounts ) + ':';
|
||||
if ( ( '' + minuteCounts ).length === 1 ) {
|
||||
this.durationBeautified = '-0' + minuteCounts + ':';
|
||||
}
|
||||
const secondCounts = Math.floor( ( this.playingSong.duration - this.pos ) - minuteCounts * 60 );
|
||||
if ( ( '' + secondCounts ).length === 1 ) {
|
||||
this.durationBeautified += '0' + secondCounts;
|
||||
} else {
|
||||
this.durationBeautified += secondCounts;
|
||||
}
|
||||
}
|
||||
}, 20 );
|
||||
this.sendUpdate( 'pos' );
|
||||
this.sendUpdate( 'isPlaying' );
|
||||
} else if ( action === 'pause' ) {
|
||||
this.musicKit.pause();
|
||||
this.sendUpdate( 'pos' );
|
||||
try {
|
||||
clearInterval( this.progressTracker );
|
||||
clearInterval( this.notifier );
|
||||
} catch ( err ) {};
|
||||
this.isPlaying = false;
|
||||
this.sendUpdate( 'isPlaying' );
|
||||
} else if ( action === 'replay10' ) {
|
||||
this.musicKit.seekToTime( this.musicKit.currentPlaybackTime > 10 ? musicPlayer.currentPlaybackTime - 10 : 0 );
|
||||
this.playbackPos = musicPlayer.currentTime;
|
||||
this.sendUpdate( 'pos' );
|
||||
} else if ( action === 'forward10' ) {
|
||||
if ( musicPlayer.currentTime < ( musicPlayer.duration - 10 ) ) {
|
||||
musicPlayer.currentTime = musicPlayer.currentTime + 10;
|
||||
this.playbackPos = musicPlayer.currentTime;
|
||||
this.sendUpdate( 'pos' );
|
||||
} else {
|
||||
if ( this.repeatMode !== 'one' ) {
|
||||
this.control( 'next' );
|
||||
} else {
|
||||
musicPlayer.currentTime = 0;
|
||||
this.playbackPos = musicPlayer.currentTime;
|
||||
this.sendUpdate( 'pos' );
|
||||
}
|
||||
}
|
||||
} else if ( action === 'reset' ) {
|
||||
clearInterval( this.progressTracker );
|
||||
this.playbackPos = 0;
|
||||
musicPlayer.currentTime = 0;
|
||||
this.sendUpdate( 'pos' );
|
||||
} else if ( action === 'next' ) {
|
||||
this.$emit( 'update', { 'type': 'next' } );
|
||||
} else if ( action === 'previous' ) {
|
||||
if ( this.playbackPos > 3 ) {
|
||||
this.playbackPos = 0;
|
||||
musicPlayer.currentTime = 0;
|
||||
this.sendUpdate( 'pos' );
|
||||
} else {
|
||||
this.$emit( 'update', { 'type': 'previous' } );
|
||||
}
|
||||
} else if ( action === 'shuffleOff' ) {
|
||||
this.$emit( 'update', { 'type': 'shuffleOff' } );
|
||||
this.isShuffleEnabled = false;
|
||||
} else if ( action === 'shuffleOn' ) {
|
||||
this.$emit( 'update', { 'type': 'shuffle' } );
|
||||
this.isShuffleEnabled = true;
|
||||
} else if ( action === 'repeatOne' ) {
|
||||
this.repeatMode = 'one';
|
||||
} else if ( action === 'repeatAll' ) {
|
||||
this.$emit( 'update', { 'type': 'repeat' } );
|
||||
this.repeatMode = 'all';
|
||||
} else if ( action === 'repeatOff' ) {
|
||||
this.$emit( 'update', { 'type': 'repeatOff' } );
|
||||
this.repeatMode = 'off';
|
||||
} else if ( action === 'exitFancyView' ) {
|
||||
this.isShowingFancyView = false;
|
||||
this.$emit( 'update', { 'type': 'fancyView', 'status': false } );
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
Reference in New Issue
Block a user