Fix chat owner styles (#72)

* Fix chat owner styles * Fix audio type and owner styles
FabricElements · Nov 17, 2018 · c5070c8 · c5070c8
1 parent 8e340f1
commit c5070c8
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 20 deletions.
diff --git a/skeleton-chat-box/skeleton-chat-box.js b/skeleton-chat-box/skeleton-chat-box.js
@@ -152,7 +152,7 @@ class SkeletonChatBox extends Fabric.ChatMixin(PolymerElement) {
         </paper-menu-button>
       </app-toolbar>
     </app-header>
-    <skeleton-chat-messages theme$="[[theme]]" group$="[[group]]">
+    <skeleton-chat-messages theme$="[[theme]]" group$="[[group]]" owner$="[[info.owner]]">
       <skeleton-chat-input theme$="[[theme]]" group$="[[group]]" mic$="[[mic]]" camera$="[[camera]]" emoji$="[[emoji]]" maxlength$="[[maxlength]]" label$="[[label]]"></skeleton-chat-input>
     </skeleton-chat-messages>
 `;

diff --git a/skeleton-chat-info/skeleton-chat-info.js b/skeleton-chat-info/skeleton-chat-info.js
@@ -164,6 +164,7 @@ class SkeletonChatInfo extends PolymerElement {
       finalData.title = objectUser.name || '###';
       finalData.image = objectUser.avatar;
       finalData.isOwner = user.uid === data.owner;
+      finalData.owner = data.owner;
     }
 
     return finalData;

diff --git a/skeleton-chat-input/skeleton-chat-input.js b/skeleton-chat-input/skeleton-chat-input.js
@@ -607,7 +607,7 @@ class SkeletonChatInput extends PolymerElement {
     });
     if (file.type.match(/image\/(gif|bmp|jpeg|png)$/i)) {
       this.imageType = true;
-    } else if (file.type.match(/audio\/(ogg|mp3|wav)$/i)) {
+    } else if (file.type.match(/audio\/(ogg|webm|wav)$/i)) {
       this.icon = 'library-music';
       this.imageType = false;
     } else {
@@ -631,7 +631,7 @@ class SkeletonChatInput extends PolymerElement {
       fileExt = /\.[\w]+/.exec(file.name);
       storageRef = firebase.storage().ref(`chat/${this.group}/${file.lastModified}${fileExt}`);
     } else {
-      fileExt = '.mp3';
+      fileExt = '.webm';
       storageRef = firebase.storage().ref(`chat/${this.group}/${new Date()}${fileExt}`);
     }
     if (this.metadata && typeof this.metadata === 'object') {
@@ -643,7 +643,7 @@ class SkeletonChatInput extends PolymerElement {
       return;
     }
     if (type === 'audio') {
-      metadataObject.contentType = 'audio/mp3';
+      metadataObject.contentType = 'audio/webm';
     }
     this.task = storageRef.put(file, metadataObject);
     this.task.on('state_changed', (snapshot) => {
@@ -667,7 +667,7 @@ class SkeletonChatInput extends PolymerElement {
         console.log('File uploaded!');
         this.downloadURL = downloadURL;
         type && type === 'audio'
-          ? this.fileType = 'audio/mp3'
+          ? this.fileType = 'audio/webm'
           : this.fileType = file.type;
         this.extension = fileExt[0];
         this._sendMessage();
@@ -703,6 +703,7 @@ class SkeletonChatInput extends PolymerElement {
     console.log('Recording STARTS ...');
     navigator.mediaDevices.getUserMedia({
         audio: true,
+        video: false,
       })
       .then((stream) => {
         this.mediaRecorder = new MediaRecorder(stream);
@@ -726,7 +727,7 @@ class SkeletonChatInput extends PolymerElement {
       audioChunks.push(event.data);
     });
     this.mediaRecorder.addEventListener('stop', () => {
-      this.audioBlob = new Blob(audioChunks);
+      this.audioBlob = new Blob(audioChunks, {'type': 'audio/webm; codecs=opus'});
       const audioUrl = URL.createObjectURL(this.audioBlob);
       const audio = new Audio(audioUrl);
       this.audioObject = audio;

diff --git a/skeleton-chat-message/demo/index2.html b/skeleton-chat-message/demo/index2.html
@@ -54,7 +54,7 @@ <h3>skeleton-chat-message demo</h3>
   <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"type":"image/jpeg","url":"https://images.unsplash.com/photo-1516290881724-2230498ea247"},"isAnonymous":false,"text":"dfsjfada nsandjad dasdhad snsad sasoahda askfnad df kjsdbfds f jkdsfb dsfkdsbf d sfdkbfdsbfa djkabdas daskjbasduasbdsa djashodsabdbsajbdw nd jsahdjsa das http://test.com","type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
   <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"name":"test.pdf","type":"application/pdf","url":"https://images.unsplash.com/photo-1516290881724-2230498ea247"},"isAnonymous":false,"type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
   <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"name":"test.pdf","type":"application/pdf","url":"https://images.unsplash.com/photo-1516290881724-2230498ea247"},"isAnonymous":false,"text":"dfsjfada nsandjad dasdhad snsad sasoahda askfnad df kjsdbfds f jkdsfb dsfkdsbf d sfdkbfdsbfa djkabdas daskjbasduasbdsa djashodsabdbsajbdw nd jsahdjsa das http://test.com","type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
-  <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"name":"test.pdf","type":"audio/mp3","url":"https://images.unsplash.com/photo-1516290881724-2230498ea247"},"isAnonymous":false,"type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
+  <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"name":"test.pdf","type":"audio/webm","url":"https://images.unsplash.com/photo-1516290881724-2230498ea247"},"isAnonymous":false,"type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
   <skeleton-chat-message message='{"created":"2018-04-04T12:35:24.984Z","media":{"type":"image/jpeg","url":"https://i.vimeocdn.com/portrait/6146545_300x300"},"isAnonymous":false,"text":"dfsjfada nsandjad dasdhad snsad sasoahda askfnad df kjsdbfds f jkdsfb dsfkdsbf d sfdkbfdsbfa djkabdas daskjbasduasbdsa djashodsabdbsajbdw nd jsahdjsa das http://test.com","type":"default","uid":"QegZyzof1BPhARdkvIUBYp2oxkE2","updated":"2018-04-04T12:35:24.984Z","user":{"avatar":"https://lh6.googleusercontent.com/-ciuP6RCh-wc/AAAAAAAAAAI/AAAAAAAAQZ8/m4E3KFgmQRw/photo.jpg","name":"Stívali Serna"}}'></skeleton-chat-message>
 
 

diff --git a/skeleton-chat-message/skeleton-chat-message.js b/skeleton-chat-message/skeleton-chat-message.js
@@ -132,6 +132,11 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
         overflow: hidden;
         position: relative;
         margin-top: 25px;
+        border: 2px solid transparent;
+      }
+
+      [lider] .icon-container {
+        border: 2px solid var(--paper-blue-a400);
       }
 
       [owner] .icon-container {
@@ -162,7 +167,7 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
         color: white;
         display: inline-block;
         max-width: 100%;
-        min-width: 200px;
+        min-width: 10rem;
         width: auto;
         transition: max-width ease 0.5s;
         box-shadow: inset 0 0 3px rgba(0, 0, 0, .02);
@@ -302,14 +307,12 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
       }
 
       #acronym {
-        @apply --paper-font-subhead;
-        @apply --paper-font-common-nowrap;
-        line-height: var(--skeleton-chat-message-height);
-        text-transform: uppercase;
-        text-align: center;
-        @apply --layout-fit;
-        z-index: 1;
-        @apply --skeleton-chat-message-icon-acronym;
+        align-items: center;
+        background-color: var(--skeleton-chat-message-icon-acronym_-_background-color);
+        display: flex;
+        height: 35.75px;
+        justify-content: center;
+        width: 35.75px;
       }
 
       .messageImg {
@@ -392,11 +395,11 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
       }
     </style>
 
-    <paper-icon-item owner$="[[isOwner]]" type-media$="[[message.media.type]]">
+    <paper-icon-item owner$="[[isOwner]]" lider$="[[isChatOwner]]" type-media$="[[message.media.type]]">
       <div class="icon-container" slot="item-icon">
           <iron-image fade sizing="cover" src$="[[image]]" hidden$="[[!image]]" id="owner-img"></iron-image>
           <div id="acronym" hidden$="[[!acronym]]">
-            [[acronym]]
+            <span>[[acronym]]</span>
           </div>
           <iron-icon icon$="chat-icon:[[icon]]" class="icon-option" hidden$="[[!icon]]"></iron-icon>
       </div>
@@ -624,6 +627,19 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
         type: String,
         value: null,
       },
+      group: {
+        type: String,
+        value: null,
+      },
+      ownerUid: {
+        type: String,
+        value: null,
+      },
+      isChatOwner: {
+        type: Boolean,
+        value: false,
+        readOnly: true,
+      },
     };
   }
 
@@ -648,6 +664,7 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
   _checkBasics(signedIn, userData, message) {
     // Set default values
     this._setIsOwner(false);
+    this._setIsChatOwner(false);
     this._setIsAnonymous(true);
 
     /**
@@ -679,6 +696,11 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
      * Check if is the message owner
      */
     this._setIsOwner(this.user.uid === message.uid);
+
+    /**
+     * Check if is the chat owner
+     */
+    this._setIsChatOwner(message.uid === this.ownerUid);
   }
 
   /**
@@ -732,7 +754,7 @@ class SkeletonChatMessage extends GestureEventListeners(PolymerElement) {
     if (message.media && message.media.type) {
       if (message.media.type.match(/image\/(gif|bmp|jpeg|png)$/i)) {
         this._setIsImageMedia(message.media.type);
-      } else if (message.media.type.match(/audio\/(ogg|mp3|wav)$/i)) {
+      } else if (message.media.type.match(/audio\/(ogg|webm|wav)$/i)) {
         this.isAudioType = true;
       } else {
         this.isFileType = true;

diff --git a/skeleton-chat-messages/skeleton-chat-messages.js b/skeleton-chat-messages/skeleton-chat-messages.js
@@ -76,7 +76,7 @@ class SkeletonChatMessages extends mixinBehaviors([
       <template is="dom-if" if="{{!empty}}" restamp="true">
         <iron-list items="[[list]]" as="message" max-physical-count="50" scroll-offset="100" scroll-target="threshold" on-iron-resize="_scrollToLast">
           <template>
-            <skeleton-chat-message theme$="[[theme]]" message="[[message]]" user="[[user]]" signed-in$="[[signedIn]]"></skeleton-chat-message>
+            <skeleton-chat-message theme$="[[theme]]" group="[[group]]" message="[[message]]" user="[[user]]" signed-in$="[[signedIn]]" owner-uid$="[[owner]]"></skeleton-chat-message>
           </template>
         </iron-list>
       </template>
@@ -150,6 +150,10 @@ class SkeletonChatMessages extends mixinBehaviors([
         type: Object,
         value: null,
       },
+      owner: {
+        type: String,
+        value: null,
+      },
     };
   }
   /**