diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 2fbba0905..81b83c233 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -3,6 +3,7 @@ repos: rev: v2.3.0 hooks: - id: check-yaml + args: ['--unsafe'] - id: end-of-file-fixer - id: trailing-whitespace - repo: https://github.com/psf/black diff --git a/README.md b/README.md index a5e64883c..905115c3b 100644 --- a/README.md +++ b/README.md @@ -226,6 +226,18 @@ To record browser events in Google Chrome (required by the `BrowserReplayStrateg 6. Set the `RECORD_BROWSER_EVENTS` flag to `true` in `openadapt/data/config.json`. +### Admin features +If you want to self host the app, you should run the following scripts + +**recording_uploader** +- Ensure that you have valid AWS credentials added in your environment +- Run the following command to create a stack on AWS that you can upload recordings to +```bash +python -m admin.recording_uploader.deploy +``` +- If the script runs successfully, you should see an API Gateway URL in the output +- Copy the URL and change the value of `RECORDING_UPLOAD_URL` in `openadapt/config.py` to the URL you copied + ## Features ### State-of-the-art GUI understanding via [Segment Anything in High Quality](https://github.com/SysCV/sam-hq): diff --git a/admin/recording_uploader/README.md b/admin/recording_uploader/README.md new file mode 100644 index 000000000..4871ef715 --- /dev/null +++ b/admin/recording_uploader/README.md @@ -0,0 +1,87 @@ +# recording-uploader + +This project contains source code and supporting files for a serverless application that you can deploy with the SAM CLI. It includes the following files and folders. + +- uploader - Code for the application's Lambda function. +- template.yaml - A template that defines the application's AWS resources. + +The application uses several AWS resources, including Lambda functions and an API Gateway API. These resources are defined in the `template.yaml` file in this project. You can update the template to add AWS resources through the same deployment process that updates your application code. + +If you prefer to use an integrated development environment (IDE) to build and test your application, you can use the AWS Toolkit. +The AWS Toolkit is an open source plug-in for popular IDEs that uses the SAM CLI to build and deploy serverless applications on AWS. The AWS Toolkit also adds a simplified step-through debugging experience for Lambda function code. See the following links to get started. + +* [CLion](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [GoLand](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [IntelliJ](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [WebStorm](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [Rider](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [PhpStorm](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [PyCharm](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [RubyMine](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [DataGrip](https://docs.aws.amazon.com/toolkit-for-jetbrains/latest/userguide/welcome.html) +* [VS Code](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/welcome.html) +* [Visual Studio](https://docs.aws.amazon.com/toolkit-for-visual-studio/latest/user-guide/welcome.html) + +## Deploy the application + +There is a `deploy` script that creates the s3 bucket and deploys the application using the SAM CLI (included as part of the dev dependencies of this project). The bucket name is hardcoded in the script. The SAM CLI is set up to run in `guided` mode, which will prompt the user every time before deploying, in case the user wants to change the default values. + + +You can find your API Gateway Endpoint URL in the output values displayed after deployment. + +## Use the SAM CLI to build and test locally + +Build your application with the `sam build --use-container` command. + +```bash +recording-uploader$ sam build --use-container +``` + +The SAM CLI installs dependencies defined in `uploader/requirements.txt`, creates a deployment package, and saves it in the `.aws-sam/build` folder. + +Run functions locally and invoke them with the `sam local invoke` command. + +```bash +recording-uploader$ sam local invoke RecordingUploadFunction +``` + +The SAM CLI can also emulate your application's API. Use the `sam local start-api` to run the API locally on port 3000. + +```bash +recording-uploader$ sam local start-api +recording-uploader$ curl http://localhost:3000/ +``` + +The SAM CLI reads the application template to determine the API's routes and the functions that they invoke. The `Events` property on each function's definition includes the route and method for each path. + +```yaml + Events: + RecordingUpload: + Type: Api + Properties: + Path: /upload + Method: get +``` + +## Add a resource to your application +The application template uses AWS Serverless Application Model (AWS SAM) to define application resources. AWS SAM is an extension of AWS CloudFormation with a simpler syntax for configuring common serverless application resources such as functions, triggers, and APIs. For resources not included in [the SAM specification](https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md), you can use standard [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-template-resource-type-ref.html) resource types. + +## Fetch, tail, and filter Lambda function logs + +To simplify troubleshooting, SAM CLI has a command called `sam logs`. `sam logs` lets you fetch logs generated by your deployed Lambda function from the command line. In addition to printing the logs on the terminal, this command has several nifty features to help you quickly find the bug. + +`NOTE`: This command works for all AWS Lambda functions; not just the ones you deploy using SAM. + +```bash +recording-uploader$ sam logs -n RecordingUploadFunction --stack-name "recording-uploader" --tail +``` + +You can find more information and examples about filtering Lambda function logs in the [SAM CLI Documentation](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-logging.html). + +## Cleanup + +To delete the sample application that you created, use the AWS CLI. Assuming you used your project name for the stack name, you can run the following: + +```bash +sam delete --stack-name "recording-uploader" +``` diff --git a/admin/recording_uploader/__init__.py b/admin/recording_uploader/__init__.py new file mode 100644 index 000000000..0498cd0a6 --- /dev/null +++ b/admin/recording_uploader/__init__.py @@ -0,0 +1 @@ +"""Init file for the recording_uploader package.""" diff --git a/admin/recording_uploader/deploy.py b/admin/recording_uploader/deploy.py new file mode 100644 index 000000000..2fc408285 --- /dev/null +++ b/admin/recording_uploader/deploy.py @@ -0,0 +1,77 @@ +"""Entrypoint to deploy the uploader to AWS Lambda.""" + +import os +import pathlib +import re +import subprocess + +from loguru import logger +import boto3 +import fire + +CURRENT_DIR = pathlib.Path(__file__).parent + + +def main(region_name: str = "us-east-1", destroy: bool = False) -> None: + """Deploy the uploader to AWS Lambda. + + Args: + region_name (str): The AWS region to deploy the Lambda function to. + destroy (bool): Whether to delete the Lambda function. + """ + # check if aws credentials are set + if os.getenv("AWS_ACCESS_KEY_ID") is None: + raise ValueError("AWS_ACCESS_KEY_ID is not set") + if os.getenv("AWS_SECRET_ACCESS_KEY") is None: + raise ValueError("AWS_SECRET_ACCESS_KEY is not set") + if destroy: + commands = ["sam", "delete", "--no-prompts"] + else: + s3 = boto3.client( + "s3", + region_name=region_name, + endpoint_url=f"https://s3.{region_name}.amazonaws.com", + ) + bucket = "openadapt" + + s3.create_bucket( + ACL="private", + Bucket=bucket, + ) + commands = ["sam", "deploy", "--no-fail-on-empty-changeset"] + try: + std_kwargs = {} + if not destroy: + std_kwargs["stderr"] = subprocess.PIPE + std_kwargs["stdout"] = subprocess.PIPE + ret = subprocess.run( + commands, cwd=CURRENT_DIR, check=True, shell=True, **std_kwargs + ) + if destroy: + logger.info("Lambda function deleted successfully.") + else: + stdout = ret.stdout.decode("utf-8") if ret.stdout else "" + # find the url, which is in the format + # https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/upload/ + url_match = re.search( + r"https://([^\.]+)\.execute-api\.([^\.]+)\.amazonaws\.com/Prod/upload/", + stdout, + ) + if url_match: + logger.info( + f"Lambda function deployed successfully. URL: {url_match.group(0)}," + " copy it to your config." + ) + else: + logger.error("Lambda function deployed, but failed to find the URL") + print(stdout) + except subprocess.CalledProcessError as e: + if destroy: + logger.error("Failed to delete Lambda function") + else: + logger.error("Failed to deploy Lambda function") + raise e + + +if __name__ == "__main__": + fire.Fire(main) diff --git a/admin/recording_uploader/samconfig.toml b/admin/recording_uploader/samconfig.toml new file mode 100644 index 000000000..1edc0b6d3 --- /dev/null +++ b/admin/recording_uploader/samconfig.toml @@ -0,0 +1,34 @@ +# More information about the configuration file can be found here: +# https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-config.html +version = 0.1 + +[default] +[default.global.parameters] +stack_name = "recording-uploader" + +[default.build.parameters] +cached = true +parallel = true + +[default.validate.parameters] +lint = true + +[default.deploy.parameters] +capabilities = "CAPABILITY_IAM" +confirm_changeset = false +resolve_s3 = true +s3_prefix = "recording-uploader" +region = "us-east-1" +image_repositories = [] + +[default.package.parameters] +resolve_s3 = true + +[default.sync.parameters] +watch = true + +[default.local_start_api.parameters] +warm_containers = "EAGER" + +[default.local_start_lambda.parameters] +warm_containers = "EAGER" diff --git a/admin/recording_uploader/template.yaml b/admin/recording_uploader/template.yaml new file mode 100644 index 000000000..1d7fcc1e3 --- /dev/null +++ b/admin/recording_uploader/template.yaml @@ -0,0 +1,50 @@ +AWSTemplateFormatVersion: '2010-09-09' +Transform: AWS::Serverless-2016-10-31 +Description: > + recording-uploader + + Sample SAM Template for recording-uploader + +# More info about Globals: https://github.com/awslabs/serverless-application-model/blob/master/docs/globals.rst +Globals: + Function: + Timeout: 3 + +Resources: + RecordingUploadFunction: + Type: AWS::Serverless::Function # More info about Function Resource: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction + Properties: + CodeUri: uploader/ + Handler: app.lambda_handler + Runtime: python3.10 + Architectures: + - x86_64 + Events: + RecordingUpload: + Type: Api # More info about API Event Source: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#api + Properties: + Path: /upload + Method: post + Policies: + - Statement: + - Sid: S3GetPutDeleteObjectPolicy + Effect: Allow + Action: + - s3:PutObject + - s3:GetObject + - s3:DeleteObject + Resource: !Sub "arn:aws:s3:::openadapt/*" + +Outputs: + # ServerlessRestApi is an implicit API created out of Events key under Serverless::Function + # Find out more about other implicit resources you can reference within SAM + # https://github.com/awslabs/serverless-application-model/blob/master/docs/internals/generated_resources.rst#api + RecordingUploadApi: + Description: "API Gateway endpoint URL for Prod stage for Recording Upload function" + Value: !Sub "https://${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com/Prod/upload/" + RecordingUploadFunction: + Description: "Recording Upload Lambda Function ARN" + Value: !GetAtt RecordingUploadFunction.Arn + RecordingUploadFunctionIamRole: + Description: "Implicit IAM Role created for Recording Upload function" + Value: !GetAtt RecordingUploadFunctionRole.Arn diff --git a/admin/recording_uploader/uploader/__init__.py b/admin/recording_uploader/uploader/__init__.py new file mode 100644 index 000000000..545508ded --- /dev/null +++ b/admin/recording_uploader/uploader/__init__.py @@ -0,0 +1 @@ +"""Init file for the uploader module.""" diff --git a/admin/recording_uploader/uploader/app.py b/admin/recording_uploader/uploader/app.py new file mode 100644 index 000000000..78fbbc806 --- /dev/null +++ b/admin/recording_uploader/uploader/app.py @@ -0,0 +1,104 @@ +"""Lambda function for generating a presigned URL for uploading a recording to S3.""" + +from typing import Any +import json + +from botocore.client import Config +import boto3 + +DEFAULT_REGION_NAME = "us-east-1" +DEFAULT_BUCKET = "openadapt" +ONE_HOUR_IN_SECONDS = 3600 + + +def lambda_handler(event: dict, context: Any) -> dict: + """Main entry point for the lambda function.""" + data = json.loads(event["body"]) + lambda_function = data["lambda_function"] + handler = handlers.get(lambda_function) + if not handler: + return { + "statusCode": 400, + "body": json.dumps( + {"error": f"Unknown lambda function: {lambda_function}"} + ), + } + return handler(data) + + +def get_presigned_url(data: dict) -> dict: + """Generate a presigned URL for uploading a recording to S3. + + Args: + data (dict): The data from the request. + + Returns: + dict: A dictionary containing the presigned URL. + """ + try: + key = data["key"] + client_method = data["client_method"] + except Exception as e: + print(e) + return { + "statusCode": 400, + "body": json.dumps( + {"error": "Missing 'key' or 'client_method' in request body."} + ), + } + s3 = boto3.client( + "s3", + config=Config(signature_version="s3v4"), + region_name=DEFAULT_REGION_NAME, + endpoint_url=f"https://s3.{DEFAULT_REGION_NAME}.amazonaws.com", + ) + + presigned_url = s3.generate_presigned_url( + ClientMethod=client_method, + Params={ + "Bucket": DEFAULT_BUCKET, + "Key": key, + }, + ExpiresIn=ONE_HOUR_IN_SECONDS, + ) + + return { + "statusCode": 200, + "body": json.dumps({"url": presigned_url}), + } + + +def delete_object(data: dict) -> dict: + """Delete an object from the s3 bucket. + + Args: + data (dict): The data from the request. + + Returns: + dict: A dictionary containing the deleted status + """ + try: + key = data["key"] + except Exception as e: + print(e) + return { + "statusCode": 400, + "body": json.dumps( + {"error": "Missing 'key' or 'client_method' in request body."} + ), + } + + s3 = boto3.client( + "s3", + config=Config(signature_version="s3v4"), + region_name=DEFAULT_REGION_NAME, + endpoint_url=f"https://s3.{DEFAULT_REGION_NAME}.amazonaws.com", + ) + s3.delete_object( + Bucket=DEFAULT_BUCKET, + Key=key, + ) + return {"statusCode": 200, "body": json.dumps({"message": "Deleted"})} + + +handlers = {"get_presigned_url": get_presigned_url, "delete_object": delete_object} diff --git a/admin/recording_uploader/uploader/requirements.txt b/admin/recording_uploader/uploader/requirements.txt new file mode 100644 index 000000000..1b7a5c13f --- /dev/null +++ b/admin/recording_uploader/uploader/requirements.txt @@ -0,0 +1 @@ +boto3==1.34.84 diff --git a/openadapt/alembic/versions/46d03b666cd4_add_upload_fields.py b/openadapt/alembic/versions/46d03b666cd4_add_upload_fields.py new file mode 100644 index 000000000..e793f4ebc --- /dev/null +++ b/openadapt/alembic/versions/46d03b666cd4_add_upload_fields.py @@ -0,0 +1,64 @@ +"""add_upload_fields + +Revision ID: 46d03b666cd4 +Revises: 98505a067995 +Create Date: 2024-11-10 23:14:21.187860 + +""" +from alembic import op +import sqlalchemy as sa + +import openadapt + +# revision identifiers, used by Alembic. +revision = "46d03b666cd4" +down_revision = "98505a067995" +branch_labels = None +depends_on = None + + +def upgrade() -> None: + # ### commands auto generated by Alembic - please adjust! ### + op.create_table( + "replay", + sa.Column("id", sa.Integer(), nullable=False), + sa.Column( + "timestamp", + openadapt.models.ForceFloat(precision=10, scale=2, asdecimal=False), + nullable=True, + ), + sa.Column("strategy_name", sa.String(), nullable=True), + sa.Column("strategy_args", sa.JSON(), nullable=True), + sa.Column("git_hash", sa.String(), nullable=True), + sa.PrimaryKeyConstraint("id", name=op.f("pk_replay")), + ) + with op.batch_alter_table("recording", schema=None) as batch_op: + batch_op.add_column( + sa.Column( + "upload_status", + sa.Enum("NOT_UPLOADED", "UPLOADING", "UPLOADED", name="uploadstatus"), + nullable=True, + ) + ) + batch_op.add_column(sa.Column("uploaded_key", sa.String(), nullable=True)) + batch_op.add_column( + sa.Column("uploaded_to_custom_bucket", sa.Boolean(), nullable=True) + ) + + # update all recordings to not uploaded + op.execute("UPDATE recording SET upload_status = 'NOT_UPLOADED' WHERE 1=1") + # update all recordings to not uploaded to custom bucket + op.execute("UPDATE recording SET uploaded_to_custom_bucket = FALSE WHERE 1=1") + + # ### end Alembic commands ### + + +def downgrade() -> None: + # ### commands auto generated by Alembic - please adjust! ### + with op.batch_alter_table("recording", schema=None) as batch_op: + batch_op.drop_column("uploaded_to_custom_bucket") + batch_op.drop_column("uploaded_key") + batch_op.drop_column("upload_status") + + op.drop_table("replay") + # ### end Alembic commands ### diff --git a/openadapt/app/dashboard/api.ts b/openadapt/app/dashboard/api.ts index dcc6502d6..ef535703e 100644 --- a/openadapt/app/dashboard/api.ts +++ b/openadapt/app/dashboard/api.ts @@ -1,3 +1,6 @@ -export async function get(url: string, options: Partial = {}): Promise { - return fetch(url, options).then((res) => res.json()); +export async function get( + url: string, + options: Partial = {} +): Promise { + return fetch(url, options).then((res) => res.json()) } diff --git a/openadapt/app/dashboard/api/recordings.py b/openadapt/app/dashboard/api/recordings.py index 074e99f95..349112339 100644 --- a/openadapt/app/dashboard/api/recordings.py +++ b/openadapt/app/dashboard/api/recordings.py @@ -3,14 +3,22 @@ import json from fastapi import APIRouter, WebSocket +from starlette.responses import HTMLResponse, RedirectResponse, Response +from openadapt.config import config from openadapt.custom_logger import logger from openadapt.db import crud from openadapt.deprecated.app import cards from openadapt.events import get_events from openadapt.models import Recording from openadapt.plotting import display_event -from openadapt.utils import image2utf8, row2dict +from openadapt.share import upload_recording_to_s3 +from openadapt.utils import ( + delete_uploaded_recording, + get_recording_url, + image2utf8, + row2dict, +) class RecordingsAPI: @@ -29,6 +37,17 @@ def attach_routes(self) -> APIRouter: self.app.add_api_route("/start", self.start_recording) self.app.add_api_route("/stop", self.stop_recording) self.app.add_api_route("/status", self.recording_status) + self.app.add_api_route( + "/cloud/{recording_id}/upload", self.upload_recording, methods=["POST"] + ) + self.app.add_api_route( + "/cloud/{recording_id}/view", self.view_recording_on_cloud, methods=["GET"] + ) + self.app.add_api_route( + "/cloud/{recording_id}/delete", + self.delete_recording_on_cloud, + methods=["POST"], + ) self.recording_detail_route() return self.app @@ -63,6 +82,37 @@ def recording_status() -> dict[str, bool]: """Get the recording status.""" return {"recording": cards.is_recording()} + def upload_recording(self, recording_id: int) -> dict[str, str]: + """Upload a recording.""" + with crud.get_new_session(read_and_write=True) as session: + crud.start_uploading_recording(session, recording_id) + upload_recording_to_s3(config.UNIQUE_USER_ID, recording_id) + return {"message": "Recording uploaded"} + + @staticmethod + def view_recording_on_cloud(recording_id: int) -> Response: + """View a recording from cloud.""" + session = crud.get_new_session(read_only=True) + recording = crud.get_recording_by_id(session, recording_id) + if recording.upload_status == Recording.UploadStatus.NOT_UPLOADED: + return HTMLResponse(status_code=404) + url = get_recording_url( + recording.uploaded_key, recording.uploaded_to_custom_bucket + ) + return RedirectResponse(url) + + @staticmethod + def delete_recording_on_cloud(recording_id: int) -> dict[str, bool]: + """Delete a recording from cloud.""" + session = crud.get_new_session(read_only=True) + recording = crud.get_recording_by_id(session, recording_id) + if recording.upload_status == Recording.UploadStatus.NOT_UPLOADED: + return {"success": True} + delete_uploaded_recording( + recording_id, recording.uploaded_key, recording.uploaded_to_custom_bucket + ) + return {"success": True} + def recording_detail_route(self) -> None: """Add the recording detail route as a websocket.""" diff --git a/openadapt/app/dashboard/api/settings.py b/openadapt/app/dashboard/api/settings.py index 716203102..ebf9e3b2f 100644 --- a/openadapt/app/dashboard/api/settings.py +++ b/openadapt/app/dashboard/api/settings.py @@ -21,7 +21,12 @@ def attach_routes(self) -> APIRouter: return self.app Category = Literal[ - "api_keys", "scrubbing", "record_and_replay", "general", "onboarding" + "api_keys", + "scrubbing", + "record_and_replay", + "general", + "onboarding", + "recording_upload", ] @staticmethod diff --git a/openadapt/app/dashboard/app/layout.tsx b/openadapt/app/dashboard/app/layout.tsx index 3cd56c206..0dd9a01a6 100644 --- a/openadapt/app/dashboard/app/layout.tsx +++ b/openadapt/app/dashboard/app/layout.tsx @@ -1,9 +1,10 @@ import './globals.css' import { ColorSchemeScript, MantineProvider } from '@mantine/core' -import { Notifications } from '@mantine/notifications'; +import { Notifications } from '@mantine/notifications' import { Shell } from '@/components/Shell' -import { CSPostHogProvider } from './providers'; +import { CSPostHogProvider } from './providers' +import { ModalsProvider } from '@mantine/modals' export const metadata = { title: 'OpenAdapt.AI', @@ -23,9 +24,9 @@ export default function RootLayout({ - - {children} - + + {children} + diff --git a/openadapt/app/dashboard/app/onboarding/page.tsx b/openadapt/app/dashboard/app/onboarding/page.tsx index d4a3ecdde..fe49955ff 100644 --- a/openadapt/app/dashboard/app/onboarding/page.tsx +++ b/openadapt/app/dashboard/app/onboarding/page.tsx @@ -1,7 +1,7 @@ -import { BookACall } from "@/components/Onboarding/steps/BookACall"; -import { RegisterForUpdates } from "@/components/Onboarding/steps/RegisterForUpdates"; -import { Tutorial } from "@/components/Onboarding/steps/Tutorial"; -import { Box, Divider } from "@mantine/core"; +import { BookACall } from '@/components/Onboarding/steps/BookACall' +import { RegisterForUpdates } from '@/components/Onboarding/steps/RegisterForUpdates' +import { Tutorial } from '@/components/Onboarding/steps/Tutorial' +import { Box, Divider } from '@mantine/core' export default function Onboarding() { return ( @@ -12,5 +12,5 @@ export default function Onboarding() { - ); + ) } diff --git a/openadapt/app/dashboard/app/providers.tsx b/openadapt/app/dashboard/app/providers.tsx index d607f2634..4d42be3ec 100644 --- a/openadapt/app/dashboard/app/providers.tsx +++ b/openadapt/app/dashboard/app/providers.tsx @@ -3,32 +3,26 @@ import { get } from '@/api' import posthog from 'posthog-js' import { PostHogProvider } from 'posthog-js/react' import { useEffect } from 'react' +import { getSettings } from './utils' if (typeof window !== 'undefined') { - if (process.env.NEXT_PUBLIC_MODE !== "development") { - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PUBLIC_KEY as string, { - api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, - }) - } -} - -async function getSettings(): Promise> { - return get('/api/settings?category=general', { - cache: 'no-store', - }) + if (process.env.NEXT_PUBLIC_MODE !== 'development') { + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PUBLIC_KEY as string, { + api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, + }) + } } - export function CSPostHogProvider({ children }: { children: React.ReactNode }) { - useEffect(() => { - if (process.env.NEXT_PUBLIC_MODE !== "development") { - getSettings().then((settings) => { - posthog.identify(settings['UNIQUE_USER_ID']) - }) + useEffect(() => { + if (process.env.NEXT_PUBLIC_MODE !== 'development') { + getSettings().then((settings) => { + posthog.identify(settings['UNIQUE_USER_ID']) + }) + } + }, []) + if (process.env.NEXT_PUBLIC_MODE === 'development') { + return <>{children} } - }, []) - if (process.env.NEXT_PUBLIC_MODE === "development") { - return <>{children}; - } - return {children} + return {children} } diff --git a/openadapt/app/dashboard/app/recordings/RawRecordings.tsx b/openadapt/app/dashboard/app/recordings/RawRecordings.tsx index 17b6c413b..13cfcad75 100644 --- a/openadapt/app/dashboard/app/recordings/RawRecordings.tsx +++ b/openadapt/app/dashboard/app/recordings/RawRecordings.tsx @@ -1,40 +1,166 @@ -import { SimpleTable } from '@/components/SimpleTable'; -import { Recording } from '@/types/recording'; +import { SimpleTable } from '@/components/SimpleTable' +import { Recording, UploadStatus } from '@/types/recording' import React, { useEffect, useState } from 'react' -import { timeStampToDateString } from '../utils'; -import { useRouter } from 'next/navigation'; +import { timeStampToDateString } from '../utils' +import { useRouter } from 'next/navigation' +import { Anchor, Button, Group, Text, Tooltip } from '@mantine/core' +import { IconInfoCircle } from '@tabler/icons-react' +import { modals } from '@mantine/modals' +import { getRecordingUploadSettings } from '../settings/utils' export const RawRecordings = () => { - const [recordings, setRecordings] = useState([]); - const router = useRouter(); + const [recordings, setRecordings] = useState([]) + const router = useRouter() + const [settings, setSettings] = useState< + Awaited> + >({ + OVERWRITE_RECORDING_DESTINATION: false, + RECORDING_PUBLIC_KEY: '', + RECORDING_PRIVATE_KEY: '', + RECORDING_BUCKET_NAME: '', + RECORDING_BUCKET_REGION: '', + RECORDING_DELETION_ENABLED: false, + }) + useEffect(() => { + getRecordingUploadSettings().then(setSettings) + }, []) function fetchRecordings() { - fetch('/api/recordings').then(res => { + fetch('/api/recordings').then((res) => { if (res.ok) { res.json().then((data) => { - setRecordings(data.recordings); - }); + setRecordings(data.recordings) + }) } }) } useEffect(() => { - fetchRecordings(); - }, []); + fetchRecordings() + }, []) function onClickRow(recording: Recording) { - return () => router.push(`/recordings/detail/?id=${recording.id}`); + return () => router.push(`/recordings/detail/?id=${recording.id}`) + } + function goToSettings() { + router.push('/settings/recording_upload') + } + + function uploadRecording( + e: React.MouseEvent, + recording_id: number + ) { + e.stopPropagation() + fetch(`/api/recordings/cloud/${recording_id}/upload`, { + method: 'POST', + }).then((res) => { + if (res.ok) { + fetchRecordings() + } + }) + } + function deleteUploadedRecording( + e: React.MouseEvent, + recording_id: number + ) { + e.stopPropagation(); + modals.openConfirmModal({ + title: 'Confirm deletion', + children: ( + + Are you sure you want to delete the recording from cloud? + + ), + labels: { confirm: 'Delete', cancel: 'Cancel' }, + confirmProps: { + color: 'red' + }, + onConfirm: () => { + fetch(`/api/recordings/cloud/${recording_id}/delete`, { + method: 'POST', + }).then((res) => { + if (res.ok) { + fetchRecordings() + } + }) + } + }) } return ( recording.video_start_time ? timeStampToDateString(recording.video_start_time) : 'N/A'}, - {name: 'Timestamp', accessor: (recording: Recording) => recording.timestamp ? timeStampToDateString(recording.timestamp) : 'N/A'}, - {name: 'Monitor Width/Height', accessor: (recording: Recording) => `${recording.monitor_width}/${recording.monitor_height}`}, - {name: 'Double Click Interval Seconds/Pixels', accessor: (recording: Recording) => `${recording.double_click_interval_seconds}/${recording.double_click_distance_pixels}`}, + { name: 'ID', accessor: 'id' }, + { name: 'Description', accessor: 'task_description' }, + { + name: 'Start time', + accessor: (recording: Recording) => + recording.video_start_time + ? timeStampToDateString(recording.video_start_time) + : 'N/A', + }, + { + name: 'Timestamp', + accessor: (recording: Recording) => + recording.timestamp + ? timeStampToDateString(recording.timestamp) + : 'N/A', + }, + { + name: 'Monitor Width/Height', + accessor: (recording: Recording) => + `${recording.monitor_width}/${recording.monitor_height}`, + }, + { + name: 'Double Click Interval Seconds/Pixels', + accessor: (recording: Recording) => + `${recording.double_click_interval_seconds}/${recording.double_click_distance_pixels}`, + }, + { + name: ( + + Upload to cloud + + + + + + + ), + accessor: (recording: Recording) => + recording.upload_status === UploadStatus.UPLOADED ? ( + + e.stopPropagation()} + href={`/api/recordings/cloud/${recording.id}/view`} + target="_blank" + > + View + + {settings.RECORDING_DELETION_ENABLED && ( + deleteUploadedRecording(e, recording.id)} + target="_blank" + c="red" + > + Delete + + )} + + ) : UploadStatus.UPLOADING === + recording.upload_status ? ( + 'Uploading...' + ) : ( + + ), + }, ]} data={recordings} refreshData={fetchRecordings} diff --git a/openadapt/app/dashboard/app/recordings/ScrubbedRecordings.tsx b/openadapt/app/dashboard/app/recordings/ScrubbedRecordings.tsx index 7558420dc..2654ea75d 100644 --- a/openadapt/app/dashboard/app/recordings/ScrubbedRecordings.tsx +++ b/openadapt/app/dashboard/app/recordings/ScrubbedRecordings.tsx @@ -1,37 +1,50 @@ -import { SimpleTable } from '@/components/SimpleTable'; -import { Recording, ScrubbedRecording } from '@/types/recording'; -import { useRouter } from 'next/navigation'; +import { SimpleTable } from '@/components/SimpleTable' +import { Recording, ScrubbedRecording } from '@/types/recording' +import { useRouter } from 'next/navigation' import React, { useEffect, useState } from 'react' export const ScrubbedRecordings = () => { - const [recordings, setRecordings] = useState([]); - const router = useRouter(); + const [recordings, setRecordings] = useState([]) + const router = useRouter() function fetchScrubbedRecordings() { - fetch('/api/recordings/scrubbed').then(res => { + fetch('/api/recordings/scrubbed').then((res) => { if (res.ok) { res.json().then((data) => { - setRecordings(data.recordings); - }); + setRecordings(data.recordings) + }) } }) } function onClickRow(recording: ScrubbedRecording) { - return () => router.push(`/recordings/detail/?id=${recording.recording_id}`); + return () => + router.push(`/recordings/detail/?id=${recording.recording_id}`) } useEffect(() => { - fetchScrubbedRecordings(); - }, []); + fetchScrubbedRecordings() + }, []) return ( recording.recording_id}, - {name: 'Description', accessor: (recording: ScrubbedRecording) => recording.recording.task_description}, - {name: 'Provider', accessor: 'provider'}, - {name: 'Original Recording', accessor: (recording: ScrubbedRecording) => recording.original_recording.task_description}, + { + name: 'ID', + accessor: (recording: ScrubbedRecording) => + recording.recording_id, + }, + { + name: 'Description', + accessor: (recording: ScrubbedRecording) => + recording.recording.task_description, + }, + { name: 'Provider', accessor: 'provider' }, + { + name: 'Original Recording', + accessor: (recording: ScrubbedRecording) => + recording.original_recording.task_description, + }, ]} data={recordings} refreshData={fetchScrubbedRecordings} diff --git a/openadapt/app/dashboard/app/recordings/detail/page.tsx b/openadapt/app/dashboard/app/recordings/detail/page.tsx index ca4e23eda..329a282b0 100644 --- a/openadapt/app/dashboard/app/recordings/detail/page.tsx +++ b/openadapt/app/dashboard/app/recordings/detail/page.tsx @@ -1,95 +1,145 @@ -'use client'; +'use client' -import { ActionEvents } from "@/components/ActionEvent/ActionEvents"; -import { RecordingDetails } from "@/components/RecordingDetails"; -import { ActionEvent as ActionEventType } from "@/types/action-event"; -import { Recording as RecordingType } from "@/types/recording"; -import { Box, Loader, Progress } from "@mantine/core"; -import { useSearchParams } from "next/navigation"; -import { Suspense, useEffect, useState } from "react"; +import { ActionEvents } from '@/components/ActionEvent/ActionEvents' +import { RecordingDetails } from '@/components/RecordingDetails' +import { ActionEvent as ActionEventType } from '@/types/action-event' +import { Recording as RecordingType } from '@/types/recording' +import { Box, Button, Grid, Loader, Progress } from '@mantine/core' +import { notifications } from '@mantine/notifications' +import { useSearchParams } from 'next/navigation' +import { Suspense, useEffect, useState } from 'react' function Recording() { - const searchParams = useSearchParams(); - const id = searchParams.get("id"); + const searchParams = useSearchParams() + const id = searchParams.get('id') const [recordingInfo, setRecordingInfo] = useState<{ - recording: RecordingType, - action_events: ActionEventType[], - num_events: number, - }>(); + recording: RecordingType + action_events: ActionEventType[] + num_events: number + }>() useEffect(() => { if (!id) { - return; + return } - const websocket = new WebSocket(`ws://${window.location.host}/api/recordings/${id}`); + const websocket = new WebSocket( + `ws://${window.location.host}/api/recordings/${id}` + ) websocket.onmessage = (event) => { - const data = JSON.parse(event.data); - if (data.type === "recording") { - setRecordingInfo(prev => { + const data = JSON.parse(event.data) + if (data.type === 'recording') { + setRecordingInfo((prev) => { if (!prev) { return { - "recording": data.value, - "action_events": [], - "num_events": 0, + recording: data.value, + action_events: [], + num_events: 0, } } - return prev; - }); - } else if (data.type === "action_event") { - setRecordingInfo(prev => { - if (!prev) return prev; + return prev + }) + } else if (data.type === 'action_event') { + setRecordingInfo((prev) => { + if (!prev) return prev return { ...prev, - "action_events": [...prev.action_events, modifyActionEvent(data.value, prev.recording.original_recording_id === null)], + action_events: [ + ...prev.action_events, + modifyActionEvent( + data.value, + prev.recording.original_recording_id === null + ), + ], } - }); - } else if (data.type === "num_events") { - setRecordingInfo(prev => { - if (!prev) return prev; + }) + } else if (data.type === 'num_events') { + setRecordingInfo((prev) => { + if (!prev) return prev return { ...prev, - "num_events": data.value, + num_events: data.value, } - }); + }) } } return () => { - websocket.close(); + websocket.close() } - }, [id]); + }, [id]) + function uploadRecording() { + fetch(`/api/recordings/${id}/upload`, { + method: 'POST', + }).then((resp) => { + if (resp.status === 200) { + notifications.show({ + title: 'Recording uploaded', + message: 'Recording has been uploaded successfully', + color: 'teal', + }) + } else { + notifications.show({ + title: 'Error', + message: 'Failed to upload recording', + color: 'red', + }) + } + }) + } if (!recordingInfo) { - return ; + return } - const actionEvents = recordingInfo.action_events; + const actionEvents = recordingInfo.action_events return ( - - {actionEvents.length && actionEvents.length < recordingInfo.num_events && ( - - - Loading events {actionEvents.length}/{recordingInfo.num_events} - - - )} + + + + + + + + + {actionEvents.length && + actionEvents.length < recordingInfo.num_events && ( + + + + Loading events {actionEvents.length}/ + {recordingInfo.num_events} + + + + )} ) } -function modifyActionEvent(actionEvent: ActionEventType, isOriginal: boolean): ActionEventType { - let children = actionEvent.children; +function modifyActionEvent( + actionEvent: ActionEventType, + isOriginal: boolean +): ActionEventType { + let children = actionEvent.children if (actionEvent.children) { - children = actionEvent.children.map(child => modifyActionEvent(child, isOriginal)); + children = actionEvent.children.map((child) => + modifyActionEvent(child, isOriginal) + ) } - let id = actionEvent.id; - let isComputed = false; + let id = actionEvent.id + let isComputed = false if (!id) { // this is usually the case, when new events like 'singleclick' // or 'doubleclick' are created while merging several events together, // but they are not saved in the database - id = crypto.randomUUID(); - isComputed = true; + id = crypto.randomUUID() + isComputed = true } return { ...actionEvent, @@ -100,7 +150,6 @@ function modifyActionEvent(actionEvent: ActionEventType, isOriginal: boolean): A } } - export default function RecordingPage() { return ( diff --git a/openadapt/app/dashboard/app/recordings/page.tsx b/openadapt/app/dashboard/app/recordings/page.tsx index 901444f76..08e14b3bc 100644 --- a/openadapt/app/dashboard/app/recordings/page.tsx +++ b/openadapt/app/dashboard/app/recordings/page.tsx @@ -1,53 +1,54 @@ -'use client'; - -import { Box, Button, Tabs } from "@mantine/core"; -import { useEffect, useState } from "react"; -import { RecordingStatus } from "@/types/recording"; -import { ScrubbedRecordings } from "./ScrubbedRecordings"; -import { RawRecordings } from "./RawRecordings"; +'use client' +import { Box, Button, Tabs } from '@mantine/core' +import { useEffect, useState } from 'react' +import { RecordingStatus } from '@/types/recording' +import { ScrubbedRecordings } from './ScrubbedRecordings' +import { RawRecordings } from './RawRecordings' export default function Recordings() { - const [recordingStatus, setRecordingStatus] = useState(RecordingStatus.UNKNOWN); + const [recordingStatus, setRecordingStatus] = useState( + RecordingStatus.UNKNOWN + ) function startRecording() { if (recordingStatus === RecordingStatus.RECORDING) { - return; + return } - fetch('/api/recordings/start').then(res => { + fetch('/api/recordings/start').then((res) => { if (res.ok) { - setRecordingStatus(RecordingStatus.RECORDING); + setRecordingStatus(RecordingStatus.RECORDING) } - }); + }) } function stopRecording() { if (recordingStatus === RecordingStatus.STOPPED) { - return; + return } - setRecordingStatus(RecordingStatus.UNKNOWN); - fetch('/api/recordings/stop').then(res => { + setRecordingStatus(RecordingStatus.UNKNOWN) + fetch('/api/recordings/stop').then((res) => { if (res.ok) { - setRecordingStatus(RecordingStatus.STOPPED); + setRecordingStatus(RecordingStatus.STOPPED) } - }); + }) } function fetchRecordingStatus() { - fetch('/api/recordings/status').then(res => { + fetch('/api/recordings/status').then((res) => { if (res.ok) { res.json().then((data) => { if (data.recording) { - setRecordingStatus(RecordingStatus.RECORDING); + setRecordingStatus(RecordingStatus.RECORDING) } else { - setRecordingStatus(RecordingStatus.STOPPED); + setRecordingStatus(RecordingStatus.STOPPED) } - }); + }) } - }); + }) } useEffect(() => { - fetchRecordingStatus(); - }, []); + fetchRecordingStatus() + }, []) return ( {recordingStatus === RecordingStatus.RECORDING && ( @@ -67,12 +68,8 @@ export default function Recordings() { )} - - Recordings - - - Scrubbed recordings - + Recordings + Scrubbed recordings diff --git a/openadapt/app/dashboard/app/routes.ts b/openadapt/app/dashboard/app/routes.ts index b0ef5f0d0..adaf0e422 100644 --- a/openadapt/app/dashboard/app/routes.ts +++ b/openadapt/app/dashboard/app/routes.ts @@ -19,5 +19,5 @@ export const routes: Route[] = [ { name: 'Onboarding', path: '/onboarding', - } + }, ] diff --git a/openadapt/app/dashboard/app/scrubbing/ScrubbingUpdates.tsx b/openadapt/app/dashboard/app/scrubbing/ScrubbingUpdates.tsx index 094ecc1a1..720e9b208 100644 --- a/openadapt/app/dashboard/app/scrubbing/ScrubbingUpdates.tsx +++ b/openadapt/app/dashboard/app/scrubbing/ScrubbingUpdates.tsx @@ -1,56 +1,96 @@ -import { ScrubbingUpdate } from '@/types/scrubbing'; -import { Box, Button, Container, Progress, Stack, Text } from '@mantine/core'; +import { ScrubbingUpdate } from '@/types/scrubbing' +import { Box, Button, Container, Progress, Stack, Text } from '@mantine/core' import React from 'react' type Props = { - data?: ScrubbingUpdate; - resetScrubbingStatus: () => void; + data?: ScrubbingUpdate + resetScrubbingStatus: () => void } export const ScrubbingUpdates = ({ data, resetScrubbingStatus }: Props) => { - if (!data) { - return null; - } - const isScrubbingComplete = ( - data.total_action_events > 0 && - data.total_window_events > 0 && - data.total_screenshots > 0 && - data.num_action_events_scrubbed === data.total_action_events && - data.num_window_events_scrubbed === data.total_window_events && - data.num_screenshots_scrubbed === data.total_screenshots - ) || data.error; - return ( - - - Scrubbing updates for recording {data.recording.task_description} - Provider: {data.provider} - {data.copying_recording ? ( - Copying recording (this may take a while if Spacy dependencies need to be downloaded on the first run)... - ) : data.error ? ( - {data.error} - ) : ( - - - - {data.num_action_events_scrubbed} / {data.total_action_events} action events scrubbed - - - - {data.num_window_events_scrubbed} / {data.total_window_events} window events scrubbed - - - - {data.num_screenshots_scrubbed} / {data.total_screenshots} screenshots scrubbed - - - )} - {isScrubbingComplete && ( - - Scrubbing complete! - - - )} - - - ) + if (!data) { + return null + } + const isScrubbingComplete = + (data.total_action_events > 0 && + data.total_window_events > 0 && + data.total_screenshots > 0 && + data.num_action_events_scrubbed === data.total_action_events && + data.num_window_events_scrubbed === data.total_window_events && + data.num_screenshots_scrubbed === data.total_screenshots) || + data.error + return ( + + + + Scrubbing updates for recording{' '} + {data.recording.task_description} + + Provider: {data.provider} + {data.copying_recording ? ( + + Copying recording (this may take a while if Spacy + dependencies need to be downloaded on the first run)... + + ) : data.error ? ( + {data.error} + ) : ( + + + + + {data.num_action_events_scrubbed} /{' '} + {data.total_action_events} action events + scrubbed + + + + + + {data.num_window_events_scrubbed} /{' '} + {data.total_window_events} window events + scrubbed + + + + + + {data.num_screenshots_scrubbed} /{' '} + {data.total_screenshots} screenshots scrubbed + + + + )} + {isScrubbingComplete && ( + + Scrubbing complete! + + + )} + + + ) } diff --git a/openadapt/app/dashboard/app/scrubbing/page.tsx b/openadapt/app/dashboard/app/scrubbing/page.tsx index aa33bc1f0..ae230558a 100644 --- a/openadapt/app/dashboard/app/scrubbing/page.tsx +++ b/openadapt/app/dashboard/app/scrubbing/page.tsx @@ -1,20 +1,23 @@ -'use client'; - -import { Recording } from "@/types/recording"; -import { ScrubbingStatus, ScrubbingUpdate } from "@/types/scrubbing"; -import { Box, Button, Container, Grid, Select, Text } from "@mantine/core"; -import { isNotEmpty, useForm } from "@mantine/form"; -import { notifications } from "@mantine/notifications"; -import { useEffect, useState } from "react"; -import { ScrubbingUpdates } from "./ScrubbingUpdates"; -import Link from "next/link"; +'use client' +import { Recording } from '@/types/recording' +import { ScrubbingStatus, ScrubbingUpdate } from '@/types/scrubbing' +import { Box, Button, Container, Grid, Select, Text } from '@mantine/core' +import { isNotEmpty, useForm } from '@mantine/form' +import { notifications } from '@mantine/notifications' +import { useEffect, useState } from 'react' +import { ScrubbingUpdates } from './ScrubbingUpdates' +import Link from 'next/link' export default function Recordings() { const [recordings, setRecordings] = useState([]) - const [scrubbingProviders, setScrubbingProviders] = useState>({}); - const [scrubbingStatus, setScrubbingStatus] = useState(ScrubbingStatus.UNKNOWN); - const [scrubbingUpdate, setScrubbingUpdate] = useState(); + const [scrubbingProviders, setScrubbingProviders] = useState< + Record + >({}) + const [scrubbingStatus, setScrubbingStatus] = useState( + ScrubbingStatus.UNKNOWN + ) + const [scrubbingUpdate, setScrubbingUpdate] = useState() const scrubbingForm = useForm({ initialValues: { recordingId: '', @@ -23,82 +26,87 @@ export default function Recordings() { validate: { recordingId: isNotEmpty('Recording is required'), providerId: isNotEmpty('Provider is required'), - } - }); + }, + }) function fetchRecordings() { - fetch('/api/recordings').then(res => { + fetch('/api/recordings').then((res) => { if (res.ok) { res.json().then((data) => { - setRecordings(data.recordings); - }); + setRecordings(data.recordings) + }) } }) } function fetchScrubbingProviders() { - fetch('/api/scrubbing/providers').then(res => { + fetch('/api/scrubbing/providers').then((res) => { if (res.ok) { res.json().then((data) => { - setScrubbingProviders(data); - }); + setScrubbingProviders(data) + }) } - }); + }) } function fetchScrubbingStatus() { - fetch('/api/scrubbing/status').then(res => { + fetch('/api/scrubbing/status').then((res) => { if (res.ok) { res.json().then((data) => { if (data.status) { - setScrubbingStatus(ScrubbingStatus.SCRUBBING); - fetchScrubbingUpdates(); + setScrubbingStatus(ScrubbingStatus.SCRUBBING) + fetchScrubbingUpdates() } else { - setScrubbingStatus(ScrubbingStatus.STOPPED); + setScrubbingStatus(ScrubbingStatus.STOPPED) } - }); + }) } - }); + }) } - function scrubRecording(values: { recordingId: string, providerId: string}) { - setScrubbingStatus(ScrubbingStatus.UNKNOWN); - const { recordingId, providerId } = values; + function scrubRecording(values: { + recordingId: string + providerId: string + }) { + setScrubbingStatus(ScrubbingStatus.UNKNOWN) + const { recordingId, providerId } = values fetch(`/api/scrubbing/scrub/${recordingId}/${providerId}`, { method: 'POST', - }).then(res => res.json()).then((data) => { - if (data.status === "success") { - setScrubbingStatus(ScrubbingStatus.SCRUBBING); - } else { - notifications.show({ - title: 'Error while scrubbing recording', - message: data.message, - color: 'red', - }); - } - fetchScrubbingStatus(); - }); + }) + .then((res) => res.json()) + .then((data) => { + if (data.status === 'success') { + setScrubbingStatus(ScrubbingStatus.SCRUBBING) + } else { + notifications.show({ + title: 'Error while scrubbing recording', + message: data.message, + color: 'red', + }) + } + fetchScrubbingStatus() + }) } async function fetchScrubbingUpdates() { - fetch('/api/scrubbing/updates').then(res => { - const reader = res.body?.getReader(); - const textDecoder = new TextDecoder('utf-8'); - setScrubbingStatus(ScrubbingStatus.SCRUBBING); + fetch('/api/scrubbing/updates').then((res) => { + const reader = res.body?.getReader() + const textDecoder = new TextDecoder('utf-8') + setScrubbingStatus(ScrubbingStatus.SCRUBBING) reader?.read().then(function processText({ done, value }) { if (done) { - return; + return } - const data = JSON.parse(textDecoder.decode(value)); - setScrubbingUpdate(data); - reader?.read().then(processText); - }); - }); + const data = JSON.parse(textDecoder.decode(value)) + setScrubbingUpdate(data) + reader?.read().then(processText) + }) + }) } useEffect(() => { - fetchRecordings(); - fetchScrubbingProviders(); - fetchScrubbingStatus(); - }, []); + fetchRecordings() + fetchScrubbingProviders() + fetchScrubbingStatus() + }, []) function resetScrubbingStatus() { - fetchScrubbingStatus(); + fetchScrubbingStatus() } return ( @@ -106,7 +114,10 @@ export default function Recordings() { {scrubbingStatus === ScrubbingStatus.UNKNOWN ? ( Checking scrubbing status... ) : scrubbingStatus === ScrubbingStatus.SCRUBBING ? ( - + ) : (
@@ -123,22 +134,29 @@ export default function Recordings() {