Change ads directory name & add iframe-tracker directive

.gitignore

@@ -47,3 +47,5 @@ Thumbs.db
 
 /backend/database/
 /backend/node_modules/
+
+package-lock.json

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,

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>

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);
+  }
 }

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/logo_plateforms/Youtube.png" width="40px" height="40px" alt="image Youtube logo">
-    <img src="assets/ads/Youtube.png" width="40px" height="40px">
+    <img src="assets/pub/Youtube.png" width="40px" height="40px" alt="image Youtube">
     <span>fin</span>
 </div>

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();
+  });
+});

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);
+    }
+  }
+}