Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #16 from JFox-sk/master

Browse source 
Basic mediaSession integration (media keys, notification on mobile)
This commit is contained in:
Ondřej Žára 2020-09-23 10:38:20 +02:00 committed by GitHub
commit 1175ce4e15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/cyp.js
View file

@ -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);

2
app/js/cyp.js
View file

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

47
app/js/elements/app.js
View file

@ -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);
}
}