TelegramMessenger · weealisa · Jan 16, 2020 · Jan 18, 2020 · Jan 18, 2020 · Jan 30, 2020
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,5 @@ signer.bat
 bodymovinCert.p12
 bodymovin.zxp
 ZXPSignCmd.exe
+package-lock.json
+test/
diff --git a/README.md b/README.md
@@ -1,2 +1,14 @@
 # bodymovin-extension
+
 Bodymovin UI extension panel
+
+## Development
+
+1. Setup AE for debugging extensions ([guide](https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_9.x/Documentation/CEP%209.0%20HTML%20Extension%20Cookbook.md#debugging-unsigned-extensions))
+2. Install the [CEF client](https://github.com/Adobe-CEP/CEP-Resources/tree/master/CEP_9.x) you'll need for remote debugging
+3. Install extension dependencies (`npm i`)
+4. Install server dependencies (`cd bundle/server && npm i`)
+5. Run `npm run start-dev`
+6. Open the CEF client and navigate to `http://localhost:8092`
+
+The extension window will now hot-reload and you can use the devtools in the CEF client.
diff --git a/bundle/.debug b/bundle/.debug
@@ -28,5 +28,13 @@
 
         </HostList>
     </Extension>
+    <Extension Id="com.bodymovin.bodymovin_server">
+        <HostList>
+
+            <!-- AfterEffects -->
+            <Host Name="AEFT" Port="8192" />
+
+        </HostList>
+    </Extension>
 </ExtensionList>
 
diff --git a/bundle/CSXS/manifest.xml b/bundle/CSXS/manifest.xml
@@ -6,8 +6,8 @@
 	</ExtensionList>
 	<ExecutionEnvironment>
 		<HostList>
-            <Host Name="AEFT" Version="[13.0,16.9]" Port="8093" />
-            <Host Name="AEFX" Version="[13.0,16.9]" Port="8093" />
+            <Host Name="AEFT" Version="[13.0,99.9]" Port="8093" />
+            <Host Name="AEFX" Version="[13.0,99.9]" Port="8093" />
 
             <!-- Illustrator -->
             <!-- <Host Name="ILST" Version="[18.0,18.9]" />-->

diff --git a/bundle/assets/annotations/bodymovin_image_props.ffx b/bundle/assets/annotations/bodymovin_image_props.ffx
diff --git a/bundle/assets/annotations/bodymovin_secondary_color.ffx b/bundle/assets/annotations/bodymovin_secondary_color.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props.ffx b/bundle/assets/annotations/bodymovin_text_props.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props_2.ffx b/bundle/assets/annotations/bodymovin_text_props_2.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props_3.ffx b/bundle/assets/annotations/bodymovin_text_props_3.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props_5.ffx b/bundle/assets/annotations/bodymovin_text_props_5.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props_6.ffx b/bundle/assets/annotations/bodymovin_text_props_6.ffx
diff --git a/bundle/assets/annotations/bodymovin_text_props_7.ffx b/bundle/assets/annotations/bodymovin_text_props_7.ffx
diff --git a/bundle/assets/player/banner_template.html b/bundle/assets/player/banner_template.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+   <!--  CHANGE THE RESOLUTION  -->  
+
+
+<head>
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="ad.size" content="width=__CONTENT_WIDTH__,height=__CONTENT_HEIGHT__">
+<script src="__LOTTIE_SOURCE__"></script>
+<script type="text/javascript">var clickTag = "__CLICK_TAG__";</script>
+<style type="text/css">
+	@charset "UTF-8";
+
+/* CSS Document */
+
+/* Default style, feel free to remove if not needed. */
+body, body * {vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0; cursor: pointer;}
+
+/* Div layer for the entire banner. */
+#content_dc{width: __CONTENT_WIDTH__px; height: __CONTENT_HEIGHT__px;}
+
+/* Invisible button for background clickthrough. */
+#background_exit_dc {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer; opacity: 0; z-index: 400;}
+:focus {outline:none;}
+::-moz-focus-inner {border:0;}
+</style>
+
+</head>
+
+<body>
+<div id="container_dc">
+        <div id="content_dc"></div>       
+        <div id="myborder"></div> 
+        <button id="background_exit_dc" onclick="window.open(window.clickTag)"></button>   
+    </div>  
+
+    <script>
+      lottie.loadAnimation({
+        container: document.getElementById('content_dc'),
+        autoplay: true,
+        loop: __LOOP__,
+        renderer: '__LOTTIE_RENDERER__',
+        __DATA_LOAD__,
+        rendererSettings: {
+          filterSize: {
+              width: '300%',
+              height: '300%',
+              x: '-100%',
+              y: '-100%',
+          }
+        }
+      })
+      .setSubframe(false)
+    </script>
+</body>
+
+</html>
diff --git a/bundle/assets/player/demo.html b/bundle/assets/player/demo.html
@@ -3,13 +3,13 @@
 <head>
     <style>
         body{
-            background-color:#fff;
+            background-color:__[[BODY_BACKGROUND_COLOR]]__;
             margin: 0px;
             height: 100%;
             overflow: hidden;
         }
         #lottie{
-            background-color:#fff;
+            background-color:__[[LOTTIE_BACKGROUND_COLOR]]__;
             width:100%;
             height:100%;
             display:block;