You can now record a webp (still need to add options)

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);
+function exportVid(blob) {
+ const a = document.createElement('a');
+ a.download = 'myvid.webm';
+ a.href = URL.createObjectURL(blob);
+ a.click();
+}

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;
  }

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>