fix: frontend cleanup
This commit is contained in:
10
assets/controllers/result_filter_controller.js
Normal file
10
assets/controllers/result_filter_controller.js
Normal 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 {
|
||||
// ...
|
||||
}
|
||||
@@ -36,6 +36,14 @@ final class SearchController extends AbstractController
|
||||
|
||||
return $this->render('search/result.html.twig', [
|
||||
'results' => $result,
|
||||
'filter' => [
|
||||
'resolution' => '',
|
||||
'codec' => '',
|
||||
'provider' => '',
|
||||
'language' => '',
|
||||
'season' => 1,
|
||||
'episode' => ''
|
||||
]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,15 +17,72 @@
|
||||
{{ results.media.description }}
|
||||
</p>
|
||||
</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"
|
||||
>
|
||||
<twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" />
|
||||
</span>
|
||||
</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 %}
|
||||
<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>
|
||||
{% elseif "tvshows" == results.media.mediaType %}
|
||||
{% for season, episodes in results.media.episodes %}
|
||||
@@ -33,13 +90,12 @@
|
||||
{% for episode in episodes %}
|
||||
<div class="{{ (active == false) ? 'hidden' }}"
|
||||
data-tv-results-loading-icon-outlet=".loading-icon"
|
||||
id="results"
|
||||
{{ stimulus_controller('tv_results', {
|
||||
tmdbId: results.media.tmdbId,
|
||||
imdbId: results.media.imdbId,
|
||||
season: season,
|
||||
episode: episode['episode_number'],
|
||||
active: active,
|
||||
{{ stimulus_controller('tv_results', {
|
||||
tmdbId: results.media.tmdbId,
|
||||
imdbId: results.media.imdbId,
|
||||
season: season,
|
||||
episode: episode['episode_number'],
|
||||
active: active,
|
||||
}) }}></div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -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">
|
||||
<table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg">
|
||||
<thead>
|
||||
<tr class="dark:bg-stone-600 overflow-hidden rounded-md">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-gray-50">
|
||||
Size
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
Resolution
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
Codec
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
Seeders
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
Provider
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
Language
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
{% for result in results.results %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.size }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.resolution }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.codec }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.seeders }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.provider }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.languageFlags }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-green-600 rounded-md">
|
||||
<span class="text-gray-50">Download</span>
|
||||
</span>
|
||||
<input class="ml-1" type="checkbox" name="select" />
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<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">
|
||||
<div class="overflow-hidden rounded-md">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
|
||||
data-movies-list-target="list"
|
||||
>
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr class="dark:bg-stone-600 overflow-hidden">
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Size
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Resolution
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Codec
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Seeders
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Provider
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Language
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for result in results.results %}
|
||||
<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">
|
||||
{{ result.size }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.resolution }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.codec }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.seeders }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.provider }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.languageFlags }}
|
||||
</td>
|
||||
<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">
|
||||
<span class="p-1.5 bg-green-600 rounded-md text-gray-50">
|
||||
Download
|
||||
</span>
|
||||
<label for="select">
|
||||
<input id="select" type="checkbox" name="select" />
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -11,7 +11,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<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">
|
||||
<path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
|
||||
</svg>
|
||||
@@ -84,6 +84,9 @@
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<caption>
|
||||
{{ results.results|length }} results
|
||||
</caption>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user