Minor fixes

* Fix muted property on the series opening video tag (would play audio in upcoming Firefox release)
* Fix search box showing old results when you've searched for something, selected it, then go back into the search after
* Improve MediaItem styling: proper z-index on hover, correct corners rounded on episode image, background on missing episode image
* Add horizontal padding on EpisodeScroller
* Update dependencies

src/components/EpisodeScroller.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-x-scroll nowrap">
+  <div class="overflow-x-scroll nowrap ph1">
     <media-item v-for="id in ids" :key="id" :id="id" :data-id="id" :selected="id === selected" size="small" />
   </div>
 </template>

src/components/MediaItem.vue

@@ -1,15 +1,15 @@
 <template>
   <router-link :to="`/series/${data.series_id}/${id}`" class="black" v-if="data.available">
-    <div class="media-item dib v-top h-100 mr3 mb2 br2" :class="[{'hide-child': !selected}, size]" @click="$emit('click')">
+    <div class="media-item dib v-top h-100 mr3 mb2 br2 bg-white" :class="[{'hide-child': !selected}, size]" @click="$emit('click')">
       <div class="relative">
-        <img v-if="data.screenshot_image" :src="data.screenshot_image.full_url" class="w-100 image-size">
-        <div v-else class="w-100 image-size tc placeholder-image">
+        <img v-if="data.screenshot_image" :src="data.screenshot_image.full_url" class="w-100 image-size br2 br--top">
+        <div v-else class="w-100 image-size tc placeholder-image bg-light-gray">
           <i class="fa fa-question-circle-o black-40 missing-icon" aria-hidden="true"></i>
         </div>
         <div class="bg-gray playhead playhead-container">
           <div class="bg-blue playhead" :style="playheadStyle"></div>
         </div>
-        <div class="child absolute bg-black-40 top-0 image-size">
+        <div class="child absolute bg-black-40 top-0 image-size br2 br--top">
           <i class="fa fa-play white tc play-icon" aria-hidden="true"></i>
         </div>
       </div>
@@ -49,6 +49,7 @@
 <style scoped>
   .media-item {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    position: relative;
   }
 
   .playhead {
@@ -73,10 +74,12 @@
     backface-visibility: hidden;
     transform: translateZ(0);
     width: 230px;
+    z-index: 2;
   }
 
   .media-item.dashboard:hover {
     transform: scale(1.1);
+    z-index: 3;
   }
 
   .media-item.small {

src/components/Search.vue

@@ -85,10 +85,12 @@
       },
       searchInput: debounce(function (curr, prev) {
         const trimmed = curr.trim()
-        if (trimmed === '' || trimmed === prev || trimmed.length < 3) return
+        if (trimmed === '' || trimmed === prev || trimmed.length < 3) {
+          return this.$store.commit('SET_SEARCH_IDS', [])
+        }
 
         this.$store.dispatch('search', trimmed)
-      }, 250)
+      }, 100)
     },
     methods: {
       keydown (e) {
@@ -179,7 +181,7 @@
   }
 
   .search-result span {
-    width: 170px;
+    width: 145px;
   }
 
   .clear-search {

src/pages/Series.vue

@@ -4,7 +4,7 @@
       <h1 class="fw6">This series is not available.</h1>
     </div>
     <div id="video-banner" class="absolute w-100 top-0 left-0 overflow-hidden video-banner-height">
-      <video v-if="opening" class="w-100 absolute top-0" :src="opening" @playing="playing = true" muted loop autoplay></video>
+      <video v-if="opening" class="w-100 absolute top-0" :src="opening" @playing="playing = true" :muted="true" loop autoplay></video>
       <div class="w-100 cover bg-center absolute video-banner" :class="{away: playing}" :style="videoBannerStyle"></div>
       <div class="w-100 bg-black o-40 absolute video-banner-height"></div>
     </div>

src/store/index.js

@@ -286,13 +286,13 @@ const store = new Vuex.Store({
       form.append('series_id', id)
 
       commit('UPDATE_SERIES_QUEUE', {id, queueStatus})
-      dispatch('getQueueInfo', true)
 
       return new Promise(async (resolve, reject) => {
         try {
           const resp = await api({method: 'post', route: queueStatus ? 'add_to_queue' : 'remove_from_queue', data: form})
           if (resp.data.error) throw resp
 
+          dispatch('getQueueInfo', true)
           resolve()
         } catch (err) {
           handleError(err, reject)