feat: add ability to manually scrobble track (#91)

* feat: add button to manually scrobble from ui

* fix: ensure timestamp is in the past, log fix

* test: add integration test

client/api/api.ts

@@ -103,6 +103,19 @@ function logout(): Promise<Response> {
 
 function getCfg(): Promise<Config> {
     return fetch(`/apis/web/v1/config`).then(r => r.json() as Promise<Config>)
+
+}
+
+function submitListen(id: string, ts: Date): Promise<Response> {
+    const form = new URLSearchParams
+    form.append("track_id", id)
+    const ms = new Date(ts).getTime()
+    const unix= Math.floor(ms / 1000); 
+    form.append("unix", unix.toString())
+    return fetch(`/apis/web/v1/listen`, {
+        method: "POST",
+        body: form,
+    })
 }
 
 function getApiKeys(): Promise<ApiKey[]> {
@@ -232,6 +245,7 @@ export {
     deleteListen,
     getAlbum,
     getExport,
+    submitListen,
 }
 type Track = {
     id: number

client/app/components/modals/AddListenModal.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Modal } from "./Modal";
+import { AsyncButton } from "../AsyncButton";
+import { submitListen } from "api/api";
+import { useNavigate } from "react-router";
+
+interface Props {
+    open: boolean 
+    setOpen: Function
+    trackid: number
+}
+
+export default function AddListenModal({ open, setOpen, trackid }: Props) {
+    const [ts, setTS] = useState<Date>(new Date);
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+    const navigate = useNavigate()
+
+    const close = () => {
+        setOpen(false)
+    }
+
+    const submit = () => {
+        setLoading(true)
+        submitListen(trackid.toString(), ts)
+        .then(r => {
+            if(r.ok) {
+                setLoading(false)
+                navigate(0)
+            } else {
+                r.json().then(r => setError(r.error))
+                setLoading(false)
+            }
+        })
+    }
+
+    const formatForDatetimeLocal = (d: Date) => {
+        const pad = (n: number) => n.toString().padStart(2, "0");
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    };
+
+    return (
+        <Modal isOpen={open} onClose={close}>
+            <h2>Add Listen</h2>
+            <div className="flex flex-col items-center gap-4">
+                <input
+                    type="datetime-local"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    value={formatForDatetimeLocal(ts)}
+                    onChange={(e) => setTS(new Date(e.target.value))}
+                />
+                <AsyncButton loading={loading} onClick={submit}>Submit</AsyncButton>
+                <p className="error">{error}</p>
+            </div>
+        </Modal>
+    )
+}

client/app/routes/MediaItems/MediaLayout.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, useState } from "react";
 import { average } from "color.js";
 import { imageUrl, type SearchResponse } from "api/api";
 import ImageDropHandler from "~/components/ImageDropHandler";
-import { Edit, ImageIcon, Merge, Trash } from "lucide-react";
+import { Edit, ImageIcon, Merge, Plus, Trash } from "lucide-react";
 import { useAppContext } from "~/providers/AppProvider";
 import MergeModal from "~/components/modals/MergeModal";
 import ImageReplaceModal from "~/components/modals/ImageReplaceModal";
 import DeleteModal from "~/components/modals/DeleteModal";
 import RenameModal from "~/components/modals/EditModal/EditModal";
 import EditModal from "~/components/modals/EditModal/EditModal";
+import AddListenModal from "~/components/modals/AddListenModal";
 
 export type MergeFunc = (from: number, to: number, replaceImage: boolean) => Promise<Response>
 export type MergeSearchCleanerFunc = (r: SearchResponse, id: number) => SearchResponse
@@ -32,6 +33,7 @@ export default function MediaLayout(props: Props) {
     const [deleteModalOpen, setDeleteModalOpen] = useState(false);
     const [imageModalOpen, setImageModalOpen] = useState(false);
     const [renameModalOpen, setRenameModalOpen] = useState(false);
+    const [addListenModalOpen, setAddListenModalOpen] = useState(false);
     const { user } = useAppContext();
 
     useEffect(() => {
@@ -80,6 +82,12 @@ export default function MediaLayout(props: Props) {
                     </div>
                     { user &&
                     <div className="absolute left-1 sm:right-1 sm:left-auto -top-9 sm:top-1 flex gap-3 items-center">
+                        { props.type === "Track" &&
+                        <>
+                            <button title="Add Listen" className="hover:cursor-pointer" onClick={() => setAddListenModalOpen(true)}><Plus size={iconSize} /></button>
+                            <AddListenModal open={addListenModalOpen} setOpen={setAddListenModalOpen} trackid={props.id} />
+                        </>
+                        }
                         <button title="Edit Item" className="hover:cursor-pointer" onClick={() => setRenameModalOpen(true)}><Edit size={iconSize} /></button>
                         <button title="Replace Image" className="hover:cursor-pointer" onClick={() => setImageModalOpen(true)}><ImageIcon size={iconSize} /></button>
                         <button title="Merge Items" className="hover:cursor-pointer" onClick={() => setMergeModalOpen(true)}><Merge size={iconSize} /></button>