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;

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

@@ -0,0 +1,58 @@
+import React, { FC, useCallback } from 'react';
+import { IconButton } from '@mui/material';
+import StopIcon from '@mui/icons-material/Stop';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCancelTimer } from 'hooks/api/liveTvHooks';
+import globalize from 'lib/globalize';
+import loading from 'components/loading/loading';
+import toast from 'components/toast/toast';
+
+interface CancelTimerButtonProps {
+    timerId: string;
+    queryKey?: string[];
+}
+
+const CancelTimerButton: FC<CancelTimerButtonProps> = ({
+    timerId,
+    queryKey
+}) => {
+    const queryClient = useQueryClient();
+    const cancelTimer = useCancelTimer();
+
+    const onCancelTimerClick = useCallback(() => {
+        loading.show();
+        cancelTimer.mutate(
+            {
+                timerId: timerId
+            },
+            {
+                onSuccess: async () => {
+                    toast(globalize.translate('RecordingCancelled'));
+                    loading.hide();
+                    await queryClient.invalidateQueries({
+                        queryKey
+                    });
+                },
+
+                onError: (err: unknown) => {
+                    console.error(
+                        '[cancelTimer] failed to cancel timer',
+                        err
+                    );
+                }
+            }
+        );
+    }, [cancelTimer, queryClient, queryKey, timerId]);
+
+    return (
+        <IconButton
+            className='button-flat btnCancelTimer'
+            title={globalize.translate('StopRecording')}
+            onClick={onCancelTimerClick}
+        >
+            <StopIcon />
+        </IconButton>
+    );
+};
+
+export default CancelTimerButton;

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

@@ -0,0 +1,42 @@
+import React, { FC, useCallback } from 'react';
+import { IconButton } from '@mui/material';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { useGetDownload } from 'hooks/api/libraryHooks';
+import globalize from 'lib/globalize';
+import { download } from 'scripts/fileDownloader';
+import type { NullableString } from 'types/base/common/shared/types';
+
+interface DownloadButtonProps {
+    itemId: string;
+    itemServerId: NullableString,
+    itemName: NullableString,
+    itemPath: NullableString,
+}
+
+const DownloadButton: FC<DownloadButtonProps> = ({ itemId, itemServerId, itemName, itemPath }) => {
+    const { data: downloadHref } = useGetDownload({ itemId });
+
+    const onDownloadClick = useCallback(async () => {
+        download([
+            {
+                url: downloadHref,
+                itemId: itemId,
+                serverId: itemServerId,
+                title: itemName,
+                filename: itemPath?.replace(/^.*[\\/]/, '')
+            }
+        ]);
+    }, [downloadHref, itemId, itemName, itemPath, itemServerId]);
+
+    return (
+        <IconButton
+            className='button-flat btnDownload'
+            title={globalize.translate('Download')}
+            onClick={onDownloadClick}
+        >
+            <FileDownloadIcon />
+        </IconButton>
+    );
+};
+
+export default DownloadButton;

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

@@ -0,0 +1,28 @@
+import React, { FC, useCallback } from 'react';
+import { IconButton } from '@mui/material';
+import ExploreIcon from '@mui/icons-material/Explore';
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'lib/globalize';
+import type { ItemDto } from 'types/base/models/item-dto';
+
+interface InstantMixButtonProps {
+    item?: ItemDto;
+}
+
+const InstantMixButton: FC<InstantMixButtonProps> = ({ item }) => {
+    const onInstantMixClick = useCallback(() => {
+        playbackManager.instantMix(item);
+    }, [item]);
+
+    return (
+        <IconButton
+            className='button-flat btnInstantMix'
+            title={globalize.translate('HeaderInstantMix')}
+            onClick={onInstantMixClick}
+        >
+            <ExploreIcon />
+        </IconButton>
+    );
+};
+
+export default InstantMixButton;