Merge branch 'dev'

Author: ebiggz

src/injected-content/scss/_emotes.scss

@@ -6,42 +6,44 @@
     bottom: calc(100% + 8px);
     background: #29374a;
     box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
-    margin-bottom: 0.4em;
-    max-height: 30vh;
-    overflow-y: auto;
-    padding: 0;
-    list-style: none;
-    li {
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        display: inline-block;
-        button {
-            width: auto;
-            display: flex;
-            align-items: center;
-            background: none;
-            border: 0;
-            outline: 0!important;
-            text-align: left;
-            cursor: pointer;
-            color: #fff;
-            line-height: 30px;
-            padding: 4px 8px;
-            font-size: .9em;
+    margin-bottom: 0.4em;  
+    padding: 0; 
+    ul {
+        list-style: none;
+        max-height: 30vh;
+        overflow-y: auto;
+        li {
             list-style-type: none;
-            &:hover, &.selected {
-                background: #0065dc;
-            }
-            .me-emotes-preview {
-                position: relative;
-                display: inline-flex;
-            }
-            span {               
-                font-size: .8em;
-                margin-left: .1em;
-            }
-        } 
+            padding: 0;
+            margin: 0;
+            display: inline-block;
+            button {
+                width: auto;
+                display: flex;
+                align-items: center;
+                background: none;
+                border: 0;
+                outline: 0!important;
+                text-align: left;
+                cursor: pointer;
+                color: #fff;
+                line-height: 30px;
+                padding: 4px 8px;
+                font-size: .9em;
+                list-style-type: none;
+                &:hover, &.selected {
+                    background: #0065dc;
+                }
+                .me-emotes-preview {
+                    position: relative;
+                    display: inline-flex;
+                }
+                span {               
+                    font-size: .8em;
+                    margin-left: .1em;
+                }
+            } 
+        }
     }
     .me-autocomplete-footer {
         height: 20px;
@@ -56,5 +58,5 @@
         b {
             font-weight: bold;
         }
-    }
-}
+    }   
+}

src/injected-content/scss/_theatermode.scss

@@ -21,20 +21,10 @@ b-notifications {
 }
 
 .channel-page.theaterMode {
-    //margin-top: 30px!important;
-    //max-height: 100%!important;
     height: calc(100vh) !important;
     max-height: calc(100vh) !important;
 }
 
-.channel-page > aside.theaterMode {
-    //padding-top: 0px!important;
-}
-
-.channel-page.theaterMode > section {
-    //height: 100%;
-}
-
 .channel-page.theaterMode b-host-bar {
     display: none !important;
 }
@@ -63,19 +53,22 @@ body.theaterMode b-nav-host {
 }
 
 b-channel-info-bar.theaterMode > .info-bar {
-    //display: none;
-    //visibility: hidden;
     opacity: 0;
     transition: 0.3s;
     background: #0000006b !important;
     box-shadow: none !important;
 }
 
-.channel-info-container.theaterMode .toggle-interactive, 
+.channel-info-container.theaterMode .toggle-interactive,
+.channel-info-container.theaterMode .toggle-interact-menu,
 b-skills-button-host-component.theaterMode {
     z-index: 99999;
 }
 
+.channel-info-container.theaterMode .toggle-interactive.open {
+    background-color: #000000d6 !important;
+}
+
 b-nav-host > div.theaterMode {
     display: none;
 }

src/injected-content/vue-apps/emote-autocomplete/emote-autocomplete.vue

@@ -1,17 +1,19 @@
 <template>
-    <ul v-cloak id="me-emote-autocomplete" class="me-autocomplete" v-show="showMenu" role="listbox">
-        <li v-for="(emote, index) in filteredEmotes" v-bind:key="emote.id">
-            <button class="me-autocomplete-emote" :class="{ selected: isSelected(index) }" style="align-items: center;display: inline-flex;" v-on:click="autocompleteEmote(emote)">
-                <span class="elixr-custom-emote twentyfour me-emotes-preview">
-                    <img :src="emoteUrl(emote)">
-                </span>
-                <span class="emote-name">{{emote.name}}</span>
-            </button>
-        </li>
+    <div v-cloak id="me-emote-autocomplete" class="me-autocomplete" v-show="showMenu">
+        <ul role="listbox">
+            <li v-for="(emote, index) in filteredEmotes" v-bind:key="emote.id" :id="getEmoteElementId(emote)">
+                <button class="me-autocomplete-emote" :class="{ selected: isSelected(index) }" style="align-items: center;display: inline-flex;" v-on:click="autocompleteEmote(emote)">
+                    <span class="elixr-custom-emote twentyfour me-emotes-preview">
+                        <img :src="emoteUrl(emote)">
+                    </span>
+                    <span class="emote-name">{{emote.name}}</span>
+                </button>
+            </li>         
+        </ul>
         <div class="me-autocomplete-footer">
             <span>Press <b>tab</b> to autocomplete.</span>
         </div>
-    </ul>
+    </div>
 </template>
 
 <script>
@@ -39,22 +41,35 @@ export default {
             if(this.selectedEmoteIndex > this.filteredEmotes.length - 1) {
                 this.selectedEmoteIndex = 0;
             }
+            this.scrollSelectedIntoView();
         }
     },
     methods: {
+        getEmoteElementId: function(emote) {
+            return (emote.global ? "global-" : "channel-") + emote.name
+        },
+        scrollSelectedIntoView: function() {
+            let selectedEmote = this.filteredEmotes[this.selectedEmoteIndex];
+            if(selectedEmote) {
+                let emoteElementId = this.getEmoteElementId(selectedEmote);
+                document.getElementById(emoteElementId).scrollIntoView(false);
+            }  
+        },
         incrementSelectedEmote: function() {
             if(this.selectedEmoteIndex >= this.filteredEmotes.length - 1) {
                 this.selectedEmoteIndex = 0;
             } else {
                 this.selectedEmoteIndex++;
             }
+            this.scrollSelectedIntoView();
         },
         decrementSelectedEmote: function() {
             if(this.selectedEmoteIndex <= 0) {
                 this.selectedEmoteIndex = this.filteredEmotes.length - 1;
             } else {
                 this.selectedEmoteIndex--;
             }
+            this.scrollSelectedIntoView();
         },
         isSelected: function(index) {
             return index === this.selectedEmoteIndex;