Fix bugs

src/web/app/common/mios.ts

 import Vue from 'vue';
 import { EventEmitter } from 'eventemitter3';
 
-import { apiUrl, swPublickey, version, lang } from '../config';
+import { host, apiUrl, swPublickey, version, lang } from '../config';
 import api from './scripts/api';
-import signout from './scripts/signout';
 import Progress from './scripts/loading';
 import HomeStreamManager from './scripts/streaming/home-stream-manager';
 import DriveStreamManager from './scripts/streaming/drive-stream-manager';
@@ -153,7 +152,7 @@ export default class MiOS extends EventEmitter {
 
 		this.once('signedin', () => {
 			// Init home stream manager
-			this.stream = new HomeStreamManager(this.i);
+			this.stream = new HomeStreamManager(this, this.i);
 
 			// Init other stream manager
 			this.streams.driveStream = new DriveStreamManager(this.i);
@@ -184,6 +183,12 @@ export default class MiOS extends EventEmitter {
 		console.error.apply(null, args);
 	}
 
+	public signout() {
+		localStorage.removeItem('me');
+		document.cookie = `i=; domain=.${host}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+		location.href = '/';
+	}
+
 	/**
 	 * Initialize MiOS (boot)
 	 * @param callback A function that call when initialized
@@ -209,7 +214,7 @@ export default class MiOS extends EventEmitter {
 			.then(res => {
 				// When failed to authenticate user
 				if (res.status !== 200) {
-					return signout();
+					return this.signout();
 				}
 
 				// Parse response

src/web/app/common/scripts/signout.ts

-declare const _HOST_: string;
-
-export default () => {
-	localStorage.removeItem('me');
-	document.cookie = `i=; domain=.${_HOST_}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-	location.href = '/';
-};

src/web/app/common/scripts/streaming/home-stream-manager.ts

 import StreamManager from './stream-manager';
 import Connection from './home-stream';
+import MiOS from '../../mios';
 
 export default class HomeStreamManager extends StreamManager<Connection> {
 	private me;
+	private os: MiOS;
 
-	constructor(me) {
+	constructor(os: MiOS, me) {
 		super();
 
 		this.me = me;
+		this.os = os;
 	}
 
 	public getConnection() {
 		if (this.connection == null) {
-			this.connection = new Connection(this.me);
+			this.connection = new Connection(this.os, this.me);
 		}
 
 		return this.connection;

src/web/app/common/scripts/streaming/home-stream.ts

 import Stream from './stream';
-import signout from '../signout';
+import MiOS from '../../mios';
 
 /**
  * Home stream connection
  */
 export default class Connection extends Stream {
-	constructor(me) {
+	constructor(os: MiOS, me) {
 		super('', {
 			i: me.token
 		});
@@ -25,7 +25,7 @@ export default class Connection extends Stream {
 		// このままではAPIが利用できないので強制的にサインアウトさせる
 		this.on('my_token_regenerated', () => {
 			alert('%i18n:common.my-token-regenerated%');
-			signout();
+			os.signout();
 		});
 	}
 }

src/web/app/common/scripts/streaming/stream-manager.ts

@@ -23,6 +23,14 @@ export default abstract class StreamManager<T extends Connection> extends EventE
 			this.emit('disconnected');
 		} else {
 			this.emit('connected', this._connection);
+
+			this._connection.on('_connected_', () => {
+				this.emit('_connected_');
+			});
+
+			this._connection.on('_disconnected_', () => {
+				this.emit('_disconnected_');
+			});
 		}
 	}
 
@@ -37,6 +45,11 @@ export default abstract class StreamManager<T extends Connection> extends EventE
 		return this._connection != null;
 	}
 
+	public get state(): string {
+		if (!this.hasConnection) return 'no-connection';
+		return this._connection.state;
+	}
+
 	/**
 	 * コネクションを要求します
 	 */

src/web/app/common/scripts/streaming/stream.ts

-declare const _API_URL_: string;
-
 import { EventEmitter } from 'eventemitter3';
 import * as ReconnectingWebsocket from 'reconnecting-websocket';
+import { apiUrl } from '../../../config';
 
 /**
  * Misskey stream connection
  */
 export default class Connection extends EventEmitter {
-	private state: string;
+	public state: string;
 	private buffer: any[];
 	private socket: ReconnectingWebsocket;
 
@@ -25,7 +24,7 @@ export default class Connection extends EventEmitter {
 		this.state = 'initializing';
 		this.buffer = [];
 
-		const host = _API_URL_.replace('http', 'ws');
+		const host = apiUrl.replace('http', 'ws');
 		const query = params
 			? Object.keys(params)
 				.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
@@ -58,7 +57,7 @@ export default class Connection extends EventEmitter {
 	 */
 	private onClose() {
 		this.state = 'reconnecting';
-		this.emit('_closed_');
+		this.emit('_disconnected_');
 	}
 
 	/**

src/web/app/common/views/components/stream-indicator.vue

 <template>
-<div class="mk-stream-indicator" v-if="stream">
+<div class="mk-stream-indicator">
 	<p v-if=" stream.state == 'initializing' ">
 		%fa:spinner .pulse%
 		<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
@@ -20,16 +20,14 @@ import Vue from 'vue';
 import * as anime from 'animejs';
 
 export default Vue.extend({
-	data() {
-		return {
-			stream: null
-		};
+	computed: {
+		stream() {
+			return (this as any).os.stream;
+		}
 	},
 	created() {
-		this.stream = (this as any).os.stream.borrow();
-
-		(this as any).os.stream.on('connected', this.onConnected);
-		(this as any).os.stream.on('disconnected', this.onDisconnected);
+		(this as any).os.stream.on('_connected_', this.onConnected);
+		(this as any).os.stream.on('_disconnected_', this.onDisconnected);
 
 		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
@@ -38,13 +36,11 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		(this as any).os.stream.off('connected', this.onConnected);
-		(this as any).os.stream.off('disconnected', this.onDisconnected);
+		(this as any).os.stream.off('_connected_', this.onConnected);
+		(this as any).os.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
 		onConnected() {
-			this.stream = (this as any).os.stream.borrow();
-
 			setTimeout(() => {
 				anime({
 					targets: this.$el,
@@ -55,8 +51,6 @@ export default Vue.extend({
 			}, 1000);
 		},
 		onDisconnected() {
-			this.stream = null;
-
 			anime({
 				targets: this.$el,
 				opacity: 1,

src/web/app/desktop/views/components/ui.header.account.vue

@@ -37,13 +37,11 @@ import Vue from 'vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
-import signout from '../../../common/scripts/signout';
 
 export default Vue.extend({
 	data() {
 		return {
-			isOpen: false,
-			signout
+			isOpen: false
 		};
 	},
 	beforeDestroy() {
@@ -77,6 +75,9 @@ export default Vue.extend({
 		settings() {
 			this.close();
 			(this as any).os.new(MkSettingsWindow);
+		},
+		signout() {
+			(this as any).os.signout();
 		}
 	}
 });