update demo 2

lewhunt · Jun 13, 2024 · 3709958 · 3709958
1 parent 935375f
commit 3709958
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -58,22 +58,30 @@ function App() {
 
 ## Advanced Usage
 
-The demos illustrate how the component can be initialised with more props - along with images and videos inside the child divs - for a richer user experience. Demo 3 also uses a custom video component with preview images, which optimises load and plays only when the current item is active/selected.
+The demos illustrate how the component can be initialised with more props - along with images and videos inside the child divs - for a richer user experience. Demo 3 goes even further and uses a custom video component with preview images, optimised to only play video when the current item is active:
 
 ```jsx
 <>
-  <img className="background" src={`./demo2/${selectedIndex + 1}-bg.jpg`} />
+  <video autoPlay playsInline loop muted className="background">
+    <source
+      src="./demo3/star-stars-night-space-light-121702.mp4"
+      type="video/mp4"
+    />
+  </video>
 
   <Divz
-    className="demo2"
     autoPlay={true}
-    autoPlayDuration={5000}
+    isDarkMode={true}
     onIndexChange={(i) => setSelectedIndex(i)}
   >
-    {demo2Images.map((imageUrl, index) => (
-      <div key={index}>
-        <img src={imageUrl} />
-      </div>
+    {demo3Assets.map((item, index) => (
+      <DivzVideoItem
+        key={index}
+        index={index}
+        isActive={index === selectedIndex}
+        previewImage={item.image}
+        videoSource={item.video}
+      ></DivzVideoItem>
     ))}
   </Divz>
 </>
@@ -135,8 +143,7 @@ Under the hood, Divz performs CSS3 transforms on the core component and the chil
 
 Sample media used in the [demos](https://lewhunt.github.io/divz/) are from various open source projects:
 
-- Demo 2 images are generated in [Midjourney](https://www.midjourney.com/) by [Manoela Ilic](https://github.com/codrops/LayersAnimation/)
-- Demo 3 images and videos are from [Pixabay](https://pixabay.com/) and [Runway](https://runwayml.com/)
+- Demo 2 and 3 images and videos are from [Pixabay](https://pixabay.com/) and [Runway](https://runwayml.com/)
 - Demo 4 images are generated in [Midjourney](https://www.midjourney.com/) by [Manoela Ilic](https://github.com/codrops/GridItemHoverEffect/)
 
 <br/>

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "Lewis Hunt",
   "description": "A React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis",
   "private": false,
-  "version": "1.1.7",
+  "version": "1.1.8",
   "type": "module",
   "homepage": "https://lewhunt.github.io/divz",
   "repository": "https://github.com/lewhunt/divz.git",

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ function App() {
   };
 
   return (
-    <div className={`app ${demo >= 3 ? "dark-mode" : ""}`}>
+    <div className={`app ${demo >= 2 ? "dark-mode" : ""}`}>
       <div className="app-header">
         <div className={`demo-list`}>
           {[1, 2, 3, 4].map((demoNumber) => (
@@ -72,33 +72,37 @@ function Demo1() {
   );
 }
 
-const demo2Images: string[] = [];
-
-/* Demo 2 images generated in Midjourney by Manoela Ilic:
-https://github.com/codrops/LayersAnimation/
-*/
-for (let i = 1; i <= 5; i++) {
-  demo2Images.push(`./demo2/${i}.jpg`);
-}
-
 function Demo2() {
-  const [selectedIndex, setSelectedIndex] = useState<number>(0);
   return (
     <>
-      <img className="background" src={`./demo2/${selectedIndex + 1}-bg.jpg`} />
+      <video autoPlay playsInline loop muted className="background">
+        <source
+          src="./demo3/star-stars-night-space-light-121702.mp4"
+          type="video/mp4"
+        />
+      </video>
 
-      <Divz
-        className="demo2"
-        autoPlay={true}
-        isExpanded={false}
-        onIndexChange={(i) => setSelectedIndex(i)}
-        onPlaying={(i) => console.log("divz playing: ", i)}
-      >
-        {demo2Images.map((imageUrl, index) => (
-          <div key={index}>
-            <img src={imageUrl} />
-          </div>
-        ))}
+      <Divz autoPlay={true} className="demo2" isDarkMode={true}>
+        <div>
+          <img src="./demo3/astronaut-4106766_1280.jpg" />
+        </div>
+
+        <div>
+          <img src="./demo3/astronaut-6052199_1280.jpg" />
+        </div>
+
+        <div>
+          <img src="./demo3/plane-5462276_1280.jpg" />
+        </div>
+
+        <div>
+          <video autoPlay playsInline loop muted>
+            <source
+              src="./demo3/space-ship-magic-purple-sci-fi-53601.mp4"
+              type="video/mp4"
+            />
+          </video>
+        </div>
       </Divz>
     </>
   );