1

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

0 Answers0