feature/react-playground-improvements

playground/react/package.json

@@ -12,7 +12,8 @@
     "@cloudinary/react": "1.11.2",
     "@cloudinary/url-gen": "^1.10.0",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^16.0.0",

playground/react/src/App.css

@@ -1,41 +1,23 @@
 #root {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+nav {
+  display: flex;
+  justify-content: center;
+  gap: 1em;
 }
 
-.card {
-  padding: 2em;
+article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
 }
 
-.read-the-docs {
-  color: #888;
+.responsive-image {
+  width: 100%;
 }

playground/react/src/App.tsx

@@ -1,34 +1,30 @@
-import React from 'react'
-import './App.css'
-import {
-  AdvancedImage,
-  AdvancedVideo,
-  accessibility,
-  responsive,
-  lazyload,
-  placeholder
-} from '@cloudinary/react'
-import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage'
-import { CloudinaryVideo } from '@cloudinary/url-gen/assets/CloudinaryVideo'
+import React from "react";
+import "./App.css";
+import { Routes, Route, useNavigate } from "react-router-dom";
+
+import AdvancedImage from "./components/AdvancedImage";
+import AdvancedVideo from "./components/AdvancedVideo";
 
 // This is our playground and can be used to test library
-function App() {
-  const img = new CloudinaryImage('sample', { cloudName: 'demo' })
 
-  const cldVid = new CloudinaryVideo(
-    'docs/walking_talking',
-    { cloudName: 'demo' },
-    { analytics: false }
-  )
+function App() {
+  const navigate = useNavigate();
+  const onClick = (path: string) => () => navigate(path);
 
   return (
-    <div>
-      <h1>AdvancedImage</h1>
-      <AdvancedImage cldImg={img} plugins={[responsive({ steps: 100 })]} />
-      <h1>AdvancedVideo</h1>
-      <AdvancedVideo cldVid={cldVid} controls loop width={600} />
-    </div>
-  )
+    <main>
+      <h1>Cloudinary React Playground</h1>
+      <nav>
+        <button onClick={onClick('/advanced-image')}>Advanced Image Demo</button>
+        <button onClick={onClick('/advanced-video')}>Advanced Video Demo</button>
+      </nav>
+
+      <Routes>
+        <Route path="/advanced-image" element={<AdvancedImage />} />
+        <Route path="/advanced-video" element={<AdvancedVideo />} />
+      </Routes>
+    </main>
+  );
 }
 
-export default App
+export default App;

playground/react/src/components/AdvancedImage.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import "../App.css";
+import {
+  AdvancedImage,
+  accessibility,
+  responsive,
+  lazyload,
+  placeholder,
+} from "@cloudinary/react";
+import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
+
+// This is our playground and can be used to test library
+function App() {
+  const img = new CloudinaryImage("sample", { cloudName: "demo" });
+
+  return (
+    <article>
+      <h2>Advanced Image Demo</h2>
+
+      <AdvancedImage
+        cldImg={img}
+        plugins={[
+          lazyload(),
+          responsive({ steps: 100 }),
+          accessibility({ mode: "darkmode" }),
+          placeholder(),
+        ]}
+        className="responsive-image"
+      />
+    </article>
+  );
+}
+
+export default App;

playground/react/src/components/AdvancedVideo.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import "../App.css";
+import {
+  AdvancedVideo,
+  lazyload,
+} from "@cloudinary/react";
+import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
+import { fill } from "@cloudinary/url-gen/actions/resize";
+
+// This is our playground and can be used to test library
+function App() {
+  const cldVid = new CloudinaryVideo(
+    "docs/walking_talking",
+    { cloudName: "demo" },
+    { analytics: false }
+  );
+
+  cldVid.resize(fill().width(600).height(600));
+
+  return (
+    <article>
+      <h2>Advanced Video Demo</h2>
+
+      <AdvancedVideo
+        cldVid={cldVid}
+        controls
+        loop
+        plugins={[lazyload()]}
+      />
+    </article>
+  );
+}
+
+export default App;

playground/react/src/index.css

@@ -28,13 +28,13 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  width: 100%;
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  text-align: center;
 }
 
 button {

playground/react/src/main.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom';
 import App from './App'
 import './index.css'
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root') as HTMLElement
 )