Using Visibility API to lighten ws load when in background, hopefully to sort Chrome ws lag issue

src/js/App.js

@@ -36,6 +36,7 @@ class App extends React.Component{
 		this.handleKeyDown = this.handleKeyDown.bind(this);
 		this.handleWindowResize = this.handleWindowResize.bind(this);
 		this.handleInstallPrompt = this.handleInstallPrompt.bind(this);
+		this.handleFocusAndBlur = this.handleFocusAndBlur.bind(this);
 	}
 
 	componentWillMount(){
@@ -43,6 +44,8 @@ class App extends React.Component{
 		window.addEventListener("keydown", this.handleKeyDown, false);
 		window.addEventListener("resize", this.handleWindowResize, false);
 		window.addEventListener("beforeinstallprompt", this.handleInstallPrompt, false);
+		window.addEventListener("focus", this.handleFocusAndBlur, false);
+		window.addEventListener("blur", this.handleFocusAndBlur, false);
 	}
 
 	componentWillUnmount(){
@@ -50,6 +53,8 @@ class App extends React.Component{
 		window.removeEventListener("keydown", this.handleKeyDown, false);
 		window.removeEventListener("resize", this.handleWindowResize, false);
 		window.removeEventListener("beforeinstallprompt", this.handleInstallPrompt, false);
+		window.removeEventListener("focus", this.handleFocusAndBlur, false);
+		window.removeEventListener("blur", this.handleFocusAndBlur, false);
 	}
 
 	componentDidMount(){
@@ -175,6 +180,10 @@ class App extends React.Component{
 		}
 	}
 
+	handleFocusAndBlur(e){
+		this.props.uiActions.setWindowFocus(document.hasFocus());
+	}
+
 	handleInstallPrompt(e){
 		e.preventDefault();
 		console.log("Install prompt detected");

src/js/bootstrap.js

@@ -46,6 +46,7 @@ var initialState = {
 		shortkeys_enabled: true,
 		disable_parallax: false,
 		allow_reporting: true,
+		window_focus: true,
 		slim_mode: false,
 		selected_tracks: [],
 		notifications: {},

src/js/services/mopidy/middleware.js

@@ -46,15 +46,15 @@ const MopidyMiddleware = (function(){
                 store.dispatch(mopidyActions.getTimePosition());
                 store.dispatch(mopidyActions.getUriSchemes());
 
-                // every 1000s update our play position (when playing)
+                // Every 1s update our play position (when playing)
                 progress_interval = setInterval(() => {
                     if (store.getState().mopidy.play_state == 'playing'){
 
-                        // every 10s get real position from server
-                        if (progress_interval_counter % 5 == 0){
+                        // Every 10s get real position from server, provided we're in-focus
+                        if (progress_interval_counter % 5 == 0 && store.getState().ui.window_focus === true){
                             store.dispatch(mopidyActions.getTimePosition());
 
-                        // otherwise we just assume to add 1000ms every 1000ms of play time
+                        // Otherwise we just assume to add 1000ms every 1000ms of play time
                         } else {
                             store.dispatch(mopidyActions.timePosition(store.getState().mopidy.time_position + 1000));
                         }
@@ -252,6 +252,21 @@ const MopidyMiddleware = (function(){
                     })
                 break;
 
+            case 'SET_WINDOW_FOCUS':
+
+                // Focus has just been regained
+                if (action.window_focus === true){
+                    store.dispatch(mopidyActions.getPlayState());
+                    store.dispatch(mopidyActions.getVolume());
+                    store.dispatch(mopidyActions.getMute());
+                    store.dispatch(mopidyActions.getConsume());
+                    store.dispatch(mopidyActions.getRandom());
+                    store.dispatch(mopidyActions.getRepeat());
+                    store.dispatch(mopidyActions.getCurrentTrack());
+                    store.dispatch(mopidyActions.getTimePosition());
+                }
+                break;
+
             case 'MOPIDY_REQUEST':
                 request(socket, store, action.method, action.params)
                     .then(

src/js/services/ui/actions.js

@@ -50,6 +50,13 @@ export function setSlimMode(slim_mode){
     }
 }
 
+export function setWindowFocus(window_focus){
+    return {
+        type: 'SET_WINDOW_FOCUS',
+        window_focus: window_focus
+    }
+}
+
 export function hideContextMenu(){
     return {
         type: 'HIDE_CONTEXT_MENU'

src/js/services/ui/reducer.js

@@ -10,6 +10,9 @@ export default function reducer(ui = {}, action){
         case 'SET_SLIM_MODE':
             return Object.assign({}, ui, { slim_mode: action.slim_mode });
 
+        case 'SET_WINDOW_FOCUS':
+            return Object.assign({}, ui, { window_focus: action.window_focus });
+
         case 'DEBUG':
             return Object.assign({}, ui, { debug_response: action.response })