added video support, as well as a settings menu

menu.html

@@ -0,0 +1,18 @@
+<div class="group">
+    <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>
+            <option value="1">Enabled</option>
+        </select>
+        <div class="key" data-translate="text">Download Type</div><select
+            id="select-autodl_format">
+            <option value="gif">Animated (.GIF)</option>
+            <option value="png">Static (.PNG)</option>
+        </select>
+    </div>
+</div>

meta.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/*

min.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/*
@@ -10,4 +10,4 @@
 // @source       https://git.zstrike.dev/zstrike/skribbl-autosave
 // @run-at       document-start
 // ==/UserScript==
-!function(){"use strict";const e=window.WebSocket,t=new Map;let o=null;window.WebSocket=function(...a){const n=new e(...a);return n.addEventListener("message",function(e){if("string"==typeof e.data&&e.data.startsWith("42"))try{const a=JSON.parse(e.data.slice(2));if("data"===a[0]){const e=a[1];if(10===e.id){t.clear();const a=e.data.users;Array.isArray(a)&&a.forEach(e=>{t.set(e.id,e.name)});const n=e.data.state;n&&4===n.id&&(o=n.data.id)}if(1===e.id&&t.set(e.data.id,e.data.name),11===e.id){const a=e.data;if(a&&4===a.id&&(o=a.data.id),a&&5===a.id){const e=a.data,n=t.get(o)||"Unknown Player";console.log("[Hook] Turn ended!"),console.log(`Drawer: ${n} (ID: ${o})`),console.log("Word:",e.word),document.querySelector("canvas").toBlob(t=>{!function(e,t){var o=document.createElement("a");o.id="autodl-trigger",o.style.display="none";var a=URL.createObjectURL(e);o.href=a,o.download=t,document.body.appendChild(o),document.querySelector("#autodl-trigger").click(),document.querySelector("#autodl-trigger").remove()}(t,`${e.word} by ${n}`)})}}}}catch(e){console.error(e)}}),n}}();
+!function(){"use strict";class t{constructor(){null==window.localStorage.getItem("autodl_config")?this.conf={toggle:"1",format:"png",version:"1.2"}: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 o(){const t=document.querySelector("canvas");if(t)try{const o=t.captureStream(10);d=new MediaRecorder(o,{mimeType:"video/webm"}),c=[],d.ondataavailable=function(t){t.data.size>0&&c.push(t.data)},d.start(),console.log("[Hook] Recording started...")}catch(t){console.error("[Hook] Error starting recording:",t)}else console.warn("Canvas not found, can't start recording")}window.addEventListener("DOMContentLoaded",o=>{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 t;for(const t of document.querySelectorAll('[class^="select-autodl_"]'))t.onchange=window.autodlconfig.update});const e=window.WebSocket,a=new Map;let n=null,d=null,c=[];window.WebSocket=function(...t){const i=new e(...t);return i.addEventListener("message",function(t){var e;if("string"==typeof t.data&&t.data.startsWith("42"))try{const i=JSON.parse(t.data.slice(2));if("data"===i[0]){const t=i[1];if(10===t.id){a.clear();const e=t.data.users;Array.isArray(e)&&e.forEach(t=>{a.set(t.id,t.name)});const d=t.data.state;d&&4===d.id&&(n=d.data.id,1==window.autodlconfig.conf.toggle&&"webm"==window.autodlconfig.conf.format&&o())}if(1===t.id&&a.set(t.data.id,t.data.name),11===t.id){const i=t.data;if(i&&4===i.id&&(n=i.data.id,1==window.autodlconfig.conf.toggle&&"webm"==window.autodlconfig.conf.format&&o()),i&&5===i.id){const t=i.data,o=a.get(n)||"Unknown Player";console.log(`Drawer: ${o} (ID: ${n})`),console.log("Word:",t.word),1==window.autodlconfig.conf.toggle&&("png"==window.autodlconfig.conf.format?document.querySelector("canvas").toBlob(e=>{!function(t,o){const e=document.createElement("a");e.id="autodl-trigger",e.style.display="none",e.href=URL.createObjectURL(t),e.download=o,document.body.appendChild(e),e.click(),e.remove()}(e,`${t.word} by ${o}`)}):(e=`${t.word} by ${o}.webm`,d&&"inactive"!==d.state&&(d.onstop=function(){const t=new Blob(c,{type:"video/webm"}),o=URL.createObjectURL(t),a=document.createElement("a");a.style.display="none",a.href=o,a.download=e,document.body.appendChild(a),a.click(),setTimeout(()=>{document.body.removeChild(a),URL.revokeObjectURL(o)},100)},d.stop())))}}}}catch(t){console.error(t)}}),i}}();

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");
+        const downloadAnchor = document.createElement("a");
-        b.id = "autodl-trigger";
+        downloadAnchor.id = "autodl-trigger";
-        b.style.display = "none";
+        downloadAnchor.style.display = "none";
-        var pebis = URL.createObjectURL(blob);
+        downloadAnchor.href = URL.createObjectURL(blob);
-        b.href = pebis;
+        downloadAnchor.download = name;
-        b.download = name;
+
-        document.body.appendChild(b);
+        document.body.appendChild(downloadAnchor);
-        document.querySelector("#autodl-trigger").click();
+        downloadAnchor.click();
-        document.querySelector("#autodl-trigger").remove();
+        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);
 
-
+                            if (window.autodlconfig.conf.toggle == true) {
-                            document.querySelector("canvas").toBlob((a) => {
+                                if (window.autodlconfig.conf.format == "png") {
-                                downloadImage(a,`${turnData.word} by ${drawerName}`)
+                                    document.querySelector("canvas").toBlob((a) => {
-                            });
+                                        downloadImage(a,`${turnData.word} by ${drawerName}`)
+                                    });
+                                } else {
+                                    stopRecordingAndDownload(`${turnData.word} by ${drawerName}.webm`)
+                                }
+                            }
                         }
                     }
                 }