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

start implementing login

Browse Source
This commit is contained in:
Janis Hutz
2024-06-10 14:42:08 +02:00
parent eb15e1fc3f
commit 28ae628f4d
8 changed files with 178 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
MusicPlayerV2-GUI/index.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<title>Vite App</title> <title>MusicPlayer</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

40
MusicPlayerV2-GUI/src/App.vue
View File

@@ -134,6 +134,46 @@
.clr-open { .clr-open {
border: black solid 1px !important; border: black solid 1px !important;
} }
#themeSelector {
position: fixed;
top: 10px;
right: 10px;
background: none;
border: none;
color: var( --primary-color );
cursor: pointer;
}
</style>
<style>
.fancy-button {
text-decoration: none;
color: white;
padding: 20px;
border-radius: 20px;
border: none;
background: linear-gradient( 45deg, rgb(0, 33, 139), rgb(151, 0, 0) );
font-size: larger;
transition: all 0.5s;
background-size: 150%;
cursor: pointer;
}
.fancy-button:hover {
border-radius: 5px;
background-position: 50%;
}
.fancy-button-inactive {
background: linear-gradient( 45deg, rgba(0, 33, 139, 0.6), rgba(151, 0, 0, 0.6) );
cursor: not-allowed;
}
.fancy-button-inactive:hover {
border-radius: 20px;
background-position: 0px;
}
</style> </style>
<script setup lang="ts"> <script setup lang="ts">

62
MusicPlayerV2-GUI/src/router/index.ts
View File

@@ -7,9 +7,69 @@ const router = createRouter( {
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeView component: HomeView,
meta: {
'authRequired': false,
'title': 'Login'
}
},
{
path: '/app',
name: 'app',
component: () => import( '../views/AppView.vue' ),
meta: {
'authRequired': false,
'title': 'App'
}
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import( '../views/404View.vue' ),
meta: {
title: '404 :: Page not found',
transition: 'scale',
}
}, },
] ]
} ); } );
// router.beforeResolve( ( to, _from, next ) => {
// if ( to.name ) {
// NProgress.start();
// }
// next();
// } );
// router.beforeEach( ( to ) => {
// const userStore = useUserStore();
// const isUserAuthenticated = userStore.getUserAuthenticated;
// const isAdminAuthenticated = userStore.getAdminAuthenticated;
// if ( to.meta.adminAuthRequired && !isAdminAuthenticated ) {
// return { name: 'adminLogin' };
// } else if ( to.name === 'adminLogin' && isAdminAuthenticated ) {
// return { name: 'admin' };
// }
// // else if ( isUserAuthenticated && to.name === 'login' ) {
// // return { name: 'account' };
// // }
// else if ( !isUserAuthenticated && to.name === 'checkout' ) {
// localStorage.setItem( 'redirect', '/checkout' );
// return { name: 'login' };
// } else if ( !isUserAuthenticated && to.meta.authRequired ) {
// localStorage.setItem( 'redirect', to.fullPath );
// return { name: 'login' };
// }
// // TODO: Make titles adapt to languages as well
// // TODO: Make multi-lang
// } );
router.afterEach( ( to ) => {
window.scrollTo( { top: 0, behavior: 'smooth' } );
document.title = to.meta.title ? to.meta.title + ' - MusicPlayer' : 'MusicPlayer';
// NProgress.done();
} );
export default router; export default router;

24
MusicPlayerV2-GUI/src/views/404View.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="home-view">
<img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
<h1>404</h1>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.home-view {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.logo {
height: 50vh;
}
</style>

24
MusicPlayerV2-GUI/src/views/AppView.vue Normal file
View File

@@ -0,0 +1,24 @@
<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>
</template>
<script setup lang="ts">
</script>
<style scoped>
.home-view {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.logo {
height: 50vh;
}
</style>

28
MusicPlayerV2-GUI/src/views/HomeView.vue
View File

@@ -1,10 +1,32 @@
<template> <template>
<div> <div class="home-view">
<h1>Hello World</h1> <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
<div class="player-panel-link"></div> <h1>MusicPlayer</h1>
<button @click="login()" class="fancy-button">Log in</button>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import router from '@/router';
const login = () => {
alert( 'Logging in...' );
// TODO: Actually implement with sdk, then check if user has subscription for product, if so, have them proceed to /app
// else: proceed to /purchase where they get linked to https://store.janishutz.com/product/com.janishutz.MusicPlayer
router.push( '/app' );
}
</script> </script>
<style scoped>
.home-view {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.logo {
height: 50vh;
}
</style>

0
MusicPlayerV2-GUI/src/views/ShowcaseView.vue Normal file
View File

2
README.md
View File

@@ -25,6 +25,8 @@
A music player, specifically created for displaying song information from a CSV or JSON file on multiple different displays that are connected A music player, specifically created for displaying song information from a CSV or JSON file on multiple different displays that are connected
to the same network, just from the browser. to the same network, just from the browser.
The [hosted version](https://music.janishutz.com) of this MusicPlayer, which is fully set up for you will be subscription-based and can be paid for on my [store](https://store.janishutz.com/product/com.janishutz.MusicPlayer). Not available yet though!
# Features # Features
- Electron App that runs on all major Desktop OS (Linux, MacOS & Windows) - Electron App that runs on all major Desktop OS (Linux, MacOS & Windows)
- Show all song information over the local network on any amount of client displays - Show all song information over the local network on any amount of client displays