add Picture in Picture

client/src/components/video.vue

@@ -38,6 +38,13 @@
       </ul>
       <ul v-if="!fullscreen" class="video-menu bottom">
         <li v-if="hosting && !clipboard_available"><i @click.stop.prevent="onClipboard" class="fas fa-clipboard"></i></li>
+        <li>
+          <i
+            @click.stop.prevent="requestPictureInPicture"
+            v-tooltip="{ content: 'Picture-in-Picture', placement: 'left', offset: 5, boundariesElement: 'body' }"
+            class="fas fa-external-link-alt"
+          />
+        </li>
       </ul>
       <neko-resolution ref="resolution" v-if="admin" />
       <neko-clipboard ref="clipboard" v-if="hosting && !clipboard_available" />
@@ -461,6 +468,12 @@
       this.onResise()
     }
 
+    requestPictureInPicture() {
+      //@ts-ignore
+      this._video.requestPictureInPicture()
+      this.onResise()
+    }
+
     onFocus() {
       if (!document.hasFocus() || !this.$accessor.active) {
         return