Fix bug

Provide drive file thumbnails

.config/example.yml

@@ -50,7 +50,10 @@ remoteDriveCapacityMb: 8
 # If enabled:
 #  Server will not cache remote files (Using direct link instead).
 #  You can save your storage.
-#  Users cannot see remote images when they turn off "Show media from a remote server" setting.
+#
+#  NOTE:
+#  * Users cannot see remote images when they turn off "Show media from a remote server" setting.
+#  * Since thumbnails are not provided, traffic increases.
 preventCacheRemoteFiles: false
 
 drive:

CHANGELOG.md

@@ -5,6 +5,15 @@ ChangeLog
 
 This document describes breaking changes only.
 
+6.0.0
+-----
+
+### Migration
+
+オブジェクトストレージを使用している場合、設定ファイルの`drive.config.secure`を`drive.config.useSSL`にリネームしてください。
+
+If you use object storage, please rename `drive.config.secure` to `drive.config.useSSL` in config.
+
 5.0.0
 -----
 

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "5.25.0",
+	"version": "6.0.1",
-	"clientVersion": "1.0.8348",
+	"clientVersion": "1.0.8367",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -60,7 +60,7 @@
 		"@types/mocha": "5.2.3",
 		"@types/mongodb": "3.1.4",
 		"@types/ms": "0.7.30",
-		"@types/node": "10.7.0",
+		"@types/node": "10.7.1",
 		"@types/portscanner": "2.1.0",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "1.2.0",
@@ -77,7 +77,7 @@
 		"@types/systeminformation": "3.23.0",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.3",
-		"@types/webpack": "4.4.9",
+		"@types/webpack": "4.4.10",
 		"@types/webpack-stream": "3.2.10",
 		"@types/websocket": "0.0.39",
 		"@types/ws": "6.0.0",
@@ -149,7 +149,7 @@
 		"loader-utils": "1.1.0",
 		"lodash.assign": "4.2.0",
 		"mecab-async": "0.1.2",
-		"minio": "6.0.0",
+		"minio": "7.0.0",
 		"mkdirp": "0.5.1",
 		"mocha": "5.2.0",
 		"moji": "0.5.1",

src/client/app/common/scripts/get-kao.ts

@@ -1,6 +1,9 @@
-export default () => [
+const kaos = [
 	'(=^・・^=)',
 	'v(\'ω\')v',
 	'🐡( \'-\' 🐡 )ﾌｸﾞﾊﾟﾝﾁ!!!!',
-	'🖕(´･_･`)🖕'
+	'🖕(´･_･`)🖕',
-][Math.floor(Math.random() * 4)];
+	'(｡>﹏<｡)'
+];
+
+export default () => kaos[Math.floor(Math.random() * kaos.length)];

src/client/app/common/views/components/reactions-viewer.vue

@@ -1,16 +1,16 @@
 <template>
 <div class="mk-reactions-viewer">
 	<template v-if="reactions">
-		<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
+		<span :class="{notReacted}" @click="react('like')" v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
-		<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
+		<span :class="{notReacted}" @click="react('love')" v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
-		<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
+		<span :class="{notReacted}" @click="react('laugh')" v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
-		<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
+		<span :class="{notReacted}" @click="react('hmm')" v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
-		<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
+		<span :class="{notReacted}" @click="react('surprise')" v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
-		<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
+		<span :class="{notReacted}" @click="react('congrats')" v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
-		<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
+		<span :class="{notReacted}" @click="react('angry')" v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
-		<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
+		<span :class="{notReacted}" @click="react('confused')" v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
-		<span v-if="reactions.rip"><mk-reaction-icon reaction="rip"/><span>{{ reactions.rip }}</span></span>
+		<span :class="{notReacted}" @click="react('rip')" v-if="reactions.rip"><mk-reaction-icon reaction="rip"/><span>{{ reactions.rip }}</span></span>
-		<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
+		<span :class="{notReacted}" @click="react('pudding')" v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
 	</template>
 </div>
 </template>
@@ -22,6 +22,17 @@ export default Vue.extend({
 	computed: {
 		reactions(): number {
 			return this.note.reactionCounts;
+		},
+		notReacted(): boolean {
+			return this.note.myReaction == null;
+		}
+	},
+	methods: {
+		react(reaction: string) {
+			(this as any).api('notes/reactions/create', {
+				noteId: this.note.id,
+				reaction: reaction
+			});
 		}
 	}
 });
@@ -40,6 +51,9 @@ root(isDark)
 	> span
 		margin-right 8px
 
+		&.notReacted
+			cursor pointer
+
 		> .mk-reaction-icon
 			font-size 1.4em
 

src/client/app/common/views/components/url-preview.vue

@@ -160,12 +160,12 @@ export default Vue.extend({
 						'web.tv',
 						'youtube.com',
 						'youtu.be'
-					].some(x => x == url.hostname || url.hostname.endsWith(`.${x}`))))
+					].some(x => x == url.hostname || url.hostname.endsWith(`.${x}`)))
 						this.player = info.player;
-				}
+				}	// info.url
-			});
+			})	// json
-		}
+		});	// fetch
-	}
+	}	// created
 });
 </script>
 

src/client/app/desktop/views/components/drive.file.vue

@@ -16,7 +16,7 @@
 		<p>%i18n:@banner%</p>
 	</div>
 	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
-		<img :src="file.url" alt="" @load="onThumbnailLoaded"/>
+		<img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded"/>
 	</div>
 	<p class="name">
 		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>

src/client/app/desktop/views/components/media-image.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
 		style(): any {
 			return {
 				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url})`
+				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.thumbnailUrl})`
 			};
 		}
 	},

src/client/app/mobile/views/components/drive.file.vue

@@ -43,7 +43,7 @@ export default Vue.extend({
 		thumbnail(): any {
 			return {
 				'background-color': this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': `url(${this.file.url})`
+				'background-image': `url(${this.file.thumbnailUrl})`
 			};
 		}
 	},

src/client/app/mobile/views/components/media-image.vue

@@ -27,7 +27,7 @@ export default Vue.extend({
 	},
 	computed: {
 		style(): any {
-			let url = `url(${this.image.url})`;
+			let url = `url(${this.image.thumbnailUrl})`;
 
 			if (this.$store.state.device.loadRemoteMedia || this.$store.state.device.lightmode) {
 				url = null;

src/mfm/parse/elements/code.ts

@@ -19,6 +19,6 @@ export default function(text: string) {
 		type: 'code',
 		content: code,
 		code: match[1],
-		html: genHtml(match[1])
+		html: genHtml(match[1].trim())
 	} as TextElementCode;
 }

src/models/drive-file.ts

@@ -31,6 +31,7 @@ export type IMetadata = {
 	comment: string;
 	uri?: string;
 	url?: string;
+	thumbnailUrl?: string;
 	src?: string;
 	deletedAt?: Date;
 	withoutChunks?: boolean;
@@ -164,6 +165,7 @@ export const pack = (
 	_target = Object.assign(_target, _file.metadata);
 
 	_target.url = _file.metadata.url ? _file.metadata.url : `${config.drive_url}/${_target.id}/${encodeURIComponent(_target.name)}`;
+	_target.thumbnailUrl = _file.metadata.thumbnailUrl ? _file.metadata.thumbnailUrl : `${config.drive_url}/${_target.id}/${encodeURIComponent(_target.name)}?thumbnail`;
 	_target.isRemote = _file.metadata.isRemote;
 
 	if (_target.properties == null) _target.properties = {};

src/server/file/send-drive-file.ts

@@ -1,5 +1,3 @@
-import * as fs from 'fs';
-
 import * as Koa from 'koa';
 import * as send from 'koa-send';
 import * as mongodb from 'mongodb';
@@ -51,23 +49,16 @@ export default async function(ctx: Koa.Context) {
 	};
 
 	if ('thumbnail' in ctx.query) {
-		// 画像以外
+		const thumb = await DriveFileThumbnail.findOne({
-		if (!file.contentType.startsWith('image/')) {
+			'metadata.originalId': fileId
-			const readable = fs.createReadStream(`${__dirname}/assets/thumbnail-not-available.png`);
+		});
-			ctx.set('Content-Type', 'image/png');
+
-			ctx.body = readable;
+		if (thumb != null) {
-		} else if (file.contentType == 'image/gif') {
+			ctx.set('Content-Type', 'image/jpeg');
-			// GIF
+			const bucket = await getDriveFileThumbnailBucket();
-			await sendRaw();
+			ctx.body = bucket.openDownloadStream(thumb._id);
 		} else {
-			const thumb = await DriveFileThumbnail.findOne({ 'metadata.originalId': fileId });
+			await sendRaw();
-			if (thumb != null) {
-				ctx.set('Content-Type', 'image/jpeg');
-				const bucket = await getDriveFileThumbnailBucket();
-				ctx.body = bucket.openDownloadStream(thumb._id);
-			} else {
-				await sendRaw();
-			}
 		}
 	} else {
 		if ('download' in ctx.query) {

src/services/drive/add-file.ts

@@ -1,6 +1,5 @@
 import { Buffer } from 'buffer';
 import * as fs from 'fs';
-import * as stream from 'stream';
 
 import * as mongodb from 'mongodb';
 import * as crypto from 'crypto';
@@ -17,30 +16,52 @@ import { publishUserStream, publishDriveStream } from '../../stream';
 import { isLocalUser, IUser, IRemoteUser } from '../../models/user';
 import delFile from './delete-file';
 import config from '../../config';
+import { getDriveFileThumbnailBucket } from '../../models/drive-file-thumbnail';
 
 const log = debug('misskey:drive:add-file');
 
-async function save(readable: stream.Readable, name: string, type: string, hash: string, size: number, metadata: any): Promise<IDriveFile> {
+async function save(path: string, name: string, type: string, hash: string, size: number, metadata: any): Promise<IDriveFile> {
+	let thumbnail: Buffer;
+
+	if (['image/jpeg', 'image/png', 'image/webp'].includes(type)) {
+		thumbnail = await sharp(path)
+			.resize(300)
+			.jpeg({
+				quality: 50,
+				progressive: true
+			})
+			.toBuffer();
+	}
+
 	if (config.drive && config.drive.storage == 'minio') {
 		const minio = new Minio.Client(config.drive.config);
 		const id = uuid.v4();
 		const obj = `${config.drive.prefix}/${id}`;
+		const thumbnailObj = `${obj}-thumbnail`;
 
 		const baseUrl = config.drive.baseUrl
 			|| `${ config.drive.config.secure ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`;
 
-		await minio.putObject(config.drive.bucket, obj, readable, size, {
+		await minio.putObject(config.drive.bucket, obj, fs.createReadStream(path), size, {
 			'Content-Type': type,
 			'Cache-Control': 'max-age=31536000, immutable'
 		});
 
+		if (thumbnail) {
+			await minio.putObject(config.drive.bucket, thumbnailObj, thumbnail, size, {
+				'Content-Type': 'image/jpeg',
+				'Cache-Control': 'max-age=31536000, immutable'
+			});
+		}
+
 		Object.assign(metadata, {
 			withoutChunks: true,
 			storage: 'minio',
 			storageProps: {
 				id: id
 			},
-			url: `${ baseUrl }/${ obj }`
+			url: `${ baseUrl }/${ obj }`,
+			thumbnailUrl: thumbnail ? `${ baseUrl }/${ thumbnailObj }` : null
 		});
 
 		const file = await DriveFile.insert({
@@ -57,12 +78,36 @@ async function save(readable: stream.Readable, name: string, type: string, hash:
 		// Get MongoDB GridFS bucket
 		const bucket = await getDriveFileBucket();
 
-		return new Promise<IDriveFile>((resolve, reject) => {
+		const file = await new Promise<IDriveFile>((resolve, reject) => {
-			const writeStream = bucket.openUploadStream(name, { contentType: type, metadata });
+			const writeStream = bucket.openUploadStream(name, {
+				contentType: type,
+				metadata
+			});
+
 			writeStream.once('finish', resolve);
 			writeStream.on('error', reject);
-			readable.pipe(writeStream);
+
+			fs.createReadStream(path).pipe(writeStream);
 		});
+
+		if (thumbnail) {
+			const thumbnailBucket = await getDriveFileThumbnailBucket();
+
+			await new Promise<IDriveFile>((resolve, reject) => {
+				const writeStream = thumbnailBucket.openUploadStream(name, {
+					contentType: 'image/jpeg',
+					metadata: {
+						originalId: file._id
+					}
+				});
+
+				writeStream.once('finish', resolve);
+				writeStream.on('error', reject);
+				writeStream.end(thumbnail);
+			});
+		}
+
+		return file;
 	}
 }
 
@@ -321,7 +366,7 @@ export default async function(
 			}
 		}
 	} else {
-		driveFile = await (save(fs.createReadStream(path), detectedName, mime, hash, size, metadata));
+		driveFile = await (save(path, detectedName, mime, hash, size, metadata));
 	}
 
 	log(`drive file has been created ${driveFile._id}`);

src/services/drive/delete-file.ts

@@ -6,8 +6,14 @@ import config from '../../config';
 export default async function(file: IDriveFile, isExpired = false) {
 	if (file.metadata.storage == 'minio') {
 		const minio = new Minio.Client(config.drive.config);
+
 		const obj = `${config.drive.prefix}/${file.metadata.storageProps.id}`;
 		await minio.removeObject(config.drive.bucket, obj);
+
+		if (file.metadata.thumbnailUrl) {
+			const thumbnailObj = `${config.drive.prefix}/${file.metadata.storageProps.id}-thumbnail`;
+			await minio.removeObject(config.drive.bucket, thumbnailObj);
+		}
 	}
 
 	// チャンクをすべて削除