diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7e26e5e7..4f70eacf 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "@vueuse/core": "^10.6.1", "core-js": "^3.8.3", "cron-parser": "^4.9.0", + "floating-vue": "^5.0.2", "hls.js": "^1.4.12", "moment": "^2.29.4", "plyr": "^3.7.8", @@ -25,7 +26,6 @@ "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", - "@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.8", @@ -1825,12 +1825,6 @@ "node": ">=6.9.0" } }, - "node_modules/@creativebulma/bulma-tooltip": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@creativebulma/bulma-tooltip/-/bulma-tooltip-1.2.0.tgz", - "integrity": "sha512-ooImbeXEBxf77cttbzA7X5rC5aAWm9UsXIGViFOnsqB+6M944GkB28S5R4UWRqjFd2iW4zGEkEifAU+q43pt2w==", - "dev": true - }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -1887,6 +1881,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@floating-ui/core": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz", + "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==", + "dependencies": { + "@floating-ui/core": "^1.1.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", @@ -6389,6 +6404,24 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/floating-vue": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.0.2.tgz", + "integrity": "sha512-CY6emiecyIIvdoK4xYN8mDSNRWutetR+rM10mu6VGrTCqxSdvHyF6TX/zslIgXDC2eIjEkcrpAMg3Mxh724t9w==", + "dependencies": { + "@floating-ui/dom": "~1.1.1", + "vue-resize": "^2.0.0-alpha.1" + }, + "peerDependencies": { + "@nuxt/kit": "^3.2.0", + "vue": "^3.2.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + } + } + }, "node_modules/follow-redirects": { "version": "1.15.4", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", @@ -11237,6 +11270,14 @@ "node": ">=8" } }, + "node_modules/vue-resize": { + "version": "2.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz", + "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==", + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 68f9700c..c56cbdb3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@vueuse/core": "^10.6.1", "core-js": "^3.8.3", "cron-parser": "^4.9.0", + "floating-vue": "^5.0.2", "hls.js": "^1.4.12", "moment": "^2.29.4", "plyr": "^3.7.8", @@ -26,7 +27,6 @@ "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", - "@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.8", diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css index 5d6bb3cb..dccca85b 100644 --- a/frontend/src/assets/css/style.css +++ b/frontend/src/assets/css/style.css @@ -95,3 +95,7 @@ white-space: nowrap; } } + +.is-borderless { + border: none; +} diff --git a/frontend/src/components/Form-Add.vue b/frontend/src/components/Form-Add.vue index bc919cf3..7168e270 100644 --- a/frontend/src/components/Form-Add.vue +++ b/frontend/src/components/Form-Add.vue @@ -44,7 +44,7 @@
-
+
Download Path
@@ -66,7 +66,7 @@
-
+
-
+
-
+
-
+
-
+
+
diff --git a/frontend/src/components/Page-Downloading.vue b/frontend/src/components/Page-Downloading.vue index bb18d474..2ee41f24 100644 --- a/frontend/src/components/Page-Downloading.vue +++ b/frontend/src/components/Page-Downloading.vue @@ -9,10 +9,10 @@
-
-
+
+
-
+
-
+
- + @@ -94,6 +93,15 @@
+
+ +
@@ -126,7 +134,7 @@ import { defineProps, defineEmits, ref, watch, computed } from 'vue'; import moment from "moment"; import { useStorage } from '@vueuse/core' -defineEmits(['deleteItem']); +const emit = defineEmits(['deleteItem']); const props = defineProps({ queue: { @@ -211,4 +219,14 @@ const updateProgress = (item) => { return string; } + +const confirmDelete = (item) => { + if (!confirm(`Are you sure you want to delete (${item.title})?`)) { + return false; + } + + emit('deleteItem', 'queue', item._id); + return true; +} + diff --git a/frontend/src/components/Page-Header.vue b/frontend/src/components/Page-Header.vue index 4c6cb225..7bb0a469 100644 --- a/frontend/src/components/Page-Header.vue +++ b/frontend/src/components/Page-Header.vue @@ -2,25 +2,25 @@