Skip to content

Commit

Permalink
feat: v6.6.0 - CldVideoPlayer getVideoPlayerOptions (#477) (#478)
Browse files Browse the repository at this point in the history 
# Description

Updates CldVideoPlayer to use getVideoPlayerProps from the
@cloudinary-util/url-loader package to abstract how we ultimately
construct the player options object. This will allow other frameworks
(Nuxt, Svelte) to share the same code and maintain parity at a higher
rate.

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes

https://github.com/cloudinary-community/next-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

# Description

<!-- Include a summary of the change made and also list the dependencies
that are required if any -->

## Issue Ticket Number

Fixes #<ISSUE_NUMBER>

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/cloudinary-community/next-cloudinary/issues/<ISSUE_NUMBER>
-->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
  • Loading branch information
@colbyfayock @semantic-release-bot
colbyfayock and semantic-release-bot committed May 23, 2024
1 parent 6ac19a3 commit b07fe7f
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 155 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
# [6.6.0-beta.1](https://github.com/cloudinary-community/next-cloudinary/compare/v6.5.2...v6.6.0-beta.1) (2024-05-23)


### Features

* CldVideoPlayer - getVideoPlayerOptions ([#477](https://github.com/cloudinary-community/next-cloudinary/issues/477)) ([4ad73c5](https://github.com/cloudinary-community/next-cloudinary/commit/4ad73c5ec881cfa68e0ba65c6ba59ffa057c12f1))

## [6.5.2](https://github.com/cloudinary-community/next-cloudinary/compare/v6.5.1...v6.5.2) (2024-05-06)


Expand Down
6 changes: 3 additions & 3 deletions next-cloudinary/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "next-cloudinary",
"version": "6.5.2",
"version": "6.6.0-beta.1",
"license": "MIT",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
Expand All @@ -16,8 +16,8 @@
"test:watch": "vitest"
},
"dependencies": {
"@cloudinary-util/types": "1.0.3",
"@cloudinary-util/url-loader": "5.2.2",
"@cloudinary-util/types": "1.0.5",
"@cloudinary-util/url-loader": "5.3.0",
"@cloudinary-util/util": "^3.0.0",
"@tsconfig/recommended": "^1.0.3"
},
Expand Down
133 changes: 7 additions & 126 deletions next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, {useRef, MutableRefObject, useEffect} from 'react';
import Script from 'next/script';
import Head from 'next/head';
import { parseUrl } from '@cloudinary-util/util';
import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptionsLogo, CloudinaryVideoPlayerOptions, } from '@cloudinary-util/types';
import { CloudinaryVideoPlayer } from '@cloudinary-util/types';
import { getVideoPlayerOptions } from '@cloudinary-util/url-loader';

import { CldVideoPlayerProps } from './CldVideoPlayer.types';

import { getCldImageUrl } from '../../helpers/getCldImageUrl';
import { getCldVideoUrl } from '../../helpers/getCldVideoUrl';
import { getCloudinaryConfig } from "../../lib/cloudinary";

let playerInstances: string[] = [];
Expand All @@ -17,56 +15,28 @@ const PLAYER_VERSION = '1.11.1';
const CldVideoPlayer = (props: CldVideoPlayerProps) => {

const {
autoplay,
className,
colors,
config,
controls = true,
fontFace,
height,
id,
language,
languages,
logo = true,
loop = false,
muted = false,
onDataLoad,
onError,
onMetadataLoad,
onPause,
onPlay,
onEnded,
poster,
src,
sourceTypes,
transformation,
quality = 'auto',
width,
...otherCldVidPlayerOptions
} = props as CldVideoPlayerProps;

const playerTransformations = Array.isArray(transformation) ? transformation : [transformation];
let publicId: string = src || "";

const cloudinaryConfig = getCloudinaryConfig(config);
const playerOptions = getVideoPlayerOptions(props, cloudinaryConfig);
const { publicId } = playerOptions;

// If the publicId/src is a URL, attempt to parse it as a Cloudinary URL
// to get the public ID alone

if ( publicId.startsWith('http') ) {
try {
const parts = parseUrl(src);
if ( typeof parts?.publicId === 'string' ) {
publicId = parts?.publicId;
}
} catch(e) {}
if ( typeof publicId === 'undefined' ) {
throw new Error('Video Player requires a Public ID or Cloudinary URL - please specify a src prop');
}

// Set default transformations for the player

playerTransformations.unshift({
quality
});

// Setup the refs and allow for the caller to pass through their
// own ref instance

Expand Down Expand Up @@ -123,95 +93,6 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
function handleOnLoad() {
if ( 'cloudinary' in window ) {
cloudinaryRef.current = window.cloudinary;
let logoOptions: CloudinaryVideoPlayerOptionsLogo = {};

if ( typeof logo === 'boolean' ) {
logoOptions.showLogo = logo;
} else if ( typeof logo === 'object' ) {
logoOptions = {
...logoOptions,
showLogo: true,
logoImageUrl: logo.imageUrl,
logoOnclickUrl: logo.onClickUrl
}
}

// Parse the value passed to 'autoplay';
// if its a boolean or a boolean passed as string ("true") set it directly to browser standard prop autoplay else fallback to default;
// if its a string and not a boolean passed as string ("true") set it to cloudinary video player autoplayMode prop else fallback to undefined;

let autoPlayValue: boolean | 'true' | 'false' = false;
let autoplayModeValue: string | undefined = undefined;

if (typeof autoplay === 'boolean' || autoplay === 'true' || autoplay === 'false') {
autoPlayValue = autoplay
}

if (typeof autoplay === 'string' && autoplay !== 'true' && autoplay !== 'false') {
autoplayModeValue = autoplay;
}

const cloudinaryConfig = getCloudinaryConfig(config);
const { cloudName } = cloudinaryConfig?.cloud;
const { secureDistribution, privateCdn } = cloudinaryConfig?.url;

let playerOptions: CloudinaryVideoPlayerOptions = {
cloud_name: cloudName,
privateCdn,
secureDistribution,

autoplayMode: autoplayModeValue,
autoplay: autoPlayValue,
controls,
fontFace: fontFace || '',
language,
languages,
loop,
muted,
publicId,
width,
height,
aspectRatio: `${width}:${height}`,
transformation: playerTransformations,
...logoOptions,
...otherCldVidPlayerOptions
};

if ( Array.isArray(sourceTypes) ) {
playerOptions.sourceTypes = sourceTypes;
}

if ( typeof colors === 'object' ) {
playerOptions.colors = colors;
}

if ( typeof poster === 'string' ) {
// If poster is a string, assume it's either a public ID
// or a remote URL, in either case pass to `publicId`
playerOptions.posterOptions = {
publicId: poster
};
} else if ( typeof poster === 'object' ) {
// If poster is an object, we can either customize the
// automatically generated image from the video or generate
// a completely new image from a separate public ID, so look
// to see if the src is explicitly set to determine whether
// or not to use the video's ID or just pass things along
if ( typeof poster.src !== 'string' ) {
playerOptions.posterOptions = {
publicId: getCldVideoUrl({
...poster,
src: publicId,
format: 'auto:image',
})
};
} else {
playerOptions.posterOptions = {
publicId: getCldImageUrl(poster)
};
}
}

playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, playerOptions);

Object.keys(events).forEach((key) => {
Expand Down
36 changes: 10 additions & 26 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b07fe7f

Please sign in to comment.