add total duration, prevent multiple calls to restart, fix #765 #782

2024-10-05 22:44:04 +02:00 · 2024-10-05 22:44:04 +02:00 · 216fd97df9
commit 216fd97df9
parent d35238fe4b
9 changed files with 122 additions and 111 deletions
--- a/engine/src/api/routes.rs
+++ b/engine/src/api/routes.rs
@ -946,6 +946,14 @@ pub async fn process_control(
    let manager = controllers.lock().unwrap().get(*id).unwrap();
    manager.list_init.store(true, Ordering::SeqCst);

+    if manager.is_processing.load(Ordering::SeqCst) {
+        return Err(ServiceError::Conflict(
+            "A command is already being processed, please wait".to_string(),
+        ));
+    }
+
+    manager.is_processing.store(true, Ordering::SeqCst);
+
    match proc.into_inner().command {
        ProcessCtl::Status => {
            if manager.is_alive.load(Ordering::SeqCst) {
@ -974,6 +982,8 @@ pub async fn process_control(
        }
    }

+    manager.is_processing.store(false, Ordering::SeqCst);
+
    Ok(web::Json("Success"))
 }

--- a/engine/src/player/controller.rs
+++ b/engine/src/player/controller.rs
@ -68,6 +68,7 @@ pub struct ChannelManager {
    pub ingest_is_running: Arc<AtomicBool>,
    pub is_terminated: Arc<AtomicBool>,
    pub is_alive: Arc<AtomicBool>,
+    pub is_processing: Arc<AtomicBool>,
    pub filter_chain: Option<Arc<Mutex<Vec<String>>>>,
    pub current_date: Arc<Mutex<String>>,
    pub list_init: Arc<AtomicBool>,
--- a/frontend/components/PlayerControl.vue
+++ b/frontend/components/PlayerControl.vue
@ -48,14 +48,14 @@
                </div>

                <div class="col-span-1 xs:col-span-2 p-1">
-                    <div class="w-full h-full bg-base-100 rounded flex items-center p-3 shadow">
-                        <div class="w-full h-full flex flex-col">
+                    <div class="w-full h-full bg-base-100 rounded flex items-center px-3 shadow">
+                        <div class="w-full h-full flex flex-col content-center">
                            <div v-if="playlistStore.ingestRuns" class="h-1/3 font-bold truncate">
                                {{ t('control.ingest') }}
                            </div>
                            <div
                                v-else
-                                class="h-1/3 font-bold text truncate"
+                                class="h-1/3 font-bold text truncate content-center leading-3"
                                :class="{ 'text-base-content/60': playlistStore.current.category === 'advertisement' }"
                                :title="playlistStore.current.title || filename(playlistStore.current.source)"
                            >
@ -65,7 +65,7 @@
                                    t('control.noClip')
                                }}
                            </div>
-                            <div class="grow">
+                            <div class="grow content-center leading-5">
                                <strong>{{ t('player.duration') }}:</strong>
                                {{ secToHMS(playlistStore.current.duration) }} | <strong>{{ t('player.in') }}:</strong>
                                {{ secToHMS(playlistStore.current.in) }} |
@ -76,8 +76,20 @@
                                    | <strong>{{ t('player.shift') }}:</strong>
                                    {{ secToHMS(playlistStore.shift) }}
                                </template>
+                                <div>
+                                    <strong>{{ t('player.total') }}:</strong>
+                                    {{
+                                        secToHMS(
+                                            playlistStore.playlist.reduce(
+                                                (total, { in: seek, out }) => total + (out - seek),
+                                                0
+                                            )
+                                        )
+                                    }}
                                </div>
-                            <div class="h-1/3">
+                            </div>
+
+                            <div class="h-1/3 content-center">
                                <progress
                                    class="progress progress-accent w-full"
                                    :value="
@ -323,6 +335,8 @@ const controlProcess = throttle(async (state: string) => {
        method: 'POST',
        headers: { ...configStore.contentType, ...authStore.authHeader },
        body: JSON.stringify({ command: state }),
+    }).catch((e) => {
+        indexStore.msgAlert('error', e.data, 3)
    })
 }, 800)

@ -339,6 +353,8 @@ const controlPlayout = throttle(async (state: string) => {
        method: 'POST',
        headers: { ...configStore.contentType, ...authStore.authHeader },
        body: JSON.stringify({ control: state }),
+    }).catch((e) => {
+        indexStore.msgAlert('error', e.data, 3)
    })
 }, 800)
 </script>
--- a/frontend/i18n/locales/de-DE.js
+++ b/frontend/i18n/locales/de-DE.js
@ -57,6 +57,7 @@ export default {
        play: 'Abspielen',
        title: 'Titel',
        duration: 'Dauer',
+        total: 'Gesamt',
        in: 'Eingang',
        out: 'Ausgang',
        ad: 'Werbung',
--- a/frontend/i18n/locales/en-US.js
+++ b/frontend/i18n/locales/en-US.js
@ -57,6 +57,7 @@ export default {
        play: 'Play',
        title: 'Title',
        duration: 'Duration',
+        total: 'Total',
        in: 'In',
        out: 'Out',
        ad: 'Ad',
--- a/frontend/i18n/locales/pt-BR.js
+++ b/frontend/i18n/locales/pt-BR.js
@ -57,6 +57,7 @@ export default {
        play: 'Play',
        title: 'Título',
        duration: 'Duração',
+        total: 'Total',
        in: 'Início',
        out: 'Fim',
        ad: 'Ad',
--- a/frontend/i18n/locales/ru-RU.js
+++ b/frontend/i18n/locales/ru-RU.js
@ -57,6 +57,7 @@ export default {
        play: 'Проиграть',
        title: 'Название файла',
        duration: 'Длительность',
+        total: 'Всего',
        in: 'Начало',
        out: 'Конец',
        ad: 'Реклама',
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -31,7 +31,7 @@
        "@nuxtjs/tailwindcss": "^6.12.1",
        "@types/lodash-es": "^4.17.12",
        "@types/video.js": "^7.3.58",
-        "daisyui": "^4.12.11",
+        "daisyui": "^4.12.12",
        "mini-svg-data-uri": "^1.4.4",
        "postcss": "^8.4.47",
        "postcss-loader": "^8.1.1",
@ -1179,13 +1179,21 @@
      }
    },
    "node_modules/@eslint/compat": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.1.1.tgz",
-      "integrity": "sha512-lpHyRyplhGPL5mGEh6M9O5nnKk0Gz4bFI+Zu6tKlPpDUN7XshWvH9C/px4UVm87IAANE0W81CEsNGbS1KlzXpA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.0.tgz",
+      "integrity": "sha512-CkPWddN7J9JPrQedEr2X7AjK9y1jaMJtxZ4A/+jTMFA2+n5BWhcKHW/EbJyARqg2zzQfgtWUtVmG3hrG6+nGpg==",
      "dev": true,
      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": "^9.10.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
      }
    },
    "node_modules/@eslint/config-array": {
@ -1339,9 +1347,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.11.1.tgz",
-      "integrity": "sha512-/qu+TWz8WwPWc7/HcIJKi+c+MOm46GdVaSlTTQcaqaL53+GsoA6MxWp5PtTx48qbSP7ylM1Kn7nhvkugfJvRSA==",
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.12.0.tgz",
+      "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==",
      "devOptional": true,
      "license": "MIT",
      "engines": {
@ -1381,6 +1389,32 @@
        "node": ">=14"
      }
    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
+      "integrity": "sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.5",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.5.tgz",
+      "integrity": "sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@humanfs/core": "^0.19.0",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
    "node_modules/@humanwhocodes/module-importer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@ -1397,9 +1431,9 @@
      }
    },
    "node_modules/@humanwhocodes/retry": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz",
-      "integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
      "devOptional": true,
      "license": "Apache-2.0",
      "peer": true,
@ -3476,15 +3510,15 @@
      }
    },
    "node_modules/@stylistic/eslint-plugin": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.8.0.tgz",
-      "integrity": "sha512-Ufvk7hP+bf+pD35R/QfunF793XlSRIC7USr3/EdgduK9j13i2JjmsM0LUz3/foS+jDYp2fzyWZA9N44CPur0Ow==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.9.0.tgz",
+      "integrity": "sha512-OrDyFAYjBT61122MIY1a3SfEgy3YCMgt2vL4eoPmvTwDBwyQhAXurxNQznlRD/jESNfYWfID8Ej+31LljvF7Xg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@typescript-eslint/utils": "^8.4.0",
-        "eslint-visitor-keys": "^4.0.0",
-        "espree": "^10.1.0",
+        "@typescript-eslint/utils": "^8.8.0",
+        "eslint-visitor-keys": "^4.1.0",
+        "espree": "^10.2.0",
        "estraverse": "^5.3.0",
        "picomatch": "^4.0.2"
      },
@ -5998,9 +6032,9 @@
      }
    },
    "node_modules/daisyui": {
-      "version": "4.12.11",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.11.tgz",
-      "integrity": "sha512-D9OJTlnU1ATiDsKkw5/TB0997Hm73zu9SFeUTthDtKd06OEJQlOLoYrGXlP2YhHZDW4VAcQnmhEphTgPFUYqSw==",
+      "version": "4.12.12",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.12.tgz",
+      "integrity": "sha512-xmCZ4piuWOjhNyB0VDKczB5vKFCipTA7UxaZNOzCz6cT8kvWgv5BDtUo+Hk9gOFufByOlfuBdzLpfhY5GsebTQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@ -6521,9 +6555,9 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.11.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.11.1.tgz",
-      "integrity": "sha512-MobhYKIoAO1s1e4VUrgx1l1Sk2JBR/Gqjjgw8+mfgoLE2xwsHur4gdfTxyTgShrhvdVFTaJSgMiQBl1jv/AWxg==",
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz",
+      "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
      "devOptional": true,
      "license": "MIT",
      "peer": true,
@ -6533,11 +6567,11 @@
        "@eslint/config-array": "^0.18.0",
        "@eslint/core": "^0.6.0",
        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.11.1",
+        "@eslint/js": "9.12.0",
        "@eslint/plugin-kit": "^0.2.0",
+        "@humanfs/node": "^0.16.5",
        "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.3.0",
-        "@nodelib/fs.walk": "^1.2.8",
+        "@humanwhocodes/retry": "^0.3.1",
        "@types/estree": "^1.0.6",
        "@types/json-schema": "^7.0.15",
        "ajv": "^6.12.4",
@ -6545,9 +6579,9 @@
        "cross-spawn": "^7.0.2",
        "debug": "^4.3.2",
        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.0.2",
-        "eslint-visitor-keys": "^4.0.0",
-        "espree": "^10.1.0",
+        "eslint-scope": "^8.1.0",
+        "eslint-visitor-keys": "^4.1.0",
+        "espree": "^10.2.0",
        "esquery": "^1.5.0",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@ -6557,13 +6591,11 @@
        "ignore": "^5.2.0",
        "imurmurhash": "^0.1.4",
        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
        "json-stable-stringify-without-jsonify": "^1.0.1",
        "lodash.merge": "^4.6.2",
        "minimatch": "^3.1.2",
        "natural-compare": "^1.4.0",
        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
        "text-table": "^0.2.0"
      },
      "bin": {
@ -6859,47 +6891,6 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
-    "node_modules/eslint/node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "devOptional": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/eslint/node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "devOptional": true,
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/eslint/node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "devOptional": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/eslint/node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -8263,18 +8254,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/is-installed-globally/node_modules/is-path-inside": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
-      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/is-module": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@ -8291,14 +8270,15 @@
      }
    },
    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "devOptional": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/is-reference": {
@ -8924,9 +8904,9 @@
      }
    },
    "node_modules/listhen/node_modules/jiti": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.1.2.tgz",
-      "integrity": "sha512-cYNjJus5X9J4jLzTaI8rYoIq1k6YySiA1lK4wxSnOrBRXkbVyreZfhoboJhsUmwgU82lpPjj1IoU7Ggrau8r3g==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.3.1.tgz",
+      "integrity": "sha512-xPZ6pPzUifI8XDBBxIL4OB1w1ZKmBpmNEeKwNt2d0Spn8XisAIZhWrlOHq5seBrFGTxVx9PbrWvEMyrk4IO5bA==",
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
@ -10955,9 +10935,9 @@
      "license": "BlueOak-1.0.0"
    },
    "node_modules/package-manager-detector": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.0.tgz",
-      "integrity": "sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.1.tgz",
+      "integrity": "sha512-/hVW2fZvAdEas+wyKh0SnlZ2mx0NIa1+j11YaQkogEJkcMErbwchHCuo8z7lEtajZJQZ6rgZNVTWMVVd71Bjng==",
      "license": "MIT"
    },
    "node_modules/parent-module": {
@ -14287,16 +14267,16 @@
      }
    },
    "node_modules/untyped": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.5.0.tgz",
-      "integrity": "sha512-o2Vjmn2dal08BzCcINxSmWuAteReUUiXseii5VRhmxyLF0b21K0iKZQ9fMYK7RWspVkY+0saqaVQNq4roe3Efg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.5.1.tgz",
+      "integrity": "sha512-reBOnkJBFfBZ8pCKaeHgfZLcehXtM6UTxc+vqs1JvCps0c4amLNp3fhdGBZwYp+VLyoY9n3X5KOP7lCyWBUX9A==",
      "license": "MIT",
      "dependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/standalone": "^7.25.6",
-        "@babel/types": "^7.25.6",
+        "@babel/core": "^7.25.7",
+        "@babel/standalone": "^7.25.7",
+        "@babel/types": "^7.25.7",
        "defu": "^6.1.4",
-        "jiti": "^2.0.0",
+        "jiti": "^2.3.1",
        "mri": "^1.2.0",
        "scule": "^1.3.0"
      },
@ -14305,9 +14285,9 @@
      }
    },
    "node_modules/untyped/node_modules/jiti": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.1.2.tgz",
-      "integrity": "sha512-cYNjJus5X9J4jLzTaI8rYoIq1k6YySiA1lK4wxSnOrBRXkbVyreZfhoboJhsUmwgU82lpPjj1IoU7Ggrau8r3g==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.3.1.tgz",
+      "integrity": "sha512-xPZ6pPzUifI8XDBBxIL4OB1w1ZKmBpmNEeKwNt2d0Spn8XisAIZhWrlOHq5seBrFGTxVx9PbrWvEMyrk4IO5bA==",
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
--- a/frontend/package.json
+++ b/frontend/package.json
@ -35,7 +35,7 @@
    "@nuxtjs/tailwindcss": "^6.12.1",
    "@types/lodash-es": "^4.17.12",
    "@types/video.js": "^7.3.58",
-    "daisyui": "^4.12.11",
+    "daisyui": "^4.12.12",
    "mini-svg-data-uri": "^1.4.4",
    "postcss": "^8.4.47",
    "postcss-loader": "^8.1.1",