diff --git a/README.md b/README.md index 1813910..ba6d275 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ Add a piano to any webpage. If you want shorter code for some reason, replace the big `disc:[[],[{ ... timeout:null}]]` block with `disc:[[]]`. This deletes the sample tracks. +![piano](gif/piano.gif) + Left Menu: - Wave: waveform type @@ -81,8 +83,6 @@ Right Menu: - search console output for the track (disc) you want to save and paste it at the end of `piano.disc` list in the script - only useful with a local copy of the source code (e.g. me and pull requesters) -![piano](gif/piano.gif) - ## [Mouselight.js](min/mouselight.min.js) Simulate a flashlight. Works best on websites with deeply nested HTML elements. @@ -105,6 +105,24 @@ A replicated memory game. See **Lu**mosity's [**pi**nball **re**call](https://lu ![lupire](gif/lupire.gif) +## [Censor.js](min/censor.min.js) + +Pixelates all visible img and video elements. Uncensors on hover. + +![censor](gif/censor.gif) + +Very buggy. Issues include: + +- most lazy-loaded images won't load at all +- may not update to style changes of img or video +- doesn't work for iframes +- GIFs only show the first frame +- layout shifts +- will shrink or stretch if img or video doesn't fill its space +- hovering doesn't always uncensor + +Instead of fixing these, I made the bookmarklet togglable. Click twice to reset the censors. (This fixes the first two issues only). + # YouTube Tools These bookmarklets are specifically for YouTube. They're written for desktop, but they should work on the mobile website too. diff --git a/censor.js b/censor.js new file mode 100644 index 0000000..39da01e --- /dev/null +++ b/censor.js @@ -0,0 +1,118 @@ +javascript: +var style = document.createElement("style"); +style.innerHTML = `.censor { + opacity: 1 !important; + image-rendering: pixelated !important; +} +.censor + img { + display: none !important; +} +.censor + video { + visibility: hidden !important; +} +.censor-parent:hover .censor { + display: none !important; +} +.censor-parent:hover .censor + img { + display: unset !important; +} +.censor-parent:hover .censor + video { + visibility: visible !important; +}`; +var sensed; +var censors; +var af; +var quality = 3; /* higher = more pixels */ + +function onScreen(r) { + return r.right > 0 && r.bottom > 0 && r.left < innerWidth && r.top < innerHeight; +} + +function copyStyle(donor, recipient, sizeOnly) { + var donorStyle = getComputedStyle(donor); + var keys = Object.keys(donorStyle); + if (sizeOnly) { + keys = ["width", "height"]; + } + for (var key of keys) { + recipient.style[key] = donorStyle[key]; + } +} + +function updateCensor(e, canvas) { + var rect = e.getBoundingClientRect(); + if (onScreen(rect)) { + var equalizer = Math.log2(Math.max(rect.width * rect.height, 2)); + canvas.width = rect.width * quality / equalizer; + canvas.height = rect.height * quality / equalizer; + if (af % 120 == 0) { /* delay because expensive */ + copyStyle(e, canvas, true); + } + + var context = canvas.getContext("2d"); + context.drawImage(e, 0, 0, canvas.width, canvas.height); + return canvas; + } +} + +function createCensor(e) { + var rect = e.getBoundingClientRect(); + if (onScreen(rect)) { + var canvas = document.createElement("canvas"); + canvas.className = "censor"; + + var equalizer = Math.log2(Math.max(rect.width * rect.height, 2)); + canvas.width = rect.width * quality / equalizer; + canvas.height = rect.height * quality / equalizer; + copyStyle(e, canvas); + + var context = canvas.getContext("2d"); + context.drawImage(e, 0, 0, canvas.width, canvas.height); + + e.parentElement.insertBefore(canvas, e); + e.parentElement.classList.add("censor-parent"); + + return canvas; + } +} + +function sense() { + var es = document.querySelectorAll("img,video"); + for (var e of es) { + var i = sensed.indexOf(e); + if (i >= 0) { + if (e.tagName == "VIDEO" && !e.paused) { + updateCensor(e, censors[i]); + } + } + else { + if (e.tagName == "VIDEO" || e.complete) { + var c = createCensor(e); + if (c) { + censors.push(c); + sensed.push(e); + } + } + } + } + af = requestAnimationFrame(sense); + /* af = requestAnimationFrame(z => setTimeout(sense, 60)); */ +} + +if (af) { + cancelAnimationFrame(af); + af = 0; + for (var c of censors) { + c.remove(); + } + for (var e of sensed) { + e.parentElement.classList.remove("censor-parent"); + } + style.remove(); +} +else { + document.body.appendChild(style); + sensed = []; + censors = []; + sense(); +} diff --git a/gif/censor.gif b/gif/censor.gif new file mode 100644 index 0000000..bb68e27 Binary files /dev/null and b/gif/censor.gif differ