From a9f07d59d80480935ac1b9770dc2d97bc58b41e5 Mon Sep 17 00:00:00 2001
From: Pedro <pedro2007.prrr@gmail.com>
Date: Sat, 25 Nov 2023 13:29:13 -0300
Subject: [PATCH] You can now record a webp (still need to add options)

---
 js/minecraft-tip-impl.js | 32 +++++++++++++++++---------------
 js/minecraft-tip.js      |  1 -
 minecrafttooltips.html   |  5 +++--
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/js/minecraft-tip-impl.js b/js/minecraft-tip-impl.js
index 22957de..f100fed 100644
--- a/js/minecraft-tip-impl.js
+++ b/js/minecraft-tip-impl.js
@@ -32,20 +32,22 @@ setInterval(() => {
     }
 }, 50);
 
-// followerTooltip.classList.add("hidden");
-// const minecraftItems = document.getElementsByClassName("minecraft-item");
+function startRecording() {
+  const chunks = [];
+  const stream = tooltip.captureStream();
+  const rec = new MediaRecorder(stream);
+  
+  rec.ondataavailable = e => chunks.push(e.data);
 
-// for (let i = 0; i < minecraftItems.length; i++) {
-//   minecraftItems.item(i).addEventListener('mouseenter', (e) => {
-//     if (!e.target.dataset.mctitle) return;
-//     followerTooltip.classList.remove("hidden");
-//     getTextFromJSON(e.target.dataset.mctitle).get().then(str => {
-//       setTooltipText(followerTooltip, str);
-//     });
-//   });
+  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));
+  
+  rec.start();
+  setTimeout(()=>rec.stop(), Math.PI * 2000);
+}
 
-//   minecraftItems.item(i).addEventListener('mouseleave', (e) => {
-//     followerTooltip.classList.add("hidden");
-//   });
-// }
-// document.body.appendChild(followerTooltip);
\ No newline at end of file
+function exportVid(blob) {
+  const a = document.createElement('a');
+  a.download = 'myvid.webm';
+  a.href = URL.createObjectURL(blob);
+  a.click();
+}
\ No newline at end of file
diff --git a/js/minecraft-tip.js b/js/minecraft-tip.js
index 8fb1a36..0f56136 100644
--- a/js/minecraft-tip.js
+++ b/js/minecraft-tip.js
@@ -349,7 +349,6 @@ class TextFormatting {
       if (value) {
         let originalFillStyle = ctx.fillStyle;
         ctx.fillStyle = "#" + ('000000' + this.getFormattingOption(TextFormatting.FormattingOptions.COLOR)().toString(16).toUpperCase()).slice(-6);
-        console.log((textRenderingContext.x + textRenderingContext.left) - 2, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight()) + (textRenderingContext.line > 0 && settings.firstLineIsHigher ? 4 : 0)) - 7, textRenderer.getWidth(textRenderingContext.char) + 2, 2);
         ctx.fillRect((textRenderingContext.x + textRenderingContext.left) - 2, (textRenderingContext.y + (textRenderingContext.line * textRenderer.getLineHeight()) + (textRenderingContext.line > 0 && settings.firstLineIsHigher ? 4 : 0)) - 7, textRenderer.getWidth(textRenderingContext.char) + 2, 2);
         ctx.fillStyle = originalFillStyle;
       }
diff --git a/minecrafttooltips.html b/minecrafttooltips.html
index 869bff1..8afa117 100644
--- a/minecrafttooltips.html
+++ b/minecrafttooltips.html
@@ -16,7 +16,6 @@
 <link rel="preconnect" href="/assets/Minecraft-Font/Minecraft.ttf" crossorigin>
 
 <link rel="stylesheet" href="{{ site.baseurl }}/css/minecrafttooltips.css">
-<k-manager class="k-manager" id="k-manager"></k-manager>
 <div id="minecraft-tip-container" class="minecraft-tip-container">
 	<div id="minecraft-tip" class="minecraft-tip"><div id="tip-text-line" class="text-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div><div id="tip-shadow-line" class="shadow-line"><span data-string='{"translate":"minecrafttooltips-defaulttooltip"}'></span></div></div>
 	<div class="minecraft-tip-border center" id="minecraft-tip-border"></div>
@@ -33,7 +32,7 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
 </div>
 <br>
 <div class="download-tooltip-wrapper info-bubble" data-aria-label='{"translate":"minecrafttooltips-downloadtooltip"}'>
-	<button class="icon-button" id="download-tooltip"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	<button class="icon-button" id="download-tooltip" onclick="startRecording()"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 		viewBox="0 0 374.1 374.1" style="fill: currentColor; width: 15px;" xml:space="preserve">
 	<path d="M344.1,207.5c-16.6,0-30,13.4-30,30v76.6h-254v-76.6c0-16.6-13.4-30-30-30s-30,13.4-30,30v106.6c0,16.6,13.4,30,30,30h314
 		c16.6,0,30-13.4,30-30V237.5C374.1,220.9,360.6,207.5,344.1,207.5z"/>
@@ -119,6 +118,8 @@ <h1 data-string='{"translate":"minecrafttooltips-title"}'></h1>
 </div>
 
 <script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
+<script src="{{ site.baseurl }}/js/CCapture.min.js"></script>
+<script src="{{ site.baseurl }}/js/gif.js"></script>
 <script src="{{ site.baseurl }}/js/minecraft-tip.js"></script>
 <script src="{{ site.baseurl }}/js/minecraft-tip-impl.js"></script>
 <script src="/modules/dom-to-image.js"></script>
\ No newline at end of file