Implement video in imagemap (#100)

* Add type for video in imagemap message

* [kitchensink] Add example code for video in imagemap

Author: Hyunje Jun

examples/kitchensink/index.js

@@ -256,6 +256,20 @@ function handleText(message, replyToken, source) {
             { area: { x: 0, y: 520, width: 520, height: 520 }, type: 'uri', linkUri: 'https://store.line.me/family/play/en' },
             { area: { x: 520, y: 520, width: 520, height: 520 }, type: 'message', text: 'URANAI!' },
           ],
+          video: {
+            originalContentUrl: `${baseURL}/static/imagemap/video.mp4`,
+            previewImageUrl: `${baseURL}/static/imagemap/preview.jpg`,
+            area: {
+              x: 280,
+              y: 385,
+              width: 480,
+              height: 270,
+            },
+            externalLink: {
+              linkUri: 'https://line.me',
+              label: 'LINE'
+            }
+          },
         }
       );
     case 'bye':

examples/kitchensink/static/imagemap/preview.jpg

@@ -417,6 +417,40 @@ export type ImageMapMessage = MessageCommon & {
    */
   altText: string;
   baseSize: Size;
+  /**
+   * Video to play inside a image map messagea
+   */
+  video?: {
+    /**
+     * URL of video file (Max: 1000 characters)
+     *
+     * - **HTTPS**
+     * - mp4
+     * - Max: 1 minute
+     * - Max: 10 MB
+     *
+     * A very wide or tall video may be cropped when played in some environments.
+     */
+    originalContentUrl: string;
+    /**
+     * URL of preview image (Max: 1000 characters)
+     *
+     * - **HTTPS**
+     * - JPEG
+     * - Max: 240 x 240
+     * - Max: 1 MB
+     */
+    previewImageUrl: string;
+    area: Area;
+    /**
+     * External link to be displayed after a video is played
+     * This property is required if you set a video to play and a label to display after the video on the imagemap
+     */
+    externalLink?: {
+      linkUri: string;
+      label: string;
+    };
+  };
   /**
    * Action when tapped (Max: 50)
    */