From 88543e95caadfb3a210f69ab23c280557dd1bd82 Mon Sep 17 00:00:00 2001
From: Kayoshi-dev <maxime.jme@gmail.com>
Date: Tue, 4 May 2021 23:50:37 +0200
Subject: [PATCH] Add an optional props to hide the PiP icon

Use the boolean props pip-visible to hide or show the Picture in Picture button.
---
 src/dashboard/controls.vue           | 5 +++--
 src/dashboard/dashboard.vue          | 5 +++--
 src/dashboard/picture-in-picture.vue | 5 +++--
 src/vue-core-video-player.vue        | 6 +++++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/dashboard/controls.vue b/src/dashboard/controls.vue
index 6170d51..6ad8058 100644
--- a/src/dashboard/controls.vue
+++ b/src/dashboard/controls.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="setting-control">
       <volume-control :muted="muted" />
-      <picture-in-picture />
+      <picture-in-picture :pip-visible="pipVisible" />
       <settings-control />
       <fullscreen-control />
     </div>
@@ -33,7 +33,8 @@ export default {
   },
   props: {
     visible: Boolean,
-    muted: Boolean
+    muted: Boolean,
+    pipVisible: Boolean
   }
 }
 </script>
diff --git a/src/dashboard/dashboard.vue b/src/dashboard/dashboard.vue
index 834159a..5bea832 100644
--- a/src/dashboard/dashboard.vue
+++ b/src/dashboard/dashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vcp-dashboard" autoplay v-show="show" ref="dashboard">
     <Progress />
-    <Controls :muted="muted" />
+    <Controls :muted="muted" :pip-visible="pipVisible" />
   </div>
 </template>
 
@@ -26,7 +26,8 @@ export default {
   },
   props: {
     controls: [Boolean, String],
-    muted: Boolean
+    muted: Boolean,
+    pipVisible: Boolean
   },
   data () {
     return {
diff --git a/src/dashboard/picture-in-picture.vue b/src/dashboard/picture-in-picture.vue
index 609c58f..47fe55a 100644
--- a/src/dashboard/picture-in-picture.vue
+++ b/src/dashboard/picture-in-picture.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-core-video-player-control" v-if="show" @click="requestPictureInPicture">
+  <div class="vue-core-video-player-control" v-if="show && pipVisible" @click="requestPictureInPicture">
     <div class="btn-control btn-pip" >
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="16" viewBox="0 0 28 16"><g data-name="6 13"><g data-name="5 1" fill="#fff"><path data-name="9" d="M18 14h10v2H18z"/><path data-name="10" d="M26 9h2v6h-2z"/></g></g><g data-name="6 14" fill="#fff"><g data-name="4 1"><path data-name="7" d="M12 16H2v-2h10z"/><path data-name="8" d="M2 16H0V6h2z"/></g><path data-name="41" d="M28 2H0V0h28z"/></g></svg>
       <div class="tips">{{$t('dashboard.btn.pip')}}</div>
@@ -26,7 +26,8 @@ export default {
   name: 'PictureInPicture',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    pipVisible: Boolean
   },
   data () {
     return {
diff --git a/src/vue-core-video-player.vue b/src/vue-core-video-player.vue
index 23c1fa6..4869cca 100644
--- a/src/vue-core-video-player.vue
+++ b/src/vue-core-video-player.vue
@@ -8,7 +8,7 @@
       :playsinline="playsinline"
       :src="source"></video>
     <Layers />
-    <Dashboard v-if="!isMobile" :controls="controls" :muted="muted" />
+    <Dashboard v-if="!isMobile" :controls="controls" :muted="muted" :pip-visible="pipVisible" />
     <MobileDashboard v-if="isMobile" :controls="controls" :muted="muted" />
   </div>
 </template>
@@ -55,6 +55,10 @@ export default {
       type: Boolean,
       default: false
     },
+    pipVisible: {
+      type: Boolean,
+      default: true
+    },
     controls: {
       type: [String, Boolean],
       default: true