refactor code (#56)

app/src/modules/background/index.ts → app/src/background/index.ts

@@ -1,4 +1,5 @@
-import { getConfig, DEFAULT_CONFIG } from "../../store/";
+import DEFAULT_CONFIG from "../extension.config";
+import getExtensionConfig from "../lib/getExtensionConfig";
 import {
   type WebAppContext,
   getWebAppContext,
@@ -26,7 +27,7 @@ chrome.runtime.onInstalled.addListener(
 chrome.webNavigation.onCompleted.addListener(async (details) => {
   const tabId = details.tabId;
   const webAppContext: WebAppContext = await getWebAppContext(details.url);
-  const config = await getConfig();
+  const config = await getExtensionConfig();
   const isExtensionEnabled = config.globalSettings.isExtensionEnabled;
 
   if (!webAppContext.isSupported || !isExtensionEnabled) return;
@@ -36,7 +37,7 @@ chrome.webNavigation.onCompleted.addListener(async (details) => {
 chrome.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
   const tabId = details.tabId;
   const webAppContext: WebAppContext = await getWebAppContext(details.url);
-  const config = await getConfig();
+  const config = await getExtensionConfig();
   const isExtensionEnabled = config.globalSettings.isExtensionEnabled;
 
   if (!webAppContext.isSupported || !isExtensionEnabled) return;

app/src/background/parsers/parseUdemyContext.ts

@@ -0,0 +1,60 @@
+import { type UdemyConfig } from "../../content_scripts/webApps/udemy/webApp.config";
+import getWebAppConfig from "../../lib/getWebAppConfig";
+import { type SupportedWebAppContext } from "../webAppContext";
+
+export interface UdemyLearnContext extends SupportedWebAppContext {
+  contextData: {
+    webAppURL: URL;
+    activeRoute: "learn";
+    payload: UdemyLecture;
+  };
+}
+
+export interface UdemyLecture {
+  lectureID: string;
+  courseName: string;
+}
+
+export type UdemyContext = UdemyLearnContext | SupportedWebAppContext;
+
+export default async function parseUdemyContext(
+  webAppURL: URL,
+): Promise<UdemyContext> {
+  const udemyConfig = (await getWebAppConfig("udemy")) as UdemyConfig;
+
+  if (!udemyConfig) {
+    throw new Error("Udemy configuration not found.");
+  }
+
+  const lectureRouteRegex =
+    /https:\/\/www\.udemy\.com\/course\/([a-zA-Z0-9-]+)\/learn\/lecture\/(\d+)/;
+  const match = lectureRouteRegex.exec(webAppURL.href);
+
+  if (match !== null) {
+    const lectureID = match[2];
+    const courseName = match[1];
+    const context: UdemyContext = {
+      isSupported: true,
+      appName: "udemy",
+      webAppConfig: udemyConfig,
+      contextData: {
+        webAppURL,
+        activeRoute: "learn",
+        payload: {
+          lectureID,
+          courseName,
+        },
+      },
+    };
+    return context;
+  }
+
+  return {
+    isSupported: true,
+    appName: "udemy",
+    webAppConfig: udemyConfig,
+    contextData: {
+      webAppURL,
+    },
+  };
+}

app/src/modules/background/webAppContextParsers/parseYouTubeContext.ts → app/src/background/parsers/parseYouTubeContext.ts

@@ -1,5 +1,6 @@
+import { YouTubeConfig } from "../../content_scripts/webApps/youtube/webApp.config";
+import getWebAppConfig from "../../lib/getWebAppConfig";
 import { type SupportedWebAppContext } from "../webAppContext";
-import { getWorkerConfig, type YouTubeWorkerConfig } from "../../../store/";
 
 export interface YouTubeWatchContext extends SupportedWebAppContext {
   contextData: {
@@ -46,12 +47,10 @@ export type YouTubeContext =
 export default async function parseYoutubeContext(
   webAppURL: URL,
 ): Promise<YouTubeContext> {
-  const youtubeWorkerConfig = (await getWorkerConfig(
-    "youtube",
-  )) as YouTubeWorkerConfig;
+  const youtubeConfig = (await getWebAppConfig("youtube")) as YouTubeConfig;
 
-  if (!youtubeWorkerConfig) {
-    throw new Error("YouTube worker configuration not found.");
+  if (!youtubeConfig) {
+    throw new Error("YouTube configuration not found.");
   }
 
   switch (webAppURL.pathname) {
@@ -61,7 +60,7 @@ export default async function parseYoutubeContext(
         return {
           isSupported: true,
           appName: "youtube",
-          workerConfig: youtubeWorkerConfig,
+          webAppConfig: youtubeConfig,
           contextData: {
             webAppURL,
             activeRoute: "playlist",
@@ -80,7 +79,7 @@ export default async function parseYoutubeContext(
         return {
           isSupported: true,
           appName: "youtube",
-          workerConfig: youtubeWorkerConfig,
+          webAppConfig: youtubeConfig,
           contextData: {
             webAppURL,
             activeRoute: "watch",
@@ -99,7 +98,7 @@ export default async function parseYoutubeContext(
         return {
           isSupported: true,
           appName: "youtube",
-          workerConfig: youtubeWorkerConfig,
+          webAppConfig: youtubeConfig,
           contextData: {
             webAppURL,
             activeRoute: "shorts",
@@ -115,7 +114,7 @@ export default async function parseYoutubeContext(
   return {
     isSupported: true,
     appName: "youtube",
-    workerConfig: youtubeWorkerConfig,
+    webAppConfig: youtubeConfig,
     contextData: {
       webAppURL,
     },

app/src/background/webAppContext.ts

@@ -0,0 +1,55 @@
+import { WebAppConfig } from "../lib/getWebAppConfig";
+import webAppContextParser from "./parsers";
+
+export interface UnSupportedWebAppContext {
+  isSupported: false;
+  appName: null;
+}
+
+export interface SupportedWebAppContext {
+  isSupported: true;
+  appName: string;
+  webAppConfig: WebAppConfig;
+  contextData: {
+    webAppURL: URL;
+    activeRoute?: string;
+    payload?: ContextPayload | ContextPayload[];
+    [key: string]: any;
+  };
+}
+
+export interface ContextPayload {
+  [key: string]: any;
+}
+
+export type WebAppContext = UnSupportedWebAppContext | SupportedWebAppContext;
+
+export const getWebAppContext = async (
+  href: string,
+): Promise<WebAppContext> => {
+  const webAppURL = new URL(href);
+  const origin = webAppURL.origin;
+
+  switch (origin) {
+    case "https://www.youtube.com": {
+      return await webAppContextParser.YouTube(webAppURL);
+    }
+    case "https://www.udemy.com": {
+      return await webAppContextParser.Udemy(webAppURL);
+    }
+    default: {
+      const webAppContext: WebAppContext = {
+        appName: null,
+        isSupported: false,
+      };
+      return webAppContext;
+    }
+  }
+};
+
+export const dispatchWebAppContext = async (
+  tabId: number,
+  webAppContext: SupportedWebAppContext,
+): Promise<void> => {
+  return await chrome.tabs.sendMessage(tabId, webAppContext);
+};

app/src/modules/content_scripts/index.ts → app/src/content_scripts/index.ts

@@ -1,34 +1,31 @@
 import { type SupportedWebAppContext } from "../background/webAppContext";
-import {
-  type YouTubeContext,
-  type UdemyContext,
-} from "../background/webAppContextParsers";
+import { type YouTubeContext, type UdemyContext } from "../background/parsers";
 
 async function runApp(
   webAppContext: SupportedWebAppContext,
 ): Promise<undefined> {
   const {
     appName,
-    workerConfig: {
-      generalSettings: { isEnabled: isWorkerEnabled },
+    webAppConfig: {
+      generalSettings: { isEnabled: isWebAppEnabled },
     },
   } = webAppContext;
-  if (isWorkerEnabled) {
+  if (isWebAppEnabled) {
     switch (appName) {
       case "youtube": {
         const youtubeContext = webAppContext as YouTubeContext;
-        const { default: runYouTubeWorker } = await import(
-          /* webpackIgnore: true */ chrome.runtime.getURL("workers/youtube.js")
+        const { default: runYouTube } = await import(
+          /* webpackIgnore: true */ chrome.runtime.getURL("webApps/youtube.js")
         );
-        void runYouTubeWorker(youtubeContext);
+        void runYouTube(youtubeContext);
         break;
       }
       case "udemy": {
         const udemyContext = webAppContext as UdemyContext;
-        const { default: runUdemyWorker } = await import(
-          /* webpackIgnore: true */ chrome.runtime.getURL("workers/udemy.js")
+        const { default: runUdemy } = await import(
+          /* webpackIgnore: true */ chrome.runtime.getURL("webApps/udemy.js")
         );
-        void runUdemyWorker(udemyContext);
+        void runUdemy(udemyContext);
         break;
       }
     }

app/src/content_scripts/webApps/udemy/index.ts

@@ -0,0 +1,21 @@
+import { type UdemyContext } from "../../../background/parsers";
+import { type UdemyLearnContext } from "../../../background/parsers/parseUdemyContext";
+import runLearn from "./routes/learn";
+import { UdemyConfig } from "./webApp.config";
+
+const runUdemy = async (context: UdemyContext): Promise<void> => {
+  const { activeRoute } = context.contextData;
+  const webAppConfig = context.webAppConfig as UdemyConfig;
+
+  switch (activeRoute) {
+    case "learn": {
+      const isLearnEnabled = webAppConfig.routes.learn.isEnabled;
+      isLearnEnabled && (await runLearn(context as UdemyLearnContext));
+      break;
+    }
+    default:
+      break;
+  }
+};
+
+export default runUdemy;

app/src/modules/content_scripts/workers/udemy/routes/learn/index.ts → app/src/content_scripts/webApps/udemy/routes/learn/index.ts

@@ -1,11 +1,11 @@
-import loadElement from "../../../../lib/loadElement";
 import ForgeDOM from "../../forgeDOM";
 import { type UdemyPlayer } from "./interfaces";
 import {
   type UdemyLearnContext,
   type UdemyLecture,
-} from "../../../../../background/webAppContextParsers/parseUdemyContext";
-import { type UdemyWorkerConfig } from "../../config";
+} from "../../../../../background/parsers//parseUdemyContext";
+import { UdemyConfig } from "../../webApp.config";
+import loadElement from "../../../../../lib/loadElement";
 
 let toggleSpeedShortcut: string;
 let seekBackwardShortcut: string;
@@ -30,7 +30,7 @@ let customSpeedButton: HTMLLIElement;
 const addLearnToppings = async (context: UdemyLearnContext): Promise<void> => {
   const { lectureID, courseName } = context.contextData.payload;
   const { isEnabled, keybindings, preferences } = (
-    context.workerConfig as UdemyWorkerConfig
+    context.webAppConfig as UdemyConfig
   ).routes.learn;
   toggleSpeedShortcut = keybindings.toggleSpeedShortcut;
   seekBackwardShortcut = keybindings.seekBackwardShortcut;

app/src/modules/content_scripts/workers/udemy/routes/learn/interfaces.ts → app/src/content_scripts/webApps/udemy/routes/learn/interfaces.ts

@@ -1,4 +1,4 @@
-import { UdemyLecture } from "../../../../../background/webAppContextParsers/parseUdemyContext";
+import { UdemyLecture } from "../../../../../background/parsers//parseUdemyContext";
 export type UdemyPlayer = {
   videoElement: HTMLVideoElement;
   playbackRate: string | number;

app/src/modules/content_scripts/workers/udemy/config.ts → app/src/content_scripts/webApps/udemy/webApp.config.ts

@@ -1,6 +1,6 @@
-import { type WorkerConfig } from "../../../../store/";
+import { WebAppConfig } from "../../../lib/getWebAppConfig";
 
-const udemyWorkerConfig = {
+const udemyConfig = {
   generalSettings: {
     isEnabled: true as boolean,
   },
@@ -34,7 +34,7 @@ const udemyWorkerConfig = {
       },
     },
   },
-} satisfies WorkerConfig;
+} satisfies WebAppConfig;
 
-export type UdemyWorkerConfig = typeof udemyWorkerConfig;
-export default udemyWorkerConfig;
+export type UdemyConfig = typeof udemyConfig;
+export default udemyConfig;

app/src/content_scripts/webApps/youtube/index.ts

@@ -0,0 +1,39 @@
+import type {
+  YouTubeContext,
+  YouTubePlaylistContext,
+  YouTubeWatchContext,
+  YouTubeShortsContext,
+} from "../../../background/parsers//parseYouTubeContext";
+import runWatch from "./routes/watch";
+import runPlaylist from "./routes/playlist";
+import runShorts from "./routes/shorts";
+import { YouTubeConfig } from "./webApp.config";
+import "./global.css";
+
+const runYouTube = async (context: YouTubeContext): Promise<void> => {
+  const { activeRoute } = context.contextData;
+  const webAppConfig = context.webAppConfig as YouTubeConfig;
+
+  switch (activeRoute) {
+    case "watch": {
+      const isWatchEnabled = webAppConfig.routes.watch.isEnabled;
+      isWatchEnabled && (await runWatch(context as YouTubeWatchContext));
+      break;
+    }
+    case "playlist": {
+      const isPlaylistEnabled = webAppConfig.routes.playlist.isEnabled;
+      isPlaylistEnabled &&
+        (await runPlaylist(context as YouTubePlaylistContext));
+      break;
+    }
+    case "shorts": {
+      const isShortsEnabled = webAppConfig.routes.shorts.isEnabled;
+      isShortsEnabled && (await runShorts(context as YouTubeShortsContext));
+      break;
+    }
+    default:
+      break;
+  }
+};
+
+export default runYouTube;

app/src/modules/content_scripts/workers/youtube/routes/playlist/addMetadataToppings.ts → app/src/content_scripts/webApps/youtube/routes/playlist/addMetadataToppings.ts

@@ -1,7 +1,7 @@
 import { createMetadataSection, createSectionItem } from "../../common/dom";
 import fetchYouTubeToppings from "../../utils/fetchYouTubeToppings";
-import { formatRuntime } from "../../../../lib/formatRuntime";
 import { type YouTubePlaylistMetadata } from "../../common/interfaces";
+import { formatRuntime } from "../../../../../lib/formatRuntime";
 
 const addMetadataToppings = async (playlistID: string): Promise<void> => {
   const metadataActionBar = document.querySelector(

app/src/modules/content_scripts/workers/youtube/routes/playlist/index.ts → app/src/content_scripts/webApps/youtube/routes/playlist/index.ts

@@ -1,11 +1,9 @@
-import { YouTubePlaylistContext } from "../../../../../background/webAppContextParsers/parseYouTubeContext";
-import loadElement from "../../../../lib/loadElement";
+import { YouTubePlaylistContext } from "../../../../../background/parsers//parseYouTubeContext";
+import loadElement from "../../../../../lib/loadElement";
 import addMetadataToppings from "./addMetadataToppings";
 import "./index.css";
 
-const runPlaylistWorker = async (
-  context: YouTubePlaylistContext,
-): Promise<void> => {
+const runPlaylist = async (context: YouTubePlaylistContext): Promise<void> => {
   const { playlistID } = context.contextData.payload;
   const metadataActionBar = await loadElement(
     ".metadata-action-bar",
@@ -17,4 +15,4 @@ const runPlaylistWorker = async (
   }
 };
 
-export default runPlaylistWorker;
+export default runPlaylist;