Merge branch 'develop'

.node-version

@@ -1 +1 @@
-v14.15.4
+v14.15.5

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.15.4-alpine AS base
+FROM node:14.15.5-alpine3.13 AS base
 
 ENV NODE_ENV=production
 
@@ -10,16 +10,17 @@ RUN apk add --no-cache \
     autoconf \
     automake \
     file \
-		git \
     g++ \
     gcc \
     libc-dev \
     libtool \
     make \
     nasm \
     pkgconfig \
-    python \
-    zlib-dev
+    python3 \
+    zlib-dev \
+    vips-dev \
+    vips
 
 COPY package.json yarn.lock ./
 RUN yarn install
@@ -30,8 +31,9 @@ FROM base AS runner
 
 RUN apk add --no-cache \
     ffmpeg \
-    tini
-RUN npm i -g web-push
+    tini \
+    vips
+
 ENTRYPOINT ["/sbin/tini", "--"]
 
 COPY --from=builder /misskey/node_modules ./node_modules

gulpfile.ts

@@ -6,7 +6,6 @@ import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as ts from 'gulp-typescript';
 import * as rimraf from 'rimraf';
-import * as rename from 'gulp-rename';
 import * as replace from 'gulp-replace';
 const terser = require('gulp-terser');
 const cssnano = require('gulp-cssnano');
@@ -29,16 +28,16 @@ gulp.task('build:copy:views', () =>
 );
 
 gulp.task('build:copy:fonts', () =>
-	gulp.src('./node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/client/assets/fonts/'))
+	gulp.src('./node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/assets/fonts/'))
 );
 
 gulp.task('build:copy:locales', cb => {
-	fs.mkdirSync('./built/client/assets/locales', { recursive: true });
+	fs.mkdirSync('./built/assets/locales', { recursive: true });
 
 	const v = { '_version_': meta.version };
 
 	for (const [lang, locale] of Object.entries(locales)) {
-		fs.writeFileSync(`./built/client/assets/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
+		fs.writeFileSync(`./built/assets/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
 	}
 
 	cb();
@@ -56,7 +55,9 @@ gulp.task('build:client:script', () => {
 
 gulp.task('build:client:style', () => {
 	return gulp.src(['./src/server/web/style.css', './src/server/web/bios.css', './src/server/web/cli.css'])
-		.pipe(cssnano())
+		.pipe(cssnano({
+			zindex: false
+		}))
 		.pipe(gulp.dest('./built/server/web/'));
 });
 
@@ -77,33 +78,17 @@ gulp.task('cleanall', gulp.parallel('clean', cb =>
 	rimraf('./node_modules', cb)
 ));
 
-gulp.task('copy:client', () =>
-		gulp.src([
-			'./assets/**/*',
-			'./src/client/assets/**/*',
-		])
-			.pipe(rename(path => {
-				path.dirname = path.dirname!.replace('assets', '.');
-			}))
-			.pipe(gulp.dest('./built/client/assets/'))
-);
-
 gulp.task('copy:docs', () =>
 		gulp.src([
 			'./src/docs/**/*',
 		])
-		.pipe(gulp.dest('./built/client/assets/docs/'))
+		.pipe(gulp.dest('./built/assets/docs/'))
 );
 
-gulp.task('build:client', gulp.parallel(
-	'copy:client',
-	'copy:docs'
-));
-
 gulp.task('build', gulp.parallel(
 	'build:ts',
 	'build:copy',
-	'build:client',
+	'copy:docs',
 ));
 
 gulp.task('default', gulp.task('build'));

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <[email protected]>",
-	"version": "12.73.0",
+	"version": "12.74.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -35,7 +35,7 @@
 		"lodash": "^4.17.20"
 	},
 	"dependencies": {
-		"@babel/plugin-transform-runtime": "7.13.6",
+		"@babel/plugin-transform-runtime": "7.13.9",
 		"@elastic/elasticsearch": "7.11.0",
 		"@fortawesome/fontawesome-svg-core": "1.2.34",
 		"@fortawesome/free-brands-svg-icons": "5.15.2",
@@ -62,7 +62,7 @@
 		"@types/is-url": "1.2.28",
 		"@types/js-yaml": "4.0.0",
 		"@types/jsdom": "16.2.6",
-		"@types/jsonld": "1.5.3",
+		"@types/jsonld": "1.5.4",
 		"@types/katex": "0.11.0",
 		"@types/koa": "2.13.0",
 		"@types/koa-bodyparser": "4.3.0",
@@ -107,7 +107,7 @@
 		"@types/webpack-stream": "3.2.11",
 		"@types/websocket": "1.0.1",
 		"@types/ws": "7.4.0",
-		"@typescript-eslint/parser": "4.14.2",
+		"@typescript-eslint/parser": "4.16.1",
 		"@vue/compiler-sfc": "3.0.5",
 		"abort-controller": "3.0.0",
 		"apexcharts": "3.25.0",
@@ -134,7 +134,7 @@
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.20.0",
+		"eslint": "7.21.0",
 		"eslint-plugin-vue": "7.6.0",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.2",
@@ -194,7 +194,7 @@
 		"parsimmon": "1.16.0",
 		"pg": "8.5.1",
 		"portscanner": "2.2.0",
-		"postcss": "8.2.6",
+		"postcss": "8.2.7",
 		"postcss-loader": "5.0.0",
 		"prismjs": "1.23.0",
 		"probe-image-size": "6.0.0",
@@ -227,7 +227,7 @@
 		"style-loader": "2.0.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.34.6",
+		"systeminformation": "5.6.1",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
@@ -251,7 +251,7 @@
 		"vue-loader": "16.1.2",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vue-router": "4.0.4",
-		"vue-style-loader": "4.1.2",
+		"vue-style-loader": "4.1.3",
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.4",
 		"webpack": "5.24.2",

src/client/assets/manifest.json

@@ -7,12 +7,12 @@
 	"theme_color": "#86b300",
 	"icons": [
 		{
-			"src": "/assets/icons/192.png",
+			"src": "/static-assets/icons/192.png",
 			"sizes": "192x192",
 			"type": "image/png"
 		},
 		{
-			"src": "/assets/icons/512.png",
+			"src": "/static-assets/icons/512.png",
 			"sizes": "512x512",
 			"type": "image/png"
 		}

src/client/components/emoji-picker-dialog.vue

@@ -1,6 +1,6 @@
 <template>
-<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" v-slot="{ showing }">
-	<MkEmojiPicker v-show="showing !== false" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
+	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
 </MkModal>
 </template>
 

src/client/components/emoji-picker.vue

@@ -279,6 +279,7 @@ export default defineComponent({
 
 		reset() {
 			this.$refs.emojis.scrollTop = 0;
+			this.q = '';
 		},
 
 		getKey(emoji: any) {

src/client/components/media-video.vue

@@ -6,22 +6,24 @@
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
-	<a
-		:href="video.url"
-		rel="nofollow noopener"
-		target="_blank"
-		:style="imageStyle"
+	<video
+		:poster="video.thumbnailUrl"
 		:title="video.name"
+		crossorigin="anonymous"
+		preload="none"
+		controls
 	>
-		<Fa :icon="faPlayCircle"/>
-	</a>
+		<source 
+			:src="video.url" 
+			:type="video.type"
+		>
+	</video>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@/os';
 
@@ -35,18 +37,10 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faPlayCircle,
 			faExclamationTriangle,
 			faEyeSlash
 		};
 	},
-	computed: {
-		imageStyle(): any {
-			return {
-				'background-image': `url(${this.video.thumbnailUrl})`
-			};
-		}
-	},
 	created() {
 		this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
 	},
@@ -72,7 +66,7 @@ export default defineComponent({
 		right: 12px;
 	}
 
-	> a {
+	> video {
 		display: flex;
 		justify-content: center;
 		align-items: center;

src/client/components/note-detailed.vue

@@ -140,6 +140,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import { noteActions, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
 
 function markRawAll(...xs) {
 	for (const x of xs) {
@@ -523,7 +524,7 @@ export default defineComponent({
 		react(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.pickReaction(this.$refs.reactButton, reaction => {
+			reactionPicker.show(this.$refs.reactButton, reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction

src/client/components/note.vue

@@ -122,6 +122,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import { noteActions, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
 
 function markRawAll(...xs) {
 	for (const x of xs) {
@@ -498,7 +499,7 @@ export default defineComponent({
 		react(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.pickReaction(this.$refs.reactButton, reaction => {
+			reactionPicker.show(this.$refs.reactButton, reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction