From 842c87dc96695d9272729bf4cf94b72a57af7602 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 9 Jun 2025 09:44:37 +0200 Subject: [PATCH] Work on attachments --- package-lock.json | 600 +++++++++++++++++- package.json | 7 +- src/assets/css/sendattachments.scss | 402 ++++++++++++ src/assets/icons/ic_cr.vue | 45 ++ src/components/Chat.vue | 175 +++-- src/components/ImageWithProgress.vue | 44 ++ src/components/LoadProgress.vue | 28 + src/components/c2pa/C2PABadge.vue | 48 ++ src/components/chatMixin.js | 54 +- src/components/file_mode/FileDropLayout.vue | 10 +- .../file_mode/SendAttachmentsLayout.vue | 322 ++++++++++ .../messages/MessageIncomingImage.vue | 89 +-- .../messages/MessageIncomingThread.vue | 136 ++-- .../messages/MessageOutgoingImage.vue | 85 +-- .../messages/MessageOutgoingThread.vue | 115 ++-- src/components/messages/messageMixin.js | 2 +- src/components/sendAttachmentsMixin.d.ts | 1 + src/components/sendAttachmentsMixin.js | 165 ----- src/components/sendAttachmentsMixin.ts | 195 ++++++ src/models/attachment.ts | 51 ++ src/models/attachmentManager.ts | 325 ++++++++++ src/models/eventAttachment.ts | 15 + src/plugins/proofmode.ts | 38 ++ src/plugins/proofmodeWorker.js | 20 + src/plugins/utils.js | 437 ++++++------- src/services/matrix.service.js | 5 + tsconfig.json | 21 +- vite.config.mjs | 77 +-- 28 files changed, 2714 insertions(+), 798 deletions(-) create mode 100644 src/assets/css/sendattachments.scss create mode 100644 src/assets/icons/ic_cr.vue create mode 100644 src/components/ImageWithProgress.vue create mode 100644 src/components/LoadProgress.vue create mode 100644 src/components/c2pa/C2PABadge.vue create mode 100644 src/components/file_mode/SendAttachmentsLayout.vue create mode 100644 src/components/sendAttachmentsMixin.d.ts delete mode 100644 src/components/sendAttachmentsMixin.js create mode 100644 src/components/sendAttachmentsMixin.ts create mode 100644 src/models/attachment.ts create mode 100644 src/models/attachmentManager.ts create mode 100644 src/models/eventAttachment.ts create mode 100644 src/plugins/proofmode.ts create mode 100644 src/plugins/proofmodeWorker.js diff --git a/package-lock.json b/package-lock.json index f72503c..c1d9c8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { "name": "keanuapp-weblite", - "version": "0.1.42", + "version": "0.1.49", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "keanuapp-weblite", - "version": "0.1.42", + "version": "0.1.49", "dependencies": { + "@guardianproject/proofmode": "^0.3.2", "@matrix-org/olm": "^3.2.12", "@vitejs/plugin-vue": "^5.2.3", "aes-js": "^3.1.2", @@ -26,7 +27,7 @@ "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", "material-design-icons-iconfont": "^6.7.0", - "matrix-js-sdk": "^37.5.0", + "matrix-js-sdk": "^37.6.0", "md-gum-polyfill": "^1.0.0", "path-browserify": "^1.0.1", "pretty-bytes": "^5.6.0", @@ -36,6 +37,7 @@ "recordrtc": "^5.6.2", "roboto-fontface": "*", "stream-browserify": "^3.0.0", + "threads": "^1.7.0", "tiny-emitter": "^2.1.0", "util": "^0.12.5", "vue": "^3.5.13", @@ -52,6 +54,7 @@ }, "devDependencies": { "@rollup/plugin-commonjs": "^28.0.3", + "@types/aes-js": "^3.1.4", "@types/jszip": "^3.4.0", "@vitejs/plugin-vue-jsx": "^4.1.2", "@vue/compiler-sfc": "^3.5.13", @@ -65,7 +68,9 @@ "unplugin-vue-components": "^28.4.1", "vite": "^6.2.2", "vite-plugin-static-copy": "^2.3.0", + "vite-plugin-top-level-await": "^1.5.0", "vite-plugin-vuetify": "^2.1.1", + "vite-plugin-wasm": "^3.4.1", "vue-cli-plugin-vuetify": "^2.5.8" } }, @@ -935,6 +940,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@guardianproject/proofmode": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@guardianproject/proofmode/-/proofmode-0.3.2.tgz", + "integrity": "sha512-p71l7hheUoAWYbq/t1WoP94n6Ug9PUnapNtUKytvY688+NgeFHjL7Uc8X/K+Li3ikztfm0kM30q5nbAOJU14Fw==", + "license": "Apache-2.0" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -1490,6 +1501,24 @@ } } }, + "node_modules/@rollup/plugin-virtual": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz", + "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", @@ -1786,6 +1815,239 @@ "win32" ] }, + "node_modules/@swc/core": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.11.24.tgz", + "integrity": "sha512-MaQEIpfcEMzx3VWWopbofKJvaraqmL6HbLlw2bFZ7qYqYw3rkhM0cQVEgyzbHtTWwCwPMFZSC2DUbhlZgrMfLg==", + "dev": true, + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.21" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.11.24", + "@swc/core-darwin-x64": "1.11.24", + "@swc/core-linux-arm-gnueabihf": "1.11.24", + "@swc/core-linux-arm64-gnu": "1.11.24", + "@swc/core-linux-arm64-musl": "1.11.24", + "@swc/core-linux-x64-gnu": "1.11.24", + "@swc/core-linux-x64-musl": "1.11.24", + "@swc/core-win32-arm64-msvc": "1.11.24", + "@swc/core-win32-ia32-msvc": "1.11.24", + "@swc/core-win32-x64-msvc": "1.11.24" + }, + "peerDependencies": { + "@swc/helpers": ">=0.5.17" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.24.tgz", + "integrity": "sha512-dhtVj0PC1APOF4fl5qT2neGjRLgHAAYfiVP8poJelhzhB/318bO+QCFWAiimcDoyMgpCXOhTp757gnoJJrheWA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.11.24.tgz", + "integrity": "sha512-H/3cPs8uxcj2Fe3SoLlofN5JG6Ny5bl8DuZ6Yc2wr7gQFBmyBkbZEz+sPVgsID7IXuz7vTP95kMm1VL74SO5AQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.24.tgz", + "integrity": "sha512-PHJgWEpCsLo/NGj+A2lXZ2mgGjsr96ULNW3+T3Bj2KTc8XtMUkE8tmY2Da20ItZOvPNC/69KroU7edyo1Flfbw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.24.tgz", + "integrity": "sha512-C2FJb08+n5SD4CYWCTZx1uR88BN41ZieoHvI8A55hfVf2woT8+6ZiBzt74qW2g+ntZ535Jts5VwXAKdu41HpBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.24.tgz", + "integrity": "sha512-ypXLIdszRo0re7PNNaXN0+2lD454G8l9LPK/rbfRXnhLWDBPURxzKlLlU/YGd2zP98wPcVooMmegRSNOKfvErw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.24.tgz", + "integrity": "sha512-IM7d+STVZD48zxcgo69L0yYptfhaaE9cMZ+9OoMxirNafhKKXwoZuufol1+alEFKc+Wbwp+aUPe/DeWC/Lh3dg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.24.tgz", + "integrity": "sha512-DZByJaMVzSfjQKKQn3cqSeqwy6lpMaQDQQ4HPlch9FWtDx/dLcpdIhxssqZXcR2rhaQVIaRQsCqwV6orSDGAGw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.24.tgz", + "integrity": "sha512-Q64Ytn23y9aVDKN5iryFi8mRgyHw3/kyjTjT4qFCa8AEb5sGUuSj//AUZ6c0J7hQKMHlg9do5Etvoe61V98/JQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.24.tgz", + "integrity": "sha512-9pKLIisE/Hh2vJhGIPvSoTK4uBSPxNVyXHmOrtdDot4E1FUUI74Vi8tFdlwNbaj8/vusVnb8xPXsxF1uB0VgiQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.24.tgz", + "integrity": "sha512-sybnXtOsdB+XvzVFlBVGgRHLqp3yRpHK7CrmpuDKszhj/QhmsaZzY/GHSeALlMtLup13M0gqbcQvsTNlAHTg3w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/@swc/types": { + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.21.tgz", + "integrity": "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3" + } + }, + "node_modules/@types/aes-js": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.4.tgz", + "integrity": "sha512-v3D66IptpUqh+pHKVNRxY8yvp2ESSZXe0rTzsGdzUhEwag7ljVfgCllkWv2YgiYXDhWFBrEywll4A5JToyTNFA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/eslint": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", @@ -2723,6 +2985,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -3174,7 +3445,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", - "devOptional": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -3811,6 +4081,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/espree": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", @@ -4655,6 +4935,18 @@ "node": ">=0.12.0" } }, + "node_modules/is-observable": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz", + "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==", + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-plain-object": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", @@ -5032,9 +5324,9 @@ "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==" }, "node_modules/matrix-js-sdk": { - "version": "37.5.0", - "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz", - "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==", + "version": "37.6.0", + "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.6.0.tgz", + "integrity": "sha512-OdqZGqSarksiesHovQngeVcu7+fEkJUDk0pNX/LZg+HYZfyMrKgX3fb7WNhqcBW6kuTYGwkBvY5/LpE2AFabXw==", "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", @@ -5054,7 +5346,7 @@ "uuid": "11" }, "engines": { - "node": ">=20.0.0" + "node": ">=22.0.0" } }, "node_modules/matrix-widget-api": { @@ -5202,7 +5494,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "devOptional": true, "license": "MIT" }, "node_modules/nanoid": { @@ -5277,6 +5568,12 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/observable-fns": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz", + "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==", + "license": "MIT" + }, "node_modules/oidc-client-ts": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.0.tgz", @@ -5394,15 +5691,6 @@ "node": ">=6" } }, - "node_modules/parent-module/node_modules/callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/parse-asn1": { "version": "5.1.7", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.7.tgz", @@ -6643,12 +6931,40 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "node_modules/threads": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz", + "integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==", + "license": "MIT", + "dependencies": { + "callsites": "^3.1.0", + "debug": "^4.2.0", + "is-observable": "^2.1.0", + "observable-fns": "^0.6.1" + }, + "funding": { + "url": "https://github.com/andywer/threads.js?sponsor=1" + }, + "optionalDependencies": { + "tiny-worker": ">= 2" + } + }, "node_modules/tiny-emitter": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", "license": "MIT" }, + "node_modules/tiny-worker": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz", + "integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==", + "license": "BSD-3-Clause", + "optional": true, + "dependencies": { + "esm": "^3.2.25" + } + }, "node_modules/tinyglobby": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz", @@ -7081,6 +7397,35 @@ "node": ">=8.10.0" } }, + "node_modules/vite-plugin-top-level-await": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.5.0.tgz", + "integrity": "sha512-r/DtuvHrSqUVk23XpG2cl8gjt1aATMG5cjExXL1BUTcSNab6CzkcPua9BPEc9fuTP5UpwClCxUe3+dNGL0yrgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/plugin-virtual": "^3.0.2", + "@swc/core": "^1.10.16", + "uuid": "^10.0.0" + }, + "peerDependencies": { + "vite": ">=2.8" + } + }, + "node_modules/vite-plugin-top-level-await/node_modules/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "dev": true, + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite-plugin-vuetify": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.1.tgz", @@ -7101,6 +7446,16 @@ "vuetify": "^3.0.0" } }, + "node_modules/vite-plugin-wasm": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/vite-plugin-wasm/-/vite-plugin-wasm-3.4.1.tgz", + "integrity": "sha512-ja3nSo2UCkVeitltJGkS3pfQHAanHv/DqGatdI39ja6McgABlpsZ5hVgl6wuR8Qx5etY3T5qgDQhOWzc5RReZA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "vite": "^2 || ^3 || ^4 || ^5 || ^6" + } + }, "node_modules/vite/node_modules/fdir": { "version": "6.4.4", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", @@ -8152,6 +8507,11 @@ } } }, + "@guardianproject/proofmode": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@guardianproject/proofmode/-/proofmode-0.3.2.tgz", + "integrity": "sha512-p71l7hheUoAWYbq/t1WoP94n6Ug9PUnapNtUKytvY688+NgeFHjL7Uc8X/K+Li3ikztfm0kM30q5nbAOJU14Fw==" + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -8421,6 +8781,13 @@ "magic-string": "^0.30.3" } }, + "@rollup/plugin-virtual": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz", + "integrity": "sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==", + "dev": true, + "requires": {} + }, "@rollup/pluginutils": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", @@ -8560,6 +8927,117 @@ "integrity": "sha512-LWbXUBwn/bcLx2sSsqy7pK5o+Nr+VCoRoAohfJ5C/aBio9nfJmGQqHAhU6pwxV/RmyTk5AqdySma7uwWGlmeuA==", "optional": true }, + "@swc/core": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.11.24.tgz", + "integrity": "sha512-MaQEIpfcEMzx3VWWopbofKJvaraqmL6HbLlw2bFZ7qYqYw3rkhM0cQVEgyzbHtTWwCwPMFZSC2DUbhlZgrMfLg==", + "dev": true, + "requires": { + "@swc/core-darwin-arm64": "1.11.24", + "@swc/core-darwin-x64": "1.11.24", + "@swc/core-linux-arm-gnueabihf": "1.11.24", + "@swc/core-linux-arm64-gnu": "1.11.24", + "@swc/core-linux-arm64-musl": "1.11.24", + "@swc/core-linux-x64-gnu": "1.11.24", + "@swc/core-linux-x64-musl": "1.11.24", + "@swc/core-win32-arm64-msvc": "1.11.24", + "@swc/core-win32-ia32-msvc": "1.11.24", + "@swc/core-win32-x64-msvc": "1.11.24", + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.21" + } + }, + "@swc/core-darwin-arm64": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.24.tgz", + "integrity": "sha512-dhtVj0PC1APOF4fl5qT2neGjRLgHAAYfiVP8poJelhzhB/318bO+QCFWAiimcDoyMgpCXOhTp757gnoJJrheWA==", + "dev": true, + "optional": true + }, + "@swc/core-darwin-x64": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.11.24.tgz", + "integrity": "sha512-H/3cPs8uxcj2Fe3SoLlofN5JG6Ny5bl8DuZ6Yc2wr7gQFBmyBkbZEz+sPVgsID7IXuz7vTP95kMm1VL74SO5AQ==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm-gnueabihf": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.24.tgz", + "integrity": "sha512-PHJgWEpCsLo/NGj+A2lXZ2mgGjsr96ULNW3+T3Bj2KTc8XtMUkE8tmY2Da20ItZOvPNC/69KroU7edyo1Flfbw==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm64-gnu": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.24.tgz", + "integrity": "sha512-C2FJb08+n5SD4CYWCTZx1uR88BN41ZieoHvI8A55hfVf2woT8+6ZiBzt74qW2g+ntZ535Jts5VwXAKdu41HpBg==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm64-musl": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.24.tgz", + "integrity": "sha512-ypXLIdszRo0re7PNNaXN0+2lD454G8l9LPK/rbfRXnhLWDBPURxzKlLlU/YGd2zP98wPcVooMmegRSNOKfvErw==", + "dev": true, + "optional": true + }, + "@swc/core-linux-x64-gnu": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.24.tgz", + "integrity": "sha512-IM7d+STVZD48zxcgo69L0yYptfhaaE9cMZ+9OoMxirNafhKKXwoZuufol1+alEFKc+Wbwp+aUPe/DeWC/Lh3dg==", + "dev": true, + "optional": true + }, + "@swc/core-linux-x64-musl": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.24.tgz", + "integrity": "sha512-DZByJaMVzSfjQKKQn3cqSeqwy6lpMaQDQQ4HPlch9FWtDx/dLcpdIhxssqZXcR2rhaQVIaRQsCqwV6orSDGAGw==", + "dev": true, + "optional": true + }, + "@swc/core-win32-arm64-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.24.tgz", + "integrity": "sha512-Q64Ytn23y9aVDKN5iryFi8mRgyHw3/kyjTjT4qFCa8AEb5sGUuSj//AUZ6c0J7hQKMHlg9do5Etvoe61V98/JQ==", + "dev": true, + "optional": true + }, + "@swc/core-win32-ia32-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.24.tgz", + "integrity": "sha512-9pKLIisE/Hh2vJhGIPvSoTK4uBSPxNVyXHmOrtdDot4E1FUUI74Vi8tFdlwNbaj8/vusVnb8xPXsxF1uB0VgiQ==", + "dev": true, + "optional": true + }, + "@swc/core-win32-x64-msvc": { + "version": "1.11.24", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.24.tgz", + "integrity": "sha512-sybnXtOsdB+XvzVFlBVGgRHLqp3yRpHK7CrmpuDKszhj/QhmsaZzY/GHSeALlMtLup13M0gqbcQvsTNlAHTg3w==", + "dev": true, + "optional": true + }, + "@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", + "dev": true + }, + "@swc/types": { + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.21.tgz", + "integrity": "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==", + "dev": true, + "requires": { + "@swc/counter": "^0.1.3" + } + }, + "@types/aes-js": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.4.tgz", + "integrity": "sha512-v3D66IptpUqh+pHKVNRxY8yvp2ESSZXe0rTzsGdzUhEwag7ljVfgCllkWv2YgiYXDhWFBrEywll4A5JToyTNFA==", + "dev": true + }, "@types/eslint": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", @@ -9285,6 +9763,11 @@ "get-intrinsic": "^1.3.0" } }, + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -9628,7 +10111,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", - "devOptional": true, "requires": { "ms": "^2.1.3" } @@ -10073,6 +10555,12 @@ "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", "dev": true }, + "esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==", + "optional": true + }, "espree": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", @@ -10651,6 +11139,11 @@ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "devOptional": true }, + "is-observable": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz", + "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==" + }, "is-plain-object": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", @@ -10930,9 +11423,9 @@ "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==" }, "matrix-js-sdk": { - "version": "37.5.0", - "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz", - "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==", + "version": "37.6.0", + "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.6.0.tgz", + "integrity": "sha512-OdqZGqSarksiesHovQngeVcu7+fEkJUDk0pNX/LZg+HYZfyMrKgX3fb7WNhqcBW6kuTYGwkBvY5/LpE2AFabXw==", "requires": { "@babel/runtime": "^7.12.5", "@matrix-org/matrix-sdk-crypto-wasm": "^14.0.1", @@ -11072,8 +11565,7 @@ "ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "devOptional": true + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "nanoid": { "version": "3.3.11", @@ -11118,6 +11610,11 @@ "schema-utils": "^3.0.0" } }, + "observable-fns": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz", + "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==" + }, "oidc-client-ts": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.0.tgz", @@ -11198,14 +11695,6 @@ "dev": true, "requires": { "callsites": "^3.0.0" - }, - "dependencies": { - "callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true - } } }, "parse-asn1": { @@ -12045,11 +12534,32 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "threads": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz", + "integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==", + "requires": { + "callsites": "^3.1.0", + "debug": "^4.2.0", + "is-observable": "^2.1.0", + "observable-fns": "^0.6.1", + "tiny-worker": ">= 2" + } + }, "tiny-emitter": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" }, + "tiny-worker": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz", + "integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==", + "optional": true, + "requires": { + "esm": "^3.2.25" + } + }, "tinyglobby": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz", @@ -12302,6 +12812,25 @@ } } }, + "vite-plugin-top-level-await": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.5.0.tgz", + "integrity": "sha512-r/DtuvHrSqUVk23XpG2cl8gjt1aATMG5cjExXL1BUTcSNab6CzkcPua9BPEc9fuTP5UpwClCxUe3+dNGL0yrgQ==", + "dev": true, + "requires": { + "@rollup/plugin-virtual": "^3.0.2", + "@swc/core": "^1.10.16", + "uuid": "^10.0.0" + }, + "dependencies": { + "uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "dev": true + } + } + }, "vite-plugin-vuetify": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.1.tgz", @@ -12313,6 +12842,13 @@ "upath": "^2.0.1" } }, + "vite-plugin-wasm": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/vite-plugin-wasm/-/vite-plugin-wasm-3.4.1.tgz", + "integrity": "sha512-ja3nSo2UCkVeitltJGkS3pfQHAanHv/DqGatdI39ja6McgABlpsZ5hVgl6wuR8Qx5etY3T5qgDQhOWzc5RReZA==", + "dev": true, + "requires": {} + }, "vue": { "version": "3.5.13", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", diff --git a/package.json b/package.json index 6171600..873186b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "create-sticker-config": "node ./create_sticker_config.js $1" }, "dependencies": { + "@guardianproject/proofmode": "^0.3.2", "@matrix-org/olm": "^3.2.12", "@vitejs/plugin-vue": "^5.2.3", "aes-js": "^3.1.2", @@ -27,7 +28,7 @@ "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", "material-design-icons-iconfont": "^6.7.0", - "matrix-js-sdk": "^37.5.0", + "matrix-js-sdk": "^37.6.0", "md-gum-polyfill": "^1.0.0", "path-browserify": "^1.0.1", "pretty-bytes": "^5.6.0", @@ -37,6 +38,7 @@ "recordrtc": "^5.6.2", "roboto-fontface": "*", "stream-browserify": "^3.0.0", + "threads": "^1.7.0", "tiny-emitter": "^2.1.0", "util": "^0.12.5", "vue": "^3.5.13", @@ -53,6 +55,7 @@ }, "devDependencies": { "@rollup/plugin-commonjs": "^28.0.3", + "@types/aes-js": "^3.1.4", "@types/jszip": "^3.4.0", "@vitejs/plugin-vue-jsx": "^4.1.2", "@vue/compiler-sfc": "^3.5.13", @@ -66,7 +69,9 @@ "unplugin-vue-components": "^28.4.1", "vite": "^6.2.2", "vite-plugin-static-copy": "^2.3.0", + "vite-plugin-top-level-await": "^1.5.0", "vite-plugin-vuetify": "^2.1.1", + "vite-plugin-wasm": "^3.4.1", "vue-cli-plugin-vuetify": "^2.5.8" }, "eslintConfig": { diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss new file mode 100644 index 0000000..0197ae1 --- /dev/null +++ b/src/assets/css/sendattachments.scss @@ -0,0 +1,402 @@ +@use "@/assets/css/variables" as *; + +$large-button-height: $min-touch-target; +$small-button-height: 36px; + +$background: #ffffff; +$backgroundSection: rgba(#ededed,0.8); +$backgroundHilite: #383739; +$text: #000000; +$hiliteColor: #4642f1; + +.send-attachments { + font-family: "Inter", sans-serif; + z-index: 10; + position: absolute; + top: 0px; + left: 0; + right: 0; + bottom: 0; + margin: 0; + background-color: $background; + color: $text; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 16px; + + .send-attachments__title { + color: $text; + text-align: center; + font-size: 11.54 * $chat-text-size; + font-family: "Inter", sans-serif; + font-weight: 700; + line-height: 140%; + letter-spacing: 0.34px; + text-transform: uppercase; + margin-top: 13px; + margin-bottom: 25px; + } + + .background { + width: 100%; + height: 50%; + background-color: $background; + &.drop-target { + background-color: $backgroundHilite; + } + border-radius: 19px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .file-format-info { + opacity: 0.6; + color: $text; + text-align: center; + font-size: 11 * $chat-text-size; + font-family: "Inter", sans-serif; + line-height: 117%; + letter-spacing: 0.4px; + margin-top: 13px; + background: transparent; + } + + .v-btn { + font-family: "Inter", sans-serif; + font-weight: 700; + font-size: 11.54 * $chat-text-size; + line-height: 140%; + color: white; + background-color: $hiliteColor !important; + border-radius: $small-button-height * 0.5; + min-height: 0; + height: $small-button-height !important; + margin-top: $chat-standard-padding-xs; + margin-bottom: $chat-standard-padding-xs; + &.large { + padding: 16px 23px; + height: $large-button-height; + border-radius: $large-button-height * 0.5; + } + } + + textarea { + color: rgba($text, 80%) !important; + } + textarea::placeholder { + color: rgba($text, 80%) !important; + } + + .attachment-wrapper { + width: 100%; + flex: 0 0 100%; + overflow-y: auto; + } + .file-drop-current-item { + width: 100%; + height: 60%; + background-color: $backgroundSection; + display: flex; + &.drop-target { + background-color: $backgroundHilite; + } + border-radius: 19px; + overflow: hidden; + .v-img { + width: 100%; + height: 100%; + object-fit: cover; + } + .filename { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + } + + .send-attachments__current-item__info { + height: 80px; + text-align: start; + margin: 18px 20px; + padding: 0; + position: relative; + + .send-attachments__current-item__info__size { + white-space: pre; + overflow: hidden; + margin-right: 36px; + text-overflow: ellipsis; + } + + .send-attachments__current-item__info__size__filename { + opacity: 0.7; + font-size: 0.8em; + } + + } + + .file-drop-thumbnail-container { + width: 100%; + padding: 13px 20px 15px 20px; + height: 74px; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + text-align: start; + + /* Hide scrollbar for Chrome, Safari and Opera */ + &::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + + .file-drop-thumbnail { + width: 46px; + height: 46px; + border-radius: 9px; + overflow: hidden; + background-color: #242424; + border: 2px solid white; + display: inline-block; + position: relative; + &.current { + border: 2px solid #4642f1; + } + &.noborder { + border: 2px solid transparent; + } + .v-img { + width: 100%; + height: 100%; + object-fit: cover; + } + margin-right: 8px; + + .add, + .remove { + color: $background; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + .v-icon { + width: 14px; + height: 15.75px; + } + } + .remove { + // Slight background to make visible + background-color: rgba(black, 0.2); + } + } + } + + .file-drop-section { + margin-top: 20px; + padding: 16px 18px; + background-color: $backgroundSection; + border-radius: 19px; + } + + .file-drop-input-container, + .file-drop-sending-input-container, + .file-drop-sent-input-container { + position: relative; + width: 100%; + min-height: 100px; + background-color: $backgroundSection; + border-radius: 19px; + display: flex; + flex-direction: column; + .input-area-text { + flex: 0 0 auto; + width: 100%; + margin-bottom: 50px; + padding: 16px 18px; + font-family: "Inter", sans-serif; + font-weight: 300; + } + .input-container__buttons { + position: absolute; + right: 8px; + bottom: 10px; + display: flex; + & > *:not(:first-child) { + margin-left: 8px; + } + } + } + + @keyframes fadeInStackItem { + from {opacity: 0;} + to {opacity: 1;} + } + + // Sending + // + .file-drop-sent-stack { + width: 100%; + height: 30%; + display: flex; + align-items: center; + justify-content: center; + .no-items { + display: flex; + align-items: center; + justify-content: center; + div { + position: absolute; + } + .file-drop-stack-item { + transform: rotate(-4.4deg); + } + color: #fff; + text-align: center; + font-size: 21 * $chat-text-size; + font-family: "Poppins", sans-serif; + font-weight: 700; + letter-spacing: 0.34px; + } + .items-sent { + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + div, .v-icon { + position: absolute; + } + .v-icon, .v-icon__component { + width: 30%; + height: 30%; + } + } + .file-drop-stack-item { + background: #3a3a3c; + position: absolute; + overflow: hidden; + opacity: 0; + .v-img { + width: 100%; + height: 100%; + object-fit: cover; + } + &.direct { + opacity: 1 !important; + } + &.animated { + animation-name: fadeInStackItem; + animation-fill-mode: both; + animation-duration: 1.5s; + } + } + } + + .file-drop-sending-container { + width: 100%; + padding: 13px 0px 15px 0px; + height: 50%; + overflow-x: hidden; + overflow-y: auto; + white-space: nowrap; + text-align: start; + + /* Hide scrollbar for Chrome, Safari and Opera */ + &::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge and Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + + .file-drop-sending-item { + width: 100%; + height: 64px; + overflow: hidden; + background-color: $backgroundSection; + border-radius: 12px; + position: relative; + padding: 8px; + .v-img { + width: $min-touch-target; + height: $min-touch-target; + border-radius: 8px; + object-fit: cover; + flex: 0 0 $min-touch-target; + margin-right: 8px; + } + margin-bottom: 8px; + display: flex; + align-items: center; + .filename { + position: absolute; + top: 18px; + left: 8px; + font-size: 0.7em; + } + .v-progress-linear { + align-self: flex-end; + } + .file-drop-cancel { + position: absolute; + right: 8px; + width: 17px; + height: 17px; + color: green !important; + background: #2e2e3b; + border-radius: 8.5px; + display: flex; + align-items: center; + justify-content: center; + } + } + } + + .file-drop-sending-input-container { + .v-btn { + .v-progress-circular { + margin-left: 8px; + } + background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1; + } + } + + .file-drop-files-sent { + width: 100%; + color: $text; + text-align: center; + font-size: 21 * $chat-text-size; + font-family: "Poppins", sans-serif; + font-weight: 700; + letter-spacing: 0.34px; + text-align: center; + } + + .file-drop-sent-input-container { + background-color: transparent; + .v-btn { + right: unset; + left: 8px; + background: linear-gradient(0deg, #000 0%, #000 100%), #4642f1; + &.close { + right: 8px; + left: unset; + background: $hiliteColor !important; + } + } + } +} diff --git a/src/assets/icons/ic_cr.vue b/src/assets/icons/ic_cr.vue new file mode 100644 index 0000000..4093e70 --- /dev/null +++ b/src/assets/icons/ic_cr.vue @@ -0,0 +1,45 @@ + + diff --git a/src/components/Chat.vue b/src/components/Chat.vue index b7289d6..713672a 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -27,10 +27,10 @@ v-on:close="showRecorder = false" v-on:file="onVoiceRecording" :sendTypingIndicators="useVoiceMode" /> @@ -213,7 +213,7 @@