Add episode description on site

Shikkanime · Feb 5, 2024 · 4d34b57 · 4d34b57
1 parent a028394
commit 4d34b57
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 27 deletions.
diff --git a/src/main/kotlin/fr/shikkanime/converters/episode/EpisodeDtoToEpisodeConverter.kt b/src/main/kotlin/fr/shikkanime/converters/episode/EpisodeDtoToEpisodeConverter.kt
@@ -32,6 +32,7 @@ class EpisodeDtoToEpisodeConverter : AbstractConverter<EpisodeDto, Episode>() {
             url = from.url,
             image = from.image,
             duration = from.duration,
+            description = from.description,
         )
     }
 }
diff --git a/src/main/kotlin/fr/shikkanime/converters/episode/EpisodeToEpisodeDtoConverter.kt b/src/main/kotlin/fr/shikkanime/converters/episode/EpisodeToEpisodeDtoConverter.kt
@@ -23,6 +23,7 @@ class EpisodeToEpisodeDtoConverter : AbstractConverter<Episode, EpisodeDto>() {
             url = from.url!!,
             image = from.image!!,
             duration = from.duration,
+            description = from.description,
             uncensored = from.image!!.contains("nc/", true),
         )
     }

diff --git a/src/main/kotlin/fr/shikkanime/dtos/EpisodeDto.kt b/src/main/kotlin/fr/shikkanime/dtos/EpisodeDto.kt
@@ -20,5 +20,6 @@ data class EpisodeDto(
     val url: String,
     val image: String,
     val duration: Long,
+    val description: String?,
     val uncensored: Boolean,
 ) : Serializable
diff --git a/src/main/kotlin/fr/shikkanime/services/EpisodeService.kt b/src/main/kotlin/fr/shikkanime/services/EpisodeService.kt
@@ -140,6 +140,7 @@ class EpisodeService : AbstractService<Episode, EpisodeRepository>() {
         }
 
         parameters["duration"]?.takeIf { it.isNotBlank() }?.let { episode.duration = it.toLong() }
+        parameters["description"]?.takeIf { it.isNotBlank() }?.let { episode.description = it }
 
         val update = super.update(episode)
         MapCache.invalidate(Episode::class.java)

diff --git a/src/main/kotlin/fr/shikkanime/services/ImageService.kt b/src/main/kotlin/fr/shikkanime/services/ImageService.kt
@@ -123,7 +123,7 @@ object ImageService {
             file.writeBytes(FileManager.toGzip(ObjectParser.toJson(cache).toByteArray()))
         }
 
-        logger.info("Saved images cache in $take ms ($originalSize} -> $compressedSize)")
+        logger.info("Saved images cache in $take ms ($originalSize -> $compressedSize)")
         change.set(false)
     }
 

diff --git a/src/main/resources/assets/css/main.css b/src/main/resources/assets/css/main.css
@@ -5,18 +5,12 @@
     overflow: hidden;
 }
 
-.anime-card-description-truncate {
+.text-truncate-6 {
     display: -webkit-box;
-    -webkit-line-clamp: 17;
+    -webkit-line-clamp: 6;
     -webkit-box-orient: vertical;
     overflow: hidden;
-}
-
-/* On mobile, make anime-card-description-truncate on 8 lines */
-@media (max-width: 576px) {
-    .anime-card-description-truncate {
-        -webkit-line-clamp: 9;
-    }
+    text-overflow: ellipsis;
 }
 
 .text-muted {

diff --git a/src/main/resources/templates/admin/episodes/edit.ftl b/src/main/resources/templates/admin/episodes/edit.ftl
@@ -88,6 +88,11 @@
                         <label for="title" class="form-label">Title</label>
                         <input type="text" class="form-control" id="title" name="title" value="${episode.title!""}">
                     </div>
+                    <div class="col-md-6">
+                        <label for="description" class="form-label">Description</label>
+                        <textarea class="form-control" id="description" name="description"
+                                  rows="6">${episode.description}</textarea>
+                    </div>
                     <div class="col-md-6">
                         <label for="url" class="form-label">URL</label>
                         <input type="text" class="form-control" id="url" name="url" value="${episode.url}">

diff --git a/src/main/resources/templates/site/home.ftl b/src/main/resources/templates/site/home.ftl
@@ -8,14 +8,42 @@
             <#list episodes as episode>
                 <div class="col-md-2 col-6 mt-0">
                     <article>
-                        <a href="${episode.url}" class="text-decoration-none text-white">
-                            <img loading="lazy" src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
-                                 alt="${episode.anime.shortName?replace("\"", "'")} episode preview image"
-                                 class="w-100<#if episode.uncensored> blur</#if>">
-                            <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
-                            <p class="text-muted mb-0">Saison ${episode.season?c} |
-                                Épisode ${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>
+                        <a href="${episode.url}" target="_blank" class="text-decoration-none text-white">
+                            <div class="hover-card position-relative">
+                                <div class="position-relative">
+                                    <img src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
+                                         alt="${episode.anime.shortName?replace("\"", "'")} episode preview image"
+                                         class="w-100<#if episode.uncensored> blur</#if>">
+                                    <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">
+                                </div>
+
+                                <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
+                                <p class="text-muted mb-0">Saison ${episode.season?c} |
+                                    Épisode ${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>
+
+                                <#if episode.title?? || episode.description??>
+                                    <div class="hover-card-description d-none bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3">
+                                        <div class="h6 text-truncate-2">
+                                            ${episode.title}
+                                        </div>
+
+                                        <span class="text-muted">
+                                            <i class="bi bi-calendar4 me-1"></i>
+                                            ${episode.releaseDateTime?datetime("yyyy-MM-dd'T'HH:mm:ss")?string("dd/MM/yyyy")}
+                                        </span>
+
+                                        <#if episode.description??>
+                                            <div class="text-truncate-6 mt-3">
+                                                ${episode.description}
+                                            </div>
+                                        </#if>
+                                    </div>
+                                </#if>
+                            </div>
                         </a>
                     </article>
                 </div>
@@ -37,15 +65,23 @@
                 <div class="col-md-2 col-6 mt-0">
                     <article>
                         <a href="/animes/${anime.uuid}" class="text-decoration-none text-white">
-                            <div class="anime-card position-relative">
-                                <img loading="lazy" src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
+                            <div class="hover-card position-relative">
+                                <img src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
                                      alt="${anime.shortName?replace("\"", "'")} anime image" class="w-100">
                                 <span class="h6 mt-2 text-truncate-2">${anime.shortName}</span>
 
-                                <div class="d-none bg-black bg-opacity-75 anime-card-description position-absolute top-0 start-0 w-100 h-100 p-3">
-                                    <div class="anime-card-description-truncate">
-                                        ${anime.description}
+                                <div class="hover-card-description d-none bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3">
+                                    <div class="h6 text-truncate-2">
+                                        ${anime.name?upper_case}
                                     </div>
+
+                                    <hr>
+
+                                    <#if anime.description??>
+                                        <div class="text-truncate-6">
+                                            ${anime.description}
+                                        </div>
+                                    </#if>
                                 </div>
                             </div>
                         </a>
@@ -57,15 +93,21 @@
 
     <script>
         // When hover on anime card, show description on the anime card
-        const animeCards = document.querySelectorAll('.anime-card');
+        const hoverCards = document.querySelectorAll('.hover-card');
+
+        hoverCards.forEach((animeCard) => {
+            const element = animeCard.querySelector('.hover-card-description');
+
+            if (element === null) {
+                return;
+            }
 
-        animeCards.forEach((animeCard) => {
             animeCard.addEventListener('mouseover', () => {
-                animeCard.querySelector('.anime-card-description').classList.remove('d-none');
+                element.classList.remove('d-none');
             });
 
             animeCard.addEventListener('mouseout', () => {
-                animeCard.querySelector('.anime-card-description').classList.add('d-none');
+                element.classList.add('d-none');
             });
         });
     </script>