diff --git a/index.html b/index.html
index f7c14a7..9b16f2f 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/CallControls.vue b/src/components/CallControls.vue
index 3dc4658..e6dbb3e 100644
--- a/src/components/CallControls.vue
+++ b/src/components/CallControls.vue
@@ -2,7 +2,7 @@
   <div class="controls">
     <div class="devices">
       <button @click="handleAudioClick">
-        <template v-if="participant.audio">
+        <template v-if="audio">
           <img class="icon" :src="micOn" alt="" />
         </template>
         <template v-else>
@@ -11,7 +11,7 @@
       </button>
 
       <button @click="handleVideoClick">
-        <template v-if="participant.video">
+        <template v-if="video">
           <img class="icon" :src="videoOn" alt="" />
         </template>
         <template v-else>
@@ -45,7 +45,8 @@ import videoOn from "../assets/vid_on.svg";
 export default {
   name: "CallControls",
   props: [
-    "participant",
+    "audio",
+    "video",
     "handleVideoClick",
     "handleAudioClick",
     "handleScreenshareClick",
diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index 8a03c0b..5e284f2 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -28,7 +28,13 @@
             <div v-if="participants" class="participants-container">
               <template v-for="p in participants" :key="p.session_id">
                 <video-tile
-                  :participant="p"
+                  :audio-track="p.audioTrack"
+                  :local="p.local"
+                  :screen="p.screen"
+                  :session_id="p.session_id"
+                  :user_name="p.user_name"
+                  :video-track="p.videoTrack"
+
                   :handle-video-click="handleVideoClick"
                   :handle-audio-click="handleAudioClick"
                   :handle-screenshare-click="handleScreenshareClick"
@@ -50,8 +56,15 @@
   </main>
 </template>
 
-<script>
-import daily from "@daily-co/daily-js";
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import daily, {
+  type DailyCall,
+  type DailyEventObjectAppMessage,
+  type DailyEventObjectFatalError,
+  type DailyParticipant,
+} from "@daily-co/daily-js";
 
 import WaitingCard from "./WaitingCard.vue";
 import ChatTile from "./ChatTile.vue";
@@ -60,7 +73,37 @@ import ScreenshareTile from "./ScreenshareTile.vue";
 import LoadingTile from "./LoadingTile.vue";
 import PermissionsErrorMsg from "./PermissionsErrorMsg.vue";
 
-export default {
+interface Participant {
+  audioTrack: MediaStreamTrack | null;
+  local: boolean;
+  screen: boolean;
+  session_id: string;
+  user_name: string;
+  videoTrack: MediaStreamTrack | null;
+}
+
+interface Message {
+  name: string;
+  message: string;
+}
+
+interface CallTileData {
+  callObject: null | DailyCall;
+  loading: boolean;
+  error: string;
+  showPermissionsError: boolean;
+  participants: Participant[];
+  screen: unknown; // video track
+  messages: Message[];
+  count: number;
+}
+
+type Tracks = {
+  videoTrack: MediaStreamTrack | null;
+  audioTrack: MediaStreamTrack | null;
+};
+
+export default defineComponent({
   name: "CallTile",
   components: {
     VideoTile,
@@ -70,14 +113,27 @@ export default {
     LoadingTile,
     PermissionsErrorMsg,
   },
-  props: ["leaveCall", "name", "roomUrl"],
-  data() {
+  props: {
+    leaveCall: {
+      type: Function,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    roomUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data(): CallTileData {
     return {
       callObject: null,
-      participants: null,
+      participants: [],
       count: 0,
       messages: [],
-      error: false,
+      error: "",
       loading: false,
       showPermissionsError: false,
       screen: null,
@@ -98,31 +154,274 @@ export default {
 
     // Add call and participant event handler
     // Visit https://docs.daily.co/reference/daily-js/events for more event info
-    co.on("joining-meeting", this.handleJoiningMeeting)
-      .on("joined-meeting", this.updateParticpants)
-      .on("participant-joined", this.updateParticpants)
-      .on("participant-updated", this.updateParticpants)
-      .on("participant-left", this.updateParticpants)
+    co
+      // .on("joining-meeting", this.handleJoiningMeeting)
+      // .on("joined-meeting", this.updateParticpants)
+      // .on("participant-joined", this.updateParticpants)
+      // .on("participant-updated", this.updateParticpants)
+      // .on("participant-left", this.updateParticpants)
       .on("error", this.handleError)
       // camera-error = device permissions issue
       .on("camera-error", this.handleDeviceError)
       // app-message handles receiving remote chat messages
-      .on("app-message", this.updateMessages);
+      .on("app-message", this.updateMessages)
+      .on("track-started", (p) => {
+        if (!p?.participant) return;
+        const {session_id, local, user_name} = p.participant;
+        const { audioTrack, videoTrack } = this.getParticipantTracks(
+          p.participant
+        );
+        try {
+          this.updateMedia2(session_id, user_name, local, audioTrack, videoTrack);
+        } catch (e) {
+          console.warn(e);
+        }
+      })
+      // .on("track-started", (p) => {
+      //   if (!p?.participant) return;
+      //   const tracks = this.getParticipantTracks(p.participant);
+      //   try {
+      //     this.updateMedia(p.participant.session_id, tracks);
+      //   } catch (e) {
+      //     console.warn(e);
+      //   }
+      // })
+      .on("track-stopped", (p) => {
+        if (!p?.participant) return;
+        const {session_id, local, user_name} = p.participant;
+        const { audioTrack, videoTrack } = this.getParticipantTracks(
+          p.participant
+        );
+        try {
+          this.updateMedia2(session_id, user_name, local, audioTrack, videoTrack);
+        } catch (e) {
+          console.warn(e);
+        }
+      });
   },
   unmounted() {
     if (!this.callObject) return;
     // Clean-up event handlers
     this.callObject
-      .off("joining-meeting", this.handleJoiningMeeting)
-      .off("joined-meeting", this.updateParticpants)
-      .off("participant-joined", this.updateParticpants)
-      .off("participant-updated", this.updateParticpants)
-      .off("participant-left", this.updateParticpants)
+      // .off("joining-meeting", this.handleJoiningMeeting)
+      // .off("joined-meeting", this.updateParticpants)
+      // .off("participant-joined", this.updateParticpants)
+      // .off("participant-updated", this.updateParticpants)
+      // .off("participant-left", this.updateParticpants)
       .off("error", this.handleError)
       .off("camera-error", this.handleDeviceError)
-      .off("app-message", this.updateMessages);
+      .off("app-message", this.updateMessages)
+      .off("track-started", (p) => {
+        if (!p?.participant) return;
+        const tracks = this.getParticipantTracks(p.participant);
+        try {
+          this.updateMedia(p.participant.session_id, tracks);
+        } catch (e) {
+          console.warn(e);
+        }
+      })
+      .off("track-stopped", (p) => {
+        if (!p?.participant) return;
+        const tracks = this.getParticipantTracks(p.participant);
+        try {
+          this.updateMedia(p.participant.session_id, tracks);
+        } catch (e) {
+          console.warn(e);
+        }
+      });
   },
   methods: {
+    updateMedia2(
+      sessionId: string,
+      userName: string,
+      local: boolean,
+      audio: MediaStreamTrack | null,
+      video: MediaStreamTrack | null
+    ) {
+      const participant = this.participants.find(
+        (p) => p.session_id === sessionId
+      );
+
+      if (!participant) {
+        this.participants.push({
+          session_id: sessionId,
+          user_name: userName,
+          local,
+          audioTrack: audio,
+          videoTrack: video,
+          screen: false,
+        });
+        return;
+      }
+
+      this.participants = this.participants.map((p) => {
+        console.log("p:", p);
+        if (p.session_id === sessionId) {
+          return {
+            audioTrack: audio,
+            local,
+            screen: false, // TODO(jamsea): should be a track
+            session_id: sessionId,
+            user_name: userName,
+            videoTrack: video,
+          };
+        }
+        return p;
+      });
+
+      console.log("this.participants", this.participants);
+    },
+    updateMedia(participantID: string, newTracks: Tracks) {
+      // Get the video tag.
+      let videoTile = document.getElementById(
+        participantID
+      ) as HTMLVideoElement | null;
+      if (!videoTile) {
+        const videoCall = document.getElementById(
+          "video-call"
+        ) as HTMLDivElement;
+        const newVideoTile = document.createElement("video");
+        newVideoTile.id = participantID;
+        videoCall.appendChild(newVideoTile);
+        videoTile = newVideoTile;
+      }
+
+      const video = videoTile;
+
+      // Get existing MediaStream from the video tag source object.
+      const existingStream = video.srcObject as MediaStream;
+
+      const newVideo = newTracks.videoTrack;
+      const newAudio = newTracks.audioTrack;
+
+      // If there is no existing stream or it contains no tracks,
+      // Just create a new media stream using our new tracks.
+      // This will happen if this is the first time we're
+      // setting the tracks.
+      if (!existingStream || existingStream.getTracks().length === 0) {
+        const tracks: MediaStreamTrack[] = [];
+        if (newVideo) tracks.push(newVideo);
+        if (newAudio) tracks.push(newAudio);
+        const newStream = new MediaStream(tracks);
+        video.srcObject = newStream;
+        video.playsInline = true;
+        video.autoplay = true;
+        video.muted = true;
+        this.playMedia(video);
+        return;
+      }
+
+      // This boolean will define whether we play the video element again
+      // This should be `true` if any of the tracks have changed.
+      let needsPlay = false;
+      needsPlay = this.refreshAudioTrack(existingStream, newAudio);
+
+      // We have an extra if check here compared to the audio track
+      // handling above, because the video track also dictates
+      // whether we should hide the video DOM element.
+      if (newVideo) {
+        if (this.refreshVideoTrack(existingStream, newVideo) && !needsPlay) {
+          needsPlay = true;
+        }
+
+        video.classList.remove("hidden");
+      } else {
+        // If there's no video to be played, hide the element.
+        video.classList.add("hidden");
+      }
+      if (needsPlay) {
+        this.playMedia(video);
+      }
+    },
+    refreshAudioTrack(
+      existingStream: MediaStream,
+      newAudioTrack: MediaStreamTrack | null
+    ): boolean {
+      // If there is no new track, just early out
+      // and keep the old track on the stream as-is.
+      if (!newAudioTrack) return false;
+      const existingTracks = existingStream.getAudioTracks();
+      return this.refreshTrack(existingStream, existingTracks, newAudioTrack);
+    },
+    refreshVideoTrack(
+      existingStream: MediaStream,
+      newVideoTrack: MediaStreamTrack | null
+    ): boolean {
+      // If there is no new track, just early out
+      // and keep the old track on the stream as-is.
+      if (!newVideoTrack) return false;
+      const existingTracks = existingStream.getVideoTracks();
+      return this.refreshTrack(existingStream, existingTracks, newVideoTrack);
+    },
+    refreshTrack(
+      existingStream: MediaStream,
+      oldTracks: MediaStreamTrack[],
+      newTrack: MediaStreamTrack
+    ): boolean {
+      const trackCount = oldTracks.length;
+      // If there is no matching old track,
+      // just add the new track.
+      if (trackCount === 0) {
+        existingStream.addTrack(newTrack);
+        return true;
+      }
+      if (trackCount > 1) {
+        console.warn(
+          `expected up to 1 media track, but got ${trackCount}. Only using the first one.`
+        );
+      }
+      const oldTrack = oldTracks[0];
+      // If the IDs of the old and new track don't match,
+      // replace the old track with the new one.
+      if (oldTrack.id !== newTrack.id) {
+        existingStream.removeTrack(oldTrack);
+        existingStream.addTrack(newTrack);
+        return true;
+      }
+      return false;
+    },
+    playMedia(video: HTMLVideoElement) {
+      const isPlaying =
+        !video.paused &&
+        !video.ended &&
+        video.currentTime > 0 &&
+        video.readyState > video.HAVE_CURRENT_DATA;
+
+      if (isPlaying) return;
+
+      video.play().catch((e) => {
+        if (e instanceof Error && e.name === "NotAllowedError") {
+          throw new Error("Autoplay error");
+        }
+
+        console.warn("Failed to play media.", e);
+      });
+    },
+    getParticipantTracks(p: DailyParticipant) {
+      const mediaTracks: Tracks = {
+        videoTrack: null,
+        audioTrack: null,
+      };
+
+      const tracks = p?.tracks;
+      if (!tracks) return mediaTracks;
+
+      const vt = tracks.video;
+      const vs = vt?.state;
+      if (vt.persistentTrack && !(vs === "off" || vs === "blocked")) {
+        mediaTracks.videoTrack = vt.persistentTrack;
+      }
+
+      // Only get audio track if this is a remote participant
+      if (!p.local) {
+        const at = tracks.audio;
+        const as = at?.state;
+        if (at.persistentTrack && !(as === "off" || as === "blocked")) {
+          mediaTracks.audioTrack = at.persistentTrack;
+        }
+      }
+      return mediaTracks;
+    },
     /**
      * This is called any time a participant update registers.
      * In large calls, this should be optimized to avoid re-renders.
@@ -137,7 +436,7 @@ export default {
       this.count = Object.values(p).length;
       this.participants = Object.values(p);
 
-      const screen = this.participants.filter((p) => p.screenVideoTrack);
+      const screen = this.participants.filter((pa) => pa.screenVideoTrack);
       if (screen?.length && !this.screen) {
         console.log("[SCREEN]", screen);
         this.screen = screen[0];
@@ -147,14 +446,16 @@ export default {
       this.loading = false;
     },
     // Add chat message to local message array
-    updateMessages(e) {
+    updateMessages(e: DailyEventObjectAppMessage<any> | undefined) {
+      if (!e) return;
       console.log("[MESSAGE] ", e.data);
       this.messages.push(e?.data);
     },
     // Show local error in UI when daily-js reports an error
-    handleError(e) {
+    handleError(e: DailyEventObjectFatalError | undefined) {
+      if (!e) return;
       console.log("[ERROR] ", e);
-      this.error = e?.errorMsg;
+      this.error = e.errorMsg;
       this.loading = false;
     },
     // Temporary show loading view while joining the call
@@ -163,13 +464,13 @@ export default {
     },
     // Toggle local microphone in use (on/off)
     handleAudioClick() {
-      const audioOn = this.callObject.localAudio();
-      this.callObject.setLocalAudio(!audioOn);
+      const audioOn = this.callObject?.localAudio();
+      this.callObject?.setLocalAudio(!audioOn);
     },
     // Toggle local camera in use (on/off)
     handleVideoClick() {
-      const videoOn = this.callObject.localVideo();
-      this.callObject.setLocalVideo(!videoOn);
+      const videoOn = this.callObject?.localVideo();
+      this.callObject?.setLocalVideo(!videoOn);
     },
     // Show permissions error in UI to alert local participant
     handleDeviceError() {
@@ -178,10 +479,10 @@ export default {
     // Toggle screen share
     handleScreenshareClick() {
       if (this.screen?.local) {
-        this.callObject.stopScreenShare();
+        this.callObject?.stopScreenShare();
         this.screen = null;
       } else {
-        this.callObject.startScreenShare();
+        this.callObject?.startScreenShare();
       }
     },
     /**
@@ -190,7 +491,8 @@ export default {
      * because they do no receive an app-message Daily event for their
      * own messages.
      */
-    sendMessage(text) {
+    sendMessage(text: string) {
+      if (!this.callObject) return;
       // Attach the local participant's username to the message to be displayed in ChatTile.vue
       const local = this.callObject.participants().local;
       const message = { message: text, name: local?.user_name || "Guest" };
@@ -199,11 +501,12 @@ export default {
     },
     // leave call, destroy call object, and reset local state values
     leaveAndCleanUp() {
+      if (!this.callObject) return;
       if (this.screen?.local) {
         this.callObject.stopScreenShare();
       }
       this.callObject.leave().then(() => {
-        this.callObject.destroy();
+        this.callObject?.destroy();
 
         this.participantWithScreenshare = null;
         this.screen = null;
@@ -211,7 +514,7 @@ export default {
       });
     },
   },
-};
+});
 </script>
 
 <style scoped>
@@ -269,4 +572,8 @@ p {
   padding: 8px 12px;
   cursor: pointer;
 }
+
+#video-call {
+  min-width: 50%;
+}
 </style>
diff --git a/src/components/VideoTile.vue b/src/components/VideoTile.vue
index b0b8048..6a8f652 100644
--- a/src/components/VideoTile.vue
+++ b/src/components/VideoTile.vue
@@ -4,7 +4,7 @@
       <track kind="captions" />
     </audio>
 
-    <template v-if="participant.video">
+    <template v-if="videoTrack">
       <video autoPlay muted playsInline :srcObject="videoSource"></video>
       <p class="participant-name">{{ username }}</p>
     </template>
@@ -13,38 +13,52 @@
       <no-video-tile :username="username"></no-video-tile>
     </template>
 
-    <template v-if="participant.local">
+    <template v-if="local">
       <call-controls
-        :handle-video-click="handleVideoClick"
+        :audio="audioTrack"
+        :disable-screen-share="disableScreenShare"
         :handle-audio-click="handleAudioClick"
         :handle-screenshare-click="handleScreenshareClick"
-        :participant="participant"
+        :handle-video-click="handleVideoClick"
         :leave-call="leaveCall"
-        :disable-screen-share="disableScreenShare"
+        :video="videoTrack"
       />
     </template>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import CallControls from "./CallControls.vue";
 import NoVideoTile from "./NoVideoTile.vue";
 
-export default {
+import { defineComponent } from "vue";
+
+interface VideoTileData {
+  audioSource: MediaStream | null;
+  videoSource: MediaStream | null;
+  username: string;
+}
+
+export default defineComponent({
   name: "VideoTile",
   components: {
     CallControls,
     NoVideoTile,
   },
   props: [
-    "participant",
+    "audioTrack",
+    "local",
+    "screen",
+    "sessionId",
+    "userName",
+    "videoTrack",
     "handleVideoClick",
     "handleAudioClick",
     "handleScreenshareClick",
     "leaveCall",
     "disableScreenShare",
   ],
-  data() {
+  data(): VideoTileData {
     return {
       videoSource: null,
       audioSource: null,
@@ -52,42 +66,33 @@ export default {
     };
   },
   mounted() {
-    this.username = this.participant?.user_name;
-    this.handleVideo(this.participant);
-    this.handleAudio(this.participant);
-  },
-  updated() {
-    this.username = this.participant?.user_name;
-    // For later optimization, this can be done more selectively
-    // using "track-started" and "track-stopped" events.
-    this.handleVideo(this.participant);
-    this.handleAudio(this.participant);
+    console.log("mounmted participant", );
+    this.handleVideo(this.videoTrack);
+    this.handleAudio(this.audioTrack, this.local);
   },
   methods: {
     // Add srcObject to video element
-    handleVideo() {
-      const p = this.participant;
+    handleVideo(videoTrack) {
 
       // If the participant has their video off,
       // early out.
-      if (!p?.video) return;
+      if (!videoTrack) return;
 
-      const track = p.tracks.video.persistentTrack;
-      const newStream = this.updateSource(this.videoSource, track);
+      const newStream = this.updateSource(this.videoSource, videoTrack);
       if (newStream) {
         this.videoSource = newStream;
       }
     },
 
     // Add srcObject to audio element
-    handleAudio() {
-      const p = this.participant;
+    handleAudio(audioTrack, local) {
+      console.log("handleAudio", audioTrack, local);
+
       // If the participant is local or has their audio off,
       // early out.
-      if (!p || p.local || !p.audio) return;
+      if (local || !audioTrack) return;
 
-      const track = p.tracks.audio.persistentTrack;
-      const newStream = this.updateSource(this.audioSource, track);
+      const newStream = this.updateSource(this.audioSource, audioTrack);
       if (newStream) {
         this.audioSource = newStream;
       }
@@ -118,7 +123,7 @@ export default {
       return null;
     },
   },
-};
+});
 </script>
 
 <style scoped>
diff --git a/src/main.js b/src/main.ts
similarity index 100%
rename from src/main.js
rename to src/main.ts
diff --git a/tsconfig.json b/tsconfig.json
index eee4c29..4fb7d52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,6 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json"
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "compilerOptions": {
+    "lib": ["ES2017"]
+  }
 }