adds skip, previous, current url

frontend/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>MPV Queue</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}

src/MediaPlayer.ts

@@ -17,7 +17,6 @@ export class MediaPlayer {
     private dataBuffer: string = '';
 
     constructor() {
-        // Create a random string of length 5
         const socketFilename = Math.random().toString(36).substring(2, 10);
         const socketPath = `/tmp/mpv-${socketFilename}`;
 
@@ -53,6 +52,13 @@ export class MediaPlayer {
             });
     }
 
+    public async getCurrentFile(): Promise<string> {
+        return this.writeCommand("get_property", ["stream-open-filename"])
+            .then((response) => {
+                return response.data;
+            });
+    }
+
     public async getPauseState(): Promise<boolean> {
         return this.writeCommand("get_property", ["pause"])
             .then((response) => {
@@ -67,10 +73,6 @@ export class MediaPlayer {
             });
     }
 
-    public async setVolume(volume: number) {
-        return this.writeCommand("set_property", ["volume", volume]);
-    }
-
     public async getIdle(): Promise<boolean> {
         return this.writeCommand("get_property", ["idle"])
             .then((response) => {
@@ -79,19 +81,31 @@ export class MediaPlayer {
     }
 
     public async append(url: string) {
-        return this.writeCommand("loadfile", [url, "append-play"]);
+        return this.modify(() => this.writeCommand("loadfile", [url, "append-play"]));
     }
 
     public async play() {
-        return this.writeCommand("set_property", ["pause", false]);
+        return this.modify(() => this.writeCommand("set_property", ["pause", false]));
     }
 
     public async pause() {
-        return this.writeCommand("set_property", ["pause", true]);
+        return this.modify(() => this.writeCommand("set_property", ["pause", true]));
+    }
+
+    public async skip() {
+        return this.modify(() => this.writeCommand("playlist-next", []));
+    }
+
+    public async previous() {
+        return this.modify(() => this.writeCommand("playlist-prev", []));
     }
 
     public async deletePlaylistItem(index: number) {
-        return this.writeCommand("playlist-remove", [index]);
+        return this.modify(() => this.writeCommand("playlist-remove", [index]));
+    }
+        
+    public async setVolume(volume: number) {
+        return this.modify(() => this.writeCommand("set_property", ["volume", volume]));
     }
 
     public subscribe(ws: WebSocket) {
@@ -102,6 +116,15 @@ export class MediaPlayer {
         this.eventSubscribers = this.eventSubscribers.filter(subscriber => subscriber !== ws);
     }
 
+    private async modify<T>(func: () => Promise<T>): Promise<T> {
+        return func()
+            .then((result) => {
+                // Notify all subscribers
+                this.handleEvent("user_modify", {});
+                return result;
+        });
+    }
+    
     private async writeCommand(command: string, args: any[]): Promise<any> {
         return new Promise((resolve, reject) => {
             const id = this.requestId++;

src/server.ts

@@ -2,62 +2,63 @@ import express from "express";
 import expressWs from "express-ws";
 import { MediaPlayer } from "./MediaPlayer";
 
-interface PlaylistAppendRequest {
-    url: string;
-}
-
 const app = express();
-expressWs(app);
 app.use(express.json());
+expressWs(app);
 
 const apiRouter = express.Router();
-
 const mediaPlayer = new MediaPlayer();
 
-apiRouter.get("/playlist", async (req, res) => {
+const withErrorHandling = (func: (req: any, res: any) => Promise<any>) => {
+    return async (req: any, res: any) => {
+        try {
+            await func(req, res);
+        } catch (error: any) {
+            res.status(500).send(JSON.stringify({ success: false, error: error.message }));
+        }
+    };
+};
+
+apiRouter.get("/playlist", withErrorHandling(async (req, res) => {
     const playlist = await mediaPlayer.getPlaylist();
     res.send(playlist);
-});
+}));
 
-apiRouter.post("/playlist", async (req, res) => {
-    try {
-        const { url } = req.body as PlaylistAppendRequest;
+apiRouter.post("/playlist", withErrorHandling(async (req, res) => {
+    const { url } = req.body as { url: string };
     await mediaPlayer.append(url);
     res.send(JSON.stringify({ success: true }));
-    } catch (error: any) {
-        res.status(500)
-            .send(JSON.stringify({ success: false, error: error.message }));
-    }
-});
+}));
 
-apiRouter.delete("/playlist/:index", async (req, res) => {
+apiRouter.delete("/playlist/:index", withErrorHandling(async (req, res) => {
     const { index } = req.params as { index: string };
     await mediaPlayer.deletePlaylistItem(parseInt(index));
     res.send(JSON.stringify({ success: true }));
-});
+}));
 
-apiRouter.post("/play", async (req, res) => {
-    try {
+apiRouter.post("/play", withErrorHandling(async (req, res) => {
     await mediaPlayer.play();
     res.send(JSON.stringify({ success: true }));
-    } catch (error: any) {
-        res.status(500)
-            .send(JSON.stringify({ success: false, error: error.message }));
-    }
-});
+}));
 
-apiRouter.post("/pause", async (req, res) => {
-    try {
+apiRouter.post("/pause", withErrorHandling(async (req, res) => {
     await mediaPlayer.pause();
     res.send(JSON.stringify({ success: true }));
-    } catch (error: any) {
-        res.status(500)
-            .send(JSON.stringify({ success: false, error: error.message }));
-    }
-});
+}));
 
-apiRouter.get("/nowplaying", async (req, res) => {
+apiRouter.post("/skip", withErrorHandling(async (req, res) => {
+    await mediaPlayer.skip();
+    res.send(JSON.stringify({ success: true }));
+}));
+
+apiRouter.post("/previous", withErrorHandling(async (req, res) => {
+    await mediaPlayer.previous();
+    res.send(JSON.stringify({ success: true }));
+}));
+
+apiRouter.get("/nowplaying", withErrorHandling(async (req, res) => {
     const nowPlaying = await mediaPlayer.getNowPlaying();
+    const currentFile = await mediaPlayer.getCurrentFile();
     const pauseState = await mediaPlayer.getPauseState();
     const volume = await mediaPlayer.getVolume();
     const idle = await mediaPlayer.getIdle();
@@ -67,15 +68,16 @@ apiRouter.get("/nowplaying", async (req, res) => {
         nowPlaying: nowPlaying, 
         isPaused: pauseState,
         volume: volume,
-        isIdle: idle
+        isIdle: idle,
+        currentFile: currentFile
     }));
-});
+}));
 
-apiRouter.post("/volume", async (req, res) => {
+apiRouter.post("/volume", withErrorHandling(async (req, res) => {
     const { volume } = req.body as { volume: number };
     await mediaPlayer.setVolume(volume);
     res.send(JSON.stringify({ success: true }));
-});
+}));
 
 apiRouter.ws("/events", (ws, req) => {
     console.log("Events client connected");