vixalien · vixalien · May 9, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,22 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    sourceType: "module",
+    project: "./tsconfig.json",
+    warnOnUnsupportedTypeScriptVersion: false,
+  },
+  rules: {
+    "@typescript-eslint/restrict-template-expressions": ["error", {
+      allowNullish: true,
+    }],
+    "prettier/prettier": "error",
+  },
+  plugins: ["@typescript-eslint"],
+  root: true,
+};
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -63,3 +63,21 @@ jobs:
         with:
           folder: ${{ steps.build.outputs.repository }}
           target-folder: repo
+
+  lint:
+    name: ESLint
+    runs-on: ubuntu-latest # on which machine to run
+    steps: # list of steps
+      - name: Install NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Code Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Code Linting
+        run: yarn lint
diff --git a/.prettierrc b/.prettierrc
diff --git a/build-aux/flatpak/modules/yarn-deps-sources.json b/build-aux/flatpak/modules/yarn-deps-sources.json
diff --git a/package.json b/package.json
@@ -3,33 +3,37 @@
   "version": "1.0.0",
   "description": "An elegant music streaming app",
   "main": "src/main.ts",
-  "type": "module",
   "repository": "https://github.com/vixalien/muzika",
   "author": "Angelo Verlain <hey@vixalien.com>",
   "license": "MIT",
+  "type": "module",
   "dependencies": {
     "@lemaik/qrcode-svg": "^1.2.0",
     "libmuse": "^0.0.97",
     "lodash-es": "^4.17.21",
-    "path-to-regexp": "^6.2.1",
-    "typescript": "^5.3.3",
-    "web-streams-polyfill": "^3.2.1"
+    "path-to-regexp": "^6.2.2",
+    "typescript": "^5.4.5",
+    "web-streams-polyfill": "^4.0.0"
   },
   "devDependencies": {
     "@types/core-js": "^2.5.8",
     "@types/lodash-es": "^4.17.12",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "core-js": "^3.35.1",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "core-js": "^3.37.0",
+    "esbuild": "^0.21.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "event-target-polyfill": "^0.0.4",
-    "headers-polyfill": "^4.0.2",
-    "minimist": "^1.2.8"
+    "headers-polyfill": "^4.0.3",
+    "minimist": "^1.2.8",
+    "prettier": "^3.2.5"
   },
   "scripts": {
     "build": "node lib/build.js",
     "typecheck": "tsc --strict --noEmit",
-    "generate-sources": "flatpak-node-generator yarn yarn.lock -o build-aux/flatpak/modules/yarn-deps-sources.json"
+    "generate-sources": "flatpak-node-generator yarn yarn.lock -o build-aux/flatpak/modules/yarn-deps-sources.json",
+    "lint": "eslint --ext .ts,.tsx,.js,.jsx src types"
   }
 }
diff --git a/src/application.ts b/src/application.ts
@@ -37,8 +37,8 @@ export class Application extends Adw.Application {
       },
       {
         name: "about",
-        activate: this.show_about_dialog_cb.bind(this)
-      }
+        activate: this.show_about_dialog_cb.bind(this),
+      },
     ]);
 
     this.set_accels_for_action("app.quit", ["<primary>q"]);

diff --git a/src/components/carousel/card.ts b/src/components/carousel/card.ts
@@ -1,6 +1,5 @@
 import Gtk from "gi://Gtk?version=4.0";
 import GObject from "gi://GObject";
-import GLib from "gi://GLib";
 
 import type {
   ArtistRun,
@@ -18,7 +17,6 @@ import { get_thumbnail_with_size } from "../webimage.js";
 import { pretty_subtitles } from "src/util/text.js";
 import { MixedCardItem } from "../library/mixedcard.js";
 import { DynamicActionState, DynamicImage } from "../dynamic-image";
-import { SignalListeners } from "src/util/signal-listener.js";
 import { MenuHelper } from "src/util/menu/index.js";
 import { menuLikeRow } from "src/util/menu/like.js";
 import { setup_link_label } from "src/util/label.js";
@@ -33,23 +31,19 @@ enum CarouselImageType {
 
 export class CarouselCard extends Gtk.Box {
   static {
-    GObject.registerClass({
-      GTypeName: "CarouselCard",
-      Template:
-        "resource:///com/vixalien/muzika/ui/components/carousel/card.ui",
-      Children: [
-        "dynamic_image",
-      ],
-      Properties: {
-        state: get_state_pspec(),
+    GObject.registerClass(
+      {
+        GTypeName: "CarouselCard",
+        Template:
+          "resource:///com/vixalien/muzika/ui/components/carousel/card.ui",
+        Children: ["dynamic_image"],
+        Properties: {
+          state: get_state_pspec(),
+        },
+        InternalChildren: ["title", "subtitles", "explicit", "subtitle"],
       },
-      InternalChildren: [
-        "title",
-        "subtitles",
-        "explicit",
-        "subtitle",
-      ],
-    }, this);
+      this,
+    );
   }
 
   dynamic_image!: DynamicImage;
@@ -81,10 +75,7 @@ export class CarouselCard extends Gtk.Box {
     this.content = undefined;
   }
 
-  private setup_image(
-    image_type: CarouselImageType,
-    thumbnails: Thumbnail[],
-  ) {
+  private setup_image(image_type: CarouselImageType, thumbnails: Thumbnail[]) {
     switch (image_type) {
       case CarouselImageType.AVATAR:
         this.dynamic_image.avatar_thumbnails = thumbnails;
@@ -93,7 +84,7 @@ export class CarouselCard extends Gtk.Box {
         this.dynamic_image.persistent_play_button = true;
         this.dynamic_image.cover_thumbnails = thumbnails;
         break;
-        // TODO: fix
+      // TODO: fix
       case CarouselImageType.PLAYLIST_IMAGE:
         this.dynamic_image.playlist = true;
         this.dynamic_image.cover_thumbnails = thumbnails;
@@ -179,23 +170,23 @@ export class CarouselCard extends Gtk.Box {
         menuLikeRow(
           song.likeStatus,
           song.videoId,
-          (likeStatus) => song.likeStatus = likeStatus,
+          (likeStatus) => (song.likeStatus = likeStatus),
         ),
         [_("Start radio"), `queue.play-song("${song.videoId}?radio=true")`],
         [_("Play next"), `queue.add-song("${song.videoId}?next=true")`],
         [_("Add to queue"), `queue.add-song("${song.videoId}")`],
         [_("Save to playlist"), `win.add-to-playlist("${song.videoId}")`],
         song.album
           ? [
-            _("Go to album"),
-            `navigator.visit("muzika:album:${song.album.id}")`,
-          ]
+              _("Go to album"),
+              `navigator.visit("muzika:album:${song.album.id}")`,
+            ]
           : null,
         song.artists.length > 1
           ? [
-            _("Go to artist"),
-            `navigator.visit("muzika:artist:${song.artists[0].id}")`,
-          ]
+              _("Go to artist"),
+              `navigator.visit("muzika:artist:${song.artists[0].id}")`,
+            ]
           : null,
       ];
     });
@@ -213,15 +204,15 @@ export class CarouselCard extends Gtk.Box {
     this.menu_helper.props = [
       artist.shuffleId
         ? [
-          _("Shuffle play"),
-          `queue.play-playlist("${artist.shuffleId}?next=true")`,
-        ]
+            _("Shuffle play"),
+            `queue.play-playlist("${artist.shuffleId}?next=true")`,
+          ]
         : null,
       artist.radioId
         ? [
-          _("Start radio"),
-          `queue.play-playlist("${artist.radioId}?next=true")`,
-        ]
+            _("Start radio"),
+            `queue.play-playlist("${artist.radioId}?next=true")`,
+          ]
         : null,
     ];
   }
@@ -253,17 +244,17 @@ export class CarouselCard extends Gtk.Box {
         menuLikeRow(
           video.likeStatus,
           video.videoId,
-          (likeStatus) => video.likeStatus = likeStatus,
+          (likeStatus) => (video.likeStatus = likeStatus),
         ),
         [_("Start radio"), `queue.play-song("${video.videoId}?radio=true")`],
         [_("Play next"), `queue.add-song("${video.videoId}?next=true")`],
         [_("Add to queue"), `queue.add-song("${video.videoId}")`],
         [_("Save to playlist"), `win.add-to-playlist("${video.videoId}")`],
         video.artists && video.artists.length > 1
           ? [
-            _("Go to artist"),
-            `navigator.visit("muzika:artist:${video.artists[0].id}")`,
-          ]
+              _("Go to artist"),
+              `navigator.visit("muzika:artist:${video.artists[0].id}")`,
+            ]
           : null,
       ];
     });
@@ -283,23 +274,23 @@ export class CarouselCard extends Gtk.Box {
         menuLikeRow(
           video.likeStatus,
           video.videoId,
-          (likeStatus) => video.likeStatus = likeStatus,
+          (likeStatus) => (video.likeStatus = likeStatus),
         ),
         [_("Start radio"), `queue.play-song("${video.videoId}?radio=true")`],
         [_("Play next"), `queue.add-song("${video.videoId}?next=true")`],
         [_("Add to queue"), `queue.add-song("${video.videoId}")`],
         [_("Save to playlist"), `win.add-to-playlist("${video.videoId}")`],
         video.album
           ? [
-            _("Go to album"),
-            `navigator.visit("muzika:album:${video.album.id}")`,
-          ]
+              _("Go to album"),
+              `navigator.visit("muzika:album:${video.album.id}")`,
+            ]
           : null,
         video.artists.length > 1
           ? [
-            _("Go to artist"),
-            `navigator.visit("muzika:artist:${video.artists[0].id}")`,
-          ]
+              _("Go to artist"),
+              `navigator.visit("muzika:artist:${video.artists[0].id}")`,
+            ]
           : null,
       ];
     });
@@ -317,15 +308,15 @@ export class CarouselCard extends Gtk.Box {
     this.menu_helper.props = [
       playlist.shuffleId
         ? [
-          _("Shuffle play"),
-          `queue.play-playlist("${playlist.shuffleId}?next=true")`,
-        ]
+            _("Shuffle play"),
+            `queue.play-playlist("${playlist.shuffleId}?next=true")`,
+          ]
         : null,
       playlist.radioId
         ? [
-          _("Start radio"),
-          `queue.play-playlist("${playlist.radioId}?next=true")`,
-        ]
+            _("Start radio"),
+            `queue.play-playlist("${playlist.radioId}?next=true")`,
+          ]
         : null,
       [
         _("Play next"),
@@ -351,15 +342,15 @@ export class CarouselCard extends Gtk.Box {
     this.menu_helper.props = [
       playlist.shuffleId
         ? [
-          _("Shuffle play"),
-          `queue.play-playlist("${playlist.shuffleId}?next=true")`,
-        ]
+            _("Shuffle play"),
+            `queue.play-playlist("${playlist.shuffleId}?next=true")`,
+          ]
         : null,
       playlist.radioId
         ? [
-          _("Start radio"),
-          `queue.play-playlist("${playlist.radioId}?next=true")`,
-        ]
+            _("Start radio"),
+            `queue.play-playlist("${playlist.radioId}?next=true")`,
+          ]
         : null,
       [
         _("Play next"),
@@ -386,15 +377,15 @@ export class CarouselCard extends Gtk.Box {
     this.menu_helper.props = [
       album.shuffleId
         ? [
-          _("Shuffle play"),
-          `queue.play-playlist("${album.shuffleId}?next=true")`,
-        ]
+            _("Shuffle play"),
+            `queue.play-playlist("${album.shuffleId}?next=true")`,
+          ]
         : null,
       album.radioId
         ? [
-          _("Start radio"),
-          `queue.play-playlist("${album.radioId}?next=true")`,
-        ]
+            _("Start radio"),
+            `queue.play-playlist("${album.radioId}?next=true")`,
+          ]
         : null,
       [
         _("Play next"),
@@ -407,9 +398,9 @@ export class CarouselCard extends Gtk.Box {
       ],
       album.artists.length > 1
         ? [
-          _("Go to artist"),
-          `navigator.visit("muzika:artist:${album.artists[0].id}")`,
-        ]
+            _("Go to artist"),
+            `navigator.visit("muzika:artist:${album.artists[0].id}")`,
+          ]
         : null,
     ];
   }