added video support, as well as a settings menu
This commit is contained in:
18
menu.html
Normal file
18
menu.html
Normal file
@@ -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>
|
||||
@@ -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/*
|
||||
|
||||
@@ -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}}();
|
||||
130
prod.user.js
130
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`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user