Dynamic usage

frontend/angular.json

@@ -41,7 +41,8 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "ngx-auto-unsubscribe-decorator",
-              "moment"
+              "moment",
+              "platform"
             ],
             "optimization": true,
             "webWorkerTsConfig": "tsconfig.worker.json"

frontend/src/app/models/dto/server-info.dto.ts

@@ -1,5 +1,13 @@
+import { TrackingState } from 'picsur-shared/dist/dto/tracking-state.enum';
+
 export class ServerInfo {
   production: boolean = false;
   demo: boolean = false;
   version: string = '0.0.0';
+  tracking: {
+    state: TrackingState;
+    id?: string;
+  } = {
+    state: TrackingState.Disabled,
+  };
 }

frontend/src/app/services/usage/usage.service.ts

@@ -2,7 +2,9 @@ import { Inject, Injectable } from '@angular/core';
 import { LOCATION, NAVIGATOR, WINDOW } from '@ng-web-apis/common';
 import { Logger } from '../logger/logger.service';
 import { InfoService } from '../api/info.service';
-import type { AckeeInstance } from 'ackee-tracker';
+import type { AckeeInstance, AckeeTrackingReturn } from 'ackee-tracker';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { TrackingState } from 'picsur-shared/dist/dto/tracking-state.enum';
 
 @Injectable({
   providedIn: 'root',
@@ -11,34 +13,60 @@ export class UsageService {
   private readonly logger = new Logger(UsageService.name);
 
   private doNotTrack = false;
-  private SITE_ID = 'c0fa67c0-fb82-42a7-af7e-ef3df28adeb4';
 
   private instance?: AckeeInstance;
+  private tracker?: AckeeTrackingReturn;
 
   constructor(
     @Inject(NAVIGATOR) private readonly navigator: Navigator,
     private readonly hostInfo: InfoService,
   ) {
-    //this.doNotTrack =
-    //  this.navigator.doNotTrack === '1' || this.navigator.doNotTrack === 'yes';
-    // TODO: uncomment
+    this.doNotTrack =
+      this.navigator.doNotTrack === '1' || this.navigator.doNotTrack === 'yes';
 
-    if (this.doNotTrack) this.logger.warn('Do not track is enabled');
+    this.subscribeInfo();
+  }
 
-    this.setup();
+  @AutoUnsubscribe()
+  private subscribeInfo() {
+    return this.hostInfo.live.subscribe((info) => {
+      if (
+        info.tracking.state === TrackingState.Disabled ||
+        info.tracking.id === undefined
+      ) {
+        this.stop();
+      } else {
+        this.setup(
+          info.tracking.state === TrackingState.Detailed &&
+            this.doNotTrack === false,
+          info.tracking.id,
+        );
+      }
+    });
   }
 
-  //dev: boolean, detailed: boolean, id: string
-  private async setup() {
-    if (this.doNotTrack) return;
+  private async setup(detailed: boolean, id: string) {
+    this.logger.verbose(
+      `Tracking enabled with detailed=${detailed} and id=${id}`,
+    );
 
-    const ackee = await import('ackee-tracker');
+    if (!this.instance) {
+      const ackee = await import('ackee-tracker');
+      this.instance = ackee.create('/api/usage/report', {
+        ignoreLocalhost: false,
+        ignoreOwnVisits: false,
+        detailed,
+      });
+    }
 
-    this.instance = ackee.create('/api/usage/report', {
-      ignoreLocalhost: false,
-      ignoreOwnVisits: false,
-      detailed: true,
-    });
-    this.instance.record(this.SITE_ID);
+    if (this.tracker) {
+      this.stop();
+    }
+    this.tracker = this.instance.record(id);
+  }
+
+  private async stop() {
+    this.tracker?.stop();
+    this.tracker = undefined;
   }
 }