Merge pull request #13 from lanly-dev/2.0.0

2.0.0

.eslintrc.json

@@ -1,15 +1,23 @@
 {
+  "env": { "browser": true, "node":true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"],
   "ignorePatterns": ["dist"],
-  "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "plugins": ["@typescript-eslint"],
+  "root": true,
   "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/naming-convention": "warn",
     "@typescript-eslint/semi": ["error", "never"],
-    "arrow-parens": ["warn", "as-needed"],
+    "arrow-parens": ["error", "as-needed"],
     "curly": ["error", "multi-or-nest"],
     "eqeqeq": "warn",
     "no-throw-literal": "warn",

.gitignore

@@ -1,7 +1,7 @@
+.token
 *.vsix
-dist/
-icon/res/
+dist
+media/res
 node_modules
-out
 package-lock.json
-src/ref
+src/ref

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  printWidth: 120,
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'none'
+}

.vscode/extensions.json

@@ -1,5 +1,11 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["dbaeumer.vscode-eslint"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "amodio.tsl-problem-matcher",
+    "ue.alphabetical-sorter",
+    "shardulm94.trailing-spaces",
+    "streetsidesoftware.code-spell-checker"
+  ]
 }

.vscode/launch.json

@@ -6,22 +6,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Extension:webpack",
+      "name": "Launch Extension webpack",
       "type": "extensionHost",
       "request": "launch",
-      "runtimeExecutable": "${execPath}",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "npm: webpack"
+      "preLaunchTask": "${defaultBuildTask}"
     },
     {
-      "name": "Extension:watch",
+      "name": "Launch Extension ts-watch",
       "type": "extensionHost",
       "request": "launch",
-      "runtimeExecutable": "${execPath}",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
-      "outFiles": ["${workspaceFolder}/out/**/*.js"],
-      "preLaunchTask": "npm: watch"
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "preLaunchTask": "ts-watch"
     }
   ]
 }

.vscode/settings.json

@@ -1,11 +1,42 @@
 // Place your settings in this file to overwrite default and user settings.
 {
+  "cSpell.words": [
+    "Adblocker",
+    "Btns",
+    "bufferutil",
+    "deepskyblue",
+    "Execa",
+    "lanly",
+    "letmeplaythemusic",
+    "lmptm",
+    "playpause",
+    "soundcloud",
+    "spoticon",
+    "targetchanged",
+    "targetcreated",
+    "targetdestroyed",
+    "testid",
+    "treeview",
+    "uddir",
+    "ytmusic"
+  ],
+  "cSpell.ignorePaths": [
+    ".git/objects",
+    ".vscode",
+    ".eslintrc.json",
+    "node_modules",
+    "package-lock.json"
+  ],
+  "editor.rulers": [120],
+  "explorer.sortOrder": "type",
   "files.exclude": {
+    "dist": false, // set this to true to hide the "dist" folder with the compiled JS files
     "out": false // set this to true to hide the "out" folder with the compiled JS files
   },
   "search.exclude": {
+    "dist": true, // set this to false to include "dist" folder in search results
     "out": true // set this to false to include "out" folder in search results
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off"
-}
+}

.vscode/tasks.json

@@ -5,30 +5,43 @@
   "tasks": [
     {
       "type": "npm",
-      "script": "watch",
-      "problemMatcher": "$tsc-watch",
+      "script": "wp-watch",
+      "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"],
       "isBackground": true,
       "presentation": {
-        "reveal": "never"
+        "reveal": "never",
+        "group": "watcher"
       },
       "group": {
         "kind": "build",
         "isDefault": true
-      }
+      },
+      "dependsOn": ["npm: task-clean-output"]
+    },
+    {
+      "label": "ts-watch",
+      "type": "npm",
+      "script": "ts-watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": { "reveal": "never" },
+      "dependsOrder": "sequence",
+      "dependsOn": ["npm: task-clean-output", "npm: task-copy-static-assets"]
     },
+    // ↓↓↓↓ For vscode command palette ↓↓↓↓
     {
       "type": "npm",
-      "script": "compile",
-      "dependsOn": ["npm: copy-static-assets"]
+      "script": "test-compile",
+      "dependsOn": ["npm: task-clean-output"]
     },
     {
       "type": "npm",
-      "script": "copy-static-assets",
+      "script": "task-copy-static-assets",
       "isBackground": false
     },
     {
       "type": "npm",
-      "script": "clean-output",
+      "script": "task-clean-output",
       "isBackground": false
     }
   ]

.vscodeignore

@@ -1,14 +1,13 @@
 .gitignore
-.vscode/
+.token
+.vscode
 **/.eslintrc.json
 **/*.map
 **/*.ts
 **/tsconfig.json
-clearOutFiles.ts
-copyStaticAssets.ts
-icon/res/
+media/res
+media/vscodeignore
 node_modules
-out/
-src/
+src
 vsc-extension-quickstart.md
-webpack.config.js
+webpack.config.js

CHANGELOG.md

@@ -4,10 +4,49 @@ All notable changes to the "LetMePlayTheMusic" extension will be documented in t
 
 Check [Keep a Changelog](http://keepachangelog.com) for recommendations on how to structure this file.
 
+### References
+- https://github.com/microsoft/vscode-generator-code/tree/main/generators/app/templates/ext-command-ts
+- https://github.com/microsoft/vscode-extension-samples
+- https://www.conventionalcommits.org
+
 ### TODO
-- Extention settings scope
-- I18n?
-- Site English version issue
+- Brave setting removal
+- I18n
+- Playwright vs Puppeteer option
+- Seek backward/forward setting option
+- Shelljs vs Execa
+- Support for other sites
+
+## [2.0.0] - December 2021
+- Add new feature - treeview
+- Rewrite/refactor most of the code - 30+ commits
+- New float button style - old vs new in Windows
+  <br><img src='./media/btn1.4.png' width='100'/> <img src='./media/btn2.0.png' width='100'/>
+- Fix Spotify bug due to it's style class's changes
+- Fix site English version issue - observes another DOM element to update playback status
+- Merge play and pause commands into one toggle function
+- Move most of the minor inject action to inject script instead
+- Re-config project's configs like eslint, tsconfig, vscode setting, and webpack (.js -> .ts)
+- Rename directories: icon -> media, scripts -> inject
+- Playback icons is sync with the site's playback icons which was behaved contrarily before
+- Webpack 5.65.0 compiled successfully in 9980 ms
+- 15 files, 1.39MB, 1.63.0
+
+### Note
+
+#### This release mostly has more significant impact on the dev side rather than like a product update.
+
+#### One funny thing is that the picture in README.md accounts for a large part of this extension's size.
+
+#### [MediaSession](https://developer.mozilla.org/en-US/docs/Web/API/MediaSession)
+- Soundcloud does update `playbackState` but only call `set` for from press play
+- Spotify does call `set` to update metadata but playbackState always *none*
+- Youtube and YTmusic update `playbackState` consistent with proxy `set` event
+
+#### Puppeteer
+- Seem Puppeteer doesn't keep track pages/tabs' order
+- If click too quick, this shows up: `Error: Execution context is not available in detached frame "about:blank" (are you trying to evaluate?)`
+  Waiting and try/catch was fruitless
 
 ## [1.4.0] - October 2020
 - Add key shortcuts [#7](https://github.com/lanly-dev/VSCode-LMPTM/issues/7)
@@ -24,7 +63,7 @@ Check [Keep a Changelog](http://keepachangelog.com) for recommendations on how t
 - 11 files, 141.77KB, 1.42.0
 
 ## [1.2.0] - December 2019
-- Add browser execuatble file setting [#3](https://github.com/lanly-dev/VSCode-LMPTM/issues/3)
+- Add browser executable file setting [#3](https://github.com/lanly-dev/VSCode-LMPTM/issues/3)
 - Add Incognito/Private mode setting
 - Add [User Data Directory](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) setting [#4](https://github.com/lanly-dev/VSCode-LMPTM/issues/4)
 - 11 files, 192KB, 1.41.0
@@ -36,4 +75,4 @@ Check [Keep a Changelog](http://keepachangelog.com) for recommendations on how t
 
 ## [1.0.0] - August 2019
 - Initial release
-- 2117 files, 5.09MB, 1.35.0
+- 2117 files, 5.09MB, 1.35.0

README.md

@@ -2,27 +2,27 @@
 
 [![Version](https://vsmarketplacebadge.apphb.com/version-short/lanly-dev.letmeplaythemusic.svg)](https://marketplace.visualstudio.com/items?itemName=lanly-dev.letmeplaythemusic)
 
-Tired or get annoyed from switching windows in order to pause or skip a song?  
-Doesn't want to or lazy to install the extra official players to the system?  
-Want to stay focus on your programing instead of those distracting actions and feelings above?
+Tired or get annoyed from switching windows in order to pause or skip a song?\
+Doesn't want to or lazy to install the extra official players to the system?\
+Or perhaps your keyboard doesn't have the handy media hotkeys?\
+Wanted to stay focus on your programing instead of those shortcomings above?
 
-If yes, you are in luck!  
+If yes, you are in luck!\
 This extension launches a Chrome/Chromium browser to the 4 popular music sites and you can control the playback from within your favorite Visual Studio Code editor.
 
-Extra [use case](https://github.com/lanly-dev/VSCode-LMPTM/issues/8#issuecomment-661796089) - you could use this extension to follow programming tutorials on Youtube with the handy seek forward/backward key shortcuts.
+>Extra [use case](https://github.com/lanly-dev/VSCode-LMPTM/issues/8#issuecomment-661796089) - you could use this extension to follow programming tutorials on Youtube with the handy seek forward/backward key shortcuts.
 
-[How to use it?](https://github.com/lanly-dev/VSCode-LMPTM/issues/1)
+>[How to use it?](https://github.com/lanly-dev/VSCode-LMPTM/issues/1)
 
-## Features
+<img src='./media/capture2.0.png' width='700'/>
 
+## Features
 Supports SoundCloud, Spotify, Youtube and Youtube Music
 
 ## Requirements
-
 Required Chromium-based browser
 
 ## Extension Settings
-
 * `lmptm.browserPath`: Specify custom browser executable file path.
 * `lmptm.ignoreDisableSync`: Ignore --disable-sync, this option is specifically for [Brave](https://brave.com) browser.
 * `lmptm.incognitoMode`: Specify whether to launch browser in incognito/private mode.
@@ -31,14 +31,21 @@ Required Chromium-based browser
 * `lmptm.userDataDirectory`: Specify [user data directory](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md), this will be ignored if **User Data** setting is unchecked.
 
 ## Known Issues
-- Work only with English version of the supported music sites
 - Does not work with Opera browser
-- Won't be able to login Youtube and SoundCLoud(email method)
+- Won't be able to login Youtube and SoundCloud(email method)
 
 ## Release Notes
+### 2.0.0
+- Add treeview - so now the the app can switch between tabs
+  1. The page has to be picked before being able to use in the treeview
+  2. You can select the treeview items that have  the play/pause icon
+  3. The emoji ⛏️ means the tab is currently picked
+  4. First click switches the picked icon to target tab, later clicks toggles playing/paused status of the target tab media's playback
+
+- Fix spotify bugs due to it's new UI changes
 
 ### 1.4.0
-- Add key shorcuts
+- Add key shortcuts
 - Add seek 5s forward/backward for Youtube shortcuts
 - Add support for [Youtube Music](https://music.youtube.com/)
 - Add startPages settings