4 files changed, 66 insertions, 28 deletions
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 5de0a457..5b078bc8 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -43,6 +43,16 @@ let fetch = (url, options) => {
   return oldfetch(fullUrl, options)
 }
 
+// from https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+let utoa = (str) => {
+  // first we use encodeURIComponent to get percent-encoded UTF-8,
+  // then we convert the percent encodings into raw bytes which
+  // can be fed into btoa.
+  return btoa(encodeURIComponent(str)
+              .replace(/%([0-9A-F]{2})/g,
+                       (match, p1) => { return String.fromCharCode('0x' + p1) }))
+}
+
 // Params
 // cropH
 // cropW
@@ -156,7 +166,7 @@ const register = (params) => {
 
 const authHeaders = (user) => {
   if (user && user.username && user.password) {
-    return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
+    return { 'Authorization': `Basic ${utoa(`${user.username}:${user.password}`)}` }
   } else {
     return { }
   }
@@ -281,6 +291,8 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
     url += `/${tag}.json`
   }
 
+  params.push(['count', 20])
+
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
 
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
new file mode 100644
index 00000000..13dd8979
--- /dev/null
+++ b/src/services/color_convert/color_convert.js
@@ -0,0 +1,34 @@
+import { map } from 'lodash'
+
+const rgb2hex = (r, g, b) => {
+  [r, g, b] = map([r, g, b], (val) => {
+    val = Math.ceil(val)
+    val = val < 0 ? 0 : val
+    val = val > 255 ? 255 : val
+    return val
+  })
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
+const hex2rgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null
+}
+
+const rgbstr2hex = (rgb) => {
+  if (rgb[0] === '#') {
+    return rgb
+  }
+  rgb = rgb.match(/\d+/g)
+  return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+}
+
+export {
+  rgb2hex,
+  hex2rgb,
+  rgbstr2hex
+}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 62296e79..6863bd0a 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,4 +1,5 @@
-import { times, map } from 'lodash'
+import { times } from 'lodash'
+import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -56,16 +57,6 @@ const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-const rgb2hex = (r, g, b) => {
-  [r, g, b] = map([r, g, b], (val) => {
-    val = Math.ceil(val)
-    val = val < 0 ? 0 : val
-    val = val > 255 ? 255 : val
-    return val
-  })
-  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
-}
-
 const setColors = (col, commit) => {
   const head = document.head
   const body = document.body
@@ -82,6 +73,7 @@ const setColors = (col, commit) => {
   if (isDark) {
     mod = mod * -1
   }
+
   colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
@@ -91,11 +83,13 @@ const setColors = (col, commit) => {
   colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
   colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
+  colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
 
-  times(9, (n) => {
-    const color = colors[`base0${8 - n}`]
-    styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
-    styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
+  const num = 10
+  times(num, (n) => {
+    const color = colors[`base0${num - 1 - n}`]
+    styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max')
+    styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max')
   })
 
   styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
@@ -108,15 +102,6 @@ const setColors = (col, commit) => {
   commit('setOption', { name: 'customTheme', value: col })
 }
 
-const hex2rgb = (hex) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
-}
-
 const setPreset = (val, commit) => {
   window.fetch('/static/styles.json')
     .then((data) => data.json())
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 6b76eb54..a4a80df0 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -29,12 +29,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
   args['tag'] = tag
 
   return apiService.fetchTimeline(args)
-    .then((statuses) => update({store, statuses, timeline, showImmediately}),
-      () => store.dispatch('setError', { value: true }))
+    .then((statuses) => {
+      if (!older && statuses.length >= 20) {
+        store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
+      }
+      update({store, statuses, timeline, showImmediately})
+    }, () => store.dispatch('setError', { value: true }))
 }
 
 const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
-  fetchAndUpdate({timeline, credentials, store, showImmediately: true, userId, tag})
+  const rootState = store.rootState || store.state
+  const timelineData = rootState.statuses.timelines[camelCase(timeline)]
+  const showImmediately = timelineData.visibleStatuses.length === 0
+  fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
   const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
   return setInterval(boundFetchAndUpdate, 10000)
 }