amybones/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

#986

Browse source
This commit is contained in:
syuilo 2017-12-11 13:33:33 +09:00
parent 9852c57b8f
commit e36a708132
8 changed files with 157 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/api/common/add-file-to-drive.ts
View file

@ -110,7 +110,7 @@ const addFile = async (
}
}
const [wh, folder] = await Promise.all([
const [wh, averageColor, folder] = await Promise.all([
// Width and height (when image)
(async () => {
// 画像かどうか
@ -125,14 +125,45 @@ const addFile = async (
return null;
}
log('calculate image width and height...');
// Calculate width and height
const g = gm(fs.createReadStream(path), name);
const size = await prominence(g).size();
log('image width and height is calculated');
log(`image width and height is calculated: ${size.width}, ${size.height}`);
return [size.width, size.height];
})(),
// average color (when image)
(async () => {
// 画像かどうか
if (!/^image\/.*$/.test(mime)) {
return null;
}
const imageType = mime.split('/')[1];
// 画像でもPNGかJPEGでないならスキップ
if (imageType != 'png' && imageType != 'jpeg') {
return null;
}
log('calculate average color...');
const buffer = await prominence(gm(fs.createReadStream(path), name)
.setFormat('ppm')
.resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック
.toBuffer();
const r = buffer.readUInt8(buffer.length - 3);
const g = buffer.readUInt8(buffer.length - 2);
const b = buffer.readUInt8(buffer.length - 1);
log(`average color is calculated: ${r}, ${g}, ${b}`);
return [r, g, b];
})(),
// folder
(async () => {
if (!folderId) {
@ -188,6 +219,10 @@ const addFile = async (
properties['height'] = wh[1];
}
if (averageColor) {
properties['average_color'] = averageColor;
}
return addToGridFS(detectedName, readable, mime, {
user_id: user._id,
folder_id: folder !== null ? folder._id : null,

6
src/api/endpoints/drive/files/create.ts
View file

@ -38,9 +38,15 @@ module.exports = async (file, params, user): Promise<any> => {
const [folderId = null, folderIdErr] = $(params.folder_id).optional.nullable.id().$;
if (folderIdErr) throw 'invalid folder_id param';
try {
// Create file
const driveFile = await create(user, file.path, name, null, folderId);
// Serialize
return serialize(driveFile);
} catch (e) {
console.error(e);
throw e;
}
};

16
src/web/app/desktop/tags/drive/file.tag
View file

@ -5,7 +5,9 @@
<div class="label" if={ I.banner_id == file.id }><img src="/assets/label.svg"/>
<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
</div>
<div class="thumbnail"><img src={ file.url + '?thumbnail&size=128' } alt=""/></div>
<div class="thumbnail" ref="thumbnail" style="background-color:{ file.properties.average_color ? 'rgb(' + file.properties.average_color.join(',') + ')' : 'transparent' }">
<img src={ file.url + '?thumbnail&size=128' } alt="" onload={ onload }/>
</div>
<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
<style>
:scope
@ -139,6 +141,7 @@
</style>
<script>
import anime from 'animejs';
import bytesToSize from '../../../common/scripts/bytes-to-size';
this.mixin('i');
@ -199,5 +202,16 @@
this.isDragging = false;
this.browser.isDragSource = false;
};
this.onload = () => {
if (this.file.properties.average_color) {
anime({
targets: this.refs.thumbnail,
backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
duration: 100,
easing: 'linear'
});
}
};
</script>
</mk-drive-browser-file>

13
src/web/app/desktop/tags/images.tag
View file

@ -53,7 +53,13 @@
</mk-images>
<mk-images-image>
<a ref="view" href={ image.url } onmousemove={ mousemove } onmouseleave={ mouseleave } style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } onclick={ click } title={ image.name }></a>
<a ref="view"
href={ image.url }
onmousemove={ mousemove }
onmouseleave={ mouseleave }
style={ styles }
onclick={ click }
title={ image.name }></a>
<style>
:scope
display block
@ -74,6 +80,11 @@
</style>
<script>
this.image = this.opts.image;
this.styles = {
'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
'background-image': `url(${this.image.url}?thumbnail&size=512)`
};
console.log(this.styles);
this.mousemove = e => {
const rect = this.refs.view.getBoundingClientRect();

7
src/web/app/mobile/tags/drive/file-viewer.tag
View file

@ -1,6 +1,11 @@
<mk-drive-file-viewer>
<div class="preview">
<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name } onload={ onImageLoaded } ref="img">
<img if={ kind == 'image' } ref="img"
src={ file.url }
alt={ file.name }
title={ file.name }
onload={ onImageLoaded }
style="background-color:rgb({ file.properties.average_color.join(',') })">
<virtual if={ kind != 'image' }>%fa:file%</virtual>
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
<span class="size">

6
src/web/app/mobile/tags/drive/file.tag
View file

@ -1,7 +1,7 @@
<mk-drive-file data-is-selected={ isSelected }>
<a onclick={ onclick } href="/i/drive/file/{ file.id }">
<div class="container">
<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
<div class="thumbnail" style={ thumbnail }></div>
<div class="body">
<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
<!--
@ -132,6 +132,10 @@
this.browser = this.parent;
this.file = this.opts.file;
this.thumbnail = {
'background-color': this.file.properties.average_color ? `rgb(${this.file.properties.average_color.join(',')})` : 'transparent',
'background-image': `url(${this.file.url}?thumbnail&size=128)`
};
this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
this.browser.on('change-selection', selections => {

6
src/web/app/mobile/tags/images.tag
View file

@ -56,7 +56,7 @@
</mk-images>
<mk-images-image>
<a ref="view" href={ image.url } target="_blank" style={ 'background-image: url(' + image.url + '?thumbnail&size=512' } title={ image.name }></a>
<a ref="view" href={ image.url } target="_blank" style={ styles } title={ image.name }></a>
<style>
:scope
display block
@ -74,5 +74,9 @@
</style>
<script>
this.image = this.opts.image;
this.styles = {
'background-color': `rgb(${this.image.properties.average_color.join(',')})`,
'background-image': `url(${this.image.url}?thumbnail&size=512)`
};
</script>
</mk-images-image>

67
tools/migration/node.2017-12-11.js Normal file
View file

@ -0,0 +1,67 @@
// for Node.js interpret
const { default: DriveFile, getGridFSBucket } = require('../../built/api/models/drive-file')
const { default: zip } = require('@prezzemolo/zip')
const _gm = require('gm');
const gm = _gm.subClass({
imageMagick: true
});
const migrate = doc => new Promise(async (res, rej) => {
const bucket = await getGridFSBucket();
const readable = bucket.openDownloadStream(doc._id);
gm(readable)
.setFormat('ppm')
.resize(1, 1)
.toBuffer(async (err, buffer) => {
if (err) rej(err);
const r = buffer.readUInt8(buffer.length - 3);
const g = buffer.readUInt8(buffer.length - 2);
const b = buffer.readUInt8(buffer.length - 1);
const result = await DriveFile.update(doc._id, {
$set: {
'metadata.properties.average_color': [r, g, b]
}
})
res(result.ok === 1);
});
});
async function main() {
const query = {
contentType: {
$in: [
'image/png',
'image/jpeg'
]
}
}
const count = await DriveFile.count(query);
const dop = Number.parseInt(process.argv[2]) || 5
const idop = ((count - (count % dop)) / dop) + 1
return zip(
1,
async (time) => {
console.log(`${time} / ${idop}`)
const doc = await DriveFile.find(query, {
limit: dop, skip: time * dop
})
return Promise.all(doc.map(migrate))
},
idop
).then(a => {
const rv = []
a.forEach(e => rv.push(...e))
return rv
})
}
main().then(console.dir).catch(console.error)