From 7595d0195653f83641be0c71de6bdd11558fc032 Mon Sep 17 00:00:00 2001 From: faupau Date: Sun, 16 Jul 2023 03:31:33 +0200 Subject: [PATCH] feat(web): set asset as profile picture (#3106) * add profile-image-cropper component * add dom-to-image library * add store to update user profile picture when set * dom-to-image * remove console.logs, add svelte binding * fix format, unused vars * change caching of profile image * set hash after profile image change * remove unnecessary store * remove unecesarry changes * set types/dom-to-image as devDependency * remove unecessary type declarations use handleError * remove error notification which is already handled by handleError * Revert "set types/dom-to-image as devDependency" This reverts commit ca8b3ed1bbe728de8bc5890e32ae76324a95a6ca. * add types do dev dependencies * use on:close instead of on:close={()=>...} * add newline * sort imports * bind photo-viewer imgElement directly, not working * remove console.log, fix binding * make imgElement optional * fix element as optional prop * fix type * check for transparency * small changes * fix img.decode * add bg, remove publicsharedkey * fix omit publicSharedKey --------- Co-authored-by: Alex Tran --- .../src/immich/controllers/user.controller.ts | 2 +- web/package-lock.json | 217 ++++++++---------- web/package.json | 2 + .../asset-viewer/asset-viewer-nav-bar.svelte | 1 + .../asset-viewer/asset-viewer.svelte | 11 + .../asset-viewer/photo-viewer.svelte | 7 +- .../profile-image-cropper.svelte | 85 +++++++ 7 files changed, 204 insertions(+), 121 deletions(-) create mode 100644 web/src/lib/components/shared-components/profile-image-cropper.svelte diff --git a/server/src/immich/controllers/user.controller.ts b/server/src/immich/controllers/user.controller.ts index 784ca08703..3cf613bf80 100644 --- a/server/src/immich/controllers/user.controller.ts +++ b/server/src/immich/controllers/user.controller.ts @@ -94,7 +94,7 @@ export class UserController { } @Get('/profile-image/:userId') - @Header('Cache-Control', 'private, max-age=86400, no-transform') + @Header('Cache-Control', 'private, no-cache, no-transform') async getProfileImage(@Param() { userId }: UserIdDto, @Response({ passthrough: true }) res: Res): Promise { const readableStream = await this.service.getUserProfileImage(userId); res.header('Content-Type', 'image/jpeg'); diff --git a/web/package-lock.json b/web/package-lock.json index cd5e1a4115..5896ca8c91 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -12,6 +12,7 @@ "axios": "^0.27.2", "buffer": "^6.0.3", "copy-image-clipboard": "^2.1.2", + "dom-to-image": "^2.6.0", "handlebars": "^4.7.7", "justified-layout": "^4.1.0", "leaflet": "^1.9.4", @@ -33,6 +34,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/svelte": "^4.0.3", "@types/cookie": "^0.5.1", + "@types/dom-to-image": "^2.6.4", "@types/justified-layout": "^4.1.0", "@types/leaflet": "^1.9.1", "@types/leaflet.markercluster": "^1.5.1", @@ -3266,9 +3268,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.1.tgz", - "integrity": "sha512-idFhKVEHuCKbTETvuo3V7UShqSYX9JMKVJXP546dOTkh5ZRejo5XtKtsB5TCSwNBa0TH8hIV44/bnylaFhM1Vg==", + "version": "1.22.3", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.3.tgz", + "integrity": "sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -3393,15 +3395,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/@testing-library/dom/node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "dev": true, - "dependencies": { - "deep-equal": "^2.0.5" - } - }, "node_modules/@testing-library/dom/node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -3623,6 +3616,12 @@ "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==", "dev": true }, + "node_modules/@types/dom-to-image": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.4.tgz", + "integrity": "sha512-UddUdGF1qulrSDulkz3K2Ypq527MR6ixlgAzqLbxSiQ0icx0XDlIV+h4+edmjq/1dqn0KgN0xGSe1kI9t+vGuw==", + "dev": true + }, "node_modules/@types/estree": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", @@ -4125,20 +4124,20 @@ } }, "node_modules/@zoom-image/core": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.19.0.tgz", - "integrity": "sha512-eiN4ZX/lpBMpDoJh1QoKzWBuEIwdjdiEMgEXAjltS0G3f8jfS85uXq2hCF9JcbdjuM9b2JeydOqPi5aZ5TGGxw==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.20.0.tgz", + "integrity": "sha512-QJOGDaHCCkGCAaytWanf0YypOd2gKvn5trn1sHgEFB8T76jgk6RMhuplRJvmKJOitHcr2DKZEwYFurwd9nZ3+w==", "funding": { "type": "github", "url": "https://github.com/sponsors/willnguyen1312" } }, "node_modules/@zoom-image/svelte": { - "version": "0.1.9", - "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.1.9.tgz", - "integrity": "sha512-nrWyapOKrNZtApTA6etECpivkR8FIktbO+56U8FQrUX6rU7DlSxTavX10fDsP0rhUuun0GCN1jIGFJ3nm2dOmw==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.1.10.tgz", + "integrity": "sha512-OXeZWWG1W479KpBW8j/8B1R7JyNoZfhoe3IW/ebffyQcbvCAB3UP6HiF5QueU58RvDLMKO+cjvjIaLmJ+w3YCQ==", "dependencies": { - "@zoom-image/core": "0.19.0" + "@zoom-image/core": "0.20.0" }, "funding": { "type": "github", @@ -4292,24 +4291,12 @@ } }, "node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "dependencies": { - "dequal": "^2.0.3" - } - }, - "node_modules/array-buffer-byte-length": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz", - "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "is-array-buffer": "^3.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "deep-equal": "^2.0.5" } }, "node_modules/array-union": { @@ -5141,17 +5128,16 @@ "dev": true }, "node_modules/deep-equal": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz", - "integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz", + "integrity": "sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==", "dev": true, "dependencies": { - "array-buffer-byte-length": "^1.0.0", "call-bind": "^1.0.2", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.0", + "es-get-iterator": "^1.1.2", + "get-intrinsic": "^1.1.3", "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", + "is-array-buffer": "^3.0.1", "is-date-object": "^1.0.5", "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.2", @@ -5159,7 +5145,7 @@ "object-is": "^1.1.5", "object-keys": "^1.1.1", "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.0", + "regexp.prototype.flags": "^1.4.3", "side-channel": "^1.0.4", "which-boxed-primitive": "^1.0.2", "which-collection": "^1.0.1", @@ -5291,6 +5277,11 @@ "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true }, + "node_modules/dom-to-image": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz", + "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==" + }, "node_modules/domexception": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", @@ -6265,14 +6256,13 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", + "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==", "dev": true, "dependencies": { "function-bind": "^1.1.1", "has": "^1.0.3", - "has-proto": "^1.0.1", "has-symbols": "^1.0.3" }, "funding": { @@ -6479,18 +6469,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/has-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", - "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -10348,14 +10326,14 @@ } }, "node_modules/regexp.prototype.flags": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", - "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", + "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==", "dev": true, "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "functions-have-names": "^1.2.3" + "define-properties": "^1.1.3", + "functions-have-names": "^1.2.2" }, "engines": { "node": ">= 0.4" @@ -11214,6 +11192,14 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, + "node_modules/svelte/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/svelte/node_modules/estree-walker": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", @@ -14229,9 +14215,9 @@ } }, "@sveltejs/kit": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.1.tgz", - "integrity": "sha512-idFhKVEHuCKbTETvuo3V7UShqSYX9JMKVJXP546dOTkh5ZRejo5XtKtsB5TCSwNBa0TH8hIV44/bnylaFhM1Vg==", + "version": "1.22.3", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.3.tgz", + "integrity": "sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==", "dev": true, "requires": { "@sveltejs/vite-plugin-svelte": "^2.4.1", @@ -14319,15 +14305,6 @@ "color-convert": "^2.0.1" } }, - "aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "dev": true, - "requires": { - "deep-equal": "^2.0.5" - } - }, "chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -14506,6 +14483,12 @@ "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==", "dev": true }, + "@types/dom-to-image": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.4.tgz", + "integrity": "sha512-UddUdGF1qulrSDulkz3K2Ypq527MR6ixlgAzqLbxSiQ0icx0XDlIV+h4+edmjq/1dqn0KgN0xGSe1kI9t+vGuw==", + "dev": true + }, "@types/estree": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", @@ -14891,16 +14874,16 @@ } }, "@zoom-image/core": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.19.0.tgz", - "integrity": "sha512-eiN4ZX/lpBMpDoJh1QoKzWBuEIwdjdiEMgEXAjltS0G3f8jfS85uXq2hCF9JcbdjuM9b2JeydOqPi5aZ5TGGxw==" + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.20.0.tgz", + "integrity": "sha512-QJOGDaHCCkGCAaytWanf0YypOd2gKvn5trn1sHgEFB8T76jgk6RMhuplRJvmKJOitHcr2DKZEwYFurwd9nZ3+w==" }, "@zoom-image/svelte": { - "version": "0.1.9", - "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.1.9.tgz", - "integrity": "sha512-nrWyapOKrNZtApTA6etECpivkR8FIktbO+56U8FQrUX6rU7DlSxTavX10fDsP0rhUuun0GCN1jIGFJ3nm2dOmw==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.1.10.tgz", + "integrity": "sha512-OXeZWWG1W479KpBW8j/8B1R7JyNoZfhoe3IW/ebffyQcbvCAB3UP6HiF5QueU58RvDLMKO+cjvjIaLmJ+w3YCQ==", "requires": { - "@zoom-image/core": "0.19.0" + "@zoom-image/core": "0.20.0" } }, "abab": { @@ -15014,21 +14997,12 @@ } }, "aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "requires": { - "dequal": "^2.0.3" - } - }, - "array-buffer-byte-length": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz", - "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", "dev": true, "requires": { - "call-bind": "^1.0.2", - "is-array-buffer": "^3.0.1" + "deep-equal": "^2.0.5" } }, "array-union": { @@ -15623,17 +15597,16 @@ "dev": true }, "deep-equal": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz", - "integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz", + "integrity": "sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==", "dev": true, "requires": { - "array-buffer-byte-length": "^1.0.0", "call-bind": "^1.0.2", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.0", + "es-get-iterator": "^1.1.2", + "get-intrinsic": "^1.1.3", "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", + "is-array-buffer": "^3.0.1", "is-date-object": "^1.0.5", "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.2", @@ -15641,7 +15614,7 @@ "object-is": "^1.1.5", "object-keys": "^1.1.1", "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.0", + "regexp.prototype.flags": "^1.4.3", "side-channel": "^1.0.4", "which-boxed-primitive": "^1.0.2", "which-collection": "^1.0.1", @@ -15740,6 +15713,11 @@ "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true }, + "dom-to-image": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz", + "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==" + }, "domexception": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", @@ -16443,14 +16421,13 @@ "dev": true }, "get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", + "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==", "dev": true, "requires": { "function-bind": "^1.1.1", "has": "^1.0.3", - "has-proto": "^1.0.1", "has-symbols": "^1.0.3" } }, @@ -16603,12 +16580,6 @@ "get-intrinsic": "^1.1.1" } }, - "has-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", - "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", - "dev": true - }, "has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -19417,14 +19388,14 @@ } }, "regexp.prototype.flags": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", - "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", + "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==", "dev": true, "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "functions-have-names": "^1.2.3" + "define-properties": "^1.1.3", + "functions-have-names": "^1.2.2" } }, "regexpu-core": { @@ -19927,6 +19898,14 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, + "aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "requires": { + "dequal": "^2.0.3" + } + }, "estree-walker": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", diff --git a/web/package.json b/web/package.json index aabc5f61db..9fe3fc5b33 100644 --- a/web/package.json +++ b/web/package.json @@ -28,6 +28,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/svelte": "^4.0.3", "@types/cookie": "^0.5.1", + "@types/dom-to-image": "^2.6.4", "@types/justified-layout": "^4.1.0", "@types/leaflet": "^1.9.1", "@types/leaflet.markercluster": "^1.5.1", @@ -62,6 +63,7 @@ "axios": "^0.27.2", "buffer": "^6.0.3", "copy-image-clipboard": "^2.1.2", + "dom-to-image": "^2.6.0", "handlebars": "^4.7.7", "justified-layout": "^4.1.0", "leaflet": "^1.9.4", diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte index 35bab9fa81..191996b726 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte @@ -126,6 +126,7 @@ text={asset.isArchived ? 'Unarchive' : 'Archive'} /> {/if} + onMenuClick('asProfileImage')} text="As profile picture" /> {/if} diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index 9622699342..d6a5b525d9 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -13,6 +13,7 @@ import PhotoViewer from './photo-viewer.svelte'; import VideoViewer from './video-viewer.svelte'; import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; + import ProfileImageCropper from '../shared-components/profile-image-cropper.svelte'; import { assetStore } from '$lib/stores/assets.store'; import { isShowDetail } from '$lib/stores/preferences.store'; @@ -31,6 +32,7 @@ let isShowDeleteConfirmation = false; let addToSharedAlbum = true; let shouldPlayMotionPhoto = false; + let isShowProfileImageCrop = false; let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true; let canCopyImagesToClipboard: boolean; const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key); @@ -246,6 +248,7 @@ on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)} on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)} on:toggleArchive={toggleArchive} + on:asProfileImage={() => (isShowProfileImageCrop = true)} /> @@ -332,6 +335,14 @@ {/if} + + {#if isShowProfileImageCrop} + (isShowProfileImageCrop = false)} + on:close-viewer={handleCloseViewer} + /> + {/if}