Remove aria-pressed from video play/pause button

packages/react/demo/App.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import ReactVisual from "../src/ReactVisual";
+import LazyVideo from "../src/LazyVideo";
+import VisualWrapper from "../src/VisualWrapper";
+
+function App() {
+  return (
+    <div className="container">
+      <h1>@react-visual/react Demo</h1>
+      <p className="subtitle">
+        Interactive examples of the ReactVisual component library
+      </p>
+
+      {/* ReactVisual with Image */}
+      <div className="demo-section">
+        <h2>ReactVisual - Image Examples</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>
+              Basic Image with <code>aspect</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
+                aspect={16 / 9}
+                alt="Mountain landscape"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>
+              Image with <code>fit="contain"</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=800"
+                aspect={1}
+                fit="contain"
+                alt="Dog portrait"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>Image with explicit dimensions</h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800"
+                width={400}
+                height={300}
+                alt="Forest"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ReactVisual with Video */}
+      <div className="demo-section">
+        <h2>ReactVisual - Video with Poster</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>Video with Image Poster</h3>
+            <div className="visual-container">
+              <ReactVisual
+                video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
+                image="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=800"
+                aspect={16 / 9}
+                alt="Video with poster"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>Video without Poster</h3>
+            <div className="visual-container">
+              <ReactVisual
+                video="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
+                aspect={16 / 9}
+                noPoster
+                alt="Video without poster"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* VisualWrapper */}
+      <div className="demo-section">
+        <h2>VisualWrapper - Layout Container</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>Custom Content in Wrapper</h3>
+            <VisualWrapper aspect={16 / 9}>
+              <div
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background:
+                    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "white",
+                  fontSize: "24px",
+                  fontWeight: "bold",
+                }}
+              >
+                Custom Content
+              </div>
+            </VisualWrapper>
+          </div>
+
+          <div className="demo-item">
+            <h3>Square Aspect Ratio</h3>
+            <VisualWrapper aspect={1}>
+              <div
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background:
+                    "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "white",
+                  fontSize: "20px",
+                }}
+              >
+                1:1
+              </div>
+            </VisualWrapper>
+          </div>
+        </div>
+      </div>
+
+      {/* Props Examples */}
+      <div className="demo-section">
+        <h2>Advanced Props Examples</h2>
+        <div className="demo-grid">
+          <div className="demo-item">
+            <h3>
+              With <code>expand</code> prop
+            </h3>
+            <div style={{ position: "relative", height: "200px" }}>
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800"
+                expand
+                alt="Stars"
+              />
+            </div>
+          </div>
+
+          <div className="demo-item">
+            <h3>
+              With <code>className</code> and <code>style</code>
+            </h3>
+            <div className="visual-container">
+              <ReactVisual
+                image="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800"
+                aspect={16 / 9}
+                className="custom-class"
+                style={{ border: "4px solid #667eea", borderRadius: "8px" }}
+                alt="Nature"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);

packages/react/demo/README.md

@@ -0,0 +1,47 @@
+# React Visual Demo
+
+This demo app showcases the `@react-visual/react` components in action.
+
+## Running Locally
+
+From the `packages/react` directory, run:
+
+```bash
+yarn demo
+```
+
+This will start a development server at `http://localhost:3000` with hot module reloading.
+
+## Testing with iOS Simulator
+
+1. Start the demo server: `yarn demo`
+2. Open your iOS Simulator
+3. Navigate to `http://localhost:3000` in Safari
+4. You can also use your computer's local IP address (e.g., `http://192.168.1.x:3000`) to test on a physical device
+
+## Using in CodeSandbox
+
+This demo is designed to work seamlessly in CodeSandbox. Simply:
+
+1. Open the package in CodeSandbox
+2. Run `yarn demo` in the terminal
+3. View the preview in the browser pane
+
+## What's Included
+
+The demo showcases:
+
+- **ReactVisual** - Image rendering with various props
+- **LazyVideo** - Video component with lazy loading
+- **VisualWrapper** - Layout wrapper for custom content
+- Various prop combinations (aspect ratios, fit modes, etc.)
+
+## Building for Production
+
+To build the demo for static deployment:
+
+```bash
+yarn demo:build
+```
+
+The output will be in the `demo-dist` directory.

packages/react/demo/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Visual Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 40px;
+      }
+
+      .demo-section {
+        background: white;
+        padding: 30px;
+        margin-bottom: 30px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .demo-section h2 {
+        color: #333;
+        margin-bottom: 20px;
+        font-size: 20px;
+      }
+
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+      }
+
+      .demo-item {
+        background: #fafafa;
+        padding: 15px;
+        border-radius: 4px;
+      }
+
+      .demo-item h3 {
+        color: #555;
+        font-size: 14px;
+        margin-bottom: 10px;
+        font-weight: 600;
+      }
+
+      .demo-item .visual-container {
+        background: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      code {
+        background: #f0f0f0;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 13px;
+        color: #d73a49;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./App.tsx"></script>
+  </body>
+</html>

packages/react/package.json

@@ -13,7 +13,8 @@
   "scripts": {
     "build": "vite build",
     "test": "cypress run --component",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "demo": "vite --config vite.demo.config.ts"
   },
   "dependencies": {
     "@react-hook/media-query": "^1.1.1",

packages/react/src/LazyVideo/AccessibilityControls.tsx

@@ -40,7 +40,6 @@ export default function AccessibilityControls({
   return (
     <button
       onClick={isVideoPaused ? play : pause}
-      aria-pressed={!isVideoPaused}
       aria-label={isVideoPaused ? "Play" : "Pause"}
       style={{
         // Clear default sizes

packages/react/vite.demo.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// Vite config for the demo app
+export default defineConfig({
+  plugins: [react()],
+  root: "demo",
+  server: {
+    port: 3000,
+    open: true,
+  },
+});