update readme

display-design-studio · Mar 26, 2024 · c920a1f · c920a1f
1 parent bca7c95
commit c920a1f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -242,6 +242,22 @@ const player = useVuePlayer()
 </style>
 ```
 
+## Provided props in the VuePlayer instance
+
+| Name                     | Type       | Description                                                    |
+| ------------------------ | ---------- | -------------------------------------------------------------- |
+| `togglePlay`             | `Function` | Function to toggle play state                                  |
+| `playing`                | `Boolean`  | Play state                                                     |
+| `toggleMute`             | `Function` | Function to toggle mute state                                  |
+| `videoMuted`             | `Boolean`  | Mute state                                                     |
+| `time`                   | `Number`   | Current video time                                             |
+| `duration`               | `Number`   | Video duration                                                 |
+| `convertTimeToDuration`  | `Function` | Function to convert time                                       |
+| `percentagePlayed`       | `Number`   | Percentage played                                              |
+| `seekToPercentage`       | `Function` | Function to set video current time based on clicked percentage |
+| `openFullScreen`         | `Function` | Enable fullscreen                                              |
+| `togglePictureInPicture` | `Function` | Enable PiP                                                     |
+
 ## Props
 
 | Name                | Type      | Required | Default  | Description                                                                                         |

diff --git a/src/components/VuePlayer.vue b/src/components/VuePlayer.vue
@@ -112,6 +112,24 @@ const convertTimeToDuration = (seconds) => {
         .join(":");
 }
 
+const openFullScreen = () => {
+    if (playerRef.value.requestFullscreen) {
+        playerRef.value.requestFullscreen();
+    } else if (playerRef.value.webkitRequestFullscreen) {
+        playerRef.value.webkitRequestFullscreen();
+    } else if (playerRef.value.msRequestFullscreen) {
+        playerRef.value.msRequestFullscreen();
+    }
+}
+
+const togglePictureInPicture = () => {
+    if (document.pictureInPictureElement) {
+        document.exitPictureInPicture();
+    } else if (document.pictureInPictureEnabled) {
+        playerRef.value.requestPictureInPicture();
+    }
+}
+
 onMounted(() => {
     bindEvents()
 })
@@ -125,7 +143,9 @@ const injectedReactive = reactive({
     duration,
     convertTimeToDuration,
     percentagePlayed,
-    seekToPercentage
+    seekToPercentage,
+    openFullScreen,
+    togglePictureInPicture
 })
 
 provide('vue-player', injectedReactive)