content, css: only apply fade effect on "long" lyrics preview

2 files changed, 33 insertions, 2 deletions

diff --git a/src/content/dependencies/generateLyricsEntry.js b/src/content/dependencies/generateLyricsEntry.js
index 0c91ce0c..1379ae06 100644
--- a/src/content/dependencies/generateLyricsEntry.js
+++ b/src/content/dependencies/generateLyricsEntry.js
@@ -28,6 +28,30 @@ export default {
 
     hasSquareBracketAnnotations:
       entry.hasSquareBracketAnnotations,
+
+    numStanzas:
+      1 +
+
+      (Array.from(
+        entry.body
+          .matchAll(/\n\n|<br><br>/g))
+
+        .length) +
+
+      (entry.body.includes('<br')
+        ? entry.body.split('\n').length
+        : 0),
+
+    numLines:
+      1 +
+
+      (Array.from(
+        entry.body
+          .replaceAll(/(<br>){1,}/g, '\n')
+          .replaceAll(/\n{2,}/g, '\n')
+          .matchAll(/\n/g))
+
+        .length),
   }),
 
   slots: {
@@ -42,6 +66,13 @@ export default {
       html.tag('div', {class: 'lyrics-entry'},
         slots.attributes,
 
+        {'data-stanzas': data.numStanzas},
+        {'data-lines': data.numLines},
+
+        (data.numStanzas > 1 ||
+         data.numLines > 8) &&
+          {class: 'long-lyrics'},
+
         [
           html.tag('p', {class: 'lyrics-details'},
             {[html.onlyIfContent]: true},
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 8872bde8..afc5cfbf 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1870,11 +1870,11 @@ p.image-details.origin-details .origin-details {
   margin-top: 0.25em;
 }
 
-.lyrics-entry {
+.lyrics-entry.long-lyrics {
   clip-path: inset(-15px -20px);
 }
 
-.lyrics-entry::after {
+.lyrics-entry.long-lyrics::after {
   content: "";
   pointer-events: none;
   display: block;