AMULET - YouTube Uploader

\n {/* */}\n \n \n\n {/* */}\n

Google Authorization Required

\n Link your Google account to authorize YouTube video uploads.\n

\n\n \n

\n Step 1\n Open Google authentication authorization path:\n

\n\n \n 🔐 Sign in with Google\n \n\n

\n Step 2\n Submit your Google verification token code:\n

\n\n \n \n

\n\n {/* */}\n

Upload Video

\n Transmit video files directly to your authenticated YouTube\n channel.\n

\n\n \n \n Select Video File (.mp4, .mkv, etc.)\n \n \n\n \n Video Title\n \n \n\n \n Video Description\n \n \n \n\n \n \n \n \n

\n\n \n \n \n );\n};",[156],"1ac41865-2bde-4e89-9823-c8cbf50477ab","frontend-style.css","8b6a0e88-6287-11f1-9812-1607ee4eb77e",43,["D",1780847001631],4,":root {\n /* Theme custom overrides for premium look */\n --primary: rgb(99 102 241); /* indigo-500 */\n --ring: rgb(99 102 241);\n --border: rgb(228 228 231); /* zinc-200 */\n --input: rgb(228 228 231);\n --radius: 12px;\n\n /* Base spacing adjustments */\n --page-max-width: 680px;\n}\n\n[data-theme=\"dark\"] {\n --primary: rgb(129 140 248); /* indigo-400 */\n --ring: rgb(129 140 248);\n --border: rgb(39 39 42); /* zinc-800 */\n --input: rgb(39 39 42);\n --background: rgb(9 9 11);\n --foreground: rgb(250 250 250);\n --card: rgb(24 24 27);\n --card-foreground: rgb(250 250 250);\n}\n\nbody {\n background-color: var(--background);\n color: var(--foreground);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nmain {\n flex: 1;\n padding: var(--space-8) var(--space-4);\n max-width: var(--page-max-width);\n width: 100%;\n margin: 0 auto;\n}\n\n.card {\n border-radius: var(--radius);\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 0.05),\n 0 2px 4px -2px rgb(0 0 0 / 0.05);\n border: 1px solid var(--border);\n transition: all 0.2s ease-in-out;\n}\n\n.card:hover {\n box-shadow:\n 0 10px 15px -3px rgb(0 0 0 / 0.05),\n 0 4px 6px -4px rgb(0 0 0 / 0.05);\n}\n\n/* Custom style tweaks for Oat elements */\nnav[data-topnav] {\n border-bottom: 1px solid var(--border);\n padding: var(--space-4) var(--space-6);\n background: var(--card);\n}\n\n.hidden {\n display: none !important;\n}\n\n.group legend {\n background: var(--card);\n}\n\n.toast-container {\n z-index: 1000;\n}",[164],"f2faa8b5-3380-4b8f-a64c-79bcf0277327","frontend-script.ts","5c8e14b0-6287-11f1-9a7d-1607ee4eb77e",37,["D",1780846902207],2,"const authCard = document.getElementById(\"auth-card\");\nconst uploadCard = document.getElementById(\"upload-card\");\nconst authLink = document.getElementById(\"auth-link\");\nconst authForm = document.getElementById(\"auth-form\");\nconst authCodeInput = document.getElementById(\"auth-code\");\nconst uploadForm = document.getElementById(\"upload-form\");\nconst alertBox = document.getElementById(\"alert-box\");\nconst themeToggle = document.getElementById(\"theme-toggle\");\n\n// 1. Theme Configuration Logic\nfunction setTheme(isDark) {\n if (isDark) {\n document.body.setAttribute(\"data-theme\", \"dark\");\n themeToggle.checked = true;\n localStorage.setItem(\"theme\", \"dark\");\n } else {\n document.body.removeAttribute(\"data-theme\");\n themeToggle.checked = false;\n localStorage.setItem(\"theme\", \"light\");\n }\n}\n\nthemeToggle.addEventListener(\"change\", (e) => setTheme(e.target.checked));\n\n// Check saved preference or default to dark theme\nconst savedTheme = localStorage.getItem(\"theme\");\nsetTheme(savedTheme !== \"light\");\n\n// 2. Alert Box Display Helpers\nfunction showAlert(message, variant = \"info\") {\n alertBox.className = \"error\"; // Reset\n alertBox.setAttribute(\"data-variant\", variant);\n alertBox.innerHTML = message;\n alertBox.style.display = \"block\";\n alertBox.scrollIntoView({ behavior: \"smooth\" });\n}\n\nfunction hideAlert() {\n alertBox.style.display = \"none\";\n alertBox.innerHTML = \"\";\n}\n\n// 3. API OAuth Status Verification Logic\nasync function checkAuthStatus() {\n try {\n const response = await fetch(\"/api/auth-status\");\n const data = await response.json();\n\n if (data.authenticated) {\n authCard.classList.add(\"hidden\");\n uploadCard.classList.remove(\"hidden\");\n hideAlert();\n } else {\n uploadCard.classList.add(\"hidden\");\n authCard.classList.remove(\"hidden\");\n authLink.href = data.authUrl;\n }\n } catch (err) {\n showAlert(\n `Error: Failed to communicate with Hono uploader service backend: ${err.message}`,\n \"error\",\n );\n }\n}\n\n// 4. Submit OAuth Verification Code Form\nauthForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const code = authCodeInput.value.trim();\n if (!code) return;\n\n hideAlert();\n authForm.setAttribute(\"aria-busy\", \"true\");\n\n try {\n const response = await fetch(\"/api/auth-callback\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ code }),\n });\n\n const data = await response.json();\n\n if (response.ok && data.success) {\n authCodeInput.value = \"\";\n await checkAuthStatus();\n } else {\n showAlert(\n `Authorization Failed: ${\n data.error || \"Token exchange request failed.\"\n }`,\n \"error\",\n );\n }\n } catch (err) {\n showAlert(\n `Error: Failed to submit auth callback code: ${err.message}`,\n \"error\",\n );\n } finally {\n authForm.removeAttribute(\"aria-busy\");\n }\n});\n\n// 5. Submit Video File Upload Form\nuploadForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n const fileInput = document.getElementById(\"video-file\");\n const titleInput = document.getElementById(\"video-title\");\n const descInput = document.getElementById(\"video-desc\");\n\n if (!fileInput.files || fileInput.files.length === 0) {\n showAlert(\n \"Warning! Please select a video file to proceed.\",\n \"warning\",\n );\n return;\n }\n\n hideAlert();\n\n // Toggle Oat library's clean loading state spinner overlay on the card container\n uploadCard.setAttribute(\"aria-busy\", \"true\");\n uploadCard.setAttribute(\"data-spinner\", \"large overlay\");\n\n const formData = new FormData();\n formData.append(\"file\", fileInput.files[0]);\n formData.append(\"title\", titleInput.value.trim());\n formData.append(\"description\", descInput.value.trim());\n\n try {\n const response = await fetch(\"/api/upload\", {\n method: \"POST\",\n body: formData,\n });\n\n const data = await response.json();\n\n if (response.ok && data.success) {\n showAlert(\n `🎉 Success! Video uploaded successfully. Watch here: ${data.watchUrl}`,\n \"success\",\n );\n uploadForm.reset();\n } else {\n showAlert(\n `Upload Pipeline Error: ${\n data.error || \"Failed to complete video upload.\"\n }`,\n \"error\",\n );\n }\n } catch (err) {\n showAlert(\n `Error: Failed to transmit file payload to backend: ${err.message}`,\n \"error\",\n );\n } finally {\n uploadCard.removeAttribute(\"aria-busy\");\n uploadCard.removeAttribute(\"data-spinner\");\n }\n});\n\n// Load initial authentication status on page view\ncheckAuthStatus();",[172],"59e07fd6-dc82-4df5-b286-5622b14359cc",["D",1780847214402],[27],"pulls","branches",1,"forks","envVars",{"_190":184,"_192":60},"connections",{"_190":60,"_191":60},"count","unfilledCount","emptyCount",{"_41":179,"_32":27,"_30":31,"_137":-5,"_39":40,"_38":14,"_139":24,"_36":215,"_13":60,"_33":34,"_35":-5,"_23":24,"_144":-5,"_200":216,"_26":217},{"_41":171,"_32":172,"_30":173,"_137":-5,"_39":40,"_38":174,"_139":24,"_36":212,"_13":176,"_33":142,"_35":177,"_23":24,"_144":-5,"_200":213,"_26":214},{"_41":163,"_32":164,"_30":165,"_137":-5,"_39":40,"_38":166,"_139":24,"_36":209,"_13":168,"_33":20,"_35":169,"_23":24,"_144":-5,"_200":210,"_26":211},{"_41":155,"_32":156,"_30":157,"_137":-5,"_39":40,"_38":158,"_139":24,"_36":206,"_13":160,"_33":142,"_35":161,"_23":24,"_144":-5,"_200":207,"_26":208},{"_41":146,"_32":147,"_30":148,"_137":-5,"_39":40,"_38":149,"_139":24,"_36":203,"_13":151,"_33":152,"_35":153,"_23":24,"_144":43,"_200":204,"_26":205},{"_41":134,"_32":135,"_30":136,"_137":-5,"_39":40,"_38":138,"_139":24,"_36":199,"_13":141,"_33":142,"_35":143,"_23":24,"_144":-5,"_200":201,"_26":202},["D",1780846000174],"children",[],[135],["D",1780847202195],[],[147],["D",1780847126707],[],[156],["D",1780847001631],[],[164],["D",1780846902207],[],[172],["D",1780847214402],[],[27],["D",1780845483513],["D",1789580441083],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":24},{"_13":86,"_32":87,"_41":40,"_88":42,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":43,"_95":96},"ctx",{"_79":-5,"_125":256,"_257":258,"_259":260,"_261":24,"_262":24,"_263":24,"_264":123,"_265":-5,"_266":-7,"_267":-7,"_268":60,"_269":24,"_270":24,"_271":-5,"_272":24,"_273":24,"_274":24,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":87,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v55