ui: add debug toggler

frontend/app/components/Client/DebugLog.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { KEY, options } from 'App/dev/console'
+import { Switch } from 'UI';
+
+function getDefaults() {
+  const storedString = localStorage.getItem(KEY)
+  if (storedString) {
+    const storedOptions = JSON.parse(storedString)
+    return storedOptions.verbose
+  } else {
+    return false
+  }
+}
+
+function DebugLog() {
+  const [showLogs, setShowLogs] = React.useState(getDefaults)
+
+  const onChange = (checked: boolean) => {
+    setShowLogs(checked)
+    options.verbose = checked
+    localStorage.setItem(KEY, JSON.stringify(options))
+  }
+  return (
+    <div>
+      <h3 className={'text-lg'}>Player Debug Logs</h3>
+      <div className={'my-1'}>Show debug information in browser console.</div>
+      <div className={'mt-2'}>
+        <Switch checked={showLogs} onChange={onChange} />
+      </div>
+    </div>
+  )
+}
+
+export default DebugLog

frontend/app/components/Client/SessionsListingSettings.tsx

@@ -6,6 +6,7 @@ import DefaultPlaying from 'Shared/SessionSettings/components/DefaultPlaying';
 import DefaultTimezone from 'Shared/SessionSettings/components/DefaultTimezone';
 import ListingVisibility from 'Shared/SessionSettings/components/ListingVisibility';
 import MouseTrailSettings from 'Shared/SessionSettings/components/MouseTrailSettings';
+import DebugLog from "./DebugLog";
 
 function SessionsListingSettings() {
   return (
@@ -29,8 +30,9 @@ function SessionsListingSettings() {
         </div>
         <Divider />
 
-        <div>
+        <div className={'flex flex-col gap-2'}>
           <MouseTrailSettings />
+          <DebugLog />
         </div>
       </div>
     </div>

frontend/app/components/shared/SessionSettings/components/MouseTrailSettings.tsx

@@ -13,13 +13,13 @@ function MouseTrailSettings() {
   };
 
   return (
-    <>
+    <div>
       <h3 className='text-lg'>Mouse Trail</h3>
       <div className='my-1'>See mouse trail to easily spot user activity.</div>
       <div className='mt-2'>
         <Switch onChange={updateSettings} checked={mouseTrail} />
       </div>
-    </>
+    </div>
   );
 }
 

frontend/app/dev/console.js

@@ -1,4 +1,4 @@
-const KEY = "__OPENREPLAY_DEV_TOOLS__"
+export const KEY = "__OPENREPLAY_DEV_TOOLS__"
 
 export const options = {
 	logStuff(verbose=true) {