dom sanitizer pipe, youtube video directive

Author: esteecodes

angular-primeng-app/src/app/components/post-details/post-details.component.html

@@ -30,7 +30,7 @@ <h1 class="title">{{ post.title }}</h1>
           </div>
         </div>
       </div>
-      <div class="content" [innerHTML]="sanitizeHtml(post.content.html)"></div>
+      <div class="content" [innerHTML]="post.content.html | sanitizerHtml" youtubeVideoEmbed></div>
     </article>
   }
   <app-footer></app-footer>

angular-primeng-app/src/app/components/post-details/post-details.component.scss

@@ -75,6 +75,11 @@
     .content {
       font-size: 1rem;
       line-height: 1.5rem;
+
+      iframe {
+        width: 100%;
+        height: calc(50vw * 0.5625);
+      }
     }
   }
 

angular-primeng-app/src/app/components/post-details/post-details.component.ts

@@ -3,7 +3,7 @@ import { BlogService } from "../../services/blog.service";
 import { AsyncPipe, DatePipe } from "@angular/common";
 import { Post, SeriesList } from "../../models/post";
 import { Observable, Subscription } from "rxjs";
-import { ActivatedRoute, RouterLink } from "@angular/router";
+import { RouterLink } from "@angular/router";
 import { BlogInfo, BlogLinks } from "../../models/blog-info";
 import { FormsModule } from "@angular/forms";
 import { SidenavComponent } from "../sidenav/sidenav.component";
@@ -15,17 +15,20 @@ import { TagModule } from "primeng/tag";
 import { ToolbarModule } from "primeng/toolbar";
 import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
+import { YoutubeVideoEmbedDirective } from "../../directives/youtube-video-embed.directive";
 
 @Component({
 	selector: "app-post-details",
 	standalone: true,
 	imports: [
 		DatePipe,
 		AsyncPipe,
+    SanitizerHtmlPipe,
 		RouterLink,
 		SidenavComponent,
 		FooterComponent,
+    YoutubeVideoEmbedDirective,
 		FormsModule,
 		TagModule,
 		ToolbarModule,
@@ -47,7 +50,6 @@ export class PostDetailsComponent implements OnInit, OnDestroy {
 	seriesList!: SeriesList[];
 	post$!: Observable<Post>;
 	themeService: ThemeService = inject(ThemeService);
-  private sanitizer: DomSanitizer = inject(DomSanitizer);
 	private blogService: BlogService = inject(BlogService);
   private querySubscription?: Subscription;
 
@@ -72,10 +74,6 @@ export class PostDetailsComponent implements OnInit, OnDestroy {
 			});
 	}
 
-	sanitizeHtml(html: string): SafeHtml {
-		return this.sanitizer.bypassSecurityTrustHtml(html);
-	}
-
 	onThemeChange(theme: string): void {
 		this.selectedTheme = theme;
 		this.themeService.setTheme(theme);

angular-primeng-app/src/app/directives/youtube-video-embed.directive.spec.ts

@@ -0,0 +1,8 @@
+import { YoutubeVideoDirective } from './youtube-video-embed.directive';
+
+describe('YoutubeVideoDirective', () => {
+  it('should create an instance', () => {
+    const directive = new YoutubeVideoDirective();
+    expect(directive).toBeTruthy();
+  });
+});

angular-primeng-app/src/app/directives/youtube-video-embed.directive.ts

@@ -0,0 +1,45 @@
+import { AfterViewInit, Directive, Renderer2, ElementRef } from "@angular/core";
+
+@Directive({
+	selector: "[youtubeVideoEmbed]",
+	standalone: true,
+})
+export class YoutubeVideoEmbedDirective implements AfterViewInit {
+	constructor(private el: ElementRef, private render2: Renderer2) {}
+
+	ngAfterViewInit(): void {
+		const embedWrappers: HTMLDivElement[] = Array.from(
+			this.el.nativeElement.querySelectorAll(".embed-wrapper")
+		);
+		embedWrappers.forEach((embedWrapper) => {
+			let anchorElement: HTMLAnchorElement | null =
+				embedWrapper.querySelector(".embed-card");
+			if (anchorElement) {
+				let youtubeURL: string = anchorElement.href;
+				let videoID: string = "";
+				if (youtubeURL) {
+					if (youtubeURL.includes("youtube.com/watch?v=")) {
+						videoID = youtubeURL.split("v=")[1];
+					} else if (youtubeURL.includes("youtu.be/")) {
+						videoID = youtubeURL.split("youtu.be/")[1];
+					}
+				}
+        embedWrapper.innerHTML = '';
+				this._buildIframe(embedWrapper, videoID);
+			}
+		});
+	}
+
+	private _buildIframe(block: HTMLDivElement, videoID: string): HTMLIFrameElement {
+		const iframe: HTMLIFrameElement = this.render2.createElement("iframe");
+		this.render2.setAttribute(
+			iframe,
+			"src",
+			`https://www.youtube.com/embed/${videoID}`
+		);
+		this.render2.setAttribute(iframe, "frameborder", "0");
+		this.render2.setAttribute(iframe, "allowfullscreen", "true");
+		this.render2.appendChild(block, iframe);
+		return iframe;
+	}
+}

angular-primeng-app/src/app/pipes/sanitizer-html.pipe.spec.ts

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

angular-primeng-app/src/app/pipes/sanitizer-html.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'sanitizerHtml',
+  standalone: true
+})
+export class SanitizerHtmlPipe implements PipeTransform {
+  constructor(private domSanitizer: DomSanitizer) {}
+
+  transform(value: string): SafeHtml {
+    return this.domSanitizer.bypassSecurityTrustHtml(value);
+  }
+}