Various updates

app/components/audio-recorder/component.js

@@ -1,23 +1,47 @@
 import Ember from 'ember';
+import firebase from 'firebase';
+
+const {
+  computed: { notEmpty }
+} = Ember;
 
 export default Ember.Component.extend({
+  classNames: ['row'],
   audioRecorder: Ember.inject.service(),
+  hifi: Ember.inject.service(),
+
+  hasAudio: notEmpty('model.audioUrl'),
+  saving: false,
 
   init() {
     this._super(...arguments);
     this.get("audioRecorder").requestAccess();
   },
 
-  mouseDown() {
-    const recorder = this.get("audioRecorder").createRecorder();
-    this.set("recorder", recorder);
-    Ember.run.later(recorder.start, 100);
-  },
+  actions: {
+    startRecording() {
+      const recorder = this.get("audioRecorder").createRecorder();
+      this.set("recorder", recorder);
+      Ember.run.later(recorder.start, 100);
+    },
+
+    stopRecording() {
+      this.set("saving", true);
+      const recorder = this.get("recorder");
+      recorder
+        .stop()
+        .then(this.get("created"))
+        .then(() => this.set("saving", false));
+    },
+
+    play() {
+      const app = firebase.app();
+      var storageRef = app.storage().ref();
+      var audioRef = storageRef.child(this.get('model.audioUrl'));
 
-  mouseUp() {
-    const recorder = this.get("recorder");
-    recorder
-      .stop()
-      .then(this.get("created"));
+      audioRef
+        .getDownloadURL()
+        .then(url => this.get("hifi").play(url));
+    }
   }
 });

app/components/audio-recorder/styles.styl

@@ -1,2 +1,20 @@
 &
   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)
+
+.btn:active
+  background: hot-pink
+  opacity: 1
+  color: off-white

app/components/audio-recorder/template.hbs

@@ -1,3 +1,12 @@
 {{ui/icon-button
-    label="Push & hold to record"
+    loading=saving
+    disabled=saving
+    mouseDown=(action 'startRecording')
+    mouseUp=(action 'stopRecording')
     leftIcon="microphone"}}
+
+{{#if hasAudio}}
+  {{ui/icon-button
+      click=(action "play")
+      leftIcon="play"}}
+{{/if}}

app/components/communication/video-chat/component.js

@@ -3,11 +3,9 @@ import Ember from 'ember';
 const Video = Twilio.Video;
 
 export default Ember.Component.extend({
-  didInsertElement() {
+  startVideo() {
     const { token, identity } = this.get("twilioData");
 
-    console.log(token, identity);
-
     Video.connect(token, {name: "my-room"})
       .then(room => {
 
@@ -18,47 +16,41 @@ export default Ember.Component.extend({
 
         room.on('participantDisconnected', ::this.participantDisconnected);
         room.once('disconnected', error => room.participants.forEach(::this.participantDisconnected));
-      }, e => {
-        console.log(e);
-      })
+      }, e => console.log(e));
   },
 
   attachTracks(tracks, container) {
-    tracks.forEach(track => {
-      container.appendChild(track.attach())
-    });
+    tracks.forEach(track => this.attachTrack(track, container));
   },
 
-  participantConnected(participant) {
-    this.attachTracks(participant.tracks, this.$(".others:first")[0])
-    // console.log('Participant "%s" connected', participant.identity);
-    //
-    // const div = document.createElement('div');
-    // div.id = participant.sid;
-    // div.innerText = participant.identity;
-    //
-    // participant.on('trackAdded', track => trackAdded(div, track));
-    // participant.tracks.forEach(track => trackAdded(div, track));
-    // participant.on('trackRemoved', trackRemoved);
-    //
-    // document.body.appendChild(div);
+  attachTrack(track, container) {
+    container.appendChild(track.attach());
   },
 
-  participantDisconnected(participant) {
-    console.log("Dis", participant);
-    // console.log('Participant "%s" disconnected', participant.identity);
-    //
-    // participant.tracks.forEach(trackRemoved);
-    // document.getElementById(participant.sid).remove();
+  removeTracks(tracks) {
+    tracks.forEach(track => this.removeTrack(track));
   },
 
-  trackAdded(div, track) {
-    console.log("track added");
-    // div.appendChild(track.attach());
+  removeTrack(track) {
+    track.detach().forEach(element => element.remove());
+  },
+
+  participantConnected(participant) {
+    const container = this.$(".others:first")[0];
+
+    participant.on('trackAdded', track => ::this.attachTrack(track, container));
+    participant.on('trackRemoved', track => ::this.removeTrack(track));
+
+    this.attachTracks(participant.tracks, container);
+  },
+
+  participantDisconnected(participant) {
+    this.removeTracks(participant.tracks);
   },
 
-  trackRemoved(track) {
-    console.log("trackRemoved");
-    // track.detach().forEach(element => element.remove());
+  actions: {
+    startVideo() {
+      this.startVideo();
+    }
   }
 });

app/components/communication/video-chat/styles.styl

@@ -14,3 +14,12 @@ video
 
 .vsc-controller
   display: none
+
+.start-video
+  background: dope-blue
+  // padding: 0.5em
+  width: 100px
+  height: 100px
+  .icon-container
+    // font-size: 1.5em
+    color: white

app/components/communication/video-chat/template.hbs

@@ -1,8 +1,12 @@
-<div class="previews">
+<div class="previews row">
   <div class="me">
 
   </div>
   <div class="others">
 
   </div>
+  {{ui/icon-button
+      class="start-video"
+      rightIcon="video-camera"
+      click=(action startVideo)}}
 </div>

app/components/conversation-group/styles.styl

@@ -0,0 +1,13 @@
+&
+  margin-top: 3em
+
+.create-conversation
+  width: 100%
+  padding: 1em
+  color: dark-grey
+  font-size: 1em
+  opacity: 0.15
+  transition: all 0.2s ease-in-out
+
+.create-conversation:hover
+  opacity: 1

app/components/conversation-group/template.hbs

@@ -1,14 +1,19 @@
-<div class="col center flashCardContainer">
-  {{#if hasConversations}}
-    {{#each sortedConversations as |conversation index|}}
-      {{flash-card-group
-          model=conversation
-          onAudioCreated=onAudioCreated
-          createFlashCard=createFlashCard
-          destroyFlashCard=destroyFlashCard
-          saveModel=saveModel}}
-    {{/each}}
-  {{else}}
-    <h2>No conversations yet. Why not start one?</h2>
-  {{/if}}
+<div class="col center conversation-container">
+  {{ui/icon-button
+      class='create-conversation'
+      click=(action createConversation 0)
+      leftIcon="plus"}}
+  {{#each sortedConversations as |conversation index|}}
+    {{flash-card-group
+        model=conversation
+        index=(inc index)
+        onAudioCreated=onAudioCreated
+        createFlashCard=createFlashCard
+        destroyFlashCard=destroyFlashCard
+        saveModel=saveModel}}
+    {{ui/icon-button
+        class='create-conversation'
+        click=(action createConversation (inc index))
+        leftIcon="plus"}}
+  {{/each}}
 </div>

app/components/flash-card-group/component.js

@@ -1,4 +1,20 @@
 import Ember from 'ember';
+import computed from 'ember-computed-decorators';
+
+const { isPresent, computed: { alias, sort, gt } } = Ember;
 
 export default Ember.Component.extend({
+  classNames: ['card-1'],
+
+  sortAsc: ["position:asc"],
+  sortedFlashCards:  sort('model.activeFlashCards', 'sortAsc'),
+  flashCardCount:    alias("sortedFlashCards.length"),
+  hasFlashCards:     gt("flashCardCount", 0),
+
+  actions: {
+    handleUpdate(key, str) {
+      this.get("model").set(key, str);
+      this.get("saveModel")(this.get("model"));
+    }
+  }
 });

app/components/flash-card-group/styles.styl

@@ -0,0 +1,39 @@
+&
+  width: 100%
+  padding: 1em
+  background: dope-blue
+  height: 24em
+
+.conversation-header
+  margin-left: calc(2em - 1em)
+  color: off-white
+  font-size: 1.5em
+  align-items: baseline
+  .index
+    margin-right: 0.25em
+
+.conversation-title
+  background: 0
+  border: 0
+  border-bottom: 1px dashed
+  color: off-white
+  font-size: 1.3em
+  width: 16em
+
+.conversation-title::placeholder
+  color: rgba(off-white, 0.5)
+
+.flash-card-container
+  overflow-x: auto
+  overflow-y: hidden
+  margin: 1em 0
+
+.create-flash-card
+  color: white
+  font-size: 1em
+  padding: 1em
+  opacity: 0.15
+  transition: all 0.2s ease-in-out
+
+.create-flash-card:hover
+  opacity: 1

app/components/flash-card-group/template.hbs

@@ -1,16 +1,31 @@
-<div class="row">
-  {{#each model.flashCards as |flashCard|}}
+<header class="conversation-header row">
+  <span class="index">
+    {{index}}.
+  </span>
+  {{one-way-input model.title
+      class='conversation-title'
+      placeholder='What\'s this conversation about...'
+      update=(action "handleUpdate" "title")
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck=false}}
+</header>
+<div class="row flash-card-container">
+  {{ui/icon-button
+      class="create-flash-card"
+      leftIcon="plus"
+      click=(action createFlashCard model 0)}}
+  {{#each sortedFlashCards as |flashCard index|}}
     {{flash-card
         model=flashCard
-        total=cardCount
-        index=index
+        index=(inc index)
         onAudioCreated=onAudioCreated
         destroyFlashCard=(action destroyFlashCard model)
         saveModel=saveModel}}
+    {{ui/icon-button
+        class="create-flash-card"
+        leftIcon="plus"
+        click=(action createFlashCard model (inc index))}}
   {{/each}}
 </div>
-
-{{ui/icon-button
-    label="Create"
-    leftIcon="add"
-    click=(action createFlashCard model)}}

app/components/flash-card/component.js

@@ -1,7 +1,6 @@
 import Ember from 'ember';
 import _ from 'lodash';
 import computed from 'ember-computed-decorators';
-import firebase from 'firebase';
 
 const TONE_REGEX = /([aeiouAEIOU][1234])/g;
 
@@ -62,16 +61,7 @@ const {
 } = Ember;
 
 export default Ember.Component.extend({
-  classNames: ['stretch'],
-
-  hifi: Ember.inject.service(),
-
-  @computed('total', 'index')
-  position(total, index) {
-    return total - index;
-  },
-
-  hasAudio: notEmpty('model.audioUrl'),
+  classNames: ['card-2', 'stretch'],
 
   setSelection(elm, start, end) {
     elm.selectionStart = start;
@@ -100,16 +90,6 @@ export default Ember.Component.extend({
     handleUpdate(key, str) {
       this.get("model").set(key, str);
       this.get("saveModel")(this.get("model"));
-    },
-
-    play() {
-      const app = firebase.app();
-      var storageRef = app.storage().ref();
-      var audioRef = storageRef.child(this.get('model.audioUrl'));
-
-      audioRef
-        .getDownloadURL()
-        .then(url => this.get("hifi").play(url));
     }
   }
 });