From 091eee03633cf9306fe2a17e3df2f36176ec27f6 Mon Sep 17 00:00:00 2001
From: Travis Shivers <ttshivers@gmail.com>
Date: Tue, 21 Jul 2020 16:28:48 -0500
Subject: [PATCH] Dynamic runtime config

---
 .gitignore                               |  2 +-
 Dockerfile                               |  9 ++--
 config/clisaveconfig.js                  |  6 +++
 config/defaults.js                       |  2 -
 config/index.js                          | 66 ++++++++++++++----------
 docker-entrypoint.sh                     |  4 ++
 settings.json                            | 10 ++++
 src/App.vue                              | 23 +++++----
 src/components/sidebars/rightsidebar.vue |  2 -
 src/main.js                              |  3 +-
 src/store/actions.js                     |  7 +++
 src/store/getters.js                     |  3 --
 src/store/modules/plex/getters.js        |  5 +-
 src/store/modules/plexservers/getters.js |  5 +-
 src/store/mutations.js                   |  4 ++
 src/store/state.js                       |  2 +-
 vue.config.js                            |  7 ++-
 17 files changed, 99 insertions(+), 61 deletions(-)
 create mode 100755 config/clisaveconfig.js
 create mode 100755 docker-entrypoint.sh
 create mode 100644 settings.json

diff --git a/.gitignore b/.gitignore
index e6b45283..33e785af 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,4 @@ db.sqlite
 # Optional npm cache directory
 .npm
 
-settings.json
\ No newline at end of file
+public/config.json
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index c6a093db..226ebce7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -5,14 +5,13 @@ COPY package*.json ./
 RUN npm install
 COPY . .
 
-
 ARG SERVERS='{"name":"Local Server","location":"Local","url":"/","image":"synclounge-white.png"}'
 RUN npm run build
 
 # production environment
 FROM node:current-alpine as production-stage
 WORKDIR /app
-COPY --from=build-stage /app/dist .
-RUN npm install -g syncloungesocket@2.0.5
-ARG BASE_URL
-ENTRYPOINT ["syncloungesocket", "--static_path", "."]
+COPY config config
+COPY --from=build-stage /app/dist dist
+RUN npm install -g syncloungesocket@2.0.5 nconf fs
+ENTRYPOINT ["./docker-entrypoint.sh"]
diff --git a/config/clisaveconfig.js b/config/clisaveconfig.js
new file mode 100755
index 00000000..e9c5ba32
--- /dev/null
+++ b/config/clisaveconfig.js
@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+const saveConfig = require('./index');
+
+const config = saveConfig('dist/config.json');
+console.log(config);
diff --git a/config/defaults.js b/config/defaults.js
index b9512287..e1a15cbe 100644
--- a/config/defaults.js
+++ b/config/defaults.js
@@ -1,6 +1,4 @@
 const defaults = {
-  base_url: '/',
-
   servers: [
     {
       name: 'SyncLounge AU1',
diff --git a/config/index.js b/config/index.js
index 45382948..c7d48dbb 100644
--- a/config/index.js
+++ b/config/index.js
@@ -1,33 +1,47 @@
 const nconf = require('nconf');
+const fs = require('fs');
+
 const defaults = require('./defaults');
 
-nconf
-  .argv({
-    separator: '__',
-    parseValues: true,
-  })
-  .env({
-    separator: '__',
-    lowerCase: true,
-    parseValues: true,
-    whitelist: Object.keys(defaults).concat([
-      'autojoin__server',
-      'autojoin__room',
-      'autojoin__password',
-      'authentication__mechanism',
-      'authentication__type',
-      'authentication__authorized',
+// Parses, saves, and returns the config
+const saveConfig = (file) => {
+  nconf
+    .argv({
+      separator: '__',
+      parseValues: true,
+    })
+    .env({
+      separator: '__',
+      lowerCase: true,
+      parseValues: true,
+      whitelist: Object.keys(defaults).concat([
+        'autojoin__server',
+        'autojoin__room',
+        'autojoin__password',
+        'authentication__mechanism',
+        'authentication__type',
+        'authentication__authorized',
 
-      'custom_server__name',
-      'custom_server__location',
-      'custom_server__url',
-      'custom_server__image',
+        'custom_server__name',
+        'custom_server__location',
+        'custom_server__url',
+        'custom_server__image',
 
-      'default_slplayer_quality',
-    ]),
-  })
-  .file({ file: 'settings.json' });
+        'default_slplayer_quality',
+      ]),
+    })
+    .file({ file });
 
-nconf.defaults(defaults);
+  nconf.defaults(defaults);
 
-module.exports = nconf;
+  // Filter out the weird stuff
+  const {
+    type, $0: firstArg, _: command, modern, ...config
+  } = nconf.get();
+
+  fs.writeFileSync(file, JSON.stringify(config));
+
+  return config;
+};
+
+module.exports = saveConfig;
diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
new file mode 100755
index 00000000..2a663b91
--- /dev/null
+++ b/docker-entrypoint.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+echo "Testtt"
+./config/clisaveconfig.js
+exec syncloungesocket --static_path dist
\ No newline at end of file
diff --git a/settings.json b/settings.json
new file mode 100644
index 00000000..6f985c0e
--- /dev/null
+++ b/settings.json
@@ -0,0 +1,10 @@
+{
+  "servers": [
+    {
+      "name": "Custom Server 1",
+      "location": "Custom Location",
+      "url": "http://vps.conicaw.me:9999",
+      "image": "https://mycustomserver.com/logo.png"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5f773af5..aa8bd65e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <leftsidebar />
-    <rightsidebar />
+    <rightsidebar v-if="IS_IN_ROOM" />
 
     <v-app-bar
       app
@@ -108,7 +108,8 @@
         fluid
       >
         <v-container
-          v-if="!IS_DONE_FETCHING_DEVICES && $route.matched.some((record) => record.meta.protected)"
+          v-if="!GET_CONFIG
+            || !IS_DONE_FETCHING_DEVICES && $route.matched.some((record) => record.meta.protected)"
           fill-height
         >
           <v-row
@@ -292,15 +293,8 @@ export default {
     },
   },
 
-  mounted() {
-    fscreen.addEventListener('fullscreenchange', () => {
-      const isFullscreen = fscreen.fullscreenElement !== null;
-      this.appIsFullscreen = isFullscreen;
-      document.body.classList.toggle('is-fullscreen', isFullscreen);
-    });
-  },
-
   async created() {
+    await this.FETCH_CONFIG();
     if (this.IS_AUTHENTICATED) {
       // Kick off a bunch of requests that we need for later
       try {
@@ -319,12 +313,21 @@ export default {
     }
   },
 
+  mounted() {
+    fscreen.addEventListener('fullscreenchange', () => {
+      const isFullscreen = fscreen.fullscreenElement !== null;
+      this.appIsFullscreen = isFullscreen;
+      document.body.classList.toggle('is-fullscreen', isFullscreen);
+    });
+  },
+
   methods: {
     ...mapActions([
       'SET_LEFT_SIDEBAR_OPEN',
       'SET_RIGHT_SIDEBAR_OPEN',
       'TOGGLE_RIGHT_SIDEBAR_OPEN',
       'DISPLAY_NOTIFICATION',
+      'FETCH_CONFIG',
     ]),
 
     ...mapActions('plex', [
diff --git a/src/components/sidebars/rightsidebar.vue b/src/components/sidebars/rightsidebar.vue
index 810c7db4..a42891bd 100644
--- a/src/components/sidebars/rightsidebar.vue
+++ b/src/components/sidebars/rightsidebar.vue
@@ -1,6 +1,5 @@
 <template>
   <v-navigation-drawer
-    v-if="IS_IN_ROOM"
     :value="isRightSidebarOpen"
     style="z-index: 6"
     app
@@ -268,7 +267,6 @@ export default {
       'GET_HOST_USER',
       'GET_HOST_ID',
       'AM_I_HOST',
-      'IS_IN_ROOM',
       'GET_SOCKET_ID',
     ]),
 
diff --git a/src/main.js b/src/main.js
index ffad0c30..4dffcff5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,8 @@ Vue.use(VueClipboard);
 Vue.config.productionTip = false;
 
 router.beforeEach((to, from, next) => {
-  if (!store.getters['plex/IS_AUTHENTICATED'] && to.matched.some((record) => record.meta.requiresAuth)) {
+  if (store.getters.GET_CONFIG && !store.getters['plex/IS_AUTHENTICATED']
+    && to.matched.some((record) => record.meta.requiresAuth)) {
     if (to.matched.some((record) => record.meta.redirectAfterAuth)) {
       next({
         name: 'Signin',
diff --git a/src/store/actions.js b/src/store/actions.js
index 62952777..284f3fb6 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,3 +1,5 @@
+import { fetchJson } from '@/utils/fetchutils';
+
 export default {
   SET_LEFT_SIDEBAR_OPEN: ({ commit }, open) => {
     commit('SET_LEFT_SIDEBAR_OPEN', open);
@@ -15,4 +17,9 @@ export default {
     commit('SET_SNACKBAR_MESSAGE', message);
     commit('SET_SNACKBAR_OPEN', true);
   },
+
+  FETCH_CONFIG: async ({ commit }) => {
+    const config = await fetchJson('config.json');
+    commit('SET_CONFIGURATION', config);
+  },
 };
diff --git a/src/store/getters.js b/src/store/getters.js
index 0dd7001c..d72e0fac 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -3,9 +3,6 @@ export default {
   GET_UP_NEXT_TRIGGERED: (state) => state.upNextTriggered,
   GET_UP_NEXT_POST_PLAY_DATA: (state) => state.upNextPostPlayData,
   GET_CONFIG: (state) => state.configuration,
-  GET_AUTHENTICATION: (state) => state.configuration.authentication,
-  GET_CONFIGURATION_FETCHED: (state) => state.configurationFectched,
-  GET_CONFIGURATION_FETCHED_ERROR: (state) => state.configurationFetchedError,
   GET_ACTIVE_METADATA: (state) => state.activeMetadata,
   GET_SNACKBAR_MESSAGE: (state) => state.snackbarMessage,
   GET_SNACKBAR_OPEN: (state) => state.snackbarOpen,
diff --git a/src/store/modules/plex/getters.js b/src/store/modules/plex/getters.js
index c7ae4500..f1e3e9bd 100644
--- a/src/store/modules/plex/getters.js
+++ b/src/store/modules/plex/getters.js
@@ -80,15 +80,14 @@ export default {
     || getters.IS_PLEX_USER_AUTHORIZED,
 
   IS_PLEX_USER_AUTHORIZED: (state, getters, rootState, rootGetters) => rootGetters
-    .GET_AUTHENTICATION.type
-  && rootGetters.GET_AUTHENTICATION.type.includes('user')
+    .GET_CONFIG?.authentication?.type.includes('user')
     && intersection(
       [getters.GET_PLEX_USER.username, getters.GET_PLEX_USER.email],
       rootGetters.GET_AUTHENTICATION.authorized,
     ).length > 0,
 
   IS_AUTHENTICATION_TYPE_NONE: (state, getters, rootState, rootGetters) => rootGetters
-    .GET_AUTHENTICATION.mechanism === 'none',
+    .GET_CONFIG?.authentication.mechanism === 'none',
 
   GET_PLEX_AUTH_TOKEN: (state) => state.plexAuthToken,
   GET_CLIENT_IDENTIFIER: (state) => state.clientIdentifier,
diff --git a/src/store/modules/plexservers/getters.js b/src/store/modules/plexservers/getters.js
index 9d89ea93..54325073 100644
--- a/src/store/modules/plexservers/getters.js
+++ b/src/store/modules/plexservers/getters.js
@@ -24,10 +24,9 @@ export default {
   GET_LAST_SERVER: (state, getters) => getters.GET_PLEX_SERVER(getters.GET_LAST_SERVER_ID),
 
   DOES_USER_HAVE_AUTHORIZED_SERVER: (state, getters, rootState, rootGetters) => rootGetters
-    .GET_AUTHENTICATION.type
-   && rootGetters.GET_AUTHENTICATION.type.includes('server')
+    .GET_CONFIG?.authentication?.type.includes('server')
   && intersection(
-    getters.GET_PLEX_SERVER_IDS, rootGetters.GET_AUTHENTICATION.authorized,
+    getters.GET_PLEX_SERVER_IDS, rootGetters.GET_CONFIG.authentication.authorized,
   ).length > 0,
 
   GET_MEDIA_IMAGE_URL: (state, getters, rootState, rootGetters) => ({
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 62a52d53..22aa01d9 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -30,4 +30,8 @@ export default {
   SET_NAVIGATE_TO_PLAYER: (state, navigate) => {
     state.navigateToPlayer = navigate;
   },
+
+  SET_CONFIGURATION: (state, configuration) => {
+    state.configuration = configuration;
+  },
 };
diff --git a/src/store/state.js b/src/store/state.js
index 8288da7c..0f89bf4d 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -1,6 +1,6 @@
 const state = () => ({
   background: null,
-  configuration: JSON.parse(process.env.VUE_APP_CONFIGURATION),
+  configuration: null,
 
   isLeftSidebarOpen: false,
   isRightSidebarOpen: false,
diff --git a/vue.config.js b/vue.config.js
index bfd12569..dc850c7e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,11 +1,11 @@
 const path = require('path');
 const git = require('git-rev-sync');
 
-const config = require('./config');
+const saveConfig = require('./config');
 
-console.log(config.get());
+const config = saveConfig('public/config.json');
+console.log(config);
 
-process.env.VUE_APP_CONFIGURATION = JSON.stringify(config.get());
 process.env.VUE_APP_VERSION = require('./package.json').version;
 
 try {
@@ -18,7 +18,6 @@ try {
 }
 
 module.exports = {
-  publicPath: config.get('base_url'),
   lintOnSave: process.env.NODE_ENV !== 'production',
   productionSourceMap: false,
   transpileDependencies: ['vuetify'],