		@@ -0,1 +1,16 @@
		1.0.0-beta.4 / 2021-05-09
		==================

		New functionality
		-----------------
		* align video attributes in React and Angular(#77)
		* Added ondestroy lifecycle hook to video component (#78)

		Other changes
		-----------------
		* Disable package-lock generation by adding .npmrc config
		* Feature/add vue sdk infrastructure (#74)
		* Add dynamic copy right date (#76)


		1.0.0-beta.3 / 2021-04-12
		@@ -2,0 +17,0 @@ ==================

+1

-1

index.esm.js.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"index.esm.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}
		{"version":3,"file":"index.esm.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}

+1

-1

index.js.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"index.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}
		{"version":3,"file":"index.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}

+1

-1

index.umd.js.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"index.umd.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}
		{"version":3,"file":"index.umd.js","sources":["../src/AdvancedImage.tsx","../src/AdvancedVideo.tsx"],"sourcesContent":["import React from 'react';\nimport { CloudinaryImage } from '@cloudinary/base/assets/CloudinaryImage';\n\nimport {\n HtmlImageLayer,\n Plugins,\n isBrowser,\n serverSideSrc,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html'\n\ninterface ImgProps {\n cldImg: CloudinaryImage,\n plugins?: Plugins,\n [x: string]: any\n}\n\n/*\n @mixin ReactSDK\n * @description The Coudinday React SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary.\n * The SDK also comes with support for optional js plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness\n \n @example\n * <caption>\n * Please note that the order of the plugins is important. See home for more details.\n * </caption>\n * // Example\n * import {CloudinaryImage} from \"@cloudinary/base/assets/CloudinaryImage\";\n * import {\n * AdvancedImage,\n * accessibility,\n * responsive,\n * lazyload,\n * placeholder\n * } from '@cloudinary/react';\n \n const App = () => {\n \n const myCld = new Cloudinary({ cloudName: 'demo'});\n * let img = myCld().image('sample');\n \n return (\n * <div>\n * <div style={{height: \"1000px\"}}/>\n * <AdvancedImage\n * cldImg={img}\n * plugins={[lazyload(), responsive(100), placeholder()]}\n * />\n * </div>\n * )\n * };\n \n \n \n \n \n /\n\n/*\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary image component\n * @prop {CloudinaryImage} cldImg Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()\n /\nclass AdvancedImage extends React.Component <ImgProps> {\n imageRef: React.RefObject<HTMLImageElement>;\n htmlLayerInstance: HtmlImageLayer;\n\n constructor(props: ImgProps) {\n super(props);\n this.imageRef = React.createRef();\n }\n\n /\n On mount creates a new HTMLLayer instance and initialises with ref to img element,\n * user generated cloudinaryImage and the plugins to be used\n /\n componentDidMount() {\n this.htmlLayerInstance = new HtmlImageLayer(\n this.imageRef.current,\n this.props.cldImg,\n this.props.plugins\n )\n }\n\n /\n On update we cancel running plugins and update image instance with the state of user\n * cloudinaryImage and the state of plugins\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlLayerInstance.update(this.props.cldImg, this.props.plugins)\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);\n }\n\n render() {\n const {\n cldImg,\n plugins,\n ...otherProps // Assume any other props are for the base element\n } = this.props;\n if (isBrowser()) { // on client side render\n return <img suppressHydrationWarning {...otherProps} ref={this.imageRef} />\n } else { // on server side render\n const src = serverSideSrc(\n this.props.plugins,\n this.props.cldImg\n );\n return <img {...otherProps} src={src} />\n }\n }\n}\n\nexport { AdvancedImage };\n","import React, { Component, createRef, EventHandler, MutableRefObject, SyntheticEvent } from 'react';\nimport { CloudinaryVideo } from '@cloudinary/base';\n\nimport {\n HtmlVideoLayer,\n Plugins,\n VideoSources,\n cancelCurrentlyRunningPlugins\n} from '@cloudinary/html';\n\ntype ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;\n\ninterface VideoProps {\n cldVid: CloudinaryVideo,\n plugins?: Plugins,\n sources?: VideoSources,\n innerRef?: ((instance: any) => void) \| MutableRefObject<unknown> \| null\n\n // supported video attributes\n controls?: boolean\n loop?: boolean,\n muted?: boolean,\n poster?: string,\n preload?: string,\n autoPlay?: boolean,\n playsInline?: boolean\n\n // supported video events\n onPlay?: ReactEventHandler<any>,\n onLoadStart?: ReactEventHandler<any>,\n onPlaying?: ReactEventHandler<any>,\n onError?: ReactEventHandler<any>,\n onEnded?: ReactEventHandler<any>\n}\n\n/\n @memberOf ReactSDK\n * @type {Component}\n * @description The Cloudinary video component\n * @prop {CloudinaryVideo} transformation Generated by @cloudinary/base\n * @prop {Plugins} plugins Advanced image component plugins lazyload()\n * @prop videoAttributes Optional attributes include controls, loop, muted, poster, preload, autoplay\n * @prop videoEvents Optional video events include play, loadstart, playing, error, ended\n * @prop {VideoSources} sources Optional sources to generate\n * @example\n * <caption>\n * Using custom defined resources.\n * </caption>\n * const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});\n * const videoEl = useRef();\n * const sources = [\n * {\n * type: 'mp4',\n * codecs: ['vp8', 'vorbis'],\n * transcode: videoCodec(auto())\n * },\n * {\n * type: 'webm',\n * codecs: ['avc1.4D401E', 'mp4a.40.2'],\n * videoCodec: videoCodec(auto())\n * }];\n \n return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />\n /\nclass AdvancedVideo extends Component <VideoProps> {\n videoRef: MutableRefObject<HTMLVideoElement \| null>\n htmlVideoLayerInstance: HtmlVideoLayer;\n\n constructor(props: VideoProps) {\n super(props);\n this.videoRef = createRef();\n this.attachRef = this.attachRef.bind(this);\n }\n\n /\n On mount creates a new HTMLVideoLayer instance and initialises with ref to video element,\n * user generated cloudinaryVideo and the plugins to be used\n /\n componentDidMount() {\n this.htmlVideoLayerInstance = new HtmlVideoLayer(\n this.videoRef && this.videoRef.current,\n this.props.cldVid,\n this.props.sources,\n this.props.plugins,\n this.getVideoAttributes()\n )\n }\n\n /\n On update we cancel running plugins and update the video instance if the src\n * was changed\n /\n componentDidUpdate() {\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);\n // call html layer to update the dom again with plugins and reset toBeCanceled\n this.htmlVideoLayerInstance.update(this.props.cldVid, this.props.sources, this.props.plugins, this.getVideoAttributes())\n }\n\n /\n On unmount we cancel the currently running plugins\n /\n componentWillUnmount() {\n // safely cancel running events on unmount\n cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState)\n }\n\n /\n returns video attributes\n /\n getVideoAttributes() {\n return {\n controls: this.props.controls,\n loop: this.props.loop,\n muted: this.props.muted,\n poster: this.props.poster,\n preload: this.props.preload,\n autoplay: this.props.autoPlay,\n playsinline: this.props.playsInline\n };\n }\n\n /\n Attach both this.videoRef and props.innerRef as ref to the given element\n * @param element - the element to attach a ref to\n */\n attachRef(element: HTMLVideoElement) {\n this.videoRef.current = element;\n const { innerRef } = this.props;\n\n if (innerRef) {\n if (innerRef instanceof Function) {\n innerRef(element);\n } else {\n innerRef.current = element;\n }\n }\n };\n\n render() {\n const {\n cldVid,\n plugins,\n sources,\n innerRef,\n ...videoEvents // Assume any other props are for the base element\n } = this.props;\n\n return <video {...videoEvents} ref={this.attachRef} />\n }\n}\n\nexport { AdvancedVideo };\n"],"names":["AdvancedImage","props","imageRef","React","createRef","componentDidMount","htmlLayerInstance","HtmlImageLayer","current","cldImg","plugins","componentDidUpdate","cancelCurrentlyRunningPlugins","htmlPluginState","update","componentWillUnmount","render","otherProps","isBrowser","suppressHydrationWarning","ref","src","serverSideSrc","Component","AdvancedVideo","videoRef","attachRef","bind","htmlVideoLayerInstance","HtmlVideoLayer","cldVid","sources","getVideoAttributes","controls","loop","muted","poster","preload","autoplay","autoPlay","playsinline","playsInline","element","innerRef","Function","videoEvents"],"mappings":"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"}

+1

-1

package.json

		{
		"name": "@cloudinary/react",
		"version": "1.0.0-beta.3",
		"version": "1.0.0-beta.4",
		"description": "A React component for Cloudinary",
		@@ -5,0 +5,0 @@ "author": "cloudinary",

@cloudinary/react - npm Package Compare versions

Improved metrics