Add Kinopoisk streaming service

manifest.ts

@@ -29,6 +29,7 @@ const manifest: chrome.runtime.ManifestV3 = {
         "https://app.plex.tv/*",
         "https://plex.ukrapka.tech/*",
         "https://www.udemy.com/course/*/learn/lecture/*",
+        "https://hd.kinopoisk.ru/*",
       ],
       js: ["src/pages/content/index.js"],
       css: ["assets/css/contentStyle<KEY>.chunk.css"],

src/assets/style/content/global.scss

@@ -336,3 +336,22 @@
     display: none !important;
   }
 }
+
+.es-kinopoisk {
+  #es {
+    bottom: 200px;
+  }
+
+  .es-settings-icon {
+    svg {
+      width: 36px;
+      color: #fff;
+    }
+  }
+}
+
+.es-kinopoisk.es-enabled {
+  div[data-tid="SubtitlesPortalRoot"] {
+    display: none !important;
+  }
+}

src/streamings/kinopoisk.ts

@@ -0,0 +1,97 @@
+import { esRenderSetings } from "@src/models/settings";
+import Service from "./service";
+import { parse } from "subtitle";
+import { esSubsChanged, rawSubsAdded } from "@src/models/subs";
+import { $video } from "@src/models/videos";
+
+class Kinopoisk implements Service {
+  constructor() {
+    waitForElement('[data-tid="SettingPopupButton"]', () => {
+      esRenderSetings();
+    });
+  }
+
+  public init(): void {
+    $video.watch((video) => {
+      if (video) {
+        esSubsChanged("en");
+
+        waitForElement('div[data-tid="SubtitlesPortalRoot"]', () => {
+          const subtitleSource = document.querySelector('div[data-tid="SubtitlesPortalRoot"]');
+          console.log("+++++++++++++video found", subtitleSource);
+          const videoElement = document.querySelector("video");
+          const subtitleObserver = new MutationObserver(() => {
+            console.log("+++++++++++++++++");
+
+            const subtitleParts = subtitleSource.querySelectorAll("div[class*='Subtitles_text']");
+            console.log("subtitleSource", subtitleSource);
+            console.log("subtitleParts", subtitleParts);
+
+            const subtitleContent = [...subtitleParts].map((el) => getText(el)).join("\n");
+            console.log("subtitleContent", subtitleContent);
+            const startTime = videoElement.currentTime;
+            const captions = [
+              {
+                start: startTime * 1000,
+                end: (startTime + 100) * 1000,
+                text: subtitleContent,
+              },
+            ];
+            rawSubsAdded(captions);
+          });
+          subtitleObserver.observe(subtitleSource, { childList: true, subtree: true });
+        });
+      }
+    });
+  }
+
+  public async getSubs(title: string) {
+    return parse("");
+  }
+
+  public getSubsContainer() {
+    const selector = document.querySelector("div[class*='styles_controlsLayer']");
+    if (selector === null) throw new Error("Subtitles container not found");
+    return selector as HTMLElement;
+  }
+
+  public getSettingsButtonContainer() {
+    const selector = document.querySelector('[data-tid="SettingPopupButton"]');
+    if (selector === null) throw new Error("Settings button container not found");
+    return selector as HTMLElement;
+  }
+
+  public getSettingsContentContainer() {
+    const selector = document.querySelector("yaplayertag");
+    if (selector === null) throw new Error("Settings content container not found");
+    return selector as HTMLElement;
+  }
+
+  public isOnFlight() {
+    return true;
+  }
+}
+
+function getText(node: ChildNode) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent;
+  }
+  if (node.nodeName === "BR") {
+    return "\n";
+  }
+
+  const result = [...node.childNodes].map((el) => getText(el)).join("");
+  return result;
+}
+
+function waitForElement(selector, callBack) {
+  window.setTimeout(function () {
+    if (document.querySelector(selector)) {
+      callBack();
+    } else {
+      waitForElement(selector, callBack);
+    }
+  }, 300);
+}
+
+export default Kinopoisk;

src/utils/getCurrentService.ts

@@ -7,6 +7,7 @@ import Service from "@src/streamings/service";
 import ServiceStub from "@src/streamings/serviceStub";
 import Plex from "@src/streamings/plex";
 import Udemy from "@src/streamings/udemy";
+import Kinopoisk from "@src/streamings/kinopoisk";
 
 export const getCurrentService = (): Service => {
   const titleContent = document.querySelector("title")?.textContent;
@@ -29,18 +30,21 @@ export const getCurrentService = (): Service => {
   if (window.location.host === "www.udemy.com" || titleContent?.includes("Udemy")) {
     return new Udemy();
   }
-  if (titleContent?.includes("Кинопаб") || document.querySelector('meta[content="Кинопаб"]') != null) {
+  if (
+    titleContent?.includes("Кинопаб") ||
+    document.querySelector('meta[content="Кинопаб"]') != null ||
+    window.location.host === "moviesjoy.is"
+  ) {
     document.querySelector("html")?.setAttribute("id", "kinopub");
     return new KinoPub();
   }
-  // if (titleContent?.includes('English-With-Fun') || window.location.host === 'english-with-fun.com') {
-  //   document.querySelector('html')?.setAttribute('id', 'english-with-fun')
-  //   return 'englishwithfun'
-  // }
   if (titleContent?.includes("Coursera") || window.location.host === "www.coursera.org") {
     document.querySelector("html")?.setAttribute("id", "coursera");
     return new Coursera();
   }
+  if (window.location.host === "hd.kinopoisk.ru") {
+    return new Kinopoisk();
+  }
 
   return new ServiceStub();
 };