fix(tktrex): codec configuration for metadata logger ui

tracking-exposed · Sep 19, 2022 · 47a4483 · 47a4483
1 parent e4c1851
commit 47a4483
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 61 deletions.
diff --git a/platforms/tktrex/extension/src/app/app.ts b/platforms/tktrex/extension/src/app/app.ts
@@ -213,6 +213,9 @@ const handleSearch = _.debounce((element: Node): void => {
     payload: {
       html: contentHTML,
       href: window.location.href,
+      feedId,
+      feedCounter,
+      videoCounter,
     },
   });
 }, 300);
@@ -227,11 +230,16 @@ const handleSuggested = _.debounce((elem: Node): void => {
     return;
   }
 
+  feedCounter++;
+
   tkHub.dispatch({
     type: 'Suggested',
     payload: {
       html: parent.outerHTML,
       href: window.location.href,
+      feedCounter,
+      feedId,
+      videoCounter,
     },
   });
 }, 300);

diff --git a/platforms/tktrex/extension/src/app/index.ts b/platforms/tktrex/extension/src/app/index.ts
@@ -1,9 +1,11 @@
 import { boot } from '@shared/extension/app';
 import { tiktokDomainRegExp } from '@tktrex/parser/constant';
-import { registerTkHandlers } from './handlers';
-import { feedId, onLocationChange, tkHandlers, tkTrexActions } from './app';
-import tkHub from '../handlers/hub';
 import { getParser } from '@tktrex/parsers';
+import * as E from 'fp-ts/lib/Either';
+import tkHub from '../handlers/hub';
+import { ContributionEvent, NEW_VIDEO_EVENT } from '../models/HubEvent';
+import { feedId, onLocationChange, tkHandlers, tkTrexActions } from './app';
+import { registerTkHandlers } from './handlers';
 
 // Boot the app script. This is the first function called.
 void boot({
@@ -25,15 +27,39 @@ void boot({
   },
   onAuthenticated: tkTrexActions,
   ui: {
-    getParser: (db) => {
-      return getParser(
-        db,
-        { contribution: 'contributions', metadata: 'metadata' },
-        (html) => ({
-          ...html,
-          jsdom: window.document.body,
-        }),
-      );
+    metadataLogger: {
+      getParser: (db) => {
+        return getParser(
+          db,
+          { contribution: 'contributions', metadata: 'metadata' },
+          (contribution) => ({
+            ...contribution,
+            jsdom: new DOMParser().parseFromString(contribution.html.html, 'text/html'),
+          })
+        );
+      },
+      mapEvent: (e: any) => {
+        if (e.type === NEW_VIDEO_EVENT.value) {
+          const rect = (e.payload.rect as DOMRect).toJSON();
+          return {
+            ...e,
+            payload: {
+              ...e.payload,
+              clientTime: new Date(),
+              rect,
+            },
+          };
+        }
+        return e;
+      },
+      decode: (e: any) => {
+        // return E.right(null) for events that don't need parsing
+        if (['APIEvent', 'SyncResponse', 'WindowUnload'].includes(e.type)) {
+          return E.right(null);
+        }
+
+        return ContributionEvent.decode(e);
+      },
     },
   },
 });
diff --git a/platforms/tktrex/extension/src/models/HubEvent.ts b/platforms/tktrex/extension/src/models/HubEvent.ts
@@ -1,8 +1,6 @@
-import HubEvent, { HubEventBase } from '@shared/extension/models/HubEvent';
-
+import HubEvent from '@shared/extension/models/HubEvent';
+import * as t from 'io-ts';
 /* TODO 
-   TODO 
-   TODO 
 
  * when something like this is implemented, should be commented 
  * where are the other part of the code than call these interfaces and where 
@@ -12,55 +10,120 @@ import HubEvent, { HubEventBase } from '@shared/extension/models/HubEvent';
  * app/app.ts + this + src/handlers.ts (registerTKHandlers) + ??
  * */
 
-export interface NewVideoEvent extends HubEventBase {
-  type: 'NewVideo';
-  payload: {
-    feedCounter: number;
-    feedId: string;
-    href: string;
-    html: string;
-    rect: DOMRect;
-    videoCounter: number;
-  };
-}
+export const NEW_VIDEO_EVENT = t.literal('NewVideo');
+export type NEW_VIDEO_EVENT = t.TypeOf<typeof NEW_VIDEO_EVENT>;
+export const NewVideoEvent = t.type(
+  {
+    type: NEW_VIDEO_EVENT,
+    payload: t.type(
+      {
+        feedCounter: t.number,
+        feedId: t.string,
+        href: t.string,
+        html: t.string,
+        videoCounter: t.number,
+        rect: t.type(
+          {
+            height: t.number,
+            width: t.number,
+            x: t.number,
+            y: t.number,
+            bottom: t.union([t.number, t.undefined]),
+            left: t.union([t.number, t.undefined]),
+            right: t.union([t.number, t.undefined]),
+            top: t.union([t.number, t.undefined]),
+          },
+          'DOMRect',
+        ),
+      },
+      'NewVideoPayload',
+    ),
+  },
+  'NewVideoEvent',
+);
+export type NewVideoEvent = t.TypeOf<typeof NewVideoEvent>;
+
+export const NATIVE_VIDEO = t.literal('NativeVideo');
+export type NATIVE_VIDEO = t.TypeOf<typeof NATIVE_VIDEO>;
+export const NativeVideoEvent = t.type(
+  {
+    type: NATIVE_VIDEO,
+    payload: t.type({
+      feedCounter: t.number,
+      feedId: t.string,
+      href: t.string,
+      html: t.string,
+      videoCounter: t.number,
+    }),
+  },
+  'NativeVideoEvent',
+);
+export type NativeVideoEvent = t.TypeOf<typeof NativeVideoEvent>;
+
+export const PROFILE = t.literal('Profile');
+export type PROFILE = t.TypeOf<typeof PROFILE>;
+export const ProfileEvent = t.type(
+  {
+    type: PROFILE,
+    payload: t.type({
+      feedCounter: t.number,
+      feedId: t.string,
+      href: t.string,
+      html: t.string,
+      videoCounter: t.number,
+    }),
+  },
+  'ProfileEvent',
+);
+export type ProfileEvent = t.TypeOf<typeof ProfileEvent>;
+
+export const SEARCH = t.literal('Search');
+export type SEARCH = t.TypeOf<typeof SEARCH>;
+export const SearchEvent = t.type(
+  {
+    type: SEARCH,
+    payload: t.type({
+      feedCounter: t.number,
+      feedId: t.string,
+      href: t.string,
+      html: t.string,
+      videoCounter: t.number,
+    }),
+  },
+  'SearchEvent',
+);
+export type SearchEvent = t.TypeOf<typeof SearchEvent>;
+
+export const SUGGESTED = t.literal('Suggested');
+export type SUGGESTED = t.TypeOf<typeof SUGGESTED>;
+export const SuggestedEvent = t.type(
+  {
+    type: SUGGESTED,
+    payload: t.type({
+      href: t.string,
+      html: t.string,
+      feedId: t.string,
+      feedCounter: t.number,
+      videoCounter: t.number,
+    }),
+  },
+  'SuggestedEvent',
+);
+export type SuggestedEvent = t.TypeOf<typeof SuggestedEvent>;
 
-export interface NativeVideoEvent extends HubEventBase {
-  type: 'NativeVideo';
-  payload: {
-    feedCounter: number;
-    feedId: string;
-    href: string;
-    html: string;
-    videoCounter: number;
-  };
-}
+export const CONTRIBUTION_TYPE = t.union(
+  [NEW_VIDEO_EVENT, NATIVE_VIDEO, PROFILE, SEARCH, SUGGESTED],
+  'CONTRIBUTION_TYPE',
+);
 
-export interface ProfileEvent extends HubEventBase {
-  type: 'Profile';
-  payload: {
-    feedCounter: number;
-    feedId: string;
-    html: string;
-    href: string;
-    videoCounter: number;
-  };
-}
+export type CONTRIBUTION_TYPE = t.TypeOf<typeof CONTRIBUTION_TYPE>;
 
-export interface SearchEvent extends HubEventBase {
-  type: 'Search';
-  payload: {
-    html: string;
-    href: string;
-  };
-}
+export const ContributionEvent = t.union(
+  [NewVideoEvent, NativeVideoEvent, ProfileEvent, SearchEvent, SuggestedEvent],
+  'ContributionEvent',
+);
 
-export interface SuggestedEvent extends HubEventBase {
-  type: 'Suggested';
-  payload: {
-    html: string;
-    href: string;
-  };
-}
+export type ContributionEvent = t.TypeOf<typeof ContributionEvent>;
 
 export type TKHubEvent =
   | HubEvent