Merge pull request #2 from brancusi/dev

Dev

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

@@ -0,0 +1,56 @@
+import Ember from 'ember';
+
+const Video = Twilio.Video;
+
+export default Ember.Component.extend({
+  startVideo() {
+    const { token, identity } = this.get("twilioData");
+
+    Video.connect(token, {name: "my-room"})
+      .then(room => {
+
+        this.attachTracks(room.localParticipant.tracks, this.$(".me:first")[0]);
+
+        room.participants.forEach(::this.participantConnected);
+        room.on('participantConnected', ::this.participantConnected);
+
+        room.on('participantDisconnected', ::this.participantDisconnected);
+        room.once('disconnected', error => room.participants.forEach(::this.participantDisconnected));
+      }, e => console.log(e));
+  },
+
+  attachTracks(tracks, container) {
+    tracks.forEach(track => this.attachTrack(track, container));
+  },
+
+  attachTrack(track, container) {
+    container.appendChild(track.attach());
+  },
+
+  removeTracks(tracks) {
+    tracks.forEach(track => this.removeTrack(track));
+  },
+
+  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);
+  },
+
+  actions: {
+    startVideo() {
+      this.startVideo();
+    }
+  }
+});

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

@@ -0,0 +1,25 @@
+&
+  position: fixed
+  bottom: 0
+  right: 0
+
+.previews
+  height: 75px
+
+video
+  border: 0
+  margin: 0
+  padding: 0
+  width: 100px
+
+.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

@@ -0,0 +1,12 @@
+<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/component.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+import computed from 'ember-computed-decorators';
+
+const { isPresent, computed: { alias, sort, gt } } = Ember;
+
+export default Ember.Component.extend({
+  sortAsc: ["position:asc"],
+  sortedConversations:  sort('model', 'sortAsc'),
+  conversationCount:    alias("sortedConversations.length"),
+  hasConversations:     gt("conversationCount", 0)
+});

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +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

@@ -0,0 +1,31 @@
+<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
+        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>

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));
     }
   }
 });