Merge pull request #1524 from session-foundation/feat/animated_profile_pictures

feat: animated profile pictures

Author: Bilb

.eslintignore

@@ -20,7 +20,11 @@ ts/localization/locales.ts
 
 about_preload.js
 commitlint.config.js
-libsession.worker.config.js
 password_preload.js
 sass.config.js
-utils.worker.config.js
+*.worker.config.js
+
+# Not too sure why we can't have eslint on those files atm
+ts/webworker/workers/node/util/util.worker.ts
+ts/webworker/workers/node/libsession/libsession.worker.ts
+ts/webworker/workers/node/image_processor/image_processor.worker.ts

.github/workflows/build-binaries.yml

@@ -150,6 +150,7 @@ jobs:
           artifacts: 'dist/latest-linux.yml'
           allowUpdates: true
           omitNameDuringUpdate: true
+          omitBodyDuringUpdate: true
           replacesArtifacts: true
           updateOnlyUnreleased: true
 
@@ -294,8 +295,9 @@ jobs:
         uses: ncipollo/release-action@v1
         with:
           tag: v${{ steps.get_version.outputs.VERSION_TAG }}
+          name: 'Session ${{ steps.get_version.outputs.VERSION_TAG }}'
           draft: true
-          name: 'Draft'
+          bodyFile: ${{ env.SHOULD_PUBLISH_ALPHA == 'true' && 'build/release-notes-alpha.md' || 'build/release-notes.md' }}
           artifacts: 'dist/latest-mac.yml'
           allowUpdates: true
           omitBodyDuringUpdate: true

CONTRIBUTING.md

@@ -257,7 +257,7 @@ git clone https://github.com/session-foundation/session-desktop.git
 cd session-desktop
 npm install --global yarn      # (only if you don’t already have `yarn`)
 yarn install --frozen-lockfile # Install and build dependencies (this will take a while)
-yarn build-everything
+yarn build
 yarn test                      # A good idea to make sure tests run first
 yarn start-prod                # Start Session!
 ```
@@ -312,12 +312,12 @@ You can keep the developer tools open (`View > Toggle Developer Tools`) and pres
 # `yarn build:workers` to fix the "exports undefined" error on start.
 
 # Terminal A
-yarn build-everything:watch # this process will keep running until you stop it
+yarn watch # this process will keep running until you stop it
 
 # Terminal B
 yarn build:workers
 
-# If you change any SASS files while running "yarn build-everything:watch" it won't be detected.
+# If you change any SASS files while running "yarn watch" it won't be detected.
 # You will need to run the sass build command.
 
 # Terminal B
@@ -429,7 +429,7 @@ see how they did things.
 You can build a production binary by running the following:
 
 ```sh
-yarn build-everything
+yarn build
 yarn build-release
 ```
 

INTERNALBUILDS.md

@@ -87,7 +87,7 @@ Once your development environment is set up, here are the steps to build the app
 
 ```sh
 yarn install --frozen-lockfile # install all dependencies of this project
-yarn build-everything # transpile and assemble files
+yarn build # transpile and assemble files
 yarn build-release
 ```
 

actions/setup_and_build/action.yml

@@ -46,4 +46,4 @@ runs:
 
     - name: Generate and concat files
       shell: bash
-      run: yarn build-everything
+      run: yarn build

image_processor.worker.config.js

@@ -0,0 +1,41 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+  entry: './ts/webworker/workers/node/image_processor/image_processor.worker.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    fallback: {
+      crypto: false,
+      path: false,
+      fs: false,
+      stream: false,
+    },
+  },
+  output: {
+    filename: 'image_processor.worker.compiled.js',
+    path: path.resolve(__dirname, 'ts', 'webworker', 'workers', 'node', 'image_processor'),
+  },
+  target: 'node',
+  externals: {
+    sharp: 'commonjs sharp',
+  },
+  optimization: {
+    minimize: process.env.NODE_ENV === 'production',
+  },
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  watch: false, // false by default but can be overridden by the command line
+  watchOptions: {
+    aggregateTimeout: 200,
+    poll: 1000,
+  },
+};

images/cta_hero_animated_profile_animation_layer.webp

@@ -36,6 +36,12 @@ module.exports = {
   },
   target: 'node',
   optimization: {
-    minimize: isProd,
+    minimize: process.env.NODE_ENV === 'production',
+  },
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  watch: false, // false by default but can be overridden by the command line
+  watchOptions: {
+    aggregateTimeout: 200,
+    poll: 1000,
   },
 };

images/cta_hero_animated_profile_base_layer.webp

@@ -24,14 +24,11 @@
     "start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .",
     "start-prod:pretty": "yarn start-prod | npx pino-pretty",
     "start-dev": "cross-env NODE_ENV=development NODE_APP_INSTANCE=devprod$MULTI electron .",
-    "build-everything": "yarn print-deps && yarn clean && yarn protobuf && yarn update-git-info && yarn sass && yarn build:locales-soft && tsc && yarn build:workers",
-    "build-everything:soft": "yarn print-deps && yarn clean && yarn protobuf && yarn update-git-info && yarn sass && yarn build:locales-soft && tsc && yarn build:workers",
-    "build-everything:watch": "yarn clean && yarn protobuf && yarn update-git-info && yarn sass && yarn build:locales-soft && yarn build:workers && yarn tsc -w",
+    "build": "yarn print-deps && yarn clean && yarn protobuf && yarn update-git-info && yarn sass && yarn build:locales-soft && tsc && yarn build:workers",
     "start-dev:pretty": "yarn start-dev | npx pino-pretty",
-    "build:workers": "yarn worker:utils && yarn worker:libsession",
+    "build:workers": "yarn worker:utils && yarn worker:libsession && yarn worker:image_processor",
     "build:locales": "python3 ./tools/localization/generateLocales.py --generate-types --print-problems --error-on-problems --error-old-dynamic-variables",
     "build:locales-soft": "python3 ./tools/localization/generateLocales.py --generate-types --print-problems --print-problem-strings",
-    "watch": "yarn clean && yarn protobuf && yarn update-git-info && yarn build-everything:watch",
     "protobuf": "pbjs --target static-module --wrap commonjs --out ts/protobuf/compiled.js protos/*.proto && pbts --out ts/protobuf/compiled.d.ts ts/protobuf/compiled.js --force-long",
     "sass": "rimraf --glob 'stylesheets/dist/' && webpack  --config=./sass.config.js",
     "clean": "rimraf --glob 'ts/**/*.js' 'ts/*.js' 'ts/*.js.map' 'ts/**/*.js.map tsconfig.tsbuildinfo'",
@@ -47,9 +44,12 @@
     "update-git-info": "node ./build/updateLocalConfig.js",
     "worker:utils": "webpack  --config=./utils.worker.config.js",
     "worker:libsession": "rimraf --glob 'ts/webworker/workers/node/libsession/*.node' && webpack  --config=./libsession.worker.config.js",
+    "worker:image_processor": "webpack  --config=./image_processor.worker.config.js",
     "dedup": "npx --yes yarn-deduplicate yarn.lock",
     "prepare": "husky",
-    "print-deps": "node -v  && python3 --version"
+    "print-deps": "node -v  && python3 --version",
+    "watch": "yarn clean && yarn update-git-info && concurrently -n PBJS,SASS,LOCALES,UTIL,LIBSESSION,IMAGE,TS -c yellow,green,red,blue,blue,blue,green \"yarn protobuf\" \"yarn sass --watch\" \"yarn build:locales-soft\" \"yarn worker:utils --watch\" \"yarn worker:libsession --watch\" \"yarn worker:image_processor --watch\" \"yarn tsc --watch\""
+
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
@@ -60,7 +60,6 @@
     "abort-controller": "3.0.0",
     "auto-bind": "^4.0.0",
     "blob-util": "2.0.2",
-    "blueimp-load-image": "^5.16.0",
     "buffer-crc32": "1.0.0",
     "bytebuffer": "^5.0.1",
     "clsx": "^2.1.1",
@@ -113,6 +112,7 @@
     "rimraf": "6.0.1",
     "sanitize.css": "^12.0.1",
     "semver": "^7.7.1",
+    "sharp": "^0.34.3",
     "styled-components": "^6.1.15",
     "uuid": "11.1.0",
     "viem": "^2.26.0",
@@ -125,7 +125,6 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.6.1",
-    "@types/blueimp-load-image": "^5.16.6",
     "@types/buffer-crc32": "^0.2.4",
     "@types/bytebuffer": "^5.0.49",
     "@types/chai": "4.3.20",
@@ -155,6 +154,7 @@
     "chai": "^4.5.0",
     "chai-as-promised": "^7.1.2",
     "chai-bytes": "^0.1.2",
+    "concurrently": "^9.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "electron": "34.2.0",
@@ -253,7 +253,9 @@
       "node_modules/@signalapp/better-sqlite3/build/Release/better_sqlite3.node",
       "node_modules/libsession_util_nodejs/build/Release/libsession_util_nodejs.node",
       "ts/webworker/workers/node/libsession/*.node",
-      "ts/mains/main_node.js"
+      "ts/mains/main_node.js",
+      "**/node_modules/sharp/**/*",
+      "**/node_modules/@img/**/*"
     ],
     "deb": {
       "depends": [