98 lines
6.3 KiB
Twig
98 lines
6.3 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.seasonNumber, episode.episodeNumber) }}" class="results"
|
|
show-title="{{ this.title }}"
|
|
data-download-button-outlet=".download-btn"
|
|
{{ stimulus_controller('tv_results', {
|
|
title: this.title,
|
|
tmdbId: this.tmdbId,
|
|
imdbId: this.imdbId,
|
|
season: episode.seasonNumber,
|
|
episode: episode.episodeNumber,
|
|
active: 'true',
|
|
}) }}
|
|
>
|
|
<div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500/60 bg-clip-padding backdrop-filter backdrop-blur-md 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.episodeNumber }}. {{ episode.name }}
|
|
</h4>
|
|
<p>{{ episode.description|truncate }}</p>
|
|
<div class="text-xs font-bold">
|
|
<button class="results-count-badge py-1 px-1.5 mr-1 grow-0 bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white" title="Click to expand the results table for season {{ episode.seasonNumber }} episode {{ episode.episodeNumber }}.">
|
|
<span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}></span> results
|
|
</button>
|
|
|
|
<span class="py-1 px-1.5 mr-1 grow-0 bg-gray-700 rounded-lg text-white" title='"{{ episode.name }}" aired on {{ episode.airDate|date(null, 'UTC') }}.'>
|
|
{{ episode.airDate|date(null, 'UTC') }}
|
|
</span>
|
|
|
|
<twig:Turbo:Frame id="meb_{{ this.imdbId }}_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('api.library.search', {
|
|
title: this.title,
|
|
season: episode.seasonNumber,
|
|
episode: episode.episodeNumber,
|
|
block: 'media_exists_badge',
|
|
target: "meb_" ~ this.imdbId ~"_" ~ episode_id(episode.seasonNumber, episode.episodeNumber)
|
|
}) }}">
|
|
<span class="py-1 px-1.5 mr-1 grow-0 bg-rose-600 rounded-lg text-white" title="Episode has not been downloaded yet.">
|
|
missing
|
|
</span>
|
|
</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.seasonNumber }} episode {{ episode.episodeNumber }}.">
|
|
<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 loading="lazy" id="results_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('app_torrentio_tvshows', {
|
|
tmdbId: this.tmdbId,
|
|
imdbId: this.imdbId,
|
|
season: episode.seasonNumber,
|
|
episode: episode.episodeNumber,
|
|
target: 'results_' ~ episode_id(episode.seasonNumber, episode.episodeNumber),
|
|
block: 'tvshow_results'
|
|
}) }}">
|
|
<twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
|
|
</twig:Turbo:Frame>
|
|
</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 %}
|