From ecfb41c350e08aaa0006b648ae6225658f846d5c Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker <me@ntucker.me>
Date: Fri, 27 Sep 2024 09:28:55 -0400
Subject: [PATCH] docs: Add Embed and AutoPlayVideo components to website

---
 docs/rest/guides/optimistic-updates.md        |  2 +-
 packages/endpoint/src/schemas/EntitySchema.ts |  2 +-
 ...7-v0.13-nextjs-app-router-expogo-native.md | 19 ++----
 website/src/components/AutoPlayVideo.tsx      | 64 +++++++++++++++++++
 website/src/components/Embed.tsx              | 35 ++++++++++
 5 files changed, 107 insertions(+), 15 deletions(-)
 create mode 100644 website/src/components/AutoPlayVideo.tsx
 create mode 100644 website/src/components/Embed.tsx

diff --git a/docs/rest/guides/optimistic-updates.md b/docs/rest/guides/optimistic-updates.md
index 0fdc258eaaa2..acbe58d8f205 100644
--- a/docs/rest/guides/optimistic-updates.md
+++ b/docs/rest/guides/optimistic-updates.md
@@ -98,7 +98,7 @@ export default function CreateTodo({ userId }: { userId: number }) {
     <div className="listItem nogap">
       <label>
         <input type="checkbox" name="new" checked={false} disabled />
-        <input type="text" onKeyDown={handleKeyDown} />
+        <TextInput size="small" onKeyDown={handleKeyDown} />
       </label>
       <CancelButton />
     </div>
diff --git a/packages/endpoint/src/schemas/EntitySchema.ts b/packages/endpoint/src/schemas/EntitySchema.ts
index 52e86a745b62..631b1ab01406 100644
--- a/packages/endpoint/src/schemas/EntitySchema.ts
+++ b/packages/endpoint/src/schemas/EntitySchema.ts
@@ -12,7 +12,7 @@ import { AbstractInstanceType } from '../normal.js';
  * Represents data that should be deduped by specifying a primary key.
  * @see https://dataclient.io/rest/api/schema.Entity
  */
-export default function EntitySchema<TBase extends Constructor>(
+export default function EntityMixin<TBase extends Constructor>(
   Base: TBase,
   options: EntityOptions<InstanceType<TBase>> = {},
 ) {
diff --git a/website/blog/2024-06-17-v0.13-nextjs-app-router-expogo-native.md b/website/blog/2024-06-17-v0.13-nextjs-app-router-expogo-native.md
index c5d8161dcb9d..99468d07cc9a 100644
--- a/website/blog/2024-06-17-v0.13-nextjs-app-router-expogo-native.md
+++ b/website/blog/2024-06-17-v0.13-nextjs-app-router-expogo-native.md
@@ -41,6 +41,7 @@ Version 0.12 was skipped due to a publishing mishap.
 import Grid from '@site/src/components/Grid';
 import TypeScriptEditor from '@site/src/components/TypeScriptEditor';
 import DiffEditor from '@site/src/components/DiffEditor';
+import AutoPlayVideo from '@site/src/components/AutoPlayVideo';
 
 ## Platforms
 
@@ -74,13 +75,7 @@ xychart-beta
 
 </div></center>
 
-<center>
-<video width="600" controls>
-  <source src={useBaseUrl('/videos/blog/data-client-nextjs.mp4')} type="video/mp4"/>
-  Your browser does not support the video tag.
-</video>
-</center>
-
+<AutoPlayVideo src={useBaseUrl('/videos/blog/data-client-nextjs.mp4')} type="video/mp4" width="600" />
 
 <abbr title="Reactive Data Client">Data Client</abbr> performs streaming SSR of the HTML, streamlining the initial
 application load experience. Uniquely, <abbr title="Reactive Data Client">Data Client</abbr> is then immediately interactive
@@ -117,16 +112,13 @@ export default function RootLayout({ children }) {
   <Link className="button button--primary" to="../guides/ssr#nextjs">Full NextJS Guide</Link>
 </p>
 
-#### Demo
+#### Mutations demo
 
 <StackBlitz app="nextjs" file="components/todo/TodoList.tsx,app/layout.tsx" view="both" />
 
-<iframe src="https://coin-app-lake.vercel.app/" width="100%" height="400" />
+#### Live data demo
 
-<p style={{ textAlign: 'center' }}>
-  <Link className="button button--secondary button--sm" to="https://coin-app-lake.vercel.app/" target="_blank">Open in new tab</Link>&nbsp;
-  <Link className="button button--secondary button--sm" to="https://github.com/reactive/coin-app" target="_blank">Github</Link>
-</p>
+<Embed src="https://coin-app-lake.vercel.app" repo="https://github.com/reactive/coin-app" height="400" />
 
 #### Other SSR
 
@@ -233,6 +225,7 @@ This makes it more straightforward to manipulate the store with [Managers](/docs
 For example we can directly set our `Ticker` entity when receiving websocket messages:
 
 import StackBlitz from '@site/src/components/StackBlitz';
+import Embed from '@site/src/components/Embed';
 
 <StackBlitz app="coin-app" file="src/getManagers.ts,src/resources/Ticker.ts,src/pages/AssetDetail/AssetPrice.tsx,src/resources/StreamManager.ts" height="600" view="editor" />
 
diff --git a/website/src/components/AutoPlayVideo.tsx b/website/src/components/AutoPlayVideo.tsx
new file mode 100644
index 000000000000..1099e7450020
--- /dev/null
+++ b/website/src/components/AutoPlayVideo.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+
+const AutoPlayVideo = ({
+  src,
+  type = 'video/mp4',
+  ...props
+}: React.VideoHTMLAttributes<HTMLVideoElement> & { type?: string }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) return;
+
+    // Ensure IntersectionObserver is supported
+    if (!('IntersectionObserver' in window)) {
+      // Fallback to always play if not supported
+      videoElement.play();
+      return;
+    }
+
+    const observerOptions = {
+      root: null, // Use the viewport as the container
+      rootMargin: '0px',
+      threshold: 0.25, // Play when 25% of the video is visible
+    };
+
+    const handleIntersect = entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          videoElement.play();
+        } else {
+          videoElement.pause();
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(handleIntersect, observerOptions);
+    observer.observe(videoElement);
+
+    // Clean up the observer on unmount
+    return () => {
+      observer.unobserve(videoElement);
+    };
+  }, []);
+
+  return (
+    <center>
+      <video
+        ref={videoRef}
+        width="600"
+        controls
+        muted
+        playsInline
+        loop
+        {...props}
+      >
+        <source src={src} type={type} />
+        Your browser does not support the video tag.
+      </video>
+    </center>
+  );
+};
+
+export default AutoPlayVideo;
diff --git a/website/src/components/Embed.tsx b/website/src/components/Embed.tsx
new file mode 100644
index 000000000000..1488d90bb4e8
--- /dev/null
+++ b/website/src/components/Embed.tsx
@@ -0,0 +1,35 @@
+import Link from '@docusaurus/Link';
+
+// import Refresh from '../../static/img/refresh.svg';
+
+export default function Embed({
+  src,
+  repo,
+  width = '100%',
+  height = '400',
+  ...props
+}: React.IframeHTMLAttributes<HTMLIFrameElement> & { repo?: string }) {
+  return (
+    <div>
+      {/* <Refresh /> */}
+      <iframe src={src} width={width} height={height} {...props} />
+      <p style={{ textAlign: 'center' }}>
+        <Link
+          className="button button--secondary button--sm"
+          to={src}
+          target="_blank"
+        >
+          Open in new tab
+        </Link>
+        &nbsp;
+        <Link
+          className="button button--secondary button--sm"
+          to={repo}
+          target="_blank"
+        >
+          Github
+        </Link>
+      </p>
+    </div>
+  );
+}