Use enum for item actions

src/elements/emby-playstatebutton/PlayedButton.tsx

@@ -3,8 +3,8 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { type FC, useCallback } from 'react';
 import IconButton from '@mui/material/IconButton';
 import CheckIcon from '@mui/icons-material/Check';
-import classNames from 'classnames';
 
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import { useTogglePlayedMutation } from 'hooks/useFetchItems';
 
@@ -59,23 +59,17 @@ const PlayedButton: FC<PlayedButtonProps> = ({
         }
     }, [itemId, togglePlayedMutation, isPlayed, queryClient, queryKey]);
 
-    const btnClass = classNames(
-        className,
-        { 'playstatebutton-played': isPlayed }
-    );
-
-    const iconClass = classNames(
-        { 'playstatebutton-icon-played': isPlayed }
-    );
     return (
         <IconButton
-            data-action='none'
+            data-action={ItemAction.None}
             title={getTitle()}
-            className={btnClass}
+            className={className}
             size='small'
             onClick={onClick}
         >
-            <CheckIcon className={iconClass} />
+            <CheckIcon
+                color={isPlayed ? 'error' : undefined}
+            />
         </IconButton>
     );
 };

src/elements/emby-ratingbutton/FavoriteButton.tsx

@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import IconButton from '@mui/material/IconButton';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
-import classNames from 'classnames';
+import { ItemAction } from 'constants/itemAction';
 import { useToggleFavoriteMutation } from 'hooks/useFetchItems';
 import globalize from 'lib/globalize';
 
@@ -45,24 +45,17 @@ const FavoriteButton: FC<FavoriteButtonProps> = ({
         }
     }, [isFavorite, itemId, queryClient, queryKey, toggleFavoriteMutation]);
 
-    const btnClass = classNames(
-        className,
-        { 'ratingbutton-withrating': isFavorite }
-    );
-
-    const iconClass = classNames(
-        { 'ratingbutton-icon-withrating': isFavorite }
-    );
-
     return (
         <IconButton
-            data-action='none'
+            data-action={ItemAction.None}
+            className={className}
             title={isFavorite ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
-            className={btnClass}
             size='small'
             onClick={onClick}
         >
-            <FavoriteIcon className={iconClass} />
+            <FavoriteIcon
+                color={isFavorite ? 'error' : undefined}
+            />
         </IconButton>
     );
 };