[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_104":85,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",116,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","0e126200-7228-11f0-89a4-0224a6c84d84","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React from \"npm:react\";\nimport { renderToString } from \"npm:react-dom/server\";\n\n// Define the styles as a template literal string\nconst styles = `\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #f0f2f5;\n color: #1c1e21;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin: 0;\n padding: 2rem;\n min-height: 100vh;\n box-sizing: border-box;\n }\n .container {\n text-align: center;\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n .controls {\n margin: 1.5rem 0;\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n }\n input[type=\"text\"] {\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n min-width: 250px;\n }\n button {\n padding: 0.75rem 1.5rem;\n border: none;\n background-color: #007bff;\n color: white;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n #shareBtn {\n display: none;\n }\n #copyBtn {\n display: none;\n }\n button:hover {\n background-color: #0056b3;\n }\n canvas {\n border: 1px solid #ccc;\n width: 1080px; /* 1080 / 4 */\n height: 1920px; /* 1920 / 4 */\n visibility: hidden;\n display: none;\n border-radius: 4px;\n }\n\n div#last-four-watched > img {\n width: 270px;\n height: 480px;\n }\n\n .loader {\n border: 5px solid #f3f3f3;\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n border-top: 5px solid #555;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n display: none;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n`;\n\n// Define the client-side script that will run in the browser\nconst clientScript = `\n (() => {\n const canvas = document.getElementById('posterCanvas');\n const generateBtn = document.getElementById('generateBtn');\n const shareBtn = document.getElementById('shareBtn');\n const copyBtn = document.getElementById('copyBtn');\n const lastFourWatchedDiv = document.getElementById('last-four-watched');\n const letterboxdHandle = document.getElementById('letterboxdHandle');\n const loaderDiv = document.querySelector(\".loader\");\n const ctx = canvas.getContext('2d');\n ctx.imageSmoothingQuality = \"high\";\n\n function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n // This is crucial for loading cross-domain images onto the canvas\n img.crossOrigin = \"Anonymous\";\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = src;\n });\n }\n\n async function sharePoster() {\n const blob = await (await fetch(document.querySelector('#last-four-watched > img').getAttribute('src'))).blob();\n const file = new File([blob], 'fileName.png', { type: blob.type });\n navigator.share({\n title: 'Letterboxd Last Four Watched',\n files: [file],\n }).catch(() => {});\n }\n\n async function onBegin() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'block';\n if (lastFourWatchedDiv.firstChild) {\n lastFourWatchedDiv.removeChild(lastFourWatchedDiv.firstChild);\n }\n generateBtn.disabled = true;\n }\n\n async function onSuccess() {\n shareBtn.style.display = 'block';\n copyBtn.style.display = 'block';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function onError() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function drawPosters(posterUrls) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'black';\n ctx.textAlign = 'center';\n ctx.font = '48px Arial';\n ctx.fillText('Loading Posters...', canvas.width / 2, canvas.height / 2);\n\n try {\n const images = await Promise.all(posterUrls.map(loadImage));\n const quadrantWidth = canvas.width / 2;\n const quadrantHeight = canvas.height / 2;\n\n ctx.drawImage(images[0], 0, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[1], quadrantWidth, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[2], 0, quadrantHeight, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[3], quadrantWidth, quadrantHeight, quadrantWidth, quadrantHeight);\n\n const dataImage = canvas.toDataURL('image/png');\n const img = new Image();\n img.src = dataImage;\n img.onload = () => {\n onSuccess();\n }\n lastFourWatchedDiv.appendChild(img);\n } catch (error) {\n console.error('Failed to load one or more images:', error);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'red';\n ctx.fillText('Could not load images.', canvas.width / 2, canvas.height / 2);\n onError();\n }\n }\n\n async function generatePosters() {\n try {\n await onBegin();\n \n const response = await fetch(\\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/\\${letterboxdHandle.value || letterboxdHandle.placeholder}\\`);\n const html = await response.text();\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const result = doc.evaluate(\\`//*[@id=\"recent-activity\"]/ul/li[*]/div[contains(@class, 'film-poster')]\\`, doc, null, XPathResult.ANY_TYPE, null);\n const posterUrls = [];\n let currentNode = result.iterateNext();\n while (currentNode) {\n const slug = currentNode.getAttribute('data-film-slug');\n const alt = currentNode.getAttribute('data-alt-poster') || slug;\n const width = currentNode.getAttribute('data-image-width');\n const height = currentNode.getAttribute('data-image-height');\n const proxyPosterUrl = \\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/ajax/poster/film/\\${slug}/std/\\${alt}/\\${width}x\\${height}/\\`;\n const posterHtml = await (await fetch(proxyPosterUrl)).text();\n \n const posterParser = new DOMParser();\n const posterDoc = posterParser.parseFromString(posterHtml, 'text/html');\n \n const posterUrl = posterDoc.querySelector('img').getAttribute('src').replace(/-0-\\\\d+-0-\\\\d+-crop\\\\.jpg/, '-0-2000-0-3000-crop.jpg');\n posterUrls.push(\\`https://http-proxy.val.run/?finalUrl=\\${posterUrl}\\`);\n currentNode = result.iterateNext();\n }\n \n drawPosters(posterUrls);\n\n } catch (_error) {\n console.error('Failed to load one or more images:', error);\n onError();\n }\n }\n\n async function copyToClipboard() {\n await canvas.toBlob(async (blob) => {\n await navigator.clipboard.write([\n new ClipboardItem({ 'image/png': blob })\n ]);\n },'image/png');\n }\n\n shareBtn.addEventListener('click', async () => {\n sharePoster();\n });\n\n copyBtn.addEventListener('click', async () => {\n copyToClipboard();\n });\n\n letterboxdHandle.addEventListener('keydown', async (event) => {\n if (event.keyCode === 13) {\n generateBtn.click();\n }\n });\n\n generateBtn.addEventListener('click', async () => {\n generatePosters();\n });\n })();\n`;\n\n/**\n * A React component that renders the entire HTML page structure.\n */\nconst LetterboxdCanvasPage = () => {\n return (\n \n \n \n \n Letterboxd Last Four Watched\n \n \n \n

Letterboxd Last Four Watched

\n Enter a username to generate your last four watched grid.\n

\n\n

\n \n \n

\n\n

\n \n \n

\n\n {/* The client-side logic is injected here */}\n \n \n \n );\n};\n\n// Main export function that renders the React component to an HTML string\nexport const _ = (_request: Request) =>\n new Response(\n renderToString(),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );","/** @jsxImportSource https://esm.sh/react */\nimport { renderToString } from \"npm:react-dom/server\";\n\n// Define the styles as a template literal string\nconst styles = `\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #f0f2f5;\n color: #1c1e21;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin: 0;\n padding: 2rem;\n min-height: 100vh;\n box-sizing: border-box;\n }\n .container {\n text-align: center;\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n .controls {\n margin: 1.5rem 0;\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n }\n input[type=\"text\"] {\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n min-width: 250px;\n }\n button {\n padding: 0.75rem 1.5rem;\n border: none;\n background-color: #007bff;\n color: white;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n #shareBtn {\n display: none;\n }\n #copyBtn {\n display: none;\n }\n button:hover {\n background-color: #0056b3;\n }\n canvas {\n border: 1px solid #ccc;\n width: 1080px; /* 1080 / 4 */\n height: 1920px; /* 1920 / 4 */\n visibility: hidden;\n display: none;\n border-radius: 4px;\n }\n\n div#last-four-watched > img {\n width: 270px;\n height: 480px;\n }\n\n .loader {\n border: 5px solid #f3f3f3;\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n border-top: 5px solid #555;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n display: none;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n`;\n\n// Define the client-side script that will run in the browser\nconst clientScript = `\n (() => {\n const canvas = document.getElementById('posterCanvas');\n const generateBtn = document.getElementById('generateBtn');\n const shareBtn = document.getElementById('shareBtn');\n const copyBtn = document.getElementById('copyBtn');\n const lastFourWatchedDiv = document.getElementById('last-four-watched');\n const letterboxdHandle = document.getElementById('letterboxdHandle');\n const loaderDiv = document.querySelector(\".loader\");\n const ctx = canvas.getContext('2d');\n ctx.imageSmoothingQuality = \"high\";\n\n function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n // This is crucial for loading cross-domain images onto the canvas\n img.crossOrigin = \"Anonymous\";\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = src;\n });\n }\n\n async function sharePoster() {\n const blob = await (await fetch(document.querySelector('#last-four-watched > img').getAttribute('src'))).blob();\n const file = new File([blob], 'fileName.png', { type: blob.type });\n navigator.share({\n title: 'Letterboxd Last Four Watched',\n files: [file],\n }).catch(() => {});\n }\n\n async function onBegin() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'block';\n if (lastFourWatchedDiv.firstChild) {\n lastFourWatchedDiv.removeChild(lastFourWatchedDiv.firstChild);\n }\n generateBtn.disabled = true;\n }\n\n async function onSuccess() {\n shareBtn.style.display = 'block';\n copyBtn.style.display = 'block';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function onError() {\n shareBtn.style.display = 'none';\n copyBtn.style.display = 'none';\n loaderDiv.style.display = 'none';\n generateBtn.disabled = false;\n }\n\n async function drawPosters(posterUrls) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'black';\n ctx.textAlign = 'center';\n ctx.font = '48px Arial';\n ctx.fillText('Loading Posters...', canvas.width / 2, canvas.height / 2);\n\n try {\n const images = await Promise.all(posterUrls.map(loadImage));\n const quadrantWidth = canvas.width / 2;\n const quadrantHeight = canvas.height / 2;\n\n ctx.drawImage(images[0], 0, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[1], quadrantWidth, 0, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[2], 0, quadrantHeight, quadrantWidth, quadrantHeight);\n ctx.drawImage(images[3], quadrantWidth, quadrantHeight, quadrantWidth, quadrantHeight);\n\n const dataImage = canvas.toDataURL('image/png');\n const img = new Image();\n img.src = dataImage;\n img.onload = () => {\n onSuccess();\n }\n lastFourWatchedDiv.appendChild(img);\n } catch (error) {\n console.error('Failed to load one or more images:', error);\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'red';\n ctx.fillText('Could not load images.', canvas.width / 2, canvas.height / 2);\n onError();\n }\n }\n\n async function generatePosters() {\n try {\n await onBegin();\n \n const response = await fetch(\\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/\\${letterboxdHandle.value || letterboxdHandle.placeholder}\\`);\n const html = await response.text();\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const result = doc.evaluate(\\`//*[@id=\"recent-activity\"]/ul/li[*]/div[contains(@class, 'film-poster')]\\`, doc, null, XPathResult.ANY_TYPE, null);\n const posterUrls = [];\n let currentNode = result.iterateNext();\n while (currentNode) {\n const slug = currentNode.getAttribute('data-film-slug');\n const alt = currentNode.getAttribute('data-alt-poster') || slug;\n const width = currentNode.getAttribute('data-image-width');\n const height = currentNode.getAttribute('data-image-height');\n const proxyPosterUrl = \\`https://http-proxy.val.run/?finalUrl=https://letterboxd.com/ajax/poster/film/\\${slug}/std/\\${alt}/\\${width}x\\${height}/\\`;\n const posterHtml = await (await fetch(proxyPosterUrl)).text();\n \n const posterParser = new DOMParser();\n const posterDoc = posterParser.parseFromString(posterHtml, 'text/html');\n \n const posterUrl = posterDoc.querySelector('img').getAttribute('src').replace(/-0-\\\\d+-0-\\\\d+-crop\\\\.jpg/, '-0-2000-0-3000-crop.jpg');\n posterUrls.push(\\`https://http-proxy.val.run/?finalUrl=\\${posterUrl}\\`);\n currentNode = result.iterateNext();\n }\n \n drawPosters(posterUrls);\n\n } catch (_error) {\n console.error('Failed to load one or more images:', error);\n onError();\n }\n }\n\n async function copyToClipboard() {\n await canvas.toBlob(async (blob) => {\n await navigator.clipboard.write([\n new ClipboardItem({ 'image/png': blob })\n ]);\n },'image/png');\n }\n\n shareBtn.addEventListener('click', async () => {\n sharePoster();\n });\n\n copyBtn.addEventListener('click', async () => {\n copyToClipboard();\n });\n\n letterboxdHandle.addEventListener('keydown', async (event) => {\n if (event.keyCode === 13) {\n generateBtn.click();\n }\n });\n\n generateBtn.addEventListener('click', async () => {\n generatePosters();\n });\n })();\n`;\n\n/**\n * A React component that renders the entire HTML page structure.\n */\nconst LetterboxdCanvasPage = () => {\n return (\n \n \n \n \n Letterboxd Last Four Watched\n \n \n \n

Letterboxd Last Four Watched

\n Enter a username to generate your last four watched grid.\n

\n\n

\n \n \n

\n\n

\n \n \n

Diff · v116