From 90dbc5d553fe13cef6465388aaddc6369d573702 Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Sat, 26 Aug 2023 11:38:46 -0400 Subject: [PATCH 1/6] copying video player assets to allow css imports --- next-cloudinary/config.json | 5 ++ next-cloudinary/package.json | 3 +- next-cloudinary/plugins/copy-assets.ts | 68 +++++++++++++++++++ .../CldVideoPlayer/CldVideoPlayer.tsx | 1 + next-cloudinary/tests/nextjs-app/app/page.tsx | 10 ++- next-cloudinary/tsup.config.ts | 4 +- yarn.lock | 5 ++ 7 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 next-cloudinary/config.json create mode 100644 next-cloudinary/plugins/copy-assets.ts diff --git a/next-cloudinary/config.json b/next-cloudinary/config.json new file mode 100644 index 00000000..e69cbafb --- /dev/null +++ b/next-cloudinary/config.json @@ -0,0 +1,5 @@ +{ + "cloudinary-video-player": { + "version": "1.9.4" + } +} \ No newline at end of file diff --git a/next-cloudinary/package.json b/next-cloudinary/package.json index 9320df62..c894a9d4 100644 --- a/next-cloudinary/package.json +++ b/next-cloudinary/package.json @@ -15,7 +15,8 @@ }, "dependencies": { "@cloudinary-util/url-loader": "^3.10.0", - "@cloudinary-util/util": "^2.2.1" + "@cloudinary-util/util": "^2.2.1", + "mkdirp": "^3.0.1" }, "devDependencies": { "@babel/core": "^7.19.6", diff --git a/next-cloudinary/plugins/copy-assets.ts b/next-cloudinary/plugins/copy-assets.ts new file mode 100644 index 00000000..addd8036 --- /dev/null +++ b/next-cloudinary/plugins/copy-assets.ts @@ -0,0 +1,68 @@ +import { Plugin } from 'esbuild' +import path from 'path'; +import { createWriteStream } from 'fs'; +import { mkdirp } from 'mkdirp'; +import https from 'https'; + +const version = '1.9.4'; + +const assets = [ + `https://unpkg.com/cloudinary-video-player@${version}/dist/cld-video-player.css`, + { + directory: 'fonts', + assets: [ + `https://unpkg.com/cloudinary-video-player@${version}/dist/fonts/cloudinary_icon_for_black_bg.svg`, + `https://unpkg.com/cloudinary-video-player@${version}/dist/fonts/cloudinary_icon_for_white_bg.svg`, + ] + } +]; + +let hasWrittenAssets = false; + +export const plugin: Plugin = { + name: 'copy-assets', + setup: async () => { + const rootPath = path.join(__dirname, '../'); + const distPath = path.join(rootPath, 'dist'); + + if ( hasWrittenAssets ) return; + + await mkdirp(distPath); + + for ( const asset of assets ) { + + if ( typeof asset === 'string' ) { + const writePath = path.join(distPath, path.basename(asset)); + await downloadFile(asset, writePath); + console.log(`Wrote ${asset} to ${writePath}`); + } else if ( typeof asset.directory === 'string' ) { + await mkdirp(path.join(distPath, asset.directory)); + + for ( const dirAsset of asset.assets ) { + const writePath = path.join(distPath, asset.directory, path.basename(dirAsset)); + await downloadFile(dirAsset, writePath); + console.log(`Wrote ${dirAsset} to ${writePath}`); + } + } + } + + hasWrittenAssets = true; + } +} + +/** + * downloadFile + */ + +function downloadFile(assetUrl: string, writePath: string) { + return new Promise((resolve) => { + const file = createWriteStream(writePath); + https.get(assetUrl, function(response) { + response.pipe(file); + file.on('finish', () => { + file.close(); + resolve(); + }); + }); + }) +} \ No newline at end of file diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx index e26883e7..022fd401 100644 --- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx +++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx @@ -2,6 +2,7 @@ import React, { useRef, MutableRefObject } from 'react'; import Script from 'next/script'; import Head from 'next/head'; import { parseUrl } from '@cloudinary-util/util'; +import config from '../../../config.json'; import { CldVideoPlayerProps } from './CldVideoPlayer.types'; import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsLogo } from '../../types/player'; diff --git a/next-cloudinary/tests/nextjs-app/app/page.tsx b/next-cloudinary/tests/nextjs-app/app/page.tsx index 11fd9283..fe4aaf88 100644 --- a/next-cloudinary/tests/nextjs-app/app/page.tsx +++ b/next-cloudinary/tests/nextjs-app/app/page.tsx @@ -1,6 +1,8 @@ "use client"; -import { CldImage, CldUploadWidget } from '../../../'; +import { CldImage, CldUploadWidget, CldVideoPlayer } from '../../../'; + +import '../../../dist/cld-video-player.css'; export default function Home() { return ( @@ -12,6 +14,12 @@ export default function Home() { sources: ['local', 'camera'] }} /> + ) } diff --git a/next-cloudinary/tsup.config.ts b/next-cloudinary/tsup.config.ts index 30a601d5..fb146cb8 100644 --- a/next-cloudinary/tsup.config.ts +++ b/next-cloudinary/tsup.config.ts @@ -1,4 +1,5 @@ import { defineConfig } from 'tsup' +import { plugin as CopyAssetsPlugin } from './plugins/copy-assets'; export default defineConfig({ minify: true, @@ -6,5 +7,6 @@ export default defineConfig({ external: ['react'], sourcemap: true, dts: true, - format: ['esm', 'cjs'] + format: ['esm', 'cjs'], + esbuildPlugins: [CopyAssetsPlugin] }) \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b34a8273..b5ca226a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4990,6 +4990,11 @@ minimatch@^3.0.4, minimatch@^3.1.1: dependencies: brace-expansion "^1.1.7" +mkdirp@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50" + integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg== + mri@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" From 03e14c7b64c57ef0fd59f36bf20c4a0656c8a661 Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Sat, 26 Aug 2023 11:44:38 -0400 Subject: [PATCH 2/6] updating docs to include import for next app router --- docs/pages/cldvideoplayer/basic-usage.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/pages/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx index 05f947d6..5dc8f61a 100644 --- a/docs/pages/cldvideoplayer/basic-usage.mdx +++ b/docs/pages/cldvideoplayer/basic-usage.mdx @@ -34,6 +34,12 @@ import { CldVideoPlayer } from 'next-cloudinary'; /> ``` +If you're using the Next.js 13 App Router, you must additionally import the Cloudinary Video Player stylesheet: + +```jsx +import 'next-cloudinary/cld-video-player.css'; +``` + Date: Sat, 26 Aug 2023 11:50:37 -0400 Subject: [PATCH 3/6] version depracation notice --- docs/pages/cldvideoplayer/configuration.mdx | 4 ++-- next-cloudinary/config.json | 5 ----- .../src/components/CldVideoPlayer/CldVideoPlayer.tsx | 5 ++++- 3 files changed, 6 insertions(+), 8 deletions(-) delete mode 100644 next-cloudinary/config.json diff --git a/docs/pages/cldvideoplayer/configuration.mdx b/docs/pages/cldvideoplayer/configuration.mdx index 6c305253..09ac8d12 100644 --- a/docs/pages/cldvideoplayer/configuration.mdx +++ b/docs/pages/cldvideoplayer/configuration.mdx @@ -39,8 +39,8 @@ import OgImage from '../../components/OgImage'; | 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 | +| version | string | `"1.9.4"` | **Deprecated** | - ` | +| videoRef | Ref | - | React ref to access video element | See Refs Below | | width | string/number | - | **Required**: Player width | `1920` | Missing an option from the [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference) you'd like to see? [Create an issue](https://github.com/colbyfayock/next-cloudinary/issues/new?assignees=&labels=Type%3A+Feature&template=feature_request.md&title=%5BFeature%5D+)! diff --git a/next-cloudinary/config.json b/next-cloudinary/config.json deleted file mode 100644 index e69cbafb..00000000 --- a/next-cloudinary/config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "cloudinary-video-player": { - "version": "1.9.4" - } -} \ No newline at end of file diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx index 022fd401..b7a5769c 100644 --- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx +++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx @@ -2,7 +2,6 @@ import React, { useRef, MutableRefObject } from 'react'; import Script from 'next/script'; import Head from 'next/head'; import { parseUrl } from '@cloudinary-util/util'; -import config from '../../../config.json'; import { CldVideoPlayerProps } from './CldVideoPlayer.types'; import { CloudinaryVideoPlayer, CloudinaryVideoPlayerOptions, CloudinaryVideoPlayerOptionsLogo } from '../../types/player'; @@ -41,6 +40,10 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => { const playerTransformations = Array.isArray(transformation) ? transformation : [transformation]; let publicId = src; + if ( typeof props.version === 'string' ) { + console.warn('The version prop will no longer be supported in future versions due to the unreliability of coordinating assets'); + } + // If the publicId/src is a URL, attempt to parse it as a Cloudinary URL // to get the public ID alone From 77e61d47fb3d53025e05ed652ba9064fdaf30748 Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Sat, 26 Aug 2023 11:52:10 -0400 Subject: [PATCH 4/6] video player version --- docs/pages/cldvideoplayer/configuration.mdx | 2 +- next-cloudinary/plugins/copy-assets.ts | 2 +- .../src/components/CldVideoPlayer/CldVideoPlayer.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/cldvideoplayer/configuration.mdx b/docs/pages/cldvideoplayer/configuration.mdx index 09ac8d12..3017f010 100644 --- a/docs/pages/cldvideoplayer/configuration.mdx +++ b/docs/pages/cldvideoplayer/configuration.mdx @@ -39,7 +39,7 @@ import OgImage from '../../components/OgImage'; | 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"` | **Deprecated** | - ` | +| version | string | `"1.9.14"` | **Deprecated** | - ` | | videoRef | Ref | - | React ref to access video element | See Refs Below | | width | string/number | - | **Required**: Player width | `1920` | diff --git a/next-cloudinary/plugins/copy-assets.ts b/next-cloudinary/plugins/copy-assets.ts index addd8036..20cc3e05 100644 --- a/next-cloudinary/plugins/copy-assets.ts +++ b/next-cloudinary/plugins/copy-assets.ts @@ -4,7 +4,7 @@ import { createWriteStream } from 'fs'; import { mkdirp } from 'mkdirp'; import https from 'https'; -const version = '1.9.4'; +const version = '1.9.14'; const assets = [ `https://unpkg.com/cloudinary-video-player@${version}/dist/cld-video-player.css`, diff --git a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx index b7a5769c..1ba0f10c 100644 --- a/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx +++ b/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx @@ -32,7 +32,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => { onEnded, src, transformation, - version = '1.9.4', + version = '1.9.14', quality = 'auto', width, } = props as CldVideoPlayerProps; From 697f72f70afa597f0cac0d3fa712330fa598a9f4 Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Sat, 26 Aug 2023 11:53:43 -0400 Subject: [PATCH 5/6] fixing path --- docs/pages/cldvideoplayer/basic-usage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/cldvideoplayer/basic-usage.mdx b/docs/pages/cldvideoplayer/basic-usage.mdx index 5dc8f61a..0ea8cd84 100644 --- a/docs/pages/cldvideoplayer/basic-usage.mdx +++ b/docs/pages/cldvideoplayer/basic-usage.mdx @@ -37,7 +37,7 @@ import { CldVideoPlayer } from 'next-cloudinary'; If you're using the Next.js 13 App Router, you must additionally import the Cloudinary Video Player stylesheet: ```jsx -import 'next-cloudinary/cld-video-player.css'; +import 'next-cloudinary/dist/cld-video-player.css'; ``` Date: Mon, 28 Aug 2023 08:30:32 -0400 Subject: [PATCH 6/6] moving mkdirp to dev dep --- next-cloudinary/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next-cloudinary/package.json b/next-cloudinary/package.json index c894a9d4..29e73cb6 100644 --- a/next-cloudinary/package.json +++ b/next-cloudinary/package.json @@ -15,8 +15,7 @@ }, "dependencies": { "@cloudinary-util/url-loader": "^3.10.0", - "@cloudinary-util/util": "^2.2.1", - "mkdirp": "^3.0.1" + "@cloudinary-util/util": "^2.2.1" }, "devDependencies": { "@babel/core": "^7.19.6", @@ -28,6 +27,7 @@ "dotenv": "^16.0.3", "jest": "^29.2.2", "jest-environment-jsdom": "^29.2.2", + "mkdirp": "^3.0.1", "ts-jest": "^29.0.3", "tsup": "^6.6.3", "typescript": "^4.9.4"