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

get it running again

Browse Source
This commit is contained in:
Janis Hutz
2023-11-06 15:19:25 +01:00
parent 4b0b31471b
commit bdc117be3d
6 changed files with 87 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app.js
View File

@@ -138,8 +138,8 @@ app.get( '/indexDirs', ( req, res ) => {
app.get( '/getSongCover', ( req, res ) => {
if ( req.query.filename ) {
if ( coverArtIndex[ req.query.filename ] ) {
res.send( coverArtIndex[ req.query.filename ] );
if ( indexer.getImages( req.query.filename ) ) {
res.send( indexer.getImages( req.query.filename ) );
} else {
res.status( 404 ).send( 'No cover image for this file' );
}

4
frontend/src/client/showcase.html
View File

@@ -16,6 +16,7 @@
<div v-if="hasLoaded" style="width: 100%">
<div class="current-song-wrapper">
<span class="material-symbols-outlined fancy-view-song-art" v-if="!playingSong.hasCoverArt">music_note</span>
<img v-else-if="playingSong.hasCoverArt && playingSong.coverArtOrigin === 'api'" :src="playingSong.coverArtURL" class="fancy-view-song-art" id="current-image" crossorigin="anonymous">
<img v-else :src="'/getSongCover?filename=' + playingSong.filename" class="fancy-view-song-art" id="current-image">
<div class="current-song">
<progress max="1000" id="progress" :value="progressBar"></progress>
@@ -33,7 +34,8 @@
<div class="song-list-wrapper">
<div v-for="song in songQueue" class="song-list">
<span class="material-symbols-outlined song-image" v-if="!song.hasCoverArt && ( playingSong.filename !== song.filename || isPlaying )">music_note</span>
<img v-else-if="song.hasCoverArt && ( playingSong.filename !== song.filename || isPlaying )" :src="'/getSongCover?filename=' + song.filename" class="song-image">
<img v-else-if="song.hasCoverArt && ( playingSong.filename !== song.filename || isPlaying ) && song.coverArtOrigin === 'api'" :src="song.coverArtURL" class="song-image">
<img v-else-if="song.hasCoverArt && ( playingSong.filename !== song.filename || isPlaying ) && song.coverArtOrigin !== 'api'" :src="'/getSongCover?filename=' + song.filename" class="song-image">
<div v-if="playingSong.filename === song.filename && isPlaying" class="playing-symbols">
<div class="playing-symbols-wrapper">
<div class="playing-bar" id="bar-1"></div>

1
frontend/src/client/showcase.js
View File

@@ -148,7 +148,6 @@ createApp( {
}, false );
},
handleBackground() {
// TODO: Add hotkeys
let colourDetails = [];
let colours = [];
let differentEnough = true;

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

@@ -2,7 +2,8 @@
<div class="media-pool" :style="isShowingFancyView ? 'overflow: hidden;' : ''">
<div v-if="hasLoadedSongs" style="width: 100%;" class="song-list-wrapper">
<div v-for="song in songQueue" class="song-list" :class="[ isPlaying ? ( currentlyPlaying === song.filename ? 'playing': 'not-playing' ) : 'not-playing', !isPlaying && currentlyPlaying === song.filename ? 'active-song': undefined ]">
<span class="material-symbols-outlined song-image" v-if="!loadCoverArtPreview || !song.hasCoverArt">music_note</span>
<span class="material-symbols-outlined song-image" v-if="!song.hasCoverArt">music_note</span>
<img v-else-if="song.hasCoverArt && song.coverArtOrigin === 'api'" :src="song.coverArtURL" class="song-image">
<img v-else :src="'http://localhost:8081/getSongCover?filename=' + song.filename" class="song-image">
<div v-if="currentlyPlaying === song.filename && isPlaying" class="playing-symbols">
<div class="playing-symbols-wrapper">
@@ -195,7 +196,6 @@
return {
hasLoadedSongs: false,
isLoadingSongs: false,
loadCoverArtPreview: true,
allSongs: [],
songQueue: [],
loadedDirs: [],
@@ -206,7 +206,8 @@
repeat: false,
isShowingFancyView: false,
errorOccurredLoading: false,
coverArtSetting: 'api'
coverArtSetting: 'api',
doOverride: false,
}
},
methods: {
@@ -292,7 +293,7 @@
},
indexFiles () {
for ( let dir in this.loadedDirs ) {
fetch( 'http://localhost:8081/indexDirs?dir=' + this.loadedDirs[ dir ] + ( this.loadCoverArtPreview ? '&coverart=' + this.coverArtSetting : '' ) ).then( res => {
fetch( 'http://localhost:8081/indexDirs?dir=' + this.loadedDirs[ dir ] + '&coverart=' + this.coverArtSetting + '&doOverride=' + this.doOverride ).then( res => {
if ( res.status === 200 ) {
this.errorOccurredLoading = false;
res.json().then( json => {

1
frontend/src/components/player.vue
View File

@@ -19,6 +19,7 @@
<div class="song-info-wrapper">
<div v-if="audioLoaded" @click="showFancyView()" style="cursor: pointer;">
<span class="material-symbols-outlined image" v-if="!playingSong.hasCoverArt">music_note</span>
<img v-else-if="playingSong.hasCoverArt && playingSong.coverArtOrigin === 'api'" :src="playingSong.coverArtURL" class="image">
<img v-else :src="'http://localhost:8081/getSongCover?filename=' + playingSong.filename" class="image">
</div>
<span class="material-symbols-outlined image" v-else>music_note</span>

116
frontend/src/indexer.js
View File

@@ -14,7 +14,6 @@ const allowedFileTypes = [ '.mp3', '.wav', '.flac' ];
const csv = require( 'csv-parser' );
const path = require( 'path' );
let indexedData = {};
let coverArtIndex = {};
module.exports.index = ( req ) => {
@@ -25,19 +24,21 @@ module.exports.index = ( req ) => {
return;
};
( async() => {
// TODO: Check for songlist.csv or songlist.json file and use the data provided there for each song to override
// Check for songlist.csv or songlist.json file and use the data provided there for each song to override
// what was found automatically. If no song title was found in songlist or metadata, use filename
// TODO: Also save found information to those files and don't rerun checks if data is present
if ( dat.includes( 'songlist.csv' ) || dat.includes( 'songlist.json' ) ) {
parseExistingData( dat, req.query.dir ).then( data => {
parseDir( dat, req, data );
} );
} else if ( dat.includes( 'songs.json' ) ) {
// additionally check if dir has been indexed (songs.json file)
if ( dat.includes( 'songs.json' ) ) {
parseExistingData( dat, req.query.dir ).then( data => {
resolve( data );
} ).catch( err => {
reject( err );
} );
} else if ( dat.includes( 'songlist.csv' ) || dat.includes( 'songlist.json' ) ) {
parseExistingData( dat, req.query.dir ).then( data => {
parseDir( dat, req, data ).then( indexedDir => {
resolve( indexedDir );
} );
} );
} else {
resolve( await parseDir( dat, req ) );
}
@@ -46,6 +47,10 @@ module.exports.index = ( req ) => {
} );
}
module.exports.getImages = ( filename ) => {
return coverArtIndex[ filename ];
};
const parseExistingData = ( dat, dir ) => {
return new Promise( ( resolve, reject ) => {
if ( dat.includes( 'songs.json' ) ) {
@@ -56,12 +61,11 @@ const parseExistingData = ( dat, dir ) => {
let results = {};
let pos = 0;
fs.createReadStream( path.join( dir + '/songlist.csv' ) )
.pipe( csv( [ 'name', 'artist', 'dancingStyle', 'tempo' ] ) )
.pipe( csv() )
.on( 'data', ( data ) => {
results[ dir + '/' + dat[ pos ] ] = data;
pos += 1;
} ).on( 'end', () => {
console.log( results );
resolve( results );
} );
} else if ( dat.includes( 'songlist.json' ) ) {
@@ -71,12 +75,11 @@ const parseExistingData = ( dat, dir ) => {
}
hasCompletedFetching = {};
let files = {};
const parseDir = ( dat, req, existingData ) => {
console.log( existingData );
return new Promise( ( resolve, reject ) => {
( async() => {
let files = {};
files = {};
for ( let file in dat ) {
if ( allowedFileTypes.includes( dat[ file ].slice( dat[ file ].indexOf( '.' ), dat[ file ].length ) ) ) {
try {
@@ -94,7 +97,9 @@ const parseDir = ( dat, req, existingData ) => {
'numberOfChannels': metadata[ 'format' ][ 'numberOfChannels' ],
'container': metadata[ 'format' ][ 'container' ],
'filename': req.query.dir + '/' + dat[ file ],
'coverArtOrigin': req.query.coverart ?? 'none',
}
runReplace( existingData, req.query.dir + '/' + dat[ file ], req.query.doOverride ?? false );
if ( req.query.coverart == 'meta' ) {
if ( metadata[ 'common' ][ 'picture' ] ) {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = true;
@@ -102,28 +107,10 @@ const parseDir = ( dat, req, existingData ) => {
} else {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = false;
}
hasCompletedFetching[ req.query.dir + '/' + dat[ file ] ] = true;
} else if ( req.query.coverart == 'api' ) {
hasCompletedFetching[ req.query.dir + '/' + dat[ file ] ] = false;
imageFetcher.fetch( 'songs', metadata[ 'common' ][ 'artist' ] + ' ' + metadata[ 'common' ][ 'title' ], ( err, data ) => {
if ( err ) {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = false;
return;
}
if ( data.results.songs ) {
if ( data.results.songs.data ) {
let url = data.results.songs.data[ 0 ].attributes.artwork.url;
url = url.replace( '{w}', data.results.songs.data[ 0 ].attributes.artwork.width );
url = url.replace( '{h}', data.results.songs.data[ 0 ].attributes.artwork.height );
console.log( url );
} else {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = false;
}
} else {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = false;
}
hasCompletedFetching[ req.query.dir + '/' + dat[ file ] ] = true;
} );
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = true;
fetchImages( metadata[ 'common' ][ 'title' ], metadata[ 'common' ][ 'artist' ], metadata[ 'common' ][ 'year' ], req.query.dir, dat[ file ] );
} else {
files[ req.query.dir + '/' + dat[ file ] ][ 'hasCoverArt' ] = false;
}
@@ -134,14 +121,15 @@ const parseDir = ( dat, req, existingData ) => {
}
}
let ok = false;
setInterval( () => {
let waiter = setInterval( () => {
for ( let song in hasCompletedFetching ) {
if ( !hasCompletedFetching[ song ] ) {
ok = false;
}
}
if ( ok ) {
indexedData[ req.query.dir ] = files;
saveToDisk( req.query.dir );
clearInterval( waiter );
resolve( files );
}
ok = true;
@@ -150,7 +138,59 @@ const parseDir = ( dat, req, existingData ) => {
} )
};
const saveToDisk = () => {
const runReplace = ( existingData, currentFile, doOverride ) => {
for ( let param in existingData[ currentFile ] ) {
if ( !files[ currentFile ][ param ] || doOverride ) {
files[ currentFile ][ param ] = existingData[ currentFile ][ param ];
}
}
};
let imageQueue = [];
let runInterval = null;
const fetchImages = ( title, artist, year, dir, filename ) => {
imageQueue.push( { 'title': title, 'artist': artist, 'year': year, 'dir': dir, 'filename': filename } );
if ( runInterval === null ) {
runInterval = setInterval( () => {
if ( imageQueue.length > 0 ) {
const cur = imageQueue.reverse().pop();
imageQueue.reverse();
runFetch( cur.title, cur.artist, cur.year, cur.dir, cur.filename );
} else {
clearInterval( runInterval );
runInterval = null;
}
}, 100 );
}
};
const runFetch = ( title, artist, year, dir, filename ) => {
imageFetcher.fetch( 'songs', ( artist ?? '' ) + ' ' + ( title ?? '' ) + ' ' + ( year ?? '' ), ( err, data ) => {
if ( err ) {
files[ dir + '/' + filename ][ 'hasCoverArt' ] = false;
console.error( dir + '/' + filename );
console.error( err );
hasCompletedFetching[ dir + '/' + filename ] = true;
return;
}
if ( data.results.songs ) {
if ( data.results.songs.data ) {
let url = data.results.songs.data[ 0 ].attributes.artwork.url;
url = url.replace( '{w}', data.results.songs.data[ 0 ].attributes.artwork.width );
url = url.replace( '{h}', data.results.songs.data[ 0 ].attributes.artwork.height );
files[ dir + '/' + filename ][ 'coverArtURL' ] = url;
files[ dir + '/' + filename ][ 'hasCoverArt' ] = true;
} else {
files[ dir + '/' + filename ][ 'hasCoverArt' ] = false;
}
} else {
files[ dir + '/' + filename ][ 'hasCoverArt' ] = false;
}
hasCompletedFetching[ dir + '/' + filename ] = true;
} );
}
const saveToDisk = ( dir ) => {
fs.writeFileSync( path.join( dir + '/songs.json' ), JSON.stringify( files ) );
};