From e17a0f426c9f100d6a2ff54002fbdbf5525f483d Mon Sep 17 00:00:00 2001
From: Zach Bruggeman <mail@bruggie.com>
Date: Sun, 24 Sep 2017 16:56:43 -0700
Subject: [PATCH] Update design

---
 build/webpack.prod.conf.js                 |   3 +-
 src/App.css                                |   8 ++
 src/components/Collection.vue              |   6 +-
 src/components/DashboardLoadingSection.vue |  18 +++
 src/components/EpisodeScroller.vue         |   2 +-
 src/components/Header.vue                  | 126 +++++++++++++++++----
 src/components/MediaItem.vue               |  46 +++++---
 src/components/QueueItem.vue               |  30 +++--
 src/components/Search.vue                  |  14 ++-
 src/components/Video.vue                   |  33 +++---
 src/pages/Dashboard.vue                    |  24 ++--
 src/pages/History.vue                      |   8 +-
 src/pages/Media.vue                        |  67 ++++++++---
 src/pages/Queue.vue                        |   2 +-
 src/pages/Search.vue                       |  10 +-
 src/pages/Series.vue                       |  74 ++++++++++--
 src/pages/Settings.vue                     |   4 +-
 17 files changed, 348 insertions(+), 127 deletions(-)
 create mode 100644 src/components/DashboardLoadingSection.vue

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index d457e50..c18ec25 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -79,7 +79,8 @@ var webpackConfig = merge(baseWebpackConfig, {
     }),
     new OfflinePlugin({
       ServiceWorker: {
-        events: true
+        events: true,
+        navigateFallbackURL: '/'
       },
       AppCache: false
     }),
diff --git a/src/App.css b/src/App.css
index 6ec98ca..d57a2ff 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,10 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
+.transparent {
+  color: transparent;
+}
+
 .emoji {
   height: 28px;
   user-select: none;
@@ -76,3 +80,7 @@
 .player-height {
   height: 576px;
 }
+
+.container-width {
+  width: 948px;
+}
diff --git a/src/components/Collection.vue b/src/components/Collection.vue
index a0e9400..a50c44d 100644
--- a/src/components/Collection.vue
+++ b/src/components/Collection.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!hide">
-    <div v-if="loading" style="width: 948px" class="center">
+    <div v-if="loading" class="center container-width">
       <loading-media-item v-for="n in 15" :key="n" />
     </div>
     <media-item v-else v-for="id in sortedMedia" :key="id" :id="id" size="medium" />
@@ -20,8 +20,8 @@
       }
     },
     components: {
-      'media-item': MediaItem,
-      'loading-media-item': LoadingMediaItem
+      MediaItem,
+      LoadingMediaItem
     },
     computed: {
       media () {
diff --git a/src/components/DashboardLoadingSection.vue b/src/components/DashboardLoadingSection.vue
new file mode 100644
index 0000000..70b1adb
--- /dev/null
+++ b/src/components/DashboardLoadingSection.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="center mt3 loading-section">
+    <div class="tc">
+      <i class="fa fa-circle-o-notch fa-spin fa-3x silver"></i>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .loading-section > div {
+    height: 215px;
+  }
+
+  .loading-section > div > i {
+    margin-top: 65px;
+  }
+</style>
+
diff --git a/src/components/EpisodeScroller.vue b/src/components/EpisodeScroller.vue
index 2b43b19..737cd6c 100644
--- a/src/components/EpisodeScroller.vue
+++ b/src/components/EpisodeScroller.vue
@@ -10,7 +10,7 @@
   export default {
     props: ['ids', 'selected'],
     components: {
-      'media-item': MediaItem
+      MediaItem
     },
     mounted () {
       if (this.selected) {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7cfd2dd..51b4f51 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,41 +1,41 @@
 <template>
-  <header class="bg-blue absolute top-0 w-100 bw1 bb b--dark-blue" :class="[lights ? 'z-3' : 'z-max']">
+  <header class="bg-white-90 fixed top-0 w-100" :class="[lights ? 'z-3' : 'z-max', {'series-header': routeName === 'series', 'media-header': routeName === 'media'}]">
     <div class="header-container center relative">
       <div class="logo-container">
         <router-link to="/" class="db no-underline" exact>
           <img src="../assets/umi.png" alt="Umi player logo" class="logo db">
-          <span class="b db ttu white f3 logo-text">Umi!</span>
+          <span class="b db ttu blue f3 logo-text">Umi!</span>
         </router-link>
       </div>
       <div>
-        <div class="absolute nav" style="left: 95px; top: 16px;">
-          <router-link to="/queue" class="white no-underline bg-animate">
+        <div class="absolute nav">
+          <router-link to="/queue" class="dark-gray no-underline">
             <i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">Queue</span>
           </router-link>
-          <router-link to="/history" class="white no-underline bg-animate">
+          <router-link to="/history" class="dark-gray no-underline">
             <i class="fa fa-history v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">History</span>
           </router-link>
         </div>
-        <div class="absolute search right-0" style="top: 8px;">
+        <div class="absolute search right-0">
           <span class="fa-stack dib pointer" @click="showTogether" v-if="connected" @mouseover="roomHover = true" @mouseout="roomHover = false">
-            <i class="fa fa-circle fa-stack-2x blue link menu-circle" :class="{active: roomMenu}"></i>
-            <i class="fa fa-users fa-stack-1x white" style="pointer-events: none"></i>
+            <i class="fa fa-circle fa-stack-2x transparent link menu-circle" :class="{active: roomMenu}"></i>
+            <i class="fa fa-users fa-stack-1x dark-gray pointer-events-none"></i>
           </span>
-          <span class="absolute bg-dark-blue white pa1 tc br2 f7 fw7 nowrap counter" v-if="connected">{{connectedCount}}</span>
+          <span class="absolute bg-dark-gray white pa1 tc br2 f7 fw7 nowrap counter" v-if="connected">{{connectedCount}}</span>
           <div v-if="roomMenu" v-on-clickaway="hideTogether" class="absolute bg-white shadow-1 br2 pv2 ph3 together-menu">
             <div class="mb2">
               <div class="fw6">{{roomText}}</div>
             </div>
             <input type="text" class="pa2 w-100 pointer" v-model="roomUrl" @click="handleRoomClick" readonly>
-            <button @click="leaveRoom" class="f6 mt2 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc" style="width: 83%">Leave room</button>
+            <button @click="leaveRoom" class="f6 mt2 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc leave-room">Leave room</button>
             <button @click="hideTogether" class="f6 mt2 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc w-15 fr">Close</button>
           </div>
           <search />
           <span class="fa-stack dib pointer" @click="showMenu">
-            <i class="fa fa-circle fa-stack-2x blue link menu-circle" :class="{active: menu}"></i>
-            <i class="fa fa-ellipsis-v fa-stack-1x white" style="pointer-events: none"></i>
+            <i class="fa fa-circle fa-stack-2x transparent link menu-circle" :class="{active: menu}"></i>
+            <i class="fa fa-ellipsis-v fa-stack-1x dark-gray pointer-events-none"></i>
           </span>
           <div v-if="menu" v-on-clickaway="hideMenu" class="absolute bg-white shadow-1 right-0 br2 pv2 menu">
             <div class="pv2 mh2 fw6 bb mb2 b--gray">
@@ -48,10 +48,10 @@
                 <span>{{malUsername}}</span>
               </a>
             </div>
-            <router-link @click.native="hideMenu" to="/settings" class="db pointer bg-white hover-bg-blue hover-white pa2 no-underline black">
+            <router-link @click.native="hideMenu" to="/settings" class="db bg-white bg-animate hover-bg-light-gray pa2 no-underline black">
               <i class="fa fa-cog mr1"></i> Settings
             </router-link>
-            <div @click="logout" class="pointer bg-white hover-bg-blue hover-white pa2">
+            <div @click="logout" class="pointer bg-white bg-animate hover-bg-light-gray pa2">
               <i class="fa fa-sign-out mr1"></i> Sign out
             </div>
           </div>
@@ -106,6 +106,9 @@ export default {
       set (val) {
         this.$store.commit('UPDATE_ROOM_MENU', val)
       }
+    },
+    routeName () {
+      return this.$store.state.route.name
     }
   },
   methods: {
@@ -147,7 +150,14 @@ export default {
 
 <style scoped>
   header {
+    background-color: rgba(255, 255, 255, 0.95);
     height: 4rem;
+    border-top: 0.125rem solid #357edd;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
   }
 
   .header-container {
@@ -194,34 +204,36 @@ export default {
     transform: translate(35px, -36px) rotate(10deg);
   }
 
+  .nav {
+    left: 95px;
+    top: 14px;
+  }
+
   .nav a {
     height: 62px;
     display: inline-block;
     margin-right: -5px;
     position: relative;
-    top: -23px;
+    top: -21px;
     padding: 1.4rem 1rem;
-    border-bottom: 0 solid #00449e;
     transition: all 0.2s ease-in-out;
+    border-bottom: 0 solid transparent;
   }
 
-  .nav a:hover {
-    border-bottom-width: 0.25rem;
+  .nav a:hover, .nav .router-link-active {
+    border-bottom: .25rem solid #357edd;
   }
 
   .nav .fa {
     font-size: 1.25rem;
   }
 
-  .nav .router-link-active {
-    border-bottom: 0.25rem solid #00449e;
-  }
-  .logout:hover {
-    background-color: #00449e;
+  .search {
+    top: 8px;
   }
 
   .menu-circle:hover, .menu-circle.active {
-    color: #00449e;
+    color: #f4f4f4;
   }
 
   .menu, .together-menu {
@@ -249,6 +261,10 @@ export default {
     margin-left: -8px;
   }
 
+  .leave-room {
+    width: 83%;
+  }
+
   .counter {
     top: 7px;
     right: 318px;
@@ -264,8 +280,68 @@ export default {
     width: 0;
     position: absolute;
     pointer-events: none;
-    border-left-color: #00449e;
+    border-left-color: #333;
     border-width: 4px;
     margin-top: -4px;
   }
+
+  /* styles on a series page */
+  .series-header {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-top-color: transparent;
+  }
+
+  .series-header .bg-blue {
+    background-color: transparent;
+  }
+
+  .series-header .dark-gray, .series-header .blue {
+    color: #fff;
+  }
+
+  .series-header .white {
+    color: transparent;
+  }
+
+  .series-header .bg-dark-blue {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .series-header .counter:after {
+    border-left-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .media-header {
+    background-color: #333;
+    box-shadow: none;
+    border-top-color: transparent;
+    border-bottom: 0;
+  }
+
+  .media-header .dark-gray, .media-header .blue {
+    color: #fff;
+  }
+
+  .media-header .white {
+    color: #333;
+  }
+
+  .series-header .menu-circle:hover, .series-header .menu-circle.active,
+  .media-header .menu-circle:hover, .media-header .menu-circle.active {
+    color: transparent;
+  }
+
+  .series-header .counter, .media-header .counter {
+    background-color: #fff;
+    color: #333;
+  }
+
+  .series-header .counter:after, .media-header .counter:after {
+    border-left-color: #fff;
+  }
+
+  .series-header .nav a:hover, .series-header .nav .router-link-active,
+  .media-header .nav a:hover, .media-header .nav .router-link-active {
+    border-bottom: .25rem solid #fff;
+  }
 </style>
diff --git a/src/components/MediaItem.vue b/src/components/MediaItem.vue
index 8390339..b59e918 100644
--- a/src/components/MediaItem.vue
+++ b/src/components/MediaItem.vue
@@ -1,30 +1,28 @@
 <template>
   <router-link :to="`/series/${data.series_id}/${id}`" class="black" v-if="data.available">
-    <div class="media-item dib v-top h-100 bg-near-white mr3 mb2" :class="[{'bb bw2 b--light-gray': !noBorder, 'hide-child': !selected}, size]" @click="$emit('click')">
-      <div class="relative" :class="{dib: size === 'inline-small'}">
+    <div class="media-item dib v-top h-100 mr3 mb2 br2" :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" style="margin-bottom: 3px;">
+        <div v-else class="w-100 image-size tc placeholder-image">
           <i class="fa fa-question-circle-o black-40 missing-icon" aria-hidden="true"></i>
         </div>
-        <div class="bg-gray playhead" style="margin-top: -4px;">
+        <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">
           <i class="fa fa-play white tc play-icon" aria-hidden="true"></i>
         </div>
       </div>
-      <div class="pa2" :class="{'div v-top': size === 'inline-small'}">
+      <div class="pa2">
         <div v-if="collectionName">
-          <span class="truncate db fw6">{{collectionName}}</span> <br>
-          <small class="gray truncate db lh-copy">Episode {{data.episode_number}} &mdash; {{data.name}}</small>
+          <span class="truncate db fw6 mb1">{{collectionName}}</span>
+          <small class="gray truncate db lh-copy">#{{data.episode_number}} &bull; {{data.name}}</small>
         </div>
         <div v-else>
-          <span class="fw6" v-if="data.episode_number !== ''">Episode {{data.episode_number}}</span>
-          <span class="fw6" v-else>{{data.name}}</span>
-          <br>
-          <small class="gray truncate db lh-copy" :style="noBorder ? 'width: 290px;' : ''" v-if="data.episode_number !== ''">{{data.name}}</small>
-          <small class="gray truncate db lh-copy" :style="noBorder ? 'width: 290px;' : ''" v-else>&nbsp;</small>
-          <small class="truncate db mt2" style="width: 290px;" v-if="size === 'inline-small'">{{data.description}}</small>
+          <span class="fw6 mb1" v-if="data.episode_number !== ''">Episode {{data.episode_number}}</span>
+          <span class="fw6 mb1" v-else>{{data.name}}</span>
+          <small class="gray truncate db lh-copy" v-if="data.episode_number !== ''">{{data.name}}</small>
+          <small class="gray truncate db lh-copy" v-else>&nbsp;</small>
         </div>
       </div>
     </div>
@@ -49,6 +47,9 @@
 </script>
 
 <style scoped>
+  .media-item {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
   .playhead {
     height: 4px;
   }
@@ -57,14 +58,23 @@
     width: 0;
   }
 
+  .playhead-container {
+    margin-top: -4px;
+  }
+
   .media-item.medium {
     width: 300px;
   }
 
   .media-item.dashboard {
+    transition: transform 0.2s ease-in-out;
     width: 230px;
   }
 
+  .media-item.dashboard:hover {
+    transform: scale(1.1);
+  }
+
   .media-item.small {
     width: 150px;
   }
@@ -79,7 +89,7 @@
     height: 129px;
   }
 
-  .small .image-size, .inline-small .image-size {
+  .small .image-size {
     width: 150px;
     height: 84px;
   }
@@ -96,7 +106,7 @@
     margin: 55px auto;
   }
 
-  .small .play-icon, .inline-small .play-icon {
+  .small .play-icon {
     display: block !important;
     font-size: 1.5rem !important;
     margin: 30px auto;
@@ -112,8 +122,12 @@
     margin-top: 55px;
   }
 
-  .small .missing-icon, .inline-small .missing-icon {
+  .small .missing-icon {
     font-size: 1.5rem !important;
     margin-top: 30px;
   }
+
+  .placeholder-image {
+    margin-bottom: 3px;
+  }
 </style>
diff --git a/src/components/QueueItem.vue b/src/components/QueueItem.vue
index 38b1528..bbb1eb7 100644
--- a/src/components/QueueItem.vue
+++ b/src/components/QueueItem.vue
@@ -1,34 +1,34 @@
 <template>
   <router-link :to="`/series/${data.most_likely_media.series_id}/${data.most_likely_media.media_id}`" class="link black" v-if="data.most_likely_media.available">
-    <div class="bg-near-white w-100 mb2 pa3 cf bb bw2 b--light-gray hide-child">
+    <div class="w-100 mb2 pa3 cf hide-child br2 queue-item">
       <div class="fl w-20 relative">
-        <img :src="data.most_likely_media.screenshot_image.thumb_url" class="v-mid" style="width: 160px; height: 90px">
+        <img :src="data.most_likely_media.screenshot_image.thumb_url" class="v-mid image-size">
         <div class="bg-gray mt1 playhead">
-          <div class="bg-blue playhead" :style="`width: ${Math.min(100, (data.most_likely_media.playhead / data.most_likely_media.duration) * 100)}%`"></div>
+          <div class="bg-blue playhead" :style="playheadStyle"></div>
         </div>
-        <div class="child absolute bg-black-40 top-0" style="width: 160px; height: 90px">
+        <div class="child absolute bg-black-40 top-0 image-size">
           <i class="fa fa-play white tc play-icon" aria-hidden="true"></i>
         </div>
       </div>
       <div class="fl w-80">
         <strong class="fw6">{{data.series.name}}</strong> <br>
         <small class="gray">Next up: Episode {{data.most_likely_media.episode_number}} &mdash; {{data.most_likely_media.name}}</small>
-        <p class="lh-copy" style="font-size: 80%;">{{data.most_likely_media.description}}</p>
+        <p class="lh-copy f6">{{data.most_likely_media.description}}</p>
       </div>
     </div>
   </router-link>
   <router-link :to="`/series/${data.most_likely_media.series_id}`" class="link black" v-else>
     <div class="bg-near-white w-100 mb2 pa3 cf bb bw2 b--light-gray hide-child">
       <div class="fl w-20 relative">
-        <img :src="data.series.landscape_image.thumb_url" class="v-mid" style="width: 160px; height: 90px">
-        <div class="child absolute bg-black-40 top-0" style="width: 160px; height: 90px">
+        <img :src="data.series.landscape_image.thumb_url" class="v-mid image-size">
+        <div class="child absolute bg-black-40 top-0 image-size">
           <i class="fa fa-clock-o white tc play-icon" aria-hidden="true"></i>
         </div>
       </div>
       <div class="fl w-80">
         <strong class="fw6">{{data.series.name}}</strong> <br>
         <small class="gray">Next up: Episode {{data.most_likely_media.episode_number}}</small>
-        <p class="lh-copy" style="font-size: 80%;">Available to watch in {{parsedTime}}</p>
+        <p class="lh-copy f6">Available to watch in {{parsedTime}}</p>
       </div>
     </div>
   </router-link>
@@ -42,12 +42,21 @@
     computed: {
       parsedTime () {
         return distance(this.data.most_likely_media.available_time)
+      },
+      playheadStyle () {
+        return {
+          width: `${Math.min(100, (this.data.most_likely_media.playhead / this.data.most_likely_media.duration) * 100)}%`
+        }
       }
     }
   }
 </script>
 
 <style scoped>
+  .queue-item {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
   .playhead {
     width: 160px;
     height: 4px;
@@ -58,4 +67,9 @@
     font-size: 2rem !important;
     margin: 29px auto;
   }
+
+  .image-size {
+    width: 160px;
+    height: 90px;
+  }
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index d73d31b..293ebb6 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -3,14 +3,15 @@
     <form @submit.prevent="search">
       <input
         type="text"
-        class="br2 br--left input-reset white bw0 bg-dark-blue pa2 search-bar"
+        class="br2 br--left input-reset black bg-white bt bb bl br-0 b--silver pa2 search-bar"
         placeholder="Search Crunchyroll"
         v-model="searchInput"
         ref="input"
         @keydown="keydown"
         @focus="focus"
       >
-      <button class="br2 br--right pointer bw0 button-reset bg-dark-blue pa2 search-btn"><i class="fa fa-search white"></i></button>
+      <button class="br2 br--right pointer button-reset bg-white bt bb br bl-0 b--silver pa2 search-btn"><i class="fa fa-search black-80 hover-black" aria-hidden="true"></i></button>
+      <i v-if="searchInput !== ''" class="fa fa-times black-80 hover-black absolute pointer clear-search" aria-hidden="true" @click="searchInput = ''"></i>
     </form>
     <div v-if="showResults" class="absolute br2 shadow-1 bg-white w-100 mt1">
       <router-link
@@ -145,12 +146,12 @@
 
 <style scoped>
   .search-bar::placeholder {
-    color: white;
+    color: black;
     opacity: 0.8;
   }
 
   .search-btn {
-    margin-left: -5px;
+    margin-left: -4px;
   }
 
   .search-bar:focus, .search-btn:active, .search-btn:focus {
@@ -180,4 +181,9 @@
   .search-result span {
     width: 170px;
   }
+
+  .clear-search {
+    right: 35px;
+    top: 8px;
+  }
 </style>
diff --git a/src/components/Video.vue b/src/components/Video.vue
index a5d51af..0f040a5 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -8,7 +8,7 @@
     <div v-if="!playerInit" class="bg-black absolute w-100 left-0 player-height player-top-offset">
       <div class="bg-dark-gray center player-width player-height"></div>
     </div>
-    <reactotron v-show="room !== ''" class="dib v-mid ml1 nowrap overflow-hidden reactotron relative z-9999" style="top: 565px;" @emoji="handleEmoji" />
+    <reactotron v-show="room !== ''" class="dib v-mid ml1 nowrap overflow-hidden reactotron relative z-9999" @emoji="handleEmoji" />
   </div>
 </template>
 
@@ -18,7 +18,7 @@
   import anime from 'animejs'
   import api, {LOCALE, VERSION} from 'lib/api'
   import emoji from 'lib/emoji'
-  import bif from 'lib/bif'
+  // import bif from 'lib/bif'
   import Reactotron from './Reactotron'
 
   export default {
@@ -78,14 +78,12 @@
             onReady () {
               self.$emit('loaded')
               if (self.container) {
-                this.core.el.appendChild(self.container)
-                return
+                return this.core.el.appendChild(self.container)
               }
               self.container = document.createElement('div')
               self.reactions = document.createElement('div')
               self.reactions.className = 'reaction-canvas absolute absolute--fill z-9999 tl'
               self.tron = self.$el.querySelector('.reactotron').cloneNode(true)
-              self.tron.style.cssText = ''
               self.tron.className = `${self.tron.className} z-max player-tron`
               Array.from(self.tron.querySelectorAll('img')).forEach((e) => { e.onclick = self.handleEmoji.bind(self, e.id, true) })
               self.container.appendChild(self.reactions)
@@ -238,16 +236,16 @@
           }
         })
       },
-      async loadBif () {
-        const thumbnailsPlugin = this.player.getPlugin('scrub-thumbnails')
-        if (this.frames.length > 0) {
-          thumbnailsPlugin.removeThumbnail(this.frames)
-        }
-        try {
-          this.frames = await bif(this.bif)
-          thumbnailsPlugin.addThumbnail(this.frames)
-        } catch (err) {}
-      },
+      // async loadBif () {
+      //   const thumbnailsPlugin = this.player.getPlugin('scrub-thumbnails')
+      //   if (this.frames.length > 0) {
+      //     thumbnailsPlugin.removeThumbnail(this.frames)
+      //   }
+      //   try {
+      //     this.frames = await bif(this.bif)
+      //     thumbnailsPlugin.addThumbnail(this.frames)
+      //   } catch (err) {}
+      // },
       wsJoinRoom () {
         const time = parseInt(this.$route.query.wsTime, 10)
         const playing = this.$route.query.wsPlaying
@@ -347,6 +345,7 @@
 
   .player-tron.full {
     display: block !important;
+    top: 0 !important;
   }
   .player-tron.show {
     transform: translateY(0);
@@ -369,4 +368,8 @@
     top: -300px;
     width: 100%;
   }
+
+  .reactotron {
+    top: 565px;
+  }
 </style>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 5956f0a..ffdde6c 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -13,11 +13,7 @@
       <div v-if="history.length > 0" class="center mt3">
         <media-item v-for="d in history" :key="d.media.media_id" :id="d.media.media_id" :collectionName="d.collection.name" size="dashboard" />
       </div>
-      <div v-else class="center mt3">
-        <div class="tc" style="height: 215px;">
-          <i class="fa fa-circle-o-notch fa-spin fa-3x silver" style="margin-top: 65px;"></i>
-        </div>
-      </div>
+      <dashboard-loading-section v-else />
     </div>
     <div class="dashboard-section">
       <div class="cf bb">
@@ -32,11 +28,7 @@
       <div v-if="queue.length > 0" class="center mt3">
         <media-item v-for="d in queue" :key="d.most_likely_media.media_id" :id="d.most_likely_media.media_id" :collectionName="d.series.name" size="dashboard" />
       </div>
-      <div v-else class="center mt3">
-        <div class="tc" style="height: 215px;">
-          <i class="fa fa-circle-o-notch fa-spin fa-3x silver" style="margin-top: 65px;"></i>
-        </div>
-      </div>
+      <dashboard-loading-section v-else />
     </div>
     <div class="dashboard-section">
       <h2 class="fw4 mv0 pb3 bb"><i class="fa fa-calendar-o mr1" aria-hidden="true"></i> Latest releases</h2>
@@ -48,11 +40,7 @@
           </div>
         </div>
       </div>
-      <div v-else class="center mt3">
-        <div class="tc" style="height: 436px;">
-          <i class="fa fa-circle-o-notch fa-spin fa-3x silver" style="margin-top: 175px;"></i>
-        </div>
-      </div>
+      <dashboard-loading-section v-else />
     </div>
   </div>
 </template>
@@ -62,13 +50,17 @@
   import isYesterday from 'date-fns/is_yesterday'
   import difference from 'date-fns/difference_in_calendar_days'
   import MediaItem from 'components/MediaItem'
+  import DashboardLoadingSection from 'components/DashboardLoadingSection'
 
   export default {
     name: 'dashboard',
     metaInfo: {
       title: 'Home'
     },
-    components: { MediaItem },
+    components: {
+      MediaItem,
+      DashboardLoadingSection
+    },
     data () {
       return {
         splits: {}
diff --git a/src/pages/History.vue b/src/pages/History.vue
index 33ded24..3e0ace0 100644
--- a/src/pages/History.vue
+++ b/src/pages/History.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="mt2">
-    <div v-if="allData.length > 0" style="width: 948px" class="center">
+    <div v-if="allData.length > 0" class="center container-width">
       <media-item v-for="d in allData" :key="d.media.media_id" :id="d.media.media_id" :collectionName="d.collection.name" size="medium" />
       <div class="f5 fw6 db ba b--black-20 bg-animate hover-bg-light-gray black br1 pointer pa3 tc more-btn" :class="[paginationLoading ? 'bg-light-gray' : 'bg-white']" @click="handlePagination">
         {{paginationLoading ? 'Loading...' : 'Load more'}}
       </div>
     </div>
-    <div v-else style="width: 948px" class="center">
+    <div v-else class="center container-width">
       <loading-media-item v-for="n in 15" :key="n" />
     </div>
   </div>
@@ -34,8 +34,8 @@
       }
     },
     components: {
-      'media-item': MediaItem,
-      'loading-media-item': LoadingMediaItem
+      MediaItem,
+      LoadingMediaItem
     },
     methods: {
       async handlePagination () {
diff --git a/src/pages/Media.vue b/src/pages/Media.vue
index 08898b9..abc0cce 100644
--- a/src/pages/Media.vue
+++ b/src/pages/Media.vue
@@ -2,16 +2,16 @@
   <div>
     <div v-if="media && media.created">
       <div v-if="loading" class="bg-black-60 absolute absolute--fill z-max player-height player-top-offset tc">
-        <i class="fa fa-circle-o-notch fa-spin fa-3x white center" style="margin-top: 265px;"></i>
+        <i class="fa fa-circle-o-notch fa-spin fa-3x white center loading-spinner"></i>
       </div>
       <div v-if="shouldContinueWatching && !loading" @click="continueWatching" class="absolute z-max player-width player-top-offset left-0 right-0 center cf white">
-        <div class="fw5 f4 pa3 w-100 bg-black-60 hover-bg-black-70 bg-animate pointer absolute" style="top: 521px;">
+        <div class="fw5 f4 pa3 w-100 bg-black-60 hover-bg-black-70 bg-animate pointer absolute resume-container">
           <i class="fa fa-fast-forward mr2" aria-hidden="true"></i> Resume watching at {{prettyTime}}
         </div>
       </div>
       <div v-if="shouldNextEpisode" class="absolute z-max player-width player-top-offset left-0 right-0 center cf white">
         <router-link class="white" :to="`/series/${nextEpisodeMedia.series_id}/${nextEpisodeMedia.media_id}`">
-          <div class="fw5 f4 pa3 w-100 bg-black-60 hover-bg-black-70 bg-animate pointer absolute hide-child" style="top: 454px;">
+          <div class="fw5 f4 pa3 w-100 bg-black-60 hover-bg-black-70 bg-animate pointer absolute hide-child next-container">
             <div class="child absolute bg-black-40 tc next-episode-overlay">
               <i class="fa fa-play white tc play-icon" aria-hidden="true"></i>
             </div>
@@ -27,22 +27,29 @@
         <div class="bg-black absolute w-100 left-0 player-height player-top-offset">
           <div class="bg-dark-gray center player-width player-height"></div>
         </div>
-        <reactotron v-if="room !== ''" class="dib v-mid ml1 nowrap overflow-hidden reactotron relative z-9999" style="top: 565px;" />
+        <reactotron v-if="room !== ''" class="dib v-mid ml1 nowrap overflow-hidden reactotron relative z-9999"/>
       </div>
       <div class="media-info">
-        <div class="w-100">
-          <h2 class="normal lh-title mb2 w-80 dib"><span class="ttu fw6">Episode {{media.episode_number}}:</span> {{media.name}}</h2>
+        <div>
+          <h2 class="normal lh-title mb2 w-80 dib">{{media.name}}</h2>
           <div class="dib fr pt3 z-9999 relative">
-            <div v-tooltip.bottom-center="'Watch with others'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2" :class="[lights ? 'white b--white-60 hover-bg-transparent' : 'black b--black-20 hover-bg-light-gray bg-animate']" v-if="room === ''" @click="createRoom"><i class="tc fa fa-users" aria-hidden="true"></i></div>
-            <div v-tooltip.bottom-center="'Toggle dark mode'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2" :class="[lights ? 'white b--white-60 hover-bg-transparent' : 'black b--black-20 hover-bg-light-gray bg-animate']" @click="$store.commit('UPDATE_LIGHTS', !lights)"><i class="tc fa fa-moon-o" aria-hidden="true" style="width: 16px;"></i></div>
+            <div v-tooltip.bottom-center="'Watch with others'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2" :class="optionClasses" v-if="room === ''" @click="createRoom">
+              <i class="tc fa fa-users w-1" aria-hidden="true"></i>
+            </div>
+            <div v-tooltip.bottom-center="'Toggle dark mode'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2" :class="optionClasses" @click="$store.commit('UPDATE_LIGHTS', !lights)">
+              <i class="tc fa fa-moon-o w-1" aria-hidden="true"></i>
+            </div>
           </div>
         </div>
-        <div style="height: 21px;">
-          <router-link class="dark-gray fw6 no-underline bb pb1 b--dark-gray hover-blue link" :to="`/series/${media.series_id}`">{{media.collection_name}}</router-link>
-          <a v-if="isMalAuthed && malItem.id" :href="malItem.url" target="_blank" rel="noopener"><span class="mal-icon ml1" :class="{watched: malSynced}"></span></a>
+        <div class="fw6">
+          <router-link class="dark-gray no-underline bb pb1 b--dark-gray hover-blue link" :to="`/series/${media.series_id}`">
+            {{media.collection_name}}
+          </router-link>
+          &bull; Epsiode {{media.episode_number}}
+          &bull; <i class="fa fa-clock-o" aria-hidden="true"></i> {{duration}}
         </div>
+        <a v-if="isMalAuthed && malItem.id" :href="malItem.url" target="_blank" rel="noopener"><span class="mal-icon ml1" :class="{watched: malSynced}"></span></a>
         <p class="lh-copy">{{media.description}}</p>
-
         <h3 class="fw5">Episodes</h3>
         <episode-scroller v-if="collectionMedia && collectionMedia.length > 0" :ids="collectionMedia" :selected="$route.params.id" />
       </div>
@@ -52,7 +59,7 @@
         <div class="bg-black absolute w-100 left-0 player-height player-top-offset">
           <div class="bg-dark-gray center player-width player-height">
             <div class="bg-black-60 center player-width player-height tc">
-              <i class="fa fa-circle-o-notch fa-spin fa-3x white center" style="margin-top: 265px;"></i>
+              <i class="fa fa-circle-o-notch fa-spin fa-3x white center loading-spinner"></i>
             </div>
           </div>
         </div>
@@ -79,9 +86,9 @@
     },
     components: {
       'umi-video': Video,
-      'media-item': MediaItem,
-      'episode-scroller': EpisodeScroller,
-      'reactotron': Reactotron
+      MediaItem,
+      EpisodeScroller,
+      Reactotron
     },
     data () {
       return {
@@ -144,10 +151,16 @@
         return prettyTime(this.internalSeek)
       },
       shouldContinueWatching () {
-        return this.internalSeek !== 0 && this.internalSeek < this.media.duration
+        return this.internalSeek !== 0 && (this.media.duration - this.internalSeek >= 30)
       },
       shouldNextEpisode () {
         return this.nextEpisode && this.nextEpisodeId !== ''
+      },
+      duration () {
+        return prettyTime(this.media.duration)
+      },
+      optionClasses () {
+        return [this.lights ? 'white b--white-60 hover-bg-transparent' : 'black b--black-20 hover-bg-light-gray bg-animate']
       }
     },
     methods: {
@@ -270,4 +283,24 @@
   .next-episode-overlay i {
     margin-top: 37px;
   }
+
+  .duration {
+    z-index: 10000;
+  }
+
+  .loading-spinner {
+    margin-top: 265px;
+  }
+
+  .resume-container {
+    top: 521px;
+  }
+
+  .reactotron {
+    top: 565px;
+  }
+
+  .next-container {
+    top: 454px;
+  }
 </style>
diff --git a/src/pages/Queue.vue b/src/pages/Queue.vue
index e95e138..f3dbb5d 100644
--- a/src/pages/Queue.vue
+++ b/src/pages/Queue.vue
@@ -48,7 +48,7 @@
       }
     },
     components: {
-      'queue-item': QueueItem
+      QueueItem
     },
     methods: {
       sortQueue ({target}) {
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index e420037..94e5ff4 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -4,7 +4,7 @@
       <span class="small-caps" v-if="loading && searchIds.length > 0">Loading...</span>
       <span class="small-caps" v-else-if="searchIds.length > 0">{{searchIds.length}} result{{searchIds.length !== 1 ? 's' : ''}}</span>
     </div>
-    <div class="center" style="width: 880px;">
+    <div class="center results-container">
         <series-item v-for="id in searchIds" :key="id" :id="id" class="pr1" />
         <h3 class="fw5 dark-gray tc" v-if="loading && searchIds.length === 0">Loading...</h3>
         <h3 class="fw5 dark-gray tc" v-if="searchIds.length === 0 && !loading">No results found.</h3>
@@ -23,7 +23,7 @@
       }
     },
     components: {
-      'series-item': SeriesItem
+      SeriesItem
     },
     data () {
       return {
@@ -69,3 +69,9 @@
     }
   }
 </script>
+
+<style scoped>
+  .results {
+    width: 880px;
+  }
+</style>
diff --git a/src/pages/Series.vue b/src/pages/Series.vue
index 676febc..c68049c 100644
--- a/src/pages/Series.vue
+++ b/src/pages/Series.vue
@@ -3,19 +3,19 @@
     <div v-if="seriesError">
       <h1 class="fw6">This series is not available.</h1>
     </div>
-    <div class="absolute w-100 player-top-offset left-0 overflow-hidden" style="height: 300px;">
+    <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>
-      <div class="w-100 cover bg-center absolute video-banner" :class="{away: playing}" :style="`background-image: url(${series.landscape_image.full_url});`"></div>
-      <div class="w-100 bg-black o-40 absolute" style="height: 300px;"></div>
+      <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>
-    <div class="relative z-9999" style="margin-top: 150px;">
+    <div class="relative z-9999 info-container">
       <div class="cf">
         <div class="w-20 fl pt2">
-          <img :src="series.portrait_image.full_url" class="shadow-1 bg-light-gray" style="width: 198px; height: 298px;">
+          <img :src="series.portrait_image.full_url" class="shadow-1 bg-light-gray portrait-image">
         </div>
         <div class="w-80 fl pl3">
-          <h1 class="series-title white">{{series.name || '&nbsp;'}}</h1>
-          <p class="lh-copy" style="margin-top: 2rem;">{{series.description}}</p>
+          <h1 class="series-title white fw6">{{series.name || '&nbsp;'}}</h1>
+          <p class="lh-copy mt4">{{series.description}}</p>
           <div v-if="!loading">
             <queue-button :id="series.series_id" />
             <a class="link f6 fw6 dib ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph2 pv1" target="_blank" :href="`https://myanimelist.net/search/all?q=${encodeURIComponent(series.name)}`">Find on MyAnimeList</a>
@@ -33,7 +33,7 @@
       </div>
       <div v-if="collections && !loading">
         <div v-for="id in sortedCollections" :key="id">
-          <div class="collection-header cf bg-light-gray pa3 mv2 pointer bb bw2 b--black-10" :data-id="id" @click="selectCollection">
+          <div class="collection-header bg-near-white cf pa3 mv2 pointer br2" :data-id="id" @click="selectCollection">
             <div class="fl">
               <span class="fw6">{{collectionData[id].name}}</span>
             </div>
@@ -41,7 +41,7 @@
               <i class="fa" :class="[`fa-caret-${selectedCollection === id ? 'up' : 'down'}`]" aria-hidden="true"></i>
             </div>
           </div>
-          <collection :id="id" :hide="selectedCollection !== id" :sort="sort" class="center" style="width: 948px" />
+          <collection :id="id" :hide="selectedCollection !== id" :sort="sort" class="center container-width" />
         </div>
       </div>
     </div>
@@ -67,8 +67,8 @@
       }
     },
     components: {
-      collection: Collection,
-      'queue-button': QueueButton
+      Collection,
+      QueueButton
     },
     data () {
       return {
@@ -100,6 +100,11 @@
       },
       collectionData () {
         return this.$store.state.collections
+      },
+      videoBannerStyle () {
+        return {
+          'background-image': `url(${this.series.landscape_image.full_url})`
+        }
       }
     },
     methods: {
@@ -133,6 +138,16 @@
         this.sort = target.dataset.sort
         this.selectedCollection = this.sortedCollections[0]
         localStorage.setItem(`series-${this.seriesId}-sort`, target.dataset.sort)
+      },
+      intersectCallback ([entry]) {
+        const header = document.querySelector('header')
+        header.classList.add('bg-animate')
+
+        if (entry.isIntersecting) {
+          header.classList.add('series-header')
+        } else {
+          header.classList.remove('series-header')
+        }
       }
     },
     watch: {
@@ -146,11 +161,33 @@
     },
     created () {
       this.getSeriesInfo()
+    },
+    mounted () {
+      if (typeof window.IntersectionObserver === 'function') {
+        this.intersect = new IntersectionObserver(this.intersectCallback, {
+          threshold: [0, 1]
+        })
+
+        const banner = document.querySelector('#video-banner')
+        this.intersect.observe(banner)
+      }
+    },
+    beforeDestroy () {
+      if (this.intersect) {
+        const header = document.querySelector('header')
+        header.classList.remove('bg-animate')
+
+        this.intersect.disconnect()
+      }
     }
   }
 </script>
 
 <style scoped>
+  .collection-header {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
   .collection-header * {
     pointer-events: none;
   }
@@ -160,7 +197,7 @@
   }
 
   .video-banner {
-    height: 300px;
+    height: 364px;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
   }
@@ -169,8 +206,21 @@
     opacity: 0;
   }
 
+  .video-banner-height {
+    height: 364px;
+  }
+
+  .info-container {
+    margin-top: 150px;
+  }
+
   .series-title {
     text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
     margin-top: 5rem;
   }
+
+  .portrait-image {
+    width: 198px;
+    height: 298px;
+  }
 </style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 9acd1f6..c8f1808 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -22,11 +22,11 @@
       <form class="fr" @submit.prevent="loginMal" v-if="!malAuth.username">
         <input type="text" placeholder="Username" class="ph3 pv2" required v-model="malUsername" />
         <input type="password" placeholder="Password" class="ph3 pv2" required v-model="malPassword" />
-        <input type="submit" :value="malLoading ? 'Loading...' : 'Sign in'" class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br1 pointer f6 dib">
+        <input type="submit" :value="malLoading ? 'Loading...' : 'Sign in'" class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer f6 dib">
         <div class="red mt1" v-if="malError">Invalid username/password</div>
       </form>
       <div class="fr" v-else>
-        <button @click="logoutMal" class="fw6 ph3 pv2 ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br1 pointer f6 dib">Sign out</button>
+        <button @click="logoutMal" class="fw6 ph3 pv2 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer f6 dib">Sign out</button>
       </div>
     </div>
   </div>