"use strict"; /* global document, navigator, send, window */ initializePlayground(); // pre-fill example one if search parameter exists if (window.location.href.search && window.location.href.split("?url=")[1]) { const searchParameter = window.location.href.split("?url=")[1]; fetchMetadata(1, searchParameter); // eslint-disable-line padding-line-between-statements } document.querySelector("body").addEventListener("click", event => { if (event.target.dataset.action) { event.preventDefault(); document.querySelector(".playground").classList.add("waiting"); handleExamples(event.target); } if ( event.target.classList && event.target.classList[0] === "playground-content__meme__canvas__thumbnail" ) { for (const thumbnail of document.querySelectorAll(".playground-content__meme__canvas__thumbnail")) thumbnail.classList.remove("selected"); event.target.classList.add("selected"); updateCanvas(event.target); } }); document.getElementById("fetch-claim-uri").addEventListener("keyup", event => { const key = event.keyCode ? event.keyCode : event.which; switch(true) { case document.querySelector("[data-example='1']").classList.contains("active"): if ( key === 13 && document.getElementById("fetch-claim-uri").value.length > 0 ) fetchMetadata(1, document.getElementById("fetch-claim-uri").value); break; case document.querySelector("[data-example='3']").classList.contains("active"): if ( key === 13 && document.getElementById("fetch-claim-uri").value.length > 0 ) fetchMetadata(3, document.getElementById("fetch-claim-uri").value); break; default: break; } }); document.querySelector("body").addEventListener("keyup", event => { if ( event.target.id === "meme-top-line" || event.target.id === "meme-bottom-line" ) updateCanvas(); }); // H E L P E R S function clearCanvas(canvas) { const ctx = canvas.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "copy"; ctx.strokeStyle = "transparent"; ctx.beginPath(); ctx.lineTo(0, 0); ctx.stroke(); ctx.restore(); } function detectLanguageAndUpdate() { // eslint-disable-line no-unused-vars const compare = (array1, array2) => array2.filter(value => array2.indexOf(value)); // compare two arrays and get match(es) const memeLocaleObject = document.getElementById("meme-language").children; const memeLocales = []; const userLocales = []; for (const language of navigator.languages) userLocales.push(language); for (const key in memeLocaleObject) { if (memeLocaleObject[key] && memeLocaleObject[key].value) memeLocales.push(memeLocaleObject[key].value); } if ( memeLocales.length && userLocales.length && compare(memeLocales, userLocales).length ) document.querySelector(`option[value="${compare(memeLocales, userLocales)[0]}"]`).setAttribute("selected", true); } function debounce(func, wait, immediate) { let timeout; return function() { const context = this; const args = arguments; const later = () => { timeout = null; if (!immediate) func.apply(context, args); }; const callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } function initializePlayground() { document.querySelector(".playground").classList.add("waiting"); document.querySelector("#fetch-claim-uri").value = ""; document.querySelector("#fetch-claim-uri").focus(); document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active"); send(JSON.stringify({ message: "landed on playground" })); setTimeout(() => { document.querySelector(".playground-navigation__example:nth-child(1)").click(); }, 300); } function fetchMetadata(exampleNumber, data) { if (!exampleNumber) return; switch(exampleNumber) { case 1: send(JSON.stringify({ claim: data, message: "fetch metadata", method: "resolve", example: exampleNumber })); document.getElementById("fetch-claim-uri").value = data; document.getElementById("playground-results").innerHTML = playgroundResponseForExample1(data); document.getElementById("playground-loader").style.display = "none"; break; case 2: send(JSON.stringify({ data: data, message: "fetch metadata", method: "publish", example: exampleNumber })); document.getElementById("playground-results").innerHTML = playgroundResponseForExample2(getMemeInfo()); document.getElementById("playground-loader").style.display = "none"; break; case 3: send(JSON.stringify({ claim: data, message: "fetch metadata", method: "claim_tip", example: exampleNumber })); document.getElementById("fetch-claim-uri").value = data; document.getElementById("playground-results").innerHTML = playgroundResponseForExample3(data); document.getElementById("playground-loader").style.display = "none"; break; default: break; } } function getMemeInfo() { // TODO: Error handling return { description: document.getElementById("meme-description").value, file_path: document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), language: document.getElementById("meme-language").value, license: document.getElementById("meme-license").value, name: document.getElementById("meme-title").value, nsfw: document.getElementById("meme-nsfw-flag").checked, title: document.getElementById("meme-title").value }; } function playgroundResponseForExample1(source) { return `

# With the LBRY app/daemon running locally, you can use this in your Terminal
curl --header "Content-Type: application/json" --data '{ "method": "resolve", "params": { "uri": "${source}" }}' http://localhost:5279    
`; } function playgroundResponseForExample2(source) { return `

# With the LBRY app/daemon running locally, you can use this in your Terminal
curl --header "Content-Type: application/json" --data '{ "method": "publish", "params": { "name": "${source.name}", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "${source.description}", "title": "${source.title}", "language": "${source.language}", "license": "${source.license}", "nsfw": ${source.nsfw} }}}' http://localhost:5279    
    
`; } function playgroundResponseForExample3(source) { document.querySelector("[data-action='execute claim']").disabled = true; return `

# With the LBRY app/daemon running locally, you can use this in your Terminal
curl --header "Content-Type: application/json" --data '{ "method": "claim_tip", "params": { "amount": "0.001", "claim_id": "${source}" }}' http://localhost:5279    
    
`; } const handleExamples = debounce(event => { let exampleNumber; const data = event.dataset; if (!parseInt(document.querySelector(".playground-navigation__example.active").dataset.example)) return; exampleNumber = parseInt(document.querySelector(".playground-navigation__example.active").dataset.example); switch(data.action) { case "choose claim": fetchMetadata(exampleNumber, data.claimId); if (document.querySelector(".playground-navigation__example:nth-child(3)").classList.contains("active")) document.getElementById("fetch-claim-uri").value = event.dataset.name + "#" + event.dataset.claimId; break; case "execute claim": if (!document.getElementById("fetch-claim-uri").value.length > 0) return; fetchMetadata(exampleNumber, document.getElementById("fetch-claim-uri").value); break; case "playground, example 1": if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) { document.getElementById("playground-loader").classList.remove("playground-content__meme"); document.getElementById("playground-loader").classList.add("playground-content__trends"); } document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.querySelector("#playground-url button").textContent = "Resolve"; if (document.getElementById("playground-url").style.display === "none") document.getElementById("playground-url").removeAttribute("style"); for (const example of document.querySelectorAll(".playground-navigation__example")) example.classList.remove("active"); document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active"); document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-loader").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style"); send(JSON.stringify({ message: `request for ${data.action}` })); break; case "playground, example 2": if (document.getElementById("playground-loader").classList.contains("playground-content__trends")) { document.getElementById("playground-loader").classList.remove("playground-content__trends"); document.getElementById("playground-loader").classList.add("playground-content__meme"); } document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("playground-url").style.display = "none"; for (const example of document.querySelectorAll(".playground-navigation__example")) example.classList.remove("active"); document.querySelector(".playground-navigation__example:nth-child(2)").classList.add("active"); document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-loader").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style"); send(JSON.stringify({ message: `request for ${data.action}` })); break; case "playground, example 3": if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) { document.getElementById("playground-loader").classList.remove("playground-content__meme"); document.getElementById("playground-loader").classList.add("playground-content__trends"); } document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.querySelector("#playground-url button").textContent = "Tip"; if (document.getElementById("playground-url").style.display === "none") document.getElementById("playground-url").removeAttribute("style"); for (const example of document.querySelectorAll(".playground-navigation__example")) example.classList.remove("active"); document.querySelector(".playground-navigation__example:nth-child(3)").classList.add("active"); document.getElementById("playground-loader").innerHTML = ""; document.getElementById("playground-results").innerHTML = ""; document.getElementById("playground-loader").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style"); send(JSON.stringify({ message: `request for ${data.action}` })); break; case "upload image": fetchMetadata(exampleNumber, getMemeInfo()); break; default: break; } }, 10); function initCanvas() { // eslint-disable-line no-unused-vars const canvas = document.getElementById("meme-canvas"); const canvasHeight = 600; const canvasWidth = 800; const ctx = canvas.getContext("2d"); const img = document.getElementById("base-image"); clearCanvas(canvas); ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); ctx.fillStyle = "white"; ctx.font = "bold 48px 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; // ctx.font = "bold 48px Arial"; ctx.lineJoin = "round"; ctx.lineWidth = 4; ctx.strokeStyle = "black"; ctx.textAlign = "center"; ctx.textBaseline = "top"; positionCanvasText(ctx, canvasHeight, canvasWidth); } function positionCanvasText(canvas, height, width) { canvas.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40); canvas.fillText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40); canvas.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80)); canvas.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80)); } function updateCanvas(imageSource) { const canvas = document.getElementById("meme-canvas"); const canvasHeight = 600; const canvasWidth = 800; const ctx = canvas.getContext("2d"); const img = document.getElementById("base-image"); clearCanvas(canvas); if (imageSource) { ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight); img.src = imageSource.src; } else { ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); } positionCanvasText(ctx, canvasHeight, canvasWidth); }