cloudinary-core - npm Package Compare versions

Comparing version 2.10.3 to 2.11.0

cloudinary-core.d.ts

@@ -846,4 +846,22 @@ export as namespace cloudinary;
     transformation(options?: Transformation | Transformation.Options): Transformation;
+
+    injectTransparentVideoElement(container: HTMLElement, publicId: string, options: TransparentVideoOptions): Promise<HTMLElement | {status: string, message: string}>
 }
 
+
+interface TransparentVideoOptions extends Transformation.Options {
+    externalLibraries?: {
+        seeThru?: string,
+        [future:string]:string
+    }
+    loop?: boolean,
+    autoplay?: true,
+    playsinline?: boolean,
+    muted?: true,
+    controls?: false,
+    max_timeout_ms?: number,
+    class?: string,
+    poster?: string
+}
+
 declare let _default: {
@@ -850,0 +868,0 @@ ClientHintsMetaTag: ClientHintsMetaTag,

package.json

 {
   "name": "cloudinary-core",
-  "version": "2.10.3",
+  "version": "2.11.0",
   "description": "Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.",
@@ -5,0 +5,0 @@ "main": "cloudinary-core.js",

src/cloudinary.js

@@ -27,5 +27,12 @@ import {normalizeToArray} from "./util/parse/normalizeToArray";
   setData,
-  width
+  width,
+  isIntersectionObserverSupported
 } from './util';
+//
 
+import mountCloudinaryVideoTag from "./util/features/transparentVideo/mountCloudinaryVideoTag";
+import enforceOptionsForTransparentVideo from "./util/features/transparentVideo/enforceOptionsForTransparentVideo";
+import mountSeeThruCanvasTag from "./util/features/transparentVideo/mountSeeThruCanvasTag";
+import checkSupportForTransparency from "./util/features/transparentVideo/checkSupportForTransparency";
+
 defaultBreakpoints = function(width, steps = 100) {
@@ -684,3 +691,3 @@ return steps * Math.ceil(width / steps);
           }
-          const isLazyLoading = (options.loading === 'lazy' && !this.isNativeLazyLoadSupported() && this.isLazyLoadSupported() && !elements[0].getAttribute('src'));
+          const isLazyLoading = (options.loading === 'lazy' && isIntersectionObserverSupported() && !tag.getAttribute('src'));
           if (setUrl || isLazyLoading){
@@ -714,18 +721,2 @@ // If data-width exists, set width to be data-width
   /**
-   * Returns true if Intersection Observer API is supported
-   * @returns {boolean}
-   */
-  isLazyLoadSupported() {
-    return window && 'IntersectionObserver' in window;
-  }
-
-  /**
-   * Returns true if using Chrome
-   * @returns {boolean}
-   */
-  isNativeLazyLoadSupported() {
-    return 'loading' in HTMLImageElement.prototype;
-  }
-
-  /**
    * Returns a {@link Transformation} object, initialized with the specified options, for chaining purposes.
@@ -745,2 +736,44 @@ * @function Cloudinary#transformation
 
+
+  /**
+   * @description This function will append a TransparentVideo element to the htmlElContainer passed to it.
+   *              TransparentVideo can either be an HTML Video tag, or an HTML Canvas Tag.
+   * @param {HTMLElement} htmlElContainer
+   * @param {string} publicId
+   * @param {object} options The {@link TransparentVideoOptions} options to apply - Extends TransformationOptions
+   *                 options.playsinline    - HTML Video Tag's native playsinline - passed to video element.
+   *                 options.poster         - HTML Video Tag's native poster - passed to video element.
+   *                 options.loop           - HTML Video Tag's native loop - passed to video element.
+   *                 options?.externalLibraries = { [key: string]: string} - map of external libraries to be loaded
+   * @return {Promise<HTMLElement | {status:string, message:string}>}
+   */
+  injectTransparentVideoElement(htmlElContainer, publicId, options = {}) {
+    return new Promise((resolve, reject) => {
+      if (!htmlElContainer) {
+        reject({status: 'error', message: 'Expecting htmlElContainer to be HTMLElement'});
+      }
+
+      enforceOptionsForTransparentVideo(options);
+
+      let videoURL = this.video_url(publicId, options);
+
+      checkSupportForTransparency().then((isNativelyTransparent) => {
+        let mountPromise;
+
+        if (isNativelyTransparent) {
+          mountPromise = mountCloudinaryVideoTag(htmlElContainer, this, publicId, options);
+          resolve(htmlElContainer);
+        } else {
+          mountPromise = mountSeeThruCanvasTag(htmlElContainer, videoURL, options);
+        }
+
+        mountPromise
+          .then(() => {
+          resolve(htmlElContainer);
+        }).catch(({status, message}) => { reject({status, message});});
+
+        // catch for checkSupportForTransparency()
+      }).catch(({status, message}) => { reject({status, message});});
+    });
+  }
 }
@@ -747,0 +780,0 @@

src/configuration.js

@@ -206,5 +206,7 @@ /**
   "use_root_path",
-  "version"
+  "version",
+  "externalLibraries",
+  "max_timeout_ms"
 ];
 
 export default Configuration;

src/constants.js

@@ -11,2 +11,4 @@ export var VERSION = "2.5.0";
 
+export var DEFAULT_TIMEOUT_MS = 10000;
+
 export var DEFAULT_POSTER_OPTIONS = {
@@ -78,2 +80,6 @@ format: 'jpg',
 
+export const DEFAULT_EXTERNAL_LIBRARIES = {
+  seeThru: 'https://unpkg.com/seethru@4/dist/seeThru.min.js'
+}
+
 /**
@@ -166,2 +172,2 @@ * Predefined placeholder transformations
  * @property {string} 'raw'   A raw file
- */
+ */

src/url.js

@@ -60,3 +60,3 @@ import Transformation from './transformation';
   const {signature} = options;
-  const isFormatted = !signature || (signature.startsWith('s--') && signature.endsWith('--'));
+  const isFormatted = !signature || (signature.indexOf('s--') === 0 && signature.substr(-2) === '--');
   delete options.signature;
@@ -63,0 +63,0 @@

src/util/lazyLoad.js

@@ -15,12 +15,3 @@ /*
 /**
- * Check if native lazy loading is supported
- * @return {boolean} true if 'loading' property is defined for HTMLImageElement
- */
-export function isNativeLazyLoadSupported() {
-  return typeof HTMLImageElement === "object" && HTMLImageElement.prototype.loading;
-}
-
-/**
- * Calls onIntersect() when intersection is detected, or when
- * no native lazy loading or when IntersectionObserver isn't supported.
+ * Calls onIntersect() when intersection is detected, or when IntersectionObserver isn't supported.
  * @param {Element} el - the element to observe
@@ -31,3 +22,3 @@ * @param {function} onIntersect - called when the given element is in view
   try {
-    if (isNativeLazyLoadSupported() || !isIntersectionObserverSupported()) {
+    if (!isIntersectionObserverSupported()) {
       // Return if there's no need or possibility to detect intersection
@@ -34,0 +25,0 @@ onIntersect();

No alert changes

Improved metrics

Total package byte prevSize

2006327

increased by4.85%

Number of package files

63

increased by18.87%

Lines of code

24075

increased by4.52%

No dependency changes