This commit is contained in:
Pitu 2020-12-25 02:08:54 +09:00
parent 279cde7dd3
commit 09d8d02e6c
14 changed files with 26 additions and 828 deletions

2
.vscode/launch.json vendored
View File

@ -16,7 +16,7 @@
"request": "launch",
"name": "[DEV] Launch ThumbGen",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\src\\api\\generateThumbs"
"program": "${workspaceFolder}\\src\\api\\utils\\generateThumbs"
},
{
"type": "chrome",

View File

@ -46,7 +46,6 @@
"dumper.js": "^1.3.1",
"express": "^4.17.1",
"express-rate-limit": "^3.4.0",
"ffmpeg-generate-video-preview": "^1.0.3",
"file-saver": "^2.0.1",
"fluent-ffmpeg": "^2.1.2",
"fs-jetpack": "^2.2.2",
@ -56,13 +55,10 @@
"knex": "^0.16.3",
"masonry-layout": "^4.2.2",
"moment": "^2.24.0",
"morgan": "^1.10.0",
"multer": "^1.4.1",
"mysql": "^2.16.0",
"nuxt": "2.12.2",
"nuxt-dropzone": "^0.2.8",
"one-liner": "^1.3.0",
"path": "^0.12.7",
"pg": "^7.8.1",
"qoa": "^0.2.0",
"randomstring": "^1.1.5",
@ -80,8 +76,6 @@
"vuebar": "^0.0.20"
},
"devDependencies": {
"@creativebulma/bulma-divider": "^1.1.0",
"@nuxtjs/eslint-config": "^3.0.0",
"autoprefixer": "^9.4.7",
"babel-eslint": "^10.0.1",
"cross-env": "^5.2.0",

View File

@ -7,9 +7,7 @@ const RateLimit = require('express-rate-limit');
const bodyParser = require('body-parser');
const jetpack = require('fs-jetpack');
const path = require('path');
const morgan = require('morgan');
const log = require('../utils/Log');
const ThumbUtil = require('../utils/ThumbUtil');
// eslint-disable-next-line no-unused-vars
const rateLimiter = new RateLimit({
@ -35,27 +33,6 @@ class Server {
});
this.server.use(bodyParser.urlencoded({ extended: true }));
this.server.use(bodyParser.json());
if (process.env.NODE_ENV !== 'production') {
this.server.use(morgan('combined', {
skip(req) {
let ext = req.path.split('.').pop();
if (ext) { ext = `.${ext.toLowerCase()}`; }
if (
ThumbUtil.imageExtensions.indexOf(ext) > -1 ||
ThumbUtil.videoExtensions.indexOf(ext) > -1 ||
req.path.indexOf('_nuxt') > -1 ||
req.path.indexOf('favicon.ico') > -1
) {
return true;
}
return false;
},
stream: {
write(str) { log.debug(str); }
}
}));
}
// this.server.use(rateLimiter);
// Serve the uploads

View File

@ -8,13 +8,10 @@ const log = require('./Log');
class ThumbUtil {
static imageExtensions = ['.jpg', '.jpeg', '.gif', '.png', '.webp'];
static videoExtensions = ['.webm', '.mp4', '.wmv', '.avi', '.mov'];
static thumbPath = path.join(__dirname, '../../../', process.env.UPLOAD_FOLDER, 'thumbs');
static squareThumbPath = path.join(__dirname, '../../../', process.env.UPLOAD_FOLDER, 'thumbs', 'square');
static videoPreviewPath = path.join(__dirname, '../../../', process.env.UPLOAD_FOLDER, 'thumbs', 'preview');
static generateThumbnails(filename) {

View File

@ -3,10 +3,10 @@ require('dotenv').config();
const fs = require('fs');
const path = require('path');
const ThumbUtil = require('./utils/ThumbUtil');
const ThumbUtil = require('./ThumbUtil');
const start = async () => {
const files = fs.readdirSync(path.join(__dirname, '../../', process.env.UPLOAD_FOLDER));
const files = fs.readdirSync(path.join(__dirname, '../../../', process.env.UPLOAD_FOLDER));
for (const fileName of files) {
console.log(`Generating thumb for '${fileName}`);
// eslint-disable-next-line no-await-in-loop

View File

@ -6,204 +6,108 @@
@-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@ -216,9 +120,6 @@
border: 2px solid #2c3340;
background: rgba(0, 0, 0, 0.15);
border-radius: .3em;
// border: 2px solid rgba(0, 0, 0, 0.3);
// background: white;
// padding: 20px 20px;
}
.dropzone.dz-clickable {
cursor: pointer;
@ -283,10 +184,6 @@
background: white;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
@ -358,12 +255,7 @@
}
}
.dropzone .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
@ -379,18 +271,10 @@
display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark,
@ -413,25 +297,13 @@
}
.dropzone .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
@ -443,8 +315,7 @@
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
transform: scale(1);
transform: scale(1);
border-radius: 8px;
overflow: hidden;
right: 10px;
@ -462,10 +333,6 @@
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-error .dz-error-message {
@ -482,10 +349,6 @@
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
@ -653,13 +516,7 @@
z-index: 50;
right: 5px;
top: 6px;
-webkit-transition: display 0.2s linear;
-moz-transition: display 0.2s linear;
-ms-transition: display 0.2s linear;
-o-transition: display 0.2s linear;
transition: display 0.2s linear;
cursor: pointer;
> div {
@ -700,11 +557,6 @@
height: auto;
left: 60px;
position: absolute;
-webkit-transition: display 0.2s linear;
-moz-transition: display 0.2s linear;
-ms-transition: display 0.2s linear;
-o-transition: display 0.2s linear;
transition: display 0.2s linear;
}

View File

@ -280,7 +280,7 @@ table.table {
&::placeholder {
color: $textColor;
}
}
}
.lolisafe-input .icon {
color: #323846 !important;
@ -295,11 +295,8 @@ table.table {
}
.vb > .vb-dragger > .vb-dragger-styler {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(0, 0, 0, 0);
-webkit-transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
background-color: $backgroundAccent;
margin: 5px 5px 5px 0;

View File

@ -235,8 +235,7 @@ export default {
padding: 2em 0em;
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}
}
@ -247,8 +246,7 @@ export default {
.b-table {
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}

View File

@ -117,11 +117,6 @@ export default {
width: 1em;
z-index: 4;
top: 22px;
-webkit-transition: transform 0.1s linear;
-moz-transition: transform 0.1s linear;
-ms-transition: transform 0.1s linear;
-o-transition: transform 0.1s linear;
transition: transform 0.1s linear;
&.active {
@ -133,8 +128,7 @@ export default {
div.thumb {
width: 64px;
height: 64px;
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
div.info {

View File

@ -388,10 +388,6 @@ div.preview {
div.actions {
opacity: 0;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
position: absolute;
top: 0px;

View File

@ -123,7 +123,6 @@ export default {
&:hover {
box-shadow: 0 3rem 3rem -1.25rem rgba(10,10,10,.1);
-webkit-transform: translateY(-.5rem);
transform: translateY(-.5rem);
}
}

View File

@ -164,11 +164,6 @@ export default {
width: 1em;
z-index: 4;
top: 22px;
-webkit-transition: transform 0.1s linear;
-moz-transition: transform 0.1s linear;
-ms-transition: transform 0.1s linear;
-o-transition: transform 0.1s linear;
transition: transform 0.1s linear;
&.active {
@ -179,8 +174,7 @@ export default {
div.thumb {
width: 64px;
height: 64px;
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
div.info {
@ -237,8 +231,7 @@ export default {
padding: 2em 0em;
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}
}
@ -248,8 +241,7 @@ export default {
.b-table {
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}
</style>

View File

@ -26,11 +26,6 @@
width: 1em;
z-index: 4;
top: 22px;
-webkit-transition: transform 0.1s linear;
-moz-transition: transform 0.1s linear;
-ms-transition: transform 0.1s linear;
-o-transition: transform 0.1s linear;
transition: transform 0.1s linear;
&.active {
@ -41,8 +36,7 @@
div.thumb {
width: 64px;
height: 64px;
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
div.info {
@ -99,8 +93,7 @@
padding: 2em 0em;
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}
}
@ -117,8 +110,7 @@
.b-table {
.table-wrapper {
-webkit-box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
box-shadow: $boxShadowLight;
}
}
</style>

614
yarn.lock

File diff suppressed because it is too large Load Diff