Merge pull request #294 from Shikkanime/dev

Refactor episode display in home and episode templates for better UI …
Shikkanime · Mar 16, 2024 · ae981f1 · ae981f1
2 parents a14f3a3 + 1cee265
commit ae981f1
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 18 deletions.
diff --git a/src/main/kotlin/fr/shikkanime/controllers/site/SiteController.kt b/src/main/kotlin/fr/shikkanime/controllers/site/SiteController.kt
@@ -60,7 +60,7 @@ class SiteController {
                         SortParameter("langType", SortParameter.Order.ASC),
                     ),
                     1,
-                    6
+                    8
                 )!!.data
             )
         )

diff --git a/src/main/kotlin/fr/shikkanime/jobs/FetchDeprecatedEpisodeJob.kt b/src/main/kotlin/fr/shikkanime/jobs/FetchDeprecatedEpisodeJob.kt
@@ -126,18 +126,16 @@ class FetchDeprecatedEpisodeJob : AbstractJob {
                 needUpdate = true
             }
 
-            if (needUpdate) {
-                episode.lastUpdateDateTime = now
-                episodeService.update(episode)
-            }
+            episode.lastUpdateDateTime = now
+            episodeService.update(episode)
         } catch (e: Exception) {
             logger.log(Level.SEVERE, "Error while fetching episode description for $identifier", e)
         }
 
         return needUpdate
     }
 
-    fun buildCrunchyrollEpisodeUrl(content: JsonObject, episode: Episode): String {
+    private fun buildCrunchyrollEpisodeUrl(content: JsonObject, episode: Episode): String {
         val id = content.getAsString("id")!!
         val slugTitle = content.getAsString("slug_title")
         val url = CrunchyrollWrapper.buildUrl(episode.anime!!.countryCode!!, id, slugTitle)

diff --git a/src/main/resources/assets/css/purged/bootstrap.min.css b/src/main/resources/assets/css/purged/bootstrap.min.css
diff --git a/src/main/resources/assets/css/purged/main.min.css b/src/main/resources/assets/css/purged/main.min.css
diff --git a/src/main/resources/templates/site/anime.ftl b/src/main/resources/templates/site/anime.ftl
@@ -33,7 +33,7 @@
 
     <div class="row mt-5 justify-content-center">
         <#list episodes as episode>
-            <@episodeComponent.display episode=episode />
+            <@episodeComponent.display episode=episode cover=false col="col-md-2" />
         </#list>
     </div>
 </@navigation.display>
diff --git a/src/main/resources/templates/site/components/episode.ftl b/src/main/resources/templates/site/components/episode.ftl
@@ -9,29 +9,44 @@
     </#switch>
 </#function>
 
-<#macro display episode>
-    <div class="col-md-2 col-6 mt-0" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
+<#macro display episode col cover>
+    <div class="${col} col-12" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
         <article>
             <a href="${episode.url}" target="_blank" class="text-decoration-none text-white">
                 <div class="position-relative">
                     <div class="position-relative">
                         <img src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
                              alt="${su.sanitizeXSS(episode.anime.shortName)} episode preview image"
-                             class="img-fluid<#if episode.uncensored> blur</#if>" width="640" height="360">
+                             class="<#if cover>w-100 object-fit-cover<#else>img-fluid</#if> <#if episode.uncensored>blur</#if>"
+                             width="640" height="360">
 
                         <img src="https://www.shikkanime.fr/assets/img/platforms/${episode.platform.image}"
                              alt="${episode.platform.name} platform image"
                              class="position-absolute top-0 end-0 rounded-circle me-1 mt-1" width="24"
                              height="24">
+
+                        <#if cover?? && cover>
+                            <div class="position-absolute bottom-0 start-0 py-2 px-3 bg-black bg-opacity-50 m w-100">
+                                <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
+
+                                <p class="text-muted mb-0">Saison ${episode.season?c} |
+                                    ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
+                                </p>
+
+                                <p class="text-muted mt-0 mb-0 pb-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                            </div>
+                        </#if>
                     </div>
 
-                    <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
+                    <#if cover?? && !cover>
+                        <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
 
-                    <p class="text-muted mb-0">Saison ${episode.season?c} |
-                        ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
-                    </p>
+                        <p class="text-muted mb-0">Saison ${episode.season?c} |
+                            ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
+                        </p>
 
-                    <p class="text-muted mt-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                        <p class="text-muted mt-0 mb-0 pb-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                    </#if>
 
                     <div class="bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3"
                          style="display: none;" x-show="hover">

diff --git a/src/main/resources/templates/site/home.ftl b/src/main/resources/templates/site/home.ftl
@@ -6,9 +6,21 @@
     <h1 class="h3 my-3">Nouveaux épisodes</h1>
 
     <#if episodes?? && episodes?size != 0>
-        <div class="row">
+        <div class="row g-3">
             <#list episodes as episode>
-                <@episodeComponent.display episode=episode />
+            <#-- If episode is the first element -->
+                <#assign col="col-md-2">
+                <#assign firstRow=false>
+
+                <#if episode?index == 0>
+                    <#assign col="col-md-7">
+                    <#assign firstRow=true>
+                <#elseif episode?index == 1>
+                    <#assign col="col-md-5">
+                    <#assign firstRow=true>
+                </#if>
+
+                <@episodeComponent.display episode=episode col=col cover=firstRow />
             </#list>
         </div>
     <#else>