mirror of
https://github.com/imgfloat/server.git
synced 2026-05-08 10:19:35 +00:00
Add prettier
This commit is contained in:
+13
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"printWidth":120,
|
||||
"tabWidth":2,
|
||||
"useTabs":false,
|
||||
"semi":true,
|
||||
"singleQuote":false,
|
||||
"trailingComma":"all",
|
||||
"bracketSpacing":true,
|
||||
"arrowParens":"always",
|
||||
"requirePragma":false,
|
||||
"insertPragma":false,
|
||||
"proseWrap":"always"
|
||||
}
|
||||
Generated
+64
-15
@@ -9,7 +9,8 @@
|
||||
"version": "0.0.1",
|
||||
"devDependencies": {
|
||||
"electron": "^35.7.5",
|
||||
"electron-builder": "^24.13.3"
|
||||
"electron-builder": "^24.13.3",
|
||||
"prettier": "^3.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@develar/schema-utils": {
|
||||
@@ -675,7 +676,6 @@
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
@@ -830,6 +830,7 @@
|
||||
"integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"archiver-utils": "^2.1.0",
|
||||
"async": "^3.2.4",
|
||||
@@ -849,6 +850,7 @@
|
||||
"integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"glob": "^7.1.4",
|
||||
"graceful-fs": "^4.2.0",
|
||||
@@ -871,6 +873,7 @@
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
@@ -886,7 +889,8 @@
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/archiver-utils/node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
@@ -894,6 +898,7 @@
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
@@ -995,6 +1000,7 @@
|
||||
"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"buffer": "^5.5.0",
|
||||
"inherits": "^2.0.4",
|
||||
@@ -1367,6 +1373,7 @@
|
||||
"integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"buffer-crc32": "^0.2.13",
|
||||
"crc32-stream": "^4.0.2",
|
||||
@@ -1466,6 +1473,7 @@
|
||||
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"crc32": "bin/crc32.njs"
|
||||
},
|
||||
@@ -1479,6 +1487,7 @@
|
||||
"integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"crc-32": "^1.2.0",
|
||||
"readable-stream": "^3.4.0"
|
||||
@@ -1656,7 +1665,6 @@
|
||||
"integrity": "sha512-rcJUkMfnJpfCboZoOOPf4L29TRtEieHNOeAbYPWPxlaBw/Z1RKrRA86dOI9rwaI4tQSc/RD82zTNHprfUHXsoQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"app-builder-lib": "24.13.3",
|
||||
"builder-util": "24.13.1",
|
||||
@@ -1841,6 +1849,7 @@
|
||||
"integrity": "sha512-oHkV0iogWfyK+ah9ZIvMDpei1m9ZRpdXcvde1wTpra2U8AFDNNpqJdnin5z+PM1GbQ5BoaKCWas2HSjtR0HwMg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"app-builder-lib": "24.13.3",
|
||||
"archiver": "^5.3.1",
|
||||
@@ -1854,6 +1863,7 @@
|
||||
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
@@ -1869,6 +1879,7 @@
|
||||
"integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"universalify": "^2.0.0"
|
||||
},
|
||||
@@ -1882,6 +1893,7 @@
|
||||
"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
}
|
||||
@@ -2198,7 +2210,8 @@
|
||||
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
|
||||
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/fs-extra": {
|
||||
"version": "8.1.0",
|
||||
@@ -2694,7 +2707,8 @@
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/isbinaryfile": {
|
||||
"version": "5.0.7",
|
||||
@@ -2831,6 +2845,7 @@
|
||||
"integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"readable-stream": "^2.0.5"
|
||||
},
|
||||
@@ -2844,6 +2859,7 @@
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
@@ -2859,7 +2875,8 @@
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lazystream/node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
@@ -2867,6 +2884,7 @@
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
@@ -2883,35 +2901,40 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
|
||||
"integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash.difference": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
|
||||
"integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash.flatten": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
|
||||
"integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash.isplainobject": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lodash.union": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
|
||||
"integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lowercase-keys": {
|
||||
"version": "2.0.0",
|
||||
@@ -3100,6 +3123,7 @@
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -3228,12 +3252,29 @@
|
||||
"node": ">=10.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.7.4",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
|
||||
"integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/progress": {
|
||||
"version": "2.0.3",
|
||||
@@ -3317,6 +3358,7 @@
|
||||
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
@@ -3332,6 +3374,7 @@
|
||||
"integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"minimatch": "^5.1.0"
|
||||
}
|
||||
@@ -3414,7 +3457,8 @@
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -3610,6 +3654,7 @@
|
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
@@ -3722,6 +3767,7 @@
|
||||
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"bl": "^4.0.3",
|
||||
"end-of-stream": "^1.4.1",
|
||||
@@ -3879,7 +3925,8 @@
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/verror": {
|
||||
"version": "1.10.1",
|
||||
@@ -4030,6 +4077,7 @@
|
||||
"integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"archiver-utils": "^3.0.4",
|
||||
"compress-commons": "^4.1.2",
|
||||
@@ -4045,6 +4093,7 @@
|
||||
"integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"glob": "^7.2.3",
|
||||
"graceful-fs": "^4.2.0",
|
||||
|
||||
+14
-5
@@ -6,16 +6,24 @@
|
||||
"build": {
|
||||
"appId": "dev.kruhlmann.imgfloat",
|
||||
"productName": "Imgfloat",
|
||||
"files": [ "src/main/node/app.js" ],
|
||||
"files": [
|
||||
"src/main/node/app.js"
|
||||
],
|
||||
"asar": false,
|
||||
"directories": { "output": "dist" },
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"linux": {
|
||||
"target": ["AppImage"],
|
||||
"target": [
|
||||
"AppImage"
|
||||
],
|
||||
"category": "Utility",
|
||||
"icon": "src/main/resources/assets/icon/raw_icon.png"
|
||||
},
|
||||
"win": {
|
||||
"target": ["nsis"],
|
||||
"target": [
|
||||
"nsis"
|
||||
],
|
||||
"icon": "src/main/resources/assets/icon/appicon.ico"
|
||||
},
|
||||
"nsis": {
|
||||
@@ -34,6 +42,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^35.7.5",
|
||||
"electron-builder": "^24.13.3"
|
||||
"electron-builder": "^24.13.3",
|
||||
"prettier": "^3.7.4"
|
||||
}
|
||||
}
|
||||
|
||||
+69
-69
@@ -1,36 +1,36 @@
|
||||
const { app, BrowserWindow } = require('electron');
|
||||
const path = require('path');
|
||||
const { app, BrowserWindow } = require("electron");
|
||||
const path = require("path");
|
||||
|
||||
function createWindow() {
|
||||
const url = "https://imgfloat.kruhlmann.dev/channels";
|
||||
const initialWindowWidthPx = 960;
|
||||
const initialWindowHeightPx = 640;
|
||||
const applicationWindow = new BrowserWindow({
|
||||
width: initialWindowWidthPx,
|
||||
height: initialWindowHeightPx,
|
||||
transparent: true,
|
||||
frame: true,
|
||||
backgroundColor: '#00000000',
|
||||
alwaysOnTop: false,
|
||||
icon: path.join(__dirname, "../resources/assets/icon/appicon.ico"),
|
||||
webPreferences: { backgroundThrottling: false },
|
||||
});
|
||||
applicationWindow.setMenu(null);
|
||||
const url = "https://imgfloat.kruhlmann.dev/channels";
|
||||
const initialWindowWidthPx = 960;
|
||||
const initialWindowHeightPx = 640;
|
||||
const applicationWindow = new BrowserWindow({
|
||||
width: initialWindowWidthPx,
|
||||
height: initialWindowHeightPx,
|
||||
transparent: true,
|
||||
frame: true,
|
||||
backgroundColor: "#00000000",
|
||||
alwaysOnTop: false,
|
||||
icon: path.join(__dirname, "../resources/assets/icon/appicon.ico"),
|
||||
webPreferences: { backgroundThrottling: false },
|
||||
});
|
||||
applicationWindow.setMenu(null);
|
||||
|
||||
let canvasSizeInterval;
|
||||
const clearCanvasSizeInterval = () => {
|
||||
if (canvasSizeInterval) {
|
||||
clearInterval(canvasSizeInterval);
|
||||
canvasSizeInterval = undefined;
|
||||
}
|
||||
};
|
||||
let canvasSizeInterval;
|
||||
const clearCanvasSizeInterval = () => {
|
||||
if (canvasSizeInterval) {
|
||||
clearInterval(canvasSizeInterval);
|
||||
canvasSizeInterval = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const lockWindowToCanvas = async () => {
|
||||
if (applicationWindow.isDestroyed()) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
const size = await applicationWindow.webContents.executeJavaScript(`(() => {
|
||||
const lockWindowToCanvas = async () => {
|
||||
if (applicationWindow.isDestroyed()) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
const size = await applicationWindow.webContents.executeJavaScript(`(() => {
|
||||
const canvas = document.getElementById('broadcast-canvas');
|
||||
if (!canvas || !canvas.width || !canvas.height) {
|
||||
return null;
|
||||
@@ -38,52 +38,52 @@ function createWindow() {
|
||||
return { width: Math.round(canvas.width), height: Math.round(canvas.height) };
|
||||
})();`);
|
||||
|
||||
if (size?.width && size?.height) {
|
||||
const [currentWidth, currentHeight] = applicationWindow.getSize();
|
||||
if (currentWidth !== size.width || currentHeight !== size.height) {
|
||||
applicationWindow.setSize(size.width, size.height, false);
|
||||
}
|
||||
applicationWindow.setMinimumSize(size.width, size.height);
|
||||
applicationWindow.setMaximumSize(size.width, size.height);
|
||||
applicationWindow.setResizable(false);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
// Best-effort sizing; ignore errors from early navigation states.
|
||||
if (size?.width && size?.height) {
|
||||
const [currentWidth, currentHeight] = applicationWindow.getSize();
|
||||
if (currentWidth !== size.width || currentHeight !== size.height) {
|
||||
applicationWindow.setSize(size.width, size.height, false);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
applicationWindow.setMinimumSize(size.width, size.height);
|
||||
applicationWindow.setMaximumSize(size.width, size.height);
|
||||
applicationWindow.setResizable(false);
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
// Best-effort sizing; ignore errors from early navigation states.
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleNavigation = (navigationUrl) => {
|
||||
try {
|
||||
const { pathname } = new URL(navigationUrl);
|
||||
const isBroadcast = /\/view\/[^/]+\/broadcast\/?$/.test(pathname);
|
||||
const handleNavigation = (navigationUrl) => {
|
||||
try {
|
||||
const { pathname } = new URL(navigationUrl);
|
||||
const isBroadcast = /\/view\/[^/]+\/broadcast\/?$/.test(pathname);
|
||||
|
||||
if (isBroadcast) {
|
||||
clearCanvasSizeInterval();
|
||||
canvasSizeInterval = setInterval(lockWindowToCanvas, 750);
|
||||
lockWindowToCanvas();
|
||||
} else {
|
||||
clearCanvasSizeInterval();
|
||||
applicationWindow.setResizable(true);
|
||||
applicationWindow.setMinimumSize(320, 240);
|
||||
applicationWindow.setMaximumSize(10000, 10000);
|
||||
applicationWindow.setSize(initialWindowWidthPx, initialWindowHeightPx, false);
|
||||
}
|
||||
} catch {
|
||||
// Ignore malformed URLs while navigating.
|
||||
}
|
||||
};
|
||||
if (isBroadcast) {
|
||||
clearCanvasSizeInterval();
|
||||
canvasSizeInterval = setInterval(lockWindowToCanvas, 750);
|
||||
lockWindowToCanvas();
|
||||
} else {
|
||||
clearCanvasSizeInterval();
|
||||
applicationWindow.setResizable(true);
|
||||
applicationWindow.setMinimumSize(320, 240);
|
||||
applicationWindow.setMaximumSize(10000, 10000);
|
||||
applicationWindow.setSize(initialWindowWidthPx, initialWindowHeightPx, false);
|
||||
}
|
||||
} catch {
|
||||
// Ignore malformed URLs while navigating.
|
||||
}
|
||||
};
|
||||
|
||||
applicationWindow.loadURL(url);
|
||||
applicationWindow.loadURL(url);
|
||||
|
||||
applicationWindow.webContents.on('did-finish-load', () => {
|
||||
handleNavigation(applicationWindow.webContents.getURL());
|
||||
});
|
||||
applicationWindow.webContents.on("did-finish-load", () => {
|
||||
handleNavigation(applicationWindow.webContents.getURL());
|
||||
});
|
||||
|
||||
applicationWindow.webContents.on('did-navigate', (_event, navigationUrl) => handleNavigation(navigationUrl));
|
||||
applicationWindow.webContents.on('did-navigate-in-page', (_event, navigationUrl) => handleNavigation(navigationUrl));
|
||||
applicationWindow.on('closed', clearCanvasSizeInterval);
|
||||
applicationWindow.webContents.on("did-navigate", (_event, navigationUrl) => handleNavigation(navigationUrl));
|
||||
applicationWindow.webContents.on("did-navigate-in-page", (_event, navigationUrl) => handleNavigation(navigationUrl));
|
||||
applicationWindow.on("closed", clearCanvasSizeInterval);
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow);
|
||||
|
||||
+1174
-1136
File diff suppressed because it is too large
Load Diff
+1784
-1744
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,226 +1,228 @@
|
||||
function buildIdentity(admin) {
|
||||
const identity = document.createElement('div');
|
||||
identity.className = 'identity-row';
|
||||
const identity = document.createElement("div");
|
||||
identity.className = "identity-row";
|
||||
|
||||
const avatar = document.createElement(admin.avatarUrl ? 'img' : 'div');
|
||||
avatar.className = 'avatar';
|
||||
if (admin.avatarUrl) {
|
||||
avatar.src = admin.avatarUrl;
|
||||
avatar.alt = `${admin.displayName || admin.login} avatar`;
|
||||
} else {
|
||||
avatar.classList.add('avatar-fallback');
|
||||
avatar.textContent = (admin.displayName || admin.login || '?').charAt(0).toUpperCase();
|
||||
}
|
||||
const avatar = document.createElement(admin.avatarUrl ? "img" : "div");
|
||||
avatar.className = "avatar";
|
||||
if (admin.avatarUrl) {
|
||||
avatar.src = admin.avatarUrl;
|
||||
avatar.alt = `${admin.displayName || admin.login} avatar`;
|
||||
} else {
|
||||
avatar.classList.add("avatar-fallback");
|
||||
avatar.textContent = (admin.displayName || admin.login || "?").charAt(0).toUpperCase();
|
||||
}
|
||||
|
||||
const details = document.createElement('div');
|
||||
details.className = 'identity-text';
|
||||
const title = document.createElement('p');
|
||||
title.className = 'list-title';
|
||||
title.textContent = admin.displayName || admin.login;
|
||||
const subtitle = document.createElement('p');
|
||||
subtitle.className = 'muted';
|
||||
subtitle.textContent = `@${admin.login}`;
|
||||
const details = document.createElement("div");
|
||||
details.className = "identity-text";
|
||||
const title = document.createElement("p");
|
||||
title.className = "list-title";
|
||||
title.textContent = admin.displayName || admin.login;
|
||||
const subtitle = document.createElement("p");
|
||||
subtitle.className = "muted";
|
||||
subtitle.textContent = `@${admin.login}`;
|
||||
|
||||
details.appendChild(title);
|
||||
details.appendChild(subtitle);
|
||||
identity.appendChild(avatar);
|
||||
identity.appendChild(details);
|
||||
return identity;
|
||||
details.appendChild(title);
|
||||
details.appendChild(subtitle);
|
||||
identity.appendChild(avatar);
|
||||
identity.appendChild(details);
|
||||
return identity;
|
||||
}
|
||||
|
||||
function renderAdmins(list) {
|
||||
const adminList = document.getElementById('admin-list');
|
||||
if (!adminList) return;
|
||||
adminList.innerHTML = '';
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement('li');
|
||||
empty.textContent = 'No channel admins yet';
|
||||
adminList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
const adminList = document.getElementById("admin-list");
|
||||
if (!adminList) return;
|
||||
adminList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.textContent = "No channel admins yet";
|
||||
adminList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'stacked-list-item';
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
|
||||
li.appendChild(buildIdentity(admin));
|
||||
li.appendChild(buildIdentity(admin));
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'actions';
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.type = 'button';
|
||||
removeBtn.className = 'secondary';
|
||||
removeBtn.textContent = 'Remove';
|
||||
removeBtn.addEventListener('click', () => removeAdmin(admin.login));
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className = "secondary";
|
||||
removeBtn.textContent = "Remove";
|
||||
removeBtn.addEventListener("click", () => removeAdmin(admin.login));
|
||||
|
||||
actions.appendChild(removeBtn);
|
||||
li.appendChild(actions);
|
||||
adminList.appendChild(li);
|
||||
});
|
||||
actions.appendChild(removeBtn);
|
||||
li.appendChild(actions);
|
||||
adminList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSuggestedAdmins(list) {
|
||||
const suggestionList = document.getElementById('admin-suggestions');
|
||||
if (!suggestionList) return;
|
||||
const suggestionList = document.getElementById("admin-suggestions");
|
||||
if (!suggestionList) return;
|
||||
|
||||
suggestionList.innerHTML = '';
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement('li');
|
||||
empty.className = 'stacked-list-item';
|
||||
empty.textContent = 'No moderator suggestions right now';
|
||||
suggestionList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
suggestionList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.className = "stacked-list-item";
|
||||
empty.textContent = "No moderator suggestions right now";
|
||||
suggestionList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'stacked-list-item';
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
|
||||
li.appendChild(buildIdentity(admin));
|
||||
li.appendChild(buildIdentity(admin));
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'actions';
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.type = 'button';
|
||||
addBtn.className = 'ghost';
|
||||
addBtn.textContent = 'Add as admin';
|
||||
addBtn.addEventListener('click', () => addAdmin(admin.login));
|
||||
const addBtn = document.createElement("button");
|
||||
addBtn.type = "button";
|
||||
addBtn.className = "ghost";
|
||||
addBtn.textContent = "Add as admin";
|
||||
addBtn.addEventListener("click", () => addAdmin(admin.login));
|
||||
|
||||
actions.appendChild(addBtn);
|
||||
li.appendChild(actions);
|
||||
suggestionList.appendChild(li);
|
||||
});
|
||||
actions.appendChild(addBtn);
|
||||
li.appendChild(actions);
|
||||
suggestionList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchSuggestedAdmins() {
|
||||
fetch(`/api/channels/${broadcaster}/admins/suggestions`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error('Failed to load admin suggestions');
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderSuggestedAdmins)
|
||||
.catch(() => {
|
||||
renderSuggestedAdmins([]);
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/admins/suggestions`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admin suggestions");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderSuggestedAdmins)
|
||||
.catch(() => {
|
||||
renderSuggestedAdmins([]);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchAdmins() {
|
||||
fetch(`/api/channels/${broadcaster}/admins`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error('Failed to load admins');
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderAdmins)
|
||||
.catch(() => {
|
||||
renderAdmins([]);
|
||||
showToast('Unable to load admins right now. Please try again.', 'error');
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/admins`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admins");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderAdmins)
|
||||
.catch(() => {
|
||||
renderAdmins([]);
|
||||
showToast("Unable to load admins right now. Please try again.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function removeAdmin(username) {
|
||||
if (!username) return;
|
||||
fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
|
||||
method: 'DELETE'
|
||||
}).then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error();
|
||||
}
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
}).catch(() => {
|
||||
showToast('Failed to remove admin. Please retry.', 'error');
|
||||
if (!username) return;
|
||||
fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error();
|
||||
}
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
})
|
||||
.catch(() => {
|
||||
showToast("Failed to remove admin. Please retry.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function addAdmin(usernameFromAction) {
|
||||
const input = document.getElementById('new-admin');
|
||||
const username = (usernameFromAction || input?.value || '').trim();
|
||||
if (!username) {
|
||||
showToast('Enter a Twitch username to add as an admin.', 'info');
|
||||
return;
|
||||
}
|
||||
const input = document.getElementById("new-admin");
|
||||
const username = (usernameFromAction || input?.value || "").trim();
|
||||
if (!username) {
|
||||
showToast("Enter a Twitch username to add as an admin.", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/channels/${broadcaster}/admins`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username })
|
||||
fetch(`/api/channels/${broadcaster}/admins`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username }),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Add admin failed");
|
||||
}
|
||||
if (input) {
|
||||
input.value = "";
|
||||
}
|
||||
showToast(`Added @${username} as an admin.`, "success");
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Add admin failed');
|
||||
}
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
showToast(`Added @${username} as an admin.`, 'success');
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
})
|
||||
.catch(() => showToast('Unable to add admin right now. Please try again.', 'error'));
|
||||
.catch(() => showToast("Unable to add admin right now. Please try again.", "error"));
|
||||
}
|
||||
|
||||
function renderCanvasSettings(settings) {
|
||||
const widthInput = document.getElementById('canvas-width');
|
||||
const heightInput = document.getElementById('canvas-height');
|
||||
if (widthInput) widthInput.value = Math.round(settings.width);
|
||||
if (heightInput) heightInput.value = Math.round(settings.height);
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
if (widthInput) widthInput.value = Math.round(settings.width);
|
||||
if (heightInput) heightInput.value = Math.round(settings.height);
|
||||
}
|
||||
|
||||
function fetchCanvasSettings() {
|
||||
fetch(`/api/channels/${broadcaster}/canvas`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error('Failed to load canvas settings');
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderCanvasSettings)
|
||||
.catch(() => {
|
||||
renderCanvasSettings({ width: 1920, height: 1080 });
|
||||
showToast('Using default canvas size. Unable to load saved settings.', 'warning');
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/canvas`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load canvas settings");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderCanvasSettings)
|
||||
.catch(() => {
|
||||
renderCanvasSettings({ width: 1920, height: 1080 });
|
||||
showToast("Using default canvas size. Unable to load saved settings.", "warning");
|
||||
});
|
||||
}
|
||||
|
||||
function saveCanvasSettings() {
|
||||
const widthInput = document.getElementById('canvas-width');
|
||||
const heightInput = document.getElementById('canvas-height');
|
||||
const status = document.getElementById('canvas-status');
|
||||
const width = parseFloat(widthInput?.value) || 0;
|
||||
const height = parseFloat(heightInput?.value) || 0;
|
||||
if (width <= 0 || height <= 0) {
|
||||
showToast('Please enter a valid width and height.', 'info');
|
||||
return;
|
||||
}
|
||||
if (status) status.textContent = 'Saving...';
|
||||
fetch(`/api/channels/${broadcaster}/canvas`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ width, height })
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
const status = document.getElementById("canvas-status");
|
||||
const width = parseFloat(widthInput?.value) || 0;
|
||||
const height = parseFloat(heightInput?.value) || 0;
|
||||
if (width <= 0 || height <= 0) {
|
||||
showToast("Please enter a valid width and height.", "info");
|
||||
return;
|
||||
}
|
||||
if (status) status.textContent = "Saving...";
|
||||
fetch(`/api/channels/${broadcaster}/canvas`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ width, height }),
|
||||
})
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to save canvas");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error('Failed to save canvas');
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((settings) => {
|
||||
renderCanvasSettings(settings);
|
||||
if (status) status.textContent = 'Saved.';
|
||||
showToast('Canvas size saved successfully.', 'success');
|
||||
setTimeout(() => {
|
||||
if (status) status.textContent = '';
|
||||
}, 2000);
|
||||
})
|
||||
.catch(() => {
|
||||
if (status) status.textContent = 'Unable to save right now.';
|
||||
showToast('Unable to save canvas size. Please retry.', 'error');
|
||||
});
|
||||
.then((settings) => {
|
||||
renderCanvasSettings(settings);
|
||||
if (status) status.textContent = "Saved.";
|
||||
showToast("Canvas size saved successfully.", "success");
|
||||
setTimeout(() => {
|
||||
if (status) status.textContent = "";
|
||||
}, 2000);
|
||||
})
|
||||
.catch(() => {
|
||||
if (status) status.textContent = "Unable to save right now.";
|
||||
showToast("Unable to save canvas size. Please retry.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
fetchAdmins();
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
function detectPlatform() {
|
||||
const navigatorPlatform = (navigator.userAgentData?.platform || navigator.platform || '').toLowerCase();
|
||||
const userAgent = (navigator.userAgent || '').toLowerCase();
|
||||
const platformString = `${navigatorPlatform} ${userAgent}`;
|
||||
const navigatorPlatform = (navigator.userAgentData?.platform || navigator.platform || "").toLowerCase();
|
||||
const userAgent = (navigator.userAgent || "").toLowerCase();
|
||||
const platformString = `${navigatorPlatform} ${userAgent}`;
|
||||
|
||||
if (platformString.includes('mac') || platformString.includes('darwin')) {
|
||||
return 'mac';
|
||||
}
|
||||
if (platformString.includes('win')) {
|
||||
return 'windows';
|
||||
}
|
||||
if (platformString.includes('linux')) {
|
||||
return 'linux';
|
||||
}
|
||||
return null;
|
||||
if (platformString.includes("mac") || platformString.includes("darwin")) {
|
||||
return "mac";
|
||||
}
|
||||
if (platformString.includes("win")) {
|
||||
return "windows";
|
||||
}
|
||||
if (platformString.includes("linux")) {
|
||||
return "linux";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function markRecommendedDownload(section) {
|
||||
const cards = Array.from(section.querySelectorAll('.download-card'));
|
||||
if (!cards.length) {
|
||||
return;
|
||||
const cards = Array.from(section.querySelectorAll(".download-card"));
|
||||
if (!cards.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const platform = detectPlatform();
|
||||
const preferredCard = cards.find((card) => card.dataset.platform === platform) || cards[0];
|
||||
|
||||
cards.forEach((card) => {
|
||||
const isPreferred = card === preferredCard;
|
||||
card.classList.toggle("download-card--active", isPreferred);
|
||||
const badge = card.querySelector(".recommended-badge");
|
||||
if (badge) {
|
||||
badge.classList.toggle("hidden", !isPreferred);
|
||||
}
|
||||
|
||||
const platform = detectPlatform();
|
||||
const preferredCard = cards.find((card) => card.dataset.platform === platform) || cards[0];
|
||||
|
||||
cards.forEach((card) => {
|
||||
const isPreferred = card === preferredCard;
|
||||
card.classList.toggle('download-card--active', isPreferred);
|
||||
const badge = card.querySelector('.recommended-badge');
|
||||
if (badge) {
|
||||
badge.classList.toggle('hidden', !isPreferred);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const downloadSections = document.querySelectorAll('.download-section, .download-card-block');
|
||||
downloadSections.forEach(markRecommendedDownload);
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const downloadSections = document.querySelectorAll(".download-section, .download-card-block");
|
||||
downloadSections.forEach(markRecommendedDownload);
|
||||
});
|
||||
|
||||
@@ -1,56 +1,54 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const searchForm = document.getElementById("channel-search-form");
|
||||
const searchInput = document.getElementById("channel-search");
|
||||
const suggestions = document.getElementById("channel-suggestions");
|
||||
const searchForm = document.getElementById("channel-search-form");
|
||||
const searchInput = document.getElementById("channel-search");
|
||||
const suggestions = document.getElementById("channel-suggestions");
|
||||
|
||||
if (!searchForm || !searchInput || !suggestions) {
|
||||
console.error("Required elements not found in the DOM");
|
||||
return;
|
||||
}
|
||||
if (!searchForm || !searchInput || !suggestions) {
|
||||
console.error("Required elements not found in the DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
let channels = [];
|
||||
let channels = [];
|
||||
|
||||
function updateSuggestions(term) {
|
||||
const normalizedTerm = term.trim().toLowerCase();
|
||||
const filtered = channels
|
||||
.filter((name) => !normalizedTerm || name.includes(normalizedTerm))
|
||||
.slice(0, 20);
|
||||
function updateSuggestions(term) {
|
||||
const normalizedTerm = term.trim().toLowerCase();
|
||||
const filtered = channels.filter((name) => !normalizedTerm || name.includes(normalizedTerm)).slice(0, 20);
|
||||
|
||||
suggestions.innerHTML = "";
|
||||
filtered.forEach((name) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = name;
|
||||
suggestions.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadChannels() {
|
||||
try {
|
||||
const response = await fetch("/api/channels");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load channels: ${response.status}`);
|
||||
}
|
||||
channels = await response.json();
|
||||
updateSuggestions(searchInput.value || "");
|
||||
} catch (error) {
|
||||
console.error("Could not load channel directory", error);
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.focus({ preventScroll: true });
|
||||
searchInput.select();
|
||||
|
||||
searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
|
||||
|
||||
searchForm.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const broadcaster = (searchInput.value || "").trim().toLowerCase();
|
||||
if (!broadcaster) {
|
||||
searchInput.focus();
|
||||
return;
|
||||
}
|
||||
window.location.href = `/view/${encodeURIComponent(broadcaster)}/broadcast`;
|
||||
suggestions.innerHTML = "";
|
||||
filtered.forEach((name) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = name;
|
||||
suggestions.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
loadChannels();
|
||||
async function loadChannels() {
|
||||
try {
|
||||
const response = await fetch("/api/channels");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load channels: ${response.status}`);
|
||||
}
|
||||
channels = await response.json();
|
||||
updateSuggestions(searchInput.value || "");
|
||||
} catch (error) {
|
||||
console.error("Could not load channel directory", error);
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.focus({ preventScroll: true });
|
||||
searchInput.select();
|
||||
|
||||
searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
|
||||
|
||||
searchForm.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const broadcaster = (searchInput.value || "").trim().toLowerCase();
|
||||
if (!broadcaster) {
|
||||
searchInput.focus();
|
||||
return;
|
||||
}
|
||||
window.location.href = `/view/${encodeURIComponent(broadcaster)}/broadcast`;
|
||||
});
|
||||
|
||||
loadChannels();
|
||||
});
|
||||
|
||||
@@ -19,126 +19,130 @@ const currentSettings = JSON.parse(serverRenderedSettings);
|
||||
let userSettings = { ...currentSettings };
|
||||
|
||||
function jsonEquals(a, b) {
|
||||
if (a === b) return true;
|
||||
if (a === b) return true;
|
||||
|
||||
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
|
||||
return false;
|
||||
}
|
||||
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const keysA = Object.keys(a);
|
||||
const keysB = Object.keys(b);
|
||||
const keysA = Object.keys(a);
|
||||
const keysB = Object.keys(b);
|
||||
|
||||
if (keysA.length !== keysB.length) return false;
|
||||
if (keysA.length !== keysB.length) return false;
|
||||
|
||||
for (const key of keysA) {
|
||||
if (!keysB.includes(key)) return false;
|
||||
if (!jsonEquals(a[key], b[key])) return false;
|
||||
}
|
||||
for (const key of keysA) {
|
||||
if (!keysB.includes(key)) return false;
|
||||
if (!jsonEquals(a[key], b[key])) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
return true;
|
||||
}
|
||||
|
||||
function setFormSettings(s) {
|
||||
canvasFpsElement.value = s.canvasFramesPerSecond;
|
||||
canvasSizeElement.value = s.maxCanvasSideLengthPixels;
|
||||
canvasFpsElement.value = s.canvasFramesPerSecond;
|
||||
canvasSizeElement.value = s.maxCanvasSideLengthPixels;
|
||||
|
||||
minPlaybackSpeedElement.value = s.minAssetPlaybackSpeedFraction;
|
||||
maxPlaybackSpeedElement.value = s.maxAssetPlaybackSpeedFraction;
|
||||
minPitchElement.value = s.minAssetAudioPitchFraction;
|
||||
maxPitchElement.value = s.maxAssetAudioPitchFraction;
|
||||
minVolumeElement.value = s.minAssetVolumeFraction;
|
||||
maxVolumeElement.value = s.maxAssetVolumeFraction;
|
||||
minPlaybackSpeedElement.value = s.minAssetPlaybackSpeedFraction;
|
||||
maxPlaybackSpeedElement.value = s.maxAssetPlaybackSpeedFraction;
|
||||
minPitchElement.value = s.minAssetAudioPitchFraction;
|
||||
maxPitchElement.value = s.maxAssetAudioPitchFraction;
|
||||
minVolumeElement.value = s.minAssetVolumeFraction;
|
||||
maxVolumeElement.value = s.maxAssetVolumeFraction;
|
||||
}
|
||||
|
||||
function updateStatCards(settings) {
|
||||
if (!settings) return;
|
||||
statCanvasFpsElement.textContent = `${settings.canvasFramesPerSecond ?? "--"} fps`;
|
||||
statCanvasSizeElement.textContent = `${settings.maxCanvasSideLengthPixels ?? "--"} px`;
|
||||
statPlaybackRangeElement.textContent = `${settings.minAssetPlaybackSpeedFraction ?? "--"} – ${settings.maxAssetPlaybackSpeedFraction ?? "--"}x`;
|
||||
statAudioRangeElement.textContent = `${settings.minAssetAudioPitchFraction ?? "--"} – ${settings.maxAssetAudioPitchFraction ?? "--"}x`;
|
||||
statVolumeRangeElement.textContent = `${settings.minAssetVolumeFraction ?? "--"} – ${settings.maxAssetVolumeFraction ?? "--"}x`;
|
||||
if (!settings) return;
|
||||
statCanvasFpsElement.textContent = `${settings.canvasFramesPerSecond ?? "--"} fps`;
|
||||
statCanvasSizeElement.textContent = `${settings.maxCanvasSideLengthPixels ?? "--"} px`;
|
||||
statPlaybackRangeElement.textContent = `${settings.minAssetPlaybackSpeedFraction ?? "--"} – ${settings.maxAssetPlaybackSpeedFraction ?? "--"}x`;
|
||||
statAudioRangeElement.textContent = `${settings.minAssetAudioPitchFraction ?? "--"} – ${settings.maxAssetAudioPitchFraction ?? "--"}x`;
|
||||
statVolumeRangeElement.textContent = `${settings.minAssetVolumeFraction ?? "--"} – ${settings.maxAssetVolumeFraction ?? "--"}x`;
|
||||
}
|
||||
|
||||
function readInt(input) {
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
}
|
||||
|
||||
function readFloat(input) {
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
}
|
||||
|
||||
function loadUserSettingsFromDom() {
|
||||
userSettings.canvasFramesPerSecond = readInt(canvasFpsElement);
|
||||
userSettings.maxCanvasSideLengthPixels = readInt(canvasSizeElement);
|
||||
userSettings.minAssetPlaybackSpeedFraction = readFloat(minPlaybackSpeedElement);
|
||||
userSettings.maxAssetPlaybackSpeedFraction = readFloat(maxPlaybackSpeedElement);
|
||||
userSettings.minAssetAudioPitchFraction = readFloat(minPitchElement);
|
||||
userSettings.maxAssetAudioPitchFraction = readFloat(maxPitchElement);
|
||||
userSettings.minAssetVolumeFraction = readFloat(minVolumeElement);
|
||||
userSettings.maxAssetVolumeFraction = readFloat(maxVolumeElement);
|
||||
userSettings.canvasFramesPerSecond = readInt(canvasFpsElement);
|
||||
userSettings.maxCanvasSideLengthPixels = readInt(canvasSizeElement);
|
||||
userSettings.minAssetPlaybackSpeedFraction = readFloat(minPlaybackSpeedElement);
|
||||
userSettings.maxAssetPlaybackSpeedFraction = readFloat(maxPlaybackSpeedElement);
|
||||
userSettings.minAssetAudioPitchFraction = readFloat(minPitchElement);
|
||||
userSettings.maxAssetAudioPitchFraction = readFloat(maxPitchElement);
|
||||
userSettings.minAssetVolumeFraction = readFloat(minVolumeElement);
|
||||
userSettings.maxAssetVolumeFraction = readFloat(maxVolumeElement);
|
||||
}
|
||||
|
||||
function updateSubmitButtonDisabledState() {
|
||||
if (jsonEquals(currentSettings, userSettings)) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "No changes yet.";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
return;
|
||||
}
|
||||
if (!formElement.checkValidity()) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "Fix highlighted fields.";
|
||||
statusElement.classList.add("status-warning");
|
||||
statusElement.classList.remove("status-success");
|
||||
return;
|
||||
}
|
||||
submitButtonElement.disabled = null;
|
||||
statusElement.textContent = "Ready to save.";
|
||||
statusElement.classList.remove("status-warning");
|
||||
if (jsonEquals(currentSettings, userSettings)) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "No changes yet.";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
return;
|
||||
}
|
||||
if (!formElement.checkValidity()) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "Fix highlighted fields.";
|
||||
statusElement.classList.add("status-warning");
|
||||
statusElement.classList.remove("status-success");
|
||||
return;
|
||||
}
|
||||
submitButtonElement.disabled = null;
|
||||
statusElement.textContent = "Ready to save.";
|
||||
statusElement.classList.remove("status-warning");
|
||||
}
|
||||
|
||||
function submitSettingsForm() {
|
||||
if (submitButtonElement.getAttribute("disabled") != null) {
|
||||
console.warn("Attempted to submit invalid form");
|
||||
showToast("Settings not valid", "warning");
|
||||
return;
|
||||
}
|
||||
statusElement.textContent = "Saving…";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userSettings) }).then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error('Failed to load canvas');
|
||||
}
|
||||
return r.json();
|
||||
|
||||
if (submitButtonElement.getAttribute("disabled") != null) {
|
||||
console.warn("Attempted to submit invalid form");
|
||||
showToast("Settings not valid", "warning");
|
||||
return;
|
||||
}
|
||||
statusElement.textContent = "Saving…";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
fetch("/api/settings/set", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(userSettings),
|
||||
})
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load canvas");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((newSettings) => {
|
||||
currentSettings = { ...newSettings };
|
||||
userSettings = { ...newSettings };
|
||||
updateStatCards(newSettings);
|
||||
showToast("Settings saved", "success");
|
||||
statusElement.textContent = "Saved.";
|
||||
statusElement.classList.add("status-success");
|
||||
updateSubmitButtonDisabledState();
|
||||
})
|
||||
.catch((error) => {
|
||||
showToast('Unable to save settings', 'error')
|
||||
console.error(error);
|
||||
statusElement.textContent = "Save failed. Try again.";
|
||||
statusElement.classList.add("status-warning");
|
||||
});
|
||||
.then((newSettings) => {
|
||||
currentSettings = { ...newSettings };
|
||||
userSettings = { ...newSettings };
|
||||
updateStatCards(newSettings);
|
||||
showToast("Settings saved", "success");
|
||||
statusElement.textContent = "Saved.";
|
||||
statusElement.classList.add("status-success");
|
||||
updateSubmitButtonDisabledState();
|
||||
})
|
||||
.catch((error) => {
|
||||
showToast("Unable to save settings", "error");
|
||||
console.error(error);
|
||||
statusElement.textContent = "Save failed. Try again.";
|
||||
statusElement.classList.add("status-warning");
|
||||
});
|
||||
}
|
||||
|
||||
formElement.querySelectorAll("input").forEach((input) => {
|
||||
input.addEventListener("input", () => {
|
||||
loadUserSettingsFromDom();
|
||||
updateSubmitButtonDisabledState();
|
||||
});
|
||||
input.addEventListener("input", () => {
|
||||
loadUserSettingsFromDom();
|
||||
updateSubmitButtonDisabledState();
|
||||
});
|
||||
});
|
||||
|
||||
formElement.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
submitSettingsForm();
|
||||
event.preventDefault();
|
||||
submitSettingsForm();
|
||||
});
|
||||
|
||||
setFormSettings(currentSettings);
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
(function () {
|
||||
const CONTAINER_ID = 'toast-container';
|
||||
const DEFAULT_DURATION = 4200;
|
||||
const CONTAINER_ID = "toast-container";
|
||||
const DEFAULT_DURATION = 4200;
|
||||
|
||||
function ensureContainer() {
|
||||
let container = document.getElementById(CONTAINER_ID);
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = CONTAINER_ID;
|
||||
container.className = 'toast-container';
|
||||
container.setAttribute('aria-live', 'polite');
|
||||
container.setAttribute('aria-atomic', 'true');
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
return container;
|
||||
function ensureContainer() {
|
||||
let container = document.getElementById(CONTAINER_ID);
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.id = CONTAINER_ID;
|
||||
container.className = "toast-container";
|
||||
container.setAttribute("aria-live", "polite");
|
||||
container.setAttribute("aria-atomic", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
function buildToast(message, type) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
function buildToast(message, type) {
|
||||
const toast = document.createElement("div");
|
||||
toast.className = `toast toast-${type}`;
|
||||
|
||||
const indicator = document.createElement('span');
|
||||
indicator.className = 'toast-indicator';
|
||||
indicator.setAttribute('aria-hidden', 'true');
|
||||
const indicator = document.createElement("span");
|
||||
indicator.className = "toast-indicator";
|
||||
indicator.setAttribute("aria-hidden", "true");
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'toast-message';
|
||||
content.textContent = message;
|
||||
const content = document.createElement("div");
|
||||
content.className = "toast-message";
|
||||
content.textContent = message;
|
||||
|
||||
toast.appendChild(indicator);
|
||||
toast.appendChild(content);
|
||||
return toast;
|
||||
}
|
||||
toast.appendChild(indicator);
|
||||
toast.appendChild(content);
|
||||
return toast;
|
||||
}
|
||||
|
||||
function removeToast(toast) {
|
||||
if (!toast) return;
|
||||
toast.classList.add('toast-exit');
|
||||
setTimeout(() => toast.remove(), 250);
|
||||
}
|
||||
function removeToast(toast) {
|
||||
if (!toast) return;
|
||||
toast.classList.add("toast-exit");
|
||||
setTimeout(() => toast.remove(), 250);
|
||||
}
|
||||
|
||||
window.showToast = function showToast(message, type = 'info', options = {}) {
|
||||
if (!message) return;
|
||||
const normalized = ['success', 'error', 'warning', 'info'].includes(type) ? type : 'info';
|
||||
const duration = typeof options.duration === 'number' ? options.duration : DEFAULT_DURATION;
|
||||
const container = ensureContainer();
|
||||
const toast = buildToast(message, normalized);
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => removeToast(toast), Math.max(1200, duration));
|
||||
toast.addEventListener('click', () => removeToast(toast));
|
||||
};
|
||||
window.showToast = function showToast(message, type = "info", options = {}) {
|
||||
if (!message) return;
|
||||
const normalized = ["success", "error", "warning", "info"].includes(type) ? type : "info";
|
||||
const duration = typeof options.duration === "number" ? options.duration : DEFAULT_DURATION;
|
||||
const container = ensureContainer();
|
||||
const toast = buildToast(message, normalized);
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => removeToast(toast), Math.max(1200, duration));
|
||||
toast.addEventListener("click", () => removeToast(toast));
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,216 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Imgfloat Admin</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
|
||||
</head>
|
||||
<body class="admin-body">
|
||||
<div class="admin-frame">
|
||||
<header class="admin-topbar">
|
||||
</head>
|
||||
<body class="admin-body">
|
||||
<div class="admin-frame">
|
||||
<header class="admin-topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="admin-identity">
|
||||
<p class="eyebrow subtle">CHANNEL ADMIN</p>
|
||||
<h1 th:text="${broadcaster}"></h1>
|
||||
</div>
|
||||
<div class="admin-identity">
|
||||
<p class="eyebrow subtle">CHANNEL ADMIN</p>
|
||||
<h1 th:text="${broadcaster}"></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions horizontal">
|
||||
<a class="icon-button" th:href="@{/}" title="Back to dashboard">
|
||||
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
|
||||
<span class="sr-only">Back to dashboard</span>
|
||||
</a>
|
||||
<a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener">Broadcaster view</a>
|
||||
<a class="icon-button" th:href="@{/}" title="Back to dashboard">
|
||||
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
|
||||
<span class="sr-only">Back to dashboard</span>
|
||||
</a>
|
||||
<a class="button ghost" th:href="${'/view/' + broadcaster + '/broadcast'}" target="_blank" rel="noopener"
|
||||
>Broadcaster view</a
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="admin-workspace">
|
||||
<div class="admin-workspace">
|
||||
<aside class="admin-rail">
|
||||
<div class="upload-row">
|
||||
<input id="asset-file" class="file-input-field" type="file" accept="image/*,video/*,audio/*" onchange="handleFileSelection(this)" />
|
||||
<label for="asset-file" class="file-input-trigger">
|
||||
<span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
|
||||
<span class="file-input-copy">
|
||||
<strong>Upload asset</strong>
|
||||
<small id="asset-file-name">No file chosen</small>
|
||||
</span>
|
||||
</label>
|
||||
<div class="upload-row">
|
||||
<input
|
||||
id="asset-file"
|
||||
class="file-input-field"
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
onchange="handleFileSelection(this)"
|
||||
/>
|
||||
<label for="asset-file" class="file-input-trigger">
|
||||
<span class="file-input-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
|
||||
<span class="file-input-copy">
|
||||
<strong>Upload asset</strong>
|
||||
<small id="asset-file-name">No file chosen</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="rail-body">
|
||||
<div class="rail-scroll">
|
||||
<ul id="asset-list" class="asset-list"></ul>
|
||||
</div>
|
||||
<div class="rail-body">
|
||||
<div class="rail-scroll">
|
||||
<ul id="asset-list" class="asset-list"></ul>
|
||||
</div>
|
||||
|
||||
<div id="asset-inspector" class="rail-inspector hidden">
|
||||
<div class="asset-inspector">
|
||||
<div class="selected-asset-banner">
|
||||
<div class="selected-asset-main">
|
||||
<div class="title-row">
|
||||
<strong id="selected-asset-name">Choose an asset</strong>
|
||||
<span id="selected-asset-resolution" class="asset-resolution subtle-text hidden"></span>
|
||||
</div>
|
||||
<p class="meta-text" id="selected-asset-meta">
|
||||
Pick an asset in the list to adjust its placement and playback.
|
||||
</p>
|
||||
<p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
|
||||
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="asset-inspector" class="rail-inspector hidden">
|
||||
<div class="asset-inspector">
|
||||
<div class="selected-asset-banner">
|
||||
<div class="selected-asset-main">
|
||||
<div class="title-row">
|
||||
<strong id="selected-asset-name">Choose an asset</strong>
|
||||
<span id="selected-asset-resolution" class="asset-resolution subtle-text hidden"></span>
|
||||
</div>
|
||||
<p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
|
||||
<p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
|
||||
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
<div class="panel-section" id="layout-section">
|
||||
<div class="section-header">
|
||||
<h5>Layout & order</h5>
|
||||
</div>
|
||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
<div class="panel-section" id="layout-section">
|
||||
<div class="section-header">
|
||||
<h5>Layout & order</h5>
|
||||
</div>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Width</span>
|
||||
<input id="asset-width" class="number-input property-control" type="number" min="10" step="5" />
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Height</span>
|
||||
<input id="asset-height" class="number-input property-control" type="number" min="10" step="5" />
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Maintain AR</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Layer</span>
|
||||
<div class="property-control">
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" id="playback-section">
|
||||
<div class="section-header">
|
||||
<h5>Playback</h5>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback speed</span>
|
||||
<span class="value-hint" id="asset-speed-label">100%</span>
|
||||
</div>
|
||||
<input id="asset-speed" class="range-input" type="range" min="0" max="1000" step="10" value="100" />
|
||||
<div class="range-meta"><span>0%</span><span>1000%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" id="volume-section">
|
||||
<div class="section-header">
|
||||
<h5>Volume</h5>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback volume</span>
|
||||
<span class="value-hint" id="asset-volume-label">100%</span>
|
||||
</div>
|
||||
<input id="asset-volume" class="range-input" type="range" min="0" max="200" step="1" value="100" />
|
||||
<div class="range-meta"><span>0%</span><span>200%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section hidden" id="audio-section">
|
||||
<div class="section-header">
|
||||
<h5>Audio</h5>
|
||||
</div>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Loop</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Delay</span>
|
||||
<span class="value-hint" id="asset-audio-delay-label">0ms</span>
|
||||
</div>
|
||||
<input id="asset-audio-delay" class="range-input property-control" type="range" min="0" max="30000" step="100" value="0" />
|
||||
<div class="range-meta"><span>0ms</span><span>30s</span></div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback speed</span>
|
||||
<span class="value-hint" id="asset-audio-speed-label">1.0x</span>
|
||||
</div>
|
||||
<input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
|
||||
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Pitch</span>
|
||||
<span class="value-hint" id="asset-audio-pitch-label">100%</span>
|
||||
</div>
|
||||
<input id="asset-audio-pitch" class="range-input property-control" type="range" min="50" max="200" step="5" value="100" />
|
||||
<div class="range-meta"><span>50%</span><span>200%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-actions compact unified-actions" id="asset-actions">
|
||||
<button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
|
||||
<button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
<button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button type="button" onclick="bringToFront()" class="secondary" title="Bring to front"><i class="fa-solid fa-angles-up"></i></button>
|
||||
<button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
|
||||
<button id="selected-asset-visibility" class="secondary" type="button" title="Hide asset" disabled data-audio-enabled="true">
|
||||
<i class="fa-solid fa-eye-slash"></i>
|
||||
</button>
|
||||
<button id="selected-asset-delete" class="secondary danger" type="button" title="Delete asset" disabled data-audio-enabled="true">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Width</span>
|
||||
<input id="asset-width" class="number-input property-control" type="number" min="10" step="5" />
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Height</span>
|
||||
<input
|
||||
id="asset-height"
|
||||
class="number-input property-control"
|
||||
type="number"
|
||||
min="10"
|
||||
step="5"
|
||||
/>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Maintain AR</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Layer</span>
|
||||
<div class="property-control">
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" id="playback-section">
|
||||
<div class="section-header">
|
||||
<h5>Playback</h5>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback speed</span>
|
||||
<span class="value-hint" id="asset-speed-label">100%</span>
|
||||
</div>
|
||||
<input
|
||||
id="asset-speed"
|
||||
class="range-input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="10"
|
||||
value="100"
|
||||
/>
|
||||
<div class="range-meta"><span>0%</span><span>1000%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section" id="volume-section">
|
||||
<div class="section-header">
|
||||
<h5>Volume</h5>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback volume</span>
|
||||
<span class="value-hint" id="asset-volume-label">100%</span>
|
||||
</div>
|
||||
<input
|
||||
id="asset-volume"
|
||||
class="range-input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="200"
|
||||
step="1"
|
||||
value="100"
|
||||
/>
|
||||
<div class="range-meta"><span>0%</span><span>200%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section hidden" id="audio-section">
|
||||
<div class="section-header">
|
||||
<h5>Audio</h5>
|
||||
</div>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Loop</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Delay</span>
|
||||
<span class="value-hint" id="asset-audio-delay-label">0ms</span>
|
||||
</div>
|
||||
<input
|
||||
id="asset-audio-delay"
|
||||
class="range-input property-control"
|
||||
type="range"
|
||||
min="0"
|
||||
max="30000"
|
||||
step="100"
|
||||
value="0"
|
||||
/>
|
||||
<div class="range-meta"><span>0ms</span><span>30s</span></div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Playback speed</span>
|
||||
<span class="value-hint" id="asset-audio-speed-label">1.0x</span>
|
||||
</div>
|
||||
<input
|
||||
id="asset-audio-speed"
|
||||
class="range-input"
|
||||
type="range"
|
||||
min="25"
|
||||
max="400"
|
||||
step="5"
|
||||
value="100"
|
||||
/>
|
||||
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
<span>Pitch</span>
|
||||
<span class="value-hint" id="asset-audio-pitch-label">100%</span>
|
||||
</div>
|
||||
<input
|
||||
id="asset-audio-pitch"
|
||||
class="range-input property-control"
|
||||
type="range"
|
||||
min="50"
|
||||
max="200"
|
||||
step="5"
|
||||
value="100"
|
||||
/>
|
||||
<div class="range-meta"><span>50%</span><span>200%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-actions compact unified-actions" id="asset-actions">
|
||||
<button type="button" onclick="sendToBack()" class="secondary" title="Send to back">
|
||||
<i class="fa-solid fa-angles-down"></i>
|
||||
</button>
|
||||
<button type="button" onclick="bringBackward()" class="secondary" title="Move backward">
|
||||
<i class="fa-solid fa-arrow-down"></i>
|
||||
</button>
|
||||
<button type="button" onclick="bringForward()" class="secondary" title="Move forward">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
</button>
|
||||
<button type="button" onclick="bringToFront()" class="secondary" title="Bring to front">
|
||||
<i class="fa-solid fa-angles-up"></i>
|
||||
</button>
|
||||
<button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas">
|
||||
<i class="fa-solid fa-bullseye"></i>
|
||||
</button>
|
||||
<button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left">
|
||||
<i class="fa-solid fa-rotate-left"></i>
|
||||
</button>
|
||||
<button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right">
|
||||
<i class="fa-solid fa-rotate-right"></i>
|
||||
</button>
|
||||
<button
|
||||
id="selected-asset-visibility"
|
||||
class="secondary"
|
||||
type="button"
|
||||
title="Hide asset"
|
||||
disabled
|
||||
data-audio-enabled="true"
|
||||
>
|
||||
<i class="fa-solid fa-eye-slash"></i>
|
||||
</button>
|
||||
<button
|
||||
id="selected-asset-delete"
|
||||
class="secondary danger"
|
||||
type="button"
|
||||
title="Delete asset"
|
||||
disabled
|
||||
data-audio-enabled="true"
|
||||
>
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="canvas-stack">
|
||||
<div class="canvas-topbar">
|
||||
<div>
|
||||
<p class="eyebrow subtle">Canvas</p>
|
||||
<h3 class="panel-title">Live composition</h3>
|
||||
</div>
|
||||
<div class="canvas-meta">
|
||||
<span class="badge soft" id="canvas-resolution">1920 x 1080</span>
|
||||
<span class="badge outline" id="canvas-scale">100%</span>
|
||||
</div>
|
||||
<div class="canvas-topbar">
|
||||
<div>
|
||||
<p class="eyebrow subtle">Canvas</p>
|
||||
<h3 class="panel-title">Live composition</h3>
|
||||
</div>
|
||||
<div class="canvas-surface">
|
||||
<div class="overlay canvas-boundary" id="admin-overlay">
|
||||
<div class="canvas-guides"></div>
|
||||
<canvas id="admin-canvas"></canvas>
|
||||
</div>
|
||||
<div class="canvas-footnote">
|
||||
<p>Edges of the canvas are outlined to match the aspect ratio of the stream.</p>
|
||||
</div>
|
||||
<div class="canvas-meta">
|
||||
<span class="badge soft" id="canvas-resolution">1920 x 1080</span>
|
||||
<span class="badge outline" id="canvas-scale">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas-surface">
|
||||
<div class="overlay canvas-boundary" id="admin-overlay">
|
||||
<div class="canvas-guides"></div>
|
||||
<canvas id="admin-canvas"></canvas>
|
||||
</div>
|
||||
<div class="canvas-footnote">
|
||||
<p>Edges of the canvas are outlined to match the aspect ratio of the stream.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${broadcaster}]]*/ '';
|
||||
const username = /*[[${username}]]*/ '';
|
||||
const UPLOAD_LIMIT_BYTES = /*[[${uploadLimitBytes}]]*/ 0;
|
||||
const SETTINGS = /*[[${settingsJson}]]*/;
|
||||
</script>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/admin.js"></script>
|
||||
</body>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${broadcaster}]]*/ '';
|
||||
const username = /*[[${username}]]*/ '';
|
||||
const UPLOAD_LIMIT_BYTES = /*[[${uploadLimitBytes}]]*/ 0;
|
||||
const SETTINGS = /*[[${settingsJson}]]*/;
|
||||
</script>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Imgfloat Broadcast</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
|
||||
</head>
|
||||
<body class="broadcast-body">
|
||||
<canvas id="broadcast-canvas"></canvas>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${broadcaster}]]*/ '';
|
||||
</script>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/broadcast.js"></script>
|
||||
</body>
|
||||
</head>
|
||||
<body class="broadcast-body">
|
||||
<canvas id="broadcast-canvas"></canvas>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${broadcaster}]]*/ "";
|
||||
</script>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/broadcast.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,36 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Browse channels - Imgfloat</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
</head>
|
||||
<body class="channels-body">
|
||||
<div class="channels-shell">
|
||||
<header class="channels-header">
|
||||
</head>
|
||||
<body class="channels-body">
|
||||
<div class="channels-shell">
|
||||
<header class="channels-header">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main class="channels-main">
|
||||
<main class="channels-main">
|
||||
<section class="channel-card">
|
||||
<p class="eyebrow subtle">Broadcast overlay</p>
|
||||
<h1>Open a channel</h1>
|
||||
<p class="muted">Type the channel name to jump straight to their overlay.</p>
|
||||
<form id="channel-search-form" class="channel-form">
|
||||
<label class="sr-only" for="channel-search">Channel name</label>
|
||||
<input id="channel-search" name="channel" class="text-input" type="text" list="channel-suggestions" placeholder="Type a channel name" autocomplete="off" />
|
||||
<datalist id="channel-suggestions"></datalist>
|
||||
<button type="submit" class="button block">Open overlay</button>
|
||||
</form>
|
||||
<p class="eyebrow subtle">Broadcast overlay</p>
|
||||
<h1>Open a channel</h1>
|
||||
<p class="muted">Type the channel name to jump straight to their overlay.</p>
|
||||
<form id="channel-search-form" class="channel-form">
|
||||
<label class="sr-only" for="channel-search">Channel name</label>
|
||||
<input
|
||||
id="channel-search"
|
||||
name="channel"
|
||||
class="text-input"
|
||||
type="text"
|
||||
list="channel-suggestions"
|
||||
placeholder="Type a channel name"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<datalist id="channel-suggestions"></datalist>
|
||||
<button type="submit" class="button block">Open overlay</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/js/landing.js"></script>
|
||||
</body>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/js/landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,151 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Imgfloat Dashboard</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
</head>
|
||||
<body class="dashboard-body">
|
||||
<div class="dashboard-shell">
|
||||
<header class="dashboard-topbar">
|
||||
</head>
|
||||
<body class="dashboard-body">
|
||||
<div class="dashboard-shell">
|
||||
<header class="dashboard-topbar">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-pill">
|
||||
<span class="eyebrow subtle">Signed in as</span>
|
||||
<span class="user-display" th:text="${username}">user</span>
|
||||
<span class="eyebrow subtle">Signed in as</span>
|
||||
<span class="user-display" th:text="${username}">user</span>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<section class="card">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Navigation</p>
|
||||
<h3>Shortcuts</h3>
|
||||
<p class="muted">Jump into your overlay</p>
|
||||
<div class="panel-actions">
|
||||
<a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
|
||||
<a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
|
||||
<a class="button ghost block" href="/channels">Browse channels</a>
|
||||
<form class="block" th:action="@{/logout}" method="post">
|
||||
<button class="secondary block" type="submit">Logout</button>
|
||||
</form>
|
||||
<a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
|
||||
<a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
|
||||
<a class="button ghost block" href="/channels">Browse channels</a>
|
||||
<form class="block" th:action="@{/logout}" method="post">
|
||||
<button class="secondary block" type="submit">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<section class="card">
|
||||
<p class="eyebrow">Settings</p>
|
||||
<h3>Overlay dimensions</h3>
|
||||
<p class="muted">Match these with your OBS resolution.</p>
|
||||
<div class="control-grid">
|
||||
<label>
|
||||
Width
|
||||
<input id="canvas-width" type="number" min="100" step="10" />
|
||||
</label>
|
||||
<label>
|
||||
Height
|
||||
<input id="canvas-height" type="number" min="100" step="10" />
|
||||
</label>
|
||||
<label>
|
||||
Width
|
||||
<input id="canvas-width" type="number" min="100" step="10" />
|
||||
</label>
|
||||
<label>
|
||||
Height
|
||||
<input id="canvas-height" type="number" min="100" step="10" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-actions">
|
||||
<button type="button" onclick="saveCanvasSettings()">Save canvas size</button>
|
||||
<span id="canvas-status" class="muted"></span>
|
||||
<button type="button" onclick="saveCanvasSettings()">Save canvas size</button>
|
||||
<span id="canvas-status" class="muted"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="card-grid two-col">
|
||||
<section class="card-grid two-col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<p class="eyebrow">Collaboration</p>
|
||||
<h3>Channel admins</h3>
|
||||
<p class="muted">Invite moderators to help manage assets.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-form">
|
||||
<input id="new-admin" placeholder="Twitch username" />
|
||||
<button type="button" onclick="addAdmin()">Add admin</button>
|
||||
</div>
|
||||
<div class="card-section">
|
||||
<div class="section-header">
|
||||
<h4 class="list-title">Channel Admins</h4>
|
||||
<p class="muted">Users who can currently modify your overlay.</p>
|
||||
</div>
|
||||
<ul id="admin-list" class="stacked-list"></ul>
|
||||
</div>
|
||||
<div class="card-section">
|
||||
<div class="section-header">
|
||||
<h4 class="list-title">Your Twitch moderators</h4>
|
||||
<p class="muted">Add moderators who already help run your channel.</p>
|
||||
</div>
|
||||
<ul id="admin-suggestions" class="stacked-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section th:if="${adminChannels != null}" class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<p class="eyebrow">Your access</p>
|
||||
<h3>Channels you administer</h3>
|
||||
<p class="muted">Jump into a teammate's overlay console.</p>
|
||||
<p class="eyebrow">Collaboration</p>
|
||||
<h3>Channel admins</h3>
|
||||
<p class="muted">Invite moderators to help manage assets.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-form">
|
||||
<input id="new-admin" placeholder="Twitch username" />
|
||||
<button type="button" onclick="addAdmin()">Add admin</button>
|
||||
</div>
|
||||
<div class="card-section">
|
||||
<div class="section-header">
|
||||
<h4 class="list-title">Channel Admins</h4>
|
||||
<p class="muted">Users who can currently modify your overlay.</p>
|
||||
</div>
|
||||
<ul id="admin-list" class="stacked-list"></ul>
|
||||
</div>
|
||||
<div class="card-section">
|
||||
<div class="section-header">
|
||||
<h4 class="list-title">Your Twitch moderators</h4>
|
||||
<p class="muted">Add moderators who already help run your channel.</p>
|
||||
</div>
|
||||
<ul id="admin-suggestions" class="stacked-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section th:if="${adminChannels != null}" class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<p class="eyebrow">Your access</p>
|
||||
<h3>Channels you administer</h3>
|
||||
<p class="muted">Jump into a teammate's overlay console.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p th:if="${#lists.isEmpty(adminChannels)}">No admin invitations yet.</p>
|
||||
<ul th:if="${!#lists.isEmpty(adminChannels)}" class="stacked-list">
|
||||
<li th:each="channelName : ${adminChannels}" class="stacked-list-item">
|
||||
<div>
|
||||
<p class="list-title" th:text="${channelName}">channel</p>
|
||||
<p class="muted">Channel admin access</p>
|
||||
</div>
|
||||
<a class="button ghost" th:href="@{'/view/' + ${channelName} + '/admin'}">Open</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="card download-card-block">
|
||||
<div class="download-header">
|
||||
<li th:each="channelName : ${adminChannels}" class="stacked-list-item">
|
||||
<div>
|
||||
<p class="eyebrow">Desktop app</p>
|
||||
<h3>Download Imgfloat</h3>
|
||||
<p class="muted">Version <span class="version-inline" th:text="${releaseVersion}">0.0.1</span> · build <span class="version-inline" th:text="${version}">unknown</span></p>
|
||||
<p class="list-title" th:text="${channelName}">channel</p>
|
||||
<p class="muted">Channel admin access</p>
|
||||
</div>
|
||||
<a class="button ghost" th:href="@{'/view/' + ${channelName} + '/admin'}">Open</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="card download-card-block">
|
||||
<div class="download-header">
|
||||
<div>
|
||||
<p class="eyebrow">Desktop app</p>
|
||||
<h3>Download Imgfloat</h3>
|
||||
<p class="muted">
|
||||
Version <span class="version-inline" th:text="${releaseVersion}">0.0.1</span> · build
|
||||
<span class="version-inline" th:text="${version}">unknown</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="download-grid">
|
||||
<div class="download-card" data-platform="mac">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">macOS</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">Apple Silicon build (ARM64)</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '-arm64.dmg'">Download .dmg</a>
|
||||
<div class="download-card" data-platform="mac">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">macOS</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<div class="download-card" data-platform="windows">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Windows</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">Installer for Windows 10 and 11</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat.Setup.' + ${releaseVersion} + '.exe'">Download .exe</a>
|
||||
<p class="muted">Apple Silicon build (ARM64)</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '-arm64.dmg'"
|
||||
>Download .dmg</a
|
||||
>
|
||||
</div>
|
||||
<div class="download-card" data-platform="windows">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Windows</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<div class="download-card" data-platform="linux">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Linux</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">AppImage for most distributions</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '.AppImage'">Download AppImage</a>
|
||||
<p class="muted">Installer for Windows 10 and 11</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat.Setup.' + ${releaseVersion} + '.exe'"
|
||||
>Download .exe</a
|
||||
>
|
||||
</div>
|
||||
<div class="download-card" data-platform="linux">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Linux</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">AppImage for most distributions</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '.AppImage'"
|
||||
>Download AppImage</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/downloads.js"></script>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${channel}]]*/ '';
|
||||
</script>
|
||||
<script src="/js/dashboard.js"></script>
|
||||
</body>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/js/toast.js"></script>
|
||||
<script src="/js/downloads.js"></script>
|
||||
<script th:inline="javascript">
|
||||
const broadcaster = /*[[${channel}]]*/ "";
|
||||
</script>
|
||||
<script src="/js/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,79 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Imgfloat - Twitch overlay</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
</head>
|
||||
<body class="landing-body">
|
||||
<div class="landing">
|
||||
<header class="landing-header">
|
||||
</head>
|
||||
<body class="landing-body">
|
||||
<div class="landing">
|
||||
<header class="landing-header">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main class="hero hero-compact">
|
||||
<main class="hero hero-compact">
|
||||
<div class="hero-text">
|
||||
<p class="eyebrow">Overlay toolkit</p>
|
||||
<h1>Keep your Twitch overlays tidy.</h1>
|
||||
<p class="lead">Upload artwork, drop it into a shared dashboard, and stay in sync with your mods without clutter.</p>
|
||||
<div class="cta-row">
|
||||
<a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
|
||||
<a class="button ghost" href="/channels" rel="prefetch">Browse channels</a>
|
||||
</div>
|
||||
<p class="eyebrow">Overlay toolkit</p>
|
||||
<h1>Keep your Twitch overlays tidy.</h1>
|
||||
<p class="lead">
|
||||
Upload artwork, drop it into a shared dashboard, and stay in sync with your mods without clutter.
|
||||
</p>
|
||||
<div class="cta-row">
|
||||
<a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
|
||||
<a class="button ghost" href="/channels" rel="prefetch">Browse channels</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
<section class="download-section">
|
||||
<section class="download-section">
|
||||
<div class="download-header">
|
||||
<p class="eyebrow">Desktop app</p>
|
||||
<h2>Download Imgfloat</h2>
|
||||
<p class="muted">Version <span class="version-inline" th:text="${releaseVersion}">0.0.1</span> for Windows, macOS, and Linux.</p>
|
||||
<p class="eyebrow">Desktop app</p>
|
||||
<h2>Download Imgfloat</h2>
|
||||
<p class="muted">
|
||||
Version <span class="version-inline" th:text="${releaseVersion}">0.0.1</span> for Windows, macOS, and Linux.
|
||||
</p>
|
||||
</div>
|
||||
<div class="download-grid">
|
||||
<div class="download-card" data-platform="mac">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">macOS</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">Apple Silicon build (ARM64)</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '-arm64.dmg'">Download .dmg</a>
|
||||
<div class="download-card" data-platform="mac">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">macOS</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<div class="download-card" data-platform="windows">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Windows</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">Installer for Windows 10 and 11</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat.Setup.' + ${releaseVersion} + '.exe'">Download .exe</a>
|
||||
<p class="muted">Apple Silicon build (ARM64)</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '-arm64.dmg'"
|
||||
>Download .dmg</a
|
||||
>
|
||||
</div>
|
||||
<div class="download-card" data-platform="windows">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Windows</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<div class="download-card" data-platform="linux">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Linux</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">AppImage for most distributions</p>
|
||||
<a class="button block" th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '.AppImage'">Download AppImage</a>
|
||||
<p class="muted">Installer for Windows 10 and 11</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat.Setup.' + ${releaseVersion} + '.exe'"
|
||||
>Download .exe</a
|
||||
>
|
||||
</div>
|
||||
<div class="download-card" data-platform="linux">
|
||||
<div class="download-card-header">
|
||||
<p class="eyebrow">Linux</p>
|
||||
<span class="badge soft recommended-badge hidden">Recommended</span>
|
||||
</div>
|
||||
<p class="muted">AppImage for most distributions</p>
|
||||
<a
|
||||
class="button block"
|
||||
th:href="'https://github.com/Kruhlmann/imgfloat-j/releases/download/' + ${releaseVersion} + '/Imgfloat-' + ${releaseVersion} + '.AppImage'"
|
||||
>Download AppImage</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer class="landing-meta">
|
||||
<footer class="landing-meta">
|
||||
<div class="build-chip">
|
||||
<span class="muted">License</span>
|
||||
<span class="version-badge">MIT</span>
|
||||
<span class="muted">License</span>
|
||||
<span class="version-badge">MIT</span>
|
||||
</div>
|
||||
<div class="build-chip">
|
||||
<span class="muted">Build</span>
|
||||
<span class="version-badge" th:text="${version}">unknown</span>
|
||||
<span class="muted">Build</span>
|
||||
<span class="version-badge" th:text="${version}">unknown</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="/js/downloads.js"></script>
|
||||
</body>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="/js/downloads.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,234 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Imgfloat Admin</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
|
||||
</head>
|
||||
<body class="settings-body">
|
||||
<div class="settings-shell">
|
||||
<header class="settings-header">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="settings-main">
|
||||
<section class="settings-card settings-hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow subtle">System administrator settings</p>
|
||||
<h1>Application defaults</h1>
|
||||
<p class="muted">
|
||||
Configure overlay performance and audio guardrails for every channel using Imgfloat.
|
||||
These settings are applied globally.
|
||||
</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
|
||||
<span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
|
||||
<span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-grid compact">
|
||||
<div class="stat">
|
||||
<p class="stat-label">Canvas FPS</p>
|
||||
<p class="stat-value" id="stat-canvas-fps">--</p>
|
||||
<p class="stat-subtitle">Longest side <span id="stat-canvas-size">--</span></p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Playback speed</p>
|
||||
<p class="stat-value" id="stat-playback-range">--</p>
|
||||
<p class="stat-subtitle">Applies to all animations</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Audio pitch</p>
|
||||
<p class="stat-value" id="stat-audio-range">--</p>
|
||||
<p class="stat-subtitle">Fraction of original clip</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Volume limits</p>
|
||||
<p class="stat-value" id="stat-volume-range">--</p>
|
||||
<p class="stat-subtitle">Keeps alerts comfortable</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="settings-layout">
|
||||
<section class="settings-card settings-panel">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow subtle">Overlay defaults</p>
|
||||
<h2>Performance & audio budget</h2>
|
||||
<p class="muted tiny">Tune the canvas and audio guardrails to keep overlays smooth and balanced.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form novalidate id="settings-form" class="settings-form">
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Canvas</p>
|
||||
<h3>Rendering budget</h3>
|
||||
<p class="muted tiny">Match FPS and max dimensions to your streaming canvas for consistent overlays.</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="canvas-fps">Canvas FPS
|
||||
<input
|
||||
id="canvas-fps"
|
||||
name="canvas-fps"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="^[1-9]\d*$"
|
||||
placeholder="60"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="canvas-size">Canvas max side length (pixels)
|
||||
<input
|
||||
id="canvas-size"
|
||||
name="canvas-size"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="^[1-9]\d*$"
|
||||
placeholder="1920"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">Use the longest edge of your OBS browser source to prevent stretching.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Playback</p>
|
||||
<h3>Animation speed limits</h3>
|
||||
<p class="muted tiny">Bound default speeds between 0 and 1 so clips run predictably.</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-playback-speed">Min playback speed
|
||||
<input
|
||||
id="min-playback-speed"
|
||||
name="min-playback-speed"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.5"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-playback-speed">Max playback speed
|
||||
<input
|
||||
id="max-playback-speed"
|
||||
name="max-playback-speed"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">Keep the maximum at 1.0 to avoid speeding overlays beyond their source frame rate.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Audio</p>
|
||||
<h3>Pitch & volume guardrails</h3>
|
||||
<p class="muted tiny">Prevent harsh audio by bounding pitch and volume as fractions of the source.</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-audio-pitch">Min audio pitch
|
||||
<input
|
||||
id="min-audio-pitch"
|
||||
name="min-audio-pitch"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.8"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-audio-pitch">Max audio pitch
|
||||
<input
|
||||
id="max-audio-pitch"
|
||||
name="max-audio-pitch"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-volume">Min volume
|
||||
<input
|
||||
id="min-volume"
|
||||
name="min-volume"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-volume">Max volume
|
||||
<input
|
||||
id="max-volume"
|
||||
name="max-volume"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">Volume and pitch values are percentages of the original clip between 0 and 1.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<p id="settings-status" class="status-chip">No changes yet.</p>
|
||||
<button id="settings-submit-button" type="submit" class="button" disabled>Save settings</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<aside class="settings-sidebar">
|
||||
<section class="settings-card info-card">
|
||||
<p class="eyebrow subtle">Checklist</p>
|
||||
<h3>Before you save</h3>
|
||||
<ul class="hint-list">
|
||||
<li>Match canvas dimensions to the OBS browser source you embed.</li>
|
||||
<li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
|
||||
<li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
|
||||
<li>Lower the minimum volume if alerts feel too loud on stream.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="settings-card info-card subtle">
|
||||
<p class="eyebrow subtle">Heads up</p>
|
||||
<h3>Global impact</h3>
|
||||
<p class="muted tiny">Changes here update every channel immediately. Save carefully and confirm with your team.</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Imgfloat Admin</title>
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
||||
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
|
||||
</head>
|
||||
<body class="settings-body">
|
||||
<div class="settings-shell">
|
||||
<header class="settings-header">
|
||||
<div class="brand">
|
||||
<div class="brand-mark">IF</div>
|
||||
<div>
|
||||
<div class="brand-title">Imgfloat</div>
|
||||
<div class="brand-subtitle">Twitch overlay manager</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:inline="javascript">
|
||||
const serverRenderedSettings = /*[[${settingsJson}]]*/;
|
||||
</script>
|
||||
<script src="/js/settings.js"></script>
|
||||
<script src="/js/toast.js"></script>
|
||||
</body>
|
||||
</header>
|
||||
|
||||
<main class="settings-main">
|
||||
<section class="settings-card settings-hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow subtle">System administrator settings</p>
|
||||
<h1>Application defaults</h1>
|
||||
<p class="muted">
|
||||
Configure overlay performance and audio guardrails for every channel using Imgfloat. These settings are
|
||||
applied globally.
|
||||
</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
|
||||
<span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
|
||||
<span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-grid compact">
|
||||
<div class="stat">
|
||||
<p class="stat-label">Canvas FPS</p>
|
||||
<p class="stat-value" id="stat-canvas-fps">--</p>
|
||||
<p class="stat-subtitle">Longest side <span id="stat-canvas-size">--</span></p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Playback speed</p>
|
||||
<p class="stat-value" id="stat-playback-range">--</p>
|
||||
<p class="stat-subtitle">Applies to all animations</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Audio pitch</p>
|
||||
<p class="stat-value" id="stat-audio-range">--</p>
|
||||
<p class="stat-subtitle">Fraction of original clip</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<p class="stat-label">Volume limits</p>
|
||||
<p class="stat-value" id="stat-volume-range">--</p>
|
||||
<p class="stat-subtitle">Keeps alerts comfortable</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="settings-layout">
|
||||
<section class="settings-card settings-panel">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow subtle">Overlay defaults</p>
|
||||
<h2>Performance & audio budget</h2>
|
||||
<p class="muted tiny">Tune the canvas and audio guardrails to keep overlays smooth and balanced.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form novalidate id="settings-form" class="settings-form">
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Canvas</p>
|
||||
<h3>Rendering budget</h3>
|
||||
<p class="muted tiny">
|
||||
Match FPS and max dimensions to your streaming canvas for consistent overlays.
|
||||
</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="canvas-fps"
|
||||
>Canvas FPS
|
||||
<input
|
||||
id="canvas-fps"
|
||||
name="canvas-fps"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="^[1-9]\d*$"
|
||||
placeholder="60"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="canvas-size"
|
||||
>Canvas max side length (pixels)
|
||||
<input
|
||||
id="canvas-size"
|
||||
name="canvas-size"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="^[1-9]\d*$"
|
||||
placeholder="1920"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">Use the longest edge of your OBS browser source to prevent stretching.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Playback</p>
|
||||
<h3>Animation speed limits</h3>
|
||||
<p class="muted tiny">Bound default speeds between 0 and 1 so clips run predictably.</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-playback-speed"
|
||||
>Min playback speed
|
||||
<input
|
||||
id="min-playback-speed"
|
||||
name="min-playback-speed"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.5"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-playback-speed"
|
||||
>Max playback speed
|
||||
<input
|
||||
id="max-playback-speed"
|
||||
name="max-playback-speed"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">
|
||||
Keep the maximum at 1.0 to avoid speeding overlays beyond their source frame rate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-heading">
|
||||
<p class="eyebrow subtle">Audio</p>
|
||||
<h3>Pitch & volume guardrails</h3>
|
||||
<p class="muted tiny">Prevent harsh audio by bounding pitch and volume as fractions of the source.</p>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-audio-pitch"
|
||||
>Min audio pitch
|
||||
<input
|
||||
id="min-audio-pitch"
|
||||
name="min-audio-pitch"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.8"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-audio-pitch"
|
||||
>Max audio pitch
|
||||
<input
|
||||
id="max-audio-pitch"
|
||||
name="max-audio-pitch"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid split-row">
|
||||
<label for="min-volume"
|
||||
>Min volume
|
||||
<input
|
||||
id="min-volume"
|
||||
name="min-volume"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="0.2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="max-volume"
|
||||
>Max volume
|
||||
<input
|
||||
id="max-volume"
|
||||
name="max-volume"
|
||||
class="text-input"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
pattern="^(0(\.\d+)?|1(\.0+)?)$"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p class="field-hint">Volume and pitch values are percentages of the original clip between 0 and 1.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<p id="settings-status" class="status-chip">No changes yet.</p>
|
||||
<button id="settings-submit-button" type="submit" class="button" disabled>Save settings</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<aside class="settings-sidebar">
|
||||
<section class="settings-card info-card">
|
||||
<p class="eyebrow subtle">Checklist</p>
|
||||
<h3>Before you save</h3>
|
||||
<ul class="hint-list">
|
||||
<li>Match canvas dimensions to the OBS browser source you embed.</li>
|
||||
<li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
|
||||
<li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
|
||||
<li>Lower the minimum volume if alerts feel too loud on stream.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="settings-card info-card subtle">
|
||||
<p class="eyebrow subtle">Heads up</p>
|
||||
<h3>Global impact</h3>
|
||||
<p class="muted tiny">
|
||||
Changes here update every channel immediately. Save carefully and confirm with your team.
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script th:inline="javascript">
|
||||
const serverRenderedSettings = /*[[${settingsJson}]]*/;
|
||||
</script>
|
||||
<script src="/js/settings.js"></script>
|
||||
<script src="/js/toast.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user