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

Basic mediaSession integration (media keys, notification on mobile)

Browse source
This commit is contained in:
Jozef Liška 2020-08-20 22:47:35 +02:00
parent d28cc59d08
commit 6ee253704e
7 changed files with 108 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/css/cyp.less
View file

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

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

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

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

49
app/cyp.js
View file

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

1
app/index.html
View file

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

3
app/js/cyp.js
View file

@ -11,10 +11,11 @@ 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);
}
window.addEventListener("resize", updateSize);
updateSize();
updateSize();

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

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