Add detail view buttons

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

@@ -0,0 +1,66 @@
+import React, { FC, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import { useCancelSeriesTimer } from 'hooks/api/liveTvHooks';
+import globalize from 'lib/globalize';
+import loading from 'components/loading/loading';
+import toast from 'components/toast/toast';
+import confirm from 'components/confirm/confirm';
+
+interface CancelSeriesTimerButtonProps {
+    itemId: string;
+}
+
+const CancelSeriesTimerButton: FC<CancelSeriesTimerButtonProps> = ({
+    itemId
+}) => {
+    const navigate = useNavigate();
+    const cancelSeriesTimer = useCancelSeriesTimer();
+
+    const onCancelSeriesTimerClick = useCallback(() => {
+        confirm({
+            text: globalize.translate('MessageConfirmRecordingCancellation'),
+            primary: 'delete',
+            confirmText: globalize.translate('HeaderCancelSeries'),
+            cancelText: globalize.translate('HeaderKeepSeries')
+        })
+            .then(function () {
+                loading.show();
+                cancelSeriesTimer.mutate(
+                    {
+                        timerId: itemId
+                    },
+                    {
+                        onSuccess: async () => {
+                            toast(globalize.translate('SeriesCancelled'));
+                            loading.hide();
+                            navigate('/livetv.html');
+                        },
+                        onError: (err: unknown) => {
+                            console.error(
+                                '[cancelSeriesTimer] failed to cancel series timer',
+                                err
+                            );
+                        }
+                    }
+                );
+            })
+            .catch(() => {
+                // confirm dialog closed
+            });
+    }, [cancelSeriesTimer, navigate, itemId]);
+
+    return (
+        <IconButton
+            className='button-flat btnCancelSeriesTimer'
+            title={globalize.translate('CancelSeries')}
+            onClick={onCancelSeriesTimerClick}
+        >
+            <DeleteIcon />
+        </IconButton>
+    );
+};
+
+export default CancelSeriesTimerButton;