Study wip

app/components/inputs/pinyin-input/component.js

@@ -92,6 +92,8 @@ const PinyinInput = Ember.Component.extend({
   }
 });
 
-export default PinyinInput.reopenClass({
+PinyinInput.reopenClass({
   positionalParams: ['value']
 });
+
+export default PinyinInput;

app/components/media/audio-player/component.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+import firebase from 'firebase';
+
+const {
+  isPresent,
+  computed: { notEmpty }
+} = Ember;
+
+export default Ember.Component.extend({
+  classNames: ['row'],
+  hifi: Ember.inject.service(),
+
+  hasAudio: notEmpty('audioUrl'),
+
+  init() {
+    try {
+      this.set("fbRef", firebase.app().storage().ref());
+    } catch(_) {
+      this.set("fbRef", undefined);
+    }
+    this._super(...arguments);
+  },
+
+  didReceiveAttrs() {
+    if(isPresent(this.get('fbRef'))) {
+      this.set('audioUrl', undefined);
+      const cloudUrl = this.get('model');
+
+      if(isPresent(cloudUrl)) {
+        this.get("fbRef")
+          .child(cloudUrl)
+          .getDownloadURL()
+          .then(url => {
+            this.set('audioUrl', url)
+          })
+          .catch(() => {
+            this.set('audioUrl', undefined);
+          })
+      } else {
+        this.set('audioUrl', undefined);
+      }
+    }
+  },
+
+  actions: {
+    play() {
+      this.get('hifi').play(this.get('audioUrl'));
+    }
+  }
+});

app/components/media/audio-player/styles.styl

@@ -0,0 +1,15 @@
+&
+  border: none
+
+.btn
+  margin: 0.25em
+  display: block
+  border-radius: 50%
+  padding: 0.5em
+  background: rgba(off-white, 0.8)
+  height: 30px
+  width: 30px
+  transition: all 0.2s ease-in-out
+
+.btn:hover
+  background: rgba(off-white, 1)

app/components/media/audio-player/template.hbs

@@ -0,0 +1,5 @@
+{{#if hasAudio}}
+  {{ui/icon-button
+      click=(action "play")
+      leftIcon="play"}}
+{{/if}}

app/components/study/modes/eng-to-pin/component.js

@@ -1,10 +1,12 @@
 import Ember from 'ember';
-
-const STRIP_PUNCTUATION = /[.,\/#!$%\^&\*;:{}=\-_?`~()]/g;
+import {
+  isCorrectAnswer
+} from 'wo-pinyin/utils/study-utils';
 
 export default Ember.Component.extend({
   classNames: ['row', 'card-2'],
   currentAnswer: '',
+  showingAnswer: false,
 
   didInsertElement() {
     this.$('textarea').focus();
@@ -28,26 +30,24 @@ export default Ember.Component.extend({
     this.set('wasAnswered', undefined);
     this.set('isCorrect', undefined);
     this.set('currentAnswer', '');
+    this.set('showingAnswer', false);
   },
 
   actions: {
     handleUpdate(str) {
       this.set('wasAnswered', false);
-      this.set("currentAnswer", str);
+      this.set('currentAnswer', str);
     },
 
     async submit() {
-      const pinyin = await this.get('model.pinyin');
-
-      const answer = this.get('currentAnswer')
-        .replace(STRIP_PUNCTUATION, "")
-        .toLowerCase();
+      const submission = this.get('currentAnswer');
+      const answer = await this.get('model.pinyin');
 
-      const solution = pinyin.get("text")
-        .replace(STRIP_PUNCTUATION, "")
-        .toLowerCase();
+      this.processAnswer(isCorrectAnswer(submission, answer.get('text')));
+    },
 
-      this.processAnswer(answer === solution);
+    showAnswer() {
+      this.set('showingAnswer', true);
     }
   }
 });

app/components/study/modes/eng-to-pin/styles.styl

@@ -2,12 +2,14 @@
   background: dope-blue
   margin-bottom: 1em
 
+.question-container
+  margin-bottom: 1em
+
 .content
   padding: 1em
 
 .english
   font-size: 1.3em
-  margin-bottom: 1em
   color: white
   height: 1.3em
 
@@ -33,3 +35,31 @@ textarea
 
   .correct
     color: dope-blue
+
+.ui-container
+  color: white
+  background: rgba(white, 0.2)
+  height: 4em
+  .btn
+    background: none
+  .btn-container
+    width: 50%
+    border-right: 1px dashed white
+  .btn-container:last-child
+    border-right: 0
+
+.answer
+  pointer-events: none
+  height: 0
+  background: dope-pink
+  opacity: 0
+  font-size: 1.4em
+  color: white
+  transition: all 0.2s ease-in-out
+  padding: 0 0.5em
+
+.answer.showing
+  height: auto
+  opacity: 1
+  padding: 1em
+  padding: 1em 0.5em

app/components/study/modes/eng-to-pin/template.hbs

@@ -1,15 +1,30 @@
 <div class="col">
   <div class="col content">
-    <span class="english">
-      {{model.english.text}}
-    </span>
+    <div class="row stretch center question-container">
+      <span class="english stretch">
+        {{model.english.text}}
+      </span>
+    </div>
 
     {{inputs/pinyin-input currentAnswer
         class='solution-field'
         onReturn=(action 'submit')
         update=(action "handleUpdate")}}
   </div>
 
+  <div class="ui-container row center">
+    <div class="row center btn-container">
+      {{media/audio-player model=model.audioUrl class='audio-btn'}}
+    </div>
+    <div class="row center btn-container">
+      {{ui/icon-button
+          class='show-answer-btn'
+          click=(action (toggle "showingAnswer" this))
+          label="Show Answer"
+          rightIcon='info'}}
+    </div>
+  </div>
+
   {{#if wasAnswered}}
     <div class="row center status">
       {{#if isCorrect}}
@@ -19,4 +34,8 @@
       {{/if}}
     </div>
   {{/if}}
+
+  <div class="answer {{if showingAnswer 'showing'}}">
+    {{model.pinyin.text}}
+  </div>
 </div>

app/components/study/study-canvas/component.js

@@ -1,24 +1,26 @@
 import Ember from 'ember';
-
-const {
-  notEmpty
-} = Ember.computed;
+import computed from 'ember-computed-decorators';
+import _ from 'lodash';
 
 export default Ember.Component.extend({
-  hasFlashCards: notEmpty('flashCards'),
+  @computed('model.@each.{id}')
+  shuffledCards(collection) {
+    return _.shuffle(collection.toArray());
+  },
 
   didInsertElement() {
     this.setupNextStudyCard();
   },
 
   setupNextStudyCard() {
-    const flashCards = this.get('model').toArray();
+    const flashCards = this.get('shuffledCards');
     const current = this.get('current');
 
     let flashCard;
 
     if(Ember.isPresent(current)) {
       const currentIndex = flashCards.indexOf(current.flashCard);
+
       if(currentIndex + 1 > flashCards.length-1) {
         flashCard = flashCards[0];
       } else {

app/components/ui/icon-button/styles.styl

@@ -6,6 +6,9 @@
 &:active
   opacity: 0.5
 
+.space
+  margin: 0.25em
+
 .label
   font-size: 1rem
 

app/components/ui/icon-button/template.hbs

@@ -1,11 +1,11 @@
-<div class="row stretch content center">
+<div class="row stretch center">
   {{#if loading}}
   <div class="icon-container stretch row spin-clockwise">
     {{fa-icon 'spinner'}}
   </div>
   {{else}}
     {{#if hasLeftIcon}}
-      <div class="icon-container stretch row">
+      <div class="icon-container center row">
         {{fa-icon leftIcon}}
       </div>
     {{/if}}
@@ -23,7 +23,7 @@
     {{/if}}
 
     {{#if hasRightIcon}}
-      <div class="icon-container stretch row">
+      <div class="icon-container center row">
         {{fa-icon rightIcon}}
       </div>
     {{/if}}

app/routes/lesson.js

@@ -104,7 +104,7 @@ export default Ember.Route.extend({
       const app = firebase.app();
       var storageRef = app.storage().ref();
 
-      const path = `audio/${uuid()}.wav`;
+      const path = `audio/${uuid()}.webm`;
       var audioRef = storageRef.child(path);
 
       return audioRef.put(blob).then(() => {

app/styles/layout.styl

@@ -16,6 +16,7 @@
 
 .right
   align-items: flex-end
+  justify-content: flex-end
 
 .bottom
   align-items: flex-end

app/utils/study-utils.js

@@ -0,0 +1,13 @@
+const STRIP_PUNCTUATION = /[.,\/#!$%\^&\*;:{}=\-_?`~()]/g;
+
+const trimStripLower = str =>
+  str
+    .replace(STRIP_PUNCTUATION, "")
+    .toLowerCase()
+    .trim();
+
+const isCorrectAnswer = (submission, answer) => trimStripLower(submission) === trimStripLower(answer)
+
+export {
+  isCorrectAnswer
+}

tests/integration/components/media/audio-player/component-test.js

@@ -0,0 +1,16 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('media/audio-player', 'Integration | Component | media/audio player', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{media/audio-player}}`);
+
+  assert.equal(this.$().text().trim(), '');
+});

tests/integration/components/study/modes/eng-to-pin/component-test.js

@@ -7,10 +7,7 @@ moduleForComponent('study/modes/eng-to-pin', 'Integration | Component | study/mo
 
 test('it renders', function(assert) {
 
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
   this.render(hbs`{{study/modes/eng-to-pin}}`);
 
-  assert.equal(this.$().text().trim(), '');
+  assert.equal(this.$().text().trim(), 'Show Answer');
 });