New card actions: play, pause, prev, next, toggle, repeat, shuffle

src/webapp/src/components/Cards/controls/actions/audio/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 
 import CommandSelector from '../../command-selector';
 import SliderChangeVolume from './slider-change-volume';
-import RepeatOptions from './repeat-options';
-import ShuffleOptions from './shuffle-options';
+import OptionsSelector from '../../options-selector';
 
 import { getActionAndCommand } from '../../../utils';
 
@@ -26,15 +25,32 @@ const SelectAudioVolume = ({
         />
       }
       {command === 'set_shuffle' &&
-        <ShuffleOptions
+        <OptionsSelector
+          actionType="audio_shuffle"
           actionData={actionData}
           handleActionDataChange={handleActionDataChange}
+          optionLabel="cards.controls.actions.audio.shuffle.description"
+          options={[
+            { labelKey: 'cards.controls.actions.audio.shuffle.label-toggle', value: 'toggle' },
+            { labelKey: 'cards.controls.actions.audio.shuffle.label-enable', value: 'enable' },
+            { labelKey: 'cards.controls.actions.audio.shuffle.label-disable', value: 'disable' },
+          ]}
         />
       }
       {command === 'set_repeat' &&
-        <RepeatOptions
+        <OptionsSelector
+          actionType="audio_repeat"
           actionData={actionData}
           handleActionDataChange={handleActionDataChange}
+          optionLabel="cards.controls.actions.audio.repeat.description"
+          options={[
+            { labelKey: 'cards.controls.actions.audio.repeat.label-toggle', value: 'toggle' },
+            { labelKey: 'cards.controls.actions.audio.repeat.label-toggle-repeat', value: 'toggle_repeat' },
+            { labelKey: 'cards.controls.actions.audio.repeat.label-toggle-repeat-single', value: 'toggle_repeat_single' },
+            { labelKey: 'cards.controls.actions.audio.repeat.label-enable-repeat', value: 'enable_repeat' },
+            { labelKey: 'cards.controls.actions.audio.repeat.label-enable-repeat-single', value: 'enable_repeat_single' },
+            { labelKey: 'cards.controls.actions.audio.repeat.label-disable', value: 'disable' },
+          ]}
         />
       }
     </>

src/webapp/src/components/Cards/controls/actions/synchronisation/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import CommandSelector from '../../command-selector';
+import OptionsSelector from '../../options-selector';
 import ChangeOnRfidScan from './rfidcards/change-on-rfid-scan-options';
 
 import { getActionAndCommand } from '../../../utils';
@@ -18,9 +19,16 @@ const SelectSynchronisation = ({
         handleActionDataChange={handleActionDataChange}
       />
       {command === 'sync_rfidcards_change_on_rfid_scan' &&
-        <ChangeOnRfidScan
+        <OptionsSelector
+          actionType="sync_rfidcards_change_on_rfid_scan"
           actionData={actionData}
           handleActionDataChange={handleActionDataChange}
+          optionLabel="cards.controls.actions.synchronisation.rfidcards.description"
+          options={[
+            { labelKey: 'cards.controls.actions.synchronisation.rfidcards.label-toggle', value: 'toggle' },
+            { labelKey: 'cards.controls.actions.synchronisation.rfidcards.label-enable', value: 'enable' },
+            { labelKey: 'cards.controls.actions.synchronisation.rfidcards.label-disable', value: 'disable' },
+          ]}
         />
       }
     </>

src/webapp/src/components/Cards/controls/actions/audio/shuffle-options.js → src/webapp/src/components/Cards/controls/options-selector.js

@@ -13,15 +13,16 @@ import {
 import {
   getActionAndCommand,
   getArgsValues,
-} from '../../../utils';
+} from '../utils.js';
 
-
-const ShuffleOptions = ({
+const OptionsSelector = ({
+  actionType,
   actionData,
   handleActionDataChange,
+  optionLabel,
+  options,
 }) => {
   const { t } = useTranslation();
-
   const { action, command } = getActionAndCommand(actionData);
   const [option] = getArgsValues(actionData);
 
@@ -33,35 +34,28 @@ const ShuffleOptions = ({
     <Grid container alignItems="center" sx={{ marginTop: '20px' }}>
       <Grid item xs={12}>
         <Typography>
-          {t('cards.controls.actions.audio.shuffle.description')}
+          {t(optionLabel)}
         </Typography>
         <FormControl component="fieldset">
           <RadioGroup
-            aria-label="gender"
-            name="audio_shuffle_options"
-            value={option || 'toggle'}
+            aria-label={actionType}
+            name={`${actionType}_options`}
+            value={option || options[0].value}
             onChange={onChange}
           >
-            <FormControlLabel
-              control={<Radio />}
-              label={t('cards.controls.actions.audio.shuffle.label-toggle')}
-              value="toggle"
-            />
-            <FormControlLabel
-              control={<Radio />}
-              label={t('cards.controls.actions.audio.shuffle.label-enable')}
-              value="enable"
-            />
-            <FormControlLabel
-              control={<Radio />}
-              label={t('cards.controls.actions.audio.shuffle.label-disable')}
-              value="disable"
-            />
+            {options.map(({ labelKey, value }) => (
+              <FormControlLabel
+                key={value}
+                control={<Radio />}
+                label={t(labelKey)}
+                value={value}
+              />
+            ))}
           </RadioGroup>
         </FormControl>
       </Grid>
     </Grid>
   );
 };
 
-export default ShuffleOptions;
+export default OptionsSelector;