Update and susresbtn

Author: lanly-dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec",
-  "displayName": "spec",
+  "displayName": "Spectrogam",
   "description": "description",
   "version": "0.0.1",
   "engines": {
@@ -29,17 +29,16 @@
   },
   "devDependencies": {
     "@types/mocha": "^2.2.42",
-    "@types/node": "^8.10.25",
+    "@types/node": "^8.10.48",
     "eslint": "^4.11.0",
-    "typescript": "^3.1.4",
-    "vscode": "^1.1.25",
-    "webpack-cli": "^3.2.3"
+    "typescript": "^3.4.5",
+    "vscode": "^1.1.33",
+    "webpack-cli": "^3.3.1"
   },
   "dependencies": {
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.1",
     "pug": "^2.0.3",
     "semantic-ui-css": "^2.4.1",
-    "vue": "^2.6.6",
-    "webpack": "^4.29.3"
+    "webpack": "^4.30.0"
   }
 }

src/bundle.js

@@ -1,11 +1,11 @@
 ;(() => {
   const vscode = acquireVsCodeApi()
-  const oldState = vscode.getState()
 
   const canvasElement = document.getElementById('canvas')
   const canvasContext = canvasElement.getContext('2d')
   const WIDTH = (canvasElement.width = window.innerWidth)
   const HEIGHT = (canvasElement.height = 512)
+  const susresBtn = document.querySelector('#susresbtn')
 
   let playing, id
   window.addEventListener('message', event => {
@@ -53,19 +53,29 @@
 
             song.connect(audioCtx.destination)
             song.connect(analyser)
-            // // play.onclick = function() {
-            // song.playbackRate.value = 2
+            susresBtn.onclick = () => {
+              if (audioCtx.state === 'running') {
+                audioCtx.suspend().then(() => {
+                  susresBtn.textContent = 'Resume'
+                  cancelAnimationFrame(id)
+                })
+              } else if (audioCtx.state === 'suspended') {
+                audioCtx.resume().then(() => {
+                  susresBtn.textContent = 'Pause'
+                  draw()
+                })
+              }
+            }
             song.start()
-            // }
             song.onended = event => {
               cancelAnimationFrame(id)
-              console.log('finished')
+              vscode.postMessage('finished')
             }
             analyser.getByteFrequencyData(dataArray)
             draw()
           })
           .catch(err => {
-            console.log('Rendering failed: ' + err)
+            vscode.postMessage('error')
           })
       })
     }
@@ -81,7 +91,6 @@
       canvasContext.putImageData(imageDataFrame, x, 0)
       x < WIDTH ? x++ : (x = 0)
     }
-
     return audioCtx
   }
 })()

src/controller.js

@@ -8,8 +8,6 @@ const path = require('path')
  * @param {vscode.ExtensionContext} context
  */
 function activate(context) {
-  vscode.window.showInformationMessage('Hello World!')
-
   const specTV = new tv.Treeview(context)
 
   specTV.specExplorer.onDidChangeSelection(file => {
@@ -20,8 +18,9 @@ function activate(context) {
       wv.SpecWebviewPanel.currentPanel.panel.postMessage(`${song_path}`)
       wv.SpecWebviewPanel.currentPanel.panel.webview.onDidReceiveMessage(
         message => {
-          if(message == 'ready')
-            wv.SpecWebviewPanel.currentPanel.panel.postMessage(`${song_path}`)
+          if (message == 'ready') wv.SpecWebviewPanel.currentPanel.panel.postMessage(`${song_path}`)
+          else if (message == 'finished') vscode.window.showInformationMessage('Finished Playing 😎')
+          else if (message == 'error') vscode.window.showErrorMessage('Something happened! 😵')
         },
         undefined,
         context.subscriptions

src/extension.js

@@ -1,6 +1,6 @@
 html
   head
-    title Spec
+    title Spectrogam
     meta(charset='UTF-8')
     meta(http-equiv='Content-Security-Policy',
       content=`default-src 'none';\
@@ -17,4 +17,5 @@ html
     link(nonce=`${nonce}`, rel='stylesheet', type='text/css', href=`${ctmcss_uri}`)
   body.vsc_bg.overflow
     canvas#canvas
+    div: button#susresbtn.ui.inverted.button Pause
     script(nonce=`${nonce}`, src=`${bundle_uri}`)

src/index.pug

@@ -24,7 +24,7 @@ class SpecWebviewPanel {
       return
     }
 
-    const panel = vscode.window.createWebviewPanel(SpecWebviewPanel.viewType, 'Spec', column || vscode.ViewColumn.One, {
+    const panel = vscode.window.createWebviewPanel(SpecWebviewPanel.viewType, 'Spectrogam', column || vscode.ViewColumn.One, {
       enableScripts: true,
     //   localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))]
     })