97 lines
6.4 KiB
Twig
97 lines
6.4 KiB
Twig
<div{{ attributes.defaults(stimulus_controller('tv_episode_list')) }}
|
|
class="episode-list flex flex-col gap-4"
|
|
>
|
|
<div data-live-id="{{ uniqid() }}" class="episode-container flex flex-col gap-4">
|
|
{% for episode in this.getEpisodes().items %}
|
|
<episode-container id="{{ episode_anchor(episode['season_number'], episode['episode_number']) }}" class="results"
|
|
show-title="{{ this.title }}"
|
|
data-tv-results-loading-icon-outlet=".loading-icon"
|
|
data-download-button-outlet=".download-btn"
|
|
{{ stimulus_controller('tv_results', {
|
|
title: this.title,
|
|
tmdbId: this.tmdbId,
|
|
imdbId: this.imdbId,
|
|
season: episode['season_number'],
|
|
episode: episode['episode_number'],
|
|
active: 'true',
|
|
}) }}
|
|
>
|
|
<div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
{% if episode['poster'] != null %}
|
|
<img class="w-full md:w-64 rounded-lg" src="{{ episode['poster'] }}" />
|
|
{% else %}
|
|
<div class="w-full md:w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
|
<twig:ux:icon width="32" name="hugeicons:loading-01" />
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex flex-col gap-4 grow">
|
|
<h4 class="text-md font-bold">
|
|
{{ episode['episode_number'] }}. {{ episode['name'] }}
|
|
</h4>
|
|
<p>{{ episode['overview']|truncate }}</p>
|
|
<div>
|
|
<button class="results-count-badge py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white" title="Click to expand the results table for season {{ episode['season_number'] }} episode {{ episode['episode_number'] }}.">
|
|
<span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}>-</span> results
|
|
</button>
|
|
|
|
<small class="py-1 px-1.5 mr-1 grow-0 font-bold bg-gray-700 rounded-lg font-normal text-white" title='"{{ episode['name'] }}" aired on {{ episode['air_date']|date(null, 'UTC') }}.'>
|
|
{{ episode['air_date']|date(null, 'UTC') }}
|
|
</small>
|
|
|
|
<twig:Turbo:Frame id="meb_{{ this.imdbId }}_{{ episode_id(episode['season_number'], episode['episode_number']) }}" src="{{ path('api.library.search', {
|
|
title: this.title,
|
|
season: episode['season_number'],
|
|
episode: episode['episode_number'],
|
|
block: 'media_exists_badge',
|
|
target: "meb_" ~ this.imdbId ~"_" ~ episode_id(episode['season_number'], episode['episode_number'])
|
|
}) }}">
|
|
<small class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white" title="Episode has not been downloaded yet.">
|
|
missing
|
|
</small>
|
|
</twig:Turbo:Frame>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 justify-between">
|
|
<div class="flex flex-col items-center">
|
|
<input class="episode-selector" type="checkbox"
|
|
{{ stimulus_target('tv-results', 'episodeSelector') }}
|
|
/>
|
|
</div>
|
|
<button class="dropdown-button flex flex-col items-end transition-transform duration-300 ease-in-out rotate-90" title="Click to expand the results table for season {{ episode['season_number'] }} episode {{ episode['episode_number'] }}.">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32">
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20 6L10 16l10 10" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="results-container inline-block overflow-hidden rounded-lg hidden">
|
|
<twig:Turbo:Frame id="results_{{ episode_id(episode['season_number'], episode['episode_number']) }}" src="{{ path('app_torrentio_tvshows', {
|
|
tmdbId: this.tmdbId,
|
|
imdbId: this.imdbId,
|
|
season: episode['season_number'],
|
|
episode: episode['episode_number'],
|
|
target: 'results_' ~ episode_id(episode['season_number'], episode['episode_number']),
|
|
block: 'tvshow_results'
|
|
}) }}" />
|
|
</div>
|
|
</div>
|
|
</episode-container>
|
|
{% endfor %}
|
|
</div>
|
|
{% set paginator = this.episodes %}
|
|
{% include 'partial/tv-episode-list-paginator.html.twig' %}
|
|
</div>
|
|
|
|
{% macro placeholder(props) %}
|
|
<span>
|
|
<twig:ux:icon name="codex:loader" height="40" width="40" data-loading-icon-target="icon" class="text-end" />
|
|
</span>
|
|
{% endmacro %}
|