Refactor icons to make it easier to extend and modify

bigbluebutton-html5/app/client/globals.js

@@ -292,6 +292,17 @@ Handlebars.registerHelper("getPollQuestions", () => {
   }
 });
 
+Template.registerHelper('emojiIcons', function () {
+  return [
+    { name: 'sad', icon: 'sad-face', title: '' },
+    { name: 'happy', icon: 'happy-face', title: ''},
+    { name: 'confused', icon: 'confused-face', title: ''},
+    { name: 'neutral', icon: 'neutral-face', title: ''},
+    { name: 'away', icon: 'clock', title: ''},
+    { name: 'raiseHand', icon: 'hand', title: 'Lower your Hand'}
+  ];
+});
+
 this.getSortedUserList = function(users) {
   if((users != null ? users.length : void 0) > 1) {
     users.sort((a, b) => {

bigbluebutton-html5/app/client/main.html

@@ -106,44 +106,52 @@
 </template>
 
 <template name="icon">
-  <svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
+  {{#if equals name "hand"}}
-    {{#if equals name "happy-face"}}
+    <span rel="tooltip" data-placement="bottom" title="{{title}}">
-      <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+      <i class="ion-android-hand"></i>
-      <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+    </span>
-      <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+  {{else}}
-      <path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    <svg width="{{size}}" height="{{size}}" viewBox="0 0 50 50">
-    {{else}}
+      {{> Template.dynamic template=name}}
-      {{#if equals name "neutral-face"}}
+    </svg>
-        <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+  {{/if}}
-        <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+</template>
-        <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+
-        <path d="m18 30 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+<template name="happy-face">
-      {{else}}
+  <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
-        {{#if equals name "confused-face"}}
+  <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-          <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+  <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-          <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+  <path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-          <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+</template>
-          <path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+
-        {{else}}
+<template name="neutral-face">
-          {{#if equals name "sad-face"}}
+  <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
-            <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+  <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-            <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+  <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-            <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
+  <path d="m18 30 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+</template>
-          {{else}}
+
-            {{#if equals name "clock"}}
+<template name="confused-face">
-              <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+  <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
-              <path d="m25 25 l 0 -8" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+  <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-              <path d="m25 25 l 5 5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+  <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-            {{else}}
+  <path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-              {{#if equals name "plus"}}
+</template>
-                <path d="m25 18 l 0 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+
-                <path d="m18 25 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+<template name="sad-face">
-              {{/if}}
+  <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
-            {{/if}}
+  <circle cx="19" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-          {{/if}}
+  <circle cx="31" cy="22" r="1" stroke="white" stroke-width="2" fill="white"/>
-        {{/if}}
+  <path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      {{/if}}
+</template>
-    {{/if}}
+
-  </svg>
+<template name="clock">
+  <circle cx="25" cy="25" r="14" stroke="white" stroke-width="3" fill="transparent"/>
+  <path d="m25 25 l 0 -8" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="m25 25 l 5 5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+</template>
+
+<template name="plus">
+  <path d="m25 18 l 0 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="m18 25 l 14 0" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
 </template>

bigbluebutton-html5/app/client/views/users/user_item.html

@@ -73,43 +73,24 @@
           </span>
         {{/unless}}
       {{/if}}
-      {{#if equals user.emoji_status "happy"}}
+      {{#if user.presenter}}
-        {{> icon name="happy-face" size="25"}}
+        <span rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter">
+          <i class="icon fi-projection-screen statusIcon"></i>
+        </span>
       {{else}}
-        {{#if equals user.emoji_status "neutral"}}
+        {{#if equals user.role "MODERATOR"}}
-          {{> icon name="neutral-face" size="25"}}
+          <span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
+            <i class="icon fi-torso statusIcon"></i>
+          </span>
         {{else}}
-          {{#if equals user.emoji_status "confused"}}
+          {{#each emojiIcons}}
-            {{> icon name="confused-face" size="25"}}
+            {{#if equals name ../user.emoji_status}}
-          {{else}}
+              {{> icon name=icon size="25" title=title}}
-            {{#if equals user.emoji_status "sad"}}
-              {{> icon name="sad-face" size="25"}}
-            {{else}}
-              {{#if equals user.emoji_status "away"}}
-                {{> icon name="clock" size="25"}}
-              {{else}}
-                {{#if equals user.emoji_status "raiseHand"}}
-                  <span rel="tooltip" data-placement="bottom" title="Lower your hand">
-                    <i class="icon ion-android-hand statusIcon"></i>
-                  </span>
-                {{else}}
-                  {{#if user.presenter}}
-                    <span rel="tooltip" data-placement="bottom" title="{{user.name}} is the presenter">
-                      <i class="icon fi-projection-screen statusIcon"></i>
-                    </span>
-                  {{else}}
-                    {{#if equals user.role "MODERATOR"}}
-                      <span rel="tooltip" data-placement="bottom" title="{{user.name}} is a moderator">
-                        <i class="icon fi-torso statusIcon"></i>
-                      </span>
-                    {{/if}}
-                  {{/if}}
-                {{/if}}
-              {{/if}}
             {{/if}}
-          {{/if}}
+          {{/each}}
         {{/if}}
       {{/if}}
+
     </div>
 
     {{#if isCurrentUser userId}}

bigbluebutton-html5/app/client/views/whiteboard/whiteboard.html

@@ -15,24 +15,11 @@
         <button type="submit" class="FABTriggerButton">
           <i class="ion-android-hand"></i>
         </button>
-        <button type="submit" class="sadEmojiButton {{#if equals getCurrentUserEmojiStatus 'sad'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
+        {{#each emojiIcons}}
-          {{> icon name="sad-face" size="50"}}
+          <button type="submit" value={{name}} class="{{name}}EmojiButton {{#if equals getCurrentUserEmojiStatus name}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
-        </button>
+            {{> icon name=icon size="50"}}
-        <button type="submit" class="happyEmojiButton {{#if equals getCurrentUserEmojiStatus 'happy'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
+          </button>
-          {{> icon name="happy-face" size="50"}}
+        {{/each}}
-        </button>
-        <button type="submit" class="confusedEmojiButton {{#if equals getCurrentUserEmojiStatus 'confused'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
-          {{> icon name="confused-face" size="50"}}
-        </button>
-        <button type="submit" class="neutralEmojiButton {{#if equals getCurrentUserEmojiStatus 'neutral'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
-          {{> icon name="neutral-face" size="50"}}
-        </button>
-        <button type="submit" class="awayEmojiButton {{#if equals getCurrentUserEmojiStatus 'away'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
-          {{> icon name="clock" size="50"}}
-        </button>
-        <button type="submit" class="raiseHandEmojiButton {{#if equals getCurrentUserEmojiStatus 'raiseHand'}}activeEmojiButton{{else}}inactiveEmojiButton{{/if}}">
-          <i class="ion-android-hand"></i>
-        </button>
       </div>
       {{#if isMobile}}
         {{> makeButton btn_class="soaringButton fullscreenButton whiteboardFullscreenButton" i_class="ion-arrow-expand"}}

bigbluebutton-html5/app/client/views/whiteboard/whiteboard.js

@@ -53,79 +53,14 @@ Template.whiteboard.events({
       return document.webkitExitFullscreen();
     }
   },
-  'click .sadEmojiButton.inactiveEmojiButton'(event) {
+  'click .inactiveEmojiButton'(event) {
-    if($('.sadEmojiButton').css('opacity') === '1') {
+    if($(event.target).css('opacity') === '1') {
       BBB.setEmojiStatus(
         BBB.getMeetingId(),
         getInSession('userId'),
         getInSession('userId'),
         getInSession('authToken'),
-        "sad"
+        event.target.value
-      );
-      $('.FABTriggerButton').blur();
-      return toggleEmojisFAB();
-    }
-  },
-  'click .happyEmojiButton.inactiveEmojiButton'(event) {
-    if($('.happyEmojiButton').css('opacity') === '1') {
-      BBB.setEmojiStatus(
-        BBB.getMeetingId(),
-        getInSession('userId'),
-        getInSession('userId'),
-        getInSession('authToken'),
-        "happy"
-      );
-      $('.FABTriggerButton').blur();
-      return toggleEmojisFAB();
-    }
-  },
-  'click .confusedEmojiButton.inactiveEmojiButton'(event) {
-    if($('.confusedEmojiButton').css('opacity') === '1') {
-      BBB.setEmojiStatus(
-        BBB.getMeetingId(),
-        getInSession('userId'),
-        getInSession('userId'),
-        getInSession('authToken'),
-        "confused"
-      );
-      $('.FABTriggerButton').blur();
-      return toggleEmojisFAB();
-    }
-  },
-  'click .neutralEmojiButton.inactiveEmojiButton'(event) {
-    if($('.neutralEmojiButton').css('opacity') === '1') {
-      BBB.setEmojiStatus(
-        BBB.getMeetingId(),
-        getInSession('userId'),
-        getInSession('userId'),
-        getInSession('authToken'),
-        "neutral"
-      );
-      $('.FABTriggerButton').blur();
-      return toggleEmojisFAB();
-    }
-  },
-  'click .awayEmojiButton.inactiveEmojiButton'(event) {
-    if($('.awayEmojiButton').css('opacity') === '1') {
-      BBB.setEmojiStatus(
-        BBB.getMeetingId(),
-        getInSession('userId'),
-        getInSession('userId'),
-        getInSession('authToken'),
-        "away"
-      );
-      $('.FABTriggerButton').blur();
-      return toggleEmojisFAB();
-    }
-  },
-  'click .raiseHandEmojiButton.inactiveEmojiButton'(event) {
-    if($('.raiseHandEmojiButton').css('opacity') === '1') {
-      BBB.setEmojiStatus(
-        BBB.getMeetingId(),
-        getInSession('userId'),
-        getInSession('userId'),
-        getInSession('authToken'),
-        "raiseHand"
       );
       $('.FABTriggerButton').blur();
       return toggleEmojisFAB();