From 1d32cce1d5a21d5a649419bf323ab635534c3977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E4=B8=9E=E5=AE=8F?= <ihcaoe@gmail.com>
Date: Sun, 7 Aug 2016 14:52:17 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=8A=A0=E5=90=88=E6=88=90=E7=9A=84jsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GuanKiann/HuatIm/HapSing.jsx | 29 +++++++++++++++++++++++++++++
 src/GuanKiann/HuatIm/HuatIm.jsx  |  8 +++++---
 2 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/GuanKiann/HuatIm/HapSing.jsx

diff --git a/src/GuanKiann/HuatIm/HapSing.jsx b/src/GuanKiann/HuatIm/HapSing.jsx
new file mode 100644
index 00000000..32e34538
--- /dev/null
+++ b/src/GuanKiann/HuatIm/HapSing.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Debug from 'debug';
+
+var debug = Debug('itaigi:HapSing');
+
+export default class HapSing extends React.Component {
+
+  play(id) {
+    debug('play')
+    document.getElementById(id).play();
+  }
+
+  render() {
+    var id = this.props.音標;
+    return (
+      <div className='HuatIm'>
+        <audio id={'audio_' + id}>
+          <source type='audio/mpeg'
+            src={'http://服務.意傳.台灣/%E8%AA%9E%E9%9F%B3%E5%90%88%E6%88%90?%E6%9F%A5%E8%A9%A2%E8%85%94%E5%8F%A3=%E9%96%A9%E5%8D%97%E8%AA%9E&%E6%9F%A5%E8%A9%A2%E8%AA%9E%E5%8F%A5=' + id } />
+        </audio>
+        <button onClick={this.play.bind(this, 'audio_' + id)}
+          className='ui compact icon button'>
+          <i className='icon play'></i>
+        </button>
+      </div>
+    );
+  }
+};
diff --git a/src/GuanKiann/HuatIm/HuatIm.jsx b/src/GuanKiann/HuatIm/HuatIm.jsx
index 8f015892..1b866c3a 100644
--- a/src/GuanKiann/HuatIm/HuatIm.jsx
+++ b/src/GuanKiann/HuatIm/HuatIm.jsx
@@ -6,6 +6,7 @@ import Transmit from 'react-transmit';
 import Promise from 'bluebird';
 var superagent = require('superagent-promise')(require('superagent'), Promise);
 import SoundsMapping from './SoundsMapping';
+import HapSing from './HapSing'
 import Debug from 'debug';
 
 var debug = Debug('itaigi:HuatIm');
@@ -17,13 +18,14 @@ export default class HuatIm extends React.Component {
   }
 
   render() {
-    if (!this.props.suData.屬性內容.音標) {
+    let {音標}=this.props.suData.屬性內容;
+    if (!音標) {
       return <div className='HuatIm hidden'></div>;
     }
 
-    var id = SoundsMapping.map(this.props.suData.屬性內容.音標);
+    let id = SoundsMapping.map(音標);
     if (id === undefined) {
-      return <div className='HuatIm hidden'></div>;
+      return <HapSing 音標={音標} />;
     }
 
     return (

From 0a02c56feef839d11ed036c168dfafe01f92dab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E4=B8=9E=E5=AE=8F?= <ihcaoe@gmail.com>
Date: Sun, 7 Aug 2016 17:01:54 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=9C=89=E6=B3=95=E5=BA=A6=E7=99=BC?=
 =?UTF-8?q?=E9=9F=B3=E7=9F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GuanKiann/HuatIm/HapSing.jsx | 49 +++++++++++++++++++++++++++-----
 src/GuanKiann/HuatIm/HuatIm.jsx  |  4 +--
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/GuanKiann/HuatIm/HapSing.jsx b/src/GuanKiann/HuatIm/HapSing.jsx
index 32e34538..3b00cbed 100644
--- a/src/GuanKiann/HuatIm/HapSing.jsx
+++ b/src/GuanKiann/HuatIm/HapSing.jsx
@@ -1,25 +1,47 @@
 import React from 'react';
+import Transmit from 'react-transmit';
+import Promise from 'bluebird';
+var superagent = require('superagent-promise')(require('superagent'), Promise);
 
 import Debug from 'debug';
 
 var debug = Debug('itaigi:HapSing');
 
-export default class HapSing extends React.Component {
+class HapSing extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: Math.random().toString(36),
+    };
+  }
+
+  componentWillMount() {
+    this.props.setQueryParams(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.params === this.props.params) return;
+    this.props.setQueryParams(nextProps);
+  }
 
   play(id) {
-    debug('play')
+    debug('play', id);
+    document.getElementById(id).load();
     document.getElementById(id).play();
   }
 
   render() {
-    var id = this.props.音標;
+    debug('標漢字音標', this.props.標漢字音標);
     return (
       <div className='HuatIm'>
-        <audio id={'audio_' + id}>
-          <source type='audio/mpeg'
-            src={'http://服務.意傳.台灣/%E8%AA%9E%E9%9F%B3%E5%90%88%E6%88%90?%E6%9F%A5%E8%A9%A2%E8%85%94%E5%8F%A3=%E9%96%A9%E5%8D%97%E8%AA%9E&%E6%9F%A5%E8%A9%A2%E8%AA%9E%E5%8F%A5=' + id } />
+        <audio id ={this.state.id} autoPlay>
+          <source type='audio/wav'
+            src={
+              'http://服務.意傳.台灣/語音合成?查詢腔口=閩南語&查詢語句=' + encodeURI(this.props.標漢字音標) }
+           />
         </audio>
-        <button onClick={this.play.bind(this, 'audio_' + id)}
+        <button onClick={this.play.bind(this, this.state.id)}
           className='ui compact icon button'>
           <i className='icon play'></i>
         </button>
@@ -27,3 +49,16 @@ export default class HapSing extends React.Component {
     );
   }
 };
+
+export default Transmit.createContainer(HapSing, {
+  queries: {
+    標漢字音標({ 音標 }) {
+      debug('音標', 音標);
+      return (
+        superagent.get('http://服務.意傳.台灣/標漢字音標?查詢腔口=閩南語&查詢語句=' + 音標)
+        .then(({ body }) => (body.翻譯正規化結果))
+        .catch((err) => debug(err))
+      );
+    },
+  },
+});
diff --git a/src/GuanKiann/HuatIm/HuatIm.jsx b/src/GuanKiann/HuatIm/HuatIm.jsx
index 1b866c3a..f9bb3831 100644
--- a/src/GuanKiann/HuatIm/HuatIm.jsx
+++ b/src/GuanKiann/HuatIm/HuatIm.jsx
@@ -6,7 +6,7 @@ import Transmit from 'react-transmit';
 import Promise from 'bluebird';
 var superagent = require('superagent-promise')(require('superagent'), Promise);
 import SoundsMapping from './SoundsMapping';
-import HapSing from './HapSing'
+import HapSing from './HapSing';
 import Debug from 'debug';
 
 var debug = Debug('itaigi:HuatIm');
@@ -18,7 +18,7 @@ export default class HuatIm extends React.Component {
   }
 
   render() {
-    let {音標}=this.props.suData.屬性內容;
+    let { 音標 } = this.props.suData.屬性內容;
     if (!音標) {
       return <div className='HuatIm hidden'></div>;
     }

From e5e97f59dd8704fc2a0aa743a3ef4b5d40d950d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E4=B8=9E=E5=AE=8F?= <ihcaoe@gmail.com>
Date: Mon, 8 Aug 2016 09:10:24 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E4=B8=80=E9=96=8B=E5=A7=8B=E8=8E=AB?=
 =?UTF-8?q?=E6=94=BE=E9=9F=B3=E6=AA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GuanKiann/HuatIm/HapSing.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/GuanKiann/HuatIm/HapSing.jsx b/src/GuanKiann/HuatIm/HapSing.jsx
index 3b00cbed..c2c9be1f 100644
--- a/src/GuanKiann/HuatIm/HapSing.jsx
+++ b/src/GuanKiann/HuatIm/HapSing.jsx
@@ -26,16 +26,14 @@ class HapSing extends React.Component {
   }
 
   play(id) {
-    debug('play', id);
     document.getElementById(id).load();
     document.getElementById(id).play();
   }
 
   render() {
-    debug('標漢字音標', this.props.標漢字音標);
     return (
       <div className='HuatIm'>
-        <audio id ={this.state.id} autoPlay>
+        <audio id ={this.state.id}>
           <source type='audio/wav'
             src={
               'http://服務.意傳.台灣/語音合成?查詢腔口=閩南語&查詢語句=' + encodeURI(this.props.標漢字音標) }
@@ -53,7 +51,6 @@ class HapSing extends React.Component {
 export default Transmit.createContainer(HapSing, {
   queries: {
     標漢字音標({ 音標 }) {
-      debug('音標', 音標);
       return (
         superagent.get('http://服務.意傳.台灣/標漢字音標?查詢腔口=閩南語&查詢語句=' + 音標)
         .then(({ body }) => (body.翻譯正規化結果))

From c4f957b852d01d069395762e52e7265477d9e25f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=96=9B=E4=B8=9E=E5=AE=8F?= <ihcaoe@gmail.com>
Date: Mon, 8 Aug 2016 09:59:11 +0800
Subject: [PATCH 4/4] =?UTF-8?q?load=E6=94=B9async=E5=85=88=E8=BC=89?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GuanKiann/HuatIm/HapSing.jsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/GuanKiann/HuatIm/HapSing.jsx b/src/GuanKiann/HuatIm/HapSing.jsx
index c2c9be1f..1c9f1969 100644
--- a/src/GuanKiann/HuatIm/HapSing.jsx
+++ b/src/GuanKiann/HuatIm/HapSing.jsx
@@ -25,9 +25,22 @@ class HapSing extends React.Component {
     this.props.setQueryParams(nextProps);
   }
 
-  play(id) {
-    document.getElementById(id).load();
-    document.getElementById(id).play();
+  componentDidMount()
+  {
+    setTimeout(this.載入.bind(this), Math.random() * 1000);
+  }
+
+  componentDidUpdate(prevProps,  prevState)
+  {
+    setTimeout(this.載入.bind(this), Math.random() * 1000);
+  }
+
+  載入() {
+    document.getElementById(this.state.id).load();
+  }
+
+  play() {
+    document.getElementById(this.state.id).play();
   }
 
   render() {
@@ -39,7 +52,7 @@ class HapSing extends React.Component {
               'http://服務.意傳.台灣/語音合成?查詢腔口=閩南語&查詢語句=' + encodeURI(this.props.標漢字音標) }
            />
         </audio>
-        <button onClick={this.play.bind(this, this.state.id)}
+        <button onClick={this.play.bind(this)}
           className='ui compact icon button'>
           <i className='icon play'></i>
         </button>