Refactor UI windows to handle them as an array

UI windows were an object with each of its keys a window identifier. Looping through windows wasn't intuitive, and adding a new key implied to also modify the types definitions. To make it simpler, UI windows are now an array, and each window has a string identifier.
INRIA · May 27, 2019 · 683e71a · 683e71a
1 parent f2cf11e
commit 683e71a
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 153 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -36,16 +36,16 @@
   "preferences.title": "Preferences",
   "preferences.windows_locked.label": "Lock windows",
   "preferences.windows_visibility.title": "Windows visibility",
-  "preferences.windows_visibility.label": "Show the $t(window, { \"context\": \"{{ windowId }}\" })",
+  "preferences.windows_visibility.label": "Show the $t(window, { \"context\": \"{{ windowName }}\" })",
   "progression.sequence_progress": "Sequence progress : {{ progress }}%",
-  "resizers.top": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving top border",
-  "resizers.top_right": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving top right corner",
-  "resizers.right": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving right border",
-  "resizers.bottom_right": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving bottom right corner",
-  "resizers.bottom": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving bottom border",
-  "resizers.bottom_left": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving bottom left corner",
-  "resizers.left": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving left border",
-  "resizers.top_left": "Resize the $t(window, { \"context\": \"{{ windowId }}\" }) by moving top left corner",
+  "resizers.top": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving top border",
+  "resizers.top_right": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving top right corner",
+  "resizers.right": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving right border",
+  "resizers.bottom_right": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving bottom right corner",
+  "resizers.bottom": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving bottom border",
+  "resizers.bottom_left": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving bottom left corner",
+  "resizers.left": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving left border",
+  "resizers.top_left": "Resize the $t(window, { \"context\": \"{{ windowName }}\" }) by moving top left corner",
   "time.duration.h": "$t(time.hours, { \"count\": {{ hours }} })",
   "time.duration.hm": "$t(time.hours, { \"count\": {{ hours }} }) and $t(time.minutes, { \"count\": {{ minutes }} })",
   "time.duration.hms": "$t(time.hours, { \"count\": {{ hours }} }), $t(time.duration.ms, { \"minutes\": {{ minutes }}, { \"seconds\": {{ seconds }} })",
@@ -66,6 +66,6 @@
   "window_slides": "slides window",
   "window_timeManagement": "time management window",
   "window_video": "video window",
-  "window.close": "Close the $t(window, { \"context\": \"{{ windowId }}\" })",
-  "window.drag": "Drag the $t(window, { \"context\": \"{{ windowId }}\" })"
+  "window.close": "Close the $t(window, { \"context\": \"{{ windowName }}\" })",
+  "window.drag": "Drag the $t(window, { \"context\": \"{{ windowName }}\" })"
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -34,16 +34,16 @@
   "preferences.title": "Préférences",
   "preferences.windows_locked.label": "Verrouiller les fenêtres",
   "preferences.windows_visibility.title": "Visibilité des fenêtres",
-  "preferences.windows_visibility.label": "Afficher la $t(window, { \"context\": \"{{ windowId }}\" })",
+  "preferences.windows_visibility.label": "Afficher la $t(window, { \"context\": \"{{ windowName }}\" })",
   "progression.sequence_progress": "Progression dans la séquence : {{ progress }}%",
-  "resizers.top": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant la bordure du haut",
-  "resizers.top_right": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant le coin en haut à droite",
-  "resizers.right": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant la bordure de droite",
-  "resizers.bottom_right": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant le coin en bas à droite",
-  "resizers.bottom": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant la bordure du bas",
-  "resizers.bottom_left": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant le coin en bas à gauche",
-  "resizers.left": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant la bordure de gauche",
-  "resizers.top_left": "Redimensionner la $t(window, { \"context\": \"{{ windowId }}\" }) en déplaçant le coin en haut à gauche",
+  "resizers.top": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant la bordure du haut",
+  "resizers.top_right": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant le coin en haut à droite",
+  "resizers.right": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant la bordure de droite",
+  "resizers.bottom_right": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant le coin en bas à droite",
+  "resizers.bottom": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant la bordure du bas",
+  "resizers.bottom_left": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant le coin en bas à gauche",
+  "resizers.left": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant la bordure de gauche",
+  "resizers.top_left": "Redimensionner la $t(window, { \"context\": \"{{ windowName }}\" }) en déplaçant le coin en haut à gauche",
   "time.duration.hm": "$t(time.hours, { \"count\": {{ hours }} }) et $t(time.minutes, { \"count\": {{ minutes }} })",
   "time.duration.hms": "$t(time.hours, { \"count\": {{ hours }} }), $t(time.duration.ms, { \"minutes\": {{ minutes }}, \"seconds\": {{ seconds }} })",
   "time.duration.hs": "$t(time.hours, { \"count\": {{ hours }} }) et $t(time.seconds, { \"count\": {{ seconds }} })",
@@ -61,6 +61,6 @@
   "window_slides": "fenêtre des diapositives",
   "window_timeManagement": "fenêtre de gestion du temps",
   "window_video": "fenêtre vidéo",
-  "window.close": "Fermer la $t(window, { \"context\": \"{{ windowId }}\" })",
-  "window.drag": "Déplacer la $t(window, { \"context\": \"{{ windowId }}\" })"
+  "window.close": "Fermer la $t(window, { \"context\": \"{{ windowName }}\" })",
+  "window.drag": "Déplacer la $t(window, { \"context\": \"{{ windowName }}\" })"
 }
diff --git a/src/actions/preferences.ts b/src/actions/preferences.ts
@@ -58,13 +58,13 @@ export function updateActiveFontFace(fontFace: string): AnyAction {
 }
 
 export function setWindowVisibility(
-  windowId: string,
+  windowName: string,
   visible: boolean
 ): AnyAction {
   return {
     type: CHANGE_WINDOW_VISIBILITY,
     visible,
-    windowId
+    windowName
   };
 }
 

diff --git a/src/actions/shared.ts b/src/actions/shared.ts
@@ -49,13 +49,13 @@ function loadConfiguration(configuration: any): AnyAction {
 }
 
 export function updateUIWindow(
-  windowId: string,
+  windowName: string,
   window: Partial<IUIWindow>
 ): AnyAction {
   return {
     type: CHANGE_UI_WINDOWS,
     window,
-    windowId
+    windowName
   };
 }
 

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -9,7 +9,7 @@ import {
   WINDOW_ID_TIME_MANAGEMENT
 } from '../constants';
 import { IAianaState } from '../reducers';
-import { IUIWindow, IUIWindows } from '../reducers/preferences';
+import { IUIWindow } from '../reducers/preferences';
 import styled from '../utils/styled-components';
 import AdditionalInformation from './AdditionalInformation';
 import ChaptersMenu from './chapters/ChaptersMenu';
@@ -47,7 +47,7 @@ const StyledDiv = styled.div`
 interface IStateProps {
   additionalInformationText?: string;
   chaptersMenu: boolean;
-  uiWindows: IUIWindows;
+  uiWindows: IUIWindow[];
 }
 
 interface IDispatchProps {
@@ -56,6 +56,14 @@ interface IDispatchProps {
 
 interface IPlayerProps extends IStateProps, IDispatchProps {}
 
+type Filter = (window: IUIWindow) => boolean;
+
+function byName(name: string): Filter {
+  return (window: IUIWindow) => {
+    return window.name === name;
+  };
+}
+
 function Player(props: IPlayerProps) {
   const [isDraggable, setDraggable] = useState(true);
 
@@ -66,51 +74,64 @@ function Player(props: IPlayerProps) {
     updateWindowHandler
   } = props;
 
+  const chaptersWindow = uiWindows.find(byName(WINDOW_ID_CHAPTERS));
+  const additionalInformationWindow = uiWindows.find(
+    byName(WINDOW_ID_ADDITIONAL_INFORMATION)
+  );
+  const slidesWindow = uiWindows.find(byName(WINDOW_ID_SLIDES));
+  const timeManagementWindow = uiWindows.find(
+    byName(WINDOW_ID_TIME_MANAGEMENT)
+  );
+  const videoWindow = uiWindows.find(byName(WINDOW_ID_VIDEO));
+
   return (
     <StyledDiv>
       <div className="aip-windows">
-        {chaptersMenu && (
+        {chaptersWindow && chaptersMenu && (
           <ChaptersMenu
             isDraggable={isDraggable}
             toggleDraggable={setDraggable}
             uiUpdateHandler={updateWindowHandler}
-            windowId={WINDOW_ID_CHAPTERS}
-            {...uiWindows.chapters}
+            {...chaptersWindow}
+          />
+        )}
+
+        {videoWindow && (
+          <VideoPlayer
+            isDraggable={isDraggable}
+            toggleDraggable={setDraggable}
+            uiUpdateHandler={updateWindowHandler}
+            {...videoWindow}
+          />
+        )}
+
+        {slidesWindow && (
+          <Slides
+            isDraggable={isDraggable}
+            toggleDraggable={setDraggable}
+            uiUpdateHandler={updateWindowHandler}
+            {...slidesWindow}
           />
         )}
 
-        <VideoPlayer
-          isDraggable={isDraggable}
-          toggleDraggable={setDraggable}
-          uiUpdateHandler={updateWindowHandler}
-          windowId={WINDOW_ID_VIDEO}
-          {...uiWindows.video}
-        />
-
-        <Slides
-          isDraggable={isDraggable}
-          toggleDraggable={setDraggable}
-          uiUpdateHandler={updateWindowHandler}
-          windowId={WINDOW_ID_SLIDES}
-          {...uiWindows.slides}
-        />
-
-        <AdditionalInformation
-          isDraggable={isDraggable}
-          text={additionalInformationText}
-          toggleDraggable={setDraggable}
-          uiUpdateHandler={updateWindowHandler}
-          windowId={WINDOW_ID_ADDITIONAL_INFORMATION}
-          {...uiWindows.additionalInformation}
-        />
-
-        <TimeSpent
-          isDraggable={isDraggable}
-          toggleDraggable={setDraggable}
-          uiUpdateHandler={updateWindowHandler}
-          windowId={WINDOW_ID_TIME_MANAGEMENT}
-          {...uiWindows.timeManagement}
-        />
+        {additionalInformationWindow && (
+          <AdditionalInformation
+            isDraggable={isDraggable}
+            text={additionalInformationText}
+            toggleDraggable={setDraggable}
+            uiUpdateHandler={updateWindowHandler}
+            {...additionalInformationWindow}
+          />
+        )}
+
+        {timeManagementWindow && (
+          <TimeSpent
+            isDraggable={isDraggable}
+            toggleDraggable={setDraggable}
+            uiUpdateHandler={updateWindowHandler}
+            {...timeManagementWindow}
+          />
+        )}
 
         <MediaSubtitles />
       </div>

diff --git a/src/components/preferences/windows/visibility/WindowVisibilityToggle.tsx b/src/components/preferences/windows/visibility/WindowVisibilityToggle.tsx
@@ -10,7 +10,7 @@ import ToggleButton from '../../../shared/toggle-button';
 
 interface IOwnProps {
   visible: boolean;
-  windowId: string;
+  windowName: string;
 }
 
 interface IDispatchProps {
@@ -29,7 +29,7 @@ function WindowVisibilityToggle(props: IWindowVisibilityToggle) {
     <React.Fragment>
       <span id={props.uid}>
         {t('preferences.windows_visibility.label', {
-          windowId: props.windowId
+          windowName: props.windowName
         })}
       </span>
       <ToggleButton
@@ -44,7 +44,7 @@ function WindowVisibilityToggle(props: IWindowVisibilityToggle) {
 function mapDispatch(dispatch: CDispatch, ownProps: IOwnProps) {
   return {
     clickHandler() {
-      dispatch(setWindowVisibility(ownProps.windowId, !ownProps.visible));
+      dispatch(setWindowVisibility(ownProps.windowName, !ownProps.visible));
     }
   };
 }

diff --git a/src/components/preferences/windows/visibility/WindowsVisibility.tsx b/src/components/preferences/windows/visibility/WindowsVisibility.tsx
@@ -2,27 +2,25 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { IAianaState } from '../../../../reducers';
-import { IUIWindows } from '../../../../reducers/preferences';
+import { IUIWindow } from '../../../../reducers/preferences';
 import WindowVisibilityToggle from './WindowVisibilityToggle';
 
 interface IStateProps {
-  windows: IUIWindows;
+  windows: IUIWindow[];
 }
 
 function WindowsVisibility(props: IStateProps) {
   const [t] = useTranslation();
 
-  // FIXME: windows should be an array
-
   return (
     <div>
       <div>{t('preferences.windows_visibility.title')}</div>
       <ul>
-        {Object.keys(props.windows).map((windowId) => (
-          <li key={windowId}>
+        {props.windows.map((window: IUIWindow) => (
+          <li key={window.name}>
             <WindowVisibilityToggle
-              windowId={windowId}
-              visible={props.windows[windowId].visible}
+              windowName={window.name}
+              visible={window.visible}
             />
           </li>
         ))}

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,4 @@
-import { IUIWindows } from './reducers/preferences';
+import { IUIWindow } from './reducers/preferences';
 
 export const SECONDS_PER_HOUR = 3600;
 export const MINUTES_PER_HOUR = 60;
@@ -75,48 +75,53 @@ export const WINDOW_ID_TIME_MANAGEMENT = 'timeManagement';
 export const DEFAULT_WINDOWS_LOCK = false;
 export const DEFAULT_WINDOW_VISIBILITY = true;
 
-export const DEFAULT_UI_WINDOWS: IUIWindows = {
-  additionalInformation: {
+export const DEFAULT_UI_WINDOWS: IUIWindow[] = [
+  {
     height: 25,
     left: 65,
     locked: DEFAULT_WINDOWS_LOCK,
+    name: 'additionalInformation',
     top: 0,
     visible: DEFAULT_WINDOW_VISIBILITY,
     width: 35
   },
-  chapters: {
+  {
     height: 40,
     left: 50,
     locked: DEFAULT_WINDOWS_LOCK,
+    name: 'chapters',
     top: 25,
     visible: DEFAULT_WINDOW_VISIBILITY,
     width: 50
   },
-  slides: {
+  {
     height: 100,
     left: 0,
     locked: DEFAULT_WINDOWS_LOCK,
+    name: 'slides',
     top: 0,
     visible: DEFAULT_WINDOW_VISIBILITY,
     width: 50
   },
-  timeManagement: {
+  {
     height: 25,
     left: 50,
     locked: DEFAULT_WINDOWS_LOCK,
+    name: 'timeManagement',
     top: 0,
     visible: DEFAULT_WINDOW_VISIBILITY,
     width: 15
   },
-  video: {
+  {
     height: 35,
     left: 50,
     locked: DEFAULT_WINDOWS_LOCK,
+    name: 'video',
     top: 65,
     visible: DEFAULT_WINDOW_VISIBILITY,
     width: 50
   }
-};
+];
 
 export const DEFAULT_MOVE_STEP = 5;
 export const DEFAULT_FONT_MODIFIER_UPPERCASE = false;

diff --git a/src/hocs/with-window/CloseWindowButton.tsx b/src/hocs/with-window/CloseWindowButton.tsx
@@ -11,7 +11,7 @@ import styled from '../../utils/styled-components';
 
 interface IOwnProps {
   activable: boolean;
-  windowId: string;
+  windowName: string;
 }
 
 interface IDispatchProps {
@@ -49,7 +49,7 @@ function CloseWindowButton(props: IProps) {
   return (
     <StyledCloseWindowButton
       aria-label={t('window.close', {
-        windowId: props.windowId
+        windowName: props.windowName
       })}
       className={classes}
       onClick={props.clickHandler}
@@ -63,7 +63,7 @@ function CloseWindowButton(props: IProps) {
 function mapDispatch(dispatch: CDispatch, ownProps: IOwnProps) {
   return {
     clickHandler() {
-      dispatch(setWindowVisibility(ownProps.windowId, false));
+      dispatch(setWindowVisibility(ownProps.windowName, false));
     }
   };
 }