Merge pull request #16 from JFox-sk/master

Basic mediaSession integration (media keys, notification on mobile)

app/cyp.js

@@ -587,6 +587,8 @@ class App extends HTMLElement {
 
 		await this._connect();
 		this.dispatchEvent(new CustomEvent("load"));
+
+		this._initMediaHandler();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -628,6 +630,49 @@ class App extends HTMLElement {
 		}
 		alert(`Failed to connect to MPD after ${attempts} attempts. Please reload the page to try again.`);
 	}
+
+	_initMediaHandler() {
+		// check support mediaSession
+		if (!('mediaSession' in navigator)) {
+			console.log('mediaSession is not supported');
+			return;
+		}
+
+		// DOM (using media session controls are allowed only if there is audio/video tag)
+		const audio = node("audio", {loop: true}, "", this);
+		node("source", {src: 'https://raw.githubusercontent.com/anars/blank-audio/master/10-seconds-of-silence.mp3'}, '', audio);
+
+		// Init event session (play audio) on click (because restrictions by web browsers)
+		let mediaSessionInit = false;
+		window.addEventListener('click', () => {
+			if (mediaSessionInit) return;
+				mediaSessionInit = true;
+				audio.play();
+		});
+
+		// mediaSession define metadata
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: 'Control Your Player'
+		});
+
+		// mediaSession define action handlers
+		navigator.mediaSession.setActionHandler('play', () => {
+			this.mpd.command("play");
+			audio.play();
+		});
+		navigator.mediaSession.setActionHandler('pause', () => {
+			this.mpd.command("pause 1");
+			audio.pause();
+		});
+		navigator.mediaSession.setActionHandler('previoustrack', () => {
+			this.mpd.command("previous");
+			audio.play();
+		});
+		navigator.mediaSession.setActionHandler('nexttrack', () => {
+			this.mpd.command("next");
+			audio.play();
+		});
+	}
 }
 
 customElements.define("cyp-app", App);

app/js/cyp.js

@@ -17,4 +17,4 @@ function updateSize() {
 }
 
 window.addEventListener("resize", updateSize);
-updateSize();
+updateSize();

app/js/elements/app.js

@@ -26,6 +26,8 @@ class App extends HTMLElement {
 
 		await this._connect();
 		this.dispatchEvent(new CustomEvent("load"));
+
+		this._initMediaHandler();
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -67,6 +69,49 @@ class App extends HTMLElement {
 		}
 		alert(`Failed to connect to MPD after ${attempts} attempts. Please reload the page to try again.`);
 	}
+
+	_initMediaHandler() {
+		// check support mediaSession
+		if (!('mediaSession' in navigator)) {
+			console.log('mediaSession is not supported');
+			return;
+		}
+
+		// DOM (using media session controls are allowed only if there is audio/video tag)
+		const audio = html.node("audio", {loop: true}, "", this);
+		html.node("source", {src: 'https://raw.githubusercontent.com/anars/blank-audio/master/10-seconds-of-silence.mp3'}, '', audio);
+
+		// Init event session (play audio) on click (because restrictions by web browsers)
+		let mediaSessionInit = false;
+		window.addEventListener('click', () => {
+			if (mediaSessionInit) return;
+				mediaSessionInit = true;
+				audio.play();
+		});
+
+		// mediaSession define metadata
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: 'Control Your Player'
+		});
+
+		// mediaSession define action handlers
+		navigator.mediaSession.setActionHandler('play', () => {
+			this.mpd.command("play")
+			audio.play()
+		});
+		navigator.mediaSession.setActionHandler('pause', () => {
+			this.mpd.command("pause 1")
+			audio.pause()
+		});
+		navigator.mediaSession.setActionHandler('previoustrack', () => {
+			this.mpd.command("previous")
+			audio.play()
+		});
+		navigator.mediaSession.setActionHandler('nexttrack', () => {
+			this.mpd.command("next")
+			audio.play()
+		});
+	}
 }
 
 customElements.define("cyp-app", App);
@@ -81,4 +126,4 @@ function waitForChildren(app) {
 
 	const promises = [...unique].map(name => customElements.whenDefined(name));
 	return Promise.all(promises);
-}
+}