Merge pull request #238 from adsuth/injection_fixes

Injection Fixes

src/lib/ActionElement.ts

@@ -1,7 +1,7 @@
 import { createAutoplaySwitch } from "./Autoplay";
 import { setPlaybackRate } from "./PlaybackRate";
-import { CYCLABLE_PLAYBACK_RATES } from "./declarations";
-import { StateObject, BooleanDictionary, PolyDictionary } from "./definitions";
+import { CYCLABLE_PLAYBACK_RATES, INJECTION_MARKER } from "./declarations";
+import { BooleanDictionary, PolyDictionary, StateObject } from "./definitions";
 import { getActionElement, getCurrentId, getTitle, getVideo } from "./getters";
 import { wheel } from "./utils";
 
@@ -15,8 +15,10 @@ export function populateActionElement(
   const actionElement = getActionElement();
   const ytShorts = getVideo();
 
-  if (!actionElement) throw new Error("Action element not found");
-  if (!ytShorts) throw new Error("Video not found");
+  if (!actionElement) return; // throw new Error("Action element not found");
+  if (!ytShorts) return; // throw new Error("Video not found");
+
+  actionElement.setAttribute(INJECTION_MARKER, ""); // ? set marker for injection checks
 
   // adsu- idk how any of this works so im just going to leave it be
   const betterYTContainer = document.createElement("div");

src/lib/Events.ts

@@ -5,8 +5,10 @@ import { getVideo } from "./getters";
 /**
  * Handle adding event listeners to existing elements.
  * For example, adds a double click event to the player to enter fullscreen mode
+ *
+ * Note that duplicate event listeners are ignored, so need need to check
  */
-export function injectEventsToExistingElements(options: PolyDictionary) {
+export function injectEvents(options: PolyDictionary) {
   const player: HTMLElement | null = getVideo();
 
   // double click the player to enter fullscreen mode

src/lib/Info.ts

@@ -1,33 +1,40 @@
 import { isVideoPlaying } from "./VideoState";
+import { INJECTION_MARKER } from "./declarations";
 import { BooleanDictionary } from "./definitions";
 import {
   getCurrentId,
+  getInfoElement,
   getOverlayElement,
   getUploadDate,
   getViews,
 } from "./getters";
 
 export function setInfo(features: BooleanDictionary) {
-  if (!isVideoPlaying()) throw new Error("Video not playing");
+  if (!isVideoPlaying()) return; // throw new Error("Video not playing");
 
-  const addInfo = () => {
-    const info = [];
-    if (features["viewCounter"]) {
-      const views = getViews().replace(/(\r\n|\n|\r)/gm, "");
-      if (views) info.push(views);
-    }
-    if (features["uploadDate"]) {
-      const uploadDate = getUploadDate().replace(/(\r\n|\n|\r)/gm, "");
-      if (uploadDate) info.push(uploadDate);
-    }
+  const overlayElement = getOverlayElement();
+  const h5 = document.createElement("h5");
+  h5.id = `bys-ytViews${getCurrentId()}`;
+  h5.setAttribute(INJECTION_MARKER, ""); // ? for injection checks
+  overlayElement.querySelector("reel-player-header-renderer h2")?.prepend(h5);
 
-    const overlayElement = getOverlayElement();
-    const h5 = document.createElement("h5");
-    h5.id = `ytViews${getCurrentId()}`;
-    h5.innerText = info.join(" | ");
-    overlayElement.querySelector("reel-player-header-renderer h2")?.prepend(h5);
-    clearInterval(views_interval);
-  };
+  updateInfo(features);
+}
+
+export function updateInfo(features: BooleanDictionary) {
+  const element = getInfoElement();
+  if (element === null) return;
+
+  const info = [];
+
+  if (features["viewCounter"]) {
+    const views = getViews().replace(/(\r\n|\n|\r)/gm, "");
+    if (views) info.push(views);
+  }
+  if (features["uploadDate"]) {
+    const uploadDate = getUploadDate().replace(/(\r\n|\n|\r)/gm, "");
+    if (uploadDate) info.push(uploadDate);
+  }
 
-  const views_interval = setInterval(addInfo, 100);
+  element.innerText = info.join(" | ");
 }

src/lib/InjectionHandling.ts

@@ -0,0 +1,77 @@
+import { populateActionElement } from "./ActionElement";
+import { setInfo } from "./Info";
+import { InjectionItemsEnum } from "./definitions";
+import { modifyProgressBar } from "./ProgressBar";
+import { setVolumeSlider } from "./VolumeSlider";
+import { INJECTION_MARKER } from "./declarations";
+import { BooleanDictionary, PolyDictionary, StateObject } from "./definitions";
+import {
+  getActionElement,
+  getCurrentId,
+  getInfoElement,
+  getProgressBarList,
+  getVolumeContainer,
+} from "./getters";
+
+export function injectItems(
+  state: StateObject,
+  settings: PolyDictionary,
+  options: PolyDictionary,
+  features: BooleanDictionary,
+) {
+  state.lastTime = -1;
+  const id = getCurrentId();
+  if (id === null) return;
+
+  const items = Object.values(InjectionItemsEnum);
+
+  items.map((item) =>
+    injectIfNotPresent(item, state, settings, options, features),
+  );
+}
+
+/**
+ * Returns true if the element has an injection marker (this should mean the item was injected)
+ * @param element The element that has the marker, generally on something with a getter function (like, say, getVideo())
+ */
+export function checkForInjectionMarker(element: Element | HTMLElement | null) {
+  return element !== null && element.hasAttribute(INJECTION_MARKER);
+}
+
+/**
+ * Switch case, checks if the given item was injected or not
+ * @param item
+ */
+function injectIfNotPresent(
+  item: string,
+  state: StateObject,
+  settings: PolyDictionary,
+  options: PolyDictionary,
+  features: BooleanDictionary,
+) {
+  switch (item) {
+    case InjectionItemsEnum.ACTION_ELEMENT:
+      if (!checkForInjectionMarker(getActionElement()))
+        populateActionElement(state, settings, features);
+      break;
+
+    case InjectionItemsEnum.PROGRESS_BAR:
+      if (!checkForInjectionMarker(getProgressBarList()))
+        modifyProgressBar(features["progressBar"]);
+      break;
+
+    case InjectionItemsEnum.VOLUME_SLIDER:
+      if (!checkForInjectionMarker(getVolumeContainer()))
+        setVolumeSlider(
+          state,
+          settings,
+          features["showVolumeHorizontally"],
+          features["volumeSlider"],
+        );
+      break;
+
+    case InjectionItemsEnum.INFO:
+      if (!checkForInjectionMarker(getInfoElement())) setInfo(features);
+      break;
+  }
+}