Merge pull request #131 from skychatorg/dev/7ph

Multi fixes & improvements

.env.json.template

@@ -6,6 +6,7 @@
     "users_passwords_salt": "$SALT",
     "users_token_salt": "$SALT",
     "youtube_api_key": "",
+    "google_analytics_id": "",
     "op": [],
     "op_passcode": "$PASSCODE",
     "email_transport": {

README.md

@@ -4,40 +4,22 @@
 
 # SkyChat
 
-Virtual cinema platform. Setup your own private screenings and watch movies, youtube videos, twitch streams or music with your friends/colleagues/family!
+1. [Overview](#overview)
+2. [Install it](#how-to-install)
+3. [Customize it](#customize)
 
-I am currently setting up a live demonstration server with bots that auto-play youtube playlists to make it feel "alive", but in the meanwhile you can [check an empty demo](https://skychat.benjaminraymond.com/), without support for playing youtube videos.
 
-1. [Why the SkyChat?](#why-the-skychat)
-2. [Overview](#overview)
-3. [Install it](#how-to-install)
-4. [Customize it](#customize)
-
-
-## Why the SkyChat?
-
-Here is what makes the SkyChat unique compared to the other entertainment platforms:
-
-~ **Enjoy**
-
-Enjoy a well-designed user experience. Building the perfect user experience is the key to ensure people continue using an application in the long run, this is why the SkyChat is the result of a long lasting and iterative work to polish it.
-
-~ **Connect**
-
-You can see each other cursor users moving around the screen, which makes people feel connected to each other. (This can be disabled if it is not your thing though 😉)
-
-~ **Engage**
-
-How? With entertainment and customization plugins. Lots of them. Here are some examples of such features, which can be enabled/disabled in the configuration:
-- Virtual money with mini-games (racing game, casino roulette)
-- Styling customization for usernames and messages
-- Long-term activity is rewarded with experience points (XP) and ranks
-- Custom profile pictures
+## Overview
 
+The SkyChat:
+- 📺 Can play medias in a shared synchronized player
+- 💻 Is trivial to install and configure
+- 🔥 Provides a polished and satisfying UI
+- ⚽ Provides entertaining features: Live cursor visualization, Casino roulette, cursor-based football..
+- 🔒 Provides privacy and security: Admin double auth, log fuzzing, shadow ban, TOR detector, ..
 
-## Overview
 
-Here is what it looks like:
+When multichannel is enabled, here is what it looks like:
 ![overall-screenshot](./doc/screenshot.png)
 
 
@@ -100,6 +82,7 @@ By default, the application will be listening to `localhost:8080` and assume it
 | users_passwords_salt | string | "$RANDOM_SALT" | Password salt. |
 | users_token_salt     | string | "$RANDOM_SALT" | Token salt. |
 | youtube_api_key      | string | "" | [Youtube api key](#setup-youtube) |
+| google_analytics_id  | string | "" | [Optional google analytics ID](https://analytics.google.com/analytics/web) |
 | op                       | string[] | [] | OP usernames. OP usernames can use the /setright command. |
 | op_passcode              | string? | "$RANDOM_PASSCODE" | OP passcode. Activate your OP session with `/op $op_passcode` |
 | email_transport          | nodemailer.JSONTransport | {"sendmail": true,"newline": "unix","path": "/usr/sbin/sendmail"} | Value given to [nodemailer.createTransport](https://nodemailer.com/about/) to initialize the mailer |

app/client/css/styles.scss

@@ -117,6 +117,11 @@ body {
     max-height: 80px;
 }
 
+.skychat-risibank-sticker > img {
+    max-width: 100px;
+    max-height: 100px;
+}
+
 .skychat-image {
     img {
         max-width: 100px;

app/client/src/SkyChatClient.js

@@ -21,7 +21,7 @@ export class SkyChatClient extends EventEmitter {
         this.webSocket.addEventListener('open', this.onWebSocketConnect.bind(this));
         this.webSocket.addEventListener('message', this.onWebSocketMessage.bind(this));
         this.webSocket.addEventListener('close', this.onWebSocketClose.bind(this));
-        this.store.commit('SET_CONNECTION_STATE', WebSocket.CONNECTING);
+        this.store.commit('Main/SET_CONNECTION_STATE', WebSocket.CONNECTING);
     }
 
     /**
@@ -105,14 +105,14 @@ export class SkyChatClient extends EventEmitter {
      * When receiving config object from server
      */
     onConfig(config) {
-        this.store.commit('SET_CONFIG', config);
+        this.store.commit('Main/SET_CONFIG', config);
     }
 
     /**
      * When receiving the room list
      */
     onRoomList(rooms) {
-        this.store.commit('SET_ROOM_LIST', rooms);
+        this.store.commit('Main/SET_ROOM_LIST', rooms);
     }
 
     /**
@@ -125,7 +125,7 @@ export class SkyChatClient extends EventEmitter {
         }
         this.lastPingDate = new Date();
         setTimeout(this.sendPing.bind(this), SkyChatClient.PING_INTERVAL_MS);
-        this.store.commit('SET_CONNECTION_STATE', WebSocket.OPEN);
+        this.store.commit('Main/SET_CONNECTION_STATE', WebSocket.OPEN);
         this.firstConnection = false;
     }
 
@@ -150,7 +150,7 @@ export class SkyChatClient extends EventEmitter {
      *
      */
     onWebSocketClose(event) {
-        this.store.commit('SET_CONNECTION_STATE', WebSocket.CLOSED);
+        this.store.commit('Main/SET_CONNECTION_STATE', WebSocket.CLOSED);
         if (event.code === 4403) {
             new Noty({
                 type: 'error',
@@ -334,7 +334,7 @@ export class SkyChatClient extends EventEmitter {
      * @param roomId
      */
     onJoinRoom(roomId) {
-        this.store.commit('SET_CURRENT_ROOM', roomId);
+        this.store.commit('Main/SET_CURRENT_ROOM', roomId);
         if (roomId !== null) {
             this.sendMessage('/messagehistory');
         }
@@ -345,8 +345,8 @@ export class SkyChatClient extends EventEmitter {
      * @param message
      */
     onMessage(message) {
-        this.store.commit('NEW_MESSAGE', message);
-        if (this.store.state.user.right >= 0 && this.store.state.focused) {
+        this.store.commit('Main/NEW_MESSAGE', message);
+        if (this.store.state.Main.user.right >= 0 && this.store.state.focused) {
             this.notifySeenMessage(message.id);
         }
     }
@@ -356,8 +356,8 @@ export class SkyChatClient extends EventEmitter {
      * @param messages
      */
     onMessages(messages) {
-        this.store.commit('NEW_MESSAGES', messages);
-        if (this.store.state.user.right >= 0 && this.store.state.focused && messages.length > 0) {
+        this.store.commit('Main/NEW_MESSAGES', messages);
+        if (this.store.state.Main.user.right >= 0 && this.store.state.focused && messages.length > 0) {
             this.notifySeenMessage(messages[messages.length - 1].id);
         }
     }
@@ -375,128 +375,128 @@ export class SkyChatClient extends EventEmitter {
      * @param privateMessage
      */
     onPrivateMessage(privateMessage) {
-        this.store.commit('NEW_PRIVATE_MESSAGE', privateMessage);
+        this.store.commit('Main/NEW_PRIVATE_MESSAGE', privateMessage);
     }
 
     /**
      *
      * @param message
      */
     onMessageEdit(message) {
-        this.store.commit('MESSAGE_EDIT', message);
+        this.store.commit('Main/MESSAGE_EDIT', message);
     }
 
     /**
      *
      * @param data
      */
     onMessageSeen(data) {
-        this.store.commit('MESSAGE_SEEN', data);
+        this.store.commit('Main/MESSAGE_SEEN', data);
     }
 
     /**
      *
      * @param user
      */
     onSetUser(user) {
-        this.store.commit('SET_USER', user);
+        this.store.commit('Main/SET_USER', user);
     }
 
     /**
      *
      * @param user
      */
     onSetOP(op) {
-        this.store.commit('SET_OP', op);
+        this.store.commit('Main/SET_OP', op);
     }
 
     /**
      *
      * @param users
      */
     onConnectedList(users) {
-        this.store.commit('SET_CONNECTED_LIST', users);
+        this.store.commit('Main/SET_CONNECTED_LIST', users);
     }
 
     /**
      *
      * @param playerState
      */
     onPlayerSync(playerState) {
-        this.store.commit('SET_PLAYER_STATE', playerState);
+        this.store.commit('Main/SET_PLAYER_STATE', playerState);
     }
 
     /**
      *
      * @param polls
      */
     onPoll(poll) {
-        this.store.commit('SET_POLL', poll);
+        this.store.commit('Main/SET_POLL', poll);
     }
 
     /**
      *
      * @param users
      */
     onTypingList(users) {
-        this.store.commit('SET_TYPING_LIST', users);
+        this.store.commit('Main/SET_TYPING_LIST', users);
     }
 
     /**
      *
      */
     onCursor(cursor) {
-        this.store.commit('NEW_CURSOR', cursor);
+        this.store.commit('Main/NEW_CURSOR', cursor);
     }
 
     /**
      *
      */
     onRoll(roll) {
-        this.store.commit("SET_ROLL_STATE", roll.state);
+        this.store.commit("Main/SET_ROLL_STATE", roll.state);
     }
 
     /**
      * 
      */
     onFileList(files) {
-        this.store.commit("SET_FILE_LIST", files)
+        this.store.commit("Main/SET_FILE_LIST", files)
     }
 
     /**
      * 
      */
     onFileContent(data) {
-        this.store.commit("SET_FILE_CONTENT", data);
+        this.store.commit("Main/SET_FILE_CONTENT", data);
     }
 
     /**
      *
      */
     onGallery(gallery) {
-        this.store.commit("SET_GALLERY", gallery);
+        this.store.commit("Main/SET_GALLERY", gallery);
     }
 
     /**
      *
      */
     onGallerySearchResults(gallerySearchResults) {
-        this.store.commit("SET_GALLERY_SEARCH_RESULTS", gallerySearchResults);
+        this.store.commit("Main/SET_GALLERY_SEARCH_RESULTS", gallerySearchResults);
     }
 
     /**
      *
      */
     onPlayerApiSearchResults(items) {
-        this.store.commit("SET_PLAYER_API_SEARCH_RESULTS", items);
+        this.store.commit("Main/SET_PLAYER_API_SEARCH_RESULTS", items);
     }
 
     onPlayerChannels(channels) {
-        this.store.commit('SET_PLAYER_CHANNELS', channels);
+        this.store.commit('Main/SET_PLAYER_CHANNELS', channels);
     }
 
     onPlayerChannel(channelId) {
-        this.store.commit('SET_PLAYER_CHANNEL', channelId);
+        this.store.commit('Main/SET_PLAYER_CHANNEL', channelId);
     }
 
     /**

app/client/src/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import SkychatApp from "./vue/SkychatApp.vue";
 import { SkyChatClient } from "./SkyChatClient";
-import store from "./store";
+import store from "./vue/store";
 import { AudioRecorder } from "./AudioRecorder";
 import VModal from 'vue-js-modal';
 import Mousetrap from "mousetrap";
@@ -19,7 +19,7 @@ Vue.use(VModal, {
     }
 });
 
-store.commit('LOAD_LOCALSTORAGE');
+store.commit('Main/LOAD_LOCALSTORAGE');
 
 const client = new SkyChatClient(store);
 
@@ -57,21 +57,21 @@ resize();
 
 // Handle document title update when new messages arrive
 window.addEventListener('blur', () => {
-    store.commit('BLUR');
+    store.commit('Main/BLUR');
 });
 
 window.addEventListener('focus', () => {
     if (store.state.lastMissedMessage) {
         client.notifySeenMessage(store.state.lastMissedMessage.id);
     }
-    store.commit('FOCUS');
+    store.commit('Main/FOCUS');
 });
 setInterval(() => {
 
     // In case the title is not currently blinking, just update it
     if (! store.state.documentTitleBlinking) {
-        if (document.title !== store.state.documentTitle) {
-            document.title = store.state.documentTitle;
+        if (document.title !== store.state.Main.documentTitle) {
+            document.title = store.state.Main.documentTitle;
         }
         return;
     }