feat: implement rendering video, take peer id in Video Component

README.md

@@ -32,4 +32,5 @@ Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/rea
 10. Implement JoinForm, takes in name and token and calls join function
 11. Implement Conference, create a stub Peer.Svelte. Peer.svelte will use the Video.svelte file to render video and additionally show more details related to the peer.
 12. Implement Peer Component using Video and showing the peer name
-13. 
+13. Implement Video component to render video. Also make iterating over peers [keyed](https://svelte.dev/tutorial/keyed-each-blocks).
+14. 

src/routes/Conference.svelte

@@ -8,7 +8,7 @@
     <h2>Conference</h2>
 
     <div class="peers-container">
-        {#each $hmsPeers as peer}
+        {#each $hmsPeers as peer (peer.id)}
             <Peer {peer} />
         {/each}
     </div>

src/routes/Peer.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div class="peer-container">
-    <Video isLocal={peer.isLocal} videoTrackId={peer.videoTrack} />
+    <Video isLocal={peer.isLocal} peerId={peer.id} />
     <div class="peer-name">
         {peer.name} {peer.isLocal ? "(You)" : ""}
     </div>

src/routes/Video.svelte

@@ -1,6 +1,49 @@
 <script>
+    import {hmsActions, hmsStore} from "./hms.ts";
+    import {onMount} from "svelte";
+    import {selectCameraStreamByPeerID} from "@100mslive/hms-video-store";
+
     export let isLocal;
-    export let videoTrackId;
+    export let peerId;
+
+    let videoElement;
+
+    onMount(() => {
+      return hmsStore.subscribe((track) => {
+        if (!track || !videoElement) {
+          return
+        }
+        if (track?.enabled) {
+          hmsActions.attachVideo(track.id, videoElement);
+        } else {
+          hmsActions.detachVideo(track.id, videoElement);
+        }
+      }, selectCameraStreamByPeerID(peerId));
+    })
 </script>
 
-<p>Video - {videoTrackId} - {isLocal}</p>
+<video class="peer-video"
+    class:local={isLocal}
+    bind:this={videoElement}
+    autoPlay
+    muted
+    playsInline>
+</video>
+
+
+<style>
+    .peer-video {
+        height: 250px;
+        width: 250px;
+
+        margin-bottom: 10px;
+
+        border-radius: 40%;
+
+        object-fit: cover;
+    }
+
+    .peer-video.local {
+        transform: scaleX(-1);
+    }
+</style>