added dotlottie option in lottie comp

Author: raheeliftikhar5

client/packages/lowcoder/package.json

@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.21.2",
     "@rjsf/core": "^5.21.2",

client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx

@@ -29,6 +29,11 @@ const Player = lazy(
     .then(module => ({default: module.Player}))
 );
 
+const DotLottiePlayer = lazy(
+  () => import('@lottiefiles/dotlottie-react')
+    .then(module => ({default: module.DotLottieReact}))
+);
+
 /**
  * JsonLottie Comp
  */
@@ -90,8 +95,9 @@ const speedOptions = [
 ] as const;
 
 const ModeOptions = [
-  { label: "Data", value: "standard" },
-  { label: "Advanced", value: "advanced" },
+  { label: "Lottie JSON", value: "standard" },
+  { label: "DotLottie", value: "dotLottie" },
+  { label: "IconScout", value: "advanced" },
 ] as const;
 
 let JsonLottieTmpComp = (function () {
@@ -102,6 +108,7 @@ let JsonLottieTmpComp = (function () {
       JSON.stringify(defaultLottie, null, 2)
     ),
     srcIconScout: IconscoutControl(IconScoutAssetType.LOTTIE),
+    srcDotLottie: withDefault(StringControl, 'https://assets-v2.lottiefiles.com/a/9e7d8a50-1180-11ee-89a6-3b0ab1ca8a0e/hUfEwc6xNt.lottie'),
     uuidIconScout: StringControl,
     valueIconScout: withDefault(ArrayOrJSONObjectControl, JSON.stringify({})),
     speed: dropdownControl(speedOptions, "1"),
@@ -162,27 +169,50 @@ let JsonLottieTmpComp = (function () {
             rotate: props.container.rotation,
           }}
         >
-          <Player
-            key={
-              [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
-            }
-            keepLastFrame={props.keepLastFrame}
-            autoplay={props.animationStart === "auto" && true}
-            hover={props.animationStart === "on hover" && true}
-            loop={props.loop === "single" ? false : true}
-            speed={Number(props.speed)}
-            src={
-              props.sourceMode === 'advanced'
-              ? (isEmpty(props.valueIconScout) ? '' : props.valueIconScout)
-              : props.value
-            }
-            style={{
-              height: "100%",
-              width: "100%",
-              maxWidth: "100%",
-              maxHeight: "100%",
-            }}
-          />
+          {props.sourceMode === 'dotLottie'
+            ? (
+              <DotLottiePlayer
+                key={
+                  [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
+                }
+                // keepLastFrame={props.keepLastFrame}
+                autoplay={props.animationStart === "auto" && true}
+                playOnHover={props.animationStart === "on hover" && true}
+                loop={props.loop === "single" ? false : true}
+                speed={Number(props.speed)}
+                src={props.srcDotLottie}
+                style={{
+                  height: "100%",
+                  width: "100%",
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                }}
+              />
+            )
+            : (
+              <Player
+                key={
+                  [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
+                }
+                keepLastFrame={props.keepLastFrame}
+                autoplay={props.animationStart === "auto" && true}
+                hover={props.animationStart === "on hover" && true}
+                loop={props.loop === "single" ? false : true}
+                speed={Number(props.speed)}
+                src={
+                  props.sourceMode === 'advanced'
+                  ? (isEmpty(props.valueIconScout) ? '' : props.valueIconScout)
+                  : props.value
+                }
+                style={{
+                  height: "100%",
+                  width: "100%",
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                }}
+              />
+            )
+          }
         </div>
       </div>
     );
@@ -198,6 +228,9 @@ let JsonLottieTmpComp = (function () {
             {children.sourceMode.getView() === 'standard' && children.value.propertyView({
               label: trans("jsonLottie.lottieJson"),
             })}
+            {children.sourceMode.getView() === 'dotLottie' && children.srcDotLottie.propertyView({
+              label: "Source",
+            })}
             {children.sourceMode.getView() === 'advanced' && children.srcIconScout.propertyView({
               label: "Lottie Source",
             })}

client/yarn.lock

@@ -3113,6 +3113,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lottiefiles/dotlottie-react@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "@lottiefiles/dotlottie-react@npm:0.13.0"
+  dependencies:
+    "@lottiefiles/dotlottie-web": 0.40.1
+  peerDependencies:
+    react: ^17 || ^18 || ^19
+  checksum: bafe6ded727aab991ff03f6ff5a2fd1a41b1f429b36175f34140017fc684e0a8ef7f7b713d189bd49948c4b728fe1d05c7d8c20a0bea0d8c1ae1ed87614fe843
+  languageName: node
+  linkType: hard
+
+"@lottiefiles/dotlottie-web@npm:0.40.1":
+  version: 0.40.1
+  resolution: "@lottiefiles/dotlottie-web@npm:0.40.1"
+  checksum: a79e60c33845311cb055ea661abb2f4211063e149788aea724afbed05a09ae569d50b4c0e5825d13eb5fc62a33c3dc74f2f3900fdb1e99f8594feddc72d2cc27
+  languageName: node
+  linkType: hard
+
 "@lottiefiles/react-lottie-player@npm:^3.5.3":
   version: 3.5.3
   resolution: "@lottiefiles/react-lottie-player@npm:3.5.3"
@@ -14232,6 +14250,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@fortawesome/free-regular-svg-icons": ^6.5.1
     "@fortawesome/free-solid-svg-icons": ^6.5.1
     "@fortawesome/react-fontawesome": latest
+    "@lottiefiles/dotlottie-react": ^0.13.0
     "@manaflair/redux-batch": ^1.0.0
     "@rjsf/antd": ^5.21.2
     "@rjsf/core": ^5.21.2