BotChat AnimationCard support

package.json

@@ -13,7 +13,7 @@
     "clean": "rm -rf built",
     "minify": "webpack --optimize-minimize --optimize-dedupe",
     "start": "http-server -p 8000",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha"
   },
   "repository": {
     "type": "git",
@@ -42,8 +42,5 @@
     "ts-loader": "^0.8.2",
     "typescript": "^2.0.8",
     "webpack": "^1.13.1"
-  },
-  "scripts": {
-    "test": "mocha"
   }
 }

src/Attachment.tsx

@@ -42,8 +42,8 @@ export const AttachmentView = (props: {
             { buttons.map(button => <li><button onClick={ () => onClickButton(button.type, button.value) }>{ button.title }</button></li>) }
         </ul>;
 
-    const imageWithOnLoad = (url: string) =>
-        <img src={ url } onLoad={ () => props.onImageLoad() } />;
+    const imageWithOnLoad = (url: string, thumbnailUrl?: string, autoPlay?:boolean, loop?: boolean) =>
+        <img src={ url } autoPlay = { autoPlay } loop = { loop } poster = { thumbnailUrl } onLoad={ () => props.onImageLoad() } />;
 
     const audio = (audioUrl: string, autoPlay?:boolean, loop?: boolean) =>
         <audio src={ audioUrl } autoPlay={ autoPlay } controls loop={ loop } />;
@@ -54,6 +54,15 @@ export const AttachmentView = (props: {
     const attachedImage = (images?: { url: string }[]) =>
         images && images.length > 0 && imageWithOnLoad(images[0].url);
 
+    const isGifMedia = (url: string): boolean => {
+        return url.slice((url.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase() == 'gif';
+    }
+
+    const isUnsupportedCardContentType = (contentType: string): boolean => {
+        let searchPattern = new RegExp('^application/vnd\.microsoft\.card\.', 'i');
+        return searchPattern.test(contentType); 
+    }
+
     switch (attachment.contentType) {
         case "application/vnd.microsoft.card.hero":
             if (!attachment.content)
@@ -96,6 +105,22 @@ export const AttachmentView = (props: {
                 </div>
             );
 
+        case "application/vnd.microsoft.card.animation":
+            if (!attachment.content || !attachment.content.media || attachment.content.media.length === 0)
+                return null;
+
+            let contentFunction = isGifMedia(attachment.content.media[0].url) ? imageWithOnLoad : videoWithOnLoad; 
+
+            return (
+                <div className='wc-card animation'>
+                    { contentFunction(attachment.content.media[0].url, attachment.content.image ? attachment.content.image.url : null, attachment.content.autostart, attachment.content.autoloop) }
+                    <h1>{ attachment.content.title }</h1>
+                    <h2>{ attachment.content.subtitle }</h2>
+                    <p>{ attachment.content.text }</p>
+                    { buttons(attachment.content.buttons) }
+                </div>
+            );
+
         case "application/vnd.microsoft.card.audio":
             if (!attachment.content || !attachment.content.media || attachment.content.media.length === 0)
                 return null;
@@ -165,7 +190,11 @@ export const AttachmentView = (props: {
             return videoWithOnLoad(attachment.contentUrl);
 
         default:
-            return <span>[File of type '{ (attachment as any).contentType }']</span>;
-
+            if(isUnsupportedCardContentType(attachment['contentType'])) {
+                return <span>[Unknown Card '{ (attachment as any).contentType }']</span>;    
+            }
+            else {
+                return <span>[File of type '{ (attachment as any).contentType }']</span>;
+            }
     }
 }

src/BotConnection.ts

@@ -104,7 +104,21 @@ export interface VideoCard {
     }
 }
 
-export type Attachment = Media | HeroCard | Thumbnail | Signin | Receipt | AudioCard | VideoCard;
+export interface AnimationCard {
+    contentType: "application/vnd.microsoft.card.animation",
+    content: {
+        title?: string,
+        subtitle?: string,
+        text?: string,
+        media?: { url: string, profile?: string }[],
+        buttons?: Button[],
+        image?: { url: string, alt?: string },
+        autoloop?: boolean,
+        autostart?: boolean
+    }
+}
+
+export type Attachment = Media | HeroCard | Thumbnail | Signin | Receipt | AudioCard | VideoCard | AnimationCard;
 
 export interface User {
     id: string,