Fix styles

This commit is contained in:
sayhiben
2024-08-17 15:34:48 -07:00
parent df71a581e7
commit fd1f766fa2
2 changed files with 273 additions and 329 deletions

204
package-lock.json generated
View File

@@ -4914,15 +4914,15 @@
} }
}, },
"node_modules/acme-client": { "node_modules/acme-client": {
"version": "4.0.0", "version": "4.2.5",
"resolved": "https://registry.npmjs.org/acme-client/-/acme-client-4.0.0.tgz", "resolved": "https://registry.npmjs.org/acme-client/-/acme-client-4.2.5.tgz",
"integrity": "sha512-1anYzjObAtah08gLPPxYFmbT0Kl1+8PQWfzcMSH/gw87klBmLHYjuj297CwxQHCAE3HbpezJz8PeGmb1P4NX8A==", "integrity": "sha512-dtnck4sdZ2owFLTC73Ewjx0kmvsRjTRgaOc8UztCNODT+lr1DXj0tiuUXjeY4LAzZryXCtCib/E+KD8NYeP1aw==",
"dependencies": { "dependencies": {
"axios": "^0.19.0", "axios": "0.26.1",
"backo2": "^1.0.0", "backo2": "^1.0.0",
"bluebird": "^3.5.0", "bluebird": "^3.5.0",
"debug": "^4.1.1", "debug": "^4.1.1",
"node-forge": "^0.9.1" "node-forge": "^1.3.0"
}, },
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
@@ -5143,12 +5143,11 @@
"dev": true "dev": true
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "0.19.2", "version": "0.26.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
"deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
"dependencies": { "dependencies": {
"follow-redirects": "1.5.10" "follow-redirects": "^1.14.8"
} }
}, },
"node_modules/babel-jest": { "node_modules/babel-jest": {
@@ -5420,12 +5419,12 @@
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
}, },
"node_modules/body-parser": { "node_modules/body-parser": {
"version": "1.20.1", "version": "1.20.2",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
"dependencies": { "dependencies": {
"bytes": "3.1.2", "bytes": "3.1.2",
"content-type": "~1.0.4", "content-type": "~1.0.5",
"debug": "2.6.9", "debug": "2.6.9",
"depd": "2.0.0", "depd": "2.0.0",
"destroy": "1.2.0", "destroy": "1.2.0",
@@ -5433,7 +5432,7 @@
"iconv-lite": "0.4.24", "iconv-lite": "0.4.24",
"on-finished": "2.4.1", "on-finished": "2.4.1",
"qs": "6.11.0", "qs": "6.11.0",
"raw-body": "2.5.1", "raw-body": "2.5.2",
"type-is": "~1.6.18", "type-is": "~1.6.18",
"unpipe": "1.0.0" "unpipe": "1.0.0"
}, },
@@ -5553,11 +5552,11 @@
} }
}, },
"node_modules/braces": { "node_modules/braces": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.1.1"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@@ -6156,6 +6155,14 @@
"devOptional": true, "devOptional": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cookie-signature": { "node_modules/cookie-signature": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -7027,9 +7034,9 @@
} }
}, },
"node_modules/editorconfig/node_modules/semver": { "node_modules/editorconfig/node_modules/semver": {
"version": "5.7.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"bin": { "bin": {
"semver": "bin/semver" "semver": "bin/semver"
} }
@@ -7420,16 +7427,16 @@
} }
}, },
"node_modules/express": { "node_modules/express": {
"version": "4.18.2", "version": "4.19.2",
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
"dependencies": { "dependencies": {
"accepts": "~1.3.8", "accepts": "~1.3.8",
"array-flatten": "1.1.1", "array-flatten": "1.1.1",
"body-parser": "1.20.1", "body-parser": "1.20.2",
"content-disposition": "0.5.4", "content-disposition": "0.5.4",
"content-type": "~1.0.4", "content-type": "~1.0.4",
"cookie": "0.5.0", "cookie": "0.6.0",
"cookie-signature": "1.0.6", "cookie-signature": "1.0.6",
"debug": "2.6.9", "debug": "2.6.9",
"depd": "2.0.0", "depd": "2.0.0",
@@ -7465,14 +7472,6 @@
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
}, },
"node_modules/express/node_modules/cookie": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/express/node_modules/debug": { "node_modules/express/node_modules/debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7780,9 +7779,9 @@
} }
}, },
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
}, },
@@ -7950,29 +7949,24 @@
} }
}, },
"node_modules/follow-redirects": { "node_modules/follow-redirects": {
"version": "1.5.10", "version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"dependencies": { "funding": [
"debug": "=3.1.0" {
}, "type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": { "engines": {
"node": ">=4.0" "node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
} }
}, },
"node_modules/follow-redirects/node_modules/debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/follow-redirects/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"node_modules/foreground-child": { "node_modules/foreground-child": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -8243,26 +8237,11 @@
"node": ">=10.0" "node": ">=10.0"
} }
}, },
"node_modules/global-agent/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"optional": true,
"dependencies": {
"yallist": "^4.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/global-agent/node_modules/semver": { "node_modules/global-agent/node_modules/semver": {
"version": "7.4.0", "version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==", "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"optional": true, "optional": true,
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
}, },
@@ -8270,12 +8249,6 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/global-agent/node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"optional": true
},
"node_modules/globals": { "node_modules/globals": {
"version": "11.12.0", "version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -9237,25 +9210,6 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
}, },
"node_modules/jake/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"engines": {
"node": ">=8"
}
},
"node_modules/jake/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/jest": { "node_modules/jest": {
"version": "29.7.0", "version": "29.7.0",
"resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -11063,10 +11017,9 @@
} }
}, },
"node_modules/koa-static/node_modules/debug": { "node_modules/koa-static/node_modules/debug": {
"version": "3.2.6", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
"deprecated": "Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)",
"dependencies": { "dependencies": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@@ -11613,11 +11566,11 @@
} }
}, },
"node_modules/node-forge": { "node_modules/node-forge": {
"version": "0.9.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.1.tgz", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
"integrity": "sha512-G6RlQt5Sb4GMBzXvhfkeFmbqR6MzhtnT7VTHuLadjkii3rdYHNdw0m8zA4BTxVIh68FicCQ2NSUANpsqkr9jvQ==", "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
"engines": { "engines": {
"node": ">= 4.5.0" "node": ">= 6.13.0"
} }
}, },
"node_modules/node-gyp-build": { "node_modules/node-gyp-build": {
@@ -12588,9 +12541,9 @@
} }
}, },
"node_modules/raw-body": { "node_modules/raw-body": {
"version": "2.5.1", "version": "2.5.2",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
"dependencies": { "dependencies": {
"bytes": "3.1.2", "bytes": "3.1.2",
"http-errors": "2.0.0", "http-errors": "2.0.0",
@@ -13139,15 +13092,6 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/selfsigned/node_modules/node-forge": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
"license": "(BSD-3-Clause OR GPL-2.0)",
"engines": {
"node": ">= 6.13.0"
}
},
"node_modules/semaphore-async-await": { "node_modules/semaphore-async-await": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/semaphore-async-await/-/semaphore-async-await-1.5.1.tgz", "resolved": "https://registry.npmjs.org/semaphore-async-await/-/semaphore-async-await-1.5.1.tgz",
@@ -13515,9 +13459,9 @@
} }
}, },
"node_modules/simple-websocket/node_modules/ws": { "node_modules/simple-websocket/node_modules/ws": {
"version": "7.5.9", "version": "7.5.10",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
"engines": { "engines": {
"node": ">=8.3.0" "node": ">=8.3.0"
}, },
@@ -13804,7 +13748,6 @@
"version": "6.1.12", "version": "6.1.12",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz",
"integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==", "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==",
"license": "MIT",
"dependencies": { "dependencies": {
"@emotion/is-prop-valid": "1.2.2", "@emotion/is-prop-valid": "1.2.2",
"@emotion/unitless": "0.8.1", "@emotion/unitless": "0.8.1",
@@ -13828,18 +13771,17 @@
"react-dom": ">= 16.8.0" "react-dom": ">= 16.8.0"
} }
}, },
"node_modules/styled-components/node_modules/stylis": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
},
"node_modules/styled-components/node_modules/tslib": { "node_modules/styled-components/node_modules/tslib": {
"version": "2.6.2", "version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"license": "0BSD" "license": "0BSD"
}, },
"node_modules/stylis": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
"license": "MIT"
},
"node_modules/sumchecker": { "node_modules/sumchecker": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz", "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -13890,7 +13832,6 @@
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": { "dependencies": {
"has-flag": "^4.0.0" "has-flag": "^4.0.0"
}, },
@@ -13902,7 +13843,6 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }

View File

@@ -13,6 +13,8 @@ import {
useRef, useRef,
} from 'preact/hooks' } from 'preact/hooks'
import { State } from 'xstate' import { State } from 'xstate'
import isPropValid from '@emotion/is-prop-valid';
import { StyleSheetManager } from 'styled-components';
import styled, { createGlobalStyle } from 'styled-components' import styled, { createGlobalStyle } from 'styled-components'
import { useHotkeys } from 'react-hotkeys-hook' import { useHotkeys } from 'react-hotkeys-hook'
import Color from 'color' import Color from 'color'
@@ -580,214 +582,216 @@ function App({ wsEndpoint, role }) {
} }
return ( return (
<Stack flex="1"> <StyleSheetManager shouldForwardProp={(prop) => isPropValid(prop) && !prop.startsWith('$')}>
<Stack> <Stack flex="1">
<StyledHeader> <Stack>
<h1>Streamwall ({location.host})</h1> <StyledHeader>
<div> <h1>Streamwall ({location.host})</h1>
connection status: {isConnected ? 'connected' : 'connecting...'} <div>
</div> connection status: {isConnected ? 'connected' : 'connecting...'}
<div>role: {role}</div> </div>
</StyledHeader> <div>role: {role}</div>
{delayState && ( </StyledHeader>
<StreamDelayBox {delayState && (
role={role} <StreamDelayBox
delayState={delayState} role={role}
setStreamCensored={setStreamCensored} delayState={delayState}
setStreamRunning={setStreamRunning} setStreamCensored={setStreamCensored}
/> setStreamRunning={setStreamRunning}
)} />
<StyledDataContainer isConnected={isConnected}> )}
{gridCount && ( <StyledDataContainer isConnected={isConnected}>
<StyledGridContainer {gridCount && (
onMouseMove={updateHoveringIdx} <StyledGridContainer
windowWidth={windowWidth} onMouseMove={updateHoveringIdx}
windowHeight={windowHeight} windowWidth={windowWidth}
> windowHeight={windowHeight}
<StyledGridInputs> >
{range(0, gridCount).map((y) => <StyledGridInputs>
range(0, gridCount).map((x) => { {range(0, gridCount).map((y) =>
const idx = gridCount * y + x range(0, gridCount).map((x) => {
const { state } = stateIdxMap.get(idx) || {} const idx = gridCount * y + x
const { streamId } = sharedState.views?.[idx] ?? {} const { state } = stateIdxMap.get(idx) || {}
const isDragHighlighted = const { streamId } = sharedState.views?.[idx] ?? {}
dragStart !== undefined && const isDragHighlighted =
idxInBox(gridCount, dragStart, hoveringIdx, idx) dragStart !== undefined &&
idxInBox(gridCount, dragStart, hoveringIdx, idx)
return (
<GridInput
style={{
width: `${100 / gridCount}%`,
height: `${100 / gridCount}%`,
left: `${(100 * x) / gridCount}%`,
top: `${(100 * y) / gridCount}%`,
}}
idx={idx}
spaceValue={streamId}
onChangeSpace={handleSetView}
isHighlighted={isDragHighlighted}
role={role}
onMouseDown={handleDragStart}
onFocus={handleFocusInput}
onBlur={handleBlurInput}
/>
)
}),
)}
</StyledGridInputs>
<StyledGridPreview>
{views.map(({ state, isListening }) => {
const { pos } = state.context
const { streamId } = sharedState.views[pos.spaces[0]] ?? {}
const data = streams.find((d) => d._id === streamId)
return ( return (
<GridInput <StyledGridPreviewBox
color={idColor(streamId)}
style={{ style={{
width: `${100 / gridCount}%`, left: `${(100 * pos.x) / windowWidth}%`,
height: `${100 / gridCount}%`, top: `${(100 * pos.y) / windowHeight}%`,
left: `${(100 * x) / gridCount}%`, width: `${(100 * pos.width) / windowWidth}%`,
top: `${(100 * y) / gridCount}%`, height: `${(100 * pos.height) / windowHeight}%`,
}} }}
idx={idx} pos={pos}
spaceValue={streamId} windowWidth={windowWidth}
onChangeSpace={handleSetView} windowHeight={windowHeight}
isHighlighted={isDragHighlighted} isListening={isListening}
isError={state && state.matches('displaying.error')}
>
<StyledGridInfo>
<StyledGridLabel>{streamId}</StyledGridLabel>
<div>{data?.source}</div>
</StyledGridInfo>
</StyledGridPreviewBox>
)
})}
</StyledGridPreview>
{views.map(
({ state, isListening, isBackgroundListening, isBlurred }) => {
const { pos } = state.context
const { streamId } = sharedState.views[pos.spaces[0]] ?? {}
return (
<GridControls
idx={pos.spaces[0]}
streamId={streamId}
style={{
left: `${(100 * pos.x) / windowWidth}%`,
top: `${(100 * pos.y) / windowHeight}%`,
width: `${(100 * pos.width) / windowWidth}%`,
height: `${(100 * pos.height) / windowHeight}%`,
}}
isDisplaying={state && state.matches('displaying')}
isListening={isListening}
isBackgroundListening={isBackgroundListening}
isBlurred={isBlurred}
isSwapping={pos.spaces.includes(swapStartIdx)}
showDebug={showDebug}
role={role} role={role}
onSetListening={handleSetListening}
onSetBackgroundListening={handleSetBackgroundListening}
onSetBlurred={handleSetBlurred}
onReloadView={handleReloadView}
onSwapView={handleSwapView}
onRotateView={handleRotateStream}
onBrowse={handleBrowse}
onDevTools={handleDevTools}
onMouseDown={handleDragStart} onMouseDown={handleDragStart}
onFocus={handleFocusInput}
onBlur={handleBlurInput}
/> />
) )
}), },
)} )}
</StyledGridInputs> </StyledGridContainer>
<StyledGridPreview> )}
{views.map(({ state, isListening }) => { {(roleCan(role, 'dev-tools') || roleCan(role, 'browse')) && (
const { pos } = state.context <label>
const { streamId } = sharedState.views[pos.spaces[0]] ?? {} <input
const data = streams.find((d) => d._id === streamId) type="checkbox"
return ( value={showDebug}
<StyledGridPreviewBox onChange={handleChangeShowDebug}
color={idColor(streamId)} />
style={{ Show stream debug tools
left: `${(100 * pos.x) / windowWidth}%`, </label>
top: `${(100 * pos.y) / windowHeight}%`, )}
width: `${(100 * pos.width) / windowWidth}%`, <Facts />
height: `${(100 * pos.height) / windowHeight}%`, </StyledDataContainer>
}} </Stack>
pos={pos} <Stack flex="1" scroll={true} minHeight={200}>
windowWidth={windowWidth} <StyledDataContainer isConnected={isConnected}>
windowHeight={windowHeight} {isConnected ? (
isListening={isListening} <div>
isError={state && state.matches('displaying.error')} <h3>Live</h3>
> <StreamList rows={liveStreams} />
<StyledGridInfo> <h3>Offline / Unknown</h3>
<StyledGridLabel>{streamId}</StyledGridLabel> <StreamList rows={otherStreams} />
<div>{data?.source}</div> </div>
</StyledGridInfo> ) : (
</StyledGridPreviewBox> <div>loading...</div>
) )}
})} {roleCan(role, 'update-custom-stream') &&
</StyledGridPreview> roleCan(role, 'delete-custom-stream') && (
{views.map( <>
({ state, isListening, isBackgroundListening, isBlurred }) => { <h2>Custom Streams</h2>
const { pos } = state.context <div>
const { streamId } = sharedState.views[pos.spaces[0]] ?? {} {/*
return ( Include an empty object at the end to create an extra input for a new custom stream.
<GridControls We need it to be part of the array (rather than JSX below) for DOM diffing to match the key and retain focus.
idx={pos.spaces[0]} */}
streamId={streamId} {customStreams.map(({ link, label, kind }, idx) => (
style={{ <CustomStreamInput
left: `${(100 * pos.x) / windowWidth}%`, key={idx}
top: `${(100 * pos.y) / windowHeight}%`, link={link}
width: `${(100 * pos.width) / windowWidth}%`, label={label}
height: `${(100 * pos.height) / windowHeight}%`, kind={kind}
}} onChange={handleChangeCustomStream}
isDisplaying={state && state.matches('displaying')} onDelete={handleDeleteCustomStream}
isListening={isListening} />
isBackgroundListening={isBackgroundListening} ))}
isBlurred={isBlurred} <CreateCustomStreamInput
isSwapping={pos.spaces.includes(swapStartIdx)} onCreate={handleChangeCustomStream}
showDebug={showDebug}
role={role}
onSetListening={handleSetListening}
onSetBackgroundListening={handleSetBackgroundListening}
onSetBlurred={handleSetBlurred}
onReloadView={handleReloadView}
onSwapView={handleSwapView}
onRotateView={handleRotateStream}
onBrowse={handleBrowse}
onDevTools={handleDevTools}
onMouseDown={handleDragStart}
/> />
) </div>
}, </>
)} )}
</StyledGridContainer> {roleCan(role, 'edit-tokens') && authState && (
)}
{(roleCan(role, 'dev-tools') || roleCan(role, 'browse')) && (
<label>
<input
type="checkbox"
value={showDebug}
onChange={handleChangeShowDebug}
/>
Show stream debug tools
</label>
)}
<Facts />
</StyledDataContainer>
</Stack>
<Stack flex="1" scroll={true} minHeight={200}>
<StyledDataContainer isConnected={isConnected}>
{isConnected ? (
<div>
<h3>Live</h3>
<StreamList rows={liveStreams} />
<h3>Offline / Unknown</h3>
<StreamList rows={otherStreams} />
</div>
) : (
<div>loading...</div>
)}
{roleCan(role, 'update-custom-stream') &&
roleCan(role, 'delete-custom-stream') && (
<> <>
<h2>Custom Streams</h2> <h2>Access</h2>
<div> <div>
{/* <CreateInviteInput onCreateInvite={handleCreateInvite} />
Include an empty object at the end to create an extra input for a new custom stream. <h3>Invites</h3>
We need it to be part of the array (rather than JSX below) for DOM diffing to match the key and retain focus. {newInvite && (
*/} <StyledNewInviteBox>
{customStreams.map(({ link, label, kind }, idx) => ( Invite link created:{' '}
<CustomStreamInput <a
key={idx} href={`/invite/${newInvite.secret}`}
link={link} onClick={preventLinkClick}
label={label} >
kind={kind} "{newInvite.name}"
onChange={handleChangeCustomStream} </a>
onDelete={handleDeleteCustomStream} </StyledNewInviteBox>
)}
{authState.invites.map(({ id, name, role }) => (
<AuthTokenLine
id={id}
name={name}
role={role}
onDelete={handleDeleteToken}
/>
))}
<h3>Sessions</h3>
{authState.sessions.map(({ id, name, role }) => (
<AuthTokenLine
id={id}
name={name}
role={role}
onDelete={handleDeleteToken}
/> />
))} ))}
<CreateCustomStreamInput
onCreate={handleChangeCustomStream}
/>
</div> </div>
</> </>
)} )}
{roleCan(role, 'edit-tokens') && authState && ( </StyledDataContainer>
<> </Stack>
<h2>Access</h2>
<div>
<CreateInviteInput onCreateInvite={handleCreateInvite} />
<h3>Invites</h3>
{newInvite && (
<StyledNewInviteBox>
Invite link created:{' '}
<a
href={`/invite/${newInvite.secret}`}
onClick={preventLinkClick}
>
"{newInvite.name}"
</a>
</StyledNewInviteBox>
)}
{authState.invites.map(({ id, name, role }) => (
<AuthTokenLine
id={id}
name={name}
role={role}
onDelete={handleDeleteToken}
/>
))}
<h3>Sessions</h3>
{authState.sessions.map(({ id, name, role }) => (
<AuthTokenLine
id={id}
name={name}
role={role}
onDelete={handleDeleteToken}
/>
))}
</div>
</>
)}
</StyledDataContainer>
</Stack> </Stack>
</Stack> </StyleSheetManager>
) )
} }
@@ -888,9 +892,9 @@ function StreamLine({
return ( return (
<StyledStreamLine> <StyledStreamLine>
<StyledId <StyledId
disabled={disabled} $disabled={disabled}
onMouseDown={disabled ? null : handleMouseDownId} onMouseDown={disabled ? null : handleMouseDownId}
color={idColor(id)} $color={idColor(id)}
> >
{id} {id}
</StyledId> </StyledId>
@@ -1235,7 +1239,7 @@ const StyledButton = styled.button`
isActive && isActive &&
` `
border-color: ${activeColor}; border-color: ${activeColor};
background: ${Color(activeColor).desaturate(0.5).lighten(0.5)}; background: ${Color(activeColor).desaturate(0.5).lighten(0.5).hsl().string()};
`}; `};
&:focus { &:focus {
@@ -1271,7 +1275,7 @@ const StyledGridPreviewBox = styled.div.attrs((props) => ({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
background: ${({ color }) => color.lightness(50) || '#333'}; background: ${({ color }) => Color(color).lightness(50).hsl().string() || '#333'};
border: 0 solid ${({ isError }) => (isError ? 'red' : 'black')}; border: 0 solid ${({ isError }) => (isError ? 'red' : 'black')};
border-left-width: ${({ pos, borderWidth }) => border-left-width: ${({ pos, borderWidth }) =>
pos.x === 0 ? 0 : borderWidth}px; pos.x === 0 ? 0 : borderWidth}px;
@@ -1331,7 +1335,7 @@ const StyledGridInput = styled(LazyChangeInput)`
border: none; border: none;
padding: 0; padding: 0;
background: ${({ color, isHighlighted }) => background: ${({ color, isHighlighted }) =>
isHighlighted ? color.lightness(90) : color.lightness(75)}; isHighlighted ? Color(color).lightness(90).hsl().string() : Color(color).lightness(75).hsl().string() };
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
@@ -1368,13 +1372,13 @@ const StyledGridContainer = styled.div.attrs((props) => ({
const StyledId = styled.div` const StyledId = styled.div`
flex-shrink: 0; flex-shrink: 0;
margin-right: 5px; margin-right: 5px;
background: ${({ color }) => color.lightness(50) || '#333'}; background: ${({ $color }) => Color($color).lightness(50).hsl().string() || '#333'};
color: white; color: white;
padding: 3px; padding: 3px;
border-radius: 5px; border-radius: 5px;
width: 3em; width: 3em;
text-align: center; text-align: center;
cursor: ${({ disabled }) => (disabled ? 'normal' : 'pointer')}; cursor: ${({ $disabled }) => ($disabled ? 'normal' : 'pointer')};
` `
const StyledStreamLine = styled.div` const StyledStreamLine = styled.div`