From d0f6f9ecfb8ff439acb7819b0f4bc76986fdaa77 Mon Sep 17 00:00:00 2001
From: Carlos Castro <ccastro@microsoft.com>
Date: Mon, 14 Nov 2016 15:59:27 -0800
Subject: [PATCH 1/3] BotChat AnimationCard support

+Supporting short video and gif animation card
+Fixing package.json so that project builds fine in VScode
---
 package.json         |  5 +----
 src/Attachment.tsx   | 37 +++++++++++++++++++++++++++++++++++--
 src/BotConnection.ts | 16 +++++++++++++++-
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index a07e9225c0..9819d7c4dd 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/Attachment.tsx b/src/Attachment.tsx
index 16501fe3e8..879b94951a 100644
--- a/src/Attachment.tsx
+++ b/src/Attachment.tsx
@@ -45,6 +45,9 @@ export const AttachmentView = (props: {
     const imageWithOnLoad = (url: string) =>
         <img src={ url } onLoad={ () => props.onImageLoad() } />;
 
+    const animationWithOnLoad = (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 +57,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)
@@ -86,6 +98,7 @@ export const AttachmentView = (props: {
         case "application/vnd.microsoft.card.video":
             if (!attachment.content || !attachment.content.media || attachment.content.media.length === 0)
                 return null;
+            if(attachment.content.media[0])
             return (
                 <div className='wc-card video'>
                     { videoWithOnLoad(attachment.content.media[0].url, attachment.content.image ? attachment.content.image.url : null, attachment.content.autostart, attachment.content.autoloop) }
@@ -96,6 +109,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) ? animationWithOnLoad : 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 +194,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>;
+            }
     }
 }
\ No newline at end of file
diff --git a/src/BotConnection.ts b/src/BotConnection.ts
index e63da540a6..e5092ebd3a 100644
--- a/src/BotConnection.ts
+++ b/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,

From 7e0c22e4dab3479b37c06920c45b710f71bb6aed Mon Sep 17 00:00:00 2001
From: Carlos Castro <ccastro@microsoft.com>
Date: Mon, 14 Nov 2016 16:04:50 -0800
Subject: [PATCH 2/3] Fix extra line

---
 src/Attachment.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Attachment.tsx b/src/Attachment.tsx
index 879b94951a..50f34d4cd8 100644
--- a/src/Attachment.tsx
+++ b/src/Attachment.tsx
@@ -98,7 +98,6 @@ export const AttachmentView = (props: {
         case "application/vnd.microsoft.card.video":
             if (!attachment.content || !attachment.content.media || attachment.content.media.length === 0)
                 return null;
-            if(attachment.content.media[0])
             return (
                 <div className='wc-card video'>
                     { videoWithOnLoad(attachment.content.media[0].url, attachment.content.image ? attachment.content.image.url : null, attachment.content.autostart, attachment.content.autoloop) }

From 6dadf1eae81900a5eba7a84d9c31f5d89a212c5c Mon Sep 17 00:00:00 2001
From: Carlos Castro <ccastro@microsoft.com>
Date: Mon, 14 Nov 2016 16:51:37 -0800
Subject: [PATCH 3/3] Refactor animation display functions to a single one

---
 src/Attachment.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Attachment.tsx b/src/Attachment.tsx
index 50f34d4cd8..596722f5dc 100644
--- a/src/Attachment.tsx
+++ b/src/Attachment.tsx
@@ -42,10 +42,7 @@ 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 animationWithOnLoad = (url: string, thumbnailUrl?: string, autoPlay?:boolean, loop?: boolean) =>
+    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) =>
@@ -112,7 +109,7 @@ export const AttachmentView = (props: {
             if (!attachment.content || !attachment.content.media || attachment.content.media.length === 0)
                 return null;
             
-            let contentFunction = isGifMedia(attachment.content.media[0].url) ? animationWithOnLoad : videoWithOnLoad; 
+            let contentFunction = isGifMedia(attachment.content.media[0].url) ? imageWithOnLoad : videoWithOnLoad; 
 
             return (
                 <div className='wc-card animation'>