Refactor app state to be a state machine with access selectors

web/package.json

@@ -15,6 +15,7 @@
     "@ant-design/icons": "4.7.0",
     "@emoji-mart/data": "^1.0.1",
     "@storybook/react": "^6.4.22",
+    "@xstate/react": "^3.0.0",
     "antd": "^4.20.4",
     "autoprefixer": "^10.4.4",
     "chart.js": "3.7.0",
@@ -44,7 +45,8 @@
     "slate-react": "^0.79.0",
     "storybook-addon-designs": "^6.2.1",
     "ua-parser-js": "1.0.2",
-    "video.js": "^7.18.1"
+    "video.js": "^7.18.1",
+    "xstate": "^4.32.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",