Merge pull request #28 from letmaik/letmaik/tray-animation

Tray icon animation

src/main/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { createLocalStore } from './../renderer/utils/local-store'
-import { app, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
+import { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage } from 'electron'
 
 const path = require('path')
 
@@ -64,6 +64,11 @@ ipcMain.on('window-minimize', (event, arg) => {
   }
 })
 
+ipcMain.on('tray-icon-update', (event, image) => {
+  const nativeImg = nativeImage.createFromDataURL(image)
+  tray.setImage(nativeImg)
+})
+
 function createTray () {
   tray = new Tray(path.join(__static, 'icon.png'))
   tray.setToolTip('Pomotroid\nClick to Restore')

src/renderer/components/TrayIcon.vue

@@ -0,0 +1,101 @@
+<template>
+</template>
+
+<script>
+import { ipcRenderer } from 'electron'
+import { EventBus } from '@/utils/event-bus'
+
+export default {
+  data () {
+    return {
+      state: null,
+      lastUpdate: 0
+    }
+  },
+
+  computed: {
+    minToTray () {
+      return this.$store.getters.minToTray
+    }
+  },
+
+  mounted () {
+    let updateTrayImage = (elapsed, total) => {
+      if (!this.minToTray) {
+        return
+      }
+      if (this.lastUpdate < elapsed && (elapsed - this.lastUpdate) / total < 0.01) {
+        // avoid updates without visual difference
+        return
+      }
+      this.lastUpdate = elapsed
+      const image = createTrayImage(this.state, elapsed, total)
+      ipcRenderer.send('tray-icon-update', image)
+    }
+
+    EventBus.$on('ready-long-break', () => {
+      this.state = 'long-break'
+      updateTrayImage(0, 1)
+    })
+
+    EventBus.$on('ready-short-break', () => {
+      this.state = 'short-break'
+      updateTrayImage(0, 1)
+    })
+
+    EventBus.$on('ready-work', () => {
+      this.state = 'work'
+      updateTrayImage(0, 1)
+    })
+
+    EventBus.$on('timer-advanced', (elapsed, total) => {
+      updateTrayImage(elapsed, total)
+    })
+  }
+}
+
+function createTrayImage (state, elapsed, total) {
+  const size = 32
+  const bgColor = '#2F384B'
+  const workColor = '#FF4E4D'
+  const shortBreakColor = '#05EB8B'
+  const longBreakColor = '#0BBCDA'
+  const arcRadiusRatio = 0.55
+  const arcLineWidthRatio = 0.3
+
+  const remainingTime = 1 - elapsed / total
+  const arcColor = state === 'short-break' ? shortBreakColor : (
+    state === 'long-break' ? longBreakColor : workColor)
+  const outerRadius = size / 2
+  const innerRadius = outerRadius * arcRadiusRatio
+  const lineWidth = outerRadius * arcLineWidthRatio
+  const fullCircle = 2 * Math.PI
+  const startAngle = -Math.PI / 2
+  const endAngle = remainingTime * fullCircle + startAngle
+  const center = outerRadius
+
+  const canvas = document.createElement('canvas')
+  canvas.width = size
+  canvas.height = size
+
+  const ctx = canvas.getContext('2d')
+
+  ctx.fillStyle = bgColor
+  ctx.strokeStyle = arcColor
+  ctx.lineWidth = lineWidth
+
+  ctx.beginPath()
+  ctx.arc(center, center, outerRadius, 0, fullCircle, false)
+  ctx.fill()
+
+  ctx.beginPath()
+  ctx.arc(center, center, innerRadius, startAngle, endAngle, false)
+  ctx.stroke()
+
+  const dataUrl = canvas.toDataURL('image/png')
+  return dataUrl
+}
+</script>
+
+<style>
+</style>

src/renderer/components/timer/Timer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="Timer-wrapper">
     <app-audio/>
+    <app-tray-icon/>
     <app-timer-dial :minutes="minutes">
       <p class="Dial-time" v-if="!timerStarted">{{ prettyMinutes }}</p>
       <p class="Dial-time" v-else>{{ prettyTime }}</p>
@@ -46,6 +47,7 @@
 <script>
 import Timer from '@/utils/timer'
 import appAudio from '@/components/Audio'
+import appTrayIcon from '@/components/TrayIcon'
 import appTimerController from '@/components/timer/Timer-controller'
 import appTimerDial from '@/components/timer/Timer-dial'
 import appTimerFooter from '@/components/timer/Timer-footer'
@@ -54,6 +56,7 @@ import { EventBus } from '@/utils/event-bus'
 export default {
   components: {
     appAudio,
+    appTrayIcon,
     appTimerController,
     appTimerDial,
     appTimerFooter

src/renderer/utils/timer.js

@@ -13,6 +13,8 @@ export default class {
         if (this.time >= this.totalSeconds) {
           this.pause()
           EventBus.$emit('timer-completed')
+        } else {
+          EventBus.$emit('timer-advanced', this.time, this.totalSeconds)
         }
       }, 1000)
       EventBus.$emit('timer-started')