Add love button to player

diff --git a/src/littlesongplace/comments.py b/src/littlesongplace/comments.py
index 7de0a98a600d882394ce7266ad7fc0e1f06eb4b4..044f386aa32ca7780735bd31a8d0e7f1e83f8637 100644 (file)
--- a/src/littlesongplace/comments.py
+++ b/src/littlesongplace/comments.py
@@ -203,6 +203,59 @@ def comment():
 
         return redirect_to_previous_page()
 
+@bp.post("/send-love")
+@auth.requires_login
+def send_love():
+    thread = db.query(
+            """
+            SELECT * FROM comment_threads
+            WHERE threadid = ?
+            """,
+            [request.args["threadid"]],
+            expect_one=True)
+
+    # Add love comment
+    content = "[l0vv3]"
+    timestamp = datetime.now(timezone.utc).isoformat()
+    userid = session["userid"]
+
+    threadid = request.args["threadid"]
+    comment = db.query(
+            """
+            INSERT INTO comments
+                (threadid, userid, replytoid, created, content)
+            VALUES (?, ?, ?, ?, ?)
+            RETURNING (commentid)
+            """,
+            args=[threadid, userid, None, timestamp, content],
+            one=True)
+    commentid = comment["commentid"]
+
+    # Notify content owner
+    notification_targets = {thread["userid"]}
+
+    # Create notifications in database
+    for target in notification_targets:
+        db.query(
+                """
+                INSERT INTO notifications
+                    (objectid, objecttype, targetuserid, created)
+                VALUES (?, ?, ?, ?)
+                """,
+                [commentid, ObjectType.COMMENT, target, timestamp])
+
+    # Send push notifications
+    push_notifications.notify(
+            notification_targets,
+            title=f"{g.username} sent love!",
+            body=None,
+            url="/activity",
+            setting=push_notifications.SubscriptionSetting.LOVE)
+
+    db.commit()
+
+    return { "status": "success", "messages": ["Love sent!"] }
+
 def redirect_to_previous_page():
     previous_page = "/"
     if "previous_page" in session:

diff --git a/src/littlesongplace/static/lsp_btn_heart_fill02.gif b/src/littlesongplace/static/lsp_btn_heart_fill02.gif
new file mode 100644 (file)
index 0000000..29e9eb2
Binary files /dev/null and b/src/littlesongplace/static/lsp_btn_heart_fill02.gif differ

diff --git a/src/littlesongplace/static/lsp_btn_heart_line02.gif b/src/littlesongplace/static/lsp_btn_heart_line02.gif
new file mode 100644 (file)
index 0000000..a37d543
Binary files /dev/null and b/src/littlesongplace/static/lsp_btn_heart_line02.gif differ

diff --git a/src/littlesongplace/static/player.js b/src/littlesongplace/static/player.js
index e48bfa59220088727abb3a049145170e050f939f..9c18b43fb147154d529946ba7e30eb5fd0cc18a0 100644 (file)
--- a/src/littlesongplace/static/player.js
+++ b/src/littlesongplace/static/player.js
@@ -1,5 +1,6 @@
 var m_allSongs = [];
 var m_songIndex = 0;
+var m_loveSent = false;
 
 // Play a new song from the list in the player
 function play(event) {
@@ -20,6 +21,9 @@ function playCurrentSong() {
     var song = m_allSongs[m_songIndex];
     var songData = JSON.parse(song.dataset.song);
 
+    // Started new song - clear love sent flag
+    resetLove();
+
     var audio = document.getElementById("player-audio");
     audio.pause();
     audio.src = `/song/${songData.userid}/${songData.songid}`;
@@ -227,6 +231,30 @@ function shuffleSongList(event) {
     }
 }
 
+// Send love on the currently playing song
+function sendLove() {
+    if (m_loveSent) return; // Can only send love once per song
+    var song = m_allSongs[m_songIndex];
+    var songData = JSON.parse(song.dataset.song);
+    m_loveSent = true;
+    fetch(
+        `/send-love?threadid=${songData.threadid}`,
+        {method: "post"}
+    ).then(handleAjaxResponse)
+
+    var loveImage = document.getElementById("send-love-image");
+    loveImage.className = "lsp_btn_heart_fill02";
+    updateImageColors();
+}
+
+// Reset the love button
+function resetLove() {
+    m_loveSent = false;
+    var loveImage = document.getElementById("send-love-image");
+    loveImage.className = "lsp_btn_heart_line02";
+    updateImageColors();
+}
+
 // Add event listeners
 var m_firstLoadPlayer = true;
 document.addEventListener("DOMContentLoaded", (event) => {

diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index 4ab6b565d85fa00822bc63b547799504a1f1a62b..eb7b98771a380d99b94ad1f308e4ea2d574fad75 100644 (file)
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -99,6 +99,9 @@
             <!-- Song Player -->
             <div class="player" id="player" hidden>
                 <div class="player-info">
+                    <button class="player-button" onclick="sendLove()">
+                        <img class="lsp_btn_heart_line02" title="Send Love" id="send-love-image">
+                    </button>
                     <img id="player-pfp" class="small-pfp" src="" onerror="this.style.display = 'none'">
                     <a id="player-title"></a>
                     -
@@ -109,13 +112,13 @@
                 </div>
                 <div class="player-controls">
                     <button onclick="songPrevious()" class="player-button">
-                        <img class="lsp_btn_prev02" alt="Previous">
+                        <img class="lsp_btn_prev02" title="Previous">
                     </button>
                     <button onclick="songPlayPause()" class="player-button">
-                        <img class="lsp_btn_pause02" alt="Play" id="play-pause-button">
+                        <img class="lsp_btn_pause02" title="Play" id="play-pause-button">
                     </button>
                     <button onclick="songNext()" class="player-button">
-                        <img class="lsp_btn_next02" alt="Next">
+                        <img class="lsp_btn_next02" title="Next">
                     </button>
                     <input id="position-slider" name="song-position" type="range" min="0" max="1" step="any" value="0"/>
                     <span class="player-time" id="player-current-time">0:00</span>