feat: implement peer component using video and showing peer name

README.md

@@ -31,4 +31,5 @@ Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/rea
 9. Implement page.svelte, also add a leave on unload function for handling tab closing. Implement header with a logo and a leave button.
 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. 
+12. Implement Peer Component using Video and showing the peer name
+13. 

src/routes/Peer.svelte

@@ -1,7 +1,23 @@
 <script>
+    import Video from "./Video.svelte";
+
     export let peer;
 </script>
 
-<p>
-    Peer - {peer.name}
-</p>
+<div class="peer-container">
+    <Video isLocal={peer.isLocal} videoTrackId={peer.videoTrack} />
+    <div class="peer-name">
+        {peer.name} {peer.isLocal ? "(You)" : ""}
+    </div>
+</div>
+
+<style>
+    .peer-name {
+        font-size: 14px;
+        text-align: center;
+    }
+
+    .peer-container {
+        padding: 10px;
+    }
+</style>

src/routes/Video.svelte

@@ -0,0 +1,6 @@
+<script>
+    export let isLocal;
+    export let videoTrackId;
+</script>
+
+<p>Video - {videoTrackId} - {isLocal}</p>