added video support, as well as a settings menu

prod.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Skribbl.io Auto Drawing Downloader
 // @namespace    http://tampermonkey.net/
-// @version      1.1
+// @version      1.2
 // @description  type shit
 // @author       ZStrike
 // @match        *://skribbl.io/*
@@ -14,21 +14,111 @@
 (function() {
     'use strict';
 
+    class config {
+        constructor() {
+            if (window.localStorage.getItem("autodl_config") == null) {
+                this.conf =  {"toggle":"1","format":"png","version":"1.2"}
+            } else {
+            this.conf =  JSON.parse(window.localStorage.getItem("autodl_config"))
+            }
+
+            this.toggElm = document.querySelector("#select-autodl_toggle")
+            this.formElm = document.querySelector("#select-autodl_format")
+
+            this.toggElm.value =  this.conf.toggle
+            this.formElm.value = this.conf.format
+            this.toggElm.onchange, this.formElm.onchange = this.update
+        }
+        update = () => {
+            this.conf.toggle = this.toggElm.value
+            this.conf.format = this.formElm.value
+            localStorage.setItem("autodl_config",JSON.stringify(this.conf))
+        }
+    }
+
+ function startRecording() {
+        const canvas = document.querySelector("canvas");
+        if (!canvas) {
+            console.warn("Canvas not found, can't start recording");
+            return;
+        }
+
+        try {
+            const stream = canvas.captureStream(10);
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+            recordedChunks = [];
+
+            mediaRecorder.ondataavailable = function(e) {
+                if (e.data.size > 0) {
+                    recordedChunks.push(e.data);
+                }
+            };
+
+            mediaRecorder.start();
+            console.log("[Hook] Recording started...");
+        } catch (err) {
+            console.error("[Hook] Error starting recording:", err);
+        }
+    }
+
+    function stopRecordingAndDownload(title) {
+        if (!mediaRecorder || mediaRecorder.state === 'inactive') return;
+
+        mediaRecorder.onstop = function() {
+
+            const blob = new Blob(recordedChunks, { type: 'video/webm' });
+            const url = URL.createObjectURL(blob);
+
+
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = title;
+            document.body.appendChild(a);
+
+            a.click();
+
+//cleanup stuff
+            setTimeout(() => {
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            }, 100);
+
+        };
+
+        mediaRecorder.stop();
+    }
+
+
+
+    window.addEventListener("DOMContentLoaded", (ev) => {
+        document.querySelector(".modal-container-settings").innerHTML += `<div class="group" id="autodlmenu"><div class="title"><div class="icon misc"></div><div class="desc" data-translate="text">Auto-Downloader</div></div><div class="item"><div class="key" data-translate="text">Feature Toggle</div><select id="select-autodl_toggle"><option value="0">Disabled<option value="1">Enabled</select><div class="key" data-translate="text">Download Type</div><select id="select-autodl_format"><option value="webm">Animated (.WEBM)<option value="png">Static (.PNG)</select></div></div>`
+        window.autodlconfig = new config()
+            for (const element of document.querySelectorAll('[class^="select-autodl_"]')) {
+                element.onchange = window.autodlconfig.update
+            }
+        })
+    
+    
+
+
     const OriginalWebSocket = window.WebSocket;
 
     const players = new Map();
     let currentDrawerId = null;
+    let mediaRecorder = null;
+    let recordedChunks = [];
 
     function downloadImage(blob,name) {
-        var b = document.createElement("a");
-        b.id = "autodl-trigger";
-        b.style.display = "none";
-        var pebis = URL.createObjectURL(blob);
-        b.href = pebis;
-        b.download = name;
-        document.body.appendChild(b);
-        document.querySelector("#autodl-trigger").click();
-        document.querySelector("#autodl-trigger").remove();
+        const downloadAnchor = document.createElement("a");
+        downloadAnchor.id = "autodl-trigger";
+        downloadAnchor.style.display = "none";
+        downloadAnchor.href = URL.createObjectURL(blob);
+        downloadAnchor.download = name;
+
+        document.body.appendChild(downloadAnchor);
+        downloadAnchor.click();
+        downloadAnchor.remove();
 
     }
     window.WebSocket = function(...args) {
@@ -57,6 +147,9 @@
                         const currentState = packet.data.state;
                         if (currentState && currentState.id === 4) {
                             currentDrawerId = currentState.data.id;
+                            if (window.autodlconfig.conf.toggle == true && window.autodlconfig.conf.format == "webm") {
+                                startRecording()
+                            }
                         }
                     }
 
@@ -71,6 +164,9 @@
 
                         if (gameState && gameState.id === 4) { // new turn
                             currentDrawerId = gameState.data.id;
+                            if (window.autodlconfig.conf.toggle == true && window.autodlconfig.conf.format == "webm") {
+                                startRecording()
+                            }
                         }
 
 
@@ -81,14 +177,18 @@
                             const drawerName = players.get(currentDrawerId) || 'Unknown Player';
 
 
-                            console.log('[Hook] Turn ended!');
                             console.log(`Drawer: ${drawerName} (ID: ${currentDrawerId})`);
                             console.log('Word:', turnData.word);
 
-
-                            document.querySelector("canvas").toBlob((a) => {
-                                downloadImage(a,`${turnData.word} by ${drawerName}`)
-                            });
+                            if (window.autodlconfig.conf.toggle == true) {
+                                if (window.autodlconfig.conf.format == "png") {
+                                    document.querySelector("canvas").toBlob((a) => {
+                                        downloadImage(a,`${turnData.word} by ${drawerName}`)
+                                    });
+                                } else {
+                                    stopRecordingAndDownload(`${turnData.word} by ${drawerName}.webm`)
+                                }
+                            }
                         }
                     }
                 }