feat: implement footer with audio video toggle buttons

README.md

@@ -2,7 +2,7 @@ A hello world app for Svelte + 100ms. Built with SvelteKit.
 
 Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/react-quickstart) for Svelte.
 
-### Steps
+### Steps to follow - (with commits linked for the step)
 
 1. Svelte kit create, git init
    ```sh
@@ -23,6 +23,7 @@ Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/rea
    - Header.svelte - normal header with a leave button
    - Footer.svelte - footer with audio video toggle buttons
    - Video.svelte - responsible for rendering a video given a track id, used by Conference component
+   - Peer.svelte - responsible for rendering Peer Video and peer's name etc.(not part of the above commit, added in below steps)
 6. The way 100ms sdk works is that there are two pieces hmsActions and hmsStore, while actions let you perform any action in the room, store acts as a global reactive database containing all the information about the room acting as source of truth. Selectors are functions which operate over this store to give some subset of information for e.g. name of other peers in the room.
 7. Now 100ms SDK has a very similar syntax to Svelte store in the sense that it has a subscribe function which returns unsubscribe function. We'll use it in two ways - 
    1. directly in the components, subscribing with the proper selector and calling the unsubscribe method in onDestroy
@@ -35,4 +36,4 @@ Adapting [React Quickstart](https://www.100ms.live/docs/javascript/v2/guides/rea
 13. Implement Video component to render video. Also make iterating over peers [keyed](https://svelte.dev/tutorial/keyed-each-blocks).
 14. Make Join remember device selection. If you don't see proper camera selected, you can run `await navigator.mediaDevices.enumerateDevices()
     09:55:27.108` to get a list of all devices, choose the correct device id for the camera and then run - `__hms.actions.setVideoSettings({deviceId: "<device id>"})`
-15. 
+15. Implement Footer with audio and video toggle buttons, also add store for knowing current audio video state in hmsStores

src/routes/+page.svelte

@@ -24,7 +24,7 @@
 <Header/>
 {#if $hmsIsConnected}
     <Conference />
+    <Footer/>
 {:else}
     <JoinForm />
 {/if}
-<Footer/>

src/routes/Footer.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { hmsActions } from './hms';
+    import {hmsIsAudioEnabled, hmsIsVideoEnabled} from "./hmsStores";
+
+    function toggleAudio() {
+        hmsActions.setLocalAudioEnabled(!$hmsIsAudioEnabled);
+    }
+
+    function toggleVideo() {
+        hmsActions.setLocalVideoEnabled(!$hmsIsVideoEnabled);
+    }
+</script>
+
+<footer class="control-bar">
+    <button class="btn-control" on:click={toggleAudio}>
+        {#if $hmsIsAudioEnabled}
+            Mute
+        {:else}
+            Unmute
+        {/if}
+    </button>
+
+    <button class="btn-control" on:click={toggleVideo}>
+        {#if $hmsIsVideoEnabled}
+            Stop Video
+        {:else}
+            Show video
+        {/if}
+    </button>
+</footer>
+
+<style>
+    .control-bar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        z-index: 10;
+
+        display: flex;
+        justify-content: center;
+
+        padding: 15px;
+    }
+
+    .control-bar > *:not(:first-child) {
+        margin-left: 8px;
+    }
+
+    .btn-control {
+        width: 64px;
+        height: 64px;
+
+        background-color: #607d8b;
+
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        text-align: center;
+        color: white;
+
+        border: 2px solid #37474f;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+    }
+</style>

src/routes/hmsStores.ts

@@ -2,7 +2,12 @@ import type { HMSStore } from '@100mslive/hms-video-store';
 import type { Readable } from 'svelte/store';
 import { readable } from 'svelte/store';
 import { hmsStore } from './hms';
-import { selectIsConnectedToRoom, selectPeers } from '@100mslive/hms-video-store';
+import {
+	selectIsConnectedToRoom,
+	selectIsLocalAudioEnabled,
+	selectIsLocalVideoEnabled,
+	selectPeers
+} from '@100mslive/hms-video-store';
 
 function hmsToSvelteStore<T>(selector: (store: HMSStore) => T): Readable<T> {
 	return readable(hmsStore.getState(selector), (set) => {
@@ -12,3 +17,5 @@ function hmsToSvelteStore<T>(selector: (store: HMSStore) => T): Readable<T> {
 
 export const hmsIsConnected = hmsToSvelteStore(selectIsConnectedToRoom);
 export const hmsPeers = hmsToSvelteStore(selectPeers);
+export const hmsIsAudioEnabled = hmsToSvelteStore(selectIsLocalAudioEnabled);
+export const hmsIsVideoEnabled = hmsToSvelteStore(selectIsLocalVideoEnabled);