From 73ea2a428588a0f13d35f07e651852d013ca1931 Mon Sep 17 00:00:00 2001 From: Rahul-538 Date: Thu, 5 Sep 2024 10:44:24 +0530 Subject: [PATCH 01/13] Added ETA & Task ID tabs --- src/config/tableColumns.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/config/tableColumns.js b/src/config/tableColumns.js index bafa9d73..8839e50f 100644 --- a/src/config/tableColumns.js +++ b/src/config/tableColumns.js @@ -161,6 +161,10 @@ export const adminMemberListColumns = [ ]; export const videoTaskListColumns = [ + { + name:"id", + label:"Task Id" + }, { name: "task_type", label: "Task Type", @@ -183,6 +187,15 @@ export const videoTaskListColumns = [ }, }, }, + { + name: "eta", + label: "ETA", + options: { + customBodyRender: (value) => { + return {moment(value).format("DD/MM/YYYY HH:mm:ss")}; + }, + }, + }, { name: "status", label: "Status", From d17888e74f6f38cf98caa5ecc94fee4721365226 Mon Sep 17 00:00:00 2001 From: sagarika-padmanaban Date: Sun, 8 Sep 2024 13:00:26 +0530 Subject: [PATCH 02/13] project owner changes --- src/containers/Organization/MyOrganization.jsx | 2 +- src/containers/Organization/Project/EditProject.jsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/containers/Organization/MyOrganization.jsx b/src/containers/Organization/MyOrganization.jsx index 54b85cc3..dde348e6 100644 --- a/src/containers/Organization/MyOrganization.jsx +++ b/src/containers/Organization/MyOrganization.jsx @@ -230,7 +230,7 @@ const MyOrganization = () => { alignItems="center" > - {(isUserOrgOwner|| userData?.role==="ADMIN") && ( + {(isUserOrgOwner|| userData?.role==="ADMIN" || userData?.role==="PROJECT_MANAGER") && ( - - - - - - - -
- -
- - - - - - - - -
- -
- - - - - -
- -
- - - - - -
- -
- - - - - - -
- -
- - - + + {isAdmin && ( + <> + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + + +
+ +
+ + + + + )} + + {isOrgOwner && ( + <> + + + + + + + + + + + + + )} + + {/* Dialogs */} {addUserDialog && ( { /> )} - {openMemberDialog && ( - setOpenMemberDialog(false)} - /> - )} + {openMemberDialog && setOpenMemberDialog(false)} />} ); }; -export default DashBoard; +export default DashBoard; \ No newline at end of file diff --git a/src/containers/Admin/TaskDetails.jsx b/src/containers/Admin/TaskDetails.jsx new file mode 100644 index 00000000..baf0d3d2 --- /dev/null +++ b/src/containers/Admin/TaskDetails.jsx @@ -0,0 +1,142 @@ +import React, { useState } from 'react'; +import { Grid, TextField, Button, Box, Typography, CircularProgress, Tabs, Tab } from '@mui/material'; +import { JSONTree } from 'react-json-tree'; +import GetTaskDetailsAPI from "redux/actions/api/Admin/GetTaskDetails.js"; +import { snakeToTitleCase } from '../../utils/utils.js'; + +function TaskDetails() { + const [taskId, setTaskId] = useState(''); + const [tabValue, setTabValue] = useState(0); + const [taskDetails, setTaskDetails] = useState(null); + const [loading, setLoading] = useState(false); + + const fetchTaskDetails = async () => { + setLoading(true); + setTaskDetails(null); + const apiObj = new GetTaskDetailsAPI(taskId); + fetch(apiObj.apiEndPoint(), apiObj.getHeaders()) + .then(async (res) => { + if (res.status === 200) { + const data = await res.json(); + setTaskDetails(data); + } else if (res.status === 404) { + setTaskDetails({ error: 'Task not found' }); + } else { + setTaskDetails({ error: 'Something went wrong' }); + } + setLoading(false); + }); + }; + + const theme = { + extend: { + base00: '#000', + base01: '#383830', + base02: '#49483e', + base03: '#75715e', + base04: '#a59f85', + base05: '#f8f8f2', + base06: '#f5f4f1', + base07: '#f9f8f5', + base08: '#f92672', + base09: '#fd971f', //orange + base0A: '#f4bf75', + base0B: '#a6e22e', //green + base0C: '#a1efe4', + base0D: '#66d9ef', + base0E: '#ae81ff', + base0F: '#cc6633', + }, + value: ({ style }, nodeType, keyPath) => ({ + style: { + ...style, + borderLeft: '2px solid #ccc', + marginLeft: '1.375em', + paddingLeft: '2em', + }, + }), + nestedNode: ({ style }, nodeType, keyPath) => ({ + style: { + ...style, + borderLeft: '2px solid #ccc', + marginLeft: keyPath.length > 1 ? '1.375em' : 0, + textIndent: '-0.375em', + }, + }), + arrowContainer: ({ style }, arrowStyle) => ({ + style: { + ...style, + paddingRight: '1.375rem', + textIndent: '0rem', + backgroundColor: 'white', + }, + }), + }; + + function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( + + ); + } + + return ( + + + + setTaskId(event.target.value)} + /> + + + + {loading && ( + + + + )} + {taskDetails && ( + <> + + setTabValue(v)} aria-label="task-details-tabs"> + + + + + + {typeof key === "string" ? snakeToTitleCase(key) : key}} + valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}} + theme={theme} + /> + + + + )} + + ); +} + +export default TaskDetails; diff --git a/src/containers/Admin/VideoTaskDetails.jsx b/src/containers/Admin/VideoTaskDetails.jsx new file mode 100644 index 00000000..572c422f --- /dev/null +++ b/src/containers/Admin/VideoTaskDetails.jsx @@ -0,0 +1,231 @@ +import React, { useState } from 'react'; +import { Grid, TextField, Button, Tab, Tabs, Box, Typography, CircularProgress } from '@mui/material'; +import { JSONTree } from 'react-json-tree'; +import GetAllTranscriptionsAPI from "redux/actions/api/Admin/GetAllTranscriptions.js"; +import GetAllTranslationsAPI from "redux/actions/api/Admin/GetAllTranslations.js"; +import GetVideoTaskDetailsAPI from "redux/actions/api/Admin/GetVideoTaskDetails.js"; +import { snakeToTitleCase } from '../../utils/utils.js'; + +function VideoTaskDetails() { + const [videoId, setVideoId] = useState(''); + const [tabValue, setTabValue] = useState(0); + const [taskDetails, setTaskDetails] = useState(null); + const [transcriptions, setTranscriptions] = useState(null); + const [translations, setTranslations] = useState(null); + const [loading, setLoading] = useState(false); + const [loadingTranscriptions, setLoadingTranscriptions] = useState(false); + const [loadingTranslations, setLoadingTranslations] = useState(false); + + const fetchVideoTaskDetails = async () => { + setLoading(true); + setTaskDetails(null); + setTranscriptions(null); + setTranslations(null); + + const apiObj = new GetVideoTaskDetailsAPI(videoId); + fetch(apiObj.apiEndPoint(), apiObj.getHeaders()) + .then(async (res) => { + if (res.status === 200) { + const data = await res.json(); + return data; + } else if (res.status === 404) { + return { error: 'Task not found' }; + } else { + return { error: 'Something went wrong' }; + } + }) + .then(data => { + setLoading(false); + setTaskDetails(data); + fetchTranscriptions(); + fetchTranslations(); + }); + }; + + const fetchTranscriptions = async () => { + setLoadingTranscriptions(true); + const apiObj = new GetAllTranscriptionsAPI(videoId); + fetch(apiObj.apiEndPoint(), apiObj.getHeaders()) + .then(async (res) => { + if (res.status === 200) { + const data = await res.json(); + return data; + } else { + return { error: 'Failed to fetch transcriptions' }; + } + }) + .then(data => { + setTranscriptions(data.transcripts); + setLoadingTranscriptions(false); + }); + }; + + const fetchTranslations = async () => { + setLoadingTranslations(true); + const apiObj = new GetAllTranslationsAPI(videoId); + fetch(apiObj.apiEndPoint(), apiObj.getHeaders()) + .then(async (res) => { + if (res.status === 200) { + const data = await res.json(); + return data; + } else { + return { error: 'Failed to fetch translations' }; + } + }) + .then(data => { + setTranslations(data); + setLoadingTranslations(false); + }); + }; + + const theme = { + extend: { + base00: '#000', + base01: '#383830', + base02: '#49483e', + base03: '#75715e', + base04: '#a59f85', + base05: '#f8f8f2', + base06: '#f5f4f1', + base07: '#f9f8f5', + base08: '#f92672', + base09: '#fd971f', + base0A: '#f4bf75', + base0B: '#a6e22e', + base0C: '#a1efe4', + base0D: '#66d9ef', + base0E: '#ae81ff', + base0F: '#cc6633', + }, + value: ({ style }, nodeType, keyPath) => ({ + style: { + ...style, + borderLeft: '2px solid #ccc', + marginLeft: '1.375em', + paddingLeft: '2em', + }, + }), + nestedNode: ({ style }, nodeType, keyPath) => ({ + style: { + ...style, + borderLeft: '2px solid #ccc', + marginLeft: keyPath.length > 1 ? '1.375em' : 0, + textIndent: '-0.375em', + }, + }), + arrowContainer: ({ style }, arrowStyle) => ({ + style: { + ...style, + paddingRight: '1.375rem', + textIndent: '0rem', + backgroundColor: 'white', + }, + }), + }; + + function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( + + ); + } + + return ( + + + + setVideoId(event.target.value)} + /> + + + + {loading && ( + + + + )} + {taskDetails && ( + <> + + setTabValue(v)} aria-label="video-task-details-tabs"> + + + + + + + + + {typeof key === "string" ? snakeToTitleCase(key) : key}} + valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}} + theme={theme} + /> + + + {loadingTranscriptions ? ( + + + + ) : transcriptions ? ( + {typeof key === "string" ? snakeToTitleCase(key) : key}} + valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}} + theme={theme} + /> + ) : ( + No transcriptions available. + )} + + + {loadingTranslations ? ( + + + + ) : translations ? ( + {typeof key === "string" ? snakeToTitleCase(key) : key}} + valueRenderer={(raw) => {typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}} + theme={theme} + /> + ) : ( + No translations available. + )} + + + + )} + + ); +} + +export default VideoTaskDetails; diff --git a/src/redux/actions/api/Admin/GetAllTranscriptions.js b/src/redux/actions/api/Admin/GetAllTranscriptions.js new file mode 100644 index 00000000..48a6cae4 --- /dev/null +++ b/src/redux/actions/api/Admin/GetAllTranscriptions.js @@ -0,0 +1,43 @@ +import API from "../../../api"; +import ENDPOINTS from "../../../../config/apiendpoint"; +import constants from "../../../constants"; + +export default class GetAllTranscriptions extends API { + constructor(videoId, timeout = 2000) { + super("GET", timeout, false); + this.type = constants.GET_ALL_TRANSCRIPTIONS; + this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.GetAllTranscriptions}?video_id=${videoId}`; + } + + processResponse(res) { + super.processResponse(res); + if (res) { + this.taskDetails = res; + } else { + this.taskDetails = { error: 'No data received' }; + } + } + + apiEndPoint() { + return this.endpoint; + } + + getHeaders() { + const token = localStorage.getItem('token'); + if (!token) { + console.warn('Authorization token not found in localStorage'); + } + + this.headers = { + headers: { + "Content-Type": "application/json", + "Authorization": `JWT ${token}`, + }, + }; + return this.headers; + } + + getPayload() { + return this.taskDetails; + } +} diff --git a/src/redux/actions/api/Admin/GetAllTranslations.js b/src/redux/actions/api/Admin/GetAllTranslations.js new file mode 100644 index 00000000..c535f824 --- /dev/null +++ b/src/redux/actions/api/Admin/GetAllTranslations.js @@ -0,0 +1,43 @@ +import API from "../../../api"; +import ENDPOINTS from "../../../../config/apiendpoint"; +import constants from "../../../constants"; + +export default class GetAllTranslationsAPI extends API { + constructor(videoId, timeout = 2000) { + super("GET", timeout, false); + this.type = constants.GET_ALL_TRANSLATIONS; + this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.GetAllTranslations}?video_id=${videoId}`; + } + + processResponse(res) { + super.processResponse(res); + if (res) { + this.taskDetails = res; + } else { + this.taskDetails = { error: 'No data received' }; + } + } + + apiEndPoint() { + return this.endpoint; + } + + getHeaders() { + const token = localStorage.getItem('token'); + if (!token) { + console.warn('Authorization token not found in localStorage'); + } + + this.headers = { + headers: { + "Content-Type": "application/json", + "Authorization": `JWT ${token}`, + }, + }; + return this.headers; + } + + getPayload() { + return this.taskDetails; + } +} diff --git a/src/redux/actions/api/Admin/GetTaskDetails.js b/src/redux/actions/api/Admin/GetTaskDetails.js new file mode 100644 index 00000000..5516edf0 --- /dev/null +++ b/src/redux/actions/api/Admin/GetTaskDetails.js @@ -0,0 +1,47 @@ +/** + * GetTaskDetails + */ + +import API from "../../../api"; +import ENDPOINTS from "../../../../config/apiendpoint"; +import constants from "../../../constants"; + +export default class GetTaskDetailsAPI extends API { + constructor(taskId, timeout = 2000) { + super("GET", timeout, false); + this.type = constants.GET_TASK_DETAILS; + this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.task}${taskId}/`; + } + + processResponse(res) { + super.processResponse(res); + if (res) { + this.taskDetails = res; + } + } + + apiEndPoint() { + return this.endpoint; + } + + getBody() {} + + getHeaders() { + const token = localStorage.getItem('token'); + if (!token) { + console.warn('Authorization token not found in localStorage'); + } + + this.headers = { + headers: { + "Content-Type": "application/json", + "Authorization": `JWT ${token}`, + }, + }; + return this.headers; + } + + getPayload() { + return this.taskDetails + } +} diff --git a/src/redux/actions/api/Admin/GetVideoTaskDetails.js b/src/redux/actions/api/Admin/GetVideoTaskDetails.js new file mode 100644 index 00000000..99e0bbb6 --- /dev/null +++ b/src/redux/actions/api/Admin/GetVideoTaskDetails.js @@ -0,0 +1,43 @@ +import API from "../../../api"; +import ENDPOINTS from "../../../../config/apiendpoint"; +import constants from "../../../constants"; + +export default class GetVideoTaskDetailsAPI extends API { + constructor(videoId, timeout = 2000) { + super("GET", timeout, false); + this.type = constants.GET_VIDEO_TASK_DETAILS; + this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.getVideoTasks}?video_id=${videoId}`; + } + + processResponse(res) { + super.processResponse(res); + if (res) { + this.taskDetails = res; + } else { + this.taskDetails = { error: 'No data received' }; + } + } + + apiEndPoint() { + return this.endpoint; + } + + getHeaders() { + const token = localStorage.getItem('token'); + if (!token) { + console.warn('Authorization token not found in localStorage'); + } + + this.headers = { + headers: { + "Content-Type": "application/json", + "Authorization": `JWT ${token}`, + }, + }; + return this.headers; + } + + getPayload() { + return this.taskDetails; + } +} diff --git a/src/redux/constants.js b/src/redux/constants.js index 1298aa6b..abe48a61 100644 --- a/src/redux/constants.js +++ b/src/redux/constants.js @@ -72,6 +72,9 @@ const constants = { ONBOARDING: "ONBOARDING", //Task + GET_ALL_TRANSCRIPTIONS:"GET_ALL_TRANSCRIPTIONS", + GET_TASK_ANNOTATIONS:"GET_TASK_ANNOTATIONS", + GET_ALL_TRANSLATIONS:"GET_ALL_TRANSLATIONS", CREATE_NEW_TASk: "CREATE_NEW_TASk", GET_TASK_LIST: "GET_TASK_LIST", GET_TASK_DETAILS: "GET_TASK_DETAILS", @@ -137,6 +140,7 @@ const constants = { CREATE_MEMBER: "CREATE_MEMBER", UPDATE_ONBOARDING_FORM: "UPDATE_ONBOARDING_FORM", GET_ONBOARDING_LIST: "GET_ONBOARDING_LIST", + GET_VIDEO_TASK_DETAILS:"GET_VIDEO_TASK_DETAILS", //clear state CLEAR_STATE: "CLEAR_STATE", @@ -167,4 +171,4 @@ const constants = { GET_VOICEOVER_CHART: "GET_VOICEOVER_CHART", }; -export default constants; +export default constants; \ No newline at end of file From 2582c5c7d96e13ca4b42e72c43a2387529a4a80a Mon Sep 17 00:00:00 2001 From: kartikvirendrar Date: Thu, 12 Sep 2024 16:52:04 +0530 Subject: [PATCH 05/13] added missing dependancy react-json-tree --- package-lock.json | 132 ++++++++++++++++++ package.json | 1 + .../Video/components/VideoPanel.jsx | 13 +- 3 files changed, 139 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0baac435..27d347df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-joyride": "^2.5.3", + "react-json-tree": "^0.19.0", "react-material-ui-carousel": "^3.4.2", "react-mui-dropzone": "^4.0.7", "react-paginate": "^8.1.4", @@ -4647,6 +4648,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -6418,6 +6424,18 @@ "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==" }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -6434,6 +6452,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -12527,6 +12554,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.assignwith": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz", @@ -15126,6 +15158,17 @@ "react-dom": ">=16.2.0" } }, + "node_modules/react-base16-styling": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.10.0.tgz", + "integrity": "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==", + "dependencies": { + "@types/lodash": "^4.17.0", + "color": "^4.2.3", + "csstype": "^3.1.3", + "lodash-es": "^4.17.21" + } + }, "node_modules/react-contextmenu": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/react-contextmenu/-/react-contextmenu-2.14.0.tgz", @@ -15314,6 +15357,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-json-tree": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.19.0.tgz", + "integrity": "sha512-PqT1WRVcWP+RROsZPQfNEKIC1iM/ZMfY4g5jN6oDnXp5593PPRAYgoHcgYCDjflAHQMtxl8XGdlTwIBdEGUXvw==", + "dependencies": { + "@types/lodash": "^4.17.0", + "react-base16-styling": "^0.10.0" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -16569,6 +16625,19 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -22028,6 +22097,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -23366,6 +23440,15 @@ "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==" }, + "color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "requires": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -23379,6 +23462,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -27982,6 +28074,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.assignwith": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz", @@ -29694,6 +29791,17 @@ "react-audio-visualize": "^1.1.3" } }, + "react-base16-styling": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.10.0.tgz", + "integrity": "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==", + "requires": { + "@types/lodash": "^4.17.0", + "color": "^4.2.3", + "csstype": "^3.1.3", + "lodash-es": "^4.17.21" + } + }, "react-contextmenu": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/react-contextmenu/-/react-contextmenu-2.14.0.tgz", @@ -29852,6 +29960,15 @@ } } }, + "react-json-tree": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.19.0.tgz", + "integrity": "sha512-PqT1WRVcWP+RROsZPQfNEKIC1iM/ZMfY4g5jN6oDnXp5593PPRAYgoHcgYCDjflAHQMtxl8XGdlTwIBdEGUXvw==", + "requires": { + "@types/lodash": "^4.17.0", + "react-base16-styling": "^0.10.0" + } + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -30754,6 +30871,21 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "requires": { + "is-arrayish": "^0.3.1" + }, + "dependencies": { + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + } + } + }, "sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/package.json b/package.json index 5c55a015..35509f91 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-joyride": "^2.5.3", + "react-json-tree": "^0.19.0", "react-material-ui-carousel": "^3.4.2", "react-mui-dropzone": "^4.0.7", "react-paginate": "^8.1.4", diff --git a/src/containers/Organization/Video/components/VideoPanel.jsx b/src/containers/Organization/Video/components/VideoPanel.jsx index b122689d..c1c292f9 100644 --- a/src/containers/Organization/Video/components/VideoPanel.jsx +++ b/src/containers/Organization/Video/components/VideoPanel.jsx @@ -69,20 +69,19 @@ const VideoPanel = ({ setCurrentTime, setPlaying, useYtdlp, setUseYtdlp }) => {
{ ((videoDetails.length === 0 && taskData?.video_url?.includes("youtube")) || useYtdlp === false) ? - +