feat(csfd): support for new csfd

bartholomej · Dec 23, 2020 · 4203fad · 4203fad
1 parent 37705b0
commit 4203fad
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 36 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -1,6 +1,8 @@
 $secondary-color: #999;
 $primary-color: #b01;
 
+$padding-x: 10px;
+
 .loader {
   display: block;
   text-align: center;
@@ -27,17 +29,36 @@ $primary-color: #b01;
   }
 
   .search-header {
-    text-align: center;
+    text-align: left;
     color: $secondary-color;
     margin-bottom: 5px;
+
+    p {
+      padding: $padding-x $padding-x 0;
+    }
+  }
+
+  &.old-csfd {
+    .search-header p {
+      padding: 0;
+    }
+    ul li {
+      border-bottom: none;
+      padding: 5px $padding-x;
+    }
   }
 
   ul {
     padding: 0;
   }
 
   li {
-    padding: 5px 10px;
+    padding: 12px $padding-x;
+    border-bottom: 1px solid #d2d2d2;
+
+    &:last-child {
+      border-bottom: none;
+    }
 
     &:hover {
       background: #ddd;
@@ -58,7 +79,7 @@ $primary-color: #b01;
     }
 
     .attr {
-      padding-right: 10px;
+      padding-right: $padding-x;
       word-break: break-all;
     }
   }
@@ -77,5 +98,5 @@ $primary-color: #b01;
 }
 
 #pg-web-film #tpb-search.ct-related {
-  margin-bottom: 10px;
+  margin-bottom: $padding-x;
 }
diff --git a/src/app.ts b/src/app.ts
@@ -4,6 +4,7 @@ import Accent from './services/accent';
 import Alternatives from './services/alternatives';
 import Cleaner from './services/cleaner';
 import Renderer from './services/renderer';
+import { isOldCsfd } from './services/utils';
 
 /**
  * @class CsfdMagnets
@@ -31,10 +32,16 @@ class CsfdMagnets {
   ) {
     const url = window.location.href.split('/');
     if (url[2].includes('csfd.cz') && url[3] === 'film') {
-      this.placingNode = document.querySelectorAll('#my-rating');
-      if (!this.placingNode.length) {
-        this.placingNode = document.querySelectorAll('#rating');
+      // New or old CSFD
+      if (isOldCsfd()) {
+        this.placingNode = document.querySelectorAll('#my-rating');
+        if (!this.placingNode.length) {
+          this.placingNode = document.querySelectorAll('#rating');
+        }
+      } else {
+        this.placingNode = document.querySelectorAll('.box-rating-container');
       }
+
       const pageTitle = document.title;
       this.searchMovie(pageTitle);
       this.altTitles = this.alternative.getAltTitles();

diff --git a/src/manifest-common.json b/src/manifest-common.json
@@ -10,28 +10,17 @@
     "48": "images/icon-48.png",
     "128": "images/icon-128.png"
   },
-  "permissions": [
-    "https://tpb.party/"
-  ],
+  "permissions": ["https://tpb.party/"],
   "content_scripts": [
     {
       "run_at": "document_end",
-      "matches": [
-        "http://www.csfd.cz/*",
-        "https://www.csfd.cz/*"
-      ],
-      "css": [
-        "app.css"
-      ],
-      "js": [
-        "app.bundle.js"
-      ]
+      "matches": ["http://www.csfd.cz/*", "https://www.csfd.cz/*", "https://new.csfd.cz/*"],
+      "css": ["app.css"],
+      "js": ["app.bundle.js"]
     }
   ],
   "background": {
-    "scripts": [
-      "background.bundle.js"
-    ]
+    "scripts": ["background.bundle.js"]
   },
   "manifest_version": 2
 }
diff --git a/src/services/renderer.ts b/src/services/renderer.ts
@@ -11,7 +11,7 @@
 import { TPBResult } from 'piratebay-scraper/interfaces';
 import { browserConfig } from '../../config/browser.config';
 import { Browser } from '../interfaces/interfaces';
-import { isDev } from '../services/utils';
+import { isDev, isOldCsfd } from '../services/utils';
 
 declare let BROWSER: Browser;
 
@@ -26,27 +26,26 @@ export default class Renderer {
   ): HTMLDivElement {
     const wrapper = document.createElement('div');
     wrapper.classList.add('tpb-wrapper');
+    const _ = chrome.i18n.getMessage;
 
-    const devFlag = isDev ? '&lt;dev/&gt;' : '';
+    const devFlag = isDev ? '<sup>&beta;</sup>' : '';
 
     const box = `
-      <div id="tpb-search" class="ct-related">
-        <div class="header">
-          <h3>${devFlag}${chrome.i18n.getMessage('magnets')}: <span class="note"><a href="${
+      <div id="tpb-search" class="ct-related box ${isOldCsfd() ? 'old-csfd' : ''}">
+        <div class="header box-header box-header-small">
+          <h3>${devFlag}${_('magnets')} <span class="note"><a href="${
       browserConfig[BROWSER].repoUrl
-    }" target="_blank">${chrome.i18n.getMessage('notOfficial')}</a></span></h3>
+    }" target="_blank">${_('notOfficial')}</a></span></h3>
           <div class="controls">
-            <a href="${searchUrl}" target="_blank" class="search-more edit private" title="Hledat">${chrome.i18n.getMessage(
+            <a href="${searchUrl}" target="_blank" class="search-more edit private" title="Hledat">${_(
       'search'
     )}</a>
           </div>
         </div>
-        <div class="content">
-          <!-- <div class="search-header search-state">${chrome.i18n.getMessage(
-            'searchingFor'
-          )}</a></div> -->
+        <div class="content box-content">
+          <!-- <div class="search-header search-state">${_('searchingFor')}</a></div> -->
           <div class="search-header search-term">
-            <strong>${movieTitle}</strong>
+            <p>${movieTitle}</p>
           </div>
 
           <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
@@ -87,7 +86,7 @@ export default class Renderer {
           <span class="not-found">
             ¯/\_(ツ)_/¯
             <div class="elsewhere text-center ">
-              <a href="https://ulozto.cz/hledej?q=${movieTitle}" target="_blank">${chrome.i18n.getMessage(
+              <a href="https://ulozto.cz/hledej?q=${movieTitle}" target="_blank">${_(
       'elsewhere'
     )}</a>
             </div>

diff --git a/src/services/utils.ts b/src/services/utils.ts
@@ -10,3 +10,9 @@
 
 export const isProd = process.env.NODE_ENV === 'production';
 export const isDev = process.env.NODE_ENV === 'development';
+
+export const isOldCsfd = (): boolean => {
+  const newBoxrating = document.querySelector('.box-rating-container');
+  const newMovieProfile = document.querySelector('.main-movie-profile');
+  return !(!!newBoxrating && !!newMovieProfile);
+};