Add PDF rendering via PDFObject

Author: silverwind

package-lock.json

@@ -37,6 +37,7 @@
     "minimatch": "9.0.0",
     "monaco-editor": "0.38.0",
     "monaco-editor-webpack-plugin": "7.0.1",
+    "pdfobject": "2.2.11",
     "pretty-ms": "8.0.0",
     "sortablejs": "1.15.0",
     "swagger-ui-dist": "4.18.3",

package.json

@@ -19,7 +19,7 @@
 					{{else if .IsPlainText}}
 						<pre>{{if .FileContent}}{{.FileContent | Safe}}{{end}}</pre>
 					{{else if not .IsTextFile}}
-						<div class="view-raw ui center">
+						<div class="view-raw ui center{{if .IsPDFFile}} gt-p-0{{end}}">
 							{{if .IsImageFile}}
 								<img src="{{$.RawFileLink}}">
 							{{else if .IsVideoFile}}
@@ -31,7 +31,7 @@
 									<strong>{{.locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 								</audio>
 							{{else if .IsPDFFile}}
-								<iframe width="100%" height="600px" src="{{AssetUrlPrefix}}/vendor/plugins/pdfjs/web/viewer.html?file={{$.RawFileLink}}"></iframe>
+								<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{.locale.Tr "diff.view_file"}}"></div>
 							{{else}}
 								<a href="{{$.RawFileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.locale.Tr "repo.file_view_raw"}}</a>
 							{{end}}

templates/repo/settings/lfs_file.tmpl

@@ -73,7 +73,7 @@
 			{{else if .IsPlainText}}
 				<pre>{{if .FileContent}}{{.FileContent | Safe}}{{end}}</pre>
 			{{else if not .IsTextSource}}
-				<div class="view-raw ui center">
+				<div class="view-raw ui center{{if .IsPDFFile}} gt-p-0{{end}}">
 					{{if .IsImageFile}}
 						<img src="{{$.RawFileLink}}">
 					{{else if .IsVideoFile}}
@@ -85,7 +85,7 @@
 							<strong>{{.locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 						</audio>
 					{{else if .IsPDFFile}}
-						<iframe width="100%" height="600px" src="{{AssetUrlPrefix}}/vendor/plugins/pdfjs/web/viewer.html?file={{$.RawFileLink}}"></iframe>
+						<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{.locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

templates/repo/view_file.tmpl

@@ -29,7 +29,8 @@
 }
 
 .markup pre.is-loading,
-.editor-loading.is-loading {
+.editor-loading.is-loading,
+.pdf-content.is-loading {
   height: var(--height-loading);
 }
 

web_src/css/modules/animations.css

@@ -413,6 +413,19 @@
   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;
 }

web_src/css/repo.css

@@ -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();
 });

web_src/js/index.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');
+  }
+}