Upgrade web assets (#219)

* Update assets

* Upgrade linting and other improvments

* Correct linting

* Correction and type check improvements

* Correct type check lib

* Fix lint pathing for VSCode

* Remove duplicate babel config

* Remove editorconfig root attribute from web subdir

* Use double quotes around message

* Simplify ESLint config

* Update web assets

* Allow AMD loader in WebPack

* Bump web dependencies

* Only include FA icons in-use

configuration.default.ini

@@ -28,7 +28,7 @@ certificate =
 
 [bot]
 username = botamusique
-comment = Hi, I'm here to play radio, local music or youtube/soundcloud music. Have fun!
+comment = "Hi, I'm here to play radio, local music or youtube/soundcloud music. Have fun!"
 # default volume from 0 to 1.
 volume = 0.1
 stereo = True
@@ -126,10 +126,10 @@ jazz = http://jazz-wr04.ice.infomaniak.ch/jazz-wr04-128.mp3 "Jazz Yeah !"
 
 
 
-# ========================================================
+# =========================================================
 # WARNING: WE DO NOT SUGGEST YOU MODIFY THE FOLLOWING
-#          PARTS, EXCEPT YOU KNOW WHAT YOU ARE DOING.
-# ========================================================
+#          PARTS, EXCEPT IF YOU KNOW WHAT YOU ARE DOING.
+# =========================================================
 [commands]
 # This is a list of characters the bot recognizes as command prefix.
 command_symbol = !:！

configuration.example.ini

@@ -22,7 +22,7 @@ port = 64738
 # 'username' is the user name of the bot.
 # 'comment' is the comment displayed by the bot.
 #username = botamusique
-#comment = Hi, I'm here to play radio, local music or youtube/soundcloud music. Have fun!
+#comment = "Hi, I'm here to play radio, local music or youtube/soundcloud music. Have fun!"
 
 # 'language': Available languages can be found inside lang/ folder.
 #language=en_US

web/.editorconfig

@@ -1,5 +1,3 @@
-root = true
-
 [*]
 charset = utf-8
 insert_final_newline = true

web/.eslintrc.json

@@ -1,38 +1,40 @@
 {
+  "parser": "@babel/eslint-parser",
   "env": {
     "browser": true,
     "es6": true,
     "es2017": true,
     "es2020": true,
+    "es2021": true,
     "jquery": true
   },
   "plugins": [
-    "node",
+    "@babel",
     "import",
-    "jsdoc"
+    "jsdoc",
+    "jquery"
   ],
   "extends": [
     "eslint:recommended",
-    "google",
-    "plugin:node/recommended-module",
     "plugin:import/errors",
     "plugin:import/warnings",
-    "plugin:jsdoc/recommended"
+    "plugin:jsdoc/recommended",
+    "plugin:jquery/deprecated"
   ],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parser": "babel-eslint",
   "rules": {
-    "require-jsdoc": "off",
-    "valid-jsdoc": "off",
-    "jsdoc/require-jsdoc": "off",
     "max-len": ["warn", {
       "code": 120
     }],
+    "linebreak-style": "off",
+    "jsdoc/require-jsdoc": "off",
+    "import/unambiguous": "error",
     "import/no-commonjs": "error",
     "import/no-amd": "error",
-    "linebreak-style": "off"
+    "import/no-nodejs-modules": "error",
+    "import/no-deprecated": "error",
+    "import/extensions": ["error", "always"],
+    "import/no-unresolved": ["error", {
+      "commonjs": true
+    }]
   }
 }

web/.gitattributes

@@ -0,0 +1 @@
+package-lock.json text eol=lf

web/.gitignore

@@ -1 +1,2 @@
-node_modules/
+!*
+node_modules/

web/babel.config.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

web/js/app.mjs

@@ -1,13 +1,23 @@
-import {library, dom} from '@fortawesome/fontawesome-svg-core/index.es';
-import {fas} from '@fortawesome/free-solid-svg-icons/index.es';
-import {far} from '@fortawesome/free-regular-svg-icons/index.es';
-library.add(fas, far);
+import {library, dom} from '@fortawesome/fontawesome-svg-core/index.es.js';
+import {
+  faTimesCircle, faPlus, faCheck, faUpload, faTimes, faTrash, faPlay, faPause, faFastForward, faPlayCircle, faLightbulb,
+  faTrashAlt, faDownload, faSyncAlt, faEdit, faVolumeUp, faVolumeDown, faRobot, faRedo, faRandom, faTasks
+} from '@fortawesome/free-solid-svg-icons/index.es.js';
+import {faFileAlt} from '@fortawesome/free-regular-svg-icons/index.es.js';
+
+library.add(
+  // Solid
+  faTimesCircle, faPlus, faCheck, faUpload, faTimes, faTrash, faPlay, faPause, faFastForward, faPlayCircle, faLightbulb,
+  faTrashAlt, faDownload, faSyncAlt, faEdit, faVolumeUp, faVolumeDown, faRobot, faRedo, faRandom, faTasks,
+  // Regular
+  faFileAlt
+);
 
 // Old application code
 import './main.mjs';
 
 // New application code
-import Theme from './theme.mjs';
+import Theme from './lib/theme.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
   Theme.init();

web/js/lib/text.mjs

@@ -0,0 +1,42 @@
+import {validateString, validateNumber} from './type.mjs';
+
+/**
+ * Truncate string length by characters.
+ *
+ * @param {string} text String to format.
+ * @param {number} limit Maximum number of characters in resulting string.
+ * @param {string} ending Ending to use if string is trucated.
+ *
+ * @returns {string} Formatted string.
+ */
+export function limitChars(text, limit = 50, ending = '...') {
+  validateString(text);
+  validateNumber(limit);
+  validateString(ending);
+
+  // Check if string is already below limit
+  if (text.length <= limit) {
+    return text;
+  }
+
+  // Limit string length by characters
+  return text.substring(0, limit - ending.length) + ending;
+}
+
+/**
+ * Truncate string length by words.
+ *
+ * @param {string} text String to format.
+ * @param {number} limit Maximum number of words in resulting string.
+ * @param {string} ending Ending to use if string is trucated.
+ *
+ * @returns {string} Formatted string.
+ */
+export function limitWords(text, limit = 10, ending = '...') {
+  validateString(text);
+  validateNumber(limit);
+  validateString(ending);
+
+  // Limit string length by words
+  return text.split(' ').splice(0, limit).join(' ') + ending;
+}

web/js/theme.mjs → web/js/lib/theme.mjs

@@ -1,6 +1,6 @@
 export default class {
     /**
-     * @property {boolean} #dark Interal state for dark theme activation.
+     * @property {boolean} dark Interal state for dark theme activation.
      * @private
      */
     static #dark = false;

web/js/lib/type.mjs

@@ -0,0 +1,65 @@
+/**
+ * Checks if `value` is the type `Object` excluding `Function` and `null`
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, otherwise `false`.
+ */
+export function isObject(value) {
+  return (Object.prototype.toString.call(value) === '[object Object]');
+}
+
+/**
+ * Checks if `value` is the type `string`
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, otherwise `false`.
+ */
+export function isString(value) {
+  return (typeof value === 'string');
+}
+
+/**
+ * Checks if `value` is the type `number`
+ *
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a number, otherwise `false`.
+ */
+export function isNumber(value) {
+  return (typeof value === 'number');
+}
+
+/**
+ * Validate parameter is of type object.
+ *
+ * @param {string} value Variable to validate.
+ * @throws Error if not an object.
+ */
+export function validateObject(value) {
+  if (!isObject(value)) {
+    throw new TypeError('Parameter "value" must be of type object.');
+  }
+}
+
+/**
+ * Validate parameter is of type string.
+ *
+ * @param {string} value Variable to validate.
+ * @throws Error if not an string.
+ */
+export function validateString(value) {
+  if (!isString(value)) {
+    throw new TypeError('Parameter "value" must be of type string.');
+  }
+}
+
+/**
+ * Validate parameter is of type number.
+ *
+ * @param {number} value Variable to validate.
+ * @throws Error if not an number.
+ */
+export function validateNumber(value) {
+  if (!isNumber(value)) {
+    throw new TypeError('Parameter "value" must be of type number.');
+  }
+}

web/js/util.js → web/js/lib/util.mjs

@@ -3,38 +3,39 @@ export function isOverflown(element) {
 }
 
 export function hash(string) {
-  if (typeof string != "string") return 0;
+  if (typeof string != 'string') return 0;
   let hash = 0;
   if (string.length === 0) {
     return hash;
   }
   for (let i = 0; i < string.length; i++) {
-    let char = string.charCodeAt(i);
+    const char = string.charCodeAt(i);
     hash = ((hash<<5)-hash)+char;
     hash = hash & hash; // Convert to 32bit integer
   }
   return hash;
 }
 
 export function getColor(string) {
-  let num = hash(string) % 8;
-  switch(num) {
+  const num = hash(string) % 8;
+
+  switch (num) {
     case 0:
-      return "primary";
+      return 'primary';
     case 1:
-      return "secondary";
+      return 'secondary';
     case 2:
-      return "success";
+      return 'success';
     case 3:
-      return "danger";
+      return 'danger';
     case 4:
-      return "warning";
+      return 'warning';
     case 5:
-      return "info";
+      return 'info';
     case 6:
-      return "light";
+      return 'light';
     case 7:
-      return "dark";
+      return 'dark';
   }
 }
 
@@ -52,20 +53,3 @@ export function secondsToStr(seconds) {
   const secs = seconds % 60;
   return ('00' + mins).slice(-2) + ':' + ('00' + secs).slice(-2);
 }
-
-export function coverArtString(title) {
-
-  let nameOfSong = "";
-  // The maximum length before we start truncating
-  const maxLength = 50;
-
-  if (title.length > maxLength) {
-    // Name = longTitleTooLongToBeAGoodAltTex...
-    nameOfSong = title.substr(0, maxLength) + "\u2026";
-  } else {
-    // Name = shortTitle
-    nameOfSong = title;
-  }
-
-  return 'Cover art for ' + nameOfSong;
-}