songs2slides

commit a65b52e990f62b7ccd195254a513eb1d908edcfb
parent 4ff9f49766b49ef42e47889220c4e80d3ea10a6a
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Tue, 23 Jul 2024 12:38:26 -0700

Add button to revert lyric modifications

Diffstat:
M
songs2slides/static/create.css
 | 
2
+-
M
songs2slides/static/create.js
 | 
16
+++++++++++++---
A
songs2slides/static/revert.svg
 | 
2
++
M
songs2slides/templates/create-step-2.html
 | 
16
+++++++++++++++-
M
tests/test_e2e.py
 | 
15
+++++++++++----

5 files changed, 42 insertions(+), 9 deletions(-)
diff --git a/songs2slides/static/create.css b/songs2slides/static/create.css
@@ -66,7 +66,7 @@ details {
     margin-bottom: 1rem;
 }
 textarea {
-    margin-top: 0.5rem;
+    margin: 0.5rem 0;
     width: 100%;
     height: 15rem;
     resize: vertical;
diff --git a/songs2slides/static/create.js b/songs2slides/static/create.js
@@ -38,9 +38,7 @@ addEventListener('submit', () => {
     // Show loading spinner
     document.getElementById('post-submit').hidden = false
 
-    if (STEP === 2) {
-        save_lyrics()
-    } else if (STEP === 3) {
+    if (STEP === 3) {
         // Save settings
         storage_set('title-slides', form['title-slides'].checked)
         storage_set('blank-slides', form['blank-slides'].checked)
@@ -109,6 +107,15 @@ function save_lyrics() {
     }
 }
 
+function revert_lyrics(n) {
+    form[`lyrics-${n}`].value = DEFAULT_LYRICS[n-1]
+    if (DEFAULT_LYRICS[n-1] === '') {
+        document.getElementsByTagName('details')[n-1].classList.add('missing')
+        update_missing_message()
+    }
+    save_lyrics()
+}
+
 function load_lyrics() {
     songs = document.getElementsByTagName('details')
     for (let i = 1; `title-${i}` in form; i++) {
@@ -122,7 +129,10 @@ function load_lyrics() {
             songs[i - 1].open = false
         }
     }
+    update_missing_message()
+}
 
+function update_missing_message() {
     // Update missing label
     const number = document.getElementsByClassName('missing').length
     document.getElementById('missing-count').textContent = number
diff --git a/songs2slides/static/revert.svg b/songs2slides/static/revert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
+\ No newline at end of file
diff --git a/songs2slides/templates/create-step-2.html b/songs2slides/templates/create-step-2.html
@@ -54,8 +54,17 @@
             <textarea name="lyrics-{{ loop.index }}" placeholder="{{
                 'Lyrics not found, please enter them here manually.\n\n'
                 if not song.lyrics else '' }}{{ format_hint }}"
-                aria-label="{{ song.title }} Lyrics"
+                aria-label="{{ song.title }} Lyrics" oninput="save_lyrics()"
                 >{{ song.lyrics or '' }}</textarea>
+
+            <p>
+                Lyric modifications are saved across sessions
+                <button class="icon" type="button" title="Revert lyrics"
+                    onclick="revert_lyrics({{ loop.index }})">
+                    <img src="{{ url_for('static', filename='revert.svg') }}"
+                        alt="Revert icon"/>
+                </button>
+            </p>
         </details>
         {% endfor %}
     </div>
@@ -77,5 +86,10 @@
 
 <script>
     const STEP = 2
+    const DEFAULT_LYRICS = [
+        {% for song in songs %}
+        `{{ song.lyrics if song.lyrics else '' }}`,
+        {% endfor %}
+    ]
 </script>
 {% endblock main %}
diff --git a/tests/test_e2e.py b/tests/test_e2e.py
@@ -256,8 +256,9 @@ def test_back(page: Page):
     expect(page.get_by_role('textbox').first).to_have_value('These are the lyrics\nto song 1\nby artist A')
     expect(page.get_by_role('textbox').last).to_have_value('')
 
-    # Fill in bad missing lyrics
-    page.get_by_role('textbox').last.fill('custom song 5 lyrics (bad)')
+    # Update song lyrics
+    page.get_by_role('textbox').first.fill('custom song 1 lyrics')
+    page.get_by_role('textbox').last.fill('custom song 5 lyrics')
 
     # Click Next
     page.get_by_role('button', name='Next').click()
@@ -271,10 +272,16 @@ def test_back(page: Page):
     page.get_by_text('Song 1 (Artist A)').click()
     page.get_by_text('Song 5').click()
 
-    # Assert bad song lyrics are still loaded
+    # Assert updated song lyrics are still loaded
     expect(page.get_by_role('textbox')).to_have_count(2)
+    expect(page.get_by_role('textbox').first).to_have_value('custom song 1 lyrics')
+    expect(page.get_by_role('textbox').last).to_have_value('custom song 5 lyrics')
+
+    # Revert lyrics
+    page.get_by_title('Revert lyrics').first.click()
     expect(page.get_by_role('textbox').first).to_have_value('These are the lyrics\nto song 1\nby artist A')
-    expect(page.get_by_role('textbox').last).to_have_value('custom song 5 lyrics (bad)')
+    page.get_by_title('Revert lyrics').last.click()
+    expect(page.get_by_role('textbox').last).to_have_value('')
 
     # Fill in correct missing lyrics
     page.get_by_role('textbox').last.fill('custom song 5 lyrics')