From 7d509e2ba6eb5b946b26dbf0b46dfa654b81266b Mon Sep 17 00:00:00 2001
From: Johnny Zheng <jzheng2@emich.edu>
Date: Wed, 19 Mar 2025 03:12:34 -0400
Subject: [PATCH] Fixed merge issues
---
package-lock.json | 151 ++++++++++++++++++++++++++++++++
package.json | 2 +
src/App.tsx | 10 ++-
src/components/FileUploader.tsx | 57 +++++++++---
4 files changed, 204 insertions(+), 16 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 54dee33..e0214aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,8 @@
"react-swipeable": "^7.0.2",
"routes": "^2.1.0",
"save-dev": "^0.0.1-security",
+ "socket.io-client": "^4.8.1",
+ "uuid": "^11.1.0",
"vite-plugin-fs": "^1.1.0"
},
"devDependencies": {
@@ -2087,6 +2089,12 @@
"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
"license": "MIT"
},
+ "node_modules/@socket.io/component-emitter": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+ "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+ "license": "MIT"
+ },
"node_modules/@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -3846,6 +3854,66 @@
"node": ">= 0.8"
}
},
+ "node_modules/engine.io-client": {
+ "version": "6.6.3",
+ "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+ "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+ "license": "MIT",
+ "dependencies": {
+ "@socket.io/component-emitter": "~3.1.0",
+ "debug": "~4.3.1",
+ "engine.io-parser": "~5.2.1",
+ "ws": "~8.17.1",
+ "xmlhttprequest-ssl": "~2.1.1"
+ }
+ },
+ "node_modules/engine.io-client/node_modules/debug": {
+ "version": "4.3.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+ "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "^2.1.3"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/engine.io-client/node_modules/ws": {
+ "version": "8.17.1",
+ "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+ "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10.0.0"
+ },
+ "peerDependencies": {
+ "bufferutil": "^4.0.1",
+ "utf-8-validate": ">=5.0.2"
+ },
+ "peerDependenciesMeta": {
+ "bufferutil": {
+ "optional": true
+ },
+ "utf-8-validate": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/engine.io-parser": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+ "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10.0.0"
+ }
+ },
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -7676,6 +7744,68 @@
"node": ">=10"
}
},
+ "node_modules/socket.io-client": {
+ "version": "4.8.1",
+ "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+ "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@socket.io/component-emitter": "~3.1.0",
+ "debug": "~4.3.2",
+ "engine.io-client": "~6.6.1",
+ "socket.io-parser": "~4.2.4"
+ },
+ "engines": {
+ "node": ">=10.0.0"
+ }
+ },
+ "node_modules/socket.io-client/node_modules/debug": {
+ "version": "4.3.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+ "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "^2.1.3"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/socket.io-parser": {
+ "version": "4.2.4",
+ "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+ "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+ "license": "MIT",
+ "dependencies": {
+ "@socket.io/component-emitter": "~3.1.0",
+ "debug": "~4.3.1"
+ },
+ "engines": {
+ "node": ">=10.0.0"
+ }
+ },
+ "node_modules/socket.io-parser/node_modules/debug": {
+ "version": "4.3.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+ "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "^2.1.3"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8220,6 +8350,19 @@
"node": ">= 0.4.0"
}
},
+ "node_modules/uuid": {
+ "version": "11.1.0",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+ "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+ "funding": [
+ "https://github.com/sponsors/broofa",
+ "https://github.com/sponsors/ctavan"
+ ],
+ "license": "MIT",
+ "bin": {
+ "uuid": "dist/esm/bin/uuid"
+ }
+ },
"node_modules/varint": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
@@ -8602,6 +8745,14 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/xmlhttprequest-ssl": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+ "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/xtend": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 93e88e6..943e12c 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,8 @@
"react-swipeable": "^7.0.2",
"routes": "^2.1.0",
"save-dev": "^0.0.1-security",
+ "socket.io-client": "^4.8.1",
+ "uuid": "^11.1.0",
"vite-plugin-fs": "^1.1.0"
},
"devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index 6e8faba..d9212d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -638,6 +638,12 @@ function Home() {
}));
};
+ useEffect(() => {
+ if (currentVideo) {
+ setVideoInfo();
+ }
+ }, [currentVideo]);
+
console.log("Reply Liked State Before Rendering:", replyLiked);
return (
@@ -737,7 +743,7 @@ function Home() {
>
<div className="comments-list">
{comments.map((c) => (
- <div key={c.id} className="comment-box">
+ <div key={c.id} className="comment-box" style={{color:"black", textAlign: "left"}}>
<p>
<strong>{c.username}</strong> ({c.created_at}): {c.comment}
</p>
@@ -745,7 +751,7 @@ function Home() {
<div style={{ display: "flex", gap: "5x" }}>
{/* Toggle button for showing/hiding replies using icons */}
{c.replies && c.replies.length > 0 && (
- <div style={{ width: "24px", textAlign: "center" }}>
+ <div style={{ width: "24px", textAlign: "left", color:"black" }}>
<button
onClick={() => toggleRepliesVisible(c.id)}
style={{
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index 0b72653..c67e343 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
import axios from "axios";
import "dotenv";
import { io, Socket } from "socket.io-client";
@@ -10,15 +10,9 @@ import "../styles/auth.scss";
let uploadServer = "http://localhost:3001";
if (import.meta.env.VITE_UPLOAD_SERVER !== undefined) {
- // console.log(import.meta.env.VITE_UPLOAD_SERVER);
uploadServer = import.meta.env.VITE_UPLOAD_SERVER;
}
-// let loginServer = "http://localhost:8081"
-// if (import.meta.env.VITE_LOGIN_SERVER !== undefined) {
-// // console.log(import.meta.env.VITE_UPLOAD_SERVER);
-// loginServer = import.meta.env.VITE_LOGIN_SERVER;
-// }
interface FormValues {
title: string;
desc: string;
@@ -42,6 +36,38 @@ export default function FileUploader() {
});
const [status, setStatus] = useState<UploadStatus>("idle");
const [uploadProgress, setUploadProgress] = useState(0);
+ const [transcodingProgress, setTranscodingProgress] = useState(0);
+ const [sessionId] = useState<string>(uuidv4()); // Generate unique session ID
+ const [socket, setSocket] = useState<Socket | null>(null);
+
+ // Connect to socket.io server
+ useEffect(() => {
+ const newSocket = io(uploadServer);
+
+ newSocket.on("connect", () => {
+ console.log("Connected to server");
+ });
+
+ newSocket.on("transcode-progress", (data) => {
+ if (data.sessionId === sessionId || data.sessionId === "unknown") {
+ console.log(`Transcoding progress: ${data.progress}%`);
+ setTranscodingProgress(data.progress);
+
+ if (data.complete) {
+ setStatus("success");
+ } else if (status !== "transcoding" && data.progress > 0) {
+ setStatus("transcoding");
+ }
+ }
+ });
+
+ setSocket(newSocket);
+
+ // Clean up on unmount
+ return () => {
+ newSocket.disconnect();
+ };
+ }, [sessionId]);
function handleTitleChange(e: ChangeEvent<HTMLInputElement>) {
setTitle(e.target.value);
@@ -59,11 +85,7 @@ export default function FileUploader() {
setValues({ ...values, fileName: e.target.files[0].name });
}
}
- /**
- * Checks to see if a file is an MP4
- * @param file
- * @returns
- */
+
function isMP4(file: File) {
const fileName: string = file.name;
const fileExtension = fileName?.split(".").pop()?.toLowerCase();
@@ -88,11 +110,14 @@ export default function FileUploader() {
}
setStatus("uploading");
+ setUploadProgress(0);
+ setTranscodingProgress(0);
const formData = new FormData();
formData.append("file", file);
formData.append("title", title);
formData.append("description", desc);
+ formData.append("sessionId", sessionId);
const token = localStorage.getItem("authToken"); // Retrieve JWT token
try {
@@ -109,8 +134,12 @@ export default function FileUploader() {
},
});
+ // After successful upload, the server will start transcoding
+ // We'll now show transcoding progress through socket.io
+ setStatus("transcoding");
setStatus("success");
- } catch {
+ } catch (error) {
+ console.error("Upload error:", error);
setStatus("error");
}
}
@@ -208,4 +237,4 @@ export default function FileUploader() {
`}</style> */}
</div>
);
-}
+}
\ No newline at end of file
--
GitLab