Merge branch 'main' into fix-disconnect

Author: micheal-parks

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @viamrobotics/svelte-sdk
 
+## 0.2.0
+
+### Minor Changes
+
+- 59452ac: Add CameraImage and CameraStream components
+
 ## 0.1.4
 
 ### Patch Changes

README.md

@@ -217,6 +217,53 @@ $inspect(resources.fetching);
 </script>
 ```
 
+## Components
+
+### `<CameraImage>`
+
+Fetches a camera image at a constant interval and displays it in an `<img>` tag.
+
+```svelte
+<script lang="ts">
+import { CameraImage } from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+  name: string;
+}
+
+let { partID, name }: Props = $props();
+</script>
+
+<CameraImage
+  {partID}
+  {name}
+  refetchInterval={2000}
+/>
+```
+
+### `<CameraStream>`
+
+Opens a camera stream and renders it in `<video>` tag.
+
+```svelte
+<script lang="ts">
+import { CameraStream } from '@viamrobotics/svelte-sdk';
+
+interface Props {
+  partID: string;
+  name: string;
+}
+
+let { partID, name }: Props = $props();
+</script>
+
+<CameraStream
+  {partID}
+  {name}
+/>
+```
+
 ## Developing
 
 First install dependencies with `pnpm install`, then start a development server:

package.json

@@ -2,7 +2,7 @@
   "name": "@viamrobotics/svelte-sdk",
   "description": "Build Svelte apps with Viam",
   "license": "Apache-2.0",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",

src/routes/components/camera.svelte renamed to src/lib/components/camera.svelte

@@ -1,28 +1,37 @@
 <script lang="ts">
 import { createResourceClient, createResourceQuery } from '$lib';
 import { CameraClient } from '@viamrobotics/sdk';
+import type { HTMLImgAttributes } from 'svelte/elements';
 
-interface Props {
+interface Props extends HTMLImgAttributes {
   partID: string;
   name: string;
+  refetchInterval?: number;
+  mimeType?: string;
 }
 
-let { partID, name }: Props = $props();
+let {
+  partID,
+  name,
+  refetchInterval = 1000,
+  width = '200',
+  mimeType = 'image/png',
+  ...rest
+}: Props = $props();
 
 const cameraClient = createResourceClient(
   CameraClient,
   () => partID,
   () => name
 );
 
-const queryOptions = $state({
-  refetchInterval: 1000,
-});
-const query = createResourceQuery(cameraClient, 'getImage', () => queryOptions);
+const query = createResourceQuery(cameraClient, 'getImage', () => ({
+  refetchInterval,
+}));
 
 const src = $derived(
   query.current.data
-    ? URL.createObjectURL(new Blob([query.current.data], { type: 'image/png' }))
+    ? URL.createObjectURL(new Blob([query.current.data], { type: mimeType }))
     : undefined
 );
 </script>
@@ -32,7 +41,7 @@ const src = $derived(
 {:else}
   <img
     {src}
-    alt=""
-    width="200"
+    {width}
+    {...rest}
   />
 {/if}

src/routes/components/stream.svelte renamed to src/lib/components/stream.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 import { createStreamClient } from '$lib';
+import type { HTMLVideoAttributes } from 'svelte/elements';
 
-interface Props {
+interface Props extends HTMLVideoAttributes {
   partID: string;
   name: string;
 }
 
-let { partID, name }: Props = $props();
+let { partID, name, ...rest }: Props = $props();
 
 let element: HTMLVideoElement;
 
@@ -22,8 +23,6 @@ $effect(() => {
 $effect(() => {
   const [firstResolution] = client.resolutions ?? [];
 
-  console.log(firstResolution);
-
   if (firstResolution) {
     client.setResolution(firstResolution);
   }
@@ -36,4 +35,5 @@ $effect(() => {
   controls={false}
   playsinline
   bind:this={element}
+  {...rest}
 ></video>

src/lib/index.ts

@@ -1,5 +1,10 @@
 export { default as ViamProvider } from './components/provider.svelte';
 
+// Components
+export { default as CameraImage } from './components/camera.svelte';
+export { default as CameraStream } from './components/stream.svelte';
+
+// Hooks
 export {
   useConnectionStatus,
   useRobotClient,

src/routes/components/parts.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-import { useConnectionStatus, useResourceNames } from '$lib';
+import {
+  useConnectionStatus,
+  useResourceNames,
+  CameraImage,
+  CameraStream,
+} from '$lib';
 import { dialConfigs } from '../configs';
 import Base from './base.svelte';
-import Camera from './camera.svelte';
-import Stream from './stream.svelte';
 import Version from './version.svelte';
 
 const partIDs = Object.keys(dialConfigs);
@@ -57,12 +60,12 @@ let streaming = true;
 
   {#each cameras.current as { name } (name)}
     {#if streaming}
-      <Stream
+      <CameraStream
         {name}
         {partID}
       />
     {:else}
-      <Camera
+      <CameraImage
         {name}
         {partID}
       />