Use ng2-pdf-viewer

And remove now-unused safeUrl pipe

src-ui/src/app/app.module.ts

@@ -14,7 +14,6 @@ import { LogsComponent } from './components/manage/logs/logs.component';
 import { SettingsComponent } from './components/manage/settings/settings.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DatePipe } from '@angular/common';
-import { SafePipe } from './pipes/safe.pipe';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component';
 import { DeleteDialogComponent } from './components/common/delete-dialog/delete-dialog.component';
@@ -45,6 +44,7 @@ import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-v
 import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component';
 import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component';
 import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 @NgModule({
   declarations: [
@@ -57,7 +57,6 @@ import { WidgetFrameComponent } from './components/dashboard/widgets/widget-fram
     DocumentTypeListComponent,
     LogsComponent,
     SettingsComponent,
-    SafePipe,
     NotFoundComponent,
     CorrespondentEditDialogComponent,
     DeleteDialogComponent,
@@ -92,7 +91,8 @@ import { WidgetFrameComponent } from './components/dashboard/widgets/widget-fram
     FormsModule,
     ReactiveFormsModule,
     NgxFileDropModule,
-    InfiniteScrollModule
+    InfiniteScrollModule,
+    PdfViewerModule
   ],
   providers: [
     DatePipe,

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -14,14 +14,14 @@
             </svg>
             <span class="d-none d-lg-inline"> Download</span>
         </a>
-    
+
         <div class="btn-group" ngbDropdown role="group" *ngIf="metadata?.paperless__has_archive_version">
           <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
           <div class="dropdown-menu" ngbDropdownMenu>
             <a ngbDropdownItem [href]="downloadOriginalUrl">Download original</a>
           </div>
         </div>
-    
+
       </div>
 
 
@@ -66,10 +66,8 @@
     </div>
 
     <div class="col-xl">
-        <object [data]="previewUrl | safe" type="application/pdf" width="100%" height="100%">
-            <p>Your browser does not support PDFs.
-                <a href="previewUrl">Download the PDF</a>.</p>
-        </object>
-
+      <div class="pdf-viewer-container">
+        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false"></pdf-viewer>
+      </div>
     </div>
 </div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -0,0 +1,8 @@
+.pdf-viewer-container {
+  height: calc(100vh - 160px);
+  top: 70px;
+  position: sticky;
+  padding: 10px;
+  background-color: gray;
+  overflow-y: scroll;
+}

src-ui/src/app/pipes/safe.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { SafePipe } from './safe.pipe';
-
-describe('SafePipe', () => {
-  it('create an instance', () => {
-    const pipe = new SafePipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src-ui/src/app/pipes/safe.pipe.ts

@@ -1,19 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-  name: 'safe'
-})
-export class SafePipe implements PipeTransform {
-
-  constructor(private sanitizer: DomSanitizer) { }
-
-  transform(url) {
-    if (url == null) {
-      return this.sanitizer.bypassSecurityTrustResourceUrl("")
-    } else {
-      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    }
-  }
-
-}