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

lots of progress on apple music integration

Browse Source
This commit is contained in:
Janis Hutz
2023-11-14 20:19:36 +01:00
parent 83303be8e9
commit 2b3af0de24
10 changed files with 119 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/index.html
View File

@@ -7,7 +7,6 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="/icon-font.css" /> <link rel="stylesheet" href="/icon-font.css" />
<script src="/jquery.min.js"></script> <script src="/jquery.min.js"></script>
<script src="/musickit.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

8
frontend/src/app.js
View File

@@ -10,6 +10,7 @@ const indexer = require( './indexer.js' );
const axios = require( 'axios' ); const axios = require( 'axios' );
const ip = require( 'ip' ); const ip = require( 'ip' );
const jwt = require( 'jsonwebtoken' ); const jwt = require( 'jsonwebtoken' );
const shell = require( 'electron' ).shell;
app.use( bodyParser.urlencoded( { extended: false } ) ); app.use( bodyParser.urlencoded( { extended: false } ) );
@@ -64,6 +65,8 @@ let currentDetails = {
let connectedMain = {}; let connectedMain = {};
// TODO: Add backend integration // TODO: Add backend integration
require( './appleMusicRoutes.js' )( app );
app.get( '/', ( request, response ) => { app.get( '/', ( request, response ) => {
response.sendFile( path.join( __dirname + '/client/showcase.html' ) ); response.sendFile( path.join( __dirname + '/client/showcase.html' ) );
} ); } );
@@ -72,6 +75,11 @@ app.get( '/getLocalIP', ( req, res ) => {
res.send( ip.address() ); res.send( ip.address() );
} ); } );
app.get( '/useAppleMusic', ( req, res ) => {
shell.openExternal( 'http://localhost:8081/apple-music' );
res.send( 'ok' );
} );
app.get( '/openSongs', ( req, res ) => { app.get( '/openSongs', ( req, res ) => {
// res.send( '{ "data": [ "/home/janis/Music/KB2022" ] }' ); // res.send( '{ "data": [ "/home/janis/Music/KB2022" ] }' );
res.send( '{ "data": [ "/mnt/storage/SORTED/Music/audio/KB2022" ] }' ); res.send( '{ "data": [ "/mnt/storage/SORTED/Music/audio/KB2022" ] }' );

20
frontend/src/appleMusicRoutes.js Normal file
View File

@@ -0,0 +1,20 @@
/*
* MusicPlayerV2 - appleMusicRoutes.js
*
* Created by Janis Hutz 11/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
const path = require( 'path' );
module.exports = ( app ) => {
app.get( '/apple-music', ( req, res ) => {
res.sendFile( path.join( __dirname + '/client/appleMusic/index.html' ) );
} );
app.get( '/apple-music/helpers/:file', ( req, res ) => {
res.sendFile( path.join( __dirname + '/client/appleMusic/' + req.params.file ) );
} );
}

23
frontend/src/client/appleMusic/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MusicPlayerV2</title>
<script src="/apple-music/helpers/musickit.js"></script>
</head>
<body>
<div id="app">
<div v-if="!isLoggedIn">
<h1>Apple Music</h1>
<button @click="logInto()">Log in</button>
</div>
<div v-else>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/apple-music/helpers/index.js"></script>
<link rel="stylesheet" href="/apple-music/helpers/style.css">
</body>
</html>

47
frontend/src/client/appleMusic/index.js Normal file
View File

@@ -0,0 +1,47 @@
const app = Vue.createApp( {
data() {
return {
musicKit: null,
isLoggedIn: false,
}
},
methods: {
logInto() {
if ( !this.musicKit.isAuthorized ) {
this.musicKit.authorize().then( () => {
this.musicKit.play();
this.isLoggedIn();
} );
}
},
initMusicKit () {
fetch( '/getAppleMusicDevToken' ).then( res => {
if ( res.status === 200 ) {
res.text().then( token => {
// MusicKit global is now defined
MusicKit.configure( {
developerToken: token,
app: {
name: 'MusicPlayer',
build: '2'
}
} );
this.musicKit = MusicKit.getInstance();
if ( this.musicKit.isAuthorized ) {
this.isLoggedIn = true;
}
} );
}
} );
}
},
created() {
if ( !window.MusicKit ) {
document.addEventListener( 'musickitloaded', () => {
self.initMusicKit();
} );
} else {
this.initMusicKit();
}
},
} ).mount( '#app' );

0
frontend/public/musickit.js → frontend/src/client/appleMusic/musickit.js
View File

16
frontend/src/client/appleMusic/style.css Normal file
View File

@@ -0,0 +1,16 @@
/*
* MusicPlayerV2 - style.css
*
* Created by Janis Hutz 11/14/2023, Licensed under the GPL V3 License
* https://janishutz.com, development@janishutz.com
*
*
*/
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}

45
frontend/src/components/appleMusic.vue
View File

@@ -1,45 +0,0 @@
<template>
<div>
<h1>AppleMusic</h1>
</div>
</template>
<script>
export default {
data() {
return {
devTokenAvailable: false,
musicKit: null,
}
},
methods: {
prepare() {
document.addEventListener( 'musickitloaded', function() {
fetch( 'http://localhost:8081/getAppleMusicDevToken' ).then( res => {
if ( res.status === 200 ) {
this.devTokenAvailable = true;
res.text().then( token => {
this.musicKit = MusicKit.configure({
developerToken: token,
app: {
name: 'MusicPlayer',
build: '2.1.0'
}
} );
setTimeout( () => {
this.musicKit.authorize();
}, 100 );
} );
}
} );
});
}
},
created() {
window.addEventListener( 'DOMContentLoaded', () => {
this.prepare();
} );
}
}
</script>

4
frontend/src/components/mediaPool.vue
View File

@@ -29,6 +29,7 @@
<div v-else class="no-songs"> <div v-else class="no-songs">
<h3>No songs loaded</h3> <h3>No songs loaded</h3>
<button @click="loadSongs()">Load songs</button> <button @click="loadSongs()">Load songs</button>
<button @click="useAppleMusic()">Use AppleMusic (opens a web-browser)</button>
</div> </div>
</div> </div>
</template> </template>
@@ -379,6 +380,9 @@
this.update( { 'type': 'playback', 'status': false } ); this.update( { 'type': 'playback', 'status': false } );
this.$emit( 'com', { 'type': 'pause', 'song': song } ); this.$emit( 'com', { 'type': 'pause', 'song': song } );
}, },
useAppleMusic() {
fetch( 'http://localhost:8081/useAppleMusic' );
}
} }
} }
</script> </script>

9
frontend/src/views/HomeView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="home" v-if="musicOrigin === 'local'"> <div class="home">
<div class="top-bar"> <div class="top-bar">
<img src="@/assets/logo.png" alt="logo" class="logo"> <img src="@/assets/logo.png" alt="logo" class="logo">
<div class="player-wrapper"> <div class="player-wrapper">
@@ -10,9 +10,6 @@
<mediaPool @com="( info ) => { handleCom( info ) }" ref="pool"></mediaPool> <mediaPool @com="( info ) => { handleCom( info ) }" ref="pool"></mediaPool>
</div> </div>
</div> </div>
<div v-else-if="musicOrigin === 'AppleMusic'" class="home">
<AppleMusic></AppleMusic>
</div>
</template> </template>
<style> <style>
@@ -57,7 +54,6 @@
</style> </style>
<script> <script>
import AppleMusic from '@/components/appleMusic.vue';
import mediaPool from '@/components/mediaPool.vue'; import mediaPool from '@/components/mediaPool.vue';
import Player from '@/components/player.vue'; import Player from '@/components/player.vue';
@@ -66,14 +62,11 @@
components: { components: {
mediaPool, mediaPool,
Player, Player,
AppleMusic,
}, },
data() { data() {
return { return {
hasLoadedSongs: false, hasLoadedSongs: false,
songQueue: [], songQueue: [],
// musicOrigin: 'local',
musicOrigin: 'AppleMusic',
} }
}, },
methods: { methods: {