52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
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);
|