MediaSession integration moved from own custom element to <cyp-app> class
This commit is contained in:
parent
6ee253704e
commit
a440f79f42
8 changed files with 94 additions and 108 deletions
|
@ -90,4 +90,3 @@ select {
|
||||||
@import "elements/back.less";
|
@import "elements/back.less";
|
||||||
@import "elements/path.less";
|
@import "elements/path.less";
|
||||||
@import "elements/yt-result.less";
|
@import "elements/yt-result.less";
|
||||||
@import "elements/media-handler.less";
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
cyp-media-handler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
File diff suppressed because one or more lines are too long
95
app/cyp.js
95
app/cyp.js
|
@ -587,6 +587,9 @@ class App extends HTMLElement {
|
||||||
|
|
||||||
await this._connect();
|
await this._connect();
|
||||||
this.dispatchEvent(new CustomEvent("load"));
|
this.dispatchEvent(new CustomEvent("load"));
|
||||||
|
|
||||||
|
this.mediaSessionInit = false;
|
||||||
|
this._initMediaHandler();
|
||||||
}
|
}
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
@ -628,6 +631,49 @@ class App extends HTMLElement {
|
||||||
}
|
}
|
||||||
alert(`Failed to connect to MPD after ${attempts} attempts. Please reload the page to try again.`);
|
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)
|
||||||
|
window.addEventListener('click', () => {
|
||||||
|
if (!this.mediaSessionInit) {
|
||||||
|
audio.play();
|
||||||
|
this.mediaSessionInit = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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);
|
customElements.define("cyp-app", App);
|
||||||
|
@ -1867,55 +1913,6 @@ class Library extends Component {
|
||||||
|
|
||||||
customElements.define("cyp-library", Library);
|
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() {
|
function updateSize() {
|
||||||
document.body.style.setProperty("--vh", window.innerHeight/100);
|
document.body.style.setProperty("--vh", window.innerHeight/100);
|
||||||
}
|
}
|
||||||
|
|
|
@ -96,7 +96,6 @@
|
||||||
<button data-for="settings" data-icon="settings"><span>Settings</span></button>
|
<button data-for="settings" data-icon="settings"><span>Settings</span></button>
|
||||||
</cyp-menu>
|
</cyp-menu>
|
||||||
</footer>
|
</footer>
|
||||||
<cyp-media-handler></cyp-media-handler>
|
|
||||||
</cyp-app>
|
</cyp-app>
|
||||||
|
|
||||||
<script type="module" src="cyp.js"></script>
|
<script type="module" src="cyp.js"></script>
|
||||||
|
|
|
@ -11,7 +11,6 @@ import "./elements/library.js";
|
||||||
import "./elements/tag.js";
|
import "./elements/tag.js";
|
||||||
import "./elements/back.js";
|
import "./elements/back.js";
|
||||||
import "./elements/path.js";
|
import "./elements/path.js";
|
||||||
import "./elements/media-handler.js";
|
|
||||||
|
|
||||||
function updateSize() {
|
function updateSize() {
|
||||||
document.body.style.setProperty("--vh", window.innerHeight/100);
|
document.body.style.setProperty("--vh", window.innerHeight/100);
|
||||||
|
|
|
@ -26,6 +26,9 @@ class App extends HTMLElement {
|
||||||
|
|
||||||
await this._connect();
|
await this._connect();
|
||||||
this.dispatchEvent(new CustomEvent("load"));
|
this.dispatchEvent(new CustomEvent("load"));
|
||||||
|
|
||||||
|
this.mediaSessionInit = false;
|
||||||
|
this._initMediaHandler();
|
||||||
}
|
}
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
@ -67,6 +70,49 @@ class App extends HTMLElement {
|
||||||
}
|
}
|
||||||
alert(`Failed to connect to MPD after ${attempts} attempts. Please reload the page to try again.`);
|
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)
|
||||||
|
window.addEventListener('click', () => {
|
||||||
|
if (!this.mediaSessionInit) {
|
||||||
|
audio.play();
|
||||||
|
this.mediaSessionInit = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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);
|
customElements.define("cyp-app", App);
|
||||||
|
@ -81,4 +127,4 @@ function waitForChildren(app) {
|
||||||
|
|
||||||
const promises = [...unique].map(name => customElements.whenDefined(name));
|
const promises = [...unique].map(name => customElements.whenDefined(name));
|
||||||
return Promise.all(promises);
|
return Promise.all(promises);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,51 +0,0 @@
|
||||||
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);
|
|
Loading…
Reference in a new issue