janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 21:14:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design changes

Browse Source
This commit is contained in:
Janis Hutz
2024-06-30 14:46:22 +02:00
parent c3bff192bb
commit 88ecea1761
4 changed files with 80 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
MusicPlayerV2-GUI/src/components/playerView.vue
View File

@@ -62,7 +62,9 @@
@control="( action ) => { control( action ) }" @play-song="( song ) => { playSong( song ) }"
@add-new-songs="( songs ) => addNewSongs( songs )" @playlist-reorder="( move ) => moveSong( move )"
:is-logged-into-apple-music="player.isLoggedIn"
@add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"></playlistView>
@add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"
@delete-song="song => removeSongFromPlaylist( song )"
@clear-playlist="() => clearPlaylist()"></playlistView>
</div>
<notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
<popupModule @update="( data ) => popupReturnHandler( data )" ref="popup"></popupModule>
@@ -489,6 +491,31 @@
notificationHandler.emit( 'playlist-update', playlist.value );
}
const removeSongFromPlaylist = ( song: number ) => {
playlist.value = player.getQueue();
playlist.value.splice( song, 1 );
player.setPlaylist( playlist.value );
if ( !isPlaying.value ) {
player.prepare( 0 );
isPlaying.value = true;
startProgressTracker();
}
notificationHandler.emit( 'playlist-update', playlist.value );
}
const clearPlaylist = () => {
playlist.value = [];
player.control( 'pause' );
stopProgressTracker();
isPlaying.value = false;
player.setPlaylist( [] );
currentlyPlayingSongArtist.value = '';
currentlyPlayingSongName.value = 'Not playing';
coverArt.value = '';
pos.value = 0;
notificationHandler.emit( 'playlist-update', playlist.value );
}
emits( 'playerStateChange', isShowingFullScreenPlayer.value ? 'show' : 'hide' );
const userStore = useUserStore();

21
MusicPlayerV2-GUI/src/components/playlistView.vue
View File

@@ -1,13 +1,14 @@
<template>
<div>
<h1>Playlist</h1>
<h1>Queue</h1>
<input type="file" multiple accept="audio/*" id="more-songs" class="small-buttons">
<button @click="addNewSongs()" class="small-buttons" title="Load selected files"><span class="material-symbols-outlined">upload</span></button>
<button @click="openSearch()" v-if="$props.isLoggedIntoAppleMusic" class="small-buttons" title="Search Apple Music for the song"><span class="material-symbols-outlined">search</span></button>
<button @click="clearPlaylist()" class="small-buttons" title="Clear the playlist"><span class="material-symbols-outlined">delete</span></button>
<p v-if="!hasSelectedSongs">Please select at least one song to proceed</p>
<div class="playlist-box" id="pl-box">
<!-- TODO: Allow editing additionalInfo. Think also how to make it persist over reloads... Export to JSON and then best-guess add them? Very easy for Apple Music 'cause ID, but how for local songs? -->
<!-- TODO: Allow deleting songs, as well as whole playlist -->
<!-- TODO: Allow deleting songs, as well as whole playlist -> Handle on player side -->
<!-- TODO: Handle long AppleMusic Playlists, as AppleMusic doesn't automatically load all songs of a playlist -->
<div class="song" v-for="song in computedPlaylist" v-bind:key="song.id"
:class="( song.id === ( $props.playlist ? $props.playlist [ $props.currentlyPlaying ?? 0 ].id : '' ) && isPlaying ? 'playing' : ' not-playing' )
@@ -27,6 +28,7 @@
<span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'down' )" title="Move song down" v-if="canBeMoved( 'down', song.id )">arrow_downward</span>
<h3 class="song-title">{{ song.title }}</h3>
<p class="playing-in">{{ getTimeUntil( song ) }}</p>
<button @click="deleteSong( song.id )" class="small-buttons" title="Remove this song from the queue" v-if="canBeMoved( 'down', song.id ) || canBeMoved( 'up', song.id )"><span class="material-symbols-outlined">delete</span></button>
</div>
</div>
<searchView ref="search" @selected-song="( song ) => { addNewSongsAppleMusic( song ) }"></searchView>
@@ -34,6 +36,7 @@
</template>
<script setup lang="ts">
// TODO: Add logout button
import type { AppleMusicSongData, ReadFile, Song } from '@/scripts/song';
import { computed, ref } from 'vue';
import searchView from './searchView.vue';
@@ -131,6 +134,18 @@
}
} );
const deleteSong = ( songID: string ) => {
for ( const song in props.playlist ) {
if ( props.playlist[ song ].id === songID ) {
emits( 'delete-song', parseInt( song ) );
}
}
}
const clearPlaylist = () => {
emits( 'clear-playlist', '' );
}
const control = ( action: string ) => {
emits( 'control', action );
@@ -183,7 +198,7 @@
}
}
const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music' ] );
const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist' ] );
</script>
<style scoped>