From ae6d27b0831c9b62e876c09c382de34f4deac086 Mon Sep 17 00:00:00 2001
From: Pinapelz
Date: Sun, 14 Apr 2024 02:26:50 -0700
Subject: change input method to remote json url - fixes character escaping
issues with query params
---
package.json | 20 +-
pages/index.tsx | 92 ++--
pnpm-lock.yaml | 1376 +++++++++++++++++++++++++++++++++++++++++--------------
3 files changed, 1098 insertions(+), 390 deletions(-)
diff --git a/package.json b/package.json
index 37cec1a..26e4221 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,12 @@
"start": "next start"
},
"dependencies": {
- "@tailwindcss/typography": "^0.5.8",
- "axios": "^1.2.1",
+ "@tailwindcss/typography": "^0.5.12",
+ "axios": "^1.6.8",
"linkify-react": "^4.1.3",
"linkifyjs": "^4.1.3",
"next": "13.0.6",
- "pretty-bytes": "^6.0.0",
+ "pretty-bytes": "^6.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-srv3": "^1.0.4",
@@ -21,13 +21,13 @@
},
"devDependencies": {
"@tailwindcss/ui": "^0.7.2",
- "@types/node": "^18.11.11",
- "@types/react": "^18.0.26",
- "@types/react-dom": "^18.0.9",
- "postcss": "^8.4.19",
+ "@types/node": "^18.19.31",
+ "@types/react": "^18.2.78",
+ "@types/react-dom": "^18.2.25",
+ "postcss": "^8.4.38",
"postcss-preset-env": "^7.8.3",
- "prettier": "^2.8.0",
- "tailwindcss": "^3.2.4",
- "typescript": "^4.9.3"
+ "prettier": "^2.8.8",
+ "tailwindcss": "^3.4.3",
+ "typescript": "^4.9.5"
}
}
diff --git a/pages/index.tsx b/pages/index.tsx
index 259776d..a008fdc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,45 +17,52 @@ const CustomPlayerPage = () => {
const [urlVideo, setUrlVideo] = React.useState("");
const [urlChat, setUrlChat] = React.useState("");
const [urlYtt, setUrlYtt] = React.useState("");
- const [urlInfoJson, setUrlInfoJson] = React.useState("");
const [infoJson, setInfoJson] = React.useState({} as any);
const [showPlayer, setShowPlayer] = React.useState(false);
+ const [dataSet, setDataSet] = React.useState(false);
const { query } = router;
- const videoUrl = query.vid as string;
- const chatUrl = query.chat as string;
- const infoJsonUrl = query.info as string;
- const srv3Url = query.ytt as string;
+ const jsonDataUrl = query.jsonData as string;
+ const timeSeconds = query.time as string;
- if (videoUrl && videoUrl !== urlVideo) {
- setUrlVideo(videoUrl);
- }
- if (chatUrl && chatUrl !== urlChat) {
- setUrlChat(chatUrl);
- }
-
- if (srv3Url && srv3Url !== urlYtt) {
- setUrlYtt(srv3Url);
- }
+ useEffect(() => {
+ if (timeSeconds) {
+ setPlaybackProgress(parseFloat(timeSeconds));
+ }
+ }, [timeSeconds]);
- if (infoJsonUrl && infoJsonUrl !== urlInfoJson) {
- setUrlInfoJson(infoJsonUrl);
- }
- if (videoUrl && !showPlayer) {
- setShowPlayer(true);
+ if(jsonDataUrl && !dataSet) {
+ fetch(jsonDataUrl)
+ .then((res) => res.json())
+ .then((data) => {
+ const { info, video, chat, srv3, ts } = data;
+ if (info) {
+ fetch(info)
+ .then((res) => res.json())
+ .then((data) => {
+ setInfoJson(data);
+ });
+ }
+ if (video) {
+ setUrlVideo(video);
+ }
+ if (chat) {
+ setUrlChat(chat);
+ }
+ if (srv3) {
+ setUrlYtt(srv3);
+ }
+ setDataSet(true);
+ setShowPlayer(true);
+ })
+ .catch((error) => {
+ console.error("Error fetching JSON data:", error);
+ setDataSet(true);
+ setShowPlayer(true);
+ });
}
- useEffect(() => {
- if (urlInfoJson) {
- fetch(urlInfoJson)
- .then((res) => res.json())
- .then((data) => {
- setInfoJson(data);
- });
- }
- }),
- [urlChat];
const handleFile = (
e: React.ChangeEvent,
@@ -157,7 +164,7 @@ const CustomPlayerPage = () => {
) : null}
- {!videoUrl ? (
+ {urlVideo ? (
+
+
+ This is a specialized version of the player that allows you to pass in a json data file.
+