Revert "try: wavesurfer"

This reverts commit db95b54.

Author: lanly-dev

.vscode/settings.json

@@ -9,7 +9,6 @@
     "susres",
     "treeview",
     "vscodeignore",
-    "wavesurfer",
     "webaudio"
   ],
   "editor.rulers": [120],

package.json

@@ -62,11 +62,7 @@
       "properties": {
         "spectrogram.rgbColor": {
           "type": "object",
-          "default": {
-            "r": 100,
-            "g": 0,
-            "b": 0
-          },
+          "default": { "r": 100, "g": 0, "b": 0 },
           "description": "RGB color for the spectrogram",
           "properties": {
             "r": {
@@ -124,9 +120,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/lanly-dev/VSCode-Spectrogram.git"
-  },
-  "dependencies": {
-    "music-metadata": "^10.8.0",
-    "wavesurfer.js": "^7.9.0"
   }
 }

src/controller.js

@@ -9,7 +9,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
   const vscode = acquireVsCodeApi()
   const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('canvas'))
   const canvasContext = canvas.getContext('2d')
-  const waveform = document.getElementById('waveform')
 
   canvas.height = 512
   const susresBtn = /** @type {HTMLButtonElement} */ (document.getElementById('susresBtn'))
@@ -19,7 +18,7 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
   const fileLabel = document.getElementById('label')
   const seekbar = /** @type {HTMLInputElement} */ (document.getElementById('seekbar'))
 
-  let currPlayer, id, durationId, rgbColor, wavesurfer
+  let currPlayer, id, durationId, rgbColor
   // Receive data from vscode
   window.addEventListener('message', event => {
     if (currPlayer) {
@@ -82,7 +81,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
           susresBtn.innerHTML = PLAY_ICON
           cancelAnimationFrame(id)
           played += Date.now() - startAt
-          wavesurfer.pause()
         })
       } else if (isEnded) {
         isEnded = false
@@ -103,15 +101,13 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
         played = 0
         durationWatch()
         togglePlaybackButtons('PLAYING')
-        wavesurfer.play()
       } else {
         // Was suspended so resume it
         audioCtx.resume().then(() => {
           susresBtn.innerHTML = PAUSE_ICON
           startAt = Date.now()
           draw()
           durationWatch()
-          wavesurfer.play()
         })
       }
     }
@@ -145,18 +141,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
       togglePlaybackButtons('READY')
       seekbar.value = '0'
       seekbar.max = lengthMs.toString()
-
-      // @ts-ignore
-      // eslint-disable-next-line no-undef
-      wavesurfer = WaveSurfer.create({
-        container: '#waveform',
-        waveColor: 'violet',
-        progressColor: 'purple',
-        backend: 'MediaElement',
-        mediaControls: false,
-        height: 128
-      })
-      wavesurfer.load(file.path)
     }
 
     function onBufferError(err) {
@@ -186,7 +170,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
       source.start(0, played / 1000)
 
       if (audioCtx.state === 'suspended') updateDurationText()
-      wavesurfer.seekTo(played / lengthMs)
     }
 
     function seekTo(ms) {
@@ -208,7 +191,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
       source.start(0, played / 1000)
 
       if (audioCtx.state === 'suspended') updateDurationText()
-      wavesurfer.seekTo(played / lengthMs)
     }
 
     function playEnd() {
@@ -217,7 +199,6 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
       togglePlaybackButtons('ENDED')
       cancelAnimationFrame(id)
       vscode.postMessage({ type: 'DONE', message: 'Playing ended' })
-      wavesurfer.stop()
     }
 
     function togglePlaybackButtons(state) {

src/index.pug

@@ -5,18 +5,15 @@ html
     meta(http-equiv='Content-Security-Policy',
       content=`default-src 'none';\
       script-src 'nonce-${nonce}';\
-      media-src https: vscode-webview:;\
-      style-src https: 'unsafe-inline';\
-      font-src data: https: vscode-resource:;\
+      style-src 'nonce-${nonce}' https:;\
+      font-src vscode-resource: data: https:;\
       connect-src vscode-resource: 'nonce-${nonce}';`)
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
     link(nonce=`${nonce}`, rel='stylesheet', type='text/css', href=`${styleCssUri}`)
     link(nonce=`${nonce}`, rel='stylesheet', type='text/css', href=`${codiconsUri}`)
-    script(nonce=`${nonce}`, src=`${wavesurferUri}`)
 
   body
     canvas#canvas
-    #waveform
     div.text-center
       button#backBtn.d-none
         i.codicon.codicon-play.me-n5

src/webview.js

@@ -57,14 +57,12 @@ export class SpecWebviewPanel {
   }
 
   getHtmlForWebview(extensionUri) {
-    const { webview } = this.panel
-    const wavesurferUri = webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'wavesurfer.min.js')))
-    const controllerUri = webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'controller.js')))
-    const styleCssUri = webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'style.css')))
-    const codiconsUri =  webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'codicon.css')))
+    const controllerUri = this.panel.webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'controller.js')))
+    const styleCssUri = this.panel.webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'style.css')))
+    const codiconsUri =  this.panel.webview.asWebviewUri(Uri.file(path.join(extensionUri, 'dist', 'codicon.css')))
     const compiledFunction = pug.compileFile(path.join(__dirname, 'index.pug'))
 
-    return compiledFunction({ wavesurferUri, controllerUri, codiconsUri, styleCssUri, nonce: getNonce() })
+    return compiledFunction({ controllerUri, codiconsUri, styleCssUri, nonce: getNonce() })
   }
 }
 

webpack.config.js

@@ -4,7 +4,6 @@ const TerserPlugin = require('terser-webpack-plugin')
 
 const path = require('path')
 const CODICON_PATH = '@vscode/codicons/dist/'
-const WAVE_SURFER_PATH = 'node_modules/wavesurfer.js/dist/wavesurfer.min.js'
 const isProduction = process.env.NODE_ENV === 'production'
 
 module.exports = {
@@ -25,7 +24,6 @@ module.exports = {
       patterns: [
         { from: require.resolve(`${CODICON_PATH}/codicon.css`) },
         { from: require.resolve(`${CODICON_PATH}/codicon.ttf`) },
-        { from: WAVE_SURFER_PATH },
         { from: 'src/controller.js' },
         { from: 'src/index.pug' },
         { from: 'src/style.css' }