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

some marketing + other changes & fixes

Browse Source
This commit is contained in:
Janis Hutz
2024-07-21 08:21:09 +02:00
parent 221ae67ec2
commit a5e2520d28
9 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
MusicPlayerV2-GUI/src/components/notificationsModule.vue
View File

@@ -1,7 +1,7 @@
<!-- eslint-disable no-undef -->
<template>
<div id="notifications">
<div class="message-box" :class="[ location, size ]">
<div class="message-box" :class="[ location, size ]" :style="'z-index: ' + ( messageType === 'hide' ? '-1' : '1000' )">
<div class="message-container" :class="messageType">
<button @click="handleNotifications();" class="close-notification"><span class="material-symbols-outlined close-notification-icon">close</span></button>
<span class="material-symbols-outlined types hide" v-if="messageType == 'hide'">question_mark</span>
@@ -150,15 +150,11 @@
notificationTimeout = setTimeout( () => {
handleNotifications();
}, notifications.value[ currentDID.value ].showDuration * 1000 );
// eslint-disable-next-line no-undef
$( '.message-box' ).css( 'z-index', 1000 );
} else {
try {
clearInterval( progressBar );
} catch (err) { /* empty */ }
messageType.value = 'hide';
// eslint-disable-next-line no-undef
$( '.message-box' ).css( 'z-index', -1 );
}
}
@@ -185,7 +181,7 @@
<style scoped>
.message-box {
position: fixed;
z-index: -1;
z-index: -100;
color: white;
transition: all 0.5s;
width: 95vw;

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

@@ -24,7 +24,7 @@
</div>
</div>
</div>
<div :class="'controls-wrapper' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )">
<div :class="'controls-wrapper' + ( isShowingFullScreenPlayer ? ' full-screen' : '' )" :style="playlist.length > 0 ? '' : 'pointer-events: none'">
<div class="main-controls">
<span class="material-symbols-outlined controls next-previous" @click="control( 'previous' )" id="previous" v-if="isShowingFullScreenPlayer">skip_previous</span>
<span class="material-symbols-outlined controls forward-back" @click="control( 'back' )" :style="'rotate: -' + 360 * clickCountBack + 'deg;'" v-if="isShowingFullScreenPlayer">replay_10</span>
@@ -64,7 +64,8 @@
:is-logged-into-apple-music="player.isLoggedIn"
@add-new-songs-apple-music="( song ) => addNewSongFromObject( song )"
@delete-song="song => removeSongFromPlaylist( song )"
@clear-playlist="() => clearPlaylist()"></playlistView>
@clear-playlist="() => clearPlaylist()"
@send-additional-info="() => sendAdditionalInfo()"></playlistView>
</div>
<notificationsModule ref="notifications" location="bottomleft" size="bigger"></notificationsModule>
<popupModule @update="( data ) => popupReturnHandler( data )" ref="popup"></popupModule>
@@ -225,10 +226,14 @@
notifications.value.createNotification( 'Disconnected successfully!', 5, 'ok', 'normal' );
}
} else if ( action === 'show-share' ) {
alert( 'You are currently connected to share "' + roomName.value
+ '". \nYou can connect to it via https://music.janishutz.com/share/' + roomName.value
+ '. \n\nYou can connect to the fancy showcase screen using this link: https://music.janishutz.com/fancy/' + roomName.value
+ '. Be aware that this one will use significantly more system AND network resources, so only use that for a screen that is front and center, not for a QR code to have all people connect to.' );
popup.value.openPopup( {
title: 'Details on share',
subtitle: 'You are currently connected to share "' + roomName.value
+ '". \nYou can connect to it via <a href="https://music.janishutz.com/share/' + roomName.value + '" target="_blank">https://music.janishutz.com/share/' + roomName.value + '</a>'
+ '. \n\nYou can connect to the fancy showcase screen using this link: <a href="https://music.janishutz.com/fancy/' + roomName.value + '" target="_blank">https://music.janishutz.com/fancy/' + roomName.value + '</a>'
+ '. Be aware that this one will use significantly more system AND network resources, so only use that for a screen that is front and center, not for a QR code to have all people connect to.'
} );
currentlyOpenPopup = 'share-details';
}
}
@@ -514,6 +519,11 @@
notificationHandler.emit( 'playlist-update', playlist.value );
}
const sendAdditionalInfo = () => {
notifications.value.createNotification( 'Additional song info transmitted', 5, 'ok', 'normal' );
notificationHandler.emit( 'playlist-update', playlist.value );
}
emits( 'playerStateChange', isShowingFullScreenPlayer.value ? 'show' : 'hide' );
const userStore = useUserStore();

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

@@ -6,9 +6,9 @@
<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>
<button title="Transmit additional information" class="small-buttons" @click="sendAdditionalInfo()"><span class="material-symbols-outlined">send</span></button>
<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 -> Handle on player side -->
<!-- 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? Maybe using retrieved ID from Apple Music? -->
<!-- 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,7 +27,10 @@
<span class="material-symbols-outlined move-icon" @click="moveSong( song.id, 'up' )" title="Move song up" v-if="canBeMoved( 'up', song.id )">arrow_upward</span>
<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>
<div>
<input type="text" placeholder="Additional information for remote display" v-model="song.additionalInfo">
<p class="playing-in">{{ getTimeUntil( song ) }}</p>
</div>
<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>
@@ -36,7 +39,7 @@
</template>
<script setup lang="ts">
// TODO: Add logout button
// TODO: Add logout button
import type { AppleMusicSongData, ReadFile, Song } from '@/scripts/song';
import { computed, ref } from 'vue';
import searchView from './searchView.vue';
@@ -198,7 +201,11 @@
}
}
const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist' ] );
const sendAdditionalInfo = () => {
emits( 'send-additional-info' );
}
const emits = defineEmits( [ 'play-song', 'control', 'playlist-reorder', 'add-new-songs', 'add-new-songs-apple-music', 'delete-song', 'clear-playlist', 'send-additional-info' ] );
</script>
<style scoped>
@@ -224,11 +231,11 @@
}
.song .song-cover {
width: 5vw;
height: 5vw;
width: 6rem;
height: 6rem;
object-fit: cover;
object-position: center;
font-size: 5vw;
font-size: 6rem;
}
.song-title {
@@ -244,14 +251,14 @@
align-items: center;
flex-direction: row;
margin: 0;
width: 5vw;
height: 5vw;
width: 6rem;
height: 6rem;
background-color: rgba( 0, 0, 0, 0.6 );
}
.playing-symbols-wrapper {
width: 4vw;
height: 5vw;
width: 5rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
@@ -294,11 +301,11 @@
.play-icon, .pause-icon {
display: none;
width: 5vw;
height: 5vw;
width: 6rem;
height: 6rem;
object-fit: cover;
object-position: center;
font-size: 5vw;
font-size: 6rem;
cursor: pointer;
user-select: none;
}

2
MusicPlayerV2-GUI/src/components/playlistsView.vue
View File

@@ -7,7 +7,7 @@
</div>
<div v-else-if="!$props.isLoggedIn" class="not-logged-in">
<p>You are not logged into Apple Music. We therefore can't show you your playlists. <a href="" title="Refreshes the page, allowing you to log in">Change that</a></p>
<p>Use the below button to load songs from your local disk</p>
<p>Use the button below to load songs from your local disk</p>
<input class="pl-loader-button" type="file" multiple="true" accept="audio/*" id="pl-loader"><br>
<button @click="loadPlaylistFromDisk()" class="pl-loader-button" id="load-button">Load</button>
<p v-if="!hasSelectedSongs">Please select at least one song to proceed!</p>