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

MediaSession integration moved from own custom element to <cyp-app> class

Browse source
This commit is contained in:
Jozef Liška 2020-09-21 17:30:44 +02:00
parent 6ee253704e
commit a440f79f42
8 changed files with 94 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/css/cyp.less
View file

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

3
app/css/elements/media-handler.less
View file

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

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

95
app/cyp.js
View file

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

1
app/index.html
View file

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

1
app/js/cyp.js
View file

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

46
app/js/elements/app.js
View file

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

51
app/js/elements/media-handler.js
View file

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