Add button to revert lyric modifications

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;

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

songs2slides/templates/create-step-2.html

@@ -54,8 +54,17 @@ <h1>Step 2: Review Lyrics</h1>
             <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 @@ <h1>Step 2: Review Lyrics</h1>
 
 <script>
     const STEP = 2
+    const DEFAULT_LYRICS = [
+        {% for song in songs %}
+        `{{ song.lyrics if song.lyrics else '' }}`,
+        {% endfor %}
+    ]
 </script>
 {% endblock main %}

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')