From 1f0eaceb5cb240e9663d824c56d275ba2e66f3c2 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Thu, 17 Jun 2021 11:18:09 +0800
Subject: [PATCH 01/19] Add hotness container to LiveItem.

---
 src/popup/components/live-item.vue | 63 +++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 03c042d..962ff7f 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -7,6 +7,9 @@
                    :alt="live['title']"
                    :fallback-src="defaultThumbnail"
         />
+        <div v-if="type === 'ended'" class="hotness">
+          <!--TODO: Generate graphs-->
+        </div>
         <div v-if="type === 'ended'" class="badge">{{ duration }}</div>
         <button v-if="type === 'scheduled' && isNtfEnabled"
                 type="button"
@@ -176,19 +179,60 @@
   }
 
   .thumbnail {
+    --duration: 0.2s;
     position: relative;
     grid-row-start: 1;
     grid-row-end: 4;
     align-self: start;
     overflow: hidden;
     height: 90px;
-    transition: opacity .2s ease-in-out;
+    transition: opacity var(--duration) ease-in-out;
 
     .cover {
       width: 100%;
       height: 100%;
     }
 
+    .hotness {
+      --height: 45px;
+    @property --height2 {
+      initial-value: var(--height);
+      inherits: false;
+      syntax: '<length>';
+    } @property --expandProgress {
+      initial-value: 0%;
+      inherits: false;
+      syntax: '<percentage>';
+    } position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: var(--height2, 0);
+      background: linear-gradient(to top, #000, #0000 var(--expandProgress, 100%));
+      transition: height var(--duration) ease-out;
+      animation: collapse var(--duration) 0s 1 ease-out forwards;
+
+      @keyframes expand {
+        from {
+          --expandProgress: 0%;
+        }
+
+        to {
+          --expandProgress: 100%;
+        }
+      }
+
+      @keyframes collapse {
+        from {
+          --expandProgress: 100%;
+        }
+
+        to {
+          --expandProgress: 0%;
+        }
+      }
+    }
+
     .badge, .remind {
       position: absolute;
       right: 4px;
@@ -200,6 +244,23 @@
       font-size: 12px;
     }
 
+    .badge {
+      transition: bottom var(--duration) ease-out;
+    }
+
+    &:hover {
+      --duration: 0.15s;
+
+      .hotness {
+        height: var(--height2, var(--height));
+        animation-name: expand;
+      }
+
+      .badge {
+        bottom: 68px;
+      }
+    }
+
     .remind {
       display: grid;
       grid-template-columns: auto;

From 54aae131db6ac43fa43690f7dff59c051d2a0158 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:39:36 +0800
Subject: [PATCH 02/19] Add store key HOTNESS.

---
 src/popup/store/index.js | 2 ++
 src/shared/store/keys.js | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/popup/store/index.js b/src/popup/store/index.js
index 2d224e7..e3303ae 100644
--- a/src/popup/store/index.js
+++ b/src/popup/store/index.js
@@ -3,6 +3,7 @@ import {
   APPEARANCE,
   CURRENT_LIVES,
   ENDED_LIVES,
+  HOTNESSES,
   IS_30_HOURS_ENABLED,
   IS_NTF_ENABLED,
   IS_POPUP_FIRST_RUN,
@@ -15,6 +16,7 @@ const store = createStore({
   [ENDED_LIVES]: [],
   [CURRENT_LIVES]: [],
   [SCHEDULED_LIVES]: [],
+  [HOTNESSES]: [],
   [IS_NTF_ENABLED]: false,
   [LOCALE]: 'en',
   [IS_POPUP_FIRST_RUN]: true,
diff --git a/src/shared/store/keys.js b/src/shared/store/keys.js
index 155ad21..525f648 100644
--- a/src/shared/store/keys.js
+++ b/src/shared/store/keys.js
@@ -2,6 +2,7 @@ export const ENDED_LIVES = 'endedLives'
 export const CURRENT_LIVES = 'currentLives'
 export const SCHEDULED_LIVES = 'scheduledLives'
 export const CHANNELS = 'channels'
+export const HOTNESSES = 'hotnesses'
 export const MEMBERS = 'members'
 export const SUBSCRIPTION_BY_MEMBER = 'subscriptionByMember'
 export const IS_NTF_ENABLED = 'isNtfEnabled'

From 6f115b5096be45707a745878af59792588fa4e64 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:41:01 +0800
Subject: [PATCH 03/19] Add normalize to utils.

---
 src/background/utils/index.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/background/utils/index.js b/src/background/utils/index.js
index d2733a0..3edb98f 100644
--- a/src/background/utils/index.js
+++ b/src/background/utils/index.js
@@ -1,5 +1,8 @@
 import dayjs from 'dayjs'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import { clamp } from 'lodash'
+
+const { min, max } = Math
 
 dayjs.extend(isSameOrAfter)
 
@@ -13,4 +16,20 @@ const isGuerrillaLive = live => dayjs(live['created_at'])
   .add(10, 'minute')
   .isSameOrAfter(dayjs(live['start_at']))
 
-export { getUnixAfterDays, getUnixBeforeDays, getUnix, isGuerrillaLive }
+const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
+  const filteredValues = accu.map(({ [key]: value }) => value).map(Number).filter(Boolean)
+  const minValue = min(...filteredValues)
+  const maxValue = max(...filteredValues)
+  return accu.map(object => ({
+    ...object,
+    [key]: (clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue),
+  }))
+}, arrayOfObjects)
+
+export {
+  getUnixAfterDays,
+  getUnixBeforeDays,
+  getUnix,
+  isGuerrillaLive,
+  normalize,
+}

From 5c995a01bb3e1f7892cc3de3276545d0576e5b3c Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:41:54 +0800
Subject: [PATCH 04/19] Modify pagedItemsFetcher to support custom search
 params.

---
 src/background/requests.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/background/requests.js b/src/background/requests.js
index 9adb530..29d97fd 100644
--- a/src/background/requests.js
+++ b/src/background/requests.js
@@ -29,11 +29,12 @@ const fetchData = async (...args) => {
   return gatherResponse(response)
 }
 
-async function* pagedItemsFetcher(endpoint, params = {}) {
+async function* pagedItemsFetcher(endpoint, params = {}, paramEntries = []) {
   const safeParams = mapKeys(params, (_, key) => snakeCase(key))
   const { limit = 50 } = safeParams
 
   const searchParams = new URLSearchParams({ limit, ...safeParams })
+  paramEntries.forEach(entry => searchParams.append(...entry))
 
   let page = 0
   let shouldContinue = true

From 7109b3fb05211ec95db70a3fa7c0851dae1f01ec Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:42:13 +0800
Subject: [PATCH 05/19] Add getHotnessesOfLives to requests.

---
 src/background/requests.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/background/requests.js b/src/background/requests.js
index 29d97fd..4b63748 100644
--- a/src/background/requests.js
+++ b/src/background/requests.js
@@ -73,6 +73,10 @@ const getEndedLives = async params => {
 
 const getOpenLives = params => gatherPagedItems('lives/open', params)
 
+const getHotnessesOfLives = (lives, params) => (lives.length
+  ? gatherPagedItems('hotnesses', params, lives.map(({ id }) => ['lives[]', id]))
+  : {})
+
 const getChannels = () => gatherPagedItems('channels', { limit: 100 })
 
 const getMembers = () => fetchData(`${TARGET}api/v1/members`)
@@ -80,6 +84,7 @@ const getMembers = () => fetchData(`${TARGET}api/v1/members`)
 export {
   getEndedLives,
   getOpenLives,
+  getHotnessesOfLives,
   getChannels,
   getMembers,
   onSuccessRequest,

From 16c0b336e519036c91ed77f595176c84b4dcb447 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:50:50 +0800
Subject: [PATCH 06/19] Add workflow syncHotnessesOfLives.

---
 src/background/workflows/index.js | 47 +++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index c01b811..0a77778 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -1,19 +1,30 @@
 import dayjs from 'dayjs'
 import {
+  at,
   differenceBy,
   filter,
   findLastIndex,
+  groupBy,
+  keyBy,
+  mapValues,
   partition,
   range,
   reverse,
   uniqBy,
 } from 'lodash'
-import { getChannels, getEndedLives, getMembers, getOpenLives } from 'requests'
+import {
+  getChannels,
+  getOpenLives,
+  getEndedLives,
+  getHotnessesOfLives,
+  getMembers,
+} from 'requests'
 import {
   APPEARANCE,
   CHANNELS,
   CURRENT_LIVES,
   ENDED_LIVES,
+  HOTNESSES,
   IS_30_HOURS_ENABLED,
   IS_NTF_ENABLED,
   IS_POPUP_FIRST_RUN,
@@ -24,9 +35,11 @@ import {
   SUBSCRIPTION_BY_MEMBER,
 } from 'shared/store/keys'
 import store from 'store'
-import { getUnix, getUnixAfterDays, getUnixBeforeDays } from 'utils'
+import { getUnix, getUnixAfterDays, getUnixBeforeDays, normalize } from 'utils'
 import browser from 'webextension-polyfill'
 
+const { min, max, floor } = Math
+
 const filterByTitle = lives => filter(
   lives,
   live => {
@@ -61,7 +74,7 @@ const getCachedEndedLives = () => store.get(ENDED_LIVES)
 
 const syncEndedLives = async () => {
   const cashedLives = getCachedEndedLives() ?? []
-  const startBefore = cashedLives.length ? Math.min(
+  const startBefore = cashedLives.length ? min(
     ...cashedLives.map(({ start_at: startAt }) => getUnix(startAt)),
   ) + 1 : getUnix()
 
@@ -119,6 +132,33 @@ const syncOpenLives = async () => {
   return [...currentLives, ...scheduledLives]
 }
 
+const SAMPLES_COUNT = 61
+const syncHotnessesOfLives = async lives => {
+  const startAtByLiveId = mapValues(keyBy(lives, 'id'), live => dayjs(live['start_at']))
+
+  const hotnessesByLiveId = mapValues(
+    groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id'),
+    (hotnesses, liveId) => normalize(normalize(at(
+      hotnesses, range(
+        hotnesses.length * 0.08, hotnesses.length, max(1, hotnesses.length / SAMPLES_COUNT),
+      ).map(floor),
+    ).map(({ created_at: createdAt, like, watching }, index, records) => ({
+      timestamp: dayjs(createdAt).diff(startAtByLiveId[liveId], 'second'),
+      likeDelta: max((like ?? 0) - (records[max(index - 1, 0)]['like'] ?? 0), 0),
+      watching,
+    })), 'timestamp', 'likeDelta', 'watching').map(
+      ({ timestamp, likeDelta, watching }) => ({
+        timestamp,
+        hotness: likeDelta * watching,
+      }),
+    ), 'hotness').map(({ timestamp, hotness }) => [timestamp, hotness ** 0.33]),
+  )
+
+  // console.log({ hotnessesByLiveId, cachedHotnesses })
+
+  await store.set({ [HOTNESSES]: { ...store.get(HOTNESSES), ...hotnessesByLiveId } })
+}
+
 const getCachedChannels = () => store.get(CHANNELS)
 
 const syncChannels = async () => {
@@ -221,6 +261,7 @@ export default {
   clearCachedEndedLives,
   getCachedScheduledLives,
   syncOpenLives,
+  syncHotnessesOfLives,
   getCachedChannels,
   syncChannels,
   getCachedMembers,

From 081f6ab25792a4494338f7018aca92d67255fc43 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 17:51:30 +0800
Subject: [PATCH 07/19] Trigger syncHotnessesOfLives on the change of ended
 lives.

---
 src/background/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/background/index.js b/src/background/index.js
index 46d5125..1649131 100644
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -1,6 +1,8 @@
 import alarm from 'alarm'
 import i18n from 'i18n'
+import { differenceBy } from 'lodash'
 import * as requests from 'requests'
+import { ENDED_LIVES } from 'shared/store/keys'
 import store from 'store'
 import { getUnix } from 'utils'
 import browser from 'webextension-polyfill'
@@ -42,6 +44,10 @@ const initOnce = async () => {
     lastSuccessRequestTime = timestamp
   })
 
+  store.subscribe(ENDED_LIVES, async (lives, prevLives) => workflows.syncHotnessesOfLives(
+    differenceBy(lives, prevLives, 'id'),
+  ))
+
   browser.alarms.onAlarm.addListener(handleAlarm)
   browser.alarms.create(ALARM_NAME, { periodInMinutes: 1 })
 }

From 7cce725668a7926a77aa8a74732cc8f5b968a31c Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 19 Jun 2021 18:07:00 +0800
Subject: [PATCH 08/19] Draw hotnesses with clip-path.

---
 src/popup/components/live-item.vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 962ff7f..77c1478 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -7,8 +7,17 @@
                    :alt="live['title']"
                    :fallback-src="defaultThumbnail"
         />
-        <div v-if="type === 'ended'" class="hotness">
-          <!--TODO: Generate graphs-->
+        <div v-if="type === 'ended'" class="hotness" :style="{'--pth': `url(#clip-${live['id']})`}">
+          <svg width="0" height="0">
+            <defs>
+              <clipPath :id="`clip-${live['id']}`" clipPathUnits="objectBoundingBox">
+                <path :d="`M0 1 ${hotnessByTimeEntries.map(
+                  ([ timeRatio, hotness ]) => [timeRatio, 0.9 * (1 - hotness)],
+                ).flat().join(' ')} 1 1Z`"
+                />
+              </clipPath>
+            </defs>
+          </svg>
         </div>
         <div v-if="type === 'ended'" class="badge">{{ duration }}</div>
         <button v-if="type === 'scheduled' && isNtfEnabled"
@@ -59,7 +68,7 @@
   import calendar from 'dayjs/plugin/calendar'
   import relativeTime from 'dayjs/plugin/relativeTime'
   import HIcon from 'shared/components/h-icon'
-  import { IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
+  import { HOTNESSES, IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
   import { constructRoomUrl } from 'shared/utils'
   import { formatDurationFromSeconds } from 'utils'
   import { liveTypeValidator } from 'validators'
@@ -103,6 +112,9 @@
       member() {
         return getMember(this.live)
       },
+      hotnessByTimeEntries() {
+        return this.hotnesses[this.live.id] ?? []
+      },
       roomURL() {
         return constructRoomUrl(this.live) ?? '#'
       },
@@ -137,6 +149,7 @@
       ...mapState({
         isNtfEnabled: IS_NTF_ENABLED,
         is30HoursEnabled: IS_30_HOURS_ENABLED,
+        hotnesses: HOTNESSES,
       }),
     },
     methods: {
@@ -231,6 +244,17 @@
           --expandProgress: 0%;
         }
       }
+
+      &:before {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: -1px;
+        left: 0;
+        height: 66%;
+        background: linear-gradient(to top, #8888, #dddd);
+        clip-path: var(--pth);
+      }
     }
 
     .badge, .remind {

From 69e6e9b278f9e5057818f3d84d13130b0d021023 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Wed, 23 Jun 2021 10:24:40 +0800
Subject: [PATCH 09/19] Provide fallback value for normalize.

---
 src/background/utils/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/background/utils/index.js b/src/background/utils/index.js
index 3edb98f..1ae06d6 100644
--- a/src/background/utils/index.js
+++ b/src/background/utils/index.js
@@ -1,8 +1,6 @@
 import dayjs from 'dayjs'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
-import { clamp } from 'lodash'
-
-const { min, max } = Math
+import { clamp, max, min } from 'lodash'
 
 dayjs.extend(isSameOrAfter)
 
@@ -17,12 +15,14 @@ const isGuerrillaLive = live => dayjs(live['created_at'])
   .isSameOrAfter(dayjs(live['start_at']))
 
 const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
-  const filteredValues = accu.map(({ [key]: value }) => value).map(Number).filter(Boolean)
-  const minValue = min(...filteredValues)
-  const maxValue = max(...filteredValues)
+  const filteredValues = accu.map(({ [key]: value }) => value).filter(Boolean)
+  const minValue = min(filteredValues)
+  const maxValue = max(filteredValues)
   return accu.map(object => ({
     ...object,
-    [key]: (clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue),
+    [key]: filteredValues.length
+      ? ((clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue))
+      : 1,
   }))
 }, arrayOfObjects)
 

From 0e8079dc2f5d183ba63dbd1e5106472313d4dfee Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Wed, 23 Jun 2021 11:18:00 +0800
Subject: [PATCH 10/19] Add animation to hotness.

---
 src/popup/components/live-item.vue | 204 ++++++++++++++++++++---------
 1 file changed, 141 insertions(+), 63 deletions(-)

diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 77c1478..f41f4d6 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -1,25 +1,91 @@
 <template>
   <li ref="item">
     <a class="item" :href="roomURL" target="_blank">
-      <div class="thumbnail">
+      <div class="thumbnail" :class="{hotnessAvailable: !!hotnessByTimeEntries.length}">
         <LazyImage class="cover"
                    :src="live['cover']"
                    :alt="live['title']"
                    :fallback-src="defaultThumbnail"
         />
-        <div v-if="type === 'ended'" class="hotness" :style="{'--pth': `url(#clip-${live['id']})`}">
-          <svg width="0" height="0">
+        <div v-if="type === 'ended'" class="badge">{{ duration }}</div>
+        <div v-if="type === 'ended'" class="hotness">
+          <svg :id="`svg_${live['id']}`" viewBox="0 0 1 0.16" preserveAspectRatio="none">
             <defs>
-              <clipPath :id="`clip-${live['id']}`" clipPathUnits="objectBoundingBox">
-                <path :d="`M0 1 ${hotnessByTimeEntries.map(
-                  ([ timeRatio, hotness ]) => [timeRatio, 0.9 * (1 - hotness)],
-                ).flat().join(' ')} 1 1Z`"
-                />
+              <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="50%" style="stop-color:hsl(157, 72%, 65%)" />
+                <stop offset="100%" style="stop-color:hsl(178, 63%, 55%)" />
+              </linearGradient>
+              <clipPath :id="`clip_outer_${live['id']}`" clipPathUnits="objectBoundingBox">
+                <path d="M0 0 0 0 0 1 0 1">
+                  <animate attributeName="d"
+                           to="M0 0 1 0 1 1 0 1"
+                           :begin="`svg_${live['id']}.mouseenter + 0.4s`"
+                           dur="0.2s"
+                           fill="freeze"
+                  />
+                  <animate attributeName="d"
+                           to="M0 0 0 0 0 1 0 1"
+                           :begin="`svg_${live['id']}.mouseleave + 0.1s`"
+                           dur="0.2s"
+                           fill="freeze"
+                  />
+                </path>
+              </clipPath>
+              <clipPath :id="`clip_inner_${live['id']}`" clipPathUnits="objectBoundingBox">
+                <polygon :points="points" />
               </clipPath>
             </defs>
+            <g transform="scale(1, 1)" style="transform-origin: bottom">
+              <animateTransform attributeName="transform"
+                                type="scale"
+                                to="1, 2"
+                                :begin="`rect_${live['id']}.mouseenter`"
+                                dur="0.2s"
+                                fill="freeze"
+              />
+              <animateTransform attributeName="transform"
+                                type="scale"
+                                to="1, 1"
+                                :begin="`rect_${live['id']}.mouseleave`"
+                                dur="0.2s"
+                                fill="freeze"
+              />
+              <g :clip-path="`url(#clip_outer_${live['id']})`">
+                <g :clip-path="`url(#clip_inner_${live['id']})`">
+                  <rect x="0" y="0.08" width="1" height="0.08" fill="url(#gradient)" />
+                  <rect :x="highlight"
+                        y="0.08"
+                        width="0.00625"
+                        height="0.08"
+                        fill="white"
+                        opacity="0"
+                  >
+                    <animate attributeName="opacity"
+                             to="1"
+                             :begin="`rect_${live['id']}.mouseenter`"
+                             dur="0.1s"
+                             fill="freeze"
+                    />
+                    <animate attributeName="opacity"
+                             to="0"
+                             :begin="`rect_${live['id']}.mouseleave`"
+                             dur="0.1s"
+                             fill="freeze"
+                    />
+                  </rect>
+                </g>
+              </g>
+              <rect :id="`rect_${live['id']}`"
+                    x="0"
+                    y="0.08"
+                    width="1"
+                    height="0.08"
+                    fill="transparent"
+                    @mousemove="handleMousemove"
+              />
+            </g>
           </svg>
         </div>
-        <div v-if="type === 'ended'" class="badge">{{ duration }}</div>
         <button v-if="type === 'scheduled' && isNtfEnabled"
                 type="button"
                 :class="['remind', {active: isScheduled}]"
@@ -100,6 +166,7 @@
     data() {
       return {
         alarmCacheFlag: Date.now(),
+        highlight: null,
       }
     },
     computed: {
@@ -113,12 +180,18 @@
         return getMember(this.live)
       },
       hotnessByTimeEntries() {
-        return this.hotnesses[this.live.id] ?? []
+        return this.hotnesses[this.live['id']] ?? []
+      },
+      points() {
+        return this.hotnessByTimeEntries.map(
+          ([timeRatio, hotness]) => [timeRatio, (1 - hotness) * 0.84],
+        ).concat(1, 1, 0, 1).flat().join(' ')
       },
       roomURL() {
         return constructRoomUrl(this.live) ?? '#'
       },
       duration() {
+        // TODO: Prefer this.highlight
         return formatDurationFromSeconds(this.live['duration'])
       },
       startAt() {
@@ -164,6 +237,9 @@
         }
         this.alarmCacheFlag = Date.now()
       },
+      handleMousemove({ offsetX }) {
+        this.highlight = offsetX / 160
+      },
     },
   }
 </script>
@@ -192,68 +268,38 @@
   }
 
   .thumbnail {
-    --duration: 0.2s;
     position: relative;
     grid-row-start: 1;
     grid-row-end: 4;
     align-self: start;
     overflow: hidden;
     height: 90px;
-    transition: opacity var(--duration) ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 
     .cover {
       width: 100%;
       height: 100%;
+      transition: transform 0.3s ease-out, box-shadow 0.2s ease-in;
     }
 
     .hotness {
-      --height: 45px;
-    @property --height2 {
-      initial-value: var(--height);
-      inherits: false;
-      syntax: '<length>';
-    } @property --expandProgress {
-      initial-value: 0%;
-      inherits: false;
-      syntax: '<percentage>';
-    } position: absolute;
+      position: absolute;
+      top: 0;
       right: 0;
       bottom: 0;
       left: 0;
-      height: var(--height2, 0);
-      background: linear-gradient(to top, #000, #0000 var(--expandProgress, 100%));
-      transition: height var(--duration) ease-out;
-      animation: collapse var(--duration) 0s 1 ease-out forwards;
-
-      @keyframes expand {
-        from {
-          --expandProgress: 0%;
-        }
-
-        to {
-          --expandProgress: 100%;
-        }
-      }
-
-      @keyframes collapse {
-        from {
-          --expandProgress: 100%;
-        }
-
-        to {
-          --expandProgress: 0%;
-        }
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        right: 0;
-        bottom: -1px;
-        left: 0;
-        height: 66%;
-        background: linear-gradient(to top, #8888, #dddd);
-        clip-path: var(--pth);
+      outline: 0 solid hsl(157, 72%, 65%);
+      outline-offset: 0;
+      transition: all 0.1s ease-in;
+
+      svg {
+        --height: 50px;
+        position: relative;
+        box-sizing: content-box;
+        width: 100%;
+        height: var(--height);
+        border-top: 90px solid transparent;
+        transition: border-top-width 0.3s;
       }
     }
 
@@ -268,20 +314,52 @@
       font-size: 12px;
     }
 
-    .badge {
-      transition: bottom var(--duration) ease-out;
+    &:hover .cover {
+      transform: scale(1.05);
     }
 
-    &:hover {
-      --duration: 0.15s;
+    &.hotnessAvailable:hover {
+      .cover {
+        box-shadow: inset 0 0 15px 7px #0006;
+        transition: transform 0.3s ease-out, box-shadow 0.4s ease-in;
+      }
 
       .hotness {
-        height: var(--height2, var(--height));
-        animation-name: expand;
+        outline-width: 4px;
+        outline-offset: -4px;
+        filter: drop-shadow(0px 0px 5px black);
+        transition: all 0.1s 0.4s ease-in;
+
+        svg {
+          border-top-width: calc(90px - var(--height));
+          transition: border-top-width 0s 0.4s;
+        }
       }
 
       .badge {
-        bottom: 68px;
+        animation: badge-out 0.3s 0.1s ease-out, badge-in 0.2s 0.4s ease-in forwards;
+
+        @keyframes badge-out {
+          to {
+            bottom: 4px;
+            opacity: 0;
+            transform: translate(15%, 25%);
+          }
+        }
+        @keyframes badge-in {
+          from {
+            top: 4px;
+            bottom: unset;
+            opacity: 0;
+            transform: translate(15%, -25%);
+          }
+          to {
+            top: 4px;
+            bottom: unset;
+            opacity: 1;
+            transform: translate(0, 0);
+          }
+        }
       }
     }
 

From 895b201866b53e118fd51645c9141bcf4b962529 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Thu, 24 Jun 2021 23:34:22 +0800
Subject: [PATCH 11/19] Update the range of samples in workflow
 syncHotnessesOfLives.

---
 src/background/workflows/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index 0a77778..0a74480 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -140,7 +140,7 @@ const syncHotnessesOfLives = async lives => {
     groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id'),
     (hotnesses, liveId) => normalize(normalize(at(
       hotnesses, range(
-        hotnesses.length * 0.08, hotnesses.length, max(1, hotnesses.length / SAMPLES_COUNT),
+        0, hotnesses.length - 0.1, max(1, hotnesses.length / SAMPLES_COUNT),
       ).map(floor),
     ).map(({ created_at: createdAt, like, watching }, index, records) => ({
       timestamp: dayjs(createdAt).diff(startAtByLiveId[liveId], 'second'),

From b6e5d50022c26e08e542073eefe10082d4487c3a Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Thu, 24 Jun 2021 23:37:08 +0800
Subject: [PATCH 12/19] Highlight a time when constructRoomUrl.

---
 src/shared/utils/index.js      | 4 ++--
 src/shared/utils/index.test.js | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/shared/utils/index.js b/src/shared/utils/index.js
index c5117e4..45c70d1 100644
--- a/src/shared/utils/index.js
+++ b/src/shared/utils/index.js
@@ -1,5 +1,5 @@
-const constructRoomUrl = ({ platform, room }) => ({
-  youtube: `https://www.youtube.com/watch?v=${room}`,
+const constructRoomUrl = ({ platform, room, time }) => ({
+  youtube: `https://www.youtube.com/watch?v=${room}${time ? `&t=${time}` : ''}`,
   bilibili: `https://live.bilibili.com/${room}`,
   twitch: `https://www.twitch.tv/${room}`,
   twitcasting: `https://twitcasting.tv/${room}`,
diff --git a/src/shared/utils/index.test.js b/src/shared/utils/index.test.js
index c328ed4..2df5aa2 100644
--- a/src/shared/utils/index.test.js
+++ b/src/shared/utils/index.test.js
@@ -4,8 +4,10 @@ test('should construct room url', () => {
   const liveOne = { platform: 'youtube', room: 'NewRoom' }
   const liveTwo = { platform: 'bilibili', room: 'NewRoom' }
   const liveThree = { platform: 'unknown', room: 'NewRoom' }
+  const liveFour = { platform: 'youtube', room: 'NewRoom', time: 300 }
 
   expect(constructRoomUrl(liveOne)).toEqual(`https://www.youtube.com/watch?v=${liveOne.room}`)
   expect(constructRoomUrl(liveTwo)).toEqual(`https://live.bilibili.com/${liveTwo.room}`)
   expect(constructRoomUrl(liveThree)).toEqual(undefined)
+  expect(constructRoomUrl(liveFour)).toEqual(`https://www.youtube.com/watch?v=${liveFour.room}&t=${liveFour.time}`)
 })

From 656101651905c81fccd99c8e943399c1d1eea3c1 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Thu, 24 Jun 2021 23:38:48 +0800
Subject: [PATCH 13/19] Prefer highlight time when displaying duration.

---
 src/background/workflows/index.js  | 10 ++++++----
 src/popup/components/live-item.vue | 26 +++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index 0a74480..aa2b7ed 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -143,15 +143,17 @@ const syncHotnessesOfLives = async lives => {
         0, hotnesses.length - 0.1, max(1, hotnesses.length / SAMPLES_COUNT),
       ).map(floor),
     ).map(({ created_at: createdAt, like, watching }, index, records) => ({
+      createdAt,
       timestamp: dayjs(createdAt).diff(startAtByLiveId[liveId], 'second'),
       likeDelta: max((like ?? 0) - (records[max(index - 1, 0)]['like'] ?? 0), 0),
       watching,
     })), 'timestamp', 'likeDelta', 'watching').map(
-      ({ timestamp, likeDelta, watching }) => ({
-        timestamp,
-        hotness: likeDelta * watching,
+      ({ likeDelta, watching, ...fields }) => ({
+        hotness: likeDelta * watching, ...fields,
       }),
-    ), 'hotness').map(({ timestamp, hotness }) => [timestamp, hotness ** 0.33]),
+    ), 'hotness').map(
+      ({ timestamp, hotness, createdAt }) => [createdAt, [timestamp, hotness]],
+    ),
   )
 
   // console.log({ hotnessesByLiveId, cachedHotnesses })
diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index f41f4d6..2821d63 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -82,6 +82,7 @@
                     height="0.08"
                     fill="transparent"
                     @mousemove="handleMousemove"
+                    @mouseout="handleMouseout"
               />
             </g>
           </svg>
@@ -133,6 +134,7 @@
   import advancedFormat from 'dayjs/plugin/advancedFormat'
   import calendar from 'dayjs/plugin/calendar'
   import relativeTime from 'dayjs/plugin/relativeTime'
+  import { floor, isNull, max, min } from 'lodash'
   import HIcon from 'shared/components/h-icon'
   import { HOTNESSES, IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
   import { constructRoomUrl } from 'shared/utils'
@@ -179,20 +181,31 @@
       member() {
         return getMember(this.live)
       },
+      roomURL() {
+        return constructRoomUrl({ ...this.live, time: this.hotnessDuration }) ?? '#'
+      },
       hotnessByTimeEntries() {
         return this.hotnesses[this.live['id']] ?? []
       },
       points() {
         return this.hotnessByTimeEntries.map(
-          ([timeRatio, hotness]) => [timeRatio, (1 - hotness) * 0.84],
+          ([, [timeRatio, hotness]]) => [timeRatio, (1 - hotness ** 0.33) * 0.84],
         ).concat(1, 1, 0, 1).flat().join(' ')
       },
-      roomURL() {
-        return constructRoomUrl(this.live) ?? '#'
+      hotnessDuration() {
+        if (isNull(this.highlight)) {
+          return null
+        }
+
+        const createdAts = this.hotnessByTimeEntries.map(([createdAt]) => createdAt)
+        return floor(this.highlight * dayjs(max(createdAts)).diff(min(createdAts), 'second'))
+          + dayjs(min(createdAts)).diff(this.live['start_at'], 'second')
       },
       duration() {
-        // TODO: Prefer this.highlight
-        return formatDurationFromSeconds(this.live['duration'])
+        const lDur = formatDurationFromSeconds(this.live['duration'])
+        const hDur = formatDurationFromSeconds(this.hotnessDuration)
+
+        return this.hotnessDuration ? (lDur.slice(0, lDur.length - hDur.length).replace(/\d/g, '0') + hDur) : lDur
       },
       startAt() {
         return dayjs(this.live['start_at']).startHour(this.is30HoursEnabled ? 6 : 0)
@@ -240,6 +253,9 @@
       handleMousemove({ offsetX }) {
         this.highlight = offsetX / 160
       },
+      handleMouseout() {
+        this.highlight = null
+      },
     },
   }
 </script>

From b428da37fd9436e6b3edfa2bdd3b960b4f610b62 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sat, 26 Jun 2021 18:58:20 +0800
Subject: [PATCH 14/19] Prefer hotnesses in live.

---
 src/background/index.js            |  6 ++--
 src/background/utils/index.js      | 14 --------
 src/background/workflows/index.js  | 53 +++++++++++-------------------
 src/popup/components/live-item.vue | 17 +++++-----
 src/popup/store/index.js           |  2 --
 src/popup/utils/index.js           | 42 +++++++++++++++++++++--
 src/shared/store/keys.js           |  1 -
 7 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/background/index.js b/src/background/index.js
index 1649131..33aca7d 100644
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -1,6 +1,6 @@
 import alarm from 'alarm'
 import i18n from 'i18n'
-import { differenceBy } from 'lodash'
+import { differenceBy, reject } from 'lodash'
 import * as requests from 'requests'
 import { ENDED_LIVES } from 'shared/store/keys'
 import store from 'store'
@@ -44,8 +44,8 @@ const initOnce = async () => {
     lastSuccessRequestTime = timestamp
   })
 
-  store.subscribe(ENDED_LIVES, async (lives, prevLives) => workflows.syncHotnessesOfLives(
-    differenceBy(lives, prevLives, 'id'),
+  store.subscribe(ENDED_LIVES, async (lives, prevLives) => workflows.syncHotnesses(
+    reject(differenceBy(lives, prevLives, 'id'), 'hotnesses'),
   ))
 
   browser.alarms.onAlarm.addListener(handleAlarm)
diff --git a/src/background/utils/index.js b/src/background/utils/index.js
index 1ae06d6..c8e941c 100644
--- a/src/background/utils/index.js
+++ b/src/background/utils/index.js
@@ -1,6 +1,5 @@
 import dayjs from 'dayjs'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
-import { clamp, max, min } from 'lodash'
 
 dayjs.extend(isSameOrAfter)
 
@@ -14,22 +13,9 @@ const isGuerrillaLive = live => dayjs(live['created_at'])
   .add(10, 'minute')
   .isSameOrAfter(dayjs(live['start_at']))
 
-const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
-  const filteredValues = accu.map(({ [key]: value }) => value).filter(Boolean)
-  const minValue = min(filteredValues)
-  const maxValue = max(filteredValues)
-  return accu.map(object => ({
-    ...object,
-    [key]: filteredValues.length
-      ? ((clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue))
-      : 1,
-  }))
-}, arrayOfObjects)
-
 export {
   getUnixAfterDays,
   getUnixBeforeDays,
   getUnix,
   isGuerrillaLive,
-  normalize,
 }
diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index aa2b7ed..e0362a0 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -1,12 +1,9 @@
 import dayjs from 'dayjs'
 import {
-  at,
   differenceBy,
   filter,
   findLastIndex,
   groupBy,
-  keyBy,
-  mapValues,
   partition,
   range,
   reverse,
@@ -24,7 +21,6 @@ import {
   CHANNELS,
   CURRENT_LIVES,
   ENDED_LIVES,
-  HOTNESSES,
   IS_30_HOURS_ENABLED,
   IS_NTF_ENABLED,
   IS_POPUP_FIRST_RUN,
@@ -35,11 +31,9 @@ import {
   SUBSCRIPTION_BY_MEMBER,
 } from 'shared/store/keys'
 import store from 'store'
-import { getUnix, getUnixAfterDays, getUnixBeforeDays, normalize } from 'utils'
+import { getUnix, getUnixAfterDays, getUnixBeforeDays } from 'utils'
 import browser from 'webextension-polyfill'
 
-const { min, max, floor } = Math
-
 const filterByTitle = lives => filter(
   lives,
   live => {
@@ -74,7 +68,7 @@ const getCachedEndedLives = () => store.get(ENDED_LIVES)
 
 const syncEndedLives = async () => {
   const cashedLives = getCachedEndedLives() ?? []
-  const startBefore = cashedLives.length ? min(
+  const startBefore = cashedLives.length ? Math.min(
     ...cashedLives.map(({ start_at: startAt }) => getUnix(startAt)),
   ) + 1 : getUnix()
 
@@ -132,33 +126,24 @@ const syncOpenLives = async () => {
   return [...currentLives, ...scheduledLives]
 }
 
-const SAMPLES_COUNT = 61
-const syncHotnessesOfLives = async lives => {
-  const startAtByLiveId = mapValues(keyBy(lives, 'id'), live => dayjs(live['start_at']))
-
-  const hotnessesByLiveId = mapValues(
-    groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id'),
-    (hotnesses, liveId) => normalize(normalize(at(
-      hotnesses, range(
-        0, hotnesses.length - 0.1, max(1, hotnesses.length / SAMPLES_COUNT),
-      ).map(floor),
-    ).map(({ created_at: createdAt, like, watching }, index, records) => ({
-      createdAt,
-      timestamp: dayjs(createdAt).diff(startAtByLiveId[liveId], 'second'),
-      likeDelta: max((like ?? 0) - (records[max(index - 1, 0)]['like'] ?? 0), 0),
-      watching,
-    })), 'timestamp', 'likeDelta', 'watching').map(
-      ({ likeDelta, watching, ...fields }) => ({
-        hotness: likeDelta * watching, ...fields,
-      }),
-    ), 'hotness').map(
-      ({ timestamp, hotness, createdAt }) => [createdAt, [timestamp, hotness]],
-    ),
-  )
+const syncHotnesses = async lives => {
+  if (lives.length === 0) {
+    return
+  }
+
+  const hotnessesByLiveId = groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id')
 
-  // console.log({ hotnessesByLiveId, cachedHotnesses })
+  console.log({ hotnessesByLiveId })
 
-  await store.set({ [HOTNESSES]: { ...store.get(HOTNESSES), ...hotnessesByLiveId } })
+  await store.set({
+    [ENDED_LIVES]: (getCachedEndedLives() ?? []).map(live => {
+      if (live['id'] in hotnessesByLiveId) {
+        return { ...live, hotnesses: hotnessesByLiveId[live['id']] }
+      }
+
+      return live
+    }),
+  })
 }
 
 const getCachedChannels = () => store.get(CHANNELS)
@@ -263,7 +248,7 @@ export default {
   clearCachedEndedLives,
   getCachedScheduledLives,
   syncOpenLives,
-  syncHotnessesOfLives,
+  syncHotnesses,
   getCachedChannels,
   syncChannels,
   getCachedMembers,
diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 2821d63..c17de73 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -1,7 +1,7 @@
 <template>
   <li ref="item">
     <a class="item" :href="roomURL" target="_blank">
-      <div class="thumbnail" :class="{hotnessAvailable: !!hotnessByTimeEntries.length}">
+      <div class="thumbnail" :data-hotnesses-size="hotnessSamples.length">
         <LazyImage class="cover"
                    :src="live['cover']"
                    :alt="live['title']"
@@ -136,9 +136,9 @@
   import relativeTime from 'dayjs/plugin/relativeTime'
   import { floor, isNull, max, min } from 'lodash'
   import HIcon from 'shared/components/h-icon'
-  import { HOTNESSES, IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
+  import { IS_30_HOURS_ENABLED, IS_NTF_ENABLED } from 'shared/store/keys'
   import { constructRoomUrl } from 'shared/utils'
-  import { formatDurationFromSeconds } from 'utils'
+  import { formatDurationFromSeconds, sampleHotnesses } from 'utils'
   import { liveTypeValidator } from 'validators'
   import { mapState } from 'vuex'
   import browser from 'webextension-polyfill'
@@ -184,11 +184,11 @@
       roomURL() {
         return constructRoomUrl({ ...this.live, time: this.hotnessDuration }) ?? '#'
       },
-      hotnessByTimeEntries() {
-        return this.hotnesses[this.live['id']] ?? []
+      hotnessSamples() {
+        return sampleHotnesses(this.live, 61)
       },
       points() {
-        return this.hotnessByTimeEntries.map(
+        return this.hotnessSamples.map(
           ([, [timeRatio, hotness]]) => [timeRatio, (1 - hotness ** 0.33) * 0.84],
         ).concat(1, 1, 0, 1).flat().join(' ')
       },
@@ -197,7 +197,7 @@
           return null
         }
 
-        const createdAts = this.hotnessByTimeEntries.map(([createdAt]) => createdAt)
+        const createdAts = this.hotnessSamples.map(([createdAt]) => createdAt)
         return floor(this.highlight * dayjs(max(createdAts)).diff(min(createdAts), 'second'))
           + dayjs(min(createdAts)).diff(this.live['start_at'], 'second')
       },
@@ -235,7 +235,6 @@
       ...mapState({
         isNtfEnabled: IS_NTF_ENABLED,
         is30HoursEnabled: IS_30_HOURS_ENABLED,
-        hotnesses: HOTNESSES,
       }),
     },
     methods: {
@@ -334,7 +333,7 @@
       transform: scale(1.05);
     }
 
-    &.hotnessAvailable:hover {
+    &:not([data-hotnesses-size="0"]):hover {
       .cover {
         box-shadow: inset 0 0 15px 7px #0006;
         transition: transform 0.3s ease-out, box-shadow 0.4s ease-in;
diff --git a/src/popup/store/index.js b/src/popup/store/index.js
index e3303ae..2d224e7 100644
--- a/src/popup/store/index.js
+++ b/src/popup/store/index.js
@@ -3,7 +3,6 @@ import {
   APPEARANCE,
   CURRENT_LIVES,
   ENDED_LIVES,
-  HOTNESSES,
   IS_30_HOURS_ENABLED,
   IS_NTF_ENABLED,
   IS_POPUP_FIRST_RUN,
@@ -16,7 +15,6 @@ const store = createStore({
   [ENDED_LIVES]: [],
   [CURRENT_LIVES]: [],
   [SCHEDULED_LIVES]: [],
-  [HOTNESSES]: [],
   [IS_NTF_ENABLED]: false,
   [LOCALE]: 'en',
   [IS_POPUP_FIRST_RUN]: true,
diff --git a/src/popup/utils/index.js b/src/popup/utils/index.js
index 66f294b..d7ed1b9 100644
--- a/src/popup/utils/index.js
+++ b/src/popup/utils/index.js
@@ -1,11 +1,47 @@
+import dayjs from 'dayjs'
+import { at, clamp, range } from 'lodash'
+
+const { floor, min, max } = Math
+
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 const formatDurationFromSeconds = (input = '0') => {
   const duration = +input
-  const hours = Math.floor(duration / 60 / 60)
-  const minutes = Math.floor((duration - hours * 60 * 60) / 60).toString().padStart(2, '0')
+  const hours = floor(duration / 60 / 60)
+  const minutes = floor((duration - hours * 60 * 60) / 60).toString().padStart(2, '0')
   const seconds = (duration - hours * 60 * 60 - minutes * 60).toString().padStart(2, '0')
   return `${hours}:${minutes}:${seconds}`.replace(/^0:0?/, '')
 }
 
-export { sleep, formatDurationFromSeconds }
+const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
+  const filteredValues = accu.map(({ [key]: value }) => value).filter(Boolean)
+  const minValue = min(...filteredValues)
+  const maxValue = max(...filteredValues)
+  return accu.map(object => ({
+    ...object,
+    [key]: filteredValues.length
+      ? ((clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue))
+      : 1,
+  }))
+}, arrayOfObjects)
+
+const sampleHotnesses = (
+  { hotnesses = [], start_at: startAt = '' }, samplesCount,
+) => normalize(normalize(at(
+  hotnesses, range(
+    0, hotnesses.length - 0.1, max(1, hotnesses.length / samplesCount),
+  ).map(floor),
+).map(({ created_at: createdAt, like, watching }, index, records) => ({
+  createdAt,
+  timestamp: dayjs(createdAt).diff(startAt, 'second'),
+  likeDelta: max((like ?? 0) - (records[max(index - 1, 0)]['like'] ?? 0), 0),
+  watching,
+})), 'timestamp', 'likeDelta', 'watching').map(
+  ({ likeDelta, watching, ...fields }) => ({
+    hotness: likeDelta * watching, ...fields,
+  }),
+), 'hotness').map(
+  ({ timestamp, hotness, createdAt }) => [createdAt, [timestamp, hotness]],
+)
+
+export { sleep, formatDurationFromSeconds, sampleHotnesses }
diff --git a/src/shared/store/keys.js b/src/shared/store/keys.js
index 525f648..155ad21 100644
--- a/src/shared/store/keys.js
+++ b/src/shared/store/keys.js
@@ -2,7 +2,6 @@ export const ENDED_LIVES = 'endedLives'
 export const CURRENT_LIVES = 'currentLives'
 export const SCHEDULED_LIVES = 'scheduledLives'
 export const CHANNELS = 'channels'
-export const HOTNESSES = 'hotnesses'
 export const MEMBERS = 'members'
 export const SUBSCRIPTION_BY_MEMBER = 'subscriptionByMember'
 export const IS_NTF_ENABLED = 'isNtfEnabled'

From 73549e5f6137f1537893a246d26bba1161b05606 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sun, 27 Jun 2021 00:18:18 +0800
Subject: [PATCH 15/19] Add tests for syncHotnesses.

---
 src/background/utils/index.js          |  7 +-----
 src/background/workflows/index.js      |  6 ++---
 src/background/workflows/index.test.js | 35 ++++++++++++++++++++++++--
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/background/utils/index.js b/src/background/utils/index.js
index c8e941c..d2733a0 100644
--- a/src/background/utils/index.js
+++ b/src/background/utils/index.js
@@ -13,9 +13,4 @@ const isGuerrillaLive = live => dayjs(live['created_at'])
   .add(10, 'minute')
   .isSameOrAfter(dayjs(live['start_at']))
 
-export {
-  getUnixAfterDays,
-  getUnixBeforeDays,
-  getUnix,
-  isGuerrillaLive,
-}
+export { getUnixAfterDays, getUnixBeforeDays, getUnix, isGuerrillaLive }
diff --git a/src/background/workflows/index.js b/src/background/workflows/index.js
index e0362a0..81308c3 100644
--- a/src/background/workflows/index.js
+++ b/src/background/workflows/index.js
@@ -11,10 +11,10 @@ import {
 } from 'lodash'
 import {
   getChannels,
-  getOpenLives,
   getEndedLives,
   getHotnessesOfLives,
   getMembers,
+  getOpenLives,
 } from 'requests'
 import {
   APPEARANCE,
@@ -126,15 +126,13 @@ const syncOpenLives = async () => {
   return [...currentLives, ...scheduledLives]
 }
 
-const syncHotnesses = async lives => {
+const syncHotnesses = async (lives = []) => {
   if (lives.length === 0) {
     return
   }
 
   const hotnessesByLiveId = groupBy(await getHotnessesOfLives(lives, { limit: 1000 }), 'live_id')
 
-  console.log({ hotnessesByLiveId })
-
   await store.set({
     [ENDED_LIVES]: (getCachedEndedLives() ?? []).map(live => {
       if (live['id'] in hotnessesByLiveId) {
diff --git a/src/background/workflows/index.test.js b/src/background/workflows/index.test.js
index 6d2c0e4..0bbb20e 100644
--- a/src/background/workflows/index.test.js
+++ b/src/background/workflows/index.test.js
@@ -1,6 +1,12 @@
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
-import { getChannels, getEndedLives, getMembers, getOpenLives } from 'requests'
+import {
+  getChannels,
+  getEndedLives,
+  getHotnessesOfLives,
+  getMembers,
+  getOpenLives,
+} from 'requests'
 import {
   APPEARANCE,
   CHANNELS,
@@ -201,7 +207,7 @@ test('should get cached scheduled lives', async () => {
   expect(workflows.getCachedScheduledLives()).toEqual(scheduledLives)
 })
 
-test('should sync current lives', async () => {
+test('should sync open lives', async () => {
   Date.now = jest.fn(() => unixTime * 1000)
 
   // First run
@@ -363,6 +369,31 @@ test('should sync current lives', async () => {
   expect(returnValueFour).toEqual(openLivesFour)
 })
 
+test('should sync hotnesses', async () => {
+  Date.now = jest.fn(() => unixTime * 1000)
+
+  const endedLivesOne = [
+    { id: 1, hotnesses: [{ watching: 1 }] }, { id: 2 }, { id: 3 },
+  ]
+  const hotnessesOne = [
+    { live_id: 1, watching: 2 },
+    { live_id: 2, watching: 1 },
+    { live_id: 2, watching: 1 },
+    { live_id: 4, watching: 1 },
+  ]
+  await store.set({ [ENDED_LIVES]: endedLivesOne })
+
+  getHotnessesOfLives.mockResolvedValueOnce(hotnessesOne)
+
+  await workflows.syncHotnesses(endedLivesOne)
+
+  expect(store.data[ENDED_LIVES]).toEqual([
+    { id: 1, hotnesses: [hotnessesOne[0]] },
+    { id: 2, hotnesses: [hotnessesOne[1], hotnessesOne[2]] },
+    { id: 3 },
+  ])
+})
+
 test('should get cached channels', async () => {
   const channels = [{ id: 1 }, { id: 2 }]
 

From 8058eea690b215fdb7fd75e798339e358dfee62d Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sun, 27 Jun 2021 15:49:05 +0800
Subject: [PATCH 16/19] Add tests for normalize.

---
 src/popup/utils/index.js      |  8 ++++----
 src/popup/utils/index.test.js | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/popup/utils/index.js b/src/popup/utils/index.js
index d7ed1b9..d7465d9 100644
--- a/src/popup/utils/index.js
+++ b/src/popup/utils/index.js
@@ -19,17 +19,17 @@ const normalize = (arrayOfObjects, ...keys) => keys.reduce((accu, key) => {
   const maxValue = max(...filteredValues)
   return accu.map(object => ({
     ...object,
-    [key]: filteredValues.length
+    [key]: filteredValues.length && minValue !== maxValue
       ? ((clamp(object[key], minValue, maxValue) - minValue) / (maxValue - minValue))
       : 1,
   }))
 }, arrayOfObjects)
 
 const sampleHotnesses = (
-  { hotnesses = [], start_at: startAt = '' }, samplesCount,
+  { hotnesses = [], start_at: startAt = '' }, maxSamplesCount,
 ) => normalize(normalize(at(
   hotnesses, range(
-    0, hotnesses.length - 0.1, max(1, hotnesses.length / samplesCount),
+    0, hotnesses.length - 0.1, max(1, hotnesses.length / maxSamplesCount),
   ).map(floor),
 ).map(({ created_at: createdAt, like, watching }, index, records) => ({
   createdAt,
@@ -44,4 +44,4 @@ const sampleHotnesses = (
   ({ timestamp, hotness, createdAt }) => [createdAt, [timestamp, hotness]],
 )
 
-export { sleep, formatDurationFromSeconds, sampleHotnesses }
+export { sleep, formatDurationFromSeconds, normalize, sampleHotnesses }
diff --git a/src/popup/utils/index.test.js b/src/popup/utils/index.test.js
index 0d2c17d..7f662ae 100644
--- a/src/popup/utils/index.test.js
+++ b/src/popup/utils/index.test.js
@@ -1,11 +1,11 @@
-import { formatDurationFromSeconds, sleep } from './index'
+import { formatDurationFromSeconds, normalize, sleep } from './index'
 
 test('should sleep', async () => {
   await sleep(1000)
   expect(true).toBeTruthy()
 })
 
-test('should format duration from seconds', async () => {
+test('should format duration from seconds', () => {
   expect(formatDurationFromSeconds()).toEqual('0:00')
   expect(formatDurationFromSeconds(1)).toEqual('0:01')
   expect(formatDurationFromSeconds(59)).toEqual('0:59')
@@ -15,3 +15,15 @@ test('should format duration from seconds', async () => {
   expect(formatDurationFromSeconds(3601)).toEqual('1:00:01')
   expect(formatDurationFromSeconds(3600 * 24 + 1)).toEqual('24:00:01')
 })
+
+test('should normalize', () => {
+  expect(normalize([{ a: 1 }, { a: 2 }, { a: 3 }], 'a')).toEqual([{ a: 0 }, { a: 0.5 }, { a: 1 }])
+  expect(normalize([{ a: 1 }, { a: 2 }, { a: 3 }, { a: null }], 'a')).toEqual([{ a: 0 }, { a: 0.5 }, { a: 1 }, { a: 0 }])
+  // Not enough valid values: at least two positive numbers
+  expect(normalize([{ a: 0 }, { a: 2 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }, { a: 1 }])
+  expect(normalize([{ a: null }], 'a')).toEqual([{ a: 1 }])
+  expect(normalize([{ a: 1 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }])
+  expect(normalize([{ a: 0 }, { a: 0 }, { a: null }], 'a')).toEqual([{ a: 1 }, { a: 1 }, { a: 1 }])
+})
+
+// Tests for sampleHotnesses are not added for issues with floating number precisions

From c90bc4accc19eb9e32eac4fc5ec673caf490fef2 Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sun, 27 Jun 2021 16:33:21 +0800
Subject: [PATCH 17/19] Prevent unnecessary data updates.

---
 src/shared/store/create.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/shared/store/create.js b/src/shared/store/create.js
index de4e42f..3c02879 100644
--- a/src/shared/store/create.js
+++ b/src/shared/store/create.js
@@ -1,5 +1,6 @@
 /* eslint no-param-reassign:
 ["error", { "props": true, "ignorePropertyModificationsFor": ["state"] }] */
+import { isEmpty, isEqual } from 'lodash'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import connect from './connect'
@@ -12,7 +13,9 @@ export default defaultState => new Vuex.Store({
   mutations: {
     ...Object.fromEntries(Object.keys(defaultState).map(
       key => [key, (state, value) => {
-        state[key] = value
+        if (!isEqual(state[key], value) || isEmpty(value)) {
+          state[key] = value
+        }
       }],
     )),
   },

From e0c835affd9b7f1450a018e984abffc2ac62108a Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sun, 27 Jun 2021 21:31:47 +0800
Subject: [PATCH 18/19] Add a slight overflow around 4% to tune the rendering
 to best on FireFox.

---
 src/popup/components/live-item.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index c17de73..7e462ae 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -52,7 +52,7 @@
               />
               <g :clip-path="`url(#clip_outer_${live['id']})`">
                 <g :clip-path="`url(#clip_inner_${live['id']})`">
-                  <rect x="0" y="0.08" width="1" height="0.08" fill="url(#gradient)" />
+                  <rect x="0" y="0.08" width="1" height="0.083" fill="url(#gradient)" />
                   <rect :x="highlight"
                         y="0.08"
                         width="0.00625"
@@ -79,7 +79,7 @@
                     x="0"
                     y="0.08"
                     width="1"
-                    height="0.08"
+                    height="0.83"
                     fill="transparent"
                     @mousemove="handleMousemove"
                     @mouseout="handleMouseout"
@@ -188,9 +188,10 @@
         return sampleHotnesses(this.live, 61)
       },
       points() {
+        // Add a slight overflow around 4% to tune the rendering to best on FireFox
         return this.hotnessSamples.map(
           ([, [timeRatio, hotness]]) => [timeRatio, (1 - hotness ** 0.33) * 0.84],
-        ).concat(1, 1, 0, 1).flat().join(' ')
+        ).concat(1, 1.04, 0, 1.04).flat().join(' ')
       },
       hotnessDuration() {
         if (isNull(this.highlight)) {

From 63537c896f0ccc10c963f427ee225c2a742b121b Mon Sep 17 00:00:00 2001
From: Yunzhe <yunzhe@zju.edu.cn>
Date: Sun, 27 Jun 2021 21:32:16 +0800
Subject: [PATCH 19/19] Set mix-blend-mode to the highlight indicator.

---
 src/popup/components/live-item.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/popup/components/live-item.vue b/src/popup/components/live-item.vue
index 7e462ae..e4c732f 100644
--- a/src/popup/components/live-item.vue
+++ b/src/popup/components/live-item.vue
@@ -59,6 +59,7 @@
                         height="0.08"
                         fill="white"
                         opacity="0"
+                        style="mix-blend-mode: overlay"
                   >
                     <animate attributeName="opacity"
                              to="1"