add: last.fm status integration

crates/app/src/public/html/auth/connection.html

@@ -37,4 +37,29 @@ config.connections.spotify_client_id %}
             `<b>${message}.</b> You can now close this tab.`;
     }, 150);
 </script>
+{% elif connection_type == "LastFm" and user and user.connections.LastFm and
+config.connections.last_fm_key %}
+<script>
+    setTimeout(async () => {
+        const token = new URLSearchParams(window.location.search).get("token");
+        const api_key = "{{ config.connections.last_fm_key }}";
+
+        if (!token) {
+            alert("Connection failed (did not get token from Last.fm)");
+            return;
+        }
+
+        const res = await trigger("last_fm::get_session", [token]);
+        const { message } = await trigger("connections::push_con_data", [
+            "LastFm",
+            {
+                session_token: res.session.key,
+                name: res.session.name,
+            },
+        ]);
+
+        document.getElementById("status").innerHTML =
+            `<b>${message}.</b> You can now close this tab.`;
+    }, 1000);
+</script>
 {% endif %} {% endblock %}

crates/app/src/public/html/components.html

@@ -847,4 +847,38 @@ state.data %}
         </div>
     </div>
 </div>
+{% endif %} {%- endmacro %} {% macro last_fm_playing(state, size="60px") -%} {%
+if state and state.data %}
+<div class="card-nest">
+    <div class="card flex items-center justify-between gap-2 small">
+        <div class="flex items-center gap-2">
+            <b>Listening on</b>
+            {{ icon "last_fm" }}
+        </div>
+    </div>
+
+    <div class="card secondary flex gap-2">
+        <img
+            src="{{ state.external_urls.track_img }}"
+            alt="Track cover"
+            loading="lazy"
+            class="avatar"
+            style="--size: {{ size }}"
+        />
+
+        <div class="flex flex-col">
+            <h5 class="w-full">
+                <a href="{{ state.external_urls.track }}" class="flush"
+                    >{{ state.data.track }}</a
+                >
+            </h5>
+
+            <span class="fade"
+                ><a href="{{ state.external_urls.artist }}" class="flush"
+                    >{{ state.data.artist }}</a
+                ></span
+            >
+        </div>
+    </div>
+</div>
 {% endif %} {%- endmacro %}

crates/app/src/public/html/profile/base.html

@@ -109,6 +109,8 @@
                         <div style="display: contents;">
                             {% if profile.connections.Spotify and profile.connections.Spotify[0].data.name and profile.connections.Spotify[0].show_on_profile %}
                                 {{ components::spotify_playing(state=profile.connections.Spotify[1]) }}
+                            {% elif profile.connections.LastFm and profile.connections.LastFm[0].data.name and profile.connections.LastFm[0].show_on_profile %}
+                                {{ components::last_fm_playing(state=profile.connections.LastFm[1]) }}
                             {% endif %}
                         </div>
 

crates/app/src/public/html/profile/settings.html

@@ -515,13 +515,23 @@
                 {{ icon "spotify" }}
                 <span>Spotify</span>
             </button>
+            {% endif %} {% if config.connections.last_fm_key and not
+            user.connections.LastFm %}
+            <button
+                class="quaternary"
+                onclick="trigger('last_fm::create_connection', ['{{ config.connections.last_fm_key }}'])"
+            >
+                {{ icon "last_fm" }}
+                <span>Last.fm</span>
+            </button>
             {% endif %}
         </div>
 
         {% for key, value in user.connections %}
         <div class="card-nest">
             <div class="card small flex items-center gap-2">
-                {% if key == "Spotify" %} {{ icon "spotify" }} {% endif %}
+                {% if key == "Spotify" %} {{ icon "spotify" }} {% elif key ==
+                "LastFm" %} {{ icon "last_fm" }} {% endif %}
 
                 <b>
                     {% if value[0].data.name %} {{ value[0].data.name }} {% else

crates/app/src/public/html/root.html

@@ -381,6 +381,37 @@ macros -%}
                 }
             }, 150);
         </script>
+        {% elif user and user.connections.LastFm and
+        config.connections.last_fm_key and
+        user.connections.LastFm[0].data.session_token %}
+        <script>
+            setTimeout(async () => {
+                if (window.last_fm_init) {
+                    return;
+                }
+
+                window.last_fm_init = true;
+                const user = "{{ user.connections.LastFm[0].data.name }}";
+                const session_token =
+                    "{{ user.connections.LastFm[0].data.session_token }}";
+
+                if (session_token) {
+                    // we already have a token
+                    const pull_playing = async () => {
+                        const playing = await trigger("last_fm::get_playing", [
+                            user,
+                            session_token,
+                        ]);
+                        await trigger("last_fm::publish_playing", [playing]);
+                    };
+
+                    await pull_playing();
+                    setInterval(pull_playing, 30_000);
+                } else {
+                    window.last_fm_needs_token = true;
+                }
+            }, 150);
+        </script>
         {% endif %}
     </body>
 </html>