Merge pull request #77 from /issues/74-typescript-def

Issues/74 typescript def

README.md

@@ -38,15 +38,15 @@ const options = {
     bigFixedRatio: false,      // fixedRatio for the big ones
     bigAlignItems: 'center',   // How to align the big items
     smallAlignItems: 'center', // How to align the small row or column of items if there is a big one
-    maxWidth: Infinity,        // The maximum width of the elements 
+    maxWidth: Infinity,        // The maximum width of the elements
     maxHeight: Infinity,       // The maximum height of the elements
-    smallMaxWidth: Infinity,   // The maximum width of the small elements 
+    smallMaxWidth: Infinity,   // The maximum width of the small elements
     smallMaxHeight: Infinity,  // The maximum height of the small elements
     bigMaxWidth: Infinity,     // The maximum width of the big elements
     bigMaxHeight: Infinity,    // The maximum height of the big elements
     bigMaxRatio: 3/2,          // The narrowest ratio to use for the big elements (default 2x3)
     bigMinRatio: 9/16,         // The widest ratio to use for the big elements (default 16x9)
-    bigFirst: true,            // Whether to place the big one in the top left (true) or bottom right (false). 
+    bigFirst: true,            // Whether to place the big one in the top left (true) or bottom right (false).
                                // You can also pass 'column' or 'row' to change whether big is first when you are in a row (bottom) or a column (right) layout
     animate: true,             // Whether you want to animate the transitions using jQuery (not recommended, use CSS transitions instead)
     window: window,            // Lets you pass in your own window object which should be the same window that the element is in
@@ -64,7 +64,7 @@ const boxes = layout.getLayout([
     {
         width: 640,     // The native width of this element (eg. subscriber.videoWidth())
         height: 480,    // The native height of this element (eg. subscriber.videoHeight())
-        big: false      // Whether to treat this element as a bigger element 
+        big: false      // Whether to treat this element as a bigger element
     }
 ]);
 ```

package.json

@@ -3,6 +3,7 @@
   "version": "3.7.2",
   "description": "Automatic layout of video elements (publisher and subscriber) minimising white-space for the OpenTok on WebRTC API. This is intended for use with the OpenTok on WebRTC JS API.",
   "main": "opentok-layout.js",
+  "types": "./types/opentok-layout-js.d.ts",
   "dependencies": {},
   "devDependencies": {
     "babel-core": "^6.26.3",
@@ -26,7 +27,8 @@
     "webpack-command": "^0.4.1"
   },
   "scripts": {
-    "test": "npx eslint . && node ./tests/test-node.js && npx run-tests",
+    "test": "npx eslint . && node ./tests/test-node.js && npx run-tests && npm run type-test",
+    "type-test": "npx --package typescript tsc types/test.ts --noEmit --noErrorTruncation",
     "start": "http-server",
     "dev": "npx webpack -w & npm start"
   },

types/opentok-layout-js.d.ts

@@ -0,0 +1,52 @@
+declare module 'opentok-layout-js' {
+  type alignOptions = 'start' | 'center' | 'end';
+
+  export type Options = {
+    alignItems: alignOptions;
+    animate: boolean;
+    bigAlignItems: alignOptions;
+    bigClass: string;
+    bigFirst: boolean;
+    bigFixedRatio: false;
+    bigMaxHeight: number;
+    bigMaxRatio: number;
+    bigMaxWidth: number;
+    bigMinRatio: number;
+    bigPercentage: number;
+    fixedRatio: boolean;
+    ignoreClass: string;
+    maxHeight: number;
+    maxRatio: number;
+    maxWidth: number;
+    minRatio: number;
+    smallAlignItems: alignOptions;
+    smallMaxHeight: number;
+    smallMaxWidth: number;
+    window: Window;
+  };
+
+  type Element = {
+    big: boolean;
+    height: number;
+    width: number;
+  };
+
+  type Box = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+  };
+
+  type GetLayout = (elements: Array<Element>) => Array<Box>;
+
+  export type LayoutContainer = {
+    getLayout: GetLayout;
+    layout: () => void;
+  };
+
+  export default function initLayoutContainer(
+    container: HTMLElement | string,
+    opts: Options
+  ): LayoutContainer;
+}

types/test.ts

@@ -0,0 +1,44 @@
+/// <reference path="opentok-layout-js.d.ts" />
+
+import initLayoutContainer, { Options } from "opentok-layout-js";
+
+/* eslint-disable */
+
+
+const options: Options = {
+  maxRatio: 3/2,
+  minRatio: 9/16,
+  fixedRatio: false,
+  alignItems: 'center',
+  bigClass: "OT_big",
+  bigPercentage: 0.8,
+  bigFixedRatio: false,
+  bigAlignItems: 'center',
+  smallAlignItems: 'center',
+  maxWidth: Infinity,
+  maxHeight: Infinity,
+  smallMaxWidth: Infinity,
+  smallMaxHeight: Infinity,
+  bigMaxWidth: Infinity,
+  bigMaxHeight: Infinity,
+  bigMaxRatio: 3/2,
+  bigMinRatio: 9/16,
+  bigFirst: true,
+  animate: true,
+  window: window,
+  ignoreClass: 'OT_ignore',
+};
+
+const target = document.createElement('div');
+
+const layout = initLayoutContainer(target, options)
+
+layout.layout();
+
+const boxes = layout.getLayout([
+  {
+      width: 640,     // The native width of this element (eg. subscriber.videoWidth())
+      height: 480,    // The native height of this element (eg. subscriber.videoHeight())
+      big: false      // Whether to treat this element as a bigger element
+  }
+]);