Merge branch 'master' of github.com:m1k1o/neko into dev

.docker/files/base/xorg.conf

@@ -56,6 +56,8 @@ Section "Monitor"
   # 800x600 @ 60.00 Hz (GTF) hsync: 37.32 kHz; pclk: 38.22 MHz
   Modeline "800x600_60.00" 38.22 800 832 912 1024 600 601 604 622 -HSync +Vsync
   
+  # 1920x1080 @ 60.00 Hz (GTF) hsync: 67.08 kHz; pclk: 172.80 MHz
+  Modeline "1920x1080_60.00" 172.80 1920 2040 2248 2576 1080 1081 1084 1118 -HSync +Vsync
   # 1920x1080 @ 30.00 Hz (GTF) hsync: 32.97 kHz; pclk: 80.18 MHz
   Modeline "1920x1080_30.00" 80.18 1920 1984 2176 2432 1080 1081 1084 1099 -HSync +Vsync
   # 1152x648 @ 30.00 Hz (GTF) hsync: 19.80 kHz; pclk: 26.93 MHz

.docker/files/chromium/supervisord.conf

@@ -2,7 +2,7 @@
 # https://peter.sh/experiments/chromium-command-line-switches/ --no-sandbox 
 [program:chromium]
 environment=HOME="/home/%(ENV_USER)s",USER="%(ENV_USER)s",DISPLAY="%(ENV_DISPLAY)s"
-command=/usr/lib/chromium/chromium --window-position=0,0 --display=%(ENV_DISPLAY)s --start-maximized --bwsi --test-type --force-dark-mode --disable-file-system --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage
+command=/usr/lib/chromium/chromium --window-position=0,0 --display=%(ENV_DISPLAY)s --start-maximized --bwsi --test-type --force-dark-mode --disable-file-system --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage %(ENV_START_URL)s
 autorestart=true
 priority=800
 user=%(ENV_USER)s

client/src/components/settings.vue

@@ -39,11 +39,7 @@
         <span>{{ $t('setting.keyboard_layout') }}</span>
         <label class="select">
           <select v-model="keyboard_layout">
-            <option
+            <option v-for="(name, code) in keyboard_layouts_list" :key="code" :value="code">{{ name }}</option>
-              v-for="(name, code) in keyboard_layouts_list"
-              :key="code"
-              :value="code"
-            >{{ name }}</option>
           </select>
           <span />
         </label>
@@ -211,20 +207,33 @@
 
         .select {
           max-width: 120px;
+          text-align: right;
+
+          select:hover {
+            border: 1px solid $background-secondary;
+          }
 
           select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
             display: block;
             width: 100%;
             max-width: 100%;
-            padding: 4px;
+            height: 30px;
+            text-align: right;
+            padding: 0 5px 0 10px;
             margin: 0;
             line-height: 30px;
             font-weight: bold;
-            border: 0;
+            font-size: 12px;
-            border-radius: 12px;
+            text-overflow: ellipsis;
-
+            border: 1px solid transparent;
-            color: black;
+            border-radius: 5px;
-            background-color: $style-primary;
+            color: white;
+            background-color: $background-tertiary;
+            font-weight: lighter;
+            cursor: pointer;
 
             option {
               font-weight: normal;

client/src/components/video.vue

@@ -29,6 +29,12 @@
       <ul v-if="!fullscreen" class="video-menu top">
         <li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
         <li v-if="admin"><i @click.stop.prevent="onResolution" class="fas fa-desktop"></i></li>
+        <li class="request-control">
+          <i
+            :class="[hosted && !hosting ? 'disabled' : '', !hosted && !hosting ? 'faded' : '', 'fas', 'fa-keyboard']"
+            @click.stop.prevent="toggleControl"
+          />
+        </li>
       </ul>
       <ul v-if="!fullscreen" class="video-menu bottom">
         <li v-if="hosting && !clipboard_available"><i @click.stop.prevent="onClipboard" class="fas fa-clipboard"></i></li>
@@ -75,6 +81,24 @@
             text-align: center;
             color: rgba($color: #fff, $alpha: 0.6);
             cursor: pointer;
+
+            &.faded {
+              color: rgba($color: $text-normal, $alpha: 0.4);
+            }
+
+            &.disabled {
+              color: rgba($color: $style-error, $alpha: 0.4);
+            }
+          }
+
+          &.request-control {
+            display: none;
+          }
+
+          @media (max-width: 768px) {
+            &.request-control {
+              display: inline-block;
+            }
           }
 
           &:last-child {
@@ -197,6 +221,10 @@
       return this.$accessor.remote.hosting
     }
 
+    get hosted() {
+      return this.$accessor.remote.hosted
+    }
+
     get volume() {
       return this.$accessor.video.volume
     }
@@ -350,7 +378,7 @@
         this.$accessor.video.setPlayable(false)
       })
 
-      this._video.addEventListener('error', event => {
+      this._video.addEventListener('error', (event) => {
         this.$log.error(event.error)
         this.$accessor.video.setPlayable(false)
       })
@@ -394,7 +422,7 @@
           .then(() => {
             this.onResise()
           })
-          .catch(err => this.$log.error)
+          .catch((err) => this.$log.error)
       } catch (err) {
         this.$log.error(err)
       }
@@ -420,6 +448,14 @@
       }
     }
 
+    toggleControl() {
+      if (!this.playable) {
+        return
+      }
+
+      this.$accessor.remote.toggle()
+    }
+
     requestFullscreen() {
       this._player.requestFullscreen()
       this.onResise()
@@ -433,7 +469,7 @@
       if (this.hosting && this.clipboard_available && typeof navigator.clipboard.readText === 'function') {
         navigator.clipboard
           .readText()
-          .then(text => {
+          .then((text) => {
             if (this.clipboard !== text) {
               this.$accessor.remote.setClipboard(text)
               this.$accessor.remote.sendClipboard(text)

client/src/locale/en-us.ts

@@ -60,7 +60,7 @@ export const setting = {
   autoplay: 'Autoplay Video',
   ignore_emotes: 'Ignore Emotes',
   chat_sound: 'Play Chat Sound',
-  keyboard_layout: 'Change Keyboard Layout',
+  keyboard_layout: 'Keyboard Layout',
   broadcast_is_active: 'Broadcast Enabled',
   broadcast_url: 'RTMP url',
 }

docs/apache-proxypass-config.md

@@ -0,0 +1,60 @@
+# Using Apache for proxy pass and SSL
+
+After successfully installing and running neko, you might want to get rid of the port in the url, use DNS instead of IP address and also having SSL.
+This will remove the port from the URL and also enables HTTPS.
+To do this, you have to get running apache server. Now you can go into the ```/etc/apache2/sites-available``` folder and create new config file for example ```neko.conf```
+After creating new config file, you can use this example config and paste it in. Some thing might vary on your machine so read through and modify if needed.
+Bear in mind that your neko server doesn't have to run on the same computer as apache. They just have to be on the same network and then you replace localhost with correct internal IP.
+
+## Example apache config
+```apache
+<VirtualHost *:80>
+        # The ServerName directive sets the request scheme, hostname and port that
+        # the server uses to identify itself. This is used when creating
+        # redirection URLs. In the context of virtual hosts, the ServerName
+        # specifies what hostname must appear in the request's Host: header to
+        # match this virtual host. For the default virtual host (this file) this
+        # value is not decisive as it is used as a last resort host regardless.
+        # However, you must set it for any further virtual host explicitly.
+
+        # Paths of those modules might vary across different distros.
+        LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
+        LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
+        LoadModule proxy_wstunnel_module /usr/lib/apache2/modules/mod_proxy_wstunnel.so
+
+        ServerName example.com
+        ServerAlias www.example.com
+
+        ProxyRequests Off
+        ProxyPass / http://localhost:8080/
+        ProxyPassReverse / http://localhost:8080/
+
+        RewriteEngine on
+        RewriteCond %{HTTP:Upgrade} websocket [NC]
+        RewriteCond %{HTTP:Connection} upgrade [NC]
+        RewriteRule /ws(.*) "ws://localhost:8080/ws$1" [P,L]
+
+        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
+        # error, crit, alert, emerg.
+        # It is also possible to configure the loglevel for particular
+        # modules, e.g.
+        #LogLevel info ssl:warn
+
+        ErrorLog ${APACHE_LOG_DIR}/error.log
+        CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+        # For most configuration files from conf-available/, which are
+        # enabled or disabled at a global level, it is possible to
+        # include a line for only one particular virtual host. For example the
+        # following line enables the CGI configuration for this host only
+        # after it has been globally disabled with "a2disconf".
+        #Include conf-available/serve-cgi-bin.conf
+</VirtualHost>
+```
+
+After creating your new config file, just use ```sudo a2ensite neko.conf``` and then ```sudo systemctl reload apache2```
+
+# Enabling SSL
+
+If you want to use SSL for your apache configuration, you can install certbot and use it with ```sudo certbot```
+Then you can just select both ```example.com``` and ```www.example.com``` and apply. This will copy your ```neko.conf``` file and creates one for SSL.