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

embed/imgs/pip.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="svg3937"
+   height="45"
+   width="45"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="pip.svg"
+   viewBox="0 0 45 45"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     pagecolor="#8bff39"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2510"
+     inkscape:window-height="1405"
+     id="namedview3591"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="false"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:zoom="20.977778"
+     inkscape:cx="30.43697"
+     inkscape:cy="22.213983"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg3937"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     scale-x="1"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#8bff39" />
+  <defs
+     id="defs3939" />
+  <metadata
+     id="metadata3942">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="fill:none;stroke:#ffffff;stroke-width:2.50001;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
+     id="rect340"
+     width="34.499989"
+     height="19.49999"
+     x="5.2500048"
+     y="12.250005"
+     ry="2" />
+  <rect
+     style="fill:#ffffff;fill-opacity:0.503374;stroke:#ffffff;stroke-width:1.9854;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
+     id="rect948"
+     width="17.014597"
+     height="8.0146017"
+     x="19.992701"
+     y="20.992701"
+     ry="1.9999996"
+     rx="2" />
+</svg>

embed/imgs/pip_plain.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45" height="45" version="1.1" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <rect x="5.25" y="12.25" width="34.5" height="19.5" ry="2" style="fill:none;stroke-width:2.5;stroke:#fff"/>
+ <rect x="20" y="21" width="17" height="8" rx="2" ry="2" style="fill-opacity:.5;fill:#fff;stroke-width:2;stroke:#fff"/>
+</svg>

embed/skins.js

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