From 7f4c46f09a28fe767a3bb0676a41021d3ca4d211 Mon Sep 17 00:00:00 2001
From: Andrea De Masi <andreademasi80@gmail.com>
Date: Sat, 18 Mar 2023 13:29:07 +0100
Subject: [PATCH] Added automatic injection

---
 src/background/messages/shouldInject.ts | 15 +++++++++++++
 src/content-script.ts                   | 23 +++-----------------
 src/contents/autoInject.ts              | 28 +++++++++++++++++++++++++
 src/utils/index.ts                      |  3 +++
 4 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 src/background/messages/shouldInject.ts
 create mode 100644 src/contents/autoInject.ts
 create mode 100644 src/utils/index.ts

diff --git a/src/background/messages/shouldInject.ts b/src/background/messages/shouldInject.ts
new file mode 100644
index 0000000..5291d0a
--- /dev/null
+++ b/src/background/messages/shouldInject.ts
@@ -0,0 +1,15 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+import type { RoomsList } from "~utils/rooms"
+import { Storage } from "@plasmohq/storage"
+import browser from "webextension-polyfill"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true })
+
+  const storage = new Storage({ area: "local" })
+  const rooms = await storage.get<RoomsList>("rooms")
+  if (tabs[0].id && rooms[tabs[0].id]) res.send(true)
+  res.send(false)
+}
+
+export default handler
diff --git a/src/content-script.ts b/src/content-script.ts
index 4fe3c0b..64e7c90 100644
--- a/src/content-script.ts
+++ b/src/content-script.ts
@@ -6,14 +6,10 @@ import { Storage } from "@plasmohq/storage"
 import { VIDEO_EVENTS } from "~types/video"
 import browser from "webextension-polyfill"
 import debounce from "lodash.debounce"
+import { hasVideos } from "~utils"
 import { io } from "socket.io-client"
 import { sendToBackground } from "@plasmohq/messaging"
 
-const checkVideosInPage = () => {
-  return document.getElementsByTagName("video").length > 0
-}
-let hasVideos = checkVideosInPage()
-
 const bootstrap = () => {
   let tabId: number
   let roomCode: string | undefined
@@ -51,7 +47,6 @@ const bootstrap = () => {
   }
 
   const observer = new MutationObserver(() => {
-    hasVideos = checkVideosInPage()
     if (!video) getVideo()
   })
 
@@ -138,17 +133,6 @@ const bootstrap = () => {
     }
   })
 
-  // To be used when automatic detection doesn't work
-  /*
-const handleVideoDetectManually = (ev: Event) => {
-  const target = ev.target as Element
-  video = target.closest("video") as HTMLVideoElement
-  if (video != null) {
-    document.removeEventListener("click", handleVideoDetectManually)
-  }
-}
-*/
-
   socket.on(
     SOCKET_EVENTS.VIDEO_EVENT,
     (eventType: VIDEO_EVENTS, volumeValue: string, currentTime: string) => {
@@ -182,12 +166,11 @@ declare global {
 if (window.synclify !== true) {
   window.synclify = true
 
-  if (hasVideos) {
+  if (hasVideos()) {
     bootstrap()
   } else {
     const observer = new MutationObserver(() => {
-      hasVideos = checkVideosInPage()
-      if (hasVideos) {
+      if (hasVideos()) {
         observer.disconnect()
         bootstrap()
       }
diff --git a/src/contents/autoInject.ts b/src/contents/autoInject.ts
new file mode 100644
index 0000000..233a321
--- /dev/null
+++ b/src/contents/autoInject.ts
@@ -0,0 +1,28 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { sendToBackground } from "@plasmohq/messaging"
+// this cs reinjects automatically the main logic if a room has been created and no vides were found
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"],
+  all_frames: true
+}
+
+const observer = new MutationObserver((mutations) => {
+  // check to reinject only if videos or iframes are added
+  if (
+    mutations.some((mut) =>
+      Array.from(mut.addedNodes).some((node) =>
+        ["VIDEO", "IFRAME"].includes(node.nodeName)
+      )
+    )
+  ) {
+    console.log("injecting again")
+    sendToBackground({ name: "shouldInject" }).then((res: boolean) => {
+      console.log("shouldInject", res)
+      if (res) sendToBackground({ name: "inject" })
+    })
+  }
+})
+
+observer.observe(document, { subtree: true, childList: true })
+
+export {}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..a6890c1
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+export const hasVideos = () => {
+  return document.getElementsByTagName("video").length > 0
+}
\ No newline at end of file