From c2886c55083e089d148c3c3259dd13a95d210bb1 Mon Sep 17 00:00:00 2001
From: Cedric Verstraeten <cedric@verstraeten.io>
Date: Fri, 14 Jun 2024 08:22:26 +0200
Subject: [PATCH] add kerberos-io image card

---
 examples/livestream-sd/ui/package.json    |  1 +
 examples/livestream-sd/ui/src/Liveview.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/livestream-sd/ui/package.json b/examples/livestream-sd/ui/package.json
index 2362bc9..8f92cbd 100644
--- 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
index 782332b..bec0842 100644
--- 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>
     );