From e3f6327b8607f4c619a171efce0dd2f874e1f0df Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 2 Mar 2017 14:43:26 -0700
Subject: [PATCH] messages show up

---
 client/coral-embed-stream/src/Embed.js | 12 ++++---
 client/coral-embed/src/index.js        | 44 ++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index da9fd4b6e..a1683b2c4 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -258,11 +258,15 @@ const mapDispatchToProps = dispatch => ({
   requestConfirmEmail: () => dispatch(requestConfirmEmail()),
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
   addNotification: (type, text) => {
-    pym.sendMessage('getPosition');
+    // pym.sendMessage('getPosition');
 
-    pym.onMessage('position', position => {
-      dispatch(addNotification(type, text, position));
-    });
+    console.log('addNotification', type, text);
+
+    pym.sendMessage('coral-alert', text);
+
+    // pym.onMessage('position', position => {
+      // dispatch(addNotification(type, text, position));
+    // });
   },
   clearNotification: () => dispatch(clearNotification()),
   editName: (username) => dispatch(editName(username)),
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 8d8855aa7..e590c3ecf 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -1,5 +1,26 @@
 import pym from 'pym.js';
 
+const snackbarStyles = {
+  position: 'fixed',
+  cursor: 'default',
+  userSelect: 'none',
+  backgroundColor: '#323232',
+  zIndex: 3,
+  willChange: 'transform, opacity',
+  transition: 'transform .35s cubic-bezier(.55,0,.1,1), opacity .35s',
+  pointerEvents: 'none',
+  padding: '12px 18px',
+  color: '#fff',
+  borderRadius: '3px 3px 0 0',
+  textAlign: 'center',
+  maxWidth: '300px',
+  left: '50%',
+  opacity: 0,
+  transform: 'translate(-50%, 20px)',
+  bottom: 0,
+  boxSizing: 'border-box'
+};
+
 // This function should return value of window.Coral
 const Coral = {};
 const Talk = Coral.Talk = {};
@@ -32,6 +53,14 @@ function configurePymParent(pymParent, asset_url) {
   let notificationOffset = 200;
   let ready = false;
   let cachedHeight;
+  const snackbar = document.createElement('div');
+  snackbar.id = 'coral-snackbar';
+
+  for (let key in snackbarStyles) {
+    snackbar.style[key] = snackbarStyles[key];
+  }
+
+  window.document.body.appendChild(snackbar);
 
   // Resize parent iframe height when child height changes
   pymParent.onMessage('height', function(height) {
@@ -41,6 +70,21 @@ function configurePymParent(pymParent, asset_url) {
     }
   });
 
+  pymParent.onMessage('coral-alert', function (message) {
+    snackbar.style.transform = 'translate(-50%, 20px)';
+    snackbar.style.opacity = 0;
+    snackbar.textContent = message;
+
+    setTimeout(() => {
+      snackbar.style.transform = 'translate(-50%, 0)';
+      snackbar.style.opacity = 1;
+    }, 0);
+
+    setTimeout(() => {
+      snackbar.style.opacity = 0;
+    }, 5000);
+  });
+
   // Helps child show notifications at the right scrollTop
   pymParent.onMessage('getPosition', function() {
     let position = viewport().height + document.body.scrollTop;