From 7a2ba572f871aa8b0228b25e164e714a3fced096 Mon Sep 17 00:00:00 2001 From: chme Date: Thu, 14 Feb 2019 12:15:11 +0100 Subject: [PATCH 1/9] [streaming] Remove timeout for mpeg stream requests Remove the need for clients to regularly reconnect to the mp3 stream. As long as the connection is open, we are sending mp3 stream data. --- src/httpd_streaming.c | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/httpd_streaming.c b/src/httpd_streaming.c index 52b6bfdb..547b624d 100644 --- a/src/httpd_streaming.c +++ b/src/httpd_streaming.c @@ -46,8 +46,6 @@ extern struct event_base *evbase_httpd; #define STREAMING_SILENCE_INTERVAL 1 // Buffer size for transmitting from player to httpd thread #define STREAMING_RAWBUF_SIZE (STOB(AIRTUNES_V2_PACKET_SAMPLES)) -// Should prevent that we keep transcoding to dead connections -#define STREAMING_CONNECTION_TIMEOUT 60 // Linked list of mp3 streaming requests struct streaming_session { @@ -74,6 +72,7 @@ static struct player_status streaming_player_status; static int streaming_player_changed; static int streaming_pipe[2]; + static void streaming_fail_cb(struct evhttp_connection *evcon, void *arg) { @@ -243,6 +242,8 @@ streaming_request(struct evhttp_request *req, struct httpd_uri_parsed *uri_parse evhttp_add_header(output_headers, "Pragma", "no-cache"); evhttp_add_header(output_headers, "Expires", "Mon, 31 Aug 2015 06:00:00 GMT"); evhttp_add_header(output_headers, "icy-name", name); + evhttp_add_header(output_headers, "Access-Control-Allow-Origin", "*"); + evhttp_add_header(output_headers, "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); // TODO ICY metaint evhttp_send_reply_start(req, HTTP_OK, "OK"); @@ -263,7 +264,6 @@ streaming_request(struct evhttp_request *req, struct httpd_uri_parsed *uri_parse session->next = streaming_sessions; streaming_sessions = session; - evhttp_connection_set_timeout(evcon, STREAMING_CONNECTION_TIMEOUT); evhttp_connection_set_closecb(evcon, streaming_fail_cb, session); return 0; From 3b718ffb16f2d3903efe38228e6c3959e5a4f7b5 Mon Sep 17 00:00:00 2001 From: chme Date: Thu, 14 Feb 2019 12:19:29 +0100 Subject: [PATCH 2/9] [web-src] Add option to stream audio from player web interface The audio implementation is based on https://github.com/rainner/soma-fm-player and makes use of the HTML5 Web Audio Context API. --- web-src/src/audio.js | 51 +++++++++++ web-src/src/components/NavBarItemOutput.vue | 2 +- web-src/src/components/NavbarTop.vue | 97 ++++++++++++++++++++- web-src/vue.config.js | 7 +- 4 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 web-src/src/audio.js diff --git a/web-src/src/audio.js b/web-src/src/audio.js new file mode 100644 index 00000000..00363256 --- /dev/null +++ b/web-src/src/audio.js @@ -0,0 +1,51 @@ +/** + * Audio handler object + * Taken from https://github.com/rainner/soma-fm-player (released under MIT licence) + */ +export default { + _audio: new Audio(), + _context: new AudioContext(), + _source: null, + _gain: null, + _analyser: null, + + // setup audio routing + setupAudio () { + this._source = this._context.createMediaElementSource(this._audio) + this._analyser = this._context.createAnalyser() + this._gain = this._context.createGain() + + this._source.connect(this._gain) + this._source.connect(this._analyser) + this._gain.connect(this._context.destination) + + this._audio.addEventListener('canplaythrough', e => { + this._audio.play() + }) + return this._audio + }, + + // set audio volume + setVolume (volume) { + if (!this._gain) return + volume = parseFloat(volume) || 0.0 + volume = (volume < 0) ? 0 : volume + volume = (volume > 1) ? 1 : volume + this._gain.gain.value = volume + }, + + // play audio source url + playSource (source) { + this.stopAudio() + this._audio.src = String(source || '') + '?x=' + Date.now() + this._audio.crossOrigin = 'anonymous' + this._audio.load() + }, + + // stop playing audio + stopAudio () { + try { this._audio.pause() } catch (e) {} + try { this._audio.stop() } catch (e) {} + try { this._audio.close() } catch (e) {} + } +} diff --git a/web-src/src/components/NavBarItemOutput.vue b/web-src/src/components/NavBarItemOutput.vue index 881ec6c8..53d67957 100644 --- a/web-src/src/components/NavBarItemOutput.vue +++ b/web-src/src/components/NavBarItemOutput.vue @@ -3,7 +3,7 @@
- +
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index 84c5802b..80b30e70 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -60,6 +60,31 @@
+
+
+
+
+
+ +
+
+
+

HTTP stream

+ + +
+
+
+
+
+
@@ -104,6 +129,7 @@ diff --git a/web-src/vue.config.js b/web-src/vue.config.js index 2548b5c4..ff282c9a 100644 --- a/web-src/vue.config.js +++ b/web-src/vue.config.js @@ -24,10 +24,13 @@ module.exports = { // localhost:3689 proxy: { '/api': { - target: 'http://localhost:3689', + target: 'http://localhost:3689' }, '/artwork': { - target: 'http://localhost:3689', + target: 'http://localhost:3689' + }, + '/stream.mp3': { + target: 'http://localhost:3689' } } } From dec916a7eb94a57ca3231cf5c245e759c5f448b1 Mon Sep 17 00:00:00 2001 From: chme Date: Sat, 16 Feb 2019 06:48:45 +0100 Subject: [PATCH 3/9] [web-src] add mute button --- web-src/src/components/NavbarTop.vue | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index 80b30e70..1497eff9 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -39,7 +39,9 @@
- + + +
@@ -147,6 +149,7 @@ export default { data () { return { search_query: '', + old_volume: 0, playing: false, loading: false, @@ -193,6 +196,14 @@ export default { webapi.player_volume(newVolume) }, + toggle_mute_volume: function () { + if (this.player.volume > 0) { + this.set_volume(0) + } else { + this.set_volume(this.old_volume) + } + }, + open_about: function () { this.$store.commit(types.SHOW_BURGER_MENU, false) this.$router.push({ path: '/about' }) @@ -254,6 +265,14 @@ export default { } }, + watch: { + '$store.state.player.volume' () { + if (this.player.volume > 0) { + this.old_volume = this.player.volume + } + } + }, + // on app mounted mounted () { this.setupAudio() From d51f9b0722e399811b8b1cc5bf45ee645892b65f Mon Sep 17 00:00:00 2001 From: chme Date: Sun, 17 Feb 2019 11:24:30 +0100 Subject: [PATCH 4/9] [web-src] Add info buttons to album/artist/playlist/files pages Adds a button to open the modal details dialog for album/artist/playlist/directory --- web-src/src/pages/PageAlbum.vue | 16 +++++++++------- web-src/src/pages/PageArtist.vue | 19 ++++++++++++++----- web-src/src/pages/PageAudiobook.vue | 25 +++++++++++++++++-------- web-src/src/pages/PageFiles.vue | 11 ++++++++--- web-src/src/pages/PagePlaylist.vue | 19 ++++++++++++++----- web-src/src/pages/PagePodcast.vue | 25 +++++++++++++++++-------- 6 files changed, 79 insertions(+), 36 deletions(-) diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue index 825fdb60..4d8f917a 100644 --- a/web-src/src/pages/PageAlbum.vue +++ b/web-src/src/pages/PageAlbum.vue @@ -6,14 +6,12 @@ + @@ -35,6 +34,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' import ModalDialogTrack from '@/components/ModalDialogTrack' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const albumData = { @@ -54,7 +54,7 @@ const albumData = { export default { name: 'PageAlbum', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogAlbum }, data () { return { @@ -62,7 +62,9 @@ export default { tracks: [], show_details_modal: false, - selected_track: {} + selected_track: {}, + + show_album_details_modal: false } }, diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue index 65050083..8a8892d5 100644 --- a/web-src/src/pages/PageArtist.vue +++ b/web-src/src/pages/PageArtist.vue @@ -4,9 +4,14 @@

{{ artist.name }}

+ @@ -27,6 +33,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemAlbum from '@/components/ListItemAlbum' import ModalDialogAlbum from '@/components/ModalDialogAlbum' +import ModalDialogArtist from '@/components/ModalDialogArtist' import webapi from '@/webapi' const artistData = { @@ -46,7 +53,7 @@ const artistData = { export default { name: 'PageArtist', mixins: [ LoadDataBeforeEnterMixin(artistData) ], - components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum }, + components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum, ModalDialogArtist }, data () { return { @@ -54,7 +61,9 @@ export default { albums: {}, show_details_modal: false, - selected_album: {} + selected_album: {}, + + show_artist_details_modal: false } }, diff --git a/web-src/src/pages/PageAudiobook.vue b/web-src/src/pages/PageAudiobook.vue index e01ed2e2..84788625 100644 --- a/web-src/src/pages/PageAudiobook.vue +++ b/web-src/src/pages/PageAudiobook.vue @@ -5,12 +5,17 @@
{{ album.artist }}
+ @@ -31,6 +37,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' import ModalDialogTrack from '@/components/ModalDialogTrack' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const albumData = { @@ -50,7 +57,7 @@ const albumData = { export default { name: 'PageAudiobook', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogAlbum }, data () { return { @@ -58,7 +65,9 @@ export default { tracks: [], show_details_modal: false, - selected_track: {} + selected_track: {}, + + show_album_details_modal: false } }, diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue index b05d6978..2cc737e8 100644 --- a/web-src/src/pages/PageFiles.vue +++ b/web-src/src/pages/PageFiles.vue @@ -6,9 +6,14 @@

{{ current_directory }}

+ @@ -27,6 +33,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' import ModalDialogTrack from '@/components/ModalDialogTrack' +import ModalDialogPlaylist from '@/components/ModalDialogPlaylist' import webapi from '@/webapi' const playlistData = { @@ -46,7 +53,7 @@ const playlistData = { export default { name: 'PagePlaylist', mixins: [ LoadDataBeforeEnterMixin(playlistData) ], - components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogPlaylist }, data () { return { @@ -54,7 +61,9 @@ export default { tracks: [], show_details_modal: false, - selected_track: {} + selected_track: {}, + + show_playlist_details_modal: false } }, diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue index d86b6332..9cf74963 100644 --- a/web-src/src/pages/PagePodcast.vue +++ b/web-src/src/pages/PagePodcast.vue @@ -4,12 +4,17 @@
{{ album.name }}
+ @@ -40,6 +46,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' import ModalDialogTrack from '@/components/ModalDialogTrack' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import RangeSlider from 'vue-range-slider' import webapi from '@/webapi' @@ -60,7 +67,7 @@ const albumData = { export default { name: 'PagePodcast', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider, ModalDialogAlbum }, data () { return { @@ -68,7 +75,9 @@ export default { tracks: [], show_details_modal: false, - selected_track: {} + selected_track: {}, + + show_album_details_modal: false } }, From 99e0cfe6bbda7aa7491cac241c23a4b5d6ff79d2 Mon Sep 17 00:00:00 2001 From: chme Date: Sun, 17 Feb 2019 11:33:23 +0100 Subject: [PATCH 5/9] [web-src] Fix error following genre links (add missing url encoding of genre name in url) --- web-src/src/components/ModalDialogQueueItem.vue | 2 +- web-src/src/components/ModalDialogTrack.vue | 8 ++++++-- web-src/src/pages/PageGenre.vue | 2 +- web-src/src/pages/PageGenreTracks.vue | 2 +- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue index 7f708f5c..c960adeb 100644 --- a/web-src/src/components/ModalDialogQueueItem.vue +++ b/web-src/src/components/ModalDialogQueueItem.vue @@ -98,7 +98,7 @@ export default { }, open_genre: function () { - this.$router.push({ path: '/music/genres/' + this.item.genre }) + this.$router.push({ name: 'Genre', params: { genre: this.item.name } }) } } } diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue index 73db078d..ddfbee17 100644 --- a/web-src/src/components/ModalDialogTrack.vue +++ b/web-src/src/components/ModalDialogTrack.vue @@ -37,9 +37,9 @@ Year {{ track.year }}

-

+

Genre - {{ track.genre }} + {{ track.genre }}

Track / Disc @@ -131,6 +131,10 @@ export default { this.$router.push({ path: '/music/artists/' + this.track.album_artist_id }) }, + open_genre: function () { + this.$router.push({ name: 'Genre', params: { genre: this.track.genre } }) + }, + mark_new: function () { webapi.library_track_update(this.track.id, { 'play_count': 'reset' }).then(() => { this.$emit('play_count_changed') diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue index 6e055cf7..fb0a078d 100644 --- a/web-src/src/pages/PageGenre.vue +++ b/web-src/src/pages/PageGenre.vue @@ -72,7 +72,7 @@ export default { methods: { open_tracks: function () { this.show_details_modal = false - this.$router.push({ path: '/music/genres/' + this.name + '/tracks' }) + this.$router.push({ name: 'GenreTracks', params: { genre: this.name } }) }, play: function () { diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue index f5734f8e..9f2660ab 100644 --- a/web-src/src/pages/PageGenreTracks.vue +++ b/web-src/src/pages/PageGenreTracks.vue @@ -71,7 +71,7 @@ export default { methods: { open_genre: function () { this.show_details_modal = false - this.$router.push({ path: '/music/genres/' + this.genre }) + this.$router.push({ name: 'Genre', params: { genre: this.genre } }) }, play: function () { From 5c5c3e4a47dbf8b936d0162294642e1143870056 Mon Sep 17 00:00:00 2001 From: chme Date: Mon, 18 Feb 2019 11:18:55 +0100 Subject: [PATCH 6/9] [web-src] Add links to Spotify artist/album in track details dialog --- web-src/src/components/ModalDialogTrack.vue | 28 ++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue index ddfbee17..69628595 100644 --- a/web-src/src/components/ModalDialogTrack.vue +++ b/web-src/src/components/ModalDialogTrack.vue @@ -55,7 +55,7 @@

Type - {{ track.media_kind }} - {{ track.data_kind }} + {{ track.media_kind }} - {{ track.data_kind }} (artist, album)

Added at @@ -88,6 +88,7 @@ From 66cd6ca19f6a3315bc6bf93bf9e1e4264e08e042 Mon Sep 17 00:00:00 2001 From: chme Date: Mon, 18 Feb 2019 12:47:09 +0100 Subject: [PATCH 7/9] [web-src] Support stream playback in chrome/firefox on android --- web-src/src/audio.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/web-src/src/audio.js b/web-src/src/audio.js index 00363256..2d9d7995 100644 --- a/web-src/src/audio.js +++ b/web-src/src/audio.js @@ -7,21 +7,21 @@ export default { _context: new AudioContext(), _source: null, _gain: null, - _analyser: null, // setup audio routing setupAudio () { this._source = this._context.createMediaElementSource(this._audio) - this._analyser = this._context.createAnalyser() this._gain = this._context.createGain() this._source.connect(this._gain) - this._source.connect(this._analyser) this._gain.connect(this._context.destination) this._audio.addEventListener('canplaythrough', e => { this._audio.play() }) + this._audio.addEventListener('canplay', e => { + this._audio.play() + }) return this._audio }, @@ -37,9 +37,12 @@ export default { // play audio source url playSource (source) { this.stopAudio() - this._audio.src = String(source || '') + '?x=' + Date.now() - this._audio.crossOrigin = 'anonymous' - this._audio.load() + this._context.resume().then(() => { + console.log('playSource') + this._audio.src = String(source || '') + '?x=' + Date.now() + this._audio.crossOrigin = 'anonymous' + this._audio.load() + }) }, // stop playing audio From c8f6cdd3d680159e74c390dc47175c40bf51d526 Mon Sep 17 00:00:00 2001 From: chme Date: Mon, 18 Feb 2019 12:54:43 +0100 Subject: [PATCH 8/9] [web-src] Add link to mp3 stream in menu --- web-src/src/components/NavbarTop.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index 1497eff9..8e8373a4 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -71,7 +71,7 @@

-

HTTP stream

+

HTTP stream (stream.mp3)

Date: Mon, 18 Feb 2019 13:06:09 +0100 Subject: [PATCH 9/9] [web-src] Fix missing master volume icon --- web-src/src/components/NavbarTop.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index 8e8373a4..d7fdda10 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -40,7 +40,7 @@
- +