SSl-ify video component #173

goodrobots · Apr 13, 2020 · 9a89a64 · 9a89a64
1 parent 6acfe4c
commit 9a89a64
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/src/components/modules/home/HomeModule.vue b/src/components/modules/home/HomeModule.vue
@@ -51,9 +51,6 @@ export default {
     hostname () {
       return window.location.hostname
     },
-    ssl () {
-      return (window.location.protocol == 'https:' ? true : false)
-    },
     topLogo () {
       if (this.isDark) {
         return this.publicPath + 'img/logos/maverick-logo-white.svg'

diff --git a/src/components/modules/video/VideoDrawer.vue b/src/components/modules/video/VideoDrawer.vue
@@ -16,7 +16,7 @@ v-navigation-drawer(app left clipped floating v-model="drawer" :color="topColor"
     v-list-item(v-for="stream in videostreams" :key="stream.key")
       template(v-slot:default="{ active }")
         v-list-item-action
-          v-switch(color='primary' v-model='stream.enabled')
+          v-switch(color='primary' v-model='stream.enabled' :disabled="!ssl")
         v-list-item-content
           v-list-item-title {{ stream.name }}
           v-list-item-subtitle {{ stream.webrtcEndpoint }}

diff --git a/src/components/modules/video/VideoModule.vue b/src/components/modules/video/VideoModule.vue
@@ -1,15 +1,32 @@
 <template lang='pug'>
-div
+v-content
   video-drawer
-  v-content
-    v-container(v-if="!Object.keys(videostreams).length")
-      v-card.mx-auto.mt-2
-        v-alert(border="left" outlined type="info")
-          span No Video Streams are defined.  Please define a video stream in <v-btn class="ma-2" :color="navColor+' darken-2'" small to='/config/video'>Config->Video</v-btn>
-    v-container(v-if="Object.keys(videostreams).length && !Object.keys(enabledStreams).length")
-      v-card.mx-auto.mt-2
-        v-alert(border="left" outlined type="info")
-          span There are no enabled Video Streams.  Please enable a stream in <v-btn class="ma-2" :color="navColor+' darken-2'" small @click.stop="toggleDrawer">Stream Control</v-btn>
+  v-container.fill-height
+    v-spacer
+    v-container
+      v-row(v-if="!ssl && !$store.state.core.sslState" align='center' justify='center')
+        v-col(xs='12' sm='12' md='6' lg='6' xl='4')
+          v-row(align='center' justify='center')
+            v-alert(type='warning' border='left' outlined dense) Maverick-Web is not setup to load over an encrypted SSL connection, which is required for the realtime Video component.  Please goto the homepage to setup SSL.
+          v-row(align='center' justify='center')
+            v-btn(color='primary' small to="/") Goto Homepage
+      v-row(v-if="!ssl && $store.state.core.sslState" align='center' justify='center')
+        v-col(xs='12' sm='12' md='6' lg='6' xl='4')
+          v-row(align='center' justify='center')
+            v-alert(type='warning' border='left' outlined dense) Maverick-Web is not loaded over an encrypted SSL connection, which is required for the realtime Video component.
+          v-row(align='center' justify='center')
+            v-btn(color='primary' small @click="gotoSsl()") Reload over SSL
+      v-row(v-else-if="!Object.keys(videostreams).length" align='center' justify='center')
+        v-col(xs='12' sm='12' md='6' lg='6' xl='4')
+          v-row(align='center' justify='center')
+            v-alert(border="left" outlined type="info")
+              span No Video Streams are defined.  Please define a video stream in <v-btn class="ma-2" :color="navColor+' darken-2'" small to='/config/video'>Config->Video</v-btn>
+      v-row(v-else-if="Object.keys(videostreams).length && !Object.keys(enabledStreams).length" align='center' justify='center')
+        v-col(xs='12' sm='12' md='6' lg='6' xl='4')
+          v-row(align='center' justify='center')
+            v-alert(border="left" outlined type="info")
+              span There are no enabled Video Streams.  Please enable a stream in <v-btn class="ma-2" :color="navColor+' darken-2'" small @click.stop="toggleDrawer">Stream Control</v-btn>
+      v-spacer
     v-container.pa-2(fluid)
         v-row(dense)
           v-col.px-4(v-for="stream in videostreams" :key='stream.key' v-if="stream.enabled" xs=12 sm=12 md=12 lg=6 xl=6)
@@ -98,6 +115,11 @@ export default {
   watch: {
   },
   mounted () {
+    // If website not loaded over ssl, hide the drawer
+    if (!this.ssl) {
+      // setTimeout(() => this.$store.commit('core/setNavDrawer', false), 500)
+    }
+    // Add a resize listener
     window.addEventListener('resize', () => {
       this.width = ((75 / 100) * window.innerWidth)
     })
@@ -134,6 +156,9 @@ export default {
         return Math.round(bitrate / 1000000) + ' M'
       }
     },
+    gotoSsl() {
+      window.location.href = `https://${window.location.hostname}/#/video`
+    },
     refWidth (el) {
       let width = null
       try {

diff --git a/src/plugins/core/CoreApi.js b/src/plugins/core/CoreApi.js
@@ -59,6 +59,9 @@ const plugin = {
         navDrawerEnable () {
           return this.$store.state.core.navDrawerEnable
         },
+        ssl () {
+          return (window.location.protocol == 'https:' ? true : false)
+        },
         topColor () {
           if (this.uiSettings.colorBg === true) {
             return (this.isDark) ? `${this.navColor} darken-3` : `${this.navColor} lighten-4`