From 07b4ef8fc2b5e9e22dddd40834d712d0bddded07 Mon Sep 17 00:00:00 2001 From: Bobby Wibowo Date: Tue, 4 Dec 2018 18:58:53 +0700 Subject: [PATCH] Updates Added a new config entry named "cacheFileIdentifiers". More info in config.sample.js file. Improved some descriptions in config.sample.js file. Added some CSS animations wherever applicable. Bumped v1 version string. --- config.sample.js | 53 +++++++++++++++++++++++++-------- controllers/uploadController.js | 2 +- lolisafe.js | 3 +- public/css/dashboard.css | 48 ++++++++++++++++++++++++++++- public/css/home.css | 16 ++++++++++ public/css/style.css | 21 +++++++++++++ public/js/dashboard.js | 23 +++++++++++++- views/_globals.njk | 2 +- 8 files changed, 149 insertions(+), 19 deletions(-) diff --git a/config.sample.js b/config.sample.js index c8a5a9f..523f6d5 100644 --- a/config.sample.js +++ b/config.sample.js @@ -103,7 +103,9 @@ module.exports = { /* Max file size allowed. Needs to be in MB. - Note: When maxSize is greater than 1 MiB, you must set the client_max_body_size to the same as maxSize. + Note: When maxSize is greater than 1 MiB and using nginx as reverse proxy, + you must set client_max_body_size to the same as maxSize. + https://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size */ maxSize: '512MB', @@ -123,7 +125,7 @@ module.exports = { }, /* - Use DuckDuckGo's proxy when fetching any URL uploads. + Use DuckDuckGo's proxy when fetching URL uploads. This may be considered a hack and not supported by DuckDuckGo, so USE AT YOUR OWN RISK. This should work with any type of URLs, but they have to be direct links, since DuckDuckGo's proxy will not follow redirects. @@ -141,13 +143,14 @@ module.exports = { chunkSize: '10MB', /* - The length of the randomly generated name for uploaded files. + The length of the randomly generated identifier for uploaded files. If "userChangeable" is set to true, registered users will be able to change - their preferred file name length from the dashboard. The allowed range will - be set by "min" and "max". Otherwise it will use "default". - Technically it's possible to have "default" outside of the "min" and "max" range, - but please not. Otherwise, once a user has changed to a value within the range, - the user will no longer be able to use the default value. + their preferred length from the dashboard. The allowed range will be set + by "min" and "max". Otherwise it will use "default". + + It's possible to have "default" be outside of the "min" and "max" range, + but be aware that once a user has changed their preferred length to be somewhere + within the range, they will no longer be able to restore it back to "default". */ fileLength: { min: 4, @@ -156,6 +159,28 @@ module.exports = { userChangeable: false }, + /* + Cache file identifiers. + + They will be used for a stricter collision check, such that a single identifier + may not be used by more than a single file (e.i. if "abcd.jpg" already exists, a new PNG + file may not be named as "abcd.png"). + + If this is enabled, the safe will attempt to read file list of the uploads directory + during first launch, parse the names, then cache the identifiers into memory. + Its downside is that it will use a bit more memory, generally a few MBs increase + on a safe with over >10k uploads. + + If this is disabled, the safe will instead read file list of the uploads directory EVERYTIME + there is a new upload. + Its downside will be slower upload handling and memory usage "spikes", + since reading the file list will still consume memory, + just that it will only stay in memory for a few moments. + + On most caces, leaving this enabled is recommended. + */ + cacheFileIdentifiers: true, + /* The length of the randomly generated identifier for albums. */ @@ -165,6 +190,7 @@ module.exports = { This option will limit how many times it will try to generate a new random name when a collision occurrs. The shorter the length is, the higher the chance for a collision to occur. + This applies to both file name and album identifier. */ maxTries: 1, @@ -178,7 +204,7 @@ module.exports = { }, /* - Allows users to download a ZIP file of all files in an album. + Allow users to download a ZIP archive of all files in an album. The file is generated when the user clicks the download button in the view and is re-used if the album has not changed between download requests. */ @@ -198,8 +224,8 @@ module.exports = { noJsMaxSize: '100MB', /* - If you have a Page Rule in Cloudflare to cache everything in the album zippping - API route (HOME_DOMAIN/api/album/zip/*), with this option you can limit the + If you have a Page Rule in Cloudflare to cache everything in the album zip + API route (homeDomain/api/album/zip/*), with this option you can limit the maximum total size of files in an album that can be zipped. Cloudflare will not cache files bigger than 512MB. NOTE: Set to falsy value (false, null, etc.) to disable max total size. @@ -207,8 +233,8 @@ module.exports = { zipMaxTotalSize: '512MB', /* - If you want to make it automatically calls Cloudflare's API to purge cache on file delete, - fill your api key, email and your site's zone id below, then set "purgeCache" to true. + If you want to make it automatically call Cloudflare's API to purge cache on file delete, + fill your API key, email and your site's zone ID below, then set "purgeCache" to true. This will only purge cache of the deleted file and its associated thumb. */ apiKey: '', @@ -219,6 +245,7 @@ module.exports = { /* Folder where to store logs. + NOTE: This is currently unused. */ logsFolder: 'logs', diff --git a/controllers/uploadController.js b/controllers/uploadController.js index 34bc9a7..f8b5a07 100644 --- a/controllers/uploadController.js +++ b/controllers/uploadController.js @@ -115,7 +115,7 @@ uploadsController.getUniqueRandomName = (length, extension, set) => { return new Promise((resolve, reject) => { const access = i => { const identifier = randomstring.generate(length) - if (set) { + if (config.uploads.cacheFileIdentifiers) { // Filter matching names from uploads tree (as in the identifier) if (set.has(identifier)) { console.log(`Identifier ${identifier} is already used (${++i}/${maxTries}).`) diff --git a/lolisafe.js b/lolisafe.js index b36b178..e83b09d 100644 --- a/lolisafe.js +++ b/lolisafe.js @@ -131,8 +131,7 @@ const start = async () => { if (!created) { return process.exit(1) } } - const IDS_CACHE = true // experimental, set to false to disable - if (IDS_CACHE) { + if (config.uploads.cacheIdentifiers) { // Cache tree of uploads directory process.stdout.write('Caching identifiers in uploads directory ...') const setSize = await new Promise((resolve, reject) => { diff --git a/public/css/dashboard.css b/public/css/dashboard.css index c05cb32..b38d7ce 100644 --- a/public/css/dashboard.css +++ b/public/css/dashboard.css @@ -1,6 +1,13 @@ +body { + -webkit-animation: none; + animation: none; +} + #auth, #dashboard { - display: none + display: none; + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; } .section { @@ -35,6 +42,23 @@ background: none; } +ul#albumsContainer { + border-left: 0; + padding-left: 0; +} + +ul#albumsContainer li { + border-left: 1px solid #898b8d; + padding-left: .75em; + -webkit-animation: animateAlbum 1s; + animation: animateAlbum 1s +} + +#page.fade-in { + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s +} + .pagination a { color: #eff0f1; border-color: #4d4d4d; @@ -197,3 +221,25 @@ .is-linethrough { text-decoration: line-through } + +@-webkit-keyframes animateAlbum { + 0% { + opacity: 0; + max-height: 0; + } + 100% { + opacity: 1; + max-height: 36px; + } +} + +@keyframes animateAlbum { + 0% { + opacity: 0; + max-height: 0; + } + 100% { + opacity: 1; + max-height: 36px; + } +} diff --git a/public/css/home.css b/public/css/home.css index 3a1f97b..842e9eb 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -111,6 +111,11 @@ margin-bottom: 1rem; } +.uploads>div { + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; +} + .uploads.nojs { margin-bottom: 0; } @@ -138,6 +143,11 @@ margin-top: 5px; } +#albumDiv { + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; +} + #albumDiv .control { text-align: inherit; } @@ -145,6 +155,8 @@ #linksColumn { margin-left: -0.25rem; margin-right: -0.25rem; + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; } #linksColumn .column { @@ -159,6 +171,8 @@ #tabs { margin-bottom: 1rem; + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; } #tabs ul { @@ -181,4 +195,6 @@ .tab-content { margin-bottom: -.75rem; + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; } diff --git a/public/css/style.css b/public/css/style.css index 620e5ad..e992565 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -5,6 +5,8 @@ html { body { color: #eff0f1; + -webkit-animation: fadeInOpacity .5s; + animation: fadeInOpacity .5s; } .title { @@ -115,9 +117,28 @@ hr { border-bottom-right-radius: 0; right: 1%; opacity: .25; + -webkit-transition: opacity .25s; transition: opacity .25s; } .render.button:hover { opacity: 1; } + +@-webkit-keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/public/js/dashboard.js b/public/js/dashboard.js index 86759b6..fecc4d2 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -68,7 +68,9 @@ const page = { imageExtensions: ['.webp', '.jpg', '.jpeg', '.bmp', '.gif', '.png'], // byte units for getPrettyBytes() - byteUnits: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + byteUnits: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], + + fadingIn: null } page.preparePage = function () { @@ -267,6 +269,17 @@ page.isLoading = function (element, state) { element.classList.remove('is-loading') } +page.fadeIn = function (content) { + if (page.fadingIn) { + clearTimeout(page.fadingIn) + page.dom.classList.remove('fade-in') + } + page.dom.classList.add('fade-in') + page.fadingIn = setTimeout(function () { + page.dom.classList.remove('fade-in') + }, 500) +} + page.getUploads = function ({ album, pageNum, all } = {}, element) { if (element) { page.isLoading(element, true) } if (pageNum === undefined) { pageNum = 0 } @@ -354,6 +367,7 @@ page.getUploads = function ({ album, pageNum, all } = {}, element) { ${pagination} ` + page.fadeIn() const table = document.getElementById('table') @@ -446,6 +460,7 @@ page.getUploads = function ({ album, pageNum, all } = {}, element) {
${pagination} ` + page.fadeIn() const table = document.getElementById('table') @@ -823,6 +838,7 @@ page.deleteByNames = function () { ` + page.fadeIn() } page.deleteFileByNames = function () { @@ -1059,6 +1075,7 @@ page.getAlbums = function () { ` + page.fadeIn() const homeDomain = response.data.homeDomain const table = document.getElementById('table') @@ -1351,6 +1368,7 @@ page.changeFileLength = function () {
` + page.fadeIn() document.getElementById('setFileLength').addEventListener('click', function () { page.setFileLength(document.getElementById('fileLength').value, this) @@ -1420,6 +1438,7 @@ page.changeToken = function () { ` + page.fadeIn() }).catch(function (error) { console.log(error) return swal('An error occurred!', 'There was an error with the request, please check the console for more information.', 'error') @@ -1483,6 +1502,7 @@ page.changePassword = function () { ` + page.fadeIn() document.getElementById('sendChangePassword').addEventListener('click', function () { if (document.getElementById('password').value === document.getElementById('passwordConfirm').value) { @@ -1651,6 +1671,7 @@ page.getUsers = ({ pageNum } = {}, element) => {
${pagination} ` + page.fadeIn() const table = document.getElementById('table') diff --git a/views/_globals.njk b/views/_globals.njk index 6395e8f..5bfeb31 100644 --- a/views/_globals.njk +++ b/views/_globals.njk @@ -15,7 +15,7 @@ v2: Images and config files (manifest.json, browserconfig.xml, etc). v3: CSS and JS files (libs such as bulma, lazyload, etc). #} -{% set v1 = "Me9KhOnP5M" %} +{% set v1 = "pt1vlNTrbG" %} {% set v2 = "Ii3JYKIhb0" %} {% set v3 = "8xbKOM7u3w" %}