mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 13:04:23 +00:00
some progress on player
This commit is contained in:
56
MusicPlayerV2-GUI/src/assets/appleMusicIcon.svg
Normal file
56
MusicPlayerV2-GUI/src/assets/appleMusicIcon.svg
Normal file
@@ -0,0 +1,56 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="361px" height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Layer_5">
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="180" y1="358.6047" x2="180" y2="7.7586">
|
||||
<stop offset="0" style="stop-color:#FA233B"/>
|
||||
<stop offset="1" style="stop-color:#FB5C74"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M360,112.61c0-4.3,0-8.6-0.02-12.9c-0.02-3.62-0.06-7.24-0.16-10.86c-0.21-7.89-0.68-15.84-2.08-23.64
|
||||
c-1.42-7.92-3.75-15.29-7.41-22.49c-3.6-7.07-8.3-13.53-13.91-19.14c-5.61-5.61-12.08-10.31-19.15-13.91
|
||||
c-7.19-3.66-14.56-5.98-22.47-7.41c-7.8-1.4-15.76-1.87-23.65-2.08c-3.62-0.1-7.24-0.14-10.86-0.16C255.99,0,251.69,0,247.39,0
|
||||
H112.61c-4.3,0-8.6,0-12.9,0.02c-3.62,0.02-7.24,0.06-10.86,0.16C80.96,0.4,73,0.86,65.2,2.27c-7.92,1.42-15.28,3.75-22.47,7.41
|
||||
c-7.07,3.6-13.54,8.3-19.15,13.91c-5.61,5.61-10.31,12.07-13.91,19.14c-3.66,7.2-5.99,14.57-7.41,22.49
|
||||
c-1.4,7.8-1.87,15.76-2.08,23.64c-0.1,3.62-0.14,7.24-0.16,10.86C0,104.01,0,108.31,0,112.61v134.77c0,4.3,0,8.6,0.02,12.9
|
||||
c0.02,3.62,0.06,7.24,0.16,10.86c0.21,7.89,0.68,15.84,2.08,23.64c1.42,7.92,3.75,15.29,7.41,22.49c3.6,7.07,8.3,13.53,13.91,19.14
|
||||
c5.61,5.61,12.08,10.31,19.15,13.91c7.19,3.66,14.56,5.98,22.47,7.41c7.8,1.4,15.76,1.87,23.65,2.08c3.62,0.1,7.24,0.14,10.86,0.16
|
||||
c4.3,0.03,8.6,0.02,12.9,0.02h134.77c4.3,0,8.6,0,12.9-0.02c3.62-0.02,7.24-0.06,10.86-0.16c7.89-0.21,15.85-0.68,23.65-2.08
|
||||
c7.92-1.42,15.28-3.75,22.47-7.41c7.07-3.6,13.54-8.3,19.15-13.91c5.61-5.61,10.31-12.07,13.91-19.14
|
||||
c3.66-7.2,5.99-14.57,7.41-22.49c1.4-7.8,1.87-15.76,2.08-23.64c0.1-3.62,0.14-7.24,0.16-10.86c0.03-4.3,0.02-8.6,0.02-12.9V112.61
|
||||
z"/>
|
||||
</g>
|
||||
<g id="Glyph_2_">
|
||||
<g>
|
||||
<path class="st1" d="M254.5,55c-0.87,0.08-8.6,1.45-9.53,1.64l-107,21.59l-0.04,0.01c-2.79,0.59-4.98,1.58-6.67,3
|
||||
c-2.04,1.71-3.17,4.13-3.6,6.95c-0.09,0.6-0.24,1.82-0.24,3.62c0,0,0,109.32,0,133.92c0,3.13-0.25,6.17-2.37,8.76
|
||||
c-2.12,2.59-4.74,3.37-7.81,3.99c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01
|
||||
c-4.98,1.93-8.71,4.39-11.68,7.51c-5.89,6.17-8.28,14.54-7.46,22.38c0.7,6.69,3.71,13.09,8.88,17.82
|
||||
c3.49,3.2,7.85,5.63,12.99,6.66c5.33,1.07,11.01,0.7,19.31-0.98c4.42-0.89,8.56-2.28,12.5-4.61c3.9-2.3,7.24-5.37,9.85-9.11
|
||||
c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1.19-8.7,1.19-13.26l0-116.15c0-6.22,1.76-7.86,6.78-9.08c0,0,88.94-17.94,93.09-18.75
|
||||
c5.79-1.11,8.52,0.54,8.52,6.61l0,79.29c0,3.14-0.03,6.32-2.17,8.92c-2.12,2.59-4.74,3.37-7.81,3.99
|
||||
c-2.33,0.47-4.66,0.94-6.99,1.41c-8.84,1.78-14.59,2.99-19.8,5.01c-4.98,1.93-8.71,4.39-11.68,7.51
|
||||
c-5.89,6.17-8.49,14.54-7.67,22.38c0.7,6.69,3.92,13.09,9.09,17.82c3.49,3.2,7.85,5.56,12.99,6.6c5.33,1.07,11.01,0.69,19.31-0.98
|
||||
c4.42-0.89,8.56-2.22,12.5-4.55c3.9-2.3,7.24-5.37,9.85-9.11c2.62-3.75,4.31-7.92,5.24-12.35c0.96-4.57,1-8.7,1-13.26V64.46
|
||||
C263.54,58.3,260.29,54.5,254.5,55z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
10
MusicPlayerV2-GUI/src/components/libraryView.vue
Normal file
10
MusicPlayerV2-GUI/src/components/libraryView.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Library</h1>
|
||||
<playlistsView></playlistsView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import playlistsView from '@/components/playlistsView.vue';
|
||||
</script>
|
||||
119
MusicPlayerV2-GUI/src/components/playerView.vue
Normal file
119
MusicPlayerV2-GUI/src/components/playerView.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="'player' + ( $props.isShowingFullScreenPlayer ? '' : ' player-hidden' )">
|
||||
<!-- TODO: Make cover art of song or otherwise MusicPlayer Logo -->
|
||||
<img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo-player">
|
||||
<p class="song-name">{{ currentlyPlayingSongName }}</p>
|
||||
<div class="controls-wrapper">
|
||||
<span class="material-symbols-outlined controls" @click="control( 'previous' )">skip_previous</span>
|
||||
<span class="material-symbols-outlined controls" @click="control( '10s-back' )">replay_10</span>
|
||||
<span class="material-symbols-outlined controls" v-if="!isPlaying" @click="playPause()" id="play-pause">pause</span>
|
||||
<span class="material-symbols-outlined controls" v-else @click="playPause()" id="play-pause">play_arrow</span>
|
||||
<span class="material-symbols-outlined controls" @click="control( '10s-forward' )">forward_10</span>
|
||||
<span class="material-symbols-outlined controls" @click="control( 'next' )">skip_next</span>
|
||||
|
||||
<span class="material-symbols-outlined controls" @click="control( 'repeat' )" style="margin-left: 20px;">repeat{{ repeatMode }}</span>
|
||||
<span class="material-symbols-outlined controls" @click="control( 'shuffle' )">shuffle{{ shuffleMode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<playlistView :class="'playlist-view' + ( $props.isShowingFullScreenPlayer ? '' : ' hidden' )"></playlistView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO: Handle resize, hide all non-essential controls when below 900px width
|
||||
|
||||
import { ref } from 'vue';
|
||||
import playlistView from '@/components/playlistView.vue';
|
||||
|
||||
const isPlaying = ref( false );
|
||||
const repeatMode = ref( '' );
|
||||
const shuffleMode = ref( '' );
|
||||
const currentlyPlayingSongName = ref( 'Not playing' );
|
||||
|
||||
const playPause = () => {
|
||||
isPlaying.value = !isPlaying.value;
|
||||
// TODO: Execute function on player
|
||||
}
|
||||
|
||||
const control = ( action: string ) => {
|
||||
if ( action === 'repeat' ) {
|
||||
if ( repeatMode.value === '' ) {
|
||||
repeatMode.value = '_on';
|
||||
} else if ( repeatMode.value === '_on' ) {
|
||||
repeatMode.value = '_one_on';
|
||||
} else {
|
||||
repeatMode.value = '';
|
||||
}
|
||||
} else if ( action === 'shuffle' ) {
|
||||
if ( shuffleMode.value === '' ) {
|
||||
shuffleMode.value = '_on';
|
||||
} else {
|
||||
shuffleMode.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const props = defineProps( {
|
||||
'isShowingFullScreenPlayer': {
|
||||
'default': false,
|
||||
'required': true,
|
||||
'type': Boolean
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.player {
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
margin-left: 10px;
|
||||
margin-right: auto;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.logo-player {
|
||||
height: 80%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.playlist-view {
|
||||
height: 15%;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.player-hidden {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
cursor: pointer;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.controls-wrapper {
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#play-pause {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
5
MusicPlayerV2-GUI/src/components/playlistView.vue
Normal file
5
MusicPlayerV2-GUI/src/components/playlistView.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Playlist</h1>
|
||||
</div>
|
||||
</template>
|
||||
5
MusicPlayerV2-GUI/src/components/playlistsView.vue
Normal file
5
MusicPlayerV2-GUI/src/components/playlistsView.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Your playlists</h1>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,15 +1,31 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
|
||||
<h1>MusicPlayer</h1>
|
||||
<div class="app-view">
|
||||
<div class="home-view" v-if="isLoggedIntoAppleMusic">
|
||||
<libraryView></libraryView>
|
||||
<playerView class="player-view" :is-showing-full-screen-player="isShowingFullScreenPlayer"></playerView>
|
||||
</div>
|
||||
<div v-else class="home-view">
|
||||
<img src="@/assets/appleMusicIcon.svg" alt="Apple Music Icon">
|
||||
<button class="fancy-button" style="margin-top: 20px;">Log into Apple Music</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import playerView from '@/components/playerView.vue';
|
||||
import libraryView from '@/components/libraryView.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const isLoggedIntoAppleMusic = ref( true );
|
||||
const isShowingFullScreenPlayer = ref( false );
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-view {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.home-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@@ -21,4 +37,13 @@
|
||||
.logo {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.player-view {
|
||||
height: 10vh;
|
||||
width: calc( 100vw - 20px );
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
background-color: var( --secondary-color );
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user