2020-01-29 13:37:25 -06:00
|
|
|
/**
|
2020-07-10 20:13:11 -05:00
|
|
|
* Client entry point
|
2020-01-29 13:37:25 -06:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import Vue from 'vue';
|
|
|
|
|
import Vuex from 'vuex';
|
|
|
|
|
import VueMeta from 'vue-meta';
|
|
|
|
|
import PortalVue from 'portal-vue';
|
|
|
|
|
import VAnimateCss from 'v-animate-css';
|
2020-05-22 23:19:31 -05:00
|
|
|
import VueI18n from 'vue-i18n';
|
2020-01-29 13:37:25 -06:00
|
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
2020-07-18 06:03:46 -05:00
|
|
|
import { AiScript } from '@syuilo/aiscript';
|
|
|
|
|
import { deserialize } from '@syuilo/aiscript/built/serializer';
|
2020-01-29 13:37:25 -06:00
|
|
|
|
|
|
|
|
import VueHotkey from './scripts/hotkey';
|
|
|
|
|
import App from './app.vue';
|
2020-07-10 20:13:11 -05:00
|
|
|
import Deck from './deck.vue';
|
2020-01-29 13:37:25 -06:00
|
|
|
import MiOS from './mios';
|
2020-07-10 20:13:11 -05:00
|
|
|
import { version, langs, instanceName, getLocale, deckmode } from './config';
|
2020-01-29 13:37:25 -06:00
|
|
|
import PostFormDialog from './components/post-form-dialog.vue';
|
|
|
|
|
import Dialog from './components/dialog.vue';
|
|
|
|
|
import Menu from './components/menu.vue';
|
2020-07-10 20:13:11 -05:00
|
|
|
import Form from './components/form-window.vue';
|
2020-01-29 13:37:25 -06:00
|
|
|
import { router } from './router';
|
2020-07-09 10:20:26 -05:00
|
|
|
import { applyTheme, lightTheme } from './scripts/theme';
|
2020-03-22 06:23:35 -05:00
|
|
|
import { isDeviceDarkmode } from './scripts/is-device-darkmode';
|
2020-03-30 19:11:43 -05:00
|
|
|
import createStore from './store';
|
2020-05-22 23:19:31 -05:00
|
|
|
import { clientDb, get, count } from './db';
|
|
|
|
|
import { setI18nContexts } from './scripts/set-i18n-contexts';
|
2020-07-11 10:38:55 -05:00
|
|
|
import { createPluginEnv } from './scripts/aiscript/api';
|
2020-01-29 13:37:25 -06:00
|
|
|
|
|
|
|
|
Vue.use(Vuex);
|
|
|
|
|
Vue.use(VueHotkey);
|
|
|
|
|
Vue.use(VueMeta);
|
|
|
|
|
Vue.use(PortalVue);
|
|
|
|
|
Vue.use(VAnimateCss);
|
2020-05-22 23:19:31 -05:00
|
|
|
Vue.use(VueI18n);
|
2020-01-29 13:37:25 -06:00
|
|
|
Vue.component('fa', FontAwesomeIcon);
|
|
|
|
|
|
|
|
|
|
require('./directives');
|
|
|
|
|
require('./components');
|
|
|
|
|
require('./widgets');
|
|
|
|
|
require('./filters');
|
|
|
|
|
|
|
|
|
|
Vue.mixin({
|
|
|
|
|
methods: {
|
|
|
|
|
destroyDom() {
|
|
|
|
|
this.$destroy();
|
|
|
|
|
|
|
|
|
|
if (this.$el.parentNode) {
|
|
|
|
|
this.$el.parentNode.removeChild(this.$el);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.info(`Misskey v${version}`);
|
|
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') == null) {
|
|
|
|
|
applyTheme(lightTheme);
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-15 04:22:19 -05:00
|
|
|
//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
|
|
|
|
// TODO: いつの日にか消したい
|
|
|
|
|
const vh = window.innerHeight * 0.01;
|
|
|
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
const vh = window.innerHeight * 0.01;
|
|
|
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
|
|
|
});
|
|
|
|
|
//#endregion
|
|
|
|
|
|
2020-01-29 13:37:25 -06:00
|
|
|
//#region Detect the user language
|
2020-02-11 16:12:58 -06:00
|
|
|
let lang = localStorage.getItem('lang');
|
2020-01-29 13:37:25 -06:00
|
|
|
|
2020-02-11 16:12:58 -06:00
|
|
|
if (lang == null) {
|
|
|
|
|
if (langs.map(x => x[0]).includes(navigator.language)) {
|
|
|
|
|
lang = navigator.language;
|
|
|
|
|
} else {
|
|
|
|
|
lang = langs.map(x => x[0]).find(x => x.split('-')[0] == navigator.language);
|
2020-01-29 13:37:25 -06:00
|
|
|
|
2020-02-11 16:12:58 -06:00
|
|
|
if (lang == null) {
|
|
|
|
|
// Fallback
|
|
|
|
|
lang = 'en-US';
|
|
|
|
|
}
|
2020-01-29 13:37:25 -06:00
|
|
|
}
|
|
|
|
|
|
2020-02-11 16:12:58 -06:00
|
|
|
localStorage.setItem('lang', lang);
|
|
|
|
|
}
|
2020-01-29 13:37:25 -06:00
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
// Detect the user agent
|
|
|
|
|
const ua = navigator.userAgent.toLowerCase();
|
2020-03-03 20:45:33 -06:00
|
|
|
const isMobile = /mobile|iphone|ipad|android/.test(ua);
|
2020-01-29 13:37:25 -06:00
|
|
|
|
|
|
|
|
// Get the <head> element
|
|
|
|
|
const head = document.getElementsByTagName('head')[0];
|
|
|
|
|
|
|
|
|
|
// If mobile, insert the viewport meta tag
|
|
|
|
|
if (isMobile || window.innerWidth <= 1024) {
|
2020-03-03 20:45:33 -06:00
|
|
|
const viewport = document.getElementsByName('viewport').item(0);
|
2020-01-29 13:37:25 -06:00
|
|
|
viewport.setAttribute('content',
|
|
|
|
|
`${viewport.getAttribute('content')},minimum-scale=1,maximum-scale=1,user-scalable=no`);
|
|
|
|
|
head.appendChild(viewport);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//#region Set lang attr
|
|
|
|
|
const html = document.documentElement;
|
|
|
|
|
html.setAttribute('lang', lang);
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
// アプリ基底要素マウント
|
|
|
|
|
document.body.innerHTML = '<div id="app"></div>';
|
|
|
|
|
|
2020-03-30 19:11:43 -05:00
|
|
|
const store = createStore();
|
|
|
|
|
|
2020-07-15 04:03:08 -05:00
|
|
|
// 他のタブと永続化されたstateを同期
|
2020-07-12 04:14:59 -05:00
|
|
|
window.addEventListener('storage', e => {
|
|
|
|
|
if (e.key === 'vuex') {
|
2020-07-15 04:03:08 -05:00
|
|
|
store.replaceState({
|
|
|
|
|
...store.state,
|
|
|
|
|
...JSON.parse(e.newValue)
|
|
|
|
|
});
|
2020-07-12 04:14:59 -05:00
|
|
|
} else if (e.key === 'i') {
|
|
|
|
|
location.reload();
|
2020-03-22 06:23:35 -05:00
|
|
|
}
|
2020-07-12 04:14:59 -05:00
|
|
|
}, false);
|
2020-03-22 06:23:35 -05:00
|
|
|
|
2020-07-12 04:14:59 -05:00
|
|
|
const os = new MiOS(store);
|
2020-03-22 04:39:37 -05:00
|
|
|
|
2020-07-12 04:14:59 -05:00
|
|
|
os.init(async () => {
|
2020-05-22 23:19:31 -05:00
|
|
|
//#region Fetch locale data
|
|
|
|
|
const i18n = new VueI18n();
|
|
|
|
|
|
|
|
|
|
await count(clientDb.i18n).then(async n => {
|
|
|
|
|
if (n === 0) return setI18nContexts(lang, version, i18n);
|
|
|
|
|
if ((await get('_version_', clientDb.i18n) !== version)) return setI18nContexts(lang, version, i18n, true);
|
|
|
|
|
|
|
|
|
|
i18n.locale = lang;
|
|
|
|
|
i18n.setLocaleMessage(lang, await getLocale());
|
|
|
|
|
});
|
|
|
|
|
//#endregion
|
|
|
|
|
|
2020-01-29 13:37:25 -06:00
|
|
|
const app = new Vue({
|
2020-03-30 19:11:43 -05:00
|
|
|
store: store,
|
2020-05-22 23:19:31 -05:00
|
|
|
i18n,
|
2020-01-29 13:37:25 -06:00
|
|
|
metaInfo: {
|
|
|
|
|
title: null,
|
2020-02-12 11:48:52 -06:00
|
|
|
titleTemplate: title => title ? `${title} | ${(instanceName || 'Misskey')}` : (instanceName || 'Misskey')
|
2020-01-29 13:37:25 -06:00
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
stream: os.stream,
|
2020-05-22 23:19:31 -05:00
|
|
|
isMobile: isMobile,
|
|
|
|
|
i18n // TODO: 消せないか考える SEE: https://github.com/syuilo/misskey/pull/6396#discussion_r429511030
|
2020-01-29 13:37:25 -06:00
|
|
|
};
|
|
|
|
|
},
|
2020-07-10 20:13:11 -05:00
|
|
|
// TODO: ここらへんのメソッド全部Vuexに移したい
|
2020-01-29 13:37:25 -06:00
|
|
|
methods: {
|
2020-03-30 19:11:43 -05:00
|
|
|
api: (endpoint: string, data: { [x: string]: any } = {}, token?) => store.dispatch('api', { endpoint, data, token }),
|
2020-01-29 13:37:25 -06:00
|
|
|
signout: os.signout,
|
|
|
|
|
new(vm, props) {
|
|
|
|
|
const x = new vm({
|
|
|
|
|
parent: this,
|
|
|
|
|
propsData: props
|
|
|
|
|
}).$mount();
|
|
|
|
|
document.body.appendChild(x.$el);
|
|
|
|
|
return x;
|
|
|
|
|
},
|
|
|
|
|
dialog(opts) {
|
|
|
|
|
const vm = this.new(Dialog, opts);
|
|
|
|
|
const p: any = new Promise((res) => {
|
|
|
|
|
vm.$once('ok', result => res({ canceled: false, result }));
|
|
|
|
|
vm.$once('cancel', () => res({ canceled: true }));
|
|
|
|
|
});
|
|
|
|
|
p.close = () => {
|
|
|
|
|
vm.close();
|
|
|
|
|
};
|
|
|
|
|
return p;
|
|
|
|
|
},
|
|
|
|
|
menu(opts) {
|
|
|
|
|
const vm = this.new(Menu, opts);
|
|
|
|
|
const p: any = new Promise((res) => {
|
|
|
|
|
vm.$once('closed', () => res());
|
|
|
|
|
});
|
|
|
|
|
return p;
|
|
|
|
|
},
|
2020-07-10 20:13:11 -05:00
|
|
|
form(title, form) {
|
|
|
|
|
const vm = this.new(Form, { title, form });
|
|
|
|
|
return new Promise((res) => {
|
|
|
|
|
vm.$once('ok', result => res({ canceled: false, result }));
|
|
|
|
|
vm.$once('cancel', () => res({ canceled: true }));
|
|
|
|
|
});
|
|
|
|
|
},
|
2020-01-29 13:37:25 -06:00
|
|
|
post(opts, cb) {
|
2020-07-07 01:50:47 -05:00
|
|
|
if (!this.$store.getters.isSignedIn) return;
|
2020-01-29 13:37:25 -06:00
|
|
|
const vm = this.new(PostFormDialog, opts);
|
|
|
|
|
if (cb) vm.$once('closed', cb);
|
|
|
|
|
(vm as any).focus();
|
|
|
|
|
},
|
2020-02-19 15:08:49 -06:00
|
|
|
sound(type: string) {
|
2020-02-20 08:17:17 -06:00
|
|
|
if (this.$store.state.device.sfxVolume === 0) return;
|
2020-02-19 15:08:49 -06:00
|
|
|
const sound = this.$store.state.device['sfx' + type.substr(0, 1).toUpperCase() + type.substr(1)];
|
|
|
|
|
if (sound == null) return;
|
|
|
|
|
const audio = new Audio(`/assets/sounds/${sound}.mp3`);
|
|
|
|
|
audio.volume = this.$store.state.device.sfxVolume;
|
|
|
|
|
audio.play();
|
|
|
|
|
}
|
2020-01-29 13:37:25 -06:00
|
|
|
},
|
|
|
|
|
router: router,
|
2020-07-10 20:13:11 -05:00
|
|
|
render: createEl => createEl(deckmode ? Deck : App)
|
2020-01-29 13:37:25 -06:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// マウント
|
|
|
|
|
app.$mount('#app');
|
2020-02-19 15:08:49 -06:00
|
|
|
|
2020-07-12 04:14:59 -05:00
|
|
|
store.watch(state => state.device.darkMode, darkMode => {
|
|
|
|
|
import('./scripts/theme').then(({ builtinThemes }) => {
|
|
|
|
|
const themes = builtinThemes.concat(store.state.device.themes);
|
|
|
|
|
applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//#region Sync dark mode
|
|
|
|
|
if (store.state.device.syncDeviceDarkMode) {
|
|
|
|
|
store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
|
|
|
|
|
if (store.state.device.syncDeviceDarkMode) {
|
|
|
|
|
store.commit('device/set', { key: 'darkMode', value: mql.matches });
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
store.watch(state => state.device.useBlurEffectForModal, v => {
|
|
|
|
|
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
|
|
|
|
|
}, { immediate: true });
|
|
|
|
|
|
2020-04-02 08:17:17 -05:00
|
|
|
os.stream.on('emojiAdded', data => {
|
|
|
|
|
// TODO
|
|
|
|
|
//store.commit('instance/set', );
|
|
|
|
|
});
|
|
|
|
|
|
2020-07-28 05:02:28 -05:00
|
|
|
for (const plugin of store.state.deviceUser.plugins.filter(p => p.active)) {
|
2020-07-11 10:38:55 -05:00
|
|
|
console.info('Plugin installed:', plugin.name, 'v' + plugin.version);
|
|
|
|
|
|
|
|
|
|
const aiscript = new AiScript(createPluginEnv(app, {
|
|
|
|
|
plugin: plugin,
|
|
|
|
|
storageKey: 'plugins:' + plugin.id
|
|
|
|
|
}), {
|
|
|
|
|
in: (q) => {
|
|
|
|
|
return new Promise(ok => {
|
|
|
|
|
app.dialog({
|
|
|
|
|
title: q,
|
|
|
|
|
input: {}
|
|
|
|
|
}).then(({ canceled, result: a }) => {
|
|
|
|
|
ok(a);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
out: (value) => {
|
|
|
|
|
console.log(value);
|
|
|
|
|
},
|
|
|
|
|
log: (type, params) => {
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
store.commit('initPlugin', { plugin, aiscript });
|
|
|
|
|
|
2020-07-18 06:03:46 -05:00
|
|
|
aiscript.exec(deserialize(plugin.ast));
|
2020-07-11 10:38:55 -05:00
|
|
|
}
|
|
|
|
|
|
2020-03-30 19:11:43 -05:00
|
|
|
if (store.getters.isSignedIn) {
|
2020-07-12 04:14:59 -05:00
|
|
|
if ('Notification' in window) {
|
|
|
|
|
// 許可を得ていなかったらリクエスト
|
|
|
|
|
if (Notification.permission === 'default') {
|
|
|
|
|
Notification.requestPermission();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-19 15:08:49 -06:00
|
|
|
const main = os.stream.useSharedConnection('main');
|
|
|
|
|
|
|
|
|
|
// 自分の情報が更新されたとき
|
|
|
|
|
main.on('meUpdated', i => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', i);
|
2020-02-19 15:08:49 -06:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('readAllNotifications', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadNotification: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadNotification', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadNotification: true
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadMention', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadMentions: true
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('readAllUnreadMentions', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadMentions: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadSpecifiedNote', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadSpecifiedNotes: true
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('readAllUnreadSpecifiedNotes', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadSpecifiedNotes: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('readAllMessagingMessages', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadMessagingMessage: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadMessagingMessage', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadMessagingMessage: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
app.sound('chatBg');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('readAllAntennas', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadAntenna: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadAntenna', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadAntenna: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
app.sound('antenna');
|
|
|
|
|
});
|
|
|
|
|
|
2020-08-18 08:44:21 -05:00
|
|
|
main.on('readAllChannels', () => {
|
|
|
|
|
store.dispatch('mergeMe', {
|
|
|
|
|
hasUnreadChannel: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('unreadChannel', () => {
|
|
|
|
|
store.dispatch('mergeMe', {
|
|
|
|
|
hasUnreadChannel: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
app.sound('channel');
|
|
|
|
|
});
|
|
|
|
|
|
2020-02-19 15:08:49 -06:00
|
|
|
main.on('readAllAnnouncements', () => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.dispatch('mergeMe', {
|
2020-02-19 15:08:49 -06:00
|
|
|
hasUnreadAnnouncement: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
main.on('clientSettingUpdated', x => {
|
2020-03-30 19:11:43 -05:00
|
|
|
store.commit('settings/set', {
|
2020-02-19 15:08:49 -06:00
|
|
|
key: x.key,
|
|
|
|
|
value: x.value
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// トークンが再生成されたとき
|
|
|
|
|
// このままではMisskeyが利用できないので強制的にサインアウトさせる
|
|
|
|
|
main.on('myTokenRegenerated', () => {
|
|
|
|
|
os.signout();
|
|
|
|
|
});
|
|
|
|
|
}
|
2020-01-29 13:37:25 -06:00
|
|
|
});
|
