hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: added button for html5 picture-in-picture-mode

Browse source
This commit is contained in:
Cat 2023-03-30 14:20:20 +02:00 • committed by Thulinma
parent 564de0ef12
commit 72ce091f67
4 changed files with 141 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

47
embed/skins.js
View file

@ -139,6 +139,9 @@ MistSkins["default"] = {
{
type: "fullscreen",
classes: ["mistvideo-pointer"]
},{
type: "picture-in-picture",
classes: ["mistvideo-pointer"]
}]
}
},
@ -208,6 +211,10 @@ MistSkins["default"] = {
{
type: "fullscreen",
classes: ["mistvideo-pointer"]
},
{
type: "picture-in-picture",
classes: ["mistvideo-pointer"]
}]
}
}
@ -280,6 +287,10 @@ MistSkins["default"] = {
size: 45,
svg: '<path d="m2.5 10.928v8.5898l4.9023-2.8008 9.6172 5.7832-9.6172 5.7832-4.9023-2.8008v8.5898h15.031l-4.9004-2.8008 9.8691-5.6387 9.8691 5.6387-4.9004 2.8008h15.031v-8.5898l-4.9023 2.8008-9.6172-5.7832 9.6172-5.7832 4.9023 2.8008v-8.5898h-15.033l4.9023 2.8008-9.8691 5.6387-9.8691-5.6387 4.9023-2.8008z" class="fill">'
},
pip: {
size: 45,
svg: '<rect x="5.25" y="12.25" width="34.5" height="19.5" ry="2" class="stroke semiFill toggle"/><rect x="20" y="21" width="17" height="8" rx="2" ry="2" class="semiFill toggle stroke"/>'
},
loop: {
size: 45,
svg: '<path d="M 21.279283,3.749797 A 18.750203,18.750203 0 0 0 8.0304417,9.2511582 L 12.740779,13.961496 A 12.083464,12.083464 0 0 1 21.279283,10.416536 12.083464,12.083464 0 0 1 33.362748,22.5 12.083464,12.083464 0 0 1 21.279283,34.583464 12.083464,12.083464 0 0 1 12.740779,31.038504 l 3.063185,-3.063185 H 4.9705135 V 38.80877 L 8.0304417,35.748842 A 18.750203,18.750203 0 0 0 21.279283,41.250203 18.750203,18.750203 0 0 0 40.029486,22.5 18.750203,18.750203 0 0 0 21.279283,3.749797 Z" class="stroke semiFill toggle" />'
@ -1470,6 +1481,42 @@ MistSkins["default"] = {
return button;
},
"picture-in-picture": function(){
if ((!("setSize" in this.player)) || (!this.info.hasVideo) || (this.source.type.split("/")[1] == "audio") || (!document.pictureInPictureEnabled)) { return; }
var MistVideo = this;
if (!("requestPictureInPicture" in MistVideo.video)) { return; }
var button = this.skin.icons.build("pip");
button.set = function(){
if (document.pictureInPictureElement) {
MistUtil.class.remove(this,"off");
}
else {
MistUtil.class.add(this,"off");
}
};
MistUtil.event.addListener(button,"click",function(){
var promise;
if (document.pictureInPictureElement) {
promise = document.exitPictureInPicture();
}
else {
promise = MistVideo.video.requestPictureInPicture();
}
if (promise) {
promise.then(function(){
button.set();
});
}
else {
button.set();
}
});
button.set();
return button;
},
tracks: function(){
if ((!this.info) || (!this.video)) { return; }