From d8dcc4da275230e332fad0eb6ce09703d08aec30 Mon Sep 17 00:00:00 2001 From: Aya Morisawa <AyaMorisawa4869@gmail.com> Date: Sat, 1 Sep 2018 23:12:51 +0900 Subject: [PATCH 01/11] Use string interpolation --- src/client/app/auth/views/index.vue | 2 +- src/client/app/boot.js | 2 +- src/client/app/common/scripts/streaming/stream.ts | 4 ++-- src/client/app/common/views/components/autocomplete.vue | 4 ++-- .../views/components/connect-failed.troubleshooter.vue | 2 +- src/client/app/common/views/components/url-preview.vue | 2 +- src/client/app/common/views/directives/autocomplete.ts | 4 ++-- src/client/app/common/views/filters/note.ts | 2 +- src/client/app/common/views/filters/user.ts | 2 +- src/client/app/common/views/pages/follow.vue | 2 +- src/client/app/desktop/views/components/drive.folder.vue | 2 +- src/client/app/desktop/views/components/drive.vue | 4 ++-- src/client/app/desktop/views/components/media-image.vue | 2 +- src/client/app/desktop/views/components/post-form.vue | 6 +++--- src/client/app/desktop/views/pages/drive.vue | 2 +- src/client/app/desktop/views/pages/games/reversi.vue | 4 ++-- src/client/app/desktop/views/pages/messaging-room.vue | 2 +- src/client/app/mobile/views/components/post-form.vue | 6 +++--- src/client/app/mobile/views/components/ui.nav.vue | 2 +- src/client/app/mobile/views/pages/drive.vue | 4 ++-- src/client/app/mobile/views/pages/followers.vue | 2 +- src/client/app/mobile/views/pages/following.vue | 2 +- src/client/app/mobile/views/pages/games/reversi.vue | 4 ++-- src/client/app/mobile/views/pages/settings.vue | 2 +- src/client/app/mobile/views/pages/user-lists.vue | 2 +- src/client/app/mobile/views/pages/user.vue | 2 +- src/daemons/notes-stats.ts | 2 +- src/daemons/server-stats.ts | 2 +- src/mfm/html-to-mfm.ts | 2 +- src/mfm/html.ts | 4 ++-- src/misc/fa.ts | 2 +- src/remote/activitypub/renderer/hashtag.ts | 2 +- src/server/activitypub.ts | 2 +- src/server/api/endpoints.ts | 2 +- src/server/api/stream/notes-stats.ts | 2 +- src/server/api/stream/server-stats.ts | 2 +- src/server/web/docs.ts | 2 +- src/server/web/views/user.pug | 2 +- src/services/drive/add-file.ts | 2 +- webpack.config.ts | 4 ++-- 40 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue index 609e758994..ba7df911e5 100644 --- a/src/client/app/auth/views/index.vue +++ b/src/client/app/auth/views/index.vue @@ -80,7 +80,7 @@ export default Vue.extend({ accepted() { this.state = 'accepted'; if (this.session.app.callbackUrl) { - location.href = this.session.app.callbackUrl + '?token=' + this.session.token; + location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`; } } } diff --git a/src/client/app/boot.js b/src/client/app/boot.js index 54397c98c6..dd2cf93a89 100644 --- a/src/client/app/boot.js +++ b/src/client/app/boot.js @@ -94,7 +94,7 @@ // Get salt query const salt = localStorage.getItem('salt') - ? '?salt=' + localStorage.getItem('salt') + ? `?salt=${localStorage.getItem('salt')}` : ''; // Load an app script diff --git a/src/client/app/common/scripts/streaming/stream.ts b/src/client/app/common/scripts/streaming/stream.ts index fefa8e5ced..4ab78f1190 100644 --- a/src/client/app/common/scripts/streaming/stream.ts +++ b/src/client/app/common/scripts/streaming/stream.ts @@ -44,11 +44,11 @@ export default class Connection extends EventEmitter { const query = params ? Object.keys(params) - .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) + .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`) .join('&') : null; - this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? '?' + query : ''}`); + this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? `?${query}` : ''}`); this.socket.addEventListener('open', this.onOpen); this.socket.addEventListener('close', this.onClose); this.socket.addEventListener('message', this.onMessage); diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue index b274eaa0a0..ea05afd6dc 100644 --- a/src/client/app/common/views/components/autocomplete.vue +++ b/src/client/app/common/views/components/autocomplete.vue @@ -125,7 +125,7 @@ export default Vue.extend({ } if (this.type == 'user') { - const cacheKey = 'autocomplete:user:' + this.q; + const cacheKey = `autocomplete:user:${this.q}`; const cache = sessionStorage.getItem(cacheKey); if (cache) { const users = JSON.parse(cache); @@ -148,7 +148,7 @@ export default Vue.extend({ this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]'); this.fetching = false; } else { - const cacheKey = 'autocomplete:hashtag:' + this.q; + const cacheKey = `autocomplete:hashtag:${this.q}`; const cache = sessionStorage.getItem(cacheKey); if (cache) { const hashtags = JSON.parse(cache); diff --git a/src/client/app/common/views/components/connect-failed.troubleshooter.vue b/src/client/app/common/views/components/connect-failed.troubleshooter.vue index 6c23cc7969..f64cae6b4b 100644 --- a/src/client/app/common/views/components/connect-failed.troubleshooter.vue +++ b/src/client/app/common/views/components/connect-failed.troubleshooter.vue @@ -57,7 +57,7 @@ export default Vue.extend({ } // Check internet connection - fetch('https://google.com?rand=' + Math.random(), { + fetch(`https://google.com?rand=${Math.random()}`, { mode: 'no-cors' }).then(() => { this.internet = true; diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index d5dda0c80a..e182e7f8cb 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -170,7 +170,7 @@ export default Vue.extend({ return; } - fetch('/url?url=' + encodeURIComponent(this.url)).then(res => { + fetch(`/url?url=${encodeURIComponent(this.url)}`).then(res => { res.json().then(info => { if (info.url == null) return; this.title = info.title; diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts index b252cf5c1f..26bc13871d 100644 --- a/src/client/app/common/views/directives/autocomplete.ts +++ b/src/client/app/common/views/directives/autocomplete.ts @@ -191,7 +191,7 @@ class Autocomplete { const acct = renderAcct(value); // 挿入 - this.text = trimmedBefore + '@' + acct + ' ' + after; + this.text = `${trimmedBefore}@${acct} ${after}`; // キャレットを戻す this.vm.$nextTick(() => { @@ -207,7 +207,7 @@ class Autocomplete { const after = source.substr(caret); // 挿入 - this.text = trimmedBefore + '#' + value + ' ' + after; + this.text = `${trimmedBefore}#${value} ${after}`; // キャレットを戻す this.vm.$nextTick(() => { diff --git a/src/client/app/common/views/filters/note.ts b/src/client/app/common/views/filters/note.ts index a611dc8685..3c9c8b7485 100644 --- a/src/client/app/common/views/filters/note.ts +++ b/src/client/app/common/views/filters/note.ts @@ -1,5 +1,5 @@ import Vue from 'vue'; Vue.filter('notePage', note => { - return '/notes/' + note.id; + return `/notes/${note.id}`; }); diff --git a/src/client/app/common/views/filters/user.ts b/src/client/app/common/views/filters/user.ts index ca0910fc53..e5220229b7 100644 --- a/src/client/app/common/views/filters/user.ts +++ b/src/client/app/common/views/filters/user.ts @@ -11,5 +11,5 @@ Vue.filter('userName', user => { }); Vue.filter('userPage', (user, path?) => { - return '/@' + Vue.filter('acct')(user) + (path ? '/' + path : ''); + return `/@${Vue.filter('acct')(user)}${(path ? `/${path}` : '')}`; }); diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue index 13d855d20a..ec74b3a9b9 100644 --- a/src/client/app/common/views/pages/follow.vue +++ b/src/client/app/common/views/pages/follow.vue @@ -1,6 +1,6 @@ <template> <div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> - <div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + myName + '</b>')"></div> + <div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div> <main> <div class="banner" :style="bannerStyle"></div> diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue index 83880fef5c..e6b71f9426 100644 --- a/src/client/app/desktop/views/components/drive.folder.vue +++ b/src/client/app/desktop/views/components/drive.folder.vue @@ -163,7 +163,7 @@ export default Vue.extend({ }); break; default: - alert('%i18n:@unhandled-error% ' + err); + alert(`%i18n:@unhandled-error% ${err}`); } }); } diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue index d919e4a5ea..cb289027d4 100644 --- a/src/client/app/desktop/views/components/drive.vue +++ b/src/client/app/desktop/views/components/drive.vue @@ -323,7 +323,7 @@ export default Vue.extend({ }); break; default: - alert('%i18n:@unhandled-error% ' + err); + alert(`%i18n:@unhandled-error% ${err}`); } }); } @@ -404,7 +404,7 @@ export default Vue.extend({ folder: folder }); } else { - window.open(url + '/i/drive/folder/' + folder.id, + window.open(`${url}/i/drive/folder/${folder.id}`, 'drive_window', 'height=500, width=800'); } diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue index 8b68f260fa..52d029a269 100644 --- a/src/client/app/desktop/views/components/media-image.vue +++ b/src/client/app/desktop/views/components/media-image.vue @@ -48,7 +48,7 @@ export default Vue.extend({ const mouseY = e.clientY - rect.top; const xp = mouseX / this.$el.offsetWidth * 100; const yp = mouseY / this.$el.offsetHeight * 100; - this.$el.style.backgroundPosition = xp + '% ' + yp + '%'; + this.$el.style.backgroundPosition = `${xp}% ${yp}%'; this.$el.style.backgroundImage = `url("${this.image.url}")`; }, diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index bacaea65ee..eb8b40062a 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -110,9 +110,9 @@ export default Vue.extend({ computed: { draftId(): string { return this.renote - ? 'renote:' + this.renote.id + ? `renote:${this.renote.id}` : this.reply - ? 'reply:' + this.reply.id + ? `reply:${this.reply.id}` : 'note'; }, @@ -313,7 +313,7 @@ export default Vue.extend({ this.geo = pos.coords; this.$emit('geo-attached', this.geo); }, err => { - alert('%i18n:@error%: ' + err.message); + alert(`%i18n:@error%: ${err.message}`); }, { enableHighAccuracy: true }); diff --git a/src/client/app/desktop/views/pages/drive.vue b/src/client/app/desktop/views/pages/drive.vue index 217dcb7751..dec6c4551a 100644 --- a/src/client/app/desktop/views/pages/drive.vue +++ b/src/client/app/desktop/views/pages/drive.vue @@ -31,7 +31,7 @@ export default Vue.extend({ const title = folder.name + ' | %i18n:@title%'; // Rewrite URL - history.pushState(null, title, '/i/drive/folder/' + folder.id); + history.pushState(null, title, `/i/drive/folder/${folder.id}`); document.title = title; } diff --git a/src/client/app/desktop/views/pages/games/reversi.vue b/src/client/app/desktop/views/pages/games/reversi.vue index ce9b42c65f..1b0e790a22 100644 --- a/src/client/app/desktop/views/pages/games/reversi.vue +++ b/src/client/app/desktop/views/pages/games/reversi.vue @@ -16,10 +16,10 @@ export default Vue.extend({ methods: { nav(game, actualNav) { if (actualNav) { - this.$router.push('/reversi/' + game.id); + this.$router.push(`/reversi/${game.id}`); } else { // TODO: https://github.com/vuejs/vue-router/issues/703 - this.$router.push('/reversi/' + game.id); + this.$router.push(`/reversi/${game.id}`); } } } diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue index 1ebd53cef4..4be33dda04 100644 --- a/src/client/app/desktop/views/pages/messaging-room.vue +++ b/src/client/app/desktop/views/pages/messaging-room.vue @@ -46,7 +46,7 @@ export default Vue.extend({ this.user = user; this.fetching = false; - document.title = 'メッセージ: ' + getUserName(this.user); + document.title = `メッセージ: ${getUserName(this.user)}`; Progress.done(); }); diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index b076cae26d..8b1f7b08c8 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -105,9 +105,9 @@ export default Vue.extend({ computed: { draftId(): string { return this.renote - ? 'renote:' + this.renote.id + ? `renote:${this.renote.id}` : this.reply - ? 'reply:' + this.reply.id + ? `reply:${this.reply.id}` : 'note'; }, @@ -229,7 +229,7 @@ export default Vue.extend({ navigator.geolocation.getCurrentPosition(pos => { this.geo = pos.coords; }, err => { - alert('%i18n:@error%: ' + err.message); + alert(`%i18n:@error%: ${err.message}`); }, { enableHighAccuracy: true }); diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 39ea513b76..54eed1b6d4 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -82,7 +82,7 @@ export default Vue.extend({ search() { const query = window.prompt('%i18n:@search%'); if (query == null || query == '') return; - this.$router.push('/search?q=' + encodeURIComponent(query)); + this.$router.push(`/search?q=${encodeURIComponent(query)}`); }, onReversiInvited() { this.hasGameInvitation = true; diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue index 657f43c7c3..27ac956043 100644 --- a/src/client/app/mobile/views/pages/drive.vue +++ b/src/client/app/mobile/views/pages/drive.vue @@ -80,7 +80,7 @@ export default Vue.extend({ if (!silent) { // Rewrite URL - history.pushState(null, title, '/i/drive/folder/' + folder.id); + history.pushState(null, title, `/i/drive/folder/${folder.id}`); } document.title = title; @@ -93,7 +93,7 @@ export default Vue.extend({ if (!silent) { // Rewrite URL - history.pushState(null, title, '/i/drive/file/' + file.id); + history.pushState(null, title, `/i/drive/file/${file.id}`); } document.title = title; diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue index 421c150856..601f6670c1 100644 --- a/src/client/app/mobile/views/pages/followers.vue +++ b/src/client/app/mobile/views/pages/followers.vue @@ -49,7 +49,7 @@ export default Vue.extend({ this.user = user; this.fetching = false; - document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName; + document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`; }); }, onLoaded() { diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue index ff201ff2bd..0efac6110e 100644 --- a/src/client/app/mobile/views/pages/following.vue +++ b/src/client/app/mobile/views/pages/following.vue @@ -48,7 +48,7 @@ export default Vue.extend({ this.user = user; this.fetching = false; - document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName; + document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`; }); }, onLoaded() { diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue index d6849a1c11..bdadc88a43 100644 --- a/src/client/app/mobile/views/pages/games/reversi.vue +++ b/src/client/app/mobile/views/pages/games/reversi.vue @@ -16,10 +16,10 @@ export default Vue.extend({ methods: { nav(game, actualNav) { if (actualNav) { - this.$router.push('/reversi/' + game.id); + this.$router.push(`/reversi/${game.id}`); } else { // TODO: https://github.com/vuejs/vue-router/issues/703 - this.$router.push('/reversi/' + game.id); + this.$router.push(`/reversi/${game.id}`); } } } diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 7437eb8b47..838ffd2a6b 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -2,7 +2,7 @@ <mk-ui> <span slot="header">%fa:cog%%i18n:@settings%</span> <main :data-darkmode="$store.state.device.darkmode"> - <div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div> + <div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div> <div> <x-profile/> diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue index abd04c1496..5ee0636dea 100644 --- a/src/client/app/mobile/views/pages/user-lists.vue +++ b/src/client/app/mobile/views/pages/user-lists.vue @@ -43,7 +43,7 @@ export default Vue.extend({ title }); - this.$router.push('/i/lists/' + list.id); + this.$router.push(`/i/lists/${list.id}`); }); } } diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 8918847a8f..ddea43c9f2 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -107,7 +107,7 @@ export default Vue.extend({ this.fetching = false; Progress.done(); - document.title = Vue.filter('userName')(this.user) + ' | ' + (this as any).os.instanceName; + document.title = `${Vue.filter('userName')(this.user)} | ${(this as any).os.instanceName}`; }); } } diff --git a/src/daemons/notes-stats.ts b/src/daemons/notes-stats.ts index 3d2c4820a6..bddb54cfa5 100644 --- a/src/daemons/notes-stats.ts +++ b/src/daemons/notes-stats.ts @@ -16,7 +16,7 @@ export default function() { }); ev.on('requestNotesStatsLog', id => { - ev.emit('notesStatsLog:' + id, log.toArray()); + ev.emit(`notesStatsLog:${id}`, log.toArray()); }); process.on('exit', code => { diff --git a/src/daemons/server-stats.ts b/src/daemons/server-stats.ts index 4a653f81f4..9bb43fe84e 100644 --- a/src/daemons/server-stats.ts +++ b/src/daemons/server-stats.ts @@ -16,7 +16,7 @@ export default function() { const log = new Deque<any>(); ev.on('requestServerStatsLog', x => { - ev.emit('serverStatsLog:' + x.id, log.toArray().slice(0, x.length || 50)); + ev.emit(`serverStatsLog:${x.id}`, log.toArray().slice(0, x.length || 50)); }); async function tick() { diff --git a/src/mfm/html-to-mfm.ts b/src/mfm/html-to-mfm.ts index e2681f5447..b476a9af5c 100644 --- a/src/mfm/html-to-mfm.ts +++ b/src/mfm/html-to-mfm.ts @@ -45,7 +45,7 @@ export default function(html: string): string { if (part.length == 2) { //#region ホスト名部分が省略されているので復元する - const acct = txt + '@' + (new URL(href.value)).hostname; + const acct = `${txt}@${(new URL(href.value)).hostname}`; text += acct; break; //#endregion diff --git a/src/mfm/html.ts b/src/mfm/html.ts index c798ee410a..2e38fe10a0 100644 --- a/src/mfm/html.ts +++ b/src/mfm/html.ts @@ -44,8 +44,8 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers: hashtag({ document }, { hashtag }) { const a = document.createElement('a'); - a.href = config.url + '/tags/' + hashtag; - a.textContent = '#' + hashtag; + a.href = `${config.url}/tags/${hashtag}`; + a.textContent = `#${hashtag}`; a.setAttribute('rel', 'tag'); document.body.appendChild(a); }, diff --git a/src/misc/fa.ts b/src/misc/fa.ts index 8be06362c3..90cdac89b2 100644 --- a/src/misc/fa.ts +++ b/src/misc/fa.ts @@ -26,7 +26,7 @@ export const replacement = (match: string, key: string) => { arg == 'B' ? 'fab' : ''; } else if (arg.startsWith('.')) { - classes.push('fa-' + arg.substr(1)); + classes.push(`fa-${arg.substr(1)}`); } else if (arg.startsWith('-')) { transform = arg.substr(1).split('|').join(' '); } else { diff --git a/src/remote/activitypub/renderer/hashtag.ts b/src/remote/activitypub/renderer/hashtag.ts index a37ba63532..36563c2df5 100644 --- a/src/remote/activitypub/renderer/hashtag.ts +++ b/src/remote/activitypub/renderer/hashtag.ts @@ -3,5 +3,5 @@ import config from '../../../config'; export default (tag: string) => ({ type: 'Hashtag', href: `${config.url}/tags/${encodeURIComponent(tag)}`, - name: '#' + tag + name: `#${tag}` }); diff --git a/src/server/activitypub.ts b/src/server/activitypub.ts index 1007790ca6..f04f9e91e9 100644 --- a/src/server/activitypub.ts +++ b/src/server/activitypub.ts @@ -22,7 +22,7 @@ const router = new Router(); function inbox(ctx: Router.IRouterContext) { let signature; - ctx.req.headers.authorization = 'Signature ' + ctx.req.headers.signature; + ctx.req.headers.authorization = `Signature ${ctx.req.headers.signature}`; try { signature = httpSignature.parseRequest(ctx.req, { 'headers': [] }); diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts index d4a44070e6..2b00094269 100644 --- a/src/server/api/endpoints.ts +++ b/src/server/api/endpoints.ts @@ -79,7 +79,7 @@ const files = glob.sync('**/*.js', { }); const endpoints: IEndpoint[] = files.map(f => { - const ep = require('./endpoints/' + f); + const ep = require(`./endpoints/${f}`); return { name: f.replace('.js', ''), diff --git a/src/server/api/stream/notes-stats.ts b/src/server/api/stream/notes-stats.ts index ab00620018..ba99403226 100644 --- a/src/server/api/stream/notes-stats.ts +++ b/src/server/api/stream/notes-stats.ts @@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec switch (msg.type) { case 'requestLog': - ev.once('notesStatsLog:' + msg.id, statsLog => { + ev.once(`notesStatsLog:${msg.id}`, statsLog => { connection.send(JSON.stringify({ type: 'statsLog', body: statsLog diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts index f6c1f14ebe..d4fbeefa04 100644 --- a/src/server/api/stream/server-stats.ts +++ b/src/server/api/stream/server-stats.ts @@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec switch (msg.type) { case 'requestLog': - ev.once('serverStatsLog:' + msg.id, statsLog => { + ev.once(`serverStatsLog:${msg.id}`, statsLog => { connection.send(JSON.stringify({ type: 'statsLog', body: statsLog diff --git a/src/server/web/docs.ts b/src/server/web/docs.ts index 81e5ace3e8..14ccbdd04f 100644 --- a/src/server/web/docs.ts +++ b/src/server/web/docs.ts @@ -196,7 +196,7 @@ router.get('/*/api/entities/*', async ctx => { const lang = ctx.params[0]; const entity = ctx.params[1]; - const x = yaml.safeLoad(fs.readFileSync(path.resolve(__dirname + '/../../../src/docs/api/entities/' + entity + '.yaml'), 'utf-8')) as any; + const x = yaml.safeLoad(fs.readFileSync(path.resolve(`${__dirname}/../../../src/docs/api/entities/${entity}.yaml`), 'utf-8')) as any; await ctx.render('../../../../src/docs/api/entities/view', Object.assign(await genVars(lang), { id: `api/entities/${entity}`, diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug index b5ea2f6eb4..98a53ab549 100644 --- a/src/server/web/views/user.pug +++ b/src/server/web/views/user.pug @@ -2,7 +2,7 @@ extends ../../../../src/client/app/base block vars - const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`; - - const url = config.url + '/@' + (user.host ? `${user.username}@${user.host}` : user.username); + - const url = `${config.url}/@${(user.host ? `${user.username}@${user.host}` : user.username)}`; - const img = user.avatarId ? `${config.drive_url}/${user.avatarId}` : null; block title diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts index 1da0f49a24..d1c7051ab0 100644 --- a/src/services/drive/add-file.ts +++ b/src/services/drive/add-file.ts @@ -40,7 +40,7 @@ async function save(path: string, name: string, type: string, hash: string, size const thumbnailKey = `${config.drive.prefix}/${uuid.v4()}/${name}.thumbnail.jpg`; const baseUrl = config.drive.baseUrl - || `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`; + || `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? `:${config.drive.config.port}` : '' }/${ config.drive.bucket }`; await minio.putObject(config.drive.bucket, key, fs.createReadStream(path), size, { 'Content-Type': type, diff --git a/webpack.config.ts b/webpack.config.ts index ad67530f51..341d4c7022 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -20,7 +20,7 @@ const constants = require('./src/const.json'); const locales = require('./locales'); const meta = require('./package.json'); -const version = meta.clientVersion + '-' + rndstr({ length: 8, chars: '0-9a-z' }); +const version = `${meta.clientVersion}-${rndstr({ length: 8, chars: '0-9a-z' })}`; const codename = meta.codename; declare var global: { @@ -42,7 +42,7 @@ global['collapseSpacesReplacement'] = (html: string) => { }; global['base64replacement'] = (_: any, key: string) => { - return fs.readFileSync(__dirname + '/src/client/' + key, 'base64'); + return fs.readFileSync(`${__dirname}/src/client/${key}`, 'base64'); }; global['i18nReplacement'] = i18nReplacement; From 2555e23b107bb2c38e068e5f2f9da568a2adb375 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Tue, 4 Sep 2018 20:01:15 +0900 Subject: [PATCH 02/11] wip --- .../common/views/components/media-list.vue | 1 + .../desktop/views/components/media-audio.vue | 68 +++++++++++++++++++ 2 files changed, 69 insertions(+) create mode 100644 src/client/app/desktop/views/components/media-audio.vue diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index cdfc2c8d3c..c531f9ac91 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -3,6 +3,7 @@ <div :data-count="mediaList.length" ref="grid"> <template v-for="media in mediaList"> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/> + <mk-media-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/> <mk-media-image :image="media" :key="media.id" v-else :raw="raw"/> </template> </div> diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue new file mode 100644 index 0000000000..4a0c26fb9e --- /dev/null +++ b/src/client/app/desktop/views/components/media-audio.vue @@ -0,0 +1,68 @@ +<template> +<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false"> + <div> + <b>%fa:exclamation-triangle% %i18n:@sensitive%</b> + <span>%i18n:@click-to-show%</span> + </div> +</div> +<div class="komeijiokayusabanomisoniohitashi" v-else> + <audio class="audio" + :src="audio.url" + :title="audio.name" + controls + ref="audio" + v-if="inlinePlayable" /> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + audio: { + type: Object, + required: true + }, + inlinePlayable: { + default: false + }, + hide: { + type: Boolean, + default: true + } + }, + computed: { + imageStyle(): any { + return { + 'background-image': `url(${this.audio.url})` + }; + } + } +}) +</script> + +<style lang="stylus" scoped> +.komeijiokayusabanomisoniohitashi + .audio + display block + width 100% + height 100% + border-radius 4px + +.abunaiaudionankasirankedoichioux + display flex + justify-content center + align-items center + background #111 + color #fff + + > div + display table-cell + text-align center + font-size 12px + + > b + display block + +</style> From dd3e3ddcdd69136023cb39a769d7785fac6696be Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Tue, 4 Sep 2018 20:21:36 +0900 Subject: [PATCH 03/11] wip --- locales/ja-JP.yml | 5 ++ .../common/views/components/media-list.vue | 3 +- .../views/components/media-download.vue | 79 +++++++++++++++++++ 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/client/app/desktop/views/components/media-download.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index a57f724a32..af1ef601af 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -583,6 +583,11 @@ desktop/views/components/media-video.vue: sensitive: "閲覧注意" click-to-show: "クリックして表示" +desktop/views/components/media-download.vue: + sensitive: "閲覧注意" + click-to-show: "クリックして表示" + download: "ダウンロード" + desktop/views/components/follow-button.vue: following: "フォロー中" follow: "フォロー" diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index cdfc2c8d3c..41b8bf9bb7 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -3,7 +3,8 @@ <div :data-count="mediaList.length" ref="grid"> <template v-for="media in mediaList"> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/> - <mk-media-image :image="media" :key="media.id" v-else :raw="raw"/> + <mk-media-image :image="media" :key="media.id" v-if="media.type.startsWith('image')" :raw="raw"/> + <mk-media-download :download="media" :key="media.id" v-else :raw="raw"/> </template> </div> </div> diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue new file mode 100644 index 0000000000..236b065204 --- /dev/null +++ b/src/client/app/desktop/views/components/media-download.vue @@ -0,0 +1,79 @@ +<template> +<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false"> + <div> + <b>%fa:exclamation-triangle% %i18n:@sensitive%</b> + <span>%i18n:@click-to-show%</span> + </div> +</div> +<a class="reiujibreakfastbreadbaconeggnuts" v-else + :href="download.url" + :style="style" + :title="download.name" + download="{{ download.name }}{{ download.ext }}" +> + <div> + <div>%fa:download%</div> + <div>%i18n:@download%</div> + <div>{{ download.name }}{{ download.ext }}</div> + </div> +</a> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + download: { + type: Object, + required: true + }, + raw: { + default: false + }, + hide: { + type: Boolean, + default: true + } + }, + computed: { + style(): any { + return { + 'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent', + 'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})` + }; + } + } +}); +</script> + +<style lang="stylus" scoped> +.reiujibreakfastbreadbaconeggnuts + display flex + justify-content center + align-items center + + > div + display table-cell + text-align center + font-size 12px + + > * + display block + +.ldwbgwstjsdgcjruamauqdrffetqudry + display flex + justify-content center + align-items center + background #111 + color #fff + + > div + display table-cell + text-align center + font-size 12px + + > * + display block + +</style> From 8bcfa97349b73b3c9759cad7b1678a02bc36e2f9 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Tue, 4 Sep 2018 21:06:02 +0900 Subject: [PATCH 04/11] wip --- locales/ja-JP.yml | 4 ++++ src/client/app/common/views/components/media-list.vue | 2 +- src/client/app/desktop/views/components/index.ts | 2 ++ src/client/app/desktop/views/components/media-audio.vue | 3 +-- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index a57f724a32..f04495ed95 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -583,6 +583,10 @@ desktop/views/components/media-video.vue: sensitive: "閲覧注意" click-to-show: "クリックして表示" +desktop/views/components/media-audio.vue: + sensitive: "閲覧注意" + click-to-show: "クリックして表示" + desktop/views/components/follow-button.vue: following: "フォロー中" follow: "フォロー" diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index c531f9ac91..4408ba2792 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -3,7 +3,7 @@ <div :data-count="mediaList.length" ref="grid"> <template v-for="media in mediaList"> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/> - <mk-media-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/> + <mk-media-audio :audio="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/> <mk-media-image :image="media" :key="media.id" v-else :raw="raw"/> </template> </div> diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts index 7b7a38afa2..159ead4983 100644 --- a/src/client/app/desktop/views/components/index.ts +++ b/src/client/app/desktop/views/components/index.ts @@ -13,6 +13,7 @@ import ellipsisIcon from './ellipsis-icon.vue'; import mediaImage from './media-image.vue'; import mediaImageDialog from './media-image-dialog.vue'; import mediaVideo from './media-video.vue'; +import mediaAudio from './media-audio.vue'; import notifications from './notifications.vue'; import noteForm from './post-form.vue'; import renoteForm from './renote-form.vue'; @@ -43,6 +44,7 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon); Vue.component('mk-media-image', mediaImage); Vue.component('mk-media-image-dialog', mediaImageDialog); Vue.component('mk-media-video', mediaVideo); +Vue.component('mk-media-audio', mediaAudio); Vue.component('mk-notifications', notifications); Vue.component('mk-post-form', noteForm); Vue.component('mk-renote-form', renoteForm); diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue index 4a0c26fb9e..5d41947b17 100644 --- a/src/client/app/desktop/views/components/media-audio.vue +++ b/src/client/app/desktop/views/components/media-audio.vue @@ -10,8 +10,7 @@ :src="audio.url" :title="audio.name" controls - ref="audio" - v-if="inlinePlayable" /> + ref="audio" /> </div> </template> From ebeaef94e2545098ee81f143503180defa731793 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Wed, 5 Sep 2018 01:08:18 +0900 Subject: [PATCH 05/11] Improve media list --- locales/ja-JP.yml | 13 +-- .../app/common/views/components/index.ts | 2 + .../common/views/components/media-banner.vue | 85 ++++++++++++++ .../common/views/components/media-list.vue | 109 +++++++++--------- .../app/desktop/views/components/index.ts | 2 - .../desktop/views/components/media-audio.vue | 67 ----------- .../views/components/media-download.vue | 79 ------------- .../desktop/views/components/media-image.vue | 2 +- .../desktop/views/components/media-video.vue | 21 +--- .../mobile/views/components/media-image.vue | 2 +- 10 files changed, 152 insertions(+), 230 deletions(-) create mode 100644 src/client/app/common/views/components/media-banner.vue delete mode 100644 src/client/app/desktop/views/components/media-audio.vue delete mode 100644 src/client/app/desktop/views/components/media-download.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 193c3c5022..de5505e7db 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -250,6 +250,10 @@ common/views/components/connect-failed.troubleshooter.vue: flush: "キャッシュの削除" set-version: "バージョン指定" +common/views/components/media-banner.vue: + sensitive: "閲覧注意" + click-to-show: "クリックして表示" + common/views/components/messaging.vue: search-user: "ユーザーを探す" you: "あなた" @@ -583,15 +587,6 @@ desktop/views/components/media-video.vue: sensitive: "閲覧注意" click-to-show: "クリックして表示" -desktop/views/components/media-audio.vue: - sensitive: "閲覧注意" - click-to-show: "クリックして表示" - -desktop/views/components/media-download.vue: - sensitive: "閲覧注意" - click-to-show: "クリックして表示" - download: "ダウンロード" - desktop/views/components/follow-button.vue: following: "フォロー中" follow: "フォロー" diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 4700b6269e..43cde6c54f 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -18,6 +18,7 @@ import reactionsViewer from './reactions-viewer.vue'; import time from './time.vue'; import timer from './timer.vue'; import mediaList from './media-list.vue'; +import mediaBanner from './media-banner.vue'; import uploader from './uploader.vue'; import specialMessage from './special-message.vue'; import streamIndicator from './stream-indicator.vue'; @@ -59,6 +60,7 @@ Vue.component('mk-reactions-viewer', reactionsViewer); Vue.component('mk-time', time); Vue.component('mk-timer', timer); Vue.component('mk-media-list', mediaList); +Vue.component('mk-media-banner', mediaBanner); Vue.component('mk-uploader', uploader); Vue.component('mk-special-message', specialMessage); Vue.component('mk-stream-indicator', streamIndicator); diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue new file mode 100644 index 0000000000..69cd579446 --- /dev/null +++ b/src/client/app/common/views/components/media-banner.vue @@ -0,0 +1,85 @@ +<template> +<div class="mk-media-banner"> + <div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false"> + <span class="mk-media-banner-icon">%fa:exclamation-triangle%</span> + <b>%i18n:@sensitive%</b> + <span>%i18n:@click-to-show%</span> + </div> + <div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')"> + <audio class="audio" + :src="media.url" + :title="media.name" + controls + ref="audio" + preload="metadata" /> + </div> + <a class="mk-media-banner-download" v-else + :href="media.url" + :title="media.name" + :download="media.name" + > + <span class="mk-media-banner-icon">%fa:download%</span> + <b>{{ media.name }}</b> + </a> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + media: { + type: Object, + required: true + }, + hide: { + type: Boolean, + default: true + } + } +}) +</script> + +<style lang="stylus" scoped> +.mk-media-banner + width 100% + border-radius 4px + margin-top 4px + overflow hidden + + .mk-media-banner-download, + .mk-media-banner-sensitive + display flex + align-items center + font-size 12px + padding .2em .6em + white-space nowrap + + > * + display block + + > b + flex-shrink 2147483647 + overflow hidden + text-overflow ellipsis + + > *:not(:last-child) + margin-right .2em + + > .mk-media-banner-icon + font-size 1.6em + + .mk-media-banner-download + background #f7f7f7 + + .mk-media-banner-sensitive + background #111 + color #fff + + .mk-media-banner-audio + .audio + display block + width 100% + height 100% +</style> diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index 0312c2dfda..e949c063ab 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -1,12 +1,15 @@ <template> <div class="mk-media-list"> - <div :data-count="mediaList.length" ref="grid"> - <template v-for="media in mediaList"> - <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/> - <mk-media-audio :audio="media" :key="media.id" v-else-if="media.type.startsWith('audio')"/> - <mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> - <mk-media-download :download="media" :key="media.id" v-else/> - </template> + <template v-for="media in mediaList"> + <mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/> + </template> + <div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0"> + <div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid"> + <template v-for="media in mediaList"> + <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> + <mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> + </template> + </div> </div> </div> </template> @@ -32,62 +35,64 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-media-list - width 100% + > .mk-media-list-fixed + width 100% + margin-top 4px - &:before - content '' - display block - padding-top 56.25% // 16:9 + &:before + content '' + display block + padding-top 56.25% // 16:9 - > div - position absolute - top 0 - right 0 - bottom 0 - left 0 - display grid - grid-gap 4px + > div + position absolute + top 0 + right 0 + bottom 0 + left 0 + display grid + grid-gap 4px - > * - overflow hidden - border-radius 4px + > * + overflow hidden + border-radius 4px - &[data-count="1"] - grid-template-rows 1fr + &[data-count="1"] + grid-template-rows 1fr - &[data-count="2"] - grid-template-columns 1fr 1fr - grid-template-rows 1fr + &[data-count="2"] + grid-template-columns 1fr 1fr + grid-template-rows 1fr - &[data-count="3"] - grid-template-columns 1fr 0.5fr - grid-template-rows 1fr 1fr + &[data-count="3"] + grid-template-columns 1fr 0.5fr + grid-template-rows 1fr 1fr + + > *:nth-child(1) + grid-row 1 / 3 + + > *:nth-child(3) + grid-column 2 / 3 + grid-row 2 / 3 + + &[data-count="4"] + grid-template-columns 1fr 1fr + grid-template-rows 1fr 1fr > *:nth-child(1) - grid-row 1 / 3 + grid-column 1 / 2 + grid-row 1 / 2 + + > *:nth-child(2) + grid-column 2 / 3 + grid-row 1 / 2 > *:nth-child(3) + grid-column 1 / 2 + grid-row 2 / 3 + + > *:nth-child(4) grid-column 2 / 3 grid-row 2 / 3 - &[data-count="4"] - grid-template-columns 1fr 1fr - grid-template-rows 1fr 1fr - - > *:nth-child(1) - grid-column 1 / 2 - grid-row 1 / 2 - - > *:nth-child(2) - grid-column 2 / 3 - grid-row 1 / 2 - - > *:nth-child(3) - grid-column 1 / 2 - grid-row 2 / 3 - - > *:nth-child(4) - grid-column 2 / 3 - grid-row 2 / 3 - </style> diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts index 159ead4983..7b7a38afa2 100644 --- a/src/client/app/desktop/views/components/index.ts +++ b/src/client/app/desktop/views/components/index.ts @@ -13,7 +13,6 @@ import ellipsisIcon from './ellipsis-icon.vue'; import mediaImage from './media-image.vue'; import mediaImageDialog from './media-image-dialog.vue'; import mediaVideo from './media-video.vue'; -import mediaAudio from './media-audio.vue'; import notifications from './notifications.vue'; import noteForm from './post-form.vue'; import renoteForm from './renote-form.vue'; @@ -44,7 +43,6 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon); Vue.component('mk-media-image', mediaImage); Vue.component('mk-media-image-dialog', mediaImageDialog); Vue.component('mk-media-video', mediaVideo); -Vue.component('mk-media-audio', mediaAudio); Vue.component('mk-notifications', notifications); Vue.component('mk-post-form', noteForm); Vue.component('mk-renote-form', renoteForm); diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue deleted file mode 100644 index 5d41947b17..0000000000 --- a/src/client/app/desktop/views/components/media-audio.vue +++ /dev/null @@ -1,67 +0,0 @@ -<template> -<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false"> - <div> - <b>%fa:exclamation-triangle% %i18n:@sensitive%</b> - <span>%i18n:@click-to-show%</span> - </div> -</div> -<div class="komeijiokayusabanomisoniohitashi" v-else> - <audio class="audio" - :src="audio.url" - :title="audio.name" - controls - ref="audio" /> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - audio: { - type: Object, - required: true - }, - inlinePlayable: { - default: false - }, - hide: { - type: Boolean, - default: true - } - }, - computed: { - imageStyle(): any { - return { - 'background-image': `url(${this.audio.url})` - }; - } - } -}) -</script> - -<style lang="stylus" scoped> -.komeijiokayusabanomisoniohitashi - .audio - display block - width 100% - height 100% - border-radius 4px - -.abunaiaudionankasirankedoichioux - display flex - justify-content center - align-items center - background #111 - color #fff - - > div - display table-cell - text-align center - font-size 12px - - > b - display block - -</style> diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue deleted file mode 100644 index 236b065204..0000000000 --- a/src/client/app/desktop/views/components/media-download.vue +++ /dev/null @@ -1,79 +0,0 @@ -<template> -<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false"> - <div> - <b>%fa:exclamation-triangle% %i18n:@sensitive%</b> - <span>%i18n:@click-to-show%</span> - </div> -</div> -<a class="reiujibreakfastbreadbaconeggnuts" v-else - :href="download.url" - :style="style" - :title="download.name" - download="{{ download.name }}{{ download.ext }}" -> - <div> - <div>%fa:download%</div> - <div>%i18n:@download%</div> - <div>{{ download.name }}{{ download.ext }}</div> - </div> -</a> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - download: { - type: Object, - required: true - }, - raw: { - default: false - }, - hide: { - type: Boolean, - default: true - } - }, - computed: { - style(): any { - return { - 'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent', - 'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})` - }; - } - } -}); -</script> - -<style lang="stylus" scoped> -.reiujibreakfastbreadbaconeggnuts - display flex - justify-content center - align-items center - - > div - display table-cell - text-align center - font-size 12px - - > * - display block - -.ldwbgwstjsdgcjruamauqdrffetqudry - display flex - justify-content center - align-items center - background #111 - color #fff - - > div - display table-cell - text-align center - font-size 12px - - > * - display block - -</style> diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue index 0284872c68..904dc7f832 100644 --- a/src/client/app/desktop/views/components/media-image.vue +++ b/src/client/app/desktop/views/components/media-image.vue @@ -89,7 +89,7 @@ export default Vue.extend({ text-align center font-size 12px - > b + > * display block </style> diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue index 6c60f2da96..0a374acb8f 100644 --- a/src/client/app/desktop/views/components/media-video.vue +++ b/src/client/app/desktop/views/components/media-video.vue @@ -6,19 +6,11 @@ </div> </div> <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else> - <video class="video" - :src="video.url" - :title="video.name" - controls - @dblclick.prevent="onClick" - ref="video" - v-if="inlinePlayable" /> <a class="thumbnail" :href="video.url" :style="imageStyle" @click.prevent="onClick" - :title="video.name" - v-else> + :title="video.name"> %fa:R play-circle% </a> </div> @@ -34,9 +26,6 @@ export default Vue.extend({ type: Object, required: true }, - inlinePlayable: { - default: false - }, hide: { type: Boolean, default: true @@ -68,12 +57,6 @@ export default Vue.extend({ <style lang="stylus" scoped> .vwxdhznewyashiknzolsoihtlpicqepe - .video - display block - width 100% - height 100% - border-radius 4px - .thumbnail display flex justify-content center @@ -99,7 +82,7 @@ export default Vue.extend({ text-align center font-size 12px - > b + > * display block </style> diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue index e40069bbe3..c8766f5464 100644 --- a/src/client/app/mobile/views/components/media-image.vue +++ b/src/client/app/mobile/views/components/media-image.vue @@ -65,7 +65,7 @@ export default Vue.extend({ text-align center font-size 12px - > b + > * display block </style> From 299f83684bbced1cabd36836ca37ccc1684ce750 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Wed, 5 Sep 2018 18:01:47 +0900 Subject: [PATCH 06/11] media-banner darkmode --- src/client/app/common/views/components/media-banner.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue index 69cd579446..48b0d03d30 100644 --- a/src/client/app/common/views/components/media-banner.vue +++ b/src/client/app/common/views/components/media-banner.vue @@ -70,7 +70,10 @@ export default Vue.extend({ > .mk-media-banner-icon font-size 1.6em - .mk-media-banner-download + .mk-media-banner-download[data-darkmode] + background #21242d + + .mk-media-banner-download:not([data-darkmode]) background #f7f7f7 .mk-media-banner-sensitive From 4257fed5009a30b7815fe3254d18b4b87806fe51 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Wed, 5 Sep 2018 19:46:55 +0900 Subject: [PATCH 07/11] fix mk-media darkmode --- .../app/common/views/components/media-banner.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue index 48b0d03d30..5c83925a32 100644 --- a/src/client/app/common/views/components/media-banner.vue +++ b/src/client/app/common/views/components/media-banner.vue @@ -42,7 +42,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.mk-media-banner +root(isDark) width 100% border-radius 4px margin-top 4px @@ -70,11 +70,8 @@ export default Vue.extend({ > .mk-media-banner-icon font-size 1.6em - .mk-media-banner-download[data-darkmode] - background #21242d - - .mk-media-banner-download:not([data-darkmode]) - background #f7f7f7 + .mk-media-banner-download + background isDark ? #21242d : #f7f7f7 .mk-media-banner-sensitive background #111 @@ -85,4 +82,10 @@ export default Vue.extend({ display block width 100% height 100% + +.mk-media-banner[data-darkmode] + root(true) + +.mk-media-banner:not([data-darkmode]) + root(false) </style> From 952a49f7496c5c6a6dae8998e8d42ea53281db2e Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sat, 15 Sep 2018 22:22:41 +0900 Subject: [PATCH 08/11] =?UTF-8?q?revert=20=E3=83=87=E3=82=B9=E3=82=AF?= =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=81=AE=E5=8B=95=E7=94=BB=E5=9F=8B?= =?UTF-8?q?=E3=82=81=E8=BE=BC=E3=81=BF=E3=82=92=E5=BB=83=E6=AD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../desktop/views/components/media-video.vue | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue index 0a374acb8f..8af5f9b07e 100644 --- a/src/client/app/desktop/views/components/media-video.vue +++ b/src/client/app/desktop/views/components/media-video.vue @@ -6,11 +6,19 @@ </div> </div> <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else> + <video class="video" + :src="video.url" + :title="video.name" + controls + @dblclick.prevent="onClick" + ref="video" + v-if="inlinePlayable" /> <a class="thumbnail" :href="video.url" :style="imageStyle" @click.prevent="onClick" - :title="video.name"> + :title="video.name" + v-else> %fa:R play-circle% </a> </div> @@ -19,13 +27,15 @@ <script lang="ts"> import Vue from 'vue'; import MkMediaVideoDialog from './media-video-dialog.vue'; - export default Vue.extend({ props: { video: { type: Object, required: true }, + inlinePlayable: { + default: false + }, hide: { type: Boolean, default: true @@ -57,32 +67,32 @@ export default Vue.extend({ <style lang="stylus" scoped> .vwxdhznewyashiknzolsoihtlpicqepe + .video + display block + width 100% + height 100% + border-radius 4px .thumbnail display flex justify-content center align-items center font-size 3.5em - cursor zoom-in overflow hidden background-position center background-size cover width 100% height 100% - .uofhebxjdgksfmltszlxurtjnjjsvioh display flex justify-content center align-items center background #111 color #fff - > div display table-cell text-align center font-size 12px - - > * + > b display block - </style> From 2a96429be81460036cea60cf57f88f2e9a77d8ba Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 16 Sep 2018 04:21:48 +0900 Subject: [PATCH 09/11] =?UTF-8?q?=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=E3=82=84=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4?= =?UTF-8?q?=E3=81=AA=E3=81=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/views/components/media-banner.vue | 26 +++++++++---------- .../common/views/components/media-list.vue | 22 +++++++++++----- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue index 5c83925a32..0693143f02 100644 --- a/src/client/app/common/views/components/media-banner.vue +++ b/src/client/app/common/views/components/media-banner.vue @@ -1,11 +1,11 @@ <template> <div class="mk-media-banner"> - <div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false"> - <span class="mk-media-banner-icon">%fa:exclamation-triangle%</span> + <div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false"> + <span class="icon">%fa:exclamation-triangle%</span> <b>%i18n:@sensitive%</b> <span>%i18n:@click-to-show%</span> </div> - <div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')"> + <div class="audio" v-else-if="media.type.startsWith('audio')"> <audio class="audio" :src="media.url" :title="media.name" @@ -13,12 +13,12 @@ ref="audio" preload="metadata" /> </div> - <a class="mk-media-banner-download" v-else + <a class="download" v-else :href="media.url" :title="media.name" :download="media.name" > - <span class="mk-media-banner-icon">%fa:download%</span> + <span class="icon">%fa:download%</span> <b>{{ media.name }}</b> </a> </div> @@ -48,40 +48,38 @@ root(isDark) margin-top 4px overflow hidden - .mk-media-banner-download, - .mk-media-banner-sensitive + > .download, + > .sensitive display flex align-items center font-size 12px - padding .2em .6em + padding 8px 12px white-space nowrap > * display block > b - flex-shrink 2147483647 overflow hidden text-overflow ellipsis > *:not(:last-child) margin-right .2em - > .mk-media-banner-icon + > .icon font-size 1.6em - .mk-media-banner-download + > .download background isDark ? #21242d : #f7f7f7 - .mk-media-banner-sensitive + > .sensitive background #111 color #fff - .mk-media-banner-audio + > .audio .audio display block width 100% - height 100% .mk-media-banner[data-darkmode] root(true) diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index e949c063ab..b4b7d8f87f 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -1,10 +1,10 @@ <template> <div class="mk-media-list"> - <template v-for="media in mediaList"> - <mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/> + <template v-for="media in mediaList.filter(media => !previewable(media))"> + <mk-media-banner :media="media" :key="media.id"/> </template> - <div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0"> - <div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid"> + <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container"> + <div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid"> <template v-for="media in mediaList"> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> <mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> @@ -27,15 +27,23 @@ export default Vue.extend({ } }, mounted() { - // for Safari bug - this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px'; + //#region for Safari bug + if (this.$refs.grid) { + this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px'; + } + //#endregion + }, + methods: { + previewable(file) { + return file.type.startsWith('video') || file.type.startsWith('image'); + } } }); </script> <style lang="stylus" scoped> .mk-media-list - > .mk-media-list-fixed + > .gird-container width 100% margin-top 4px From 8d24fcba6ab18ef03127f8d95eb87ce45bb005d7 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 16 Sep 2018 04:26:01 +0900 Subject: [PATCH 10/11] :v: --- src/client/app/common/views/components/index.ts | 2 -- src/client/app/common/views/components/media-list.vue | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 21af4ec846..6f8152cea2 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -20,7 +20,6 @@ import reactionsViewer from './reactions-viewer.vue'; import time from './time.vue'; import timer from './timer.vue'; import mediaList from './media-list.vue'; -import mediaBanner from './media-banner.vue'; import uploader from './uploader.vue'; import specialMessage from './special-message.vue'; import streamIndicator from './stream-indicator.vue'; @@ -64,7 +63,6 @@ Vue.component('mk-reactions-viewer', reactionsViewer); Vue.component('mk-time', time); Vue.component('mk-timer', timer); Vue.component('mk-media-list', mediaList); -Vue.component('mk-media-banner', mediaBanner); Vue.component('mk-uploader', uploader); Vue.component('mk-special-message', specialMessage); Vue.component('mk-stream-indicator', streamIndicator); diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue index b4b7d8f87f..d83d6f85cd 100644 --- a/src/client/app/common/views/components/media-list.vue +++ b/src/client/app/common/views/components/media-list.vue @@ -1,7 +1,7 @@ <template> <div class="mk-media-list"> <template v-for="media in mediaList.filter(media => !previewable(media))"> - <mk-media-banner :media="media" :key="media.id"/> + <x-banner :media="media" :key="media.id"/> </template> <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container"> <div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid"> @@ -16,8 +16,12 @@ <script lang="ts"> import Vue from 'vue'; +import XBanner from './media-banner.vue'; export default Vue.extend({ + components: { + XBanner + }, props: { mediaList: { required: true From a680bcda1fdb6f0658fea1c99cc115ce10e190c5 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 16 Sep 2018 04:27:10 +0900 Subject: [PATCH 11/11] Fix --- src/client/app/desktop/views/components/media-video.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue index 8af5f9b07e..d2752b0c95 100644 --- a/src/client/app/desktop/views/components/media-video.vue +++ b/src/client/app/desktop/views/components/media-video.vue @@ -27,6 +27,7 @@ <script lang="ts"> import Vue from 'vue'; import MkMediaVideoDialog from './media-video-dialog.vue'; + export default Vue.extend({ props: { video: { @@ -72,6 +73,7 @@ export default Vue.extend({ width 100% height 100% border-radius 4px + .thumbnail display flex justify-content center @@ -83,16 +85,19 @@ export default Vue.extend({ background-size cover width 100% height 100% + .uofhebxjdgksfmltszlxurtjnjjsvioh display flex justify-content center align-items center background #111 color #fff + > div display table-cell text-align center font-size 12px + > b display block </style>