Begin tracking window size

js/actionCreators/index.ts

@@ -24,7 +24,7 @@ export {
   toggleMainWindowShadeMode,
   windowsHaveBeenCentered,
   centerWindowsIfNeeded,
-  ensureWindowsAreOnScreen
+  browserWindowSizeChanged
 } from "./windows";
 export {
   play,

js/actionCreators/windows.ts

@@ -10,7 +10,7 @@ import {
   TOGGLE_WINDOW_SHADE_MODE,
   SET_WINDOW_VISIBILITY,
   WINDOWS_HAVE_BEEN_CENTERED,
-  RESET_WINDOW_LAYOUT
+  BROWSER_WINDOW_SIZE_CHANGED
 } from "../actionTypes";
 
 import { getPositionDiff, SizeDiff } from "../resizeUtils";
@@ -115,10 +115,6 @@ export function windowsHaveBeenCentered(): Dispatchable {
   return { type: WINDOWS_HAVE_BEEN_CENTERED };
 }
 
-export function resetWindowLayout(): Dispatchable {
-  return { type: RESET_WINDOW_LAYOUT };
-}
-
 export function centerWindowsIfNeeded(container: HTMLElement): Dispatchable {
   return (dispatch, getState) => {
     const state = getState();
@@ -187,6 +183,11 @@ export function centerWindowsIfNeeded(container: HTMLElement): Dispatchable {
   };
 }
 
+export function browserWindowSizeChanged() {
+  const { height, width } = Utils.getWindowSize();
+  return { type: BROWSER_WINDOW_SIZE_CHANGED, height, width };
+}
+
 export function ensureWindowsAreOnScreen(): Dispatchable {
   return (dispatch, getState) => {
     const state = getState();

js/actionTypes.ts

@@ -74,3 +74,4 @@ export const CLOSE_REQUESTED = "CLOSE_REQUESTED";
 export const LOAD_SERIALIZED_STATE = "LOAD_SERIALIZED_STATE";
 export const WINDOWS_HAVE_BEEN_CENTERED = "WINDOWS_HAVE_BEEN_CENTERED";
 export const RESET_WINDOW_LAYOUT = "RESET_WINDOW_LAYOUT";
+export const BROWSER_WINDOW_SIZE_CHANGED = "BROWSER_WINDOW_SIZE_CHANGED";

js/reducers/windows.ts

@@ -10,7 +10,8 @@ import {
   WINDOW_SIZE_CHANGED,
   TOGGLE_WINDOW_SHADE_MODE,
   LOAD_SERIALIZED_STATE,
-  RESET_WINDOW_LAYOUT
+  RESET_WINDOW_LAYOUT,
+  BROWSER_WINDOW_SIZE_CHANGED
 } from "../actionTypes";
 import * as Utils from "../utils";
 
@@ -19,6 +20,7 @@ export interface WindowsState {
   centerRequested: boolean;
   genWindows: { [name: string]: WebampWindow };
   positions: WindowPositions;
+  browserWindowSize: { height: number; width: number } | null;
 }
 
 interface SerializedWindow {
@@ -77,7 +79,8 @@ const defaultWindowsState: WindowsState = {
       hotkey: "Alt+E"
     }
   },
-  positions: {}
+  positions: {},
+  browserWindowSize: null
 };
 
 const windows = (
@@ -224,6 +227,11 @@ const windows = (
         focused
       };
     }
+    case BROWSER_WINDOW_SIZE_CHANGED:
+      return {
+        ...state,
+        browserWindowSize: { height: action.height, width: action.width }
+      };
 
     default:
       return state;

js/types.ts

@@ -351,7 +351,8 @@ export type Action =
       type: "LOAD_SERIALIZED_STATE";
       serializedState: SerializedStateV1;
     }
-  | { type: "RESET_WINDOW_LAYOUT" };
+  | { type: "RESET_WINDOW_LAYOUT" }
+  | { type: "BROWSER_WINDOW_SIZE_CHANGED"; height: number; width: number };
 
 export interface WebampWindow {
   title: string;

js/webampLazy.js

@@ -19,7 +19,8 @@ import {
   previous,
   updateWindowPositions,
   loadSerializedState,
-  ensureWindowsAreOnScreen
+  ensureWindowsAreOnScreen,
+  browserWindowSizeChanged
 } from "./actionCreators";
 import { LOAD_STYLE } from "./constants";
 import * as Utils from "./utils";
@@ -129,8 +130,10 @@ class Winamp {
       this.store.dispatch({ type: NETWORK_DISCONNECTED })
     );
 
+    this.store.dispatch(browserWindowSizeChanged());
     window.addEventListener("resize", () => {
       this.store.dispatch(ensureWindowsAreOnScreen());
+      this.store.dispatch(browserWindowSizeChanged());
     });
 
     if (initialSkin) {