From 45f905749051fda9c8015e190b0746a420f8b293 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Y=C3=BBki=20Vachot?= <yuki@vachot.fr>
Date: Thu, 28 Oct 2021 20:40:58 +0200
Subject: [PATCH] Change ads directory name & add iframe-tracker directive

---
 .gitignore                                    |   2 +
 src/app/app.module.ts                         |   2 +
 .../video-cell/video-cell.component.html      |   3 +-
 .../search/video-cell/video-cell.component.ts |  13 +---
 .../utils/components/pub/pub.component.html   |   4 +-
 .../iframe-tracker.directive.spec.ts          |   8 +++
 .../iframe-tracker.directive.ts               |  62 ++++++++++++++++++
 src/assets/{ads => pub}/Youtube.png           | Bin
 src/assets/{ads => pub}/nutella.png           | Bin
 9 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts
 create mode 100644 src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts
 rename src/assets/{ads => pub}/Youtube.png (100%)
 rename src/assets/{ads => pub}/nutella.png (100%)

diff --git a/.gitignore b/.gitignore
index 4e6d622..fcf25b5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,5 @@ Thumbs.db
 
 /backend/database/
 /backend/node_modules/
+
+package-lock.json
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 56dedfa..973dbd9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,6 +24,7 @@ import {MatDividerModule} from "@angular/material/divider";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
+import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe-tracker.directive';
 
 
 @NgModule({
@@ -38,6 +39,7 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
     VideoCellComponent,
     VideoGridComponent,
     PopupAddVideoToPlaylistsComponent,
+    IframeTrackerDirective,
   ],
     imports: [
         BrowserModule,
diff --git a/src/app/user/search/video-cell/video-cell.component.html b/src/app/user/search/video-cell/video-cell.component.html
index 299766c..74540ab 100644
--- a/src/app/user/search/video-cell/video-cell.component.html
+++ b/src/app/user/search/video-cell/video-cell.component.html
@@ -1,7 +1,6 @@
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
 <div class="conteneur">
-    <iframe [src]=safeUrl allowfullscreen></iframe>
+    <iframe appIframeTracker [src]=safeUrl allowfullscreen (iframeClick)="onIframeClick(this.video.url)"></iframe><br/>
     <span>{{video.title}}</span>
     <button mat-icon-button (click)="onAdd()">
         <mat-icon > add_circle </mat-icon>
diff --git a/src/app/user/search/video-cell/video-cell.component.ts b/src/app/user/search/video-cell/video-cell.component.ts
index 5fba3d2..c68d484 100644
--- a/src/app/user/search/video-cell/video-cell.component.ts
+++ b/src/app/user/search/video-cell/video-cell.component.ts
@@ -1,19 +1,12 @@
 import {
     Component,
-    ElementRef,
-    EventEmitter,
-    HostListener,
     Input,
     OnInit,
-    Output,
-    Renderer2,
-    ViewChild
 } from '@angular/core';
 import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service";
 import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service";
 import {Video} from "../../../utils/interfaces/video";
 
-
 @Component({
   selector: 'app-video-cell',
   templateUrl: './video-cell.component.html',
@@ -24,20 +17,20 @@ export class VideoCellComponent implements OnInit
     @Input() video: Video;
     safeUrl;
 
-
     constructor( private videoUrlService: VideoUrlService,
                  private addVideoToPlaylistsService: AddVideoToPlaylistsService ) {}
 
-
     ngOnInit(): void
     {
         this.safeUrl = this.videoUrlService.safeUrl(this.video.url);
     }
 
-
     onAdd(): void
     {
         this.addVideoToPlaylistsService.run(this.video);
     }
 
+  onIframeClick(videoUrl: string) {
+    console.log("test click iframe "+ videoUrl);
+  }
 }
diff --git a/src/app/utils/components/pub/pub.component.html b/src/app/utils/components/pub/pub.component.html
index 0bbd758..d70cde8 100644
--- a/src/app/utils/components/pub/pub.component.html
+++ b/src/app/utils/components/pub/pub.component.html
@@ -1,6 +1,6 @@
 <div class="conteneur">
     <span>debut</span>
-    <img src="assets/logo_plateforms/Youtube.png" width="40px" height="40px">
-    <img src="assets/ads/Youtube.png" width="40px" height="40px">
+    <img src="assets/logo_plateforms/Youtube.png" width="40px" height="40px" alt="image Youtube logo">
+    <img src="assets/pub/Youtube.png" width="40px" height="40px" alt="image Youtube">
     <span>fin</span>
 </div>
diff --git a/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts b/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts
new file mode 100644
index 0000000..da22920
--- /dev/null
+++ b/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts
@@ -0,0 +1,8 @@
+import { IframeTrackerDirective } from './iframe-tracker.directive';
+
+describe('IframeTrackerDirective', () => {
+  it('should create an instance', () => {
+    const directive = new IframeTrackerDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts b/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts
new file mode 100644
index 0000000..c4c5957
--- /dev/null
+++ b/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts
@@ -0,0 +1,62 @@
+import {
+  Directive,
+  ElementRef,
+  OnInit,
+  Renderer2,
+  Input,
+  Output,
+  EventEmitter,
+  HostListener
+} from '@angular/core';
+
+@Directive({
+  selector: '[appIframeTracker]'
+})
+export class IframeTrackerDirective implements OnInit {
+  private iframeMouseOver: boolean;
+
+  @Input() debug: boolean;
+
+  @Output() iframeClick = new EventEmitter<ElementRef>();
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    this.renderer.listen(window, 'blur', () => this.onWindowBlur());
+  }
+
+  @HostListener('mouseover')
+  private onIframeMouseOver() {
+    this.log('Iframe mouse over');
+    this.iframeMouseOver = true;
+    this.resetFocusOnWindow();
+  }
+
+  @HostListener('mouseout')
+  private onIframeMouseOut() {
+    this.log('Iframe mouse out');
+    this.iframeMouseOver = false;
+    this.resetFocusOnWindow();
+  }
+
+  private onWindowBlur() {
+    if (this.iframeMouseOver) {
+      this.log('WOW! Iframe click!!!');
+      this.resetFocusOnWindow();
+      this.iframeClick.emit(this.el);
+    }
+  }
+
+  private resetFocusOnWindow() {
+    setTimeout(() => {
+      this.log('reset focus to window');
+      window.focus();
+    }, 100);
+  }
+
+  private log(message: string) {
+    if (this.debug) {
+      console.log(message);
+    }
+  }
+}
diff --git a/src/assets/ads/Youtube.png b/src/assets/pub/Youtube.png
similarity index 100%
rename from src/assets/ads/Youtube.png
rename to src/assets/pub/Youtube.png
diff --git a/src/assets/ads/nutella.png b/src/assets/pub/nutella.png
similarity index 100%
rename from src/assets/ads/nutella.png
rename to src/assets/pub/nutella.png