Merge branch 'release/0.6.2'

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: Main
+
+on:
+  push:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - run: npm ci
+      - run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@v0.2.0
+        with:
+          publish-dir: './dist'
+          production-branch: master
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

CHANGELOG.md

@@ -5,6 +5,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.6.2] - 2020-02-05
+### Changed
+- Update dependencies
+
+### Added
+- Netlify deploy from GitHub Actions
+
 ## [0.6.1] - 2020-02-02
 ### Changed
 - Update dependencies
@@ -230,7 +237,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.6.1...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.6.2...HEAD
+[0.6.2]: https://github.com/nwtgck/piping-ui-web/compare/v0.6.1...v0.6.2
 [0.6.1]: https://github.com/nwtgck/piping-ui-web/compare/v0.6.0...v0.6.1
 [0.6.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.5.1...v0.6.0
 [0.5.1]: https://github.com/nwtgck/piping-ui-web/compare/v0.5.0...v0.5.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piping-ui",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": true,
   "author": "Ryo Ota <nwtgck@nwtgck.org> (https://github.com/nwtgck)",
   "scripts": {
@@ -22,16 +22,16 @@
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@mattiasbuelens/web-streams-adapter": "0.1.0-alpha.3",
-    "binconv": "^0.1.2",
+    "binconv": "^0.2.0",
     "clipboard": "^2.0.4",
     "core-js": "^3.6.4",
     "file-saver": "^2.0.2",
-    "file-type": "^13.1.2",
+    "file-type": "^14.0.0",
     "filepond": "^4.9.5",
     "jszip": "^3.2.2",
     "jwk-thumbprint": "^0.1.2",
     "linkifyjs": "^2.1.8",
-    "openpgp": "^4.8.1",
+    "openpgp": "^4.9.0",
     "register-service-worker": "^1.6.2",
     "sanitize-html": "^1.21.1",
     "smoothscroll-polyfill": "^0.4.4",
@@ -42,8 +42,8 @@
     "vue-async-computed-decorator": "0.0.4",
     "vue-class-component": "^7.2.2",
     "vue-filepond": "^6.0.2",
-    "vue-property-decorator": "^8.3.0",
-    "vuetify": "^2.2.8"
+    "vue-property-decorator": "^8.4.0",
+    "vuetify": "^2.2.9"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",

src/components/DataViewer.vue

@@ -165,6 +165,7 @@ import Clipboard from 'clipboard';
 import * as fileType from 'file-type/browser';
 import {blobToUint8Array} from 'binconv/dist/src/blobToUint8Array';
 import {uint8ArrayToBlob} from 'binconv/dist/src/uint8ArrayToBlob';
+import {blobToReadableStream} from 'binconv/dist/src/blobToReadableStream';
 import {mdiAlert, mdiCheck, mdiChevronDown, mdiContentSave, mdiCloseCircle, mdiEye, mdiEyeOff, mdiKey, mdiFeatureSearchOutline} from "@mdi/js";
 
 import {globalStore} from "@/vue-global";
@@ -366,21 +367,26 @@ export default class DataViewer extends Vue {
   }
 
   private async viewBlob() {
-    // Get first bytes from blob
-    const firstChunk: Uint8Array = await blobToUint8Array(this.blob.slice(0, fileType.minimumBytes));
-
     // Reset viewers
     this.imgSrc = '';
     this.videoSrc = '';
     this.text = '';
 
+    const isText: boolean = await (async () => {
+      // NOTE: 4100 was used in FileType.minimumBytes in file-type until 13.1.2
+      const nBytes = 4100;
+      // Get first bytes from blob
+      const firstChunk: Uint8Array = await blobToUint8Array(this.blob.slice(0, nBytes));
+      return utils.isText(firstChunk);
+    })();
+
     // If body is text
-    if (utils.isText(firstChunk)) {
+    if (isText) {
       // Set text
       this.text = await utils.readBlobAsText(this.blob);
     } else {
       // Detect type of blob
-      const fileTypeResult = await fileType.fromBlob(new Blob([firstChunk]));
+      const fileTypeResult = await fileType.fromStream(blobToReadableStream(this.blob));
       if (fileTypeResult !== undefined) {
         const blobUrl = URL.createObjectURL(this.blob);
         if (fileTypeResult.mime.startsWith("image/")) {

src/piping-ui-utils.ts

@@ -27,7 +27,7 @@ export async function decryptingDownload(
   const swDownload = await swDownloadAsync();
   // If supporting stream-download via Service Worker
   if (await swDownload.supportsSwDownload) {
-    const utils = await utilsAsync();
+    const binconv = await binconvAsync();
     const protection: Protection = (() => {
       if (key === undefined) {
         return {type: 'raw'} as const;
@@ -36,11 +36,12 @@ export async function decryptingDownload(
       } else {
         return {
           type: 'uint8array',
-          key: utils.uint8ArrayToBase64(key),
+          key: binconv.uint8ArrayToBase64(key),
         } as const;
       }
     })();
 
+    const utils = await utilsAsync();
     // Create download info to tell to Service Worker
     const downloadInfo = {
       url: downloadUrl,

src/service-worker/src/sw.ts

@@ -7,6 +7,7 @@ declare var openpgp: any;
 // Backup the native ReadableStream because OpenPGP.js might modify it on Firefox
 const NativeReadableStream = ReadableStream;
 import {createReadableStreamWrapper} from '@mattiasbuelens/web-streams-adapter';
+import {base64ToUint8Array} from 'binconv/dist/src/base64ToUint8Array';
 importScripts('openpgp/openpgp.min.js');
 
 // Create convert functions
@@ -48,14 +49,6 @@ function generateUniqueDownloadInfoId(): string {
   }
 }
 
-// (from: https://gist.github.com/borismus/1032746#gistcomment-1493026)
-function base64ToUint8Array(base64Str: string): Uint8Array {
-  const raw = atob(base64Str);
-  return Uint8Array.from(Array.prototype.map.call(raw, (x: string) => {
-    return x.charCodeAt(0);
-  }) as number[]); // TODO: Not use type assertion
-}
-
 // This is the code piece that GenerateSW mode can't provide for us.
 // This code listens for the user's confirmation to update the app.
 self.addEventListener('message', (e: ExtendableMessageEvent) => {

src/utils.ts

@@ -7,6 +7,7 @@ const openpgpAsync = memorizeFunc(async () => {
   await openpgp.initWorker({ path: 'openpgp/openpgp.worker.min.js' });
   return openpgp;
 });
+const uint8ArrayToHexStringAsync = () => import("binconv/dist/src/uint8ArrayToHexString").then(p => p.default);
 
 export function readableBytesString(bytes: number, fractionDigits: number): string {
   const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -112,20 +113,12 @@ export async function decrypt(bytes: Uint8Array, password: string | Uint8Array):
   return plain;
 }
 
-// (from: https://stackoverflow.com/a/40031979/2885946)
-export function buffToHex(buff: ArrayBuffer): string {
-  return Array.prototype.map.call(new Uint8Array(buff), (x) => ('00' + x.toString(16)).slice(-2)).join('');
-}
-
 export async function sha256(input: string): Promise<string> {
-  return buffToHex(
-    await crypto.subtle.digest('SHA-256', new TextEncoder().encode(input)),
-  );
-}
-
-// (from: https://stackoverflow.com/a/11562550/2885946)
-export function uint8ArrayToBase64(arr: Uint8Array): string {
-  return btoa(String.fromCharCode(...arr));
+  const uint8ArrayToHexString = await uint8ArrayToHexStringAsync();
+  // Calculate SHA-256
+  const sha256: ArrayBuffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(input));
+  // Convert array buffer to hex string
+  return uint8ArrayToHexString(new Uint8Array(sha256));
 }
 
 /***