From 646788beb03a816614a31dcc74da933d615d34a1 Mon Sep 17 00:00:00 2001
From: PhatLeBao-Phat <104715759+PhatLeBao-Phat@users.noreply.github.com>
Date: Mon, 30 Mar 2026 00:04:57 +0200
Subject: [PATCH] Add configs for pdf-diff server and pdf diffType + Add
 condition to check mediaType and route to pdf-diff server and pdf diffType

---
 src/components/diff-container.jsx | 13 ++++++++++---
 src/components/diff-view.jsx      |  1 +
 src/conf.json                     |  1 +
 src/js/constants/diff-types.js    |  8 ++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/diff-container.jsx b/src/components/diff-container.jsx
index d3f0ca5..b6b8227 100644
--- a/src/components/diff-container.jsx
+++ b/src/components/diff-container.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DiffView from './diff-view.jsx';
+import { diffTypesFor } from '../js/constants/diff-types';
 import '../css/diff-container.css';
 import YmdTimestampHeader from './ymd-timestamp-header.jsx';
 import DiffFooter from './footer.jsx';
@@ -150,10 +151,16 @@ export default class DiffContainer extends React.Component {
     if (!this.state.error) {
       const urlA = new URL(conf.snapshotsPrefix + timestampA + '/' + encodeURIComponent(url), window.location.origin);
       const urlB = new URL(conf.snapshotsPrefix + timestampB + '/' + encodeURIComponent(url), window.location.origin);
-      const webMonURL = new URL(conf.webMonitoringProcessingURL, window.location.origin);
-      return (<DiffView webMonitoringProcessingURL={webMonURL.toString()}
+      const ext = '.' + url.split('.').pop();
+      const availableTypes = diffTypesFor(ext);
+      const isPdf = availableTypes.length > 0 && ext === '.pdf';
+      const diffType = availableTypes.length > 0 ? availableTypes[0].value : 'SIDE_BY_SIDE_RENDERED';
+      const backendURL = isPdf
+        ? new URL(conf.pdfMonitoringProcessingURL, window.location.origin)
+        : new URL(conf.webMonitoringProcessingURL, window.location.origin);
+      return (<DiffView webMonitoringProcessingURL={backendURL.toString()}
         page={{ url: encodeURIComponent(url) }}
-        diffType={'SIDE_BY_SIDE_RENDERED'} a={urlA} b={urlB}
+        diffType={diffType} a={urlA} b={urlB}
         loader={loader} errorHandledCallback={this.errorHandled}/>);
     }
   };
diff --git a/src/components/diff-view.jsx b/src/components/diff-view.jsx
index 9e37cf6..f2c5e93 100644
--- a/src/components/diff-view.jsx
+++ b/src/components/diff-view.jsx
@@ -128,6 +128,7 @@ export default class DiffView extends React.Component {
         <InlineRenderedDiff diffData={this.state.diffData} page={this.props.page} />
       );
     case diffTypes.SIDE_BY_SIDE_RENDERED.value:
+    case diffTypes.PDF_SIDE_BY_SIDE_RENDERED.value:
       return (
         <SideBySideRenderedDiff diffData={this.state.diffData} page={this.props.page}
           loader={this.props.loader}/>
diff --git a/src/conf.json b/src/conf.json
index b2075b4..b6e9f13 100644
--- a/src/conf.json
+++ b/src/conf.json
@@ -1,5 +1,6 @@
 {
   "webMonitoringProcessingURL": "http://localhost:8888",
+  "pdfMonitoringProcessingURL": "http://localhost:8889",
   "limit": "1000",
   "snapshotsPrefix": "http://web.archive.org/web/",
   "urlPrefix": "/diff/",
diff --git a/src/js/constants/diff-types.js b/src/js/constants/diff-types.js
index 82e9a98..12ce86b 100644
--- a/src/js/constants/diff-types.js
+++ b/src/js/constants/diff-types.js
@@ -42,6 +42,10 @@ export const diffTypes = {
   CHANGES_ONLY_SOURCE: {
     description: 'Changes Only Source',
     diffService: 'html_source_dmp'
+  },
+  PDF_SIDE_BY_SIDE_RENDERED: {
+    description: 'Side-by-Side Rendered for PDF',
+    diffService: 'pdf_rendered'
   }
 };
 
@@ -69,6 +73,10 @@ const diffTypesByMediaType = {
     diffTypes.RAW_SIDE_BY_SIDE,
     diffTypes.RAW_FROM_CONTENT,
     diffTypes.RAW_TO_CONTENT
+  ],
+
+  'application/pdf': [
+    diffTypes.PDF_SIDE_BY_SIDE_RENDERED
   ]
 };