Add PiP

index.html

@@ -91,6 +91,7 @@ <h2 id="zoneName">zone</h2>
                 <button onclick="aboutBlank()">Open in New Tab</button>
                 <button onclick="downloadZone()">Download</button>
                 <button onclick="closeZone()">Close</button>
+                <button onclick="pictureInPicture()">Picture in Picture</button>
             </div>
         </div>
         <iframe id="zoneFrame"></iframe>
@@ -127,6 +128,7 @@ <h3 id="popupTitle">Title</h3>
             <input type="file" id="importData" style="display: none;" onchange="loadData(event)">
         </div>
     </footer>
+    <script src="pip.js"></script>
     <script src="script.js"></script>
     <script>
         const search = new URLSearchParams(window.location.search);

script.js

@@ -286,6 +286,28 @@ function aboutBlank() {
     })
 }
 
+
+function pictureInPicture() {
+    const id = document.getElementById('zoneId')?.textContent;
+    if (!id) return;
+
+    const zone = zones.find(z => z.id + '' === id);
+    if (!zone) return;
+
+    const src = zone.url
+        .replace('{COVER_URL}', coverURL)
+        .replace('{HTML_URL}', htmlURL)
+        + '?t=' + Date.now();
+
+    new PiPPlayer({
+        width: "100%",
+        height: "100%",
+        ui: false,
+        sandbox: "allow-scripts allow-same-origin",
+        fetchFullPage: true
+    }).open(src).catch(e => console.warn('PiP open failed', e));
+}
+
 function closeZone() {
     zoneViewer.hidden = false;
     zoneViewer.style.display = "none";