fixed infinite scroll on high res screens on fixed ts issues

This commit is contained in:
subnub
2024-12-28 14:06:05 -05:00
parent e4fdc51743
commit 94aac88023
8 changed files with 10 additions and 268 deletions
@@ -1,19 +0,0 @@
import { FileInterface } from "../../../models/file-model";
import { UserInterface } from "../../../models/user-model";
import createThumbnailS3 from "./createThumbnailS3";
import createThumbnailFilesystem from "./createThumbnailFS";
import env from "../../../enviroment/env";
const createThumnailAny = async (
currentFile: FileInterface,
filename: string,
user: UserInterface
) => {
if (env.dbType === "s3") {
return await createThumbnailS3(currentFile, filename, user);
} else {
return await createThumbnailFilesystem(currentFile, filename, user);
}
};
export default createThumnailAny;
@@ -1,115 +0,0 @@
import mongoose from "../../../db/connections/mongoose";
import crypto from "crypto";
import Thumbnail from "../../../models/thumbnail-model";
import sharp from "sharp";
import { FileInterface } from "../../../models/file-model";
import { UserInterface } from "../../../models/user-model";
import fs from "fs";
import uuid from "uuid";
import env from "../../../enviroment/env";
import { ObjectId } from "mongodb";
import File from "../../../models/file-model";
const conn = mongoose.connection;
const createThumbnailFS = (
file: FileInterface,
filename: string,
user: UserInterface
) => {
return new Promise<FileInterface>((resolve, reject) => {
const password = user.getEncryptionKey();
let CIPHER_KEY = crypto.createHash("sha256").update(password!).digest();
const thumbnailFilename = uuid.v4();
const readStream = fs.createReadStream(file.metadata.filePath!);
const writeStream = fs.createWriteStream(
env.fsDirectory + thumbnailFilename
);
const decipher = crypto.createDecipheriv(
"aes256",
CIPHER_KEY,
file.metadata.IV
);
readStream.on("error", (e: Error) => {
console.log("File service upload thumbnail error", e);
resolve(file);
});
writeStream.on("error", (e: Error) => {
console.log("File service upload write thumbnail error", e);
resolve(file);
});
decipher.on("error", (e: Error) => {
console.log("File service upload thumbnail decipher error", e);
resolve(file);
});
try {
const thumbnailIV = crypto.randomBytes(16);
const thumbnailCipher = crypto.createCipheriv(
"aes256",
CIPHER_KEY,
thumbnailIV
);
const imageResize = sharp()
.resize(300)
.on("error", (e: Error) => {
console.log("resize error", e);
resolve(file);
});
readStream
.pipe(decipher)
.pipe(imageResize)
.pipe(thumbnailCipher)
.pipe(writeStream);
writeStream.on("finish", async () => {
const thumbnailModel = new Thumbnail({
name: filename,
owner: user._id,
IV: thumbnailIV,
path: env.fsDirectory + thumbnailFilename,
});
await thumbnailModel.save();
if (!file._id) {
return reject();
}
const updateFileResponse = await File.updateOne(
{ _id: new ObjectId(file._id), "metadata.owner": user._id },
{
$set: {
"metadata.hasThumbnail": true,
"metadata.thumbnailID": thumbnailModel._id,
},
}
);
if (updateFileResponse.modifiedCount === 0) {
return reject();
}
const updatedFile = await File.findById({
_id: new ObjectId(file._id),
"metadata.owner": user._id,
});
if (!updatedFile) return reject();
resolve(updatedFile?.toObject());
});
} catch (e) {
console.log("Thumbnail error", e);
resolve(file);
}
});
};
export default createThumbnailFS;
@@ -1,127 +0,0 @@
import mongoose from "../../../db/connections/mongoose";
import crypto from "crypto";
import Thumbnail from "../../../models/thumbnail-model";
import sharp from "sharp";
import { FileInterface } from "../../../models/file-model";
import { UserInterface } from "../../../models/user-model";
import uuid from "uuid";
import env from "../../../enviroment/env";
import s3 from "../../../db/connections/s3";
import { ObjectId } from "mongodb";
const conn = mongoose.connection;
const getS3Auth = async (file: FileInterface, user: UserInterface) => {
return { s3Storage: s3, bucket: env.s3Bucket };
};
const createThumbnailS3 = (
file: FileInterface,
filename: string,
user: UserInterface
) => {
return new Promise<FileInterface>(async (resolve, reject) => {
const password = user.getEncryptionKey();
let CIPHER_KEY = crypto.createHash("sha256").update(password!).digest();
const thumbnailFilename = uuid.v4();
const { s3Storage, bucket } = await getS3Auth(file, user);
const isPersonalFile = file.metadata.personalFile;
const params: any = { Bucket: bucket, Key: file.metadata.s3ID! };
const readStream = s3Storage.getObject(params).createReadStream();
const decipher = crypto.createDecipheriv(
"aes256",
CIPHER_KEY,
file.metadata.IV
);
readStream.on("error", (e: Error) => {
console.log("File service upload thumbnail error", e);
resolve(file);
});
decipher.on("error", (e: Error) => {
console.log("File service upload thumbnail decipher error", e);
resolve(file);
});
try {
const thumbnailIV = crypto.randomBytes(16);
const thumbnailCipher = crypto.createCipheriv(
"aes256",
CIPHER_KEY,
thumbnailIV
);
const imageResize = sharp()
.resize(300)
.on("error", (e: Error) => {
console.log("resize error", e);
resolve(file);
});
const paramsWrite: any = {
Bucket: bucket,
Body: readStream.pipe(decipher).pipe(imageResize).pipe(thumbnailCipher),
Key: thumbnailFilename,
};
s3Storage.upload(paramsWrite, async (err: any, data: any) => {
if (err) {
console.log("Amazon Upload Error", err);
reject("Amazon upload error");
}
const thumbnailModel = new Thumbnail({
name: thumbnailFilename,
owner: user._id,
IV: thumbnailIV,
s3ID: thumbnailFilename,
personalFile: isPersonalFile,
});
await thumbnailModel.save();
if (!file._id) {
return reject();
}
const getUpdatedFile = await conn.db
.collection("fs.files")
.findOneAndUpdate(
{ _id: new ObjectId(file._id) },
{
$set: {
"metadata.hasThumbnail": true,
"metadata.thumbnailID": thumbnailModel._id,
},
}
);
if (!getUpdatedFile) {
return reject();
}
let updatedFile: FileInterface = getUpdatedFile.value;
updatedFile = {
...updatedFile,
metadata: {
...updatedFile.metadata,
hasThumbnail: true,
thumbnailID: thumbnailModel._id,
},
} as FileInterface;
resolve(updatedFile);
});
} catch (e) {
console.log("Thumbnail error", e);
resolve(file);
}
});
};
export default createThumbnailS3;
+2 -1
View File
@@ -31,7 +31,8 @@ const sendPasswordResetEmail = async (
resetToken: string
) => {
try {
const transporter = createEmailTransporter();
// TODO: Fix any, for some reason some envs come up with a ts error for this
const transporter = createEmailTransporter() as any;
const emailAddress = env.emailAddress!;
const url = env.remoteURL + `/reset-password/${resetToken}`;
+2 -1
View File
@@ -31,7 +31,8 @@ const sendVerificationEmail = async (
emailToken: string
) => {
try {
const transporter = createEmailTransporter();
// TODO: Fix any, for some reason some envs come up with a ts error for this
const transporter = createEmailTransporter() as any;
const emailAddress = env.emailAddress!;
const url = env.remoteURL + `/verify-email/${emailToken}`;
+1 -1
View File
@@ -10,7 +10,7 @@
"dev": "concurrently \"vite\" \"tsc -w -p ./backend/tsconfig.json\" \"npm run dev:backend\"",
"dev:backend": "NODE_ENV=development nodemon dist-backend/server/server-start.js",
"build:frontend": "vite build",
"build:backend": "tsc -p ./backend/tsconfig.json --skipLibCheck",
"build:backend": "tsc -p ./backend/tsconfig.json",
"build": "npm run build:frontend && npm run build:backend",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
"start": "NODE_ENV=production node dist-backend/server/server-start.js",
+2 -2
View File
@@ -40,10 +40,10 @@ const DataForm = memo(
} else if (!fileList) {
return;
}
if (reachedIntersect && !isFetchingNextPage) {
if (reachedIntersect && !isFetchingNextPage && !isLoadingFiles) {
filesFetchNextPage();
}
}, [reachedIntersect, initialLoad, isFetchingNextPage]);
}, [reachedIntersect, initialLoad, isFetchingNextPage, isLoadingFiles]);
useEffect(() => {
if (!isLoading && navigationMap) {
+3 -2
View File
@@ -13,6 +13,7 @@ const Medias = memo(
data: files,
isFetchingNextPage,
fetchNextPage: filesFetchNextPage,
isLoading: isLoadingFiles,
} = useFiles();
const [initialLoad, setInitialLoad] = useState(true);
const { sentinelRef, reachedIntersect } = useInfiniteScroll();
@@ -31,10 +32,10 @@ const Medias = memo(
} else if (!files) {
return;
}
if (reachedIntersect && !isFetchingNextPage) {
if (reachedIntersect && !isFetchingNextPage && !isLoadingFiles) {
filesFetchNextPage();
}
}, [reachedIntersect, initialLoad, isFetchingNextPage]);
}, [reachedIntersect, initialLoad, isFetchingNextPage, isLoadingFiles]);
useEffect(() => {
if (!initialLoad && navigationMap) {