feat: implement sorting playlists by various criteria (#33)

* refactor: move most inline style definitions to a main.css stylesheet
* build: bump beta version to 4
* feat: implement library/sorting via strategy design pattern
* refactor: re-organize * rename modules
* style: fix naming, add comments
* docs: update readme, update screenshots

README.md

@@ -8,12 +8,12 @@ duration of a YouTube playlist.
 ## Previews
 
 <p align="center">
-  <img src="screenshots/default.png" width="800">
+  <img src="screenshots/default.jpeg" width="800">
 </p>
 
 <p align="center">
   <img src="screenshots/example1.png" width="400">
-  <img src="screenshots/example1_2.png" width="400">
+  <img src="screenshots/example2.png" width="400">
 </p>
 
 ## Get the extension
@@ -23,6 +23,21 @@ The extension is available for download at:
 - Chrome: [Web Store](https://chrome.google.com/webstore/detail/youtube-playlist-duration/pijbakhgmhhadeakaocjfockpndcpobk)
 - Firefox: [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/youtube-playlist-duration-calc/)
 
+## Features
+
+- Calculate & display the total duration of a YouTube playlist
+- Sort playlists containing upto 100 videos, by the following criteria:
+  - Duration
+  - Channel Name
+  - View Count
+  - Upload Date
+  - Index
+
+> **Note:** The sorting feature is only enabled for playlists containing 100 videos
+> or less. This is because for larger playlists (>100 videos), YouTube only
+> loads videos in batches of 100 at a time as you scroll down the page and this
+> currently produces inconsistent & inaccurate sorting results.
+
 ## Getting Started
 
 This section will explain how to get the project setup locally for development.

package.json

@@ -3,16 +3,17 @@
   "description": "An extension to calculate & display the total duration of a youtube playlist.",
   "author": "nrednav",
   "private": true,
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.4",
   "type": "module",
   "engines": {
     "node": ">=20",
     "pnpm": ">=7"
   },
   "scripts": {
     "dev": "vite",
-    "build:chrome": "vite build --mode chrome",
-    "build:firefox": "vite build --mode firefox",
+    "build:chrome": "pnpm run clean && vite build --mode chrome",
+    "build:firefox": "pnpm run clean && vite build --mode firefox",
+    "clean": "pnpm exec del dist/",
     "watch": "vite build --watch --mode development",
     "lint": "eslint .",
     "format": "prettier --ignore-unknown --write",
@@ -39,5 +40,8 @@
     "overrides": {
       "postcss@<8.4.31": ">=8.4.31"
     }
+  },
+  "dependencies": {
+    "del-cli": "^5.1.0"
   }
 }