From 568fe141d92714a61ab59b5659f933ee14fb6136 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Thu, 13 Oct 2022 18:50:55 +0800
Subject: [PATCH 1/7] chore: Update to latest Vue version and build tools (#11)

* Update to vite, use latest vue tools

Remove comment

Update babel and package-lock

Fix lint issues

Fix lint issues

Fix prettier

Add github action

Test before building

* Lint ts files too

* Add tsconfig

Lint ts files too

Add tsconfig

Add tsconfig

Use vanilla js in Vue does not work

Still not working

Add console log for vue mounted

Gate off and blocked instead of playable

THIS WORKS.

Move div back into Vue. THIS WORKS

Fix spacing

Fix tsconfig remove edge cases

Remove comments

Remove video tile
---
 index.html                  |   2 +-
 src/components/CallTile.vue | 314 +++++++++++++++++++++++++++++++-----
 src/{main.js => main.ts}    |   0
 tsconfig.json               |   5 +-
 4 files changed, 275 insertions(+), 46 deletions(-)
 rename src/{main.js => main.ts} (100%)

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/CallTile.vue b/src/components/CallTile.vue
index 8a03c0b..7ee0805 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -26,16 +26,7 @@
             </template>
 
             <div v-if="participants" class="participants-container">
-              <template v-for="p in participants" :key="p.session_id">
-                <video-tile
-                  :participant="p"
-                  :handle-video-click="handleVideoClick"
-                  :handle-audio-click="handleAudioClick"
-                  :handle-screenshare-click="handleScreenshareClick"
-                  :leave-call="leaveAndCleanUp"
-                  :disable-screen-share="screen && !screen?.local"
-                />
-              </template>
+              <div id="video-call"></div>
 
               <template v-if="count === 1">
                 <waiting-card :url="roomUrl" />
@@ -50,34 +41,83 @@
   </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";
-import VideoTile from "./VideoTile.vue";
 import ScreenshareTile from "./ScreenshareTile.vue";
 import LoadingTile from "./LoadingTile.vue";
 import PermissionsErrorMsg from "./PermissionsErrorMsg.vue";
 
-export default {
+interface Participant {
+  session_id: string;
+  user_id: string;
+  user_name: string;
+  local: boolean;
+  video: boolean;
+  audio: boolean;
+  screen: boolean;
+}
+
+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,
     WaitingCard,
     ChatTile,
     ScreenshareTile,
     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 +138,209 @@ 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("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 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 tracks = this.getParticipantTracks(p.participant);
+        try {
+          this.updateMedia(p.participant.session_id, tracks);
+        } 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("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: {
+    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 +355,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 +365,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 +383,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 +398,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 +410,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 +420,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 +433,7 @@ export default {
       });
     },
   },
-};
+});
 </script>
 
 <style scoped>
@@ -269,4 +491,8 @@ p {
   padding: 8px 12px;
   cursor: pointer;
 }
+
+#video-call {
+  min-width: 50%;
+}
 </style>
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"]
+  }
 }

From 0b80a2d1e45883da6460d639c37657f751234bfe Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Mon, 24 Oct 2022 19:20:38 +0800
Subject: [PATCH 2/7] Use a ref

---
 src/components/CallTile.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index 7ee0805..43eb4d0 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -26,7 +26,7 @@
             </template>
 
             <div v-if="participants" class="participants-container">
-              <div id="video-call"></div>
+              <div id="video-call" ref="videoCall"></div>
 
               <template v-if="count === 1">
                 <waiting-card :url="roomUrl" />
@@ -196,9 +196,8 @@ export default defineComponent({
         participantID
       ) as HTMLVideoElement | null;
       if (!videoTile) {
-        const videoCall = document.getElementById(
-          "video-call"
-        ) as HTMLDivElement;
+        const videoCall = this.$refs.videoCall as HTMLVideoElement;
+        
         const newVideoTile = document.createElement("video");
         newVideoTile.id = participantID;
         videoCall.appendChild(newVideoTile);

From c14e9e7ef0a0efcaa7c5e0075ca67da5da71d66d Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Wed, 26 Oct 2022 14:30:42 +0800
Subject: [PATCH 3/7] Remove typescript

---
 index.html                  |   2 +-
 src/components/CallTile.vue | 105 +++++++++---------------------------
 src/{main.ts => main.js}    |   0
 3 files changed, 25 insertions(+), 82 deletions(-)
 rename src/{main.ts => main.js} (100%)

diff --git a/index.html b/index.html
index 9b16f2f..f7c14a7 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index 43eb4d0..cc86513 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -41,15 +41,10 @@
   </main>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from "vue";
 
-import daily, {
-  type DailyCall,
-  type DailyEventObjectAppMessage,
-  type DailyEventObjectFatalError,
-  type DailyParticipant,
-} from "@daily-co/daily-js";
+import daily from "@daily-co/daily-js";
 
 import WaitingCard from "./WaitingCard.vue";
 import ChatTile from "./ChatTile.vue";
@@ -57,36 +52,7 @@ import ScreenshareTile from "./ScreenshareTile.vue";
 import LoadingTile from "./LoadingTile.vue";
 import PermissionsErrorMsg from "./PermissionsErrorMsg.vue";
 
-interface Participant {
-  session_id: string;
-  user_id: string;
-  user_name: string;
-  local: boolean;
-  video: boolean;
-  audio: boolean;
-  screen: boolean;
-}
-
-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",
@@ -111,7 +77,7 @@ export default defineComponent({
       required: true,
     },
   },
-  data(): CallTileData {
+  data() {
     return {
       callObject: null,
       participants: [],
@@ -190,13 +156,13 @@ export default defineComponent({
       });
   },
   methods: {
-    updateMedia(participantID: string, newTracks: Tracks) {
+    updateMedia(participantID, newTracks) {
       // Get the video tag.
       let videoTile = document.getElementById(
         participantID
-      ) as HTMLVideoElement | null;
+      );
       if (!videoTile) {
-        const videoCall = this.$refs.videoCall as HTMLVideoElement;
+        const videoCall = this.$refs.videoCall;
         
         const newVideoTile = document.createElement("video");
         newVideoTile.id = participantID;
@@ -207,7 +173,7 @@ export default defineComponent({
       const video = videoTile;
 
       // Get existing MediaStream from the video tag source object.
-      const existingStream = video.srcObject as MediaStream;
+      const existingStream = video.srcObject;
 
       const newVideo = newTracks.videoTrack;
       const newAudio = newTracks.audioTrack;
@@ -217,7 +183,7 @@ export default defineComponent({
       // This will happen if this is the first time we're
       // setting the tracks.
       if (!existingStream || existingStream.getTracks().length === 0) {
-        const tracks: MediaStreamTrack[] = [];
+        const tracks = [];
         if (newVideo) tracks.push(newVideo);
         if (newAudio) tracks.push(newAudio);
         const newStream = new MediaStream(tracks);
@@ -252,9 +218,9 @@ export default defineComponent({
       }
     },
     refreshAudioTrack(
-      existingStream: MediaStream,
-      newAudioTrack: MediaStreamTrack | null
-    ): boolean {
+      existingStream,
+      newAudioTrack
+    ) {
       // If there is no new track, just early out
       // and keep the old track on the stream as-is.
       if (!newAudioTrack) return false;
@@ -262,9 +228,9 @@ export default defineComponent({
       return this.refreshTrack(existingStream, existingTracks, newAudioTrack);
     },
     refreshVideoTrack(
-      existingStream: MediaStream,
-      newVideoTrack: MediaStreamTrack | null
-    ): boolean {
+      existingStream,
+      newVideoTrack
+    ) {
       // If there is no new track, just early out
       // and keep the old track on the stream as-is.
       if (!newVideoTrack) return false;
@@ -272,10 +238,10 @@ export default defineComponent({
       return this.refreshTrack(existingStream, existingTracks, newVideoTrack);
     },
     refreshTrack(
-      existingStream: MediaStream,
-      oldTracks: MediaStreamTrack[],
-      newTrack: MediaStreamTrack
-    ): boolean {
+      existingStream,
+      oldTracks,
+      newTrack
+    ) {
       const trackCount = oldTracks.length;
       // If there is no matching old track,
       // just add the new track.
@@ -298,7 +264,7 @@ export default defineComponent({
       }
       return false;
     },
-    playMedia(video: HTMLVideoElement) {
+    playMedia(video) {
       const isPlaying =
         !video.paused &&
         !video.ended &&
@@ -315,8 +281,8 @@ export default defineComponent({
         console.warn("Failed to play media.", e);
       });
     },
-    getParticipantTracks(p: DailyParticipant) {
-      const mediaTracks: Tracks = {
+    getParticipantTracks(p) {
+      const mediaTracks = {
         videoTrack: null,
         audioTrack: null,
       };
@@ -340,37 +306,14 @@ export default defineComponent({
       }
       return mediaTracks;
     },
-    /**
-     * This is called any time a participant update registers.
-     * In large calls, this should be optimized to avoid re-renders.
-     * For example, track-started and track-stopped can be used
-     * to register only video/audio/screen track changes.
-     */
-    updateParticpants(e) {
-      console.log("[EVENT] ", e);
-      if (!this.callObject) return;
-
-      const p = this.callObject.participants();
-      this.count = Object.values(p).length;
-      this.participants = Object.values(p);
-
-      const screen = this.participants.filter((pa) => pa.screenVideoTrack);
-      if (screen?.length && !this.screen) {
-        console.log("[SCREEN]", screen);
-        this.screen = screen[0];
-      } else if (!screen?.length && this.screen) {
-        this.screen = null;
-      }
-      this.loading = false;
-    },
     // Add chat message to local message array
-    updateMessages(e: DailyEventObjectAppMessage<any> | undefined) {
+    updateMessages(e) {
       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: DailyEventObjectFatalError | undefined) {
+    handleError(e) {
       if (!e) return;
       console.log("[ERROR] ", e);
       this.error = e.errorMsg;
@@ -409,7 +352,7 @@ export default defineComponent({
      * because they do no receive an app-message Daily event for their
      * own messages.
      */
-    sendMessage(text: string) {
+    sendMessage(text) {
       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;
diff --git a/src/main.ts b/src/main.js
similarity index 100%
rename from src/main.ts
rename to src/main.js

From 45e48da02aa58298eb52612435d7fbf13b453726 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Thu, 10 Nov 2022 12:47:57 +0800
Subject: [PATCH 4/7] Fix spacing

---
 src/components/CallTile.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index cc86513..990bdad 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -52,8 +52,6 @@ import ScreenshareTile from "./ScreenshareTile.vue";
 import LoadingTile from "./LoadingTile.vue";
 import PermissionsErrorMsg from "./PermissionsErrorMsg.vue";
 
-
-
 export default defineComponent({
   name: "CallTile",
   components: {

From c2094324b61302b237a0537ef550b31efdf95fe3 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Wed, 30 Nov 2022 10:42:04 +0100
Subject: [PATCH 5/7] Update src/components/CallTile.vue

Co-authored-by: Jayne Mast <mast.jayne@gmail.com>
---
 src/components/CallTile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index 990bdad..6f07b49 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -308,7 +308,7 @@ export default defineComponent({
     updateMessages(e) {
       if (!e) return;
       console.log("[MESSAGE] ", e.data);
-      this.messages.push(e?.data);
+      this.messages.push(e.data);
     },
     // Show local error in UI when daily-js reports an error
     handleError(e) {

From 863376e6537f18c1903871884baba1c48b23a5d6 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Wed, 30 Nov 2022 10:42:54 +0100
Subject: [PATCH 6/7] Update src/components/CallTile.vue

Co-authored-by: Jayne Mast <mast.jayne@gmail.com>
---
 src/components/CallTile.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index 6f07b49..bb764b8 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -195,8 +195,7 @@ export default defineComponent({
 
       // 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);
+      let 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

From c6a5a44ee7375611324b21d8b5495824f3ddf647 Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Wed, 30 Nov 2022 10:46:56 +0100
Subject: [PATCH 7/7] Rename variables

---
 src/components/CallTile.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/CallTile.vue b/src/components/CallTile.vue
index bb764b8..cc64b0a 100644
--- a/src/components/CallTile.vue
+++ b/src/components/CallTile.vue
@@ -287,18 +287,18 @@ export default defineComponent({
       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;
+      const videoTrack = tracks.video;
+      const videoState = videoTrack?.state;
+      if (videoTrack.persistentTrack && !(videoState === "off" || videoState === "blocked")) {
+        mediaTracks.videoTrack = videoTrack.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;
+        const audioTrack = tracks.audio;
+        const audioState = audioTrack?.state;
+        if (audioTrack.persistentTrack && !(audioState === "off" || audioState === "blocked")) {
+          mediaTracks.audioTrack = audioTrack.persistentTrack;
         }
       }
       return mediaTracks;