3.0

.vscode/settings.json

@@ -1,13 +1,18 @@
 {
   "cSpell.words": [
+    "autoplay",
     "codicon",
     "codicons",
     "flac",
     "lanly",
+    "seekbar",
     "susres",
-    "Typecheck",
+    "treeview",
+    "vscodeignore",
+    "wavesurfer",
     "webaudio"
   ],
   "editor.rulers": [120],
-  "explorer.sortOrder": "type"
+  "explorer.sortOrder": "type",
+  "terminal.integrated.defaultProfile.windows": "Command Prompt"
 }

.vscodeignore

@@ -2,7 +2,6 @@
 .token
 .vscode
 **/*.map
-CHANGELOG.md
 demo
 jsconfig.json
 lab

CHANGELOG.md

@@ -4,39 +4,48 @@ All notable changes to the "Spectrogram" extension will be documented in this fi
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
 ## [Future Works]
-- [Display duration in explorer](https://code.visualstudio.com/api/extension-guides/tree-view#view-actions)
-- Generate spectrogram faster than real time, depend on Web Audio API?
-- New icon
-- More colors
 - Real-time input mode/recorder
-- Seeker bar slider
-- [Support more audio codecs](https://code.visualstudio.com/updates/v1_71#_ffmpeg-codecs-support)
+- Generate spectrogram instead real-time - [Wavesurfer](https://wavesurfer.xyz/)
+
 ---
+## [3.0.0] - February 2025
+- Support WAV
+- Add seekbar
+- Add color RBG config
+- Add duration in treeview
+- New icon and logo
+
+### Notes
+- Clicking treeview item some time able trigger playing the song, but due to the autoplay policy, most of the time you have to click play button inside the webview
+
+### References
+- Treeview API https://code.visualstudio.com/api/extension-guides/tree-view#view-actions
+- VS Code support codecs https://code.visualstudio.com/updates/v1_71#_ffmpeg-codecs-support
 
 ## [2.0.0] - September 2022
-- Add seeking 5s back and fort buttons
+- Add seeking 5s back and forth buttons
 - Reduce extension size with Webpack
-- Support flac
+- Support FLAC
 - Switch to `main` branch
 - Use [Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html)
 - Use resume/suspend methods
 - webpack 5.74.0 compiled with 1 warning in 9069 ms
 - 12 files, 278.85KB, 1.71.0
 
 Known issues:
-- Webpack watch doesn't work as expect - it does rebuild but not each change-save
-- Vscode's debugging needs to click twice - run and restart in order to launch the app (maybe only for macOS)
+- Webpack watch doesn't work as expected - it does rebuild but not on each change-save
+- VS Code's debugging needs to click twice - run and restart in order to launch the app (maybe only for macOS)
 
 Notes:
-- **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)
-- 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
+- **Finally! This extension works on VS Code stable version** 🙌🎊🎉🥳🥂
+- It turns out that VS Code doesn't ship MP3 codec with its FFmpeg library (it probably got removed in the past since this extension worked before) and recently added it back in v1.71 - [Issue](https://github.com/microsoft/vscode/issues/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)
+- Reduce extension size - it was funny to see the previous version use Webpack to minimize the 1 file - `controller.js`
+- All previous versions of this extension will not work in any recent VS Code versions
 
 ## [1.1.0] - December 2019
 - Display duration
-- Minor bugfixes
+- Minor bug fixes
 - Remove [Semantic](https://semantic-ui.com)
 - Switch method suspend/resume -> start/stop
 - Update CSS
@@ -58,8 +67,8 @@ References:
 
 Notes:
 - Pumped up the VS Code requirement to 1.40 due to Web Audio API bug, probably from Chrome
-- Just right after the 1st release, the Web Audio API stops working on 1.30 to 1.39 of VS code (VS code 1.38 stable build is on Electron 4 | Chrome 69)
-- The extension works (except the pause/resume function - API bug again) on VS code exploration build 1.37 with ELectron 6 | Chrome 76
+- Just right after the 1st release, the Web Audio API stops working on 1.30 to 1.39 of VS Code (VS Code 1.38 stable build is on Electron 4 | Chrome 69)
+- The extension works (except the pause/resume function - API bug again) on VS Code exploration build 1.37 with Electron 6 | Chrome 76
 - This extension will not be working for a while 😥
 ---
 

README.md

@@ -1,23 +1,31 @@
 # Spectrogram
-This is an extension that play and display spectrogram of mp3 and flac audio files. So, are you now curious to see how your favorite songs' spectrogram looks like? 🦝🤪💭
+This is an extension that plays and displays spectrograms of mp3 and flac audio files. Are you curious to see how your favorite songs' spectrograms look? 🦝🤪💭
 
 ![Spectrogram2.0.0](media/vscodeignore/spec-sc3.png)
 
 ## Release Notes
 
+### 3.0.0
+- Added support for `WAV`
+- Added seekbar
+- Added color configuration
+- Fixed bugs
+- Improved treeview
+- New logo and icon
+
 ### 2.0.0
-- Add `flac` support
-- Add 5s seeking buttons
-- Extension size greatly reduce
+- Added support for `FLAC`
+- Added 5-second seeking buttons
+- Greatly reduced extension size
 
 ### 1.1.0
-- Improve UI
-- Fix pause/resume
-- Fix minor bugs
-- Refactor code
+- Improved UI
+- Fixed pause/resume
+- Fixed minor bugs
+- Refactored code
 
 ### 1.0.1
-- Fix path issue for MacOS
+- Fixed path issue for macOS
 
 ### 1.0.0
 - Initial release of Spectrogram

eslint.config.mjs

@@ -0,0 +1,37 @@
+import globals from 'globals'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.js', '**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.commonjs,
+        ...globals.node,
+        ...globals.mocha,
+        ...globals.browser
+      },
+      ecmaVersion: 2022,
+      sourceType: 'module'
+    },
+    rules: {
+      'comma-dangle': ['error', 'never'],
+      'constructor-super': 'warn',
+      'eol-last': ['error', 'always'],
+      'max-len': ['error', { code: 120 }],
+      'no-const-assign': 'warn',
+      'no-this-before-super': 'warn',
+      'no-throw-literal': 'warn',
+      'no-trailing-spaces': 'error',
+      'no-undef': 'warn',
+      'no-unreachable': 'warn',
+      'no-unused-vars': 'warn',
+      'quote-props': ['error', 'as-needed'],
+      'valid-typeof': 'warn',
+      curly: ['error', 'multi-or-nest'],
+      eqeqeq: 'error',
+      indent: ['error', 2],
+      quotes: ['error', 'single', { allowTemplateLiterals: true }],
+      semi: ['error', 'never']
+    }
+  }]

jsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es6",
+    "target": "ESNext",
     "checkJs": true /* Typecheck .js files. */,
-    "lib": ["es6", "dom"]
+    "lib": ["ESNext", "dom"]
   },
   "exclude": ["node_modules", "dist"]
 }

package.json

@@ -29,10 +29,69 @@
     "views": {
       "explorer": [
         {
-          "id": "spectrogram-explorer",
-          "name": "spectrogram"
+          "id": "spectrogram",
+          "name": "Spectrogram",
+          "icon": "media/icon.svg",
+          "contextualTitle": "Spectrogram"
         }
       ]
+    },
+    "commands": [
+      {
+        "command": "spectrogram.revealInFileExplorer",
+        "title": "Reveal in File Explorer"
+      }
+    ],
+    "menus": {
+      "commandPalette": [
+        {
+          "command": "spectrogram.revealInFileExplorer",
+          "when": "false"
+        }
+      ],
+      "view/item/context": [
+        {
+          "command": "spectrogram.revealInFileExplorer",
+          "when": "view == spectrogram && viewItem == fileItem",
+          "group": "navigation"
+        }
+      ]
+    },
+    "configuration": {
+      "type": "object",
+      "properties": {
+        "spectrogram.rgbColor": {
+          "type": "object",
+          "default": {
+            "r": 100,
+            "g": 0,
+            "b": 0
+          },
+          "description": "RGB color for the spectrogram",
+          "properties": {
+            "r": {
+              "type": "number",
+              "minimum": 0,
+              "maximum": 255
+            },
+            "g": {
+              "type": "number",
+              "minimum": 0,
+              "maximum": 255
+            },
+            "b": {
+              "type": "number",
+              "minimum": 0,
+              "maximum": 255
+            }
+          }
+        },
+        "spectrogram.showDuration": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show audio's duration in the treeview"
+        }
+      }
     }
   },
   "scripts": {
@@ -41,23 +100,29 @@
     "package": "webpack --mode production --devtool hidden-source-map",
     "wp": "webpack",
     "wp-watch": "webpack --watch",
-    "task-clean-output": "ts-node tasks.js clean"
+    "task-clean-output": "ts-node tasks.js clean",
+    "lint": "eslint .",
+    "lint-sum": "eslint --format summary-chart .",
+    "lint-fix": "eslint --fix ."
+  },
+  "dependencies": {
+    "music-metadata": "^10.8.0"
   },
   "devDependencies": {
-    "@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.24.0",
-    "eslint-plugin-jsdoc": "^39.3.6",
-    "pug": "^3.0.2",
+    "@types/node": "^22.10.10",
+    "@types/vscode": "^1.96.0",
+    "@types/vscode-webview": "^1.57.5",
+    "@vscode/codicons": "^0.0.36",
+    "@vscode/vsce": "^3.2.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "eslint": "^9.19.0",
+    "eslint-formatter-summary-chart": "^0.3.0",
+    "eslint-plugin-jsdoc": "^50.6.3",
+    "pug": "^3.0.3",
     "shelljs": "^0.8.5",
-    "ts-node": "^10.9.1",
-    "vsce": "^2.11.0",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0"
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "repository": {
     "type": "git",