Basic mediaSession integration (media keys, notification on mobile)

app/css/cyp.less

@@ -90,3 +90,4 @@ select {
 @import "elements/back.less";
 @import "elements/path.less";
 @import "elements/yt-result.less";
+@import "elements/media-handler.less";

app/css/elements/media-handler.less

@@ -0,0 +1,3 @@
+cyp-media-handler {
+	display: none;
+}

app/cyp.js

@@ -1867,6 +1867,55 @@ class Library extends Component {
 
 customElements.define("cyp-library", Library);
 
+class MediaHandler extends Component {
+	connectedCallback() {
+		// check support mediaSession
+		if (!('mediaSession' in navigator)) {
+			console.log('mediaSession is not supported');
+			return;
+		}
+
+		// DOM
+		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) {
+				audio.play();
+				mediaSessionInit = true;
+			}
+		});
+
+		// mediaSession define metadata
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: 'Control Your Player'
+		});
+
+		// mediaSession define action handlers
+		const that = this;
+		navigator.mediaSession.setActionHandler('play', function() {
+			that._mpd.command("play");
+			audio.play();
+		});
+		navigator.mediaSession.setActionHandler('pause', function() {
+			that._mpd.command("pause 1");
+			audio.pause();
+		});
+		navigator.mediaSession.setActionHandler('previoustrack', function() {
+			that._mpd.command("previous");
+			audio.play();
+		});
+		navigator.mediaSession.setActionHandler('nexttrack', function() {
+			that._mpd.command("next");
+			audio.play();
+		});
+	}
+}
+
+customElements.define("cyp-media-handler", MediaHandler);
+
 function updateSize() {
 	document.body.style.setProperty("--vh", window.innerHeight/100);
 }

app/index.html

@@ -96,6 +96,7 @@
 				<button data-for="settings" data-icon="settings"><span>Settings</span></button>
 			</cyp-menu>
 		</footer>
+		<cyp-media-handler></cyp-media-handler>
 		</cyp-app>
 
 		<script type="module" src="cyp.js"></script>

app/js/cyp.js

@@ -11,6 +11,7 @@ import "./elements/library.js";
 import "./elements/tag.js";
 import "./elements/back.js";
 import "./elements/path.js";
+import "./elements/media-handler.js";
 
 function updateSize() {
 	document.body.style.setProperty("--vh", window.innerHeight/100);

app/js/elements/media-handler.js

@@ -0,0 +1,51 @@
+import Component from "../component.js";
+import * as html from "../html.js";
+
+class MediaHandler extends Component {
+	connectedCallback() {
+		// 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) {
+				audio.play();
+				mediaSessionInit = true;
+			}
+		});
+
+		// mediaSession define metadata
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: 'Control Your Player'
+		});
+
+		// mediaSession define action handlers
+		const that = this;
+		navigator.mediaSession.setActionHandler('play', function() {
+			that._mpd.command("play")
+			audio.play()
+		});
+		navigator.mediaSession.setActionHandler('pause', function() {
+			that._mpd.command("pause 1")
+			audio.pause()
+		});
+		navigator.mediaSession.setActionHandler('previoustrack', function() {
+			that._mpd.command("previous")
+			audio.play()
+		});
+		navigator.mediaSession.setActionHandler('nexttrack', function() {
+			that._mpd.command("next")
+			audio.play()
+		});
+	}
+}
+
+customElements.define("cyp-media-handler", MediaHandler);