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

src/jukebox/components/rpc_command_alias.py

@@ -36,6 +36,12 @@
         'package': 'player',
         'plugin': 'ctrl',
         'method': 'play_folder'},
+    'play': {
+        'package': 'player',
+        'plugin': 'ctrl',
+        'method': 'play',
+        'note': 'Play the currently selected song',
+        'ignore_card_removal_action': True},
     'pause': {
         'package': 'player',
         'plugin': 'ctrl',
@@ -57,6 +63,18 @@
         'plugin': 'ctrl',
         'method': 'toggle',
         'ignore_card_removal_action': True},
+    'shuffle': {
+        'package': 'player',
+        'plugin': 'ctrl',
+        'method': 'shuffle',
+        'note': 'Toggles Shuffle',
+        'ignore_card_removal_action': True},
+    'repeat': {
+        'package': 'player',
+        'plugin': 'ctrl',
+        'method': 'repeat',
+        'note': 'Switches Repeat option',
+        'ignore_card_removal_action': True},
 
     # VOLUME
     'set_volume': {

src/webapp/public/locales/de/translation.json

@@ -23,7 +23,14 @@
           "timer_fade_volume": "Fade volume",
           "toggle_output": "Audio-Ausgang umschalten",
           "sync_rfidcards_all": "Alle Audiodateien und Karteneinträge synchronisieren",
-          "sync_rfidcards_change_on_rfid_scan": "Aktivierung ändern für 'on RFID scan' "
+          "sync_rfidcards_change_on_rfid_scan": "Aktivierung ändern für 'on RFID scan'",
+          "next": "Nächster Song",
+          "pause": "Pause",
+          "play": "Abspielen",
+          "previous": "Vorheriger Song",
+          "shuffle": "Shuffle aktivieren/deaktivieren",
+          "repeat": "Wiederholen aktivieren/deaktivieren",
+          "toggle": "Abspielen/Pause"
         }
       },
       "controls-selector": {
@@ -141,10 +148,10 @@
         "activate": "Shuffle aktivieren",
         "deactivate": "Shuffle deaktivieren"
       },
-      "skip": "Zurück",
+      "prev_song": "Zurück",
       "play": "Abspielen",
       "pause": "Pause",
-      "next": "Weiter",
+      "next_song": "Weiter",
       "repeat": {
         "activate": "Wiederholen aktivieren",
         "activate-single": "1 Wiederholen aktivieren",

src/webapp/public/locales/en/translation.json

@@ -23,7 +23,14 @@
           "timer_fade_volume": "Fade volume",
           "toggle_output": "Toggle audio output",
           "sync_rfidcards_all": "Sync all audiofiles and card entries",
-          "sync_rfidcards_change_on_rfid_scan": "Change activation of 'on RFID scan'"
+          "sync_rfidcards_change_on_rfid_scan": "Change activation of 'on RFID scan'",
+          "next_song": "Next song",
+          "pause": "Pause",
+          "play": "Play",
+          "prev_song": "Previous song",
+          "shuffle": "Toggle Shuffle",
+          "repeat": "Toggle Repeat",
+          "toggle": "Toggle Play/Pause"
         }
       },
       "controls-selector": {
@@ -141,10 +148,10 @@
         "activate": "Activate shuffle",
         "deactivate": "Deactivate shuffle"
       },
-      "skip": "Skip previous track",
+      "prev_song": "Skip to previous track",
       "play": "Play",
       "pause": "Pause",
-      "next": "Skip next track",
+      "next_song": "Skip to next track",
       "repeat": {
         "activate": "Activate repeat",
         "activate-single": "Activate single repeat",
@@ -207,6 +214,7 @@
     },
     "secondswipe": {
       "title": "Second Swipe",
+      "description": "Second action after the same card swiped again",
       "restart": "Restart playlist",
       "toggle": "Toggle pause / play",
       "skip": "Skip to next track",

src/webapp/src/commands/index.js

@@ -82,16 +82,21 @@ const commands = {
     plugin: 'ctrl',
     method: 'pause',
   },
-  previous: {
+  prev_song: {
     _package: 'player',
     plugin: 'ctrl',
     method: 'prev',
   },
-  next: {
+  next_song: {
     _package: 'player',
     plugin: 'ctrl',
     method: 'next',
   },
+  toggle: {
+    _package: 'player',
+    plugin: 'ctrl',
+    method: 'toggle',
+  },
   shuffle: {
     _package: 'player',
     plugin: 'ctrl',

src/webapp/src/components/Player/controls.js

@@ -89,14 +89,14 @@ const Controls = () => {
         <ShuffleRoundedIcon style={{ fontSize: 22 }} />
       </IconButton>
 
-      {/* Skip previous track */}
+      {/* Skip to previous song */}
       <IconButton
-        aria-label={t('player.controls.skip')}
+        aria-label={t('player.controls.prev_song')}
         disabled={!songIsScheduled}
-        onClick={e => request('previous')}
+        onClick={e => request('prev_song')}
         size="large"
         sx={iconStyles}
-        title={t('player.controls.skip')}
+        title={t('player.controls.prev_song')}
       >
         <SkipPreviousRoundedIcon style={{ fontSize: 35 }} />
       </IconButton>
@@ -127,14 +127,14 @@ const Controls = () => {
         </IconButton>
       }
 
-      {/* Skip next track */}
+      {/* Skip to next song */}
       <IconButton
-        aria-label={t('player.controls.next')}
+        aria-label={t('player.controls.next_song')}
         disabled={!songIsScheduled}
-        onClick={e => request('next')}
+        onClick={e => request('next_song')}
         size="large"
         sx={iconStyles}
-        title={t('player.controls.next')}
+        title={t('player.controls.next_song')}
       >
         <SkipNextRoundedIcon style={{ fontSize: 35 }} />
       </IconButton>

src/webapp/src/components/Player/cover.js

@@ -33,7 +33,11 @@ const Cover = ({ coverImage }) => {
             <img
               alt={t('player.cover.title')}
               src={coverImage}
-              style={{ width: '100%', height: '100%' }}
+              style={{
+                borderRadius: '5px',
+                height: '100%',
+                width: '100%',
+              }}
             />}
           {!coverImage &&
             <MusicNoteIcon

src/webapp/src/components/Player/index.js

@@ -24,7 +24,7 @@ const Player = () => {
       if (result) {
         setCoverImage(`/cover-cache/${result}`);
         setBackgroundImage([
-          'linear-gradient(to bottom, rgba(18, 18, 18, 0.7), rgba(18, 18, 18, 1))',
+          'linear-gradient(to bottom, rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 1))',
           `url(/cover-cache/${result})`
         ].join(','));
       };

src/webapp/src/components/Player/seekbar.js

@@ -69,7 +69,7 @@ const SeekBar = () => {
       direction="row"
       justifyContent="space-between"
       sx={ {
-        marginTop: '-20px',
+        marginTop: '-10px',
       }}
     >
       <Grid item>

src/webapp/src/config.js

@@ -42,7 +42,14 @@ const JUKEBOX_ACTIONS_MAP = {
   audio: {
     commands: {
       change_volume: {},
-      toggle_output: {}
+      toggle_output: {},
+      play: {},
+      pause: {},
+      toggle: {},
+      next_song: {},
+      prev_song: {},
+      shuffle: {},
+      repeat: {}
     },
   },