Fixed date and to bundled fa

2023-11-27 15:26:26 +03:00 · 2023-11-27 15:26:26 +03:00 · 376a4d276f
commit 376a4d276f
parent b0c7dd8709
12 changed files with 12207 additions and 78 deletions
--- a/app/src/DTO/ItemDTO.py
+++ b/app/src/DTO/ItemDTO.py
@ -1,3 +1,4 @@
+from email.utils import formatdate
 import json
 import time
 from dataclasses import dataclass, field
@ -21,7 +22,7 @@ class ItemDTO:
    output_template: str = None
    timestamp: float = time.time_ns()
    is_live: bool = None
-    datetime: str = None
+    datetime: str = formatdate(time.time())

    # yt-dlp injected fields.
    tmpfilename: str = None
--- a/app/src/DataStore.py
+++ b/app/src/DataStore.py
@ -1,6 +1,8 @@
 from collections import OrderedDict
-from datetime import datetime
+from datetime import datetime, timezone
+from email.utils import formatdate
 import json
+import logging
 import sqlite3
 from src.Utils import calcDownloadPath
 from src.Config import Config
@ -50,7 +52,7 @@ class DataStore:
        with sqlite3.connect(self.db_file) as db:
            db.row_factory = sqlite3.Row
            cursor = db.execute(
-                f'SELECT "id", "data" FROM "history" WHERE "type" = ? ORDER BY "created_at" ASC',
+                f'SELECT "id", "data", "created_at" FROM "history" WHERE "type" = ? ORDER BY "created_at" ASC',
                (self.type,)
            )

@ -59,10 +61,9 @@ class DataStore:
                key: str = data.pop('_id')
                item: ItemDTO = ItemDTO(**data)
                item._id = key
-                if not item.datetime:
-                    item.datetime = datetime.fromtimestamp(item.timestamp / 1_000_000_000).strftime(
-                        '%Y-%m-%dT%H:%M:%SZ')
-
+                item.datetime = formatdate(datetime.strptime(
+                    row['created_at'], '%Y-%m-%d %H:%M:%S').replace(tzinfo=timezone.utc).timestamp()
+                )
                items.append((row['id'], item))

        return items
@ -91,6 +92,7 @@ class DataStore:
        VALUES (?, ?, ?, ?)
        ON CONFLICT DO UPDATE SET "type" = ?, "url" = ?, "data" = ?
        """
+        item.datetime = None
        with sqlite3.connect(self.db_file) as db:
            db.execute(sqlStatement.strip(), (
                item._id,
--- a/app/src/DownloadQueue.py
+++ b/app/src/DownloadQueue.py
@ -1,4 +1,5 @@
 import asyncio
+from email.utils import formatdate
 import logging
 import os
 import yt_dlp
@ -104,7 +105,8 @@ class DownloadQueue:
                    ytdlp_config=ytdlp_config,
                    output_template=output_template if output_template else self.config.output_template,
                    error=error,
-                    datetime=datetime.now(timezone.utc).strftime('%Y-%m-%d %H:%M:%S %z'),
+                    datetime=formatdate(datetime.now(
+                        timezone.utc).timetuple()),
                    is_live=entry['is_live'] if 'is_live' in entry else None,
                )

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -8,6 +8,10 @@
      "name": "YTPTube",
      "version": "0.1.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/vue-fontawesome": "^3.0.5",
        "@vueuse/core": "^10.6.1",
        "bulma": "^0.9.4",
        "core-js": "^3.8.3",
@ -22,7 +26,7 @@
        "@creativebulma/bulma-tooltip": "^1.2.0",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
-        "@vue/cli-service": "~5.0.0",
+        "@vue/cli-service": "^5.0.8",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3"
      }
@ -1882,6 +1886,60 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.5.tgz",
+      "integrity": "sha512-isZZ4+utQH9qg9cWxWYHQ9GwI3r5FeO7GnmzKYV+gbjxcptQhh+F99iZXi1Y9AvFUEgy8kRpAdvDlbb3drWFrw==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -2197,9 +2255,9 @@
      }
    },
    "node_modules/@types/connect-history-api-fallback": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.3.tgz",
-      "integrity": "sha512-6mfQ6iNvhSKCZJoY6sIG3m0pKkdUcweVNOLuBBKvoWGzl2yRxOJcYOTRyLKt3nxXvBLJWa6QkW//tgbIwJehmA==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
      "dev": true,
      "dependencies": {
        "@types/express-serve-static-core": "*",
@ -2305,9 +2363,9 @@
      }
    },
    "node_modules/@types/node-forge": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.9.tgz",
-      "integrity": "sha512-meK88cx/sTalPSLSoCzkiUB4VPIFHmxtXm5FaaqRDqBX2i/Sy8bJ4odsan0b20RBjPh06dAQ+OTTdnyQyhJZyQ==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.10.tgz",
+      "integrity": "sha512-y6PJDYN4xYBxwd22l+OVH35N+1fCYWiuC3aiP2SlXVE6Lo7SS+rSx9r89hLxrP4pn6n1lBGhHJ12pj3F3Mpttw==",
      "dev": true,
      "dependencies": {
        "@types/node": "*"
@ -2388,9 +2446,9 @@
      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
    },
    "node_modules/@types/ws": {
-      "version": "8.5.9",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.9.tgz",
-      "integrity": "sha512-jbdrY0a8lxfdTp/+r7Z4CkycbOFN8WX+IOchLJr3juT/xzbJ8URyTVSJ/hvNdadTgM1mnedb47n+Y31GsFnQlg==",
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
      "dev": true,
      "dependencies": {
        "@types/node": "*"
@ -4370,13 +4428,10 @@
      "dev": true
    },
    "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
-      "engines": {
-        "node": ">= 12"
-      }
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
    },
    "node_modules/commondir": {
      "version": "1.0.1",
@ -4914,6 +4969,14 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
    "node_modules/debounce": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@ -6773,6 +6836,15 @@
        "node": ">=12"
      }
    },
+    "node_modules/html-minifier-terser/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/html-tags": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@ -10567,12 +10639,6 @@
        "url": "https://opencollective.com/webpack"
      }
    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -11149,6 +11215,18 @@
      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
      "dev": true
    },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
+      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
    "node_modules/vue-template-es2015-compiler": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,6 +9,10 @@
    "watch": "vue-cli-service build --watch"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
    "@vueuse/core": "^10.6.1",
    "bulma": "^0.9.4",
    "core-js": "^3.8.3",
@ -23,7 +27,7 @@
    "@creativebulma/bulma-tooltip": "^1.2.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-service": "^5.0.8",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -3,12 +3,10 @@

 <head>
  <meta charset="utf-8">
+  <meta name="theme-color" content="#000000">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
--- a/frontend/src/assets/css/bulma-darker.css
+++ b/frontend/src/assets/css/bulma-darker.css
--- a/frontend/src/components/Form-Add.vue
+++ b/frontend/src/components/Form-Add.vue
@ -8,7 +8,7 @@
              <input type="url" class="input" id="url" placeholder="Video or playlist link"
                :disabled="!config.isConnected || addInProgress" v-model="url">
              <span class="icon is-small is-left">
-                <i class="fa-solid fa-link"></i>
+                <font-awesome-icon icon="fa-solid fa-link" />
              </span>
            </div>
          </div>
@ -59,7 +59,7 @@
              :class="{ 'is-loading': !config.isConnected || addInProgress }"
              :disabled="!config.isConnected || addInProgress || !url">
              <span class="icon">
-                <i class="fa-solid fa-plus"></i>
+                <font-awesome-icon icon="fa-solid fa-plus" />
              </span>
              <span>Add Link</span>
            </button>
@ -69,7 +69,7 @@
              data-tooltip="Show advanced options" :class="{ 'is-loading': !config.isConnected }"
              :disabled="!config.isConnected">
              <span class="icon">
-                <i class="fa-solid fa-cog"></i>
+                <font-awesome-icon icon="fa-solid fa-cog" />
              </span>
            </button>
          </div>
@ -130,7 +130,7 @@
                <button type="submit" class="button is-danger" @click="resetConfig" :disabled="!config.isConnected"
                  data-tooltip="This configuration are stored locally in your browser.">
                  <span class="icon">
-                    <i class="fa-solid fa-trash"></i>
+                    <font-awesome-icon icon="fa-solid fa-trash" />
                  </span>
                  <span>Reset Local Configuration</span>
                </button>
--- a/frontend/src/components/Page-Completed.vue
+++ b/frontend/src/components/Page-Completed.vue
@ -8,7 +8,7 @@
      <button type="button" class="button is-fullwidth is-ghost is-inverted" @click="masterSelectAll = !masterSelectAll">
        <span class="icon-text">
          <span class="icon">
-            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular  fa-square'"></i>
+            <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
          </span>
          <span v-if="!masterSelectAll">Select All</span>
          <span v-else>Unselect All</span>
@ -20,7 +20,7 @@
        @click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
        <span class="icon-text">
          <span class="icon">
-            <i class="fa-solid fa-trash-can"></i>
+            <font-awesome-icon icon="fa-solid fa-trash-can" />
          </span>
          <span>Remove Selected</span>
        </span>
@ -30,7 +30,7 @@
      <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
        <span class="icon-text">
          <span class="icon">
-            <i class="fa-solid fa-circle-check"></i>
+            <font-awesome-icon icon="fa-solid fa-circle-check" />
          </span>
          <span>Clear Completed</span>
        </span>
@ -40,7 +40,7 @@
      <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
        <span class="icon-text">
          <span class="icon">
-            <i class="fa-solid fa-circle-xmark"></i>
+            <font-awesome-icon icon="fa-solid fa-circle-xmark" />
          </span>
          <span>Clear Failed</span>
        </span>
@ -50,7 +50,7 @@
      <button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
        <span class="icon-text">
          <span class="icon">
-            <i class="fa-solid fa-rotate-right"></i>
+            <font-awesome-icon icon="fa-solid fa-rotate-right" />
          </span>
          <span>Re-queue Failed</span>
        </span>
@ -77,9 +77,10 @@
            </div>
            <div class="column is-4 has-text-centered">
              <span class="icon-text">
-                <span class="icon">
-                  <i v-if="item.status == 'finished'" class="has-text-success fa-solid fa-circle-check"></i>
-                  <i v-else class="has-text-danger fa-solid fa-times-circle"></i>
+                <span class="icon"
+                  :class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
+                  <font-awesome-icon
+                    :icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
                </span>
                <span>{{ capitalize(item.status) }}</span>
              </span>
@ -104,7 +105,7 @@
                @click="reQueueItem(item._id, item)">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-rotate-right"></i>
+                    <font-awesome-icon icon="fa-solid fa-rotate-right" />
                  </span>
                  <span>Re-queue</span>
                </span>
@ -115,7 +116,7 @@
                :download="item.filename?.split('/').reverse()[0]">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-download"></i>
+                    <font-awesome-icon icon="fa-solid fa-download" />
                  </span>
                  <span>Download</span>
                </span>
@ -125,7 +126,7 @@
              <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-trash-can"></i>
+                    <font-awesome-icon icon="fa-solid fa-trash-can" />
                  </span>
                  <span>Remove</span>
                </span>
@ -135,7 +136,7 @@
              <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-up-right-from-square"></i>
+                    <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
                  </span>
                  <span>Visit Link</span>
                </span>
@ -148,18 +149,20 @@
  </div>

  <div class="content has-text-centered" v-if="!hasCompleted">
-    <p>
+    <p v-if="config.isConnected">
      <span class="icon-text">
        <span class="icon has-text-success">
-          <i class="fa-solid fa-circle-check"></i>
+          <font-awesome-icon icon="fa-solid fa-circle-check" />
        </span>
-        <span v-if="config.isConnected">No completed downloads.</span>
-        <span v-else>
-          <span class="icon-text">
-            <span class="icon is-loading"></span>
-            <span>Connecting...</span>
-          </span>
+        <span>No downloads records.</span>
+      </span>
+    </p>
+    <p v-else>
+      <span class="icon-text">
+        <span class="icon">
+          <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
        </span>
+        <span>Connecting...</span>
      </span>
    </p>
  </div>
--- a/frontend/src/components/Page-Downloading.vue
+++ b/frontend/src/components/Page-Downloading.vue
@ -8,7 +8,7 @@
      <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
        <span class="icon-text">
          <span class="icon">
-            <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'"></i>
+            <font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
          </span>
          <span v-if="!masterSelectAll">Select All</span>
          <span v-else>Unselect All</span>
@ -20,7 +20,7 @@
        @click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
        <span class="icon-text">
          <span class="icon">
-            <i class="fa-solid fa-trash-can"></i>
+            <font-awesome-icon icon="fa-solid fa-trash-can" />
          </span>
          <span>Cancel Selected</span>
        </span>
@ -45,9 +45,9 @@
            </div>
            <div class="column is-4 has-text-centered">
              <span class="icon-text">
-                <span class="icon">
-                  <i v-if="item.status == 'downloading'" class="has-text-success fa-solid fa-download"></i>
-                  <i v-else class="fa-solid fa-spinner fa-spin"></i>
+                <span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
+                  <font-awesome-icon
+                    :icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
                </span>
                <span>{{ capitalize(item.status) }}</span>
              </span>
@ -70,7 +70,7 @@
              <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-trash-can"></i>
+                    <font-awesome-icon icon="fa-solid fa-trash-can" />
                  </span>
                  <span>Cancel</span>
                </span>
@ -80,7 +80,7 @@
              <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
                <span class="icon-text">
                  <span class="icon">
-                    <i class="fa-solid fa-up-right-from-square"></i>
+                    <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
                  </span>
                  <span>Visit Link</span>
                </span>
@ -93,18 +93,20 @@
  </div>

  <div class="content has-text-centered" v-if="!hasQueuedItems">
-    <p>
+    <p v-if="config.isConnected">
      <span class="icon-text">
        <span class="icon has-text-success">
-          <i class="fa-solid fa-circle-check"></i>
+          <font-awesome-icon icon="fa-solid fa-circle-check" />
        </span>
-        <span v-if="config.isConnected">No Items are queued for downloading.</span>
-        <span v-else>
-          <span class="icon-text">
-            <span class="icon is-loading"></span>
-            <span>Connecting...</span>
-          </span>
+        <span>No queued items.</span>
+      </span>
+    </p>
+    <p v-else>
+      <span class="icon-text">
+        <span class="icon">
+          <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
        </span>
+        <span>Connecting...</span>
      </span>
    </p>
  </div>
--- a/frontend/src/components/Page-Header.vue
+++ b/frontend/src/components/Page-Header.vue
@ -10,8 +10,7 @@
      <div class="navbar-item">
        <span class="icon-text" :class="config.isConnected ? 'has-text-success' : 'has-text-danger'">
          <span class="icon">
-            <i v-if="config.isConnected" class="fa-solid fa-wifi"></i>
-            <i v-else class="fa-solid fa-signal"></i>
+            <font-awesome-icon :icon="config.isConnected ? 'fa-solid fa-wifi' : 'fa-solid fa-signal'" />
          </span>
          <span>
            {{ config.isConnected ? 'Connected' : 'Connecting' }}
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -1,12 +1,24 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import Toast from 'vue-toastification'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
+  faSpinner, faWifi, faSignal
+} from '@fortawesome/free-solid-svg-icons'
+
+import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
+
 import 'vue-toastification/dist/index.css'
 import 'bulma/css/bulma.css'
 import './assets/css/style.css'
-import './assets/css/bulma-dark.css'
+//import './assets/css/bulma-dark.css'
+import './assets/css/bulma-darker.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';

+library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
+  faSquare, faSquareCheck, faSpinner, faWifi, faSignal)
 const app = createApp(App);

 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);
@ -27,4 +39,6 @@ app.use(Toast, {
  newestOnTop: true
 });

+app.component('font-awesome-icon', FontAwesomeIcon)
+
 app.mount('#app')