Begin new frontend code

frontend/audio.ts

@@ -0,0 +1,24 @@
+// Copyright (c) 2016 Brandon Thomas <bt@brand.io, echelon@gmail.com>
+
+declare var buzz: any; // TODO: static types.
+
+export default class Audio {
+  sound: any;
+
+  constructor() {
+    this.sound = null;
+  }
+
+  playUrl(url: string) {
+    this.stop();
+    this.sound = new buzz.sound(url);
+    this.sound.play();
+  }
+
+  stop() {
+    if (this.sound != null) {
+      this.sound.stop();
+    }
+  }
+}
+

frontend/main.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2016 Brandon Thomas <bt@brand.io, echelon@gmail.com>
+
+declare var $: any;
+
+import Audio from "./audio";
+import decode_url_hash from "./url";
+import get_audio_api_url from "./url";
+import set_url_hash from "./url";
+import { RawSentence, FilteredSentence } from "./sentence";
+
+$(function() {
+  console.log('installing...');
+  window.audio = new Audio();
+  install_events();
+});
+
+function install_events() {
+  $('form').submit(function(ev: any): boolean {
+    let input = $('input#jungle').val(),
+        sentence = new RawSentence(input),
+        filtered = sentence.filter();
+
+    let url = get_audio_api_url(filtered);
+
+    window.audio.playUrl(url);
+
+    console.log(ev);
+    ev.preventDefault();
+    return false;
+  });
+
+  $('input#jungle').on('keyup', function(ev: any): any {
+    var sentence = $('input#jungle').val();
+
+    if (ev.keyCode === 27) {
+      $('input#jungle').val(''); // ESC key.
+      window.audio.stop();
+    }
+  });
+}
+

frontend/sentence.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2016 Brandon Thomas <bt@brand.io, echelon@gmail.com>
+
+export class RawSentence {
+  value: string;
+
+  constructor(sentence: string) {
+    this.value = sentence;
+  }
+
+  /**
+   * Process a raw sentence into a cleaned up sentence (no extra
+   * spaces, etc.) Returns a string sentence.
+   */
+  filter(): FilteredSentence {
+    let lower = this.value.toLowerCase(),
+        split = lower.split(/\s+/),
+        filtered = split.filter(function(s: string): boolean { return s !== ''; }),
+        joined = filtered.join(' ');
+
+    return new FilteredSentence(joined);
+  }
+}
+
+export class FilteredSentence {
+  value: string;
+
+  constructor(sentence: string) {
+    this.value = sentence;
+  }
+}
+

frontend/url.ts

@@ -0,0 +1,54 @@
+// Copyright (c) 2016 Brandon Thomas <bt@brand.io, echelon@gmail.com>
+
+import { RawSentence, FilteredSentence } from "./sentence";
+
+declare var URI: any; // TODO: Remove dependency.
+
+/**
+ * Sentence -> Audio generation API URL
+ */
+export default function get_audio_api_url(sentence: FilteredSentence) : string {
+  // I may expand the API later, but for now this is all I'll expose.
+  let encoded = encodeURIComponent(sentence.value);
+  return `/speak?v=trump&vol=3&s=${encoded}`;
+}
+
+/**
+ * Sentence -> Persistent URL hash
+ */
+export function set_url_hash(sentence: FilteredSentence) {
+  let state = { 's': sentence.value },
+      json = JSON.stringify(state),
+      urlHash = '';
+
+  if (!json) {
+    urlHash = new URI('/').hash('').toString();
+  } else {
+    let uriEncoded = encodeURIComponent(json);
+    urlHash = new URI('/').hash(uriEncoded).toString();
+  }
+
+  console.log('set state, urlhash = ', urlHash);
+  window.history.replaceState(null, null, urlHash);
+}
+
+/**
+ * Persistent URL hash -> Raw Sentence
+ */
+export function decode_url_hash(): RawSentence {
+  let urlHash = new URI(window.location).hash(),
+      hashless = urlHash.replace('#', ''),
+      uriDecodedJson = decodeURIComponent(hashless),
+      state = null;
+
+  if (uriDecodedJson) {
+    state = JSON.parse(uriDecodedJson);
+  }
+
+  if (!state || !('s' in state)) {
+    return null;
+  } else {
+    new RawSentence(state['s']);
+  }
+}
+

frontend/webpack.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   entry: {
-    testing_app: './old_test_page/testing_app.ts', // TODO: Rename broke this
+    // Frontend code
+    main: './main.ts',
+
+    // Old code
     waveform_component: './waveform_component.ts',
+    //testing_app: './old_test_page/testing_app.ts', // TODO: Rename broke this
   },
   output: {
     path: '../web/output',

web/demo_jon.html

@@ -19,7 +19,7 @@
 
       <form>
         <div id="input-box">
-          <input name="jungle" value="this is the text we're going to be entering" autocomplete="off">
+          <input id="jungle" name="jungle" autocomplete="off">
         </div>
 
         <div id="buttons">

web/demo_jt.html

@@ -19,7 +19,7 @@
 
       <form>
         <div id="input-box">
-          <input name="jungle" value="this is the text we're going to be entering" autocomplete="off">
+          <input id="jungle" name="jungle" autocomplete="off">
         </div>
 
         <div id="buttons">
@@ -32,7 +32,8 @@
           <div class="clear"></div>
         </div>
       </form>
-
     </div>
+    <script src="/assets/output/libraries.js"/></script>
+    <script src="/assets/output/main.built.js"/></script>
   </body>
 </html>