Skip to content

Commit

Permalink
feat-#194: video player picture in picture
Browse files Browse the repository at this point in the history
  • Loading branch information
@Baroshem
Baroshem committed Mar 23, 2024
1 parent 217d2ec commit 9bb12e9
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 46 deletions.
70 changes: 43 additions & 27 deletions docs/content/2.components/CldVideoPlayer.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description:
description:
---

## The usage
Expand Down Expand Up @@ -62,33 +62,49 @@ Check the browser console after playing and pausing the video for logs that were

:video-player-with-events

## Picture in Picture

Picture-in-picture helps your viewers continue their multitasking agenda and maintain context while navigating different apps or interfaces using picture-in-picture functionality.

```html
<CldVideoPlayer
width="600"
height="600"
src="<Cloudinary URL>"
pictureInPictureToogle
/>
```

:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" pictureInPictureToggle}

## General Props

| Prop Name | Type | Default | Description | Example |
| -------------- | -------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` |
| className | string | - | Additional class names added to the video container | `"my-video-player"` |
| colors | object | See below | Player chrome colors | See Colors Below |
| controls | boolean | `true` | Show player controls | `true` |
| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` |
| height | string/number | - | **Required**: Player height | `1080` |
| id | string | - | Video instance ID, defaults to src value | `"my-video"` |
| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below |
| loop | boolean | `false` | Loop the video | `true` |
| muted | boolean | `false` | Load muted by default | `true` |
| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below |
| onError | Function | - | Triggered on video error | See Events Below |
| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below |
| onPause | Function | - | Triggered on video pause | See Events Below |
| onPlay | Function | - | Triggered on video play | See Events Below |
| onEnded | Function | - | Triggered when video has ended play | See Events Below |
| playerRef | Ref | - | React ref to access Player instance | See Refs Below |
| showLogo | boolea | `true` | Show the Cloudinary logo on Player | `false` |
| src | string | - | **Required**: Video public ID | `"videos/my-video"` |
| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` |
| version | string | `"1.9.4"` | Cloudinary Video Player version | `"1.9.4"` |
| videoRef | Ref | - | React ref to access video element | See Refs Below |
| width | string/number | - | **Required**: Player width | `1920` |
| Prop Name | Type | Default | Description | Example |
| ---------------------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` |
| className | string | - | Additional class names added to the video container | `"my-video-player"` |
| colors | object | See below | Player chrome colors | See Colors Below |
| controls | boolean | `true` | Show player controls | `true` |
| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` |
| height | string/number | - | **Required**: Player height | `1080` |
| id | string | - | Video instance ID, defaults to src value | `"my-video"` |
| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below |
| loop | boolean | `false` | Loop the video | `true` |
| muted | boolean | `false` | Load muted by default | `true` |
| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below |
| onError | Function | - | Triggered on video error | See Events Below |
| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below |
| onPause | Function | - | Triggered on video pause | See Events Below |
| onPlay | Function | - | Triggered on video play | See Events Below |
| onEnded | Function | - | Triggered when video has ended play | See Events Below |
| playerRef | Ref | - | React ref to access Player instance | See Refs Below |
| showLogo | boolean | `true` | Show the Cloudinary logo on Player | `false` |
| src | string | - | **Required**: Video public ID | `"videos/my-video"` |
| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` |
| version | string | `"1.10.6"` | Cloudinary Video Player version | `"1.9.4"` |
| videoRef | Ref | - | React ref to access video element | See Refs Below |
| width | string/number | - | **Required**: Player width | `1920` |
| pictureInPictureToogle | boolean | - | Enable Picture in Picture mode | true |

## Colors Prop

Expand Down Expand Up @@ -139,7 +155,7 @@ To do this, create a new Ref instance and pass as ref to the `CldVideoPlayer` co
<script setup lang="ts">
const cldVideoPlayerRef = ref();
console.log(cldVideoPlayerRef)
console.log(cldVideoPlayerRef);
// will output { playerRef, videoRef }
</script>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
},
"dependencies": {
"@cloudinary-util/url-loader": "^5.2.1",
"@cloudinary-util/types": "1.0.1",
"@nuxt/kit": "^3.5.0",
"@unpic/vue": "^0.0.42",
"defu": "^6.1.2"
Expand Down
22 changes: 5 additions & 17 deletions playground/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ const cldVideoRef = ref();
</script>

<template>
<button :id="buttonId">
Select Image or Video
</button>
<button :id="buttonId">Select Image or Video</button>

Check warning on line 18 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 18 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break before closing tag (`</button>`), but no line breaks found

Check warning on line 18 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 18 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break before closing tag (`</button>`), but no line breaks found
<CldMediaLibrary
api-key="12345"
:button-id="buttonId"
Expand All @@ -29,28 +27,18 @@ const cldVideoRef = ref();
:button-id="buttonId"
/>
<!-- Usage of `CldOgImage.vue` component -->
<CldOgImage
src="cld-sample-2"
twitter-title="test"
/>
<CldOgImage src="cld-sample-2" twitter-title="test" />

Check warning on line 30 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'twitter-title' should be on a new line

Check warning on line 30 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'twitter-title' should be on a new line
<!-- Usage of `CldVideoPlayer.vue` component -->
<CldVideoPlayer
ref="cldVideoRef"
width="1620"
height="1080"
src="videos/mountain-stars"
pictureInPictureToggle

Check warning on line 37 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Attribute 'pictureInPictureToggle' must be hyphenated

Check warning on line 37 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Attribute 'pictureInPictureToggle' must be hyphenated
/>
<!-- Usage of `CldUploadWidget.vue` component -->
<CldUploadWidget
v-slot="{ open }"
upload-preset="nuxt-cloudinary-unsigned"
>
<button
type="button"
@click="open"
>
Upload an Image
</button>
<CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">

Check warning on line 40 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'upload-preset' should be on a new line

Check warning on line 40 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'upload-preset' should be on a new line
<button type="button" @click="open">Upload an Image</button>

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'@click' should be on a new line

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break before closing tag (`</button>`), but no line breaks found

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

'@click' should be on a new line

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break after opening tag (`<button>`), but no line breaks found

Check warning on line 41 in playground/app.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 16) 

Expected 1 line break before closing tag (`</button>`), but no line breaks found
</CldUploadWidget>
<!-- Usage of `CldUploadButton.vue` component -->
<CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
Expand Down
8 changes: 6 additions & 2 deletions src/runtime/components/CldVideoPlayer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface CloudinaryVideoPlayerOptions {
secure?: boolean;
transformation?: Array<object> | object;
hideContextMenu?: boolean;
pictureInPictureToggle?: boolean;
}
export interface CloudinaryVideoPlayerOptionsColors {
Expand Down Expand Up @@ -67,6 +68,7 @@ export type CldVideoPlayerProps = Pick<
videoRef?: { value: HTMLVideoElement | null };
quality?: string | number;
width: string | number;
pictureInPictureToggle: boolean;
};
const props = withDefaults(defineProps<CldVideoPlayerProps>(), {
Expand All @@ -75,7 +77,7 @@ const props = withDefaults(defineProps<CldVideoPlayerProps>(), {
logo: true,
loop: false,
muted: false,
version: "1.9.4",
version: "1.10.6",
quality: "auto",
});
Expand Down Expand Up @@ -104,6 +106,7 @@ const {
quality,
width,
hideContextMenu,
pictureInPictureToggle,
} = props as CldVideoPlayerProps;
const playerTransformations = Array.isArray(transformation)
Expand Down Expand Up @@ -191,6 +194,7 @@ const handleOnLoad = () => {
transformation: playerTransformations,
...logoOptions,
hideContextMenu,
pictureInPictureToggle,
};
if (typeof colors === "object") {
Expand Down Expand Up @@ -230,7 +234,7 @@ useHead({
link: [
{
href: `https://unpkg.com/cloudinary-video-player@${
version || "1.9.4"
version || "1.10.6"
}/dist/cld-video-player.min.css`,
rel: "stylesheet",
},
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,11 @@
dependencies:
mime "^3.0.0"

"@cloudinary-util/types@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394"
integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==

"@cloudinary-util/url-loader@^5.2.1":
version "5.2.1"
resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22"
Expand Down

0 comments on commit 9bb12e9

Please sign in to comment.