Add PDF rendering via PDFObject (#24086)

Use [PDFObject](https://pdfobject.com/) to embed PDFs, replacing our
outdated PDF.js copy we vendor (the last non-webpack vendoring).

[Commit
1](https://github.com/go-gitea/gitea/pull/24086/commits/673e0263da64b72565ff59b990ab1b8e87271872)
is the PDFObject integration
[Commit
2](https://github.com/go-gitea/gitea/pull/24086/commits/9336f5769d54445bba0e16776164f6a2fe2c32ac)
is the removal of PDF.js

<img width="1251" alt="Screenshot 2023-05-27 at 09 57 52"
src="https://github.com/go-gitea/gitea/assets/115237/169ce50c-bd1d-4bb0-86e5-1710bd0400a9">
<img width="1257" alt="Screenshot 2023-05-27 at 10 12 50"
src="https://github.com/go-gitea/gitea/assets/115237/318f7ee9-fb11-4093-83e7-17475aa70629">


Fallback for unsupporting browsers (most mobile ones, except Firefox
Mobile):

<img width="358" alt="Screenshot 2023-05-27 at 09 43 34"
src="https://github.com/go-gitea/gitea/assets/115237/8c12d7ba-57d6-4228-89a0-5fef9fad0cbb">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

4 files changed, 50 insertions, 7 deletions

diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 0151f1e002..3f5e8bd267 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -29,7 +29,8 @@
 }
 
 .markup pre.is-loading,
-.editor-loading.is-loading {
+.editor-loading.is-loading,
+.pdf-content.is-loading {
   height: var(--height-loading);
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b7bb1b2967..be9a3ae585 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -412,26 +412,42 @@
   cursor: default;
 }
 
-.repository.file.list .non-diff-file-content .view-raw {
-  padding: 5px;
+.view-raw {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.repository.file.list .non-diff-file-content .view-raw > * {
+.view-raw > * {
   max-width: 100%;
-  border: 1px solid var(--color-secondary);
 }
 
-.repository.file.list .non-diff-file-content .view-raw img {
+.view-raw audio,
+.view-raw video,
+.view-raw img {
   margin: 1rem 0;
   border-radius: 0;
   object-fit: contain;
 }
 
-.repository.file.list .non-diff-file-content .view-raw img[src$=".svg" i] {
+.view-raw img[src$=".svg" i] {
   max-height: 600px !important;
   max-width: 600px !important;
 }
 
+.pdf-content {
+  width: 100%;
+  height: 600px;
+  border: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf-content:has(.pdf-fallback-button) {
+  height: 100px;
+}
+
 .repository.file.list .non-diff-file-content .plain-text {
   padding: 1em 2em;
 }
@@ -454,6 +470,11 @@
   padding: 5px !important;
 }
 
+.non-diff-file-content .attached.segment,
+.non-diff-file-content .pdfobject {
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
 .repository.file.list .sidebar {
   padding-left: 0;
 }
diff --git a/web_src/js/index.js b/web_src/js/index.js
index a837375b4e..8f4d379893 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -21,6 +21,7 @@ import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
 import {initStopwatch} from './features/stopwatch.js';
 import {initFindFileInRepo} from './features/repo-findfile.js';
 import {initCommentContent, initMarkupContent} from './markup/content.js';
+import {initPdfViewer} from './render/pdf.js';
 
 import {initUserAuthLinkAccountView, initUserAuthOauth2} from './features/user-auth.js';
 import {
@@ -177,4 +178,5 @@ onDomReady(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initRepoDiffView();
+  initPdfViewer();
 });
diff --git a/web_src/js/render/pdf.js b/web_src/js/render/pdf.js
new file mode 100644
index 0000000000..f31f161e6e
--- /dev/null
+++ b/web_src/js/render/pdf.js
@@ -0,0 +1,19 @@
+import {htmlEscape} from 'escape-goat';
+
+export async function initPdfViewer() {
+  const els = document.querySelectorAll('.pdf-content');
+  if (!els.length) return;
+
+  const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
+
+  for (const el of els) {
+    const src = el.getAttribute('data-src');
+    const fallbackText = el.getAttribute('data-fallback-button-text');
+    pdfobject.embed(src, el, {
+      fallbackLink: htmlEscape`
+        <a role="button" class="ui basic button pdf-fallback-button" href="[url]">${fallbackText}</a>
+      `,
+    });
+    el.classList.remove('is-loading');
+  }
+}