aria-wait on initalLoader

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, production]
+  pull_request:
+    branches: [main, production]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -22,3 +22,6 @@ functions/
 
 # Sentry Config Fileg
 .sentryclirc
+
+# playwright / argos
+screenshots/

README.md

@@ -26,15 +26,15 @@ Mixpoint solves a common problem that many "desktop" DJ's face - there are only
 
 1. DJ apps (VirtualDJ, etc) - these all replicate the 2 turntable scenario, which is great for mixing 2 tracks together in real time. This is appropriate for live performances, but not ideal if you want to take the time to perfect mixes and create a longer, flawless set.
 
-2. DAW apps (Audacity, Cubase, etc) - these assume you're making music, with lots of sampling and effects, optimized for audio production. They supports laying out multiple tracks (which is what is missing in DJ apps) but doesn't provide the basic context that DJ's need, such as BPM detection, beatmatching, and simple crossfading between tracks. Of course these things can be done with these tools, but it's not easy and certainly not what they are designed for.
+2. DAW apps (Audacity, Cubase, etc) - these assume you're making music, with lots of sampling and effects, optimized for audio production. They support laying out multiple tracks (which is what is missing in DJ apps) but don't provide the basic context that DJ's need, such as BPM detection, beatmatching, and simple crossfading between tracks. Of course these things can be done with these tools, but it's not easy and certainly not what they are designed for.
 
-The goal of this app is to provide a focused user experience that delivers on the need to lay out a series of tracks, easily tweak the transition from one track to the next (a mix), and save the output as a finished set. Using machine learning, the software will recommend mixes based on mixes other people have created, and optionally mix tracks together for you.
+The goal of this app is to provide a focused user experience that delivers on the need to lay out a series of tracks, easily tweak the transition from one track to the next (a mix), and save the output as a finished set. Using ai, the software will recommend mixes based on mixes other people have created, and eventually mix tracks together for you.
 
 Huge thanks to the MUI team for creating such a [kickass UI](https://mui.com/joy-ui/getting-started/overview/) freely available.
 
-The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation, . Also thanks to John Heiner for the fun progress indicator.
+The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation. Also thanks to John Heiner for the fun progress indicator.
 
-Open source is more than a licensing strategy. It's a [movement](https://opensource.stackexchange.com/questions/9805/can-i-license-my-project-with-an-open-source-license-but-disallow-commercial-use). This work is made possible only by the labor of many open source contributers and their dependent, freely sourced efforts. My work is a meager attempt to contribute to what so many others have already provided.
+Open source is more than a licensing strategy. It's a [movement](https://opensource.stackexchange.com/questions/9805/can-i-license-my-project-with-an-open-source-license-but-disallow-commercial-use). This work is made possible only by the labor of many open source contributers and their freely sourced efforts.
 
 ## Available Commands
 
@@ -73,4 +73,4 @@ The app is built using `Remix` which uses esBuild (now Vite) for really fast hot
 
 ## 🤝 Support
 
-Give a ⭐️ if you like this project!
+Give a ⭐️ if you like this project!

app/components/layout/Header.tsx

@@ -4,6 +4,7 @@ import DarkMode from '~/components/layout/DarkModeButton'
 import Logo from '~/components/layout/MixpointLogo'
 
 import { Icon } from '@iconify-icon/react'
+import posthog from 'posthog-js'
 import LoginButton from '~/components/layout/LoginButton.client'
 
 const Header = () => (
@@ -26,7 +27,7 @@ const Header = () => (
 	>
 		<Logo />
 		<Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5 }}>
-			<LoginButton />
+			{posthog.isFeatureEnabled('Login') ? <LoginButton /> : null}
 			<IconButton
 				size="sm"
 				variant="outlined"

app/root.tsx

@@ -21,8 +21,10 @@ import {
 	Meta,
 	Outlet,
 	Scripts,
-	useLoaderData
+	useLoaderData,
+	useLocation
 } from '@remix-run/react'
+import posthog from 'posthog-js'
 import { useEffect, useState } from 'react'
 import { createHead } from 'remix-island'
 import ConfirmModal from '~/components/ConfirmModal'
@@ -103,7 +105,7 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 				{/* CSS Baseline is used to inject global styles */}
 				<CssBaseline />
 				{loading || error ? (
-					<InitialLoader message={error} />
+					<InitialLoader message={error} aria-busy={!!loading || !!error} />
 				) : (
 					<>
 						<Outlet />
@@ -130,13 +132,29 @@ export async function loader({ context }: LoaderFunctionArgs) {
 	return json({
 		ENV: {
 			SUPABASE_URL: context.env.SUPABASE_URL,
-			SUPABASE_ANON_KEY: context.env.SUPABASE_ANON_KEY
+			SUPABASE_ANON_KEY: context.env.SUPABASE_ANON_KEY,
+			REACT_APP_PUBLIC_POSTHOG_KEY: context.env.REACT_APP_PUBLIC_POSTHOG_KEY,
+			REACT_APP_PUBLIC_POSTHOG_HOST: context.env.REACT_APP_PUBLIC_POSTHOG_HOST
 		}
 	})
 }
 
 const App = ({ error }: { error?: string }) => {
 	const data = error ? {} : useLoaderData<typeof loader>()
+	const location = useLocation()
+
+	useEffect(() => {
+		posthog.init(data.ENV.REACT_APP_PUBLIC_POSTHOG_KEY, {
+			api_host: data.ENV.REACT_APP_PUBLIC_POSTHOG_HOST,
+			capture_pageview: false
+		})
+	}, [data])
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: location is used to trigger new pageview capture
+	useEffect(() => {
+		posthog.capture('$pageview')
+	}, [location])
+
 	return (
 		<HtmlDoc>
 			<script

package.json

@@ -29,6 +29,7 @@
 		"isbot": "latest",
 		"jsdom": "^21.1.1",
 		"moment": "~2.29.4",
+		"posthog-js": "^1.94.4",
 		"react": "~18",
 		"react-dom": "~18",
 		"remix-island": "^0.1.2",

playwright.config.ts

@@ -1,20 +1,82 @@
-import { defineConfig } from '@playwright/test'
+import { defineConfig, devices } from '@playwright/test'
 
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
 export default defineConfig({
 	testDir: './tests',
 	/* Run tests in files in parallel */
 	fullyParallel: true,
-
-	// Setup recording option to enable test debugging features
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	// Adds Argos reporter in CI environments
+	reporter: process.env.CI
+		? [['list'], ['@argos-ci/playwright/reporter']]
+		: 'list',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
-		// Setting to capture screenshot only when a test fails
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: 'http://localhost:8788',
+
+		// Capture a screenshot when a test fails
 		screenshot: 'only-on-failure',
-		// Setting to retain traces only when a test fails
+
+		// Keeps traces for failed tests
 		trace: 'retain-on-failure'
 	},
 
-	// Add Argos reporter only when it runs on CI
-	reporter: process.env.CI
-		? [['list'], ['@argos-ci/playwright/reporter']]
-		: 'list'
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		}
+
+		// {
+		//   name: 'firefox',
+		//   use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		//   name: 'webkit',
+		//   use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'yarn dev',
+		url: 'http://localhost:8788',
+		reuseExistingServer: !process.env.CI
+	}
 })

tests/screenshots.spec.ts

@@ -8,7 +8,6 @@ test('screenshot pages', async ({ page }, workerInfo) => {
 	for (const { name, path } of pages) {
 		const browserName = workerInfo.project.name
 		await page.goto(`${baseUrl}${path}`)
-		await page.waitForTimeout(3000) // wait for loader screen
 		await argosScreenshot(page, `${name}-${browserName}`)
 	}
 })

yarn.lock

@@ -4367,6 +4367,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.4.1":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: 29d8cbe44d5e7f53e7f5a160ac7f9cc025480c7b3bfd85c5f898cbe20dfa2dad4732daa534982664bf30b35896a90af44ea33ede5d94c5ffd1b8b0c0a0a56ca2
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^7.0.1":
   version: 7.0.1
   resolution: "fill-range@npm:7.0.1"
@@ -6396,6 +6403,7 @@ isbot@latest:
     isbot: latest
     jsdom: ^21.1.1
     moment: ~2.29.4
+    posthog-js: ^1.94.4
     react: ~18
     react-dom: ~18
     remix-island: ^0.1.2
@@ -7151,6 +7159,15 @@ isbot@latest:
   languageName: node
   linkType: hard
 
+"posthog-js@npm:^1.94.4":
+  version: 1.94.4
+  resolution: "posthog-js@npm:1.94.4"
+  dependencies:
+    fflate: ^0.4.1
+  checksum: ddbdd216ffdd9ee8f90ea6829dd58fd629939b21e792f514259a878c911ca33a753cfb0d126ab6c5f5a1597c4d540af61b2b8fee3eeada169e77c942806c5b50
+  languageName: node
+  linkType: hard
+
 "prebuild-install@npm:^7.1.1":
   version: 7.1.1
   resolution: "prebuild-install@npm:7.1.1"