Skip to content

Commit 19ae779

Browse files
alyssaxuualyssaxuu
committed
Improved chunk handling in the sandboxed environment
1 parent 546052b commit 19ae779

File tree

5 files changed

+60
-60
lines changed

5 files changed

+60
-60
lines changed

‎build/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"description":"__MSG_extDesc__","version":"3.1.14","manifest_version":3,"name":"__MSG_extName__","default_locale":"en","background":{"service_worker":"background.bundle.js"},"action":{"default_icon":"assets/img/icon-34.png"},"icons":{"128":"assets/img/icon-128.png"},"host_permissions":["<all_urls>"],"content_scripts":[{"matches":["<all_urls>"],"js":["contentScript.bundle.js"],"css":["assets/fonts/fonts.css"]}],"web_accessible_resources":[{"resources":["content.styles.css","blank.mp4","playground.html","editor.html","assets/*","setup.html","worker.js","vendor/*","recorder.html","recorderoffscreen.html","sandbox.html","wrapper.html","camera.html","permissions.html","region.html","waveform.html","playground.html","editorfallback.html","download.html","*"],"matches":["<all_urls>"]}],"oauth2":{"client_id":"560517327251-m7n1k3kddknu7s9s4ejvrs1bj91gutd7.apps.googleusercontent.com","scopes":["https://www.googleapis.com/auth/drive.file"]},"cross_origin_embedder_policy":{"value":"require-corp"},"cross_origin_opener_policy":{"value":"same-origin"},"content_security_policy":{"sandbox":"sandbox allow-scripts allow-modals allow-popups; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; object-src 'self';worker-src 'self' blob: ;","extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; media-src 'self' data: blob: *;"},"sandbox":{"pages":["editor.html"]},"commands":{"start-recording":{"suggested_key":{"default":"Alt+Shift+G"},"description":"Start recording"},"cancel-recording":{"suggested_key":{"default":"Alt+Shift+X"},"description":"Cancel recording"},"pause-recording":{"suggested_key":{"default":"Alt+Shift+M"},"description":"Pause/Resume recording"}},"permissions":["identity","activeTab","storage","unlimitedStorage","downloads","tabs","tabCapture","scripting"],"optional_permissions":["offscreen","desktopCapture","alarms"]}
1+
{"description":"__MSG_extDesc__","version":"3.1.15","manifest_version":3,"name":"__MSG_extName__","default_locale":"en","background":{"service_worker":"background.bundle.js"},"action":{"default_icon":"assets/img/icon-34.png"},"icons":{"128":"assets/img/icon-128.png"},"host_permissions":["<all_urls>"],"content_scripts":[{"matches":["<all_urls>"],"js":["contentScript.bundle.js"],"css":["assets/fonts/fonts.css"]}],"web_accessible_resources":[{"resources":["content.styles.css","blank.mp4","playground.html","editor.html","assets/*","setup.html","worker.js","vendor/*","recorder.html","recorderoffscreen.html","sandbox.html","wrapper.html","camera.html","permissions.html","region.html","waveform.html","playground.html","editorfallback.html","download.html","*"],"matches":["<all_urls>"]}],"oauth2":{"client_id":"560517327251-m7n1k3kddknu7s9s4ejvrs1bj91gutd7.apps.googleusercontent.com","scopes":["https://www.googleapis.com/auth/drive.file"]},"cross_origin_embedder_policy":{"value":"require-corp"},"cross_origin_opener_policy":{"value":"same-origin"},"content_security_policy":{"sandbox":"sandbox allow-scripts allow-modals allow-popups; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; object-src 'self';worker-src 'self' blob: ;","extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; media-src 'self' data: blob: *;"},"sandbox":{"pages":["editor.html"]},"commands":{"start-recording":{"suggested_key":{"default":"Alt+Shift+G"},"description":"Start recording"},"cancel-recording":{"suggested_key":{"default":"Alt+Shift+X"},"description":"Cancel recording"},"pause-recording":{"suggested_key":{"default":"Alt+Shift+M"},"description":"Pause/Resume recording"}},"permissions":["identity","activeTab","storage","unlimitedStorage","downloads","tabs","tabCapture","scripting"],"optional_permissions":["offscreen","desktopCapture","alarms"]}

‎build/sandbox.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "__MSG_extName__",
44
"description": "__MSG_extDesc__",
55
"default_locale": "en",
6-
"version": "3.1.14",
6+
"version": "3.1.15",
77
"background": {
88
"service_worker": "background.bundle.js"
99
},

‎src/pages/Sandbox/context/ContentState.jsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -397,38 +397,35 @@ const ContentState = (props) => {
397397
chunkCount.current = contentState.chunkCount;
398398
}, [contentState.chunkCount]);
399399

400-
const handleBatch = async (chunks, sendResponse) => {
401-
// Process chunks with a promise to ensure all async operations are completed
402-
await Promise.all(
403-
chunks.map(async (chunk) => {
404-
if (contentStateRef.current.chunkIndex >= chunkCount.current) {
405-
console.warn("Too many chunks received");
406-
// Handling for too many chunks
407-
return Promise.resolve(); // Resolve early for this case
408-
}
400+
const handleBatch = (chunks, sendResponse) => {
401+
// Process chunks asynchronously, but do not make this function async
402+
(async () => {
403+
try {
404+
await Promise.all(
405+
chunks.map(async (chunk) => {
406+
if (contentStateRef.current.chunkIndex >= chunkCount.current) {
407+
console.warn("Too many chunks received");
408+
return; // Skip processing
409+
}
409410

410-
const chunkData = base64ToUint8Array(chunk.chunk);
411-
videoChunks.current.push(chunkData);
411+
const chunkData = base64ToUint8Array(chunk.chunk);
412+
videoChunks.current.push(chunkData);
412413

413-
// Assuming setContentState doesn't need to be awaited
414-
setContentState((prevState) => ({
415-
...prevState,
416-
chunkIndex: prevState.chunkIndex + 1,
417-
}));
414+
setContentState((prevState) => ({
415+
...prevState,
416+
chunkIndex: prevState.chunkIndex + 1,
417+
}));
418+
})
419+
);
418420

419-
return Promise.resolve(); // Resolve after processing each chunk
420-
})
421-
)
422-
.then(() => {
423-
// Only send response after all chunks are processed
424421
sendResponse({ status: "ok" });
425-
})
426-
.catch((error) => {
422+
} catch (error) {
427423
console.error("Error processing batch", error);
428-
// Handle error scenario, possibly notify sender of failure
429-
});
424+
// Optionally send error back: sendResponse({ status: "error", error })
425+
}
426+
})();
430427

431-
return true; // Keep the messaging channel open for the response
428+
return true; // Synchronously tell Chrome to keep the port open
432429
};
433430

434431
// Check Chrome version
@@ -486,7 +483,7 @@ const ContentState = (props) => {
486483
} else if (message.type === "make-video-tab") {
487484
makeVideoTab(sendResponse, message);
488485

489-
return;
486+
return true;
490487
} else if (message.type === "saved-to-drive") {
491488
setContentState((prevContentState) => ({
492489
...prevContentState,
@@ -535,10 +532,15 @@ const ContentState = (props) => {
535532
);
536533

537534
useEffect(() => {
538-
chrome.runtime.onMessage.addListener(onChromeMessage);
535+
const messageListener = (message, sender, sendResponse) => {
536+
const shouldKeepPortOpen = onChromeMessage(message, sender, sendResponse);
537+
return shouldKeepPortOpen === true;
538+
};
539+
540+
chrome.runtime.onMessage.addListener(messageListener);
539541

540542
return () => {
541-
chrome.runtime.onMessage.removeListener(onChromeMessage);
543+
chrome.runtime.onMessage.removeListener(messageListener);
542544
};
543545
}, []);
544546

‎src/pages/Sandbox/layout/player/RightPanel.js‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import JSZip from "jszip";
55

66
import { ReactSVG } from "react-svg";
77

8-
const URL =
8+
const EXT_URL =
99
"chrome-extension://" + chrome.i18n.getMessage("@@extension_id") + "/assets/";
1010

1111
// Components
@@ -17,7 +17,6 @@ import { ContentStateContext } from "../../context/ContentState"; // Import the
1717

1818
const RightPanel = () => {
1919
const [contentState, setContentState] = useContext(ContentStateContext); // Access the ContentState context
20-
const [webmFallback, setWebmFallback] = useState(false);
2120
const contentStateRef = useRef(contentState);
2221
const consoleErrorRef = useRef([]);
2322

@@ -238,7 +237,7 @@ const RightPanel = () => {
238237
{!contentState.fallback && contentState.offline && (
239238
<div className={styles.alert}>
240239
<div className={styles.buttonLeft}>
241-
<ReactSVG src={URL + "editor/icons/no-internet.svg"} />
240+
<ReactSVG src={EXT_URL + "editor/icons/no-internet.svg"} />
242241
</div>
243242
<div className={styles.buttonMiddle}>
244243
<div className={styles.buttonTitle}>
@@ -256,7 +255,7 @@ const RightPanel = () => {
256255
{contentState.fallback && (
257256
<div className={styles.alert}>
258257
<div className={styles.buttonLeft}>
259-
<ReactSVG src={URL + "editor/icons/alert.svg"} />
258+
<ReactSVG src={EXT_URL + "editor/icons/alert.svg"} />
260259
</div>
261260
<div className={styles.buttonMiddle}>
262261
<div className={styles.buttonTitle}>
@@ -274,7 +273,7 @@ const RightPanel = () => {
274273
contentState.duration <= contentState.editLimit && (
275274
<div className={styles.alert}>
276275
<div className={styles.buttonLeft}>
277-
<ReactSVG src={URL + "editor/icons/alert.svg"} />
276+
<ReactSVG src={EXT_URL + "editor/icons/alert.svg"} />
278277
</div>
279278
<div className={styles.buttonMiddle}>
280279
<div className={styles.buttonTitle}>
@@ -301,7 +300,7 @@ const RightPanel = () => {
301300
!contentState.updateChrome && (
302301
<div className={styles.alert}>
303302
<div className={styles.buttonLeft}>
304-
<ReactSVG src={URL + "editor/icons/alert.svg"} />
303+
<ReactSVG src={EXT_URL + "editor/icons/alert.svg"} />
305304
</div>
306305
<div className={styles.buttonMiddle}>
307306
<div className={styles.buttonTitle}>
@@ -352,7 +351,7 @@ const RightPanel = () => {
352351
!contentState.noffmpeg && (
353352
<div className={styles.alert}>
354353
<div className={styles.buttonLeft}>
355-
<ReactSVG src={URL + "editor/icons/alert.svg"} />
354+
<ReactSVG src={EXT_URL + "editor/icons/alert.svg"} />
356355
</div>
357356
<div className={styles.buttonMiddle}>
358357
<div className={styles.buttonTitle}>
@@ -374,7 +373,6 @@ const RightPanel = () => {
374373
</div>
375374
</div>
376375
)}
377-
378376
<div className={styles.section}>
379377
<div className={styles.sectionTitle}>
380378
{chrome.i18n.getMessage("sandboxEditTitle")}
@@ -392,7 +390,7 @@ const RightPanel = () => {
392390
}
393391
>
394392
<div className={styles.buttonLeft}>
395-
<ReactSVG src={URL + "editor/icons/trim.svg"} />
393+
<ReactSVG src={EXT_URL + "editor/icons/trim.svg"} />
396394
</div>
397395
<div className={styles.buttonMiddle}>
398396
<div className={styles.buttonTitle}>
@@ -412,7 +410,7 @@ const RightPanel = () => {
412410
</div>
413411
</div>
414412
<div className={styles.buttonRight}>
415-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
413+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
416414
</div>
417415
</div>
418416
<div
@@ -427,7 +425,7 @@ const RightPanel = () => {
427425
}
428426
>
429427
<div className={styles.buttonLeft}>
430-
<ReactSVG src={URL + "editor/icons/crop.svg"} />
428+
<ReactSVG src={EXT_URL + "editor/icons/crop.svg"} />
431429
</div>
432430
<div className={styles.buttonMiddle}>
433431
<div className={styles.buttonTitle}>
@@ -447,7 +445,7 @@ const RightPanel = () => {
447445
</div>
448446
</div>
449447
<div className={styles.buttonRight}>
450-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
448+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
451449
</div>
452450
</div>
453451
<div
@@ -462,7 +460,7 @@ const RightPanel = () => {
462460
}
463461
>
464462
<div className={styles.buttonLeft}>
465-
<ReactSVG src={URL + "editor/icons/audio.svg"} />
463+
<ReactSVG src={EXT_URL + "editor/icons/audio.svg"} />
466464
</div>
467465
<div className={styles.buttonMiddle}>
468466
<div className={styles.buttonTitle}>
@@ -482,7 +480,7 @@ const RightPanel = () => {
482480
</div>
483481
</div>
484482
<div className={styles.buttonRight}>
485-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
483+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
486484
</div>
487485
</div>
488486
</div>
@@ -509,7 +507,7 @@ const RightPanel = () => {
509507
disabled={contentState.saveDrive}
510508
>
511509
<div className={styles.buttonLeft}>
512-
<ReactSVG src={URL + "editor/icons/drive.svg"} />
510+
<ReactSVG src={EXT_URL + "editor/icons/drive.svg"} />
513511
</div>
514512
<div className={styles.buttonMiddle}>
515513
<div className={styles.buttonTitle}>
@@ -528,7 +526,7 @@ const RightPanel = () => {
528526
</div>
529527
</div>
530528
<div className={styles.buttonRight}>
531-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
529+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
532530
</div>
533531
</div>
534532
</div>
@@ -546,7 +544,7 @@ const RightPanel = () => {
546544
disabled={contentState.isFfmpegRunning}
547545
>
548546
<div className={styles.buttonLeft}>
549-
<ReactSVG src={URL + "editor/icons/download.svg"} />
547+
<ReactSVG src={EXT_URL + "editor/icons/download.svg"} />
550548
</div>
551549
<div className={styles.buttonMiddle}>
552550
<div className={styles.buttonTitle}>
@@ -559,7 +557,7 @@ const RightPanel = () => {
559557
</div>
560558
</div>
561559
<div className={styles.buttonRight}>
562-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
560+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
563561
</div>
564562
</div>
565563
)}
@@ -578,7 +576,7 @@ const RightPanel = () => {
578576
}
579577
>
580578
<div className={styles.buttonLeft}>
581-
<ReactSVG src={URL + "editor/icons/download.svg"} />
579+
<ReactSVG src={EXT_URL + "editor/icons/download.svg"} />
582580
</div>
583581
<div className={styles.buttonMiddle}>
584582
<div className={styles.buttonTitle}>
@@ -600,7 +598,7 @@ const RightPanel = () => {
600598
</div>
601599
</div>
602600
<div className={styles.buttonRight}>
603-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
601+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
604602
</div>
605603
</div>
606604
{!contentState.fallback && (
@@ -611,7 +609,7 @@ const RightPanel = () => {
611609
disabled={contentState.isFfmpegRunning}
612610
>
613611
<div className={styles.buttonLeft}>
614-
<ReactSVG src={URL + "editor/icons/download.svg"} />
612+
<ReactSVG src={EXT_URL + "editor/icons/download.svg"} />
615613
</div>
616614
<div className={styles.buttonMiddle}>
617615
<div className={styles.buttonTitle}>
@@ -628,7 +626,7 @@ const RightPanel = () => {
628626
</div>
629627
</div>
630628
<div className={styles.buttonRight}>
631-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
629+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
632630
</div>
633631
</div>
634632
)}
@@ -647,7 +645,7 @@ const RightPanel = () => {
647645
}
648646
>
649647
<div className={styles.buttonLeft}>
650-
<ReactSVG src={URL + "editor/icons/gif.svg"} />
648+
<ReactSVG src={EXT_URL + "editor/icons/gif.svg"} />
651649
</div>
652650
<div className={styles.buttonMiddle}>
653651
<div className={styles.buttonTitle}>
@@ -669,7 +667,7 @@ const RightPanel = () => {
669667
</div>
670668
</div>
671669
<div className={styles.buttonRight}>
672-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
670+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
673671
</div>
674672
</div>
675673
</div>
@@ -688,7 +686,7 @@ const RightPanel = () => {
688686
}}
689687
>
690688
<div className={styles.buttonLeft}>
691-
<ReactSVG src={URL + "editor/icons/download.svg"} />
689+
<ReactSVG src={EXT_URL + "editor/icons/download.svg"} />
692690
</div>
693691
<div className={styles.buttonMiddle}>
694692
<div className={styles.buttonTitle}>
@@ -699,7 +697,7 @@ const RightPanel = () => {
699697
</div>
700698
</div>
701699
<div className={styles.buttonRight}>
702-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
700+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
703701
</div>
704702
</div>
705703
<div
@@ -710,7 +708,7 @@ const RightPanel = () => {
710708
}}
711709
>
712710
<div className={styles.buttonLeft}>
713-
<ReactSVG src={URL + "editor/icons/flag.svg"} />
711+
<ReactSVG src={EXT_URL + "editor/icons/flag.svg"} />
714712
</div>
715713
<div className={styles.buttonMiddle}>
716714
<div className={styles.buttonTitle}>
@@ -721,7 +719,7 @@ const RightPanel = () => {
721719
</div>
722720
</div>
723721
<div className={styles.buttonRight}>
724-
<ReactSVG src={URL + "editor/icons/right-arrow.svg"} />
722+
<ReactSVG src={EXT_URL + "editor/icons/right-arrow.svg"} />
725723
</div>
726724
</div>
727725
</div>

0 commit comments

Comments
 (0)