fix: extra table headers in mobile option rows

assets/controllers/movie_results_controller.js

@@ -51,6 +51,7 @@ export default class extends Controller {
         let selectedCount = 0;
 
         this.options.forEach((option) => {
+            const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
             const props = {
                 "resolution": option.querySelector('#resolution').textContent.trim(),
                 "codec": option.querySelector('#codec').textContent.trim(),
@@ -62,6 +63,8 @@ export default class extends Controller {
             let include = true;
             option.classList.add('r-tablerow');
             option.classList.remove('hidden');
+            optionHeader.classList.add('r-tablerow');
+            optionHeader.classList.remove('hidden');
             option.querySelector('input[type="checkbox"]').checked = false;
 
             for (let [key, value] of Object.entries(activeFilter)) {
@@ -88,6 +91,8 @@ export default class extends Controller {
             if (false === include) {
                 option.classList.remove('r-tablerow');
                 option.classList.add('hidden');
+                optionHeader.classList.remove('r-tablerow');
+                optionHeader.classList.add('hidden');
             } else if (true === firstIncluded) {
                 count = 1;
                 selectedCount = selectedCount + 1;

assets/controllers/tv_results_controller.js

@@ -128,6 +128,7 @@ export default class extends Controller {
         let selectedCount = 0;
 
         this.options.forEach((option) => {
+            const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
             const props = {
                 "resolution": option.querySelector('#resolution').textContent.trim(),
                 "codec": option.querySelector('#codec').textContent.trim(),
@@ -138,6 +139,8 @@ export default class extends Controller {
             let include = true;
             option.classList.add('r-tablerow');
             option.classList.remove('hidden');
+            optionHeader.classList.add('r-tablerow');
+            optionHeader.classList.remove('hidden');
             option.querySelector('input[type="checkbox"]').checked = false;
 
             for (let [key, value] of Object.entries(activeFilter)) {
@@ -164,6 +167,8 @@ export default class extends Controller {
             if (false === include) {
                 option.classList.remove('r-tablerow');
                 option.classList.add('hidden');
+                optionHeader.classList.remove('r-tablerow');
+                optionHeader.classList.add('hidden');
             } else if (true === firstIncluded) {
                 count = 1;
                 selectedCount = selectedCount + 1;

src/Torrentio/Result/ResultFactory.php

@@ -21,7 +21,6 @@ class ResultFactory
         string $bingeGroup = "-"
     ) {
         $ptn = (object) (new PTN())->parse($title);
-//        dump($ptn);
         return new TorrentioResult(
             self::trimTitle($title),
             urldecode($url),
@@ -40,7 +39,8 @@ class ResultFactory
             $ptn->episode ?? "-",
             self::setLanguages($title),
             self::setLanguageFlags($title),
-            false
+            false,
+            uniqid()
         );
     }
 

src/Torrentio/Result/TorrentioResult.php

@@ -23,5 +23,6 @@ class TorrentioResult
         public ?array $languages = [],
         public ?string $languageFlags = "-",
         public ?bool $selected = false,
+        public ?string $localId = "-"
     ) {}
 }

templates/torrentio/movies.html.twig

@@ -2,7 +2,7 @@
     {% if results.file != false %}
     <div class="p-3 bg-stone-400 p-1 text-black rounded-md m-1 animate-fade">
         <p class="font-bold text-sm text-left">Existing file(s) for this movie:</p>
-        <ul class="list-disc ml-3">
+        <ul class="list-disc ml-3 overflow-scroll">
             <li class="font-normal">{{ results.file.realPath|strip_media_path }} &mdash; <strong>{{ results.file.size|filesize }}</strong></li>
         </ul>
     </div>

templates/torrentio/partial/option-table.html.twig

@@ -3,7 +3,7 @@
 >
     <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
     {% for result in results.results %}
-    <tr class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row border-b border-gray-500">
+    <tr data-option-id="{{ result.localId }}" class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row border-b border-gray-500">
         <th scope="col"
             class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
             Size
@@ -41,7 +41,7 @@
     </thead>
     <tbody class="flex-1 sm:flex-none">
     {% for result in results.results %}
-        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500" data-provider="{{ result.provider }}" data-quality="{{ result.quality }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
+        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500" data-local-id="{{ result.localId }}" data-provider="{{ result.provider }}" data-quality="{{ result.quality }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
             <td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                 {{ result.size }}
             </td>