support preview 3d file

Author: kerwin612

modules/typesniffer/typesniffer.go

@@ -9,6 +9,7 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"path/filepath"
 	"regexp"
 	"slices"
 	"strings"
@@ -26,6 +27,14 @@ const (
 	MimeTypeApplicationOctetStream = "application/octet-stream"
 )
 
+// list of supported CAD 3D file extensions
+var supportedCAD3DFileExtensions = []string{
+	".3dm", ".3ds", ".3mf", ".amf", ".bim", ".brep", 
+	".dae", ".fbx", ".fcstd", ".glb", ".gltf", 
+	".ifc", ".igs", ".iges", ".stp", ".step", 
+	".stl", ".obj", ".off", ".ply", ".wrl",
+}
+
 var (
 	svgComment       = regexp.MustCompile(`(?s)<!--.*?-->`)
 	svgTagRegex      = regexp.MustCompile(`(?si)\A\s*(?:(<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg\b`)
@@ -35,6 +44,7 @@ var (
 // SniffedType contains information about a blobs type.
 type SniffedType struct {
 	contentType string
+	fileName    string
 }
 
 // IsText etects if content format is plain text.
@@ -67,6 +77,20 @@ func (ct SniffedType) IsAudio() bool {
 	return strings.Contains(ct.contentType, "audio/")
 }
 
+// Is3DFile detects if data is a 3D model file format
+func (ct SniffedType) Is3DFile() bool {
+	if ct.fileName == "" {
+		return false
+	}
+	ext := strings.ToLower(filepath.Ext(ct.fileName))
+	for _, supportedExt := range supportedCAD3DFileExtensions {
+		if ext == supportedExt {
+			return true
+		}
+	}
+	return false
+}
+
 // IsRepresentableAsText returns true if file content can be represented as
 // plain text or is empty.
 func (ct SniffedType) IsRepresentableAsText() bool {
@@ -75,7 +99,7 @@ func (ct SniffedType) IsRepresentableAsText() bool {
 
 // IsBrowsableBinaryType returns whether a non-text type can be displayed in a browser
 func (ct SniffedType) IsBrowsableBinaryType() bool {
-	return ct.IsImage() || ct.IsSvgImage() || ct.IsPDF() || ct.IsVideo() || ct.IsAudio()
+	return ct.IsImage() || ct.IsSvgImage() || ct.IsPDF() || ct.IsVideo() || ct.IsAudio() || ct.Is3DFile()
 }
 
 // GetMimeType returns the mime type
@@ -105,8 +129,13 @@ func detectFileTypeBox(data []byte) (brands []string, found bool) {
 
 // DetectContentType extends http.DetectContentType with more content types. Defaults to text/unknown if input is empty.
 func DetectContentType(data []byte) SniffedType {
+	return DetectContentTypeWithFilename(data, "")
+}
+
+// DetectContentTypeWithFilename extends http.DetectContentType with more content types and uses filename for additional detection. Defaults to text/unknown if input is empty.
+func DetectContentTypeWithFilename(data []byte, fileName string) SniffedType {
 	if len(data) == 0 {
-		return SniffedType{"text/unknown"}
+		return SniffedType{"text/unknown", fileName}
 	}
 
 	ct := http.DetectContentType(data)
@@ -153,17 +182,22 @@ func DetectContentType(data []byte) SniffedType {
 			ct = "audio/ogg" // for most cases, it is used as an audio container
 		}
 	}
-	return SniffedType{ct}
+	return SniffedType{ct, fileName}
 }
 
 // DetectContentTypeFromReader guesses the content type contained in the reader.
 func DetectContentTypeFromReader(r io.Reader) (SniffedType, error) {
+	return DetectContentTypeFromReaderWithFilename(r, "")
+}
+
+// DetectContentTypeFromReaderWithFilename guesses the content type contained in the reader with given filename.
+func DetectContentTypeFromReaderWithFilename(r io.Reader, fileName string) (SniffedType, error) {
 	buf := make([]byte, sniffLen)
 	n, err := util.ReadAtMost(r, buf)
 	if err != nil {
 		return SniffedType{}, fmt.Errorf("DetectContentTypeFromReader io error: %w", err)
 	}
 	buf = buf[:n]
 
-	return DetectContentType(buf), nil
+	return DetectContentTypeWithFilename(buf, fileName), nil
 }

package-lock.json

@@ -39,6 +39,7 @@
     "minimatch": "10.0.2",
     "monaco-editor": "0.52.2",
     "monaco-editor-webpack-plugin": "7.1.0",
+    "online-3d-viewer": "0.16.0",
     "pdfobject": "2.3.1",
     "perfect-debounce": "1.0.0",
     "postcss": "8.5.5",

package.json

@@ -76,7 +76,7 @@ func getFileReader(ctx gocontext.Context, repoID int64, blob *git.Blob) ([]byte,
 	n, _ := util.ReadAtMost(dataRc, buf)
 	buf = buf[:n]
 
-	st := typesniffer.DetectContentType(buf)
+	st := typesniffer.DetectContentTypeWithFilename(buf, blob.Name())
 	isTextFile := st.IsText()
 
 	// FIXME: what happens when README file is an image?
@@ -110,7 +110,7 @@ func getFileReader(ctx gocontext.Context, repoID int64, blob *git.Blob) ([]byte,
 	}
 	buf = buf[:n]
 
-	st = typesniffer.DetectContentType(buf)
+	st = typesniffer.DetectContentTypeWithFilename(buf, blob.Name())
 
 	return buf, dataRc, &fileInfo{st.IsText(), true, meta.Size, &meta.Pointer, st}, nil
 }

routers/web/repo/view.go

@@ -239,6 +239,8 @@ func prepareToRenderFile(ctx *context.Context, entry *git.TreeEntry) {
 
 	case fInfo.st.IsPDF():
 		ctx.Data["IsPDFFile"] = true
+	case fInfo.st.Is3DFile():
+		ctx.Data["Is3DFile"] = true
 	case fInfo.st.IsVideo():
 		ctx.Data["IsVideoFile"] = true
 	case fInfo.st.IsAudio():

routers/web/repo/view_file.go

@@ -109,6 +109,8 @@
 						</audio>
 					{{else if .IsPDFFile}}
 						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
+					{{else if .Is3DFile}}
+						<div class="model3d-content is-loading" data-global-init="init3DViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

templates/repo/view_file.tmpl

@@ -2251,3 +2251,32 @@ tbody.commit-list {
 .branch-selector-dropdown .scrolling.menu .loading-indicator {
   height: 4em;
 }
+
+/* 3D model viewer styles */
+.model3d-content {
+  width: 100%;
+  height: 600px;
+  border: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.model3d-content.is-loading {
+  position: relative;
+}
+
+.model3d-content.is-loading:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  border: 5px solid var(--color-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}

web_src/css/repo.css

@@ -20,6 +20,7 @@ import {initStopwatch} from './features/stopwatch.ts';
 import {initFindFileInRepo} from './features/repo-findfile.ts';
 import {initMarkupContent} from './markup/content.ts';
 import {initPdfViewer} from './render/pdf.ts';
+import {init3DViewer} from './render/3d-viewer.ts';
 import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
 import {initRepoPullRequestAllowMaintainerEdit, initRepoPullRequestReview, initRepoIssueSidebarDependency, initRepoIssueFilterItemLabel} from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
@@ -160,6 +161,7 @@ onDomReady(() => {
     initUserSettings,
     initRepoDiffView,
     initPdfViewer,
+    init3DViewer,
     initColorPickers,
 
     initOAuth2SettingsDisableCheckbox,

web_src/js/index.ts

@@ -0,0 +1,43 @@
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
+export async function init3DViewer() {
+  registerGlobalInitFunc('init3DViewer', async (el: HTMLElement) => {
+    try {
+      // dynamically import online-3d-viewer library
+      const OV = await import(/* webpackChunkName: "online-3d-viewer" */'online-3d-viewer');
+      
+      const src = el.getAttribute('data-src');
+      if (!src) {
+        throw new Error('No source provided for 3D viewer');
+      }
+      
+      // set 3D viewer container styles
+      el.style.height = '400px';
+      el.style.width = '100%';
+      
+      // initialize 3D viewer
+      const viewer = new OV.EmbeddedViewer(el, {
+        backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // transparent
+        defaultColor: new OV.RGBColor(65, 131, 196),
+        edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
+      });
+      
+      // load model
+      viewer.LoadModelFromUrlList([src]);
+      
+    } catch (error) {
+      console.error('Error initializing 3D viewer:', error);
+      // show error message and fallback button
+      const fallbackText = el.getAttribute('data-fallback-button-text') || '';
+      const src = el.getAttribute('data-src') || '#';
+      el.innerHTML = `
+        <div class="ui error message">
+          <a class="ui basic button" href="${src}" target="_blank">${fallbackText}</a>
+        </div>
+      `;
+    } finally {
+      // remove loading state
+      el.classList.remove('is-loading');
+    }
+  });
+}