From c6840a88d49b3472a64e4be2ff78332b84dedfb1 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 20 Oct 2016 02:39:26 -0400 Subject: [PATCH] Begin new frontend code --- frontend/audio.ts | 24 +++++++++++++++++ frontend/main.ts | 41 +++++++++++++++++++++++++++++ frontend/sentence.ts | 31 ++++++++++++++++++++++ frontend/url.ts | 54 ++++++++++++++++++++++++++++++++++++++ frontend/webpack.config.js | 6 ++++- web/demo_jon.html | 2 +- web/demo_jt.html | 5 ++-- 7 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 frontend/audio.ts create mode 100644 frontend/main.ts create mode 100644 frontend/sentence.ts create mode 100644 frontend/url.ts diff --git a/frontend/audio.ts b/frontend/audio.ts new file mode 100644 index 0000000000..adca40c2f9 --- /dev/null +++ b/frontend/audio.ts @@ -0,0 +1,24 @@ +// Copyright (c) 2016 Brandon Thomas + +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(); + } + } +} + diff --git a/frontend/main.ts b/frontend/main.ts new file mode 100644 index 0000000000..35bb5a0c48 --- /dev/null +++ b/frontend/main.ts @@ -0,0 +1,41 @@ +// Copyright (c) 2016 Brandon Thomas + +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(); + } + }); +} + diff --git a/frontend/sentence.ts b/frontend/sentence.ts new file mode 100644 index 0000000000..4a42974357 --- /dev/null +++ b/frontend/sentence.ts @@ -0,0 +1,31 @@ +// Copyright (c) 2016 Brandon Thomas + +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; + } +} + diff --git a/frontend/url.ts b/frontend/url.ts new file mode 100644 index 0000000000..bb75adb0b7 --- /dev/null +++ b/frontend/url.ts @@ -0,0 +1,54 @@ +// Copyright (c) 2016 Brandon Thomas + +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']); + } +} + diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index f9740126b3..44940f0b17 100644 --- a/frontend/webpack.config.js +++ b/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', diff --git a/web/demo_jon.html b/web/demo_jon.html index 09a3ca4829..19519df141 100644 --- a/web/demo_jon.html +++ b/web/demo_jon.html @@ -19,7 +19,7 @@
- +
diff --git a/web/demo_jt.html b/web/demo_jt.html index 5f37304333..f63e32b993 100644 --- a/web/demo_jt.html +++ b/web/demo_jt.html @@ -19,7 +19,7 @@
- +
@@ -32,7 +32,8 @@
-
+ +