Adds ability to sync with remote controller. (#73)

* Initial checkin Remote file.

* Updates per PR review.

package.json

@@ -31,13 +31,15 @@
   },
   "devDependencies": {
     "@types/chai": "^3.4.34",
+    "@types/lodash.throttle": "^4.1.0",
     "@types/mocha": "^2.2.33",
     "@types/react": "^0.14.50",
     "@types/react-addons-test-utils": "^0.14.15",
     "@types/react-dom": "^0.14.19",
     "@types/sinon": "^1.16.32",
     "@types/sinon-chai": "^2.7.27",
     "@types/tinycolor2": "^1.1.0",
+    "@types/uuid": "^2.0.29",
     "chai": "^3.5.0",
     "codecov.io": "^0.1.6",
     "copyfiles": "^1.0.0",
@@ -73,9 +75,12 @@
     "webpack-dev-server": "^2.2.0-rc.0"
   },
   "dependencies": {
+    "firebase": "^3.6.5",
+    "lodash.throttle": "^4.1.1",
     "material-design-lite": "^1.2.1",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "uuid": "^3.0.1"
   }
 }

src/core/Remixer.ts

@@ -22,6 +22,7 @@ import { Messaging } from "../lib/Messaging";
 import { NumberVariable } from "./variables/NumberVariable";
 import { IRangeVariableParams, RangeVariable } from "./variables/RangeVariable";
 import { IVariableCallback, IVariableKeyMap, Variable } from "./variables/Variable";
+import { Remote } from "../lib/Remote";
 import { StringVariable } from "./variables/StringVariable";
 
 import "../ui/styles/iframe.less";
@@ -250,6 +251,10 @@ class Remixer {
         this.saveVariable(variable);
         variable.executeCallbacks();
       }
+
+      // Save remotely without throttling. If remote sharing is disabled,
+      // a call to this method will simply be a no-op.
+      Remote.saveVariable(variable, false);
     }
   }
 
@@ -309,11 +314,25 @@ class Remixer {
   }
 
   /**
-   * Saves the Variable to local storage.
+   * Saves the Variable to both local storage and remote.
+   * @static
    * @param {Variable} variable The Variable to save.
    */
   static saveVariable(variable: Variable): void {
     LocalStorage.saveVariable(variable);
+    Remote.saveVariable(variable, true);
+  }
+
+  /**
+   * Initializes the remote controller.
+   *
+   * A call to this method will allow you to share your Variables to the
+   * remote controller being hosted as per your firebase configuration.
+   * @static
+   * @param {{}} config The firebase credentials.
+   */
+  static inializeRemote(config: {}): void {
+    Remote.initializeRemote(config);
   }
 }
 

src/core/variables/Variable.ts

@@ -165,8 +165,6 @@ export class Variable implements IVariableParams {
   }
 
   set selectedValue(value: any) {
-    // TODO(cjcox): For cloud mode, determine when to save to avoid multiple
-    // calls when using slider, etc.
     this._selectedValue = value;
     this.save();
     if (this._initialized) {

src/lib/Constants.ts

@@ -26,7 +26,11 @@ export const KeyEvent = {
 
 /** Storage keys constants. */
 export const StorageKey = {
+  PREFERENCES: "__remixer_preferences__",
   REMIXER: "__remixer__",
+  KEY_REMIXER: "remixer",
+  KEY_REMOTE_ID: "remoteId",
+  KEY_VARIABLES: "variables"
 };
 
 /** Variable data constraints. */
@@ -73,6 +77,7 @@ export const CSS = {
   RMX_RADIO_LIST:         "rmx-radio-list",
   RMX_RADIO_LIST_ITEM:    "rmx-radio-list-item",
   RMX_SELECTED_VALUE:     "rmx-selected-value",
+  RMX_SHARE_MENU:         "rmx-share-menu",
   RMX_SLIDER:             "rmx-slider",
   RMX_SLIDER_MAX:         "rmx-slider-max-value",
   RMX_SLIDER_MIN:         "rmx-slider-min-value",

src/lib/LocalStorage.ts

@@ -48,6 +48,14 @@ interface ISerializableDataMap {
   [remixer: string]: ISerializableData;
 }
 
+/**
+ * Interface representing serialized preferences.
+ * @interface
+ */
+interface ISerializablePreferences {
+  remoteId: string;
+}
+
 /**
  * A class that provides utilities to interact with browser local storage.
  * @class
@@ -80,6 +88,28 @@ export class LocalStorage {
     this.saveRawData(remixerData);
   }
 
+  /**
+   * Retrieves a preference from local storage.
+   * @param  {string} key The key of the preference to retrieve.
+   * @return {any}        Returns the preference object.
+   */
+  static getPreference(key: string): any {
+    let prefs = this.getRawPreferences();
+    return prefs[key];
+  }
+
+  /**
+   * Saves a preference to local storage.
+   * @static
+   * @param {string} key   The preference key.
+   * @param {any}    value The preference value.
+   */
+  static savePreference(key: string, value: any): void {
+    let prefs = this.getRawPreferences();
+    prefs[key] = value;
+    this.saveRawPreferences(prefs);
+  }
+
   /**
    * Returns an initialized Variable based on the data type.
    * @private
@@ -113,7 +143,7 @@ export class LocalStorage {
    */
   private static getRawData(): ISerializableDataMap {
     let data = JSON.parse(localStorage.getItem(StorageKey.REMIXER));
-    return data ? data.variables : {};
+    return data ? data[StorageKey.KEY_VARIABLES] : {};
   }
 
   /**
@@ -123,6 +153,27 @@ export class LocalStorage {
    * @param {ISerializableDataMap} data The serialized data to save.
    */
   private static saveRawData(data: ISerializableDataMap): void {
-    localStorage.setItem(StorageKey.REMIXER, JSON.stringify({variables: data}));
+    localStorage.setItem(StorageKey.REMIXER, JSON.stringify({[StorageKey.KEY_VARIABLES]: data}));
+  }
+
+  /**
+   * Retrieves the raw JSON preferences from local storage.
+   * @private
+   * @static
+   * @return {ISerializablePreferences} The preferences from local storage.
+   */
+  private static getRawPreferences(): ISerializablePreferences {
+    let preferences = JSON.parse(localStorage.getItem(StorageKey.PREFERENCES));
+    return preferences || {};
+  }
+
+  /**
+   * Saves the raw JSON preferences to local storage.
+   * @private
+   * @static
+   * @param {ISerializablePreferences} preferences The serialized preferences to save.
+   */
+  private static saveRawPreferences(preferences: ISerializablePreferences): void {
+    localStorage.setItem(StorageKey.PREFERENCES, JSON.stringify(preferences));
   }
 }