add: spec-sc3.png, update vscodeignore and package.json

Author: lanly-dev

.vscodeignore

@@ -1,13 +1,13 @@
-.eslintignore
-.eslintrc.json
-.git
 .gitignore
+.token
 .vscode
-**/.eslintrc.json
 **/*.map
-**/jsconfig.json
+demo
+jsconfig.json
+lab
 media/res
-tsconfig.json
-package-lock
+media/vscodeignore
+src
+tasks.js
 vsc-extension-quickstart.md
 webpack.config.js

CHANGELOG.md

@@ -22,10 +22,14 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 - Use resume/suspend methods
 -  files, MB, 1.71.0
 
+Known issues:
+- Webpack watch doesn't work as expect - it does rebuild but not each change-save
+- Vscode's debugging need to click run/and restart in order to launch the app (maybe only for MacOS)
+
 Notes:
-- **Finally! This extension is working normally** 🙌🎊🎉🥳🥂
+- **Finally! This extension works on vscode stable version** 🙌🎊🎉🥳🥂
 - It turns out that vscode doesn't ship mp3 codec with its ffmpeg library (it probably got removed in the past since this extension worked before) and recently add it back in v1.71 - [Issue](https://github.com/microsoft/vscode/ssues/48494)
-- Put back resume/suspend since the issue got fixed for electron/chromium [Issue1052747](https://bugs.chromium.org/p/chromium/issues/detail?id=1052747) [Issue1018499](https://bugs.chromium.org/p/chromium/issues/detail?id=1018499)
+- Put back resume/suspend since the issue got fixed for electron/chromium - [Issue1052747](https://bugs.chromium.org/p/chromium/issues/detail?id=1052747) | [Issue1018499](https://bugs.chromium.org/p/chromium/issues/detail?id=1018499)
 - Reduce extension size - it was funny to see previous version use webpack to minimize the 1 file - `controller.js`
 - All previous versions of this extension will not work in any recent vscode versions
 

README.md

@@ -1,7 +1,7 @@
 # Spectrogram
 This is an extension that play and display spectrogram of mp3 and flac audio files.
 
-![](images/spec-sc3.PNG)
+![](media/spec-sc3.png)
 
 ## Release Notes
 

media/spec-sc3.png

@@ -2,21 +2,22 @@
   "name": "spectrogram",
   "displayName": "Spectrogram",
   "description": "Real-time spectrogram",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "publisher": "lanly-dev",
   "engines": {
-    "vscode": "^1.41.0"
+    "vscode": "^1.71.0"
   },
   "categories": [
     "Other"
   ],
   "keywords": [
     "Audio",
-    "Spectrogram"
+    "spectrogram",
+    "mp3"
   ],
-  "icon": "icon/spec.png",
+  "icon": "media/spec.png",
   "activationEvents": [
-    "*"
+    "onStartupFinished"
   ],
   "main": "./dist/extension.js",
   "contributes": {
@@ -30,18 +31,21 @@
     }
   },
   "scripts": {
+    "vscode:prepublish": "npm run package",
+    "vsce-package": "vsce package",
+    "package": "webpack --mode production --devtool hidden-source-map",
     "wp": "webpack",
     "wp-watch": "webpack --watch",
     "task-clean-output": "ts-node tasks.js clean"
   },
   "devDependencies": {
-    "@types/node": "^18.7.16",
+    "@types/node": "^18.7.23",
     "@types/vscode": "^1.71.0",
     "@types/vscode-webview": "^1.57.0",
     "@vscode/codicons": "^0.0.32",
     "copy-webpack-plugin": "^11.0.0",
     "css-minimizer-webpack-plugin": "^4.1.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.24.0",
     "eslint-plugin-jsdoc": "^39.3.6",
     "pug": "^3.0.2",
     "shelljs": "^0.8.5",

media/spec-sc1.png media/vscodeignore/spec-sc1.pngmedia/spec-sc1.png renamed to media/vscodeignore/spec-sc1.png

@@ -33,7 +33,8 @@ const REFRESH_ICON = '<i class="codicon codicon-refresh"></i>'
    * @param {{ path: string; name: string; }} file
    */
   function player(file) {
-    const WIDTH = (canvasElement.width = window.innerWidth)
+    canvasElement.width = window.innerWidth - 10
+    const WIDTH = canvasElement.width
     togglePlaybackButtons('loading')
     const audioCtx = new AudioContext()
     const analyser = audioCtx.createAnalyser()

media/spec-sc2.png media/vscodeignore/spec-sc2.pngmedia/spec-sc2.png renamed to media/vscodeignore/spec-sc2.png

@@ -10,6 +10,10 @@
   padding: 0 5px;
 }
 
+body {
+  padding-left: 5px;
+}
+
 button {
   background-color: var(--vscode-button-background);
   border: none;