I have my code which is showing two things, External page and a few video. Everything works great but there this box on the bottom of the external page to accept cookies. I think I tried everything to get rid of it but everytime I go back to this page is coming back. What can i do to make it accept/decline on every start of page or go invisible?
And i can't just click every time accept/decline as this in one point will be frustraiting
I've tried blocking all cookies on chrome, get this cookies to iframe
My Code .html
<iframe *ngIf="page" class="html" [src]="urlSafe" allowfullscreen ></iframe>
<vg-player *ngIf="video" (onPlayerReady)="videoPlayerInit($event)">
<video #media [vgMedia]="$any(media)" [src]="currentVideo.src" id="singleVideo" preload="auto" [muted]="'muted'" crossorigin>
</video>
</vg-player>
<div [hidden]="!page" class="navbar">
<div class="wrapper">
<div class="item menu">
<div class="linee linee1"></div>
<div class="linee linee2"></div>
<div class="linee linee3"></div>
</div>
<div class="item gallery">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
<div class="dot dot6"></div>
</div>
<button class="item add">
<div class="circle">
<div class="close">
<div class="line line1"></div>
<div class="line line2"></div>
</div>
</div>
<input type="search" placeholder="Szukaj..." class="search" />
</button>
<div class="nav-items items1">
<i class="fas fa-home"></i>
</div>
<div class="nav-items items2">
<i class="fas fa-camera"></i>
</div>
<div class="nav-items items3">
<i class="fas fa-folder"></i>
</div>
<div class="nav-items items4">
<i class="fas fa-heart"></i>
</div>
<div class="box">
<div class="box-line box-line1"></div>
<div class="box-line box-line2"></div>
<div class="box-line box-line3"></div>
<div class="box-line box-line4"></div>
</div>
</div>
<div class="effect"></div>
</div>
app.Component.ts
import {Component, HostListener, OnInit} from '@angular/core';
import {environment} from "./environments/environment";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import {Subject} from "rxjs";
declare function circle(): void;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
userActivity: any;
inactiveTimeout = 30000;
userInactive: Subject<any> = new Subject();
url = environment.pageUrl;
public urlSafe?: SafeResourceUrl;
interval: any;
mode= 3;
modeCheck = 3;
page:boolean = true;
video: boolean = false;
videoItems = [
{
name: 'Video one',
src: '/assets/media/test1.mp4',
type: 'video/mp4'
},
{
name: 'Video two',
src: '/assets/media/test2.mp4',
type: 'video/mp4'
},
{
name: 'Video three',
src: '/assets/media/test3.mp4',
type: 'video/mp4'
}
];
activeIndex = 0;
fade = false;
currentVideo = this.videoItems[this.activeIndex];
data: any;
constructor(public sanitizer: DomSanitizer, ) {
this.setTimeout();
this.userInactive.subscribe(() => this.fadeOut());
}
ngOnInit(){
this.change();
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
circle();
this.interval = setInterval(() => {
this.check();
if(this.mode!=this.modeCheck){
this.change();
}
}, 5000);
}
check(){
//TODO: Pobierać moda
}
fadeOut(){
if(this.mode == 3 && !this.fade){
this.page=false;
this.video=true;
this.fade = true
}
}
fadeIn(){
if(this.mode == 3 && this.fade){
this.page=true;
this.video=false
this.fade = false
}
}
change() {
if (this.mode==0) {
this.page = false;
this.video = false;
} else if(this.mode == 1 || this.mode == 3){
this.page = true;
this.video = false;
} else if(this.mode == 2){
this.page = false;
this.video = true;
}
}
videoPlayerInit(data: any) {
this.data = data;
this.data.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));
this.data.getDefaultMedia().subscriptions.ended.subscribe(this.nextVideo.bind(this));
}
nextVideo() {
this.activeIndex++;
if (this.activeIndex === this.videoItems.length) {
this.activeIndex = 0;
}
this.currentVideo = this.videoItems[this.activeIndex];
}
initVdo() {
this.data.play();
}
setTimeout() {
this.userActivity = setTimeout(() => this.userInactive.next(undefined), this.inactiveTimeout);
}
@HostListener('window:mousemove') refreshUserState() {
this.fadeIn();
clearTimeout(this.userActivity);
this.setTimeout();
}
@HostListener('click') refreshUserState2() {
this.fadeIn();
clearTimeout(this.userActivity);
this.setTimeout();
}
}