adding tools for client side thumbnail generation

2025-02-11 19:19:16 +00:00 · 2023-04-26 22:54:06 -07:00 · 2023-04-26 22:54:06 -07:00 · ea349dffbf
commit ea349dffbf
parent 7782ace9c4
6 changed files with 65 additions and 5 deletions
--- a/app/mobile/ios/Podfile.lock
+++ b/app/mobile/ios/Podfile.lock
@ -321,8 +321,12 @@ PODS:
  - React-jsinspector (0.71.3)
  - React-logger (0.71.3):
    - glog
+  - react-native-create-thumbnail (1.6.4):
+    - React-Core
  - react-native-document-picker (8.1.3):
    - React-Core
+  - react-native-image-resizer (3.0.5):
+    - React-Core
  - react-native-keep-awake (1.1.0):
    - React-Core
  - react-native-receive-sharing-intent (2.0.0):
@ -445,6 +449,8 @@ PODS:
    - FirebaseCoreExtension (= 10.5.0)
    - React-Core
    - RNFBApp
+  - RNFS (2.20.0):
+    - React-Core
  - RNGestureHandler (2.9.0):
    - React-Core
  - RNImageCropPicker (0.39.0):
@ -516,7 +522,9 @@ DEPENDENCIES:
  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
  - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-create-thumbnail (from `../node_modules/react-native-create-thumbnail`)
  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
+  - "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)"
  - "react-native-keep-awake (from `../node_modules/@sayem314/react-native-keep-awake`)"
  - react-native-receive-sharing-intent (from `../node_modules/react-native-receive-sharing-intent`)
  - react-native-rsa-native (from `../node_modules/react-native-rsa-native`)
@ -543,6 +551,7 @@ DEPENDENCIES:
  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
  - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
  - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
+  - RNFS (from `../node_modules/react-native-fs`)
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
  - RNReanimated (from `../node_modules/react-native-reanimated`)
@ -609,8 +618,12 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native/ReactCommon/jsinspector"
  React-logger:
    :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-create-thumbnail:
+    :path: "../node_modules/react-native-create-thumbnail"
  react-native-document-picker:
    :path: "../node_modules/react-native-document-picker"
+  react-native-image-resizer:
+    :path: "../node_modules/@bam.tech/react-native-image-resizer"
  react-native-keep-awake:
    :path: "../node_modules/@sayem314/react-native-keep-awake"
  react-native-receive-sharing-intent:
@ -663,6 +676,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-firebase/app"
  RNFBMessaging:
    :path: "../node_modules/@react-native-firebase/messaging"
+  RNFS:
+    :path: "../node_modules/react-native-fs"
  RNGestureHandler:
    :path: "../node_modules/react-native-gesture-handler"
  RNImageCropPicker:
@ -712,7 +727,9 @@ SPEC CHECKSUMS:
  React-jsiexecutor: 515b703d23ffadeac7687bc2d12fb08b90f0aaa1
  React-jsinspector: 9f7c9137605e72ca0343db4cea88006cb94856dd
  React-logger: 957e5dc96d9dbffc6e0f15e0ee4d2b42829ff207
+  react-native-create-thumbnail: e022bcdcba8a0b4529a50d3fa1a832ec921be39d
  react-native-document-picker: 958e2bc82e128be69055be261aeac8d872c8d34c
+  react-native-image-resizer: 00ceb0e05586c7aadf061eea676957a6c2ec60fa
  react-native-keep-awake: acbee258db16483744910f0da3ace39eb9ab47fd
  react-native-receive-sharing-intent: 62ab28c50e6ae56d32b9e841d7452091312a0bc7
  react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
@ -739,6 +756,7 @@ SPEC CHECKSUMS:
  RNDeviceInfo: 749f2e049dcd79e2e44f134f66b73a06951b5066
  RNFBApp: 4f8ea53443d52c7db793234d2398a357fc6cfbf1
  RNFBMessaging: c686471358d20d54f716a8b7b7f10f8944c966ec
+  RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
  RNImageCropPicker: 14fe1c29298fb4018f3186f455c475ab107da332
  RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
--- a/app/mobile/package.json
+++ b/app/mobile/package.json
@ -10,6 +10,7 @@
    "test": "jest"
  },
  "dependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.5",
    "@braintree/sanitize-url": "^6.0.2",
    "@react-native-clipboard/clipboard": "^1.11.1",
    "@react-native-firebase/app": "^17.2.0",
@ -27,8 +28,10 @@
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-base64": "^0.2.1",
+    "react-native-create-thumbnail": "^1.6.4",
    "react-native-device-info": "^10.4.0",
    "react-native-document-picker": "^8.1.3",
+    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-image-crop-picker": "^0.39.0",
    "react-native-incall-manager": "^4.0.1",
--- a/app/mobile/src/package.json
+++ b/app/mobile/src/package.json
@ -1,3 +1,6 @@
 {
-  "name": "src"
+  "name": "src",
+  "dependencies": {
+    "react-native-fs": "^2.20.0"
+  }
 }
--- a/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js
+++ b/app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js
@ -5,6 +5,9 @@ import { Image } from 'react-native';
 import Colors from 'constants/Colors';
 import { getChannelSeals, getContentKey, encryptTopicSubject } from 'context/sealUtil';
 import { AccountContext } from 'context/AccountContext';
+import { createThumbnail } from "react-native-create-thumbnail";
+import ImageResizer from '@bam.tech/react-native-image-resizer';
+import RNFS from 'react-native-fs';

 export function useAddTopic(contentKey) {

@ -104,7 +107,7 @@ export function useAddTopic(contentKey) {
    setMessage: (message) => {
      updateState({ message });
    },
-    addImage: (data) => {
+    addImage: async (data) => {
      const url = data.startsWith('file:') ? data : 'file://' + data;

      assetId.current++;
@ -113,8 +116,18 @@ export function useAddTopic(contentKey) {
        updateState({ assets: [ ...state.assets, asset ] });
      })
    },
-    addVideo: (data) => {
+    addVideo: async (data) => {
      const url = data.startsWith('file:') ? data : 'file://' + data
+
+      const shot = await createThumbnail({ url: url, timeStamp: 5000, })
+      console.log(shot);
+
+      const thumb = await ImageResizer.createResizedImage('file://' + shot.path, 192, 192, "JPEG", 50, 0, null);
+      console.log(thumb);
+
+      const base = await RNFS.readFile(thumb.path, 'base64')
+      console.log('data:image/jpeg;base64,' + base);
+    
      assetId.current++;
      const asset = { key: assetId.current, type: 'video', data: url, ratio: 1, duration: 0, position: 0 };
      updateState({ assets: [ ...state.assets, asset ] });
--- a/app/mobile/yarn.lock
+++ b/app/mobile/yarn.lock
@ -1072,6 +1072,11 @@
    "@babel/helper-validator-identifier" "^7.19.1"
    to-fast-properties "^2.0.0"

+"@bam.tech/react-native-image-resizer@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@bam.tech/react-native-image-resizer/-/react-native-image-resizer-3.0.5.tgz#6661ba020de156268f73bdc92fbb93ef86f88a13"
+  integrity sha512-u5QGUQGGVZiVCJ786k9/kd7pPRZ6eYfJCYO18myVCH8FbVI7J8b5GT2Svjj2x808DlWeqfaZOOzxPqo27XYvrQ==
+
 "@bcoe/v8-coverage@^0.2.3":
  version "0.2.3"
  resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@ -2477,7 +2482,7 @@ balanced-match@^1.0.0:
  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==

-base-64@0.1.0:
+base-64@0.1.0, base-64@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
  integrity sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==
@ -6305,6 +6310,11 @@ react-native-codegen@^0.71.5:
    jscodeshift "^0.13.1"
    nullthrows "^1.1.1"

+react-native-create-thumbnail@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/react-native-create-thumbnail/-/react-native-create-thumbnail-1.6.4.tgz#90f5b0a587de6e3738a7632fe3d9a9624ed83581"
+  integrity sha512-JWuKXswDXtqUPfuqh6rjCVMvTSSG3kUtwvSK/YdaNU0i+nZKxeqHmt/CO2+TyI/WSUFynGVmWT1xOHhCZAFsRQ==
+
 react-native-device-info@^10.4.0:
  version "10.4.0"
  resolved "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.4.0.tgz"
@ -6322,6 +6332,14 @@ react-native-elevation@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-native-elevation/-/react-native-elevation-1.0.0.tgz#2a091c688290ac9b08b5842d1a8e8a00fc84233e"
  integrity sha512-BWIKcEYtzjRV6GpkX0Km5/w2E7fgIcywiQOT7JZTc5NSbv/YI9kpFinB9lRFsOoRVGmiqq/O3VfP/oH2clIiBA==

+react-native-fs@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"
+  integrity sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==
+  dependencies:
+    base-64 "^0.1.0"
+    utf8 "^3.0.0"
+
 react-native-gesture-handler@^2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"
@ -7538,6 +7556,11 @@ use@^3.1.0:
  resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==

+utf8@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+  integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
--- a/net/container/Dockerfile
+++ b/net/container/Dockerfile
@ -36,7 +36,7 @@ RUN if [ "$TARGETPLATFORM" = "linux/amd64" ]; then ARCHITECTURE=amd64; elif [ "$
    && wget -P /app https://go.dev/dl/go1.17.5.linux-${ARCHITECTURE}.tar.gz \
    && tar -C /usr/local -xzf /app/go1.17.5.linux-${ARCHITECTURE}.tar.gz 

-RUN git        clone  https://github.com/balzack/databag.git /app/databag
+RUN git            clone                        https://github.com/balzack/databag.git /app/databag

 RUN yarn config set network-timeout 300000
 RUN yarn --cwd /app/databag/net/web install