Initial settings cleanup

package-lock.json

@@ -3212,6 +3212,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "define-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@@ -3371,9 +3376,9 @@
       }
     },
     "dlv": {
-      "version": "1.1.2",
+      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-xxD4VSH67GbRvSGUrckvha94RD7hjgOH7rqGxiytLpkaeMvixOHFZTGFK6EkIm3T761OVHT8ABHmGkq9gXgu6Q==",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
     "doctrine": {
@@ -8251,15 +8256,15 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.13.5",
+      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.5.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-4M90mfvLz6yRf2Dhzd+xPIE6b4xkI8nHMJhsSm9IlfG17g6wujrrm7+H1X8x52tC4cSNm6HmuhCUSNe6Hd5wfw==",
+      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
     "prettier-eslint": {
-      "version": "8.8.1",
+      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/prettier-eslint/-/prettier-eslint-8.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier-eslint/-/prettier-eslint-8.8.2.tgz",
-      "integrity": "sha512-8YMkJZnA+XVfEW6fPet05jpNmSQbD+Htbh/QyOxQcVf2GIUEZsnGP7ZScaM9Mq2Ra2261eCu60E7/TRIy9coXQ==",
+      "integrity": "sha512-2UzApPuxi2yRoyMlXMazgR6UcH9DKJhNgCviIwY3ixZ9THWSSrUww5vkiZ3C48WvpFl1M1y/oU63deSy1puWEA==",
       "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
@@ -8270,10 +8275,11 @@
         "lodash.merge": "^4.6.0",
         "loglevel-colored-level-prefix": "^1.0.0",
         "prettier": "^1.7.0",
-        "pretty-format": "^22.0.3",
+        "pretty-format": "^23.0.1",
         "require-relative": "^0.8.7",
         "typescript": "^2.5.1",
-        "typescript-eslint-parser": "^11.0.0"
+        "typescript-eslint-parser": "^16.0.0",
+        "vue-eslint-parser": "^2.0.2"
       }
     },
     "prettier-eslint-cli": {
@@ -8350,9 +8356,9 @@
       }
     },
     "pretty-format": {
-      "version": "22.4.3",
+      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-22.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz",
-      "integrity": "sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==",
+      "integrity": "sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==",
       "dev": true,
       "requires": {
         "ansi-regex": "^3.0.0",
@@ -9272,6 +9278,11 @@
         "rechoir": "^0.6.2"
       }
     },
+    "shvl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz",
+      "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig=="
+    },
     "sigmund": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -10106,21 +10117,13 @@
       "dev": true
     },
     "typescript-eslint-parser": {
-      "version": "11.0.0",
+      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint-parser/-/typescript-eslint-parser-11.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/typescript-eslint-parser/-/typescript-eslint-parser-16.0.1.tgz",
-      "integrity": "sha512-/fBHTBRBSorWQGKWOOjeMPkzd3o8cOPtFjTRwU5JLNGgVtmMa3KDkiw0R2n+H6ovo9y3OX30/5usm6YTqY44PQ==",
+      "integrity": "sha512-IKawLTu4A2xN3aN/cPLxvZ0bhxZHILGDKTZWvWNJ3sLNhJ3PjfMEDQmR2VMpdRPrmWOadgWXRwjLBzSA8AGsaQ==",
       "dev": true,
       "requires": {
         "lodash.unescape": "4.0.1",
-        "semver": "5.4.1"
+        "semver": "5.5.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.4.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==",
-          "dev": true
-        }
       }
     },
     "uglify-js": {
@@ -10921,6 +10924,15 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-2.5.0.tgz",
       "integrity": "sha512-5oJPOJySBgSgSzoeO+gZB/BbN/XsapgIF6tz34UwJqnGZMQurzIO3B4KIBf862gfc9ya+oduY5sSkq+5/oOilQ=="
     },
+    "vuex-persistedstate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-3.0.1.tgz",
+      "integrity": "sha512-2dH77+fIecAXO8GeJEXiYnC++gx48PFGUayB5d7rWrN3fblRCOHQoVnmu/VV9DXbHHJcJth/0W/ofl8vw12j1A==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.0"
+      }
+    },
     "walker": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",

package.json

@@ -30,6 +30,7 @@
     "vue-router": "^2.3.1",
     "vuetify": "^1.5.14",
     "vuex": "^2.3.1",
+    "vuex-persistedstate": "^3.0.1",
     "waterline": "^0.13.6",
     "waterline-mysql": "^0.6.0"
   },
@@ -66,7 +67,7 @@
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
-    "prettier-eslint": "^8.7.0",
+    "prettier-eslint": "^8.8.2",
     "prettier-eslint-cli": "^4.7.0",
     "request": "^2.88.0",
     "rimraf": "^2.6.0",

src/store.js

@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
 
-import { get, set } from '@/utils/storage';
+import { set } from '@/utils/storage';
 import { generateGuid } from '@/utils/helpers';
-import { getAll } from '@/utils/settings';
 import config from './store/modules/config/config.store';
+import settings from './store/modules/settings/settings.store';
 
 const plex = require('./store/modules/plex/').default;
 const syncLounge = require('./store/modules/synclounge.js').default;
@@ -15,7 +16,6 @@ function sendNotification(message) {
   return window.EventBus.$emit('notification', message);
 }
 
-console.log('Got settings', getAll());
 // Set up out web app socket for fetching short urls
 
 const state = {
@@ -40,7 +40,6 @@ const state = {
   upNextCache: {},
 
   // SETTINGS
-  settings: getAll(),
   stats: {},
   me: {},
 };
@@ -186,6 +185,7 @@ const getters = {
     },
   }),
 };
+
 const actions = {
   async PLAYBACK_CHANGE({ commit, state, dispatch }, data) {
     const [client, ratingKey, mediaContainer] = data;
@@ -208,12 +208,12 @@ const actions = {
         if (metadata.type === 'movie') {
           sendNotification(`Now Playing: ${metadata.title} from ${
             state.plex.servers[metadata.machineIdentifier].name
-          }`);
+            }`);
         }
         if (metadata.type === 'episode') {
           sendNotification(`Now Playing: ${metadata.grandparentTitle} S${metadata.parentIndex}E${
             metadata.index
-          } from ${state.plex.servers[metadata.machineIdentifier].name}`);
+            } from ${state.plex.servers[metadata.machineIdentifier].name}`);
         }
         state.chosenClient.clientPlayingMetadata = metadata;
         const w = Math.round(Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
@@ -342,9 +342,16 @@ const actions = {
       }
       state.synclounge._socket.emit('poll', endObj);
     }
-  },
+  }
 };
 
+
+const persistedState = createPersistedState({
+  paths: [
+    'settings'
+  ]
+});
+
 const store = new Vuex.Store({
   state,
   mutations,
@@ -354,7 +361,9 @@ const store = new Vuex.Store({
     synclounge: syncLounge,
     plex,
     config,
+    settings
   },
+  plugins: [persistedState]
 });
 
 export default store;

src/store/modules/config/config.store.js

@@ -20,7 +20,7 @@ export default {
     },
   },
   getters: {
-    getConfig: () => state => state.configuration,
+    configuration: state => state.configuration,
   },
 };
 

src/store/modules/settings/constants.js

@@ -1,5 +1,3 @@
-import { generateGuid } from './helpers';
-
 export const defaultSettings = {
   CLIENTPOLLINTERVAL: 1000,
   AUTOPLAY: true,
@@ -9,11 +7,10 @@ export const defaultSettings = {
   SYNCFLEXABILITY: 3000,
   CUSTOMSERVER: 'http://',
   SLPLAYERFORCETRANSCODE: true,
-  CLIENTIDENTIFIER: `${generateGuid()}-${generateGuid()}`,
+  PTPLAYERQUALITY: 'Original',
-  blockedServers: [],
+  PTPLAYERVOLUME: 100
-  LASTSERVER: '',
 };
 
 export default {
   defaultSettings,
-};
+};

src/store/modules/settings/settings.store.js

@@ -0,0 +1,53 @@
+import { coalesce, generateGuid } from '@/utils/helpers';
+
+const mutations = {
+  initClientIdentifier(state, payload) {
+    state.count += payload.amount
+  }
+};
+
+// Use stored value if not null, othewise fallback to config, then default values
+// TODO: generate uuid if not exists
+const getters = {
+  GET_AUTOPLAY: ({ state, rootGetters }) => { coalesce(state.AUTOPLAY, rootGetters['config/configuration'].AUTOPLAY, defaultSettings.AUTOPLAY) },
+  GET_CLIENTPOLLINTERVAL: ({ state, rootGetters }) => { coalesce(state.CLIENTPOLLINTERVAL, rootGetters['config/configuration'].CLIENTPOLLINTERVAL, defaultSettings.CLIENTPOLLINTERVAL) },
+  GET_SYNCMODE: ({ state, rootGetters }) => { coalesce(state.SYNCMODE, rootGetters['config/configuration'].SYNCMODE, defaultSettings.SYNCMODE) },
+  GET_SYNCFLEXABILITY: ({ state, rootGetters }) => { coalesce(state.SYNCFLEXABILITY, rootGetters['config/configuration'].SYNCFLEXABILITY, defaultSettings.SYNCFLEXABILITY) },
+  GET_CUSTOMSERVER: ({ state, rootGetters }) => { coalesce(state.CUSTOMSERVER, rootGetters['config/configuration'].CUSTOMSERVER, defaultSettings.CUSTOMSERVER) },
+  GET_BLOCKEDSERVERS: state => state.BLOCKEDSERVERS,
+  GET_HOMEINIT: state => state.HOMEINIT,
+  GET_PTPLAYERQUALITY: ({ state, rootGetters }) => { coalesce(state.PTPLAYERQUALITY, rootGetters['config/configuration'].PTPLAYERQUALITY, defaultSettings.PTPLAYERQUALITY) },
+  GET_PTPLAYERVOLUME: ({ state, rootGetters }) => { coalesce(state.PTPLAYERVOLUME, rootGetters['config/configuration'].PTPLAYERVOLUME, defaultSettings.PTPLAYERVOLUME) },
+  GET_SLPLAYERFORCETRANSCODE: ({ state, rootGetters }) => { coalesce(state.SLPLAYERFORCETRANSCODE, rootGetters['config/configuration'].SLPLAYERFORCETRANSCODE, defaultSettings.SLPLAYERFORCETRANSCODE) },
+  GET_HIDEUSERNAME: ({ state, rootGetters }) => { coalesce(state.HIDEUSERNAME, rootGetters['config/configuration'].HIDEUSERNAME, defaultSettings.HIDEUSERNAME) },
+  GET_ALTUSERNAME: ({ state, rootGetters }) => { coalesce(state.ALTUSERNAME, rootGetters['config/configuration'].ALTUSERNAME, defaultSettings.ALTUSERNAME) },
+  GET_CLIENTIDENTIFIER: state => state.CLIENTIDENTIFIER,
+  GET_LASTSERVER: state => state.LASTSERVER
+};
+
+// The state must return a function
+// to make the module reusable.
+// See: https://vuex.vuejs.org/en/modules.html#module-reuse
+const state = () => ({
+  'AUTOPLAY': null,
+  'CLIENTPOLLINTERVAL': null,
+  'SYNCMODE': null,
+  'SYNCFLEXABILITY': null,
+  'CUSTOMSERVER': null,
+  'BLOCKEDSERVERS': [],
+  'HOMEINIT': false,
+  'PTPLAYERQUALITY': null,
+  'PTPLAYERVOLUME': null,
+  'SLPLAYERFORCETRANSCODE': null,
+  'HIDEUSERNAME': null,
+  'ALTUSERNAME': null,
+  'CLIENTIDENTIFIER': `${generateGuid()}-${generateGuid()}`,
+  'LASTSERVER': null
+});
+
+export default {
+  namespaced: true,
+  mutations,
+  getters,
+  state
+};

src/utils/helpers.js

@@ -7,6 +7,18 @@ export const generateGuid = () => {
   return `${s4() + s4()}-${s4()}${s4()}`;
 };
 
+
+export const coalesce = () => {
+  const len = arguments.length;
+  for (let i = 0; i < len; i++) {
+    if (arguments[i] !== null && arguments[i] !== undefined) {
+      return arguments[i];
+    }
+  }
+  return null;
+}
+
+
 export default {
   generateGuid,
 };

src/utils/settings.js

@@ -1,38 +0,0 @@
-import { defaultSettings } from './constants';
-import { get } from './storage';
-
-const keys = [
-  'AUTOPLAY',
-  'CLIENTPOLLINTERVAL',
-  'SYNCMODE',
-  'SYNCFLEXABILITY',
-  'CUSTOMSERVER',
-  'BLOCKEDSERVERS',
-  'HOMEINIT',
-  'PTPLAYERQUALITY',
-  'PTPLAYERVOLUME',
-  'SLPLAYERFORCETRANSCODE',
-  'HIDEUSERNAME',
-  'ALTUSERNAME',
-  'CLIENTIDENTIFIER',
-  'LASTSERVER',
-];
-
-export const getAll = () => {
-  const settings = {};
-  keys.forEach((key) => {
-    settings[key] = get(key);
-    return true;
-  });
-  // Accept the default setting if the persisted value is null or undefined
-  Object.keys(settings).forEach((key) => {
-    if (settings[key] === undefined || settings[key] === null) {
-      settings[key] = defaultSettings[key];
-    }
-  });
-  return settings;
-};
-
-export default {
-  getAll,
-};