Implement action monitoring

public/index.html

@@ -36,6 +36,7 @@
   <script>
     window.aiana = {
       "container": '#root',
+      "loggerEndpoint": "http://qlf-mooc-accessibility.bordeaux.inria.fr/api/log",
       "bookmarks": [],
       "chapters": {
         "language": "fr",

src/actions/shared/remote-loader.ts

@@ -6,7 +6,7 @@ import { DEFAULT_CONFIGURATION_PATH, CONFIGURATION_KEY } from '../../constants';
 import { IWidget } from '../../reducers/preferences';
 import { initialPreferencesState } from '../../constants/default-preferences-state';
 import { CDispatch } from '../../store';
-import { ThunkResult } from '../../types';
+import { ThunkResult, IQueryString } from '../../types';
 import { IPreset } from '../../reducers/presets';
 import { BASE_PRESETS } from '../../constants/presets';
 import md5 from 'md5';
@@ -15,12 +15,6 @@ import { createAction } from 'redux-starter-kit';
 import i18n from '../../i18n';
 import { loadConfiguration } from './configuration';
 
-interface IQueryString {
-  config?: string;
-  mid?: string;
-  src?: string;
-}
-
 // TODO: split function
 // FIXME: language and defaults handling isn't robust enough.
 async function getConfigurationData() {

src/components/app/StoreWrapper.tsx

@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { configureStore } from 'redux-starter-kit';
+import { configureStore, getDefaultMiddleware } from 'redux-starter-kit';
 import rootReducer, { IAianaState } from '../../reducers';
 import ConnectedAiana from './ConnectedAiana';
 import i18n from '../../i18n';
@@ -10,10 +10,12 @@ import {
   getLocalPreferencesState
 } from '../../reducers/preferences';
 import { stateToYAML as playerToYAML } from '../../reducers/player';
+import analytics from '../../middleware/analytics';
 
 const store = configureStore({
   reducer: rootReducer,
-  preloadedState: loadState()
+  preloadedState: loadState(),
+  middleware: [...getDefaultMiddleware(), analytics]
 });
 
 store.subscribe(

src/middleware/analytics.ts

@@ -0,0 +1,42 @@
+import { Middleware } from 'redux';
+import { PayloadAction } from 'redux-starter-kit';
+import { loadConfiguration } from '../actions/shared/configuration';
+import { setSubtitlesText } from '../actions/subtitles';
+import { getUserId } from '../utils/user';
+import { IAianaState } from '../reducers';
+
+// TODO: what actions should be monitored?
+const loggedActions = [loadConfiguration.type, setSubtitlesText.type];
+
+const analytics: Middleware = (store) => (next) => (
+  action: PayloadAction<any>
+) => {
+  if (loggedActions.includes(action.type)) {
+    const state: IAianaState = store.getState();
+
+    const playerEvent = {
+      createdAt: Date.now(),
+      payload: action.payload,
+      mediaId: state.player.mediaId,
+      state,
+      type: action.type,
+      userId: getUserId()
+    };
+
+    const strData = JSON.stringify(playerEvent);
+
+    if (process.env.NODE_ENV !== 'production') {
+      console.log(strData);
+    } else {
+      const loggerEndpoint = (window as any).loggerEndpoint;
+
+      if (loggerEndpoint) {
+        navigator.sendBeacon(loggerEndpoint, strData);
+      }
+    }
+  }
+
+  return next(action);
+};
+
+export default analytics;

src/types.ts

@@ -42,3 +42,10 @@ export interface ICueBoundaries {
   from: number;
   to: number;
 }
+
+export interface IQueryString {
+  config?: string;
+  mid?: string;
+  src?: string;
+  uid?: string;
+}

src/utils/user.ts

@@ -0,0 +1,16 @@
+import queryString from 'query-string';
+import { IQueryString } from '../types';
+
+export function getUserId() {
+  const parsedQueryString: IQueryString = queryString.parse(
+    window.location.search
+  );
+
+  const { uid } = parsedQueryString;
+
+  if (uid) {
+    return uid;
+  }
+
+  return null;
+}