home/torsearch
1
0
Fork 0
Code Issues 22 Pull Requests 1 Actions 3 Packages Projects 4 Releases Wiki Activity

fix: frontend cleanup

Browse Source
This commit is contained in:
brock
2025-04-22 10:04:14 -05:00
parent 158ac08c61
commit d6328786ba
5 changed files with 157 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/controllers/result_filter_controller.js Normal file
View File

@@ -0,0 +1,10 @@
import { Controller } from '@hotwired/stimulus';
/*
* The following line makes this controller "lazy": it won't be downloaded until needed
* See https://github.com/symfony/stimulus-bridge#lazy-controllers
*/
/* stimulusFetch: 'lazy' */
export default class extends Controller {
// ...
}

8
src/Controller/SearchController.php
View File

@@ -36,6 +36,14 @@ final class SearchController extends AbstractController
return $this->render('search/result.html.twig', [ return $this->render('search/result.html.twig', [
'results' => $result, 'results' => $result,
'filter' => [
'resolution' => '',
'codec' => '',
'provider' => '',
'language' => '',
'season' => 1,
'episode' => ''
]
]); ]);
} }
} }

74
templates/search/result.html.twig
View File

@@ -17,15 +17,72 @@
{{ results.media.description }} {{ results.media.description }}
</p> </p>
</div> </div>
<span {{ stimulus_controller('loading_icon', {total: results.media.episodes[1]|length, count: 0}) }} <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
class="loading-icon" class="loading-icon"
> >
<twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" /> <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" />
</span> </span>
</div> </div>
<div id="filter" class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg"
{{ stimulus_controller('result_filter') }}
>
<label for="resolution">
Resolution
<select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
<option {{ filter.resolution == "n/a" ? "selected" }}
value="">n/a</option>
<option {{ filter.resolution == "720p" ? "selected" }}
value="720p">780p</option>
<option {{ filter.resolution == "1080p" ? "selected" }}
value="1080p">1080p</option>
<option {{ filter.resolution == "2160p" ? "selected" }}
value="2160p">2160p</option>
</select>
</label>
<label for="codec">
Codec
<select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-sm">
<option {{ filter.codec == "n/a" ? "selected" }}
value="">n/a</option>
<option {{ filter.codec == "-" ? "selected" }}
value="-">-</option>
<option {{ filter.codec == "h264" ? "selected" }}
value="h264">h264</option>
<option {{ filter.codec == "h265" ? "selected" }}
value="h265">h265/HEVC</option>
</select>
</label>
<label for="language">
Language
<select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
<option selected value="{{ filter.language }}">{{ filter.language }}</option>
</select>
</label>
<label for="provider">
Provider
<select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
<option selected value="">n/a</option>
</select>
</label>
{% if results.media.mediaType == "tvshows" %}
<label for="season">
Season
<select id="season" name="season" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
<option selected value="">n/a</option>
</select>
</label>
<label for="episodeNumber">
Episode
<select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
<option selected value="">n/a</option>
</select>
</label>
{% endif %}
</div>
{% if "movies" == results.media.mediaType %} {% if "movies" == results.media.mediaType %}
<div id="results" class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}> <div class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
</div> </div>
{% elseif "tvshows" == results.media.mediaType %} {% elseif "tvshows" == results.media.mediaType %}
{% for season, episodes in results.media.episodes %} {% for season, episodes in results.media.episodes %}
@@ -33,13 +90,12 @@
{% for episode in episodes %} {% for episode in episodes %}
<div class="{{ (active == false) ? 'hidden' }}" <div class="{{ (active == false) ? 'hidden' }}"
data-tv-results-loading-icon-outlet=".loading-icon" data-tv-results-loading-icon-outlet=".loading-icon"
id="results" {{ stimulus_controller('tv_results', {
{{ stimulus_controller('tv_results', { tmdbId: results.media.tmdbId,
tmdbId: results.media.tmdbId, imdbId: results.media.imdbId,
imdbId: results.media.imdbId, season: season,
season: season, episode: episode['episode_number'],
episode: episode['episode_number'], active: active,
active: active,
}) }}></div> }) }}></div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

134
templates/torrentio/movies.html.twig
View File

@@ -1,67 +1,73 @@
<div class="p-2 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md"> <div class="p-4 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
<table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg"> <div class="overflow-hidden rounded-md">
<thead> <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
<tr class="dark:bg-stone-600 overflow-hidden rounded-md"> data-movies-list-target="list"
<th scope="col" >
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-gray-50"> <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
Size <tr class="dark:bg-stone-600 overflow-hidden">
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Size
Resolution </th>
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Resolution
Codec </th>
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Codec
Seeders </th>
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Seeders
Provider </th>
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Provider
Language </th>
</th> <th scope="col"
<th scope="col" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50"> Language
</th> </th>
</tr> <th scope="col"
</thead> class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<tbody class="divide-y divide-gray-200 dark:divide-gray-50"> </th>
{% for result in results.results %} </tr>
<tr> </thead>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <tbody>
{{ result.size }} {% for result in results.results %}
</td> <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.resolution }} {{ result.size }}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.codec }} {{ result.resolution }}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.seeders }} {{ result.codec }}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.provider }} {{ result.seeders }}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.languageFlags }} {{ result.provider }}
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
<span class="p-1.5 bg-green-600 rounded-md"> {{ result.languageFlags }}
<span class="text-gray-50">Download</span> </td>
</span> <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
<input class="ml-1" type="checkbox" name="select" /> <span class="p-1.5 bg-green-600 rounded-md text-gray-50">
</td> Download
</tr> </span>
{% endfor %} <label for="select">
</tbody> <input id="select" type="checkbox" name="select" />
</table> </label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div> </div>

5
templates/torrentio/tvshows.html.twig
View File

@@ -11,7 +11,7 @@
</span> </span>
</div> </div>
<div class="flex flex-col items-end hover:cursor-pointer" <div class="flex flex-col items-end hover:cursor-pointer"
{{ stimulus_action('tv_results', 'toggleList', 'click') }}> {{ stimulus_action('tv-results', 'toggleList', 'click') }}>
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32"> <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">
<path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/> <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
</svg> </svg>
@@ -84,6 +84,9 @@
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
<caption>
{{ results.results|length }} results
</caption>
</table> </table>
</div> </div>
</div> </div>