@kaizen/draft-illustration - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.2.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-illustration@2.1.6...@kaizen/draft-illustration@2.2.0) (2021-07-19)
+
+
+### Features
+
+* Add mp4 fallbacks to animated illustrations ([#1770](https://github.com/cultureamp/kaizen-design-system/issues/1770)) ([9c819a2](https://github.com/cultureamp/kaizen-design-system/commit/9c819a23445a5fdcd18661b8f688868e9d18b7e3))
+
+
+
+
+
 ## [2.1.6](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-illustration@2.1.5...@kaizen/draft-illustration@2.1.6) (2021-07-16)
@@ -8,0 +19,0 @@

KaizenDraft/Illustration/Players/VideoPlayer.js

@@ -83,5 +83,6 @@ "use strict";
     }, [prefersReducedMotion]);
-    return (react_1["default"].createElement("video", { "aria-hidden": true, preload: "metadata", ref: videoRef, width: "100%", "data-testid": "kz-video-player", className: style_module_scss_1["default"].wrapper, loop: loop, poster: hosted_assets_1.assetUrl(fallback), autoPlay: prefersReducedMotion ? false : autoplay, playsInline: true },
-        react_1["default"].createElement("source", { src: hosted_assets_1.assetUrl(ambientAnimation), type: "video/webm" })));
+    return (react_1["default"].createElement("video", { "aria-hidden": true, preload: "metadata", ref: videoRef, width: "100%", "data-testid": "kz-video-player", className: style_module_scss_1["default"].wrapper, loop: loop, poster: hosted_assets_1.assetUrl(fallback + ".png"), autoPlay: prefersReducedMotion ? false : autoplay, playsInline: true },
+        react_1["default"].createElement("source", { src: hosted_assets_1.assetUrl(ambientAnimation + ".webm"), type: "video/webm" }),
+        react_1["default"].createElement("source", { src: hosted_assets_1.assetUrl(ambientAnimation + ".mp4"), type: "video/mp4" })));
 };
 //# sourceMappingURL=VideoPlayer.js.map

KaizenDraft/Illustration/Scene.js

@@ -52,3 +52,3 @@ "use strict";
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-capture-intro-loop.png", ambientAnimation: "illustrations/heart/scene/brand-moments-capture-intro-loop.webm", initialAnimation: "illustrations/heart/scene/brand-moments-capture-intro.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-capture-intro-loop", ambientAnimation: "illustrations/heart/scene/brand-moments-capture-intro-loop", initialAnimation: "illustrations/heart/scene/brand-moments-capture-intro" })));
     }
@@ -60,3 +60,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: "illustrations/heart/scene/brand-moments-capture-intro-loop.png" })));
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-positive-outro.png", ambientAnimation: "illustrations/heart/scene/brand-moments-positive-outro.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-positive-outro", ambientAnimation: "illustrations/heart/scene/brand-moments-positive-outro" })));
     }
@@ -68,3 +68,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: "illustrations/heart/scene/brand-moments-positive-outro.png" })));
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-login.png", ambientAnimation: "illustrations/heart/scene/brand-moments-login.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-login", ambientAnimation: "illustrations/heart/scene/brand-moments-login" })));
     }
@@ -77,3 +77,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: "illustrations/heart/scene/brand-moments-login.png" })));
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-error.png", ambientAnimation: "illustrations/heart/scene/brand-moments-error.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/brand-moments-error", ambientAnimation: "illustrations/heart/scene/brand-moments-error" })));
     }
@@ -86,3 +86,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: "illustrations/heart/scene/brand-moments-error.png" })));
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-action.svg", ambientAnimation: "illustrations/heart/scene/empty-states-action.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-action", ambientAnimation: "illustrations/heart/scene/empty-states-action" })));
     }
@@ -97,3 +97,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: themeKey === "zen"
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-informative.svg", ambientAnimation: "illustrations/heart/scene/empty-states-informative.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-informative", ambientAnimation: "illustrations/heart/scene/empty-states-informative" })));
     }
@@ -108,3 +108,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: themeKey === "zen"
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-negative.svg", ambientAnimation: "illustrations/heart/scene/empty-states-negative.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-negative", ambientAnimation: "illustrations/heart/scene/empty-states-negative" })));
     }
@@ -119,3 +119,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: themeKey === "zen"
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-positive.svg", ambientAnimation: "illustrations/heart/scene/empty-states-positive.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-positive", ambientAnimation: "illustrations/heart/scene/empty-states-positive" })));
     }
@@ -130,3 +130,3 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: themeKey === "zen"
     if (isAnimated) {
-        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-neutral.svg", ambientAnimation: "illustrations/heart/scene/empty-states-neutral.webm" })));
+        return (React.createElement(VideoPlayer_1.VideoPlayer, __assign({}, otherProps, { fallback: "illustrations/heart/scene/empty-states-neutral", ambientAnimation: "illustrations/heart/scene/empty-states-neutral" })));
     }
@@ -133,0 +133,0 @@ return (React.createElement(Base_1.Base, __assign({ alt: alt || "" }, otherProps, { name: themeKey === "zen"

package.json

 {
   "name": "@kaizen/draft-illustration",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "description": "The draft illustration component",
@@ -49,3 +49,3 @@ "scripts": {
   },
-  "gitHead": "fb48240db215fb41a160239e2ce69deedaf715d8"
+  "gitHead": "5059a06d2f7e51aaf98099f0fc180f732abcfae4"
 }

No alert changes

Improved metrics

Total package byte prevSize

156579

increased by0.36%

Lines of code

1766

increased by0.06%

No dependency changes