add kerberos-io image card

kerberos-io · Jun 14, 2024 · c2886c5 · c2886c5
1 parent dd49138
commit c2886c5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/examples/livestream-sd/ui/package.json b/examples/livestream-sd/ui/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@kerberos-io/ui": "^1.77.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/examples/livestream-sd/ui/src/Liveview.js b/examples/livestream-sd/ui/src/Liveview.js
@@ -1,13 +1,18 @@
 // This component will receive an array of livestreams and display them in a video grid.
-
 import React from 'react';
+import { ImageCard } from '@kerberos-io/ui';
 
 const Liveview = ({ liveviews }) => {
     return (
         <div className="liveview">
-            {liveviews && liveviews.length && "ok"}
         {liveviews && liveviews.map((liveview, index) => (
-            <img key={index} src={`data:image/jpeg;base64,${liveview.image}`} alt="liveview" />
+            <div>
+                <p>Camera name: {liveview.camera_id}</p>
+                <ImageCard
+                    imageSrc={`data:image/png;base64, ${liveview.image}`}
+                    onerror=""
+                />
+            </div>
         ))}
         </div>
     );