fix

Author: wxiaoguang

templates/shared/repo/fileviewrender.tmpl

@@ -2,5 +2,7 @@
 	data-raw-file-link="{{$.RawFileLink}}"
 	data-fallback-text="{{ctx.Locale.Tr "repo.file_view_raw"}}"
 	data-error-header="{{ctx.Locale.Tr "repo.file_render_failed"}}">
-	<a class="file-view-raw-prompt" href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
+	<div class="file-view-raw-prompt tw-p-4">
+		<a href="{{$.RawFileLink}}" rel="nofollow">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
+	</div>
 </div>

web_src/css/file-view.css

@@ -1,65 +1,3 @@
-/**
- * File View & Render Plugin Styles
- */
-
-/* file view container */
-.file-view-container {
-  position: relative;
-  width: 100%;
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* TODO: add more styles? */
+.file-view-render-container {
 }
-
-.view-raw-fallback {
-  padding: 16px;
-  text-align: center;
-}
-
-/* 3D model viewer */
-.model3d-content {
-  width: 100% !important;
-  min-height: 400px !important;
-  border: none !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* PDF viewer */
-.pdf-view-content {
-  width: 100%;
-  height: 600px;
-  border: none !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pdf-view-content .pdf-fallback-button {
-  margin: 50px auto;
-}
-
-.file-view-container .pdfobject {
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-.pdf-view-content.is-loading {
-  height: var(--height-loading);
-}
-
-/* error message */
-.file-view-container .ui.error.message {
-  margin: 1em 0;
-  width: 100%;
-}
-
-.file-view-container .ui.error.message pre {
-  margin-top: 0.5em;
-  font-size: 12px;
-  max-height: 150px;
-  overflow: auto;
-  background-color: rgba(255, 255, 255, 0.1);
-  padding: 0.5em;
-}

web_src/css/repo.css

@@ -183,12 +183,6 @@ td .commit-summary {
   cursor: default;
 }
 
-.view-raw {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .view-raw > * {
   max-width: 100%;
 }

web_src/js/features/file-view.ts

@@ -21,7 +21,7 @@ export function initFileViewRender(): void {
 
     let rendered = false, errorMsg = '';
     try {
-      rendered = await applyRenderPlugin(container);
+      rendered = await applyRenderPlugin(container, rawFileLink);
     } catch (e) {
       errorMsg = `${e}`;
     }
@@ -36,7 +36,7 @@ export function initFileViewRender(): void {
 
     if (errorMsg) {
       const elErrorMessage = createElementFromHTML(htmlEscape`<div class="ui error message">${errorMsg}</div>`);
-      container.insertBefore(elErrorMessage, elViewRawPrompt);
+      elViewRawPrompt.insertAdjacentElement('afterbegin', elErrorMessage);
     }
   });
 }

web_src/js/modules/file-render-plugin.ts

@@ -42,6 +42,7 @@ export async function applyRenderPlugin(container: HTMLElement, rawFileLink: str
     if (!plugin) return false;
 
     container.classList.add('is-loading');
+    container.setAttribute('data-render-name', plugin.name);
     await plugin.render(container, rawFileLink);
     return true;
   } finally {

web_src/js/render/plugins/3d-viewer.ts

@@ -19,31 +19,24 @@ export function register3DViewerPlugin(): void {
   const plugin: FileRenderPlugin = {
     name: '3d-model-viewer',
 
-    // check if file extension is supported 3D file
+    // check if file extension is a supported 3D file
     canHandle(filename: string, _mimeType: string): boolean {
       const ext = filename.substring(filename.lastIndexOf('.')).toLowerCase();
-      const canHandle = SUPPORTED_EXTENSIONS.includes(ext);
-      return canHandle;
+      return SUPPORTED_EXTENSIONS.includes(ext);
     },
 
     // render 3D model
     async render(container: HTMLElement, fileUrl: string): Promise<void> {
-      try {
-        const OV = await import(/* webpackChunkName: "online-3d-viewer" */'online-3d-viewer');
-        container.classList.add('model3d-content');
-        const viewer = new OV.EmbeddedViewer(container, {
-          backgroundColor: new OV.RGBAColor(59, 68, 76, 0),
-          defaultColor: new OV.RGBColor(65, 131, 196),
-          edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
-        });
-        viewer.LoadModelFromUrlList([fileUrl]);
-      } catch (error) {
-        console.error('error rendering 3D model:', error);
-        throw error;
-      }
+      const OV = await import(/* webpackChunkName: "online-3d-viewer" */'online-3d-viewer');
+      container.classList.add('model3d-content');
+      const viewer = new OV.EmbeddedViewer(container, {
+        backgroundColor: new OV.RGBAColor(59, 68, 76, 0),
+        defaultColor: new OV.RGBColor(65, 131, 196),
+        edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
+      });
+      viewer.LoadModelFromUrlList([fileUrl]);
     },
   };
 
-  // register plugin
   registerFileRenderPlugin(plugin);
 }

web_src/js/render/plugins/pdf-viewer.ts

@@ -8,16 +8,11 @@ export function registerPdfViewerPlugin(): void {
       return filename.toLowerCase().endsWith('.pdf');
     },
     async render(container: HTMLElement, fileUrl: string): Promise<void> {
-      try {
-        const PDFObject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
-        container.classList.add('pdf-view-content');
-        const fallbackText = container.getAttribute('data-fallback-text');
-        PDFObject.default.embed(fileUrl, container, {
-          fallbackLink: `<a role="button" class="ui basic button pdf-fallback-button" href="${fileUrl}" target="_blank">${fallbackText}</a>`,
-        });
-      } catch (error) {
-        console.error('error rendering PDF:', error);
-        throw error;
+      const PDFObject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
+      // TODO: the PDFObject library does not support dynamic height adjustment,
+      container.style.height = `${window.innerHeight - 100}px`;
+      if (!PDFObject.default.embed(fileUrl, container)) {
+        throw new Error('Unable to render the PDF file');
       }
     },
   };