Update embed dialog

src/app/dialogs/embed-object-dialog/embed-object-dialog.component.html

@@ -15,9 +15,24 @@ <h3 class="dialog-title">{{ 'Embed this object' | translate }}</h3>
   />
 
   <div class="end-dialog-buttons">
-    <button mat-flat-button color="primary" (click)="copy()">
+    <button mat-flat-button color="primary" (click)="copyEmbed()">
       <mat-icon class="material-symbols-filled">content_copy</mat-icon>
       <span>{{ 'Copy' | translate }}</span>
     </button>
   </div>
+
+  <app-outlined-input
+    class="embed-text-box"
+    type="textarea"
+    name="embedUrl"
+    [ngModel]="elementUrl()"
+    [disabled]="true"
+  />
+
+  <div class="end-dialog-buttons">
+    <button mat-flat-button color="primary" (click)="copyUrl()">
+      <mat-icon class="material-symbols-filled">content_copy</mat-icon>
+      <span>{{ 'Copy model link' | translate }}</span>
+    </button>
+  </div>
 </div>

src/app/dialogs/embed-object-dialog/embed-object-dialog.component.scss

@@ -7,6 +7,10 @@
   width: 100%;
   justify-content: space-between;
   align-items: center;
+
+  h3 {
+    font-weight: bold;
+  }
 }
 
 .end-dialog-buttons {
@@ -19,5 +23,5 @@
 }
 
 app-outlined-input {
-  padding-top: 0;
+  padding-top: 15px;
 }

src/app/dialogs/embed-object-dialog/embed-object-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, Inject, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -31,9 +31,7 @@ export class EmbedObjectDialogComponent {
 
   elementUrlText = computed(() => {
     let embedHTML: string;
-    const iframe = document.querySelector('.iframe-container > iframe') as
-      | HTMLIFrameElement
-      | undefined;
+    const iframe = this.iFrameElement();
 
     if (!iframe) return this.#snackbar.showMessage('Could not find viewer');
 
@@ -64,8 +62,21 @@ export class EmbedObjectDialogComponent {
     return embedHTML;
   });
 
-  public copy() {
+  elementUrl = computed(() => {
+    return this.iFrameElement()?.src;
+  });
+
+  iFrameElement = computed(() => {
+    return document.querySelector('.iframe-container > iframe') as HTMLIFrameElement | undefined;
+  });
+
+  public copyEmbed() {
     const embedText = this.elementUrlText() as string;
     this.#detailPageHelper.copyEmbed(embedText);
   }
+
+  public copyUrl() {
+    const urlText = this.elementUrl() as string;
+    this.#detailPageHelper.copyUrl(urlText);
+  }
 }

src/app/services/detail-page-helper.service.ts

@@ -43,6 +43,16 @@ export class DetailPageHelperService {
     }
   }
 
+  public copyUrl(url: string) {
+    try {
+      this.copyToClipboard(url);
+      this.snackbar.showMessage('Model link copied to clipboard.', 3);
+    } catch (e) {
+      console.error(e);
+      this.snackbar.showMessage('Could not access your clipboard.', 3);
+    }
+  }
+
   public copyEmbed(embed: string) {
     try {
       this.copyToClipboard(embed);