Merge pull request #8 from rankjie/master

Draw bitfield
NemoAlex · May 9, 2018 · 8783b37 · 8783b37
2 parents 4f37ca3 + d1fe3ef
commit 8783b37
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 16 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD6+vr39/f4+Pj4+Pj5+fn39/f39/f7+/v39/f4+Pj4+Pj4+Pj4+Pj39/eB5ZJV3m1E217j9OZR3Wnmvw8bAAAADnRSTlMAMYHZ2FQhxz/svvP68k+uQscAAACZSURBVHgBrVMDFkMxEIytn9z/rHWDaqp5WnvJX0GZ495zx+hDtRSpQ8g7tdJpgVar3th0A2sWfUh3CJOFmv1HjJFlzT/q6PWnJ7j2Ip4ZiLOepqc4T4wNQc2l5Dp4djJwQ9+2A9qwcCcD3vm8nZC7gJ8MfOfL2aB0gUcGEafAReI28aDwqPGy4LrhweCTw0eLzx4/Dn69r7EHyUAhVwpzmoQAAAAASUVORK5CYII="><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><title>Glutton</title><link href=./static/app.dba8d9a54b09c0f0b13920de3a99c333.css rel=stylesheet></head><body><app :config.sync=config></app><script type=text/javascript src=./static/app.1e8e40a963a2bdebe9ca.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><link rel=icon type=image/png href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEUAAAD6+vr39/f4+Pj4+Pj5+fn39/f39/f7+/v39/f4+Pj4+Pj4+Pj4+Pj39/eB5ZJV3m1E217j9OZR3Wnmvw8bAAAADnRSTlMAMYHZ2FQhxz/svvP68k+uQscAAACZSURBVHgBrVMDFkMxEIytn9z/rHWDaqp5WnvJX0GZ495zx+hDtRSpQ8g7tdJpgVar3th0A2sWfUh3CJOFmv1HjJFlzT/q6PWnJ7j2Ip4ZiLOepqc4T4wNQc2l5Dp4djJwQ9+2A9qwcCcD3vm8nZC7gJ8MfOfL2aB0gUcGEafAReI28aDwqPGy4LrhweCTw0eLzx4/Dn69r7EHyUAhVwpzmoQAAAAASUVORK5CYII="><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><title>Glutton</title><link href=./static/app.f24e27ac9286656fcfe6bcb0edac03f2.css rel=stylesheet></head><body><app :config.sync=config></app><script type=text/javascript src=./static/app.39e7b5fb2d259ad9cb2f.js></script></body></html>
diff --git a/dist/static/app.1e8e40a963a2bdebe9ca.js → dist/static/app.39e7b5fb2d259ad9cb2f.js b/dist/static/app.1e8e40a963a2bdebe9ca.js → dist/static/app.39e7b5fb2d259ad9cb2f.js
diff --git a/.../app.dba8d9a54b09c0f0b13920de3a99c333.css → .../app.f24e27ac9286656fcfe6bcb0edac03f2.css b/.../app.dba8d9a54b09c0f0b13920de3a99c333.css → .../app.f24e27ac9286656fcfe6bcb0edac03f2.css
diff --git a/src/components/bitfield.vue b/src/components/bitfield.vue
@@ -0,0 +1,78 @@
+<style lang="sass" scoped>
+@import "../assets/variables.sass"
+.btf
+  position: absolute
+  bottom: 7%
+  display: block
+  width: 100%
+  height: 6px
+</style>
+
+<template lang="jade">
+canvas.btf
+</template>
+
+<script>
+export default {
+  props: {
+    bitfield: String,
+    numPieces: String
+  },
+  methods: {
+    updateBitfield: function () {
+      let canvas = this.$el
+      let ctx = canvas.getContext('2d')
+      ctx.fillStyle = '#28a956'
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      let chunks = this.getChunksFromHex(this.bitfield, this.numPieces)
+      let x = 0
+      chunks.forEach((element, index) => {
+        let dx = element.ratio * canvas.width
+        if (element.show) {
+          ctx.fillRect(x, 0, dx, canvas.height)
+        }
+        x += dx
+      })
+    },
+    getChunksFromHex: function (bitfield, numOfPieces) {
+      var chunks = []
+      var len = 0
+      var numPieces = parseInt(numOfPieces)
+      if (!bitfield) return []
+
+      var totalDownloaded = 0
+      if (numPieces > 1) {
+        var chunkRatio = 1 / numPieces
+        var piecesProcessed = 0
+        for (var i = 0; i < bitfield.length; i++) {
+          var hex = parseInt(bitfield[i], 16)
+          for (var j = 1; j <= 4; j++) {
+            var bit = hex & (1 << (4 - j))
+            if (bit) totalDownloaded++
+            var prog = !!bit
+            if (len >= 1 && chunks[len - 1].show === prog) {
+              chunks[len - 1].ratio += chunkRatio
+            } else {
+              chunks.push({
+                ratio: chunkRatio,
+                show: prog
+              })
+              len++
+            }
+            piecesProcessed++
+            if (piecesProcessed === numPieces) {
+              return chunks
+            }
+          }
+        }
+      }
+      return chunks
+    }
+  },
+  watch: {
+    'bitfield': function () {
+      this.updateBitfield()
+    }
+  }
+}
+</script>
diff --git a/src/components/download-line.vue b/src/components/download-line.vue
@@ -14,13 +14,15 @@
             span.speed(v-if="isDownloading") {{downloadSpeed}}
             span.speed.upload(v-if="isUploading") {{uploadSpeed}}
             span.eta(v-if="isDownloading") ETA: {{eta}}
+        btf(v-if="download.status === 'active'", :num-pieces="download.numPieces", :bitfield="download.bitfield")
         btn.search-subtitle(v-if="$root.config.enableSubtitleFeatures", @mousedown.stop.prevent="", @click="searchSubtitle(download)", passive, title="Search Subtitles")
 </template>
 <script>
 import CircleProgress from './circle-progress.vue'
 import * as util from '../services/util'
 import * as moment from 'moment'
 import Btn from './btn.vue'
+import Btf from './bitfield.vue'
 
 export default {
   props: ['download', 'selected'],
@@ -58,7 +60,8 @@ export default {
   },
   components: {
     CircleProgress,
-    Btn
+    Btn,
+    Btf
   }
 }
 </script>