Skip to content

Commit d3155f2

Browse files
Sunday-CrunkSunday-Crunk
authored
Merge pull request #75 from penwern/replay-web-integration
Final tweaks
2 parents d847662 + 66e6b55 commit d3155f2

File tree

2 files changed

+133
-61
lines changed

2 files changed

+133
-61
lines changed

‎src/js/core/Events/PreviewWarc.js‎

Lines changed: 90 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,109 @@
11
// Shared function to handle WARC file detection and viewing
2-
async function handleWarcFileAction(node) {
2+
function handleWarcFileAction(node) {
33
console.log("Checking node for WARC compatibility:", node);
44

5-
// Check if it's a WARC-compatible file
5+
// Check if it's a WARC-compatible file FIRST
66
const fileName = node.getLabel();
77
const isWarcCompatible = fileName.match(/\.(warc|warc\.gz|wacz)$/i);
88

99
if (!isWarcCompatible) {
1010
console.log("Not a WARC-compatible file, ignoring");
11-
return false; // Return false to indicate we didn't handle it
11+
return false; // Return false immediately - don't block anything
1212
}
1313

1414
console.log("WARC-compatible file detected, launching viewer");
1515

16-
// Get the file URL using your existing logic
17-
const fileUrl = await PydioApi._PydioClient.buildPresignedGetUrl(node);
16+
// Check if it's a WACZ file (skip options) or WARC file (show options)
17+
const isWaczFile = fileName.match(/\.wacz$/i);
1818

19-
// Create and show the WARC options modal
20-
const optionsModal = Curate.ui.modals.curatePopup(
21-
{
22-
title: "Preview Web Archive",
23-
},
24-
{
25-
afterLoaded: (container) => {
26-
const mainContent = container.querySelector(
27-
".config-main-options-container"
19+
// Handle the async URL generation
20+
(async () => {
21+
try {
22+
const fileUrl = await PydioApi._PydioClient.buildPresignedGetUrl(node);
23+
24+
if (isWaczFile) {
25+
// Skip options for WACZ files - go straight to viewer
26+
const viewerModal = Curate.ui.modals.curatePopup(
27+
{
28+
title: "Preview Web-Archive",
29+
},
30+
{
31+
afterLoaded: (container) => {
32+
// Style the popup for maximum size
33+
const modalContent = container.querySelector(
34+
".config-modal-content"
35+
);
36+
if (modalContent) {
37+
modalContent.style.width = "95vw";
38+
modalContent.style.height = "90vh";
39+
modalContent.style.maxWidth = "1400px";
40+
modalContent.style.maxHeight = "900px";
41+
modalContent.style.padding = "16px";
42+
}
43+
// Find the main content container and update it
44+
const mainContent = container.querySelector(
45+
".config-main-options-container"
46+
);
47+
if (mainContent) {
48+
// Style the main content to take full space
49+
mainContent.style.height = "100%";
50+
mainContent.style.display = "flex";
51+
mainContent.style.flexDirection = "column";
52+
// Create wrapper with border radius
53+
const viewerWrapper = document.createElement("div");
54+
viewerWrapper.style.cssText = `
55+
flex: 1;
56+
border-radius: 12px;
57+
overflow: hidden;
58+
border: 1px solid var(--md-sys-color-outline-variant);
59+
background: var(--md-sys-color-surface);
60+
`;
61+
// Clear existing content and add the replay component inside wrapper
62+
mainContent.innerHTML = "";
63+
viewerWrapper.innerHTML = `<replay-web-page
64+
source="${fileUrl}"
65+
url=""
66+
replayBase="/workers/"
67+
embed="default"
68+
style="width: 100%; height: 100%; display: block; border-radius: inherit;">
69+
</replay-web-page>`;
70+
mainContent.appendChild(viewerWrapper);
71+
}
72+
},
73+
}
2874
);
29-
if (mainContent) {
30-
const warcOptions = document.createElement("warc-options-modal");
31-
warcOptions.setFileInfo(fileUrl, fileName);
32-
warcOptions.closeSelf = optionsModal.close;
33-
mainContent.appendChild(warcOptions);
34-
}
35-
},
75+
// Fire the viewer modal
76+
viewerModal.fire();
77+
} else {
78+
// Show options modal for WARC files
79+
const optionsModal = Curate.ui.modals.curatePopup(
80+
{
81+
title: "Preview Web Archive",
82+
},
83+
{
84+
afterLoaded: (container) => {
85+
const mainContent = container.querySelector(
86+
".config-main-options-container"
87+
);
88+
if (mainContent) {
89+
const warcOptions =
90+
document.createElement("warc-options-modal");
91+
warcOptions.setFileInfo(fileUrl, fileName);
92+
warcOptions.closeSelf = optionsModal.close;
93+
mainContent.appendChild(warcOptions);
94+
}
95+
},
96+
}
97+
);
98+
99+
optionsModal.fire();
100+
}
101+
} catch (error) {
102+
console.error("Error building presigned URL:", error);
36103
}
37-
);
104+
})();
38105

39-
optionsModal.fire();
40-
return true; // Return true to indicate we handled it
106+
return true; // Block propagation immediately for WARC files
41107
}
42108

43109
// Event handler for "open" button clicks (your original working code)

‎src/js/external/ExternalScripts.js‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,45 @@
11
const externalScripts = [
2-
{
3-
"name":"he",
4-
"url":"https://cdn.jsdelivr.net/npm/[email protected]/he.min.js"
5-
},
6-
{
7-
"name":"swal",
8-
"url":"https://cdn.jsdelivr.net/npm/sweetalert2@11"
9-
},
10-
{
11-
"name":"papaparse",
12-
"url":"https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"
13-
},
14-
{
15-
"name":"chart.js",
16-
"url":"https://cdn.jsdelivr.net/npm/chart.js"
17-
},
18-
{
19-
"name":"spark-md5",
20-
"url":"https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"
21-
}
22-
]
23-
function applyScripts(scripts){
24-
scripts.forEach(script=>{
25-
// Create a <script> element
26-
let s = document.createElement('script');
27-
28-
// Set the source attribute to the CDN URL of the library
29-
s.src = script.url
30-
s.onerror = function() {
31-
console.error('Failed to load external library: ', script.name, "please reload the page or contact your admin if the issue persists.")
32-
}
33-
// Append the <script> element to the <head> section of the document
34-
document.head.appendChild(s);
35-
36-
})
37-
}
38-
applyScripts(externalScripts)
2+
{
3+
name: "he",
4+
url: "https://cdn.jsdelivr.net/npm/[email protected]/he.min.js",
5+
},
6+
{
7+
name: "swal",
8+
url: "https://cdn.jsdelivr.net/npm/sweetalert2@11",
9+
},
10+
{
11+
name: "papaparse",
12+
url: "https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js",
13+
},
14+
{
15+
name: "chart.js",
16+
url: "https://cdn.jsdelivr.net/npm/chart.js",
17+
},
18+
{
19+
name: "spark-md5",
20+
url: "https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js",
21+
},
22+
{
23+
name: "replaywebpage",
24+
url: "https://cdn.jsdelivr.net/npm/[email protected]/ui.js",
25+
},
26+
];
27+
function applyScripts(scripts) {
28+
scripts.forEach((script) => {
29+
// Create a <script> element
30+
let s = document.createElement("script");
3931

32+
// Set the source attribute to the CDN URL of the library
33+
s.src = script.url;
34+
s.onerror = function () {
35+
console.error(
36+
"Failed to load external library: ",
37+
script.name,
38+
"please reload the page or contact your admin if the issue persists."
39+
);
40+
};
41+
// Append the <script> element to the <head> section of the document
42+
document.head.appendChild(s);
43+
});
44+
}
45+
applyScripts(externalScripts);

0 commit comments

Comments
 (0)