Add detail view buttons

src/apps/experimental/features/details/components/buttons/ShuffleButton.tsx

@@ -0,0 +1,29 @@
+import React, { FC, useCallback } from 'react';
+import { IconButton } from '@mui/material';
+import ShuffleIcon from '@mui/icons-material/Shuffle';
+
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'lib/globalize';
+import type { ItemDto } from 'types/base/models/item-dto';
+
+interface ShuffleButtonProps {
+    item: ItemDto;
+}
+
+const ShuffleButton: FC<ShuffleButtonProps> = ({ item }) => {
+    const shuffle = useCallback(() => {
+        playbackManager.shuffle(item);
+    }, [item]);
+
+    return (
+        <IconButton
+            title={globalize.translate('Shuffle')}
+            className='paper-icon-button-light btnShuffle autoSize'
+            onClick={shuffle}
+        >
+            <ShuffleIcon />
+        </IconButton>
+    );
+};
+
+export default ShuffleButton;