From be7383934951963e9eb09e394bdb73a029d0ac17 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:00:31 +0300
Subject: [PATCH] refactor(Ratings): align with new design

---
 src/components/MetaPreview/MetaPreview.js     | 31 +++-----------
 .../MetaPreview/Ratings/Ratings.less          | 42 +++++++++++++++++++
 .../MetaPreview/Ratings/Ratings.tsx           | 35 ++++++++++++++++
 src/components/MetaPreview/Ratings/index.ts   |  5 +++
 .../MetaPreview/{ => Ratings}/useRating.ts    |  2 +
 src/components/MetaPreview/styles.less        | 15 +++----
 6 files changed, 94 insertions(+), 36 deletions(-)
 create mode 100644 src/components/MetaPreview/Ratings/Ratings.less
 create mode 100644 src/components/MetaPreview/Ratings/Ratings.tsx
 create mode 100644 src/components/MetaPreview/Ratings/index.ts
 rename src/components/MetaPreview/{ => Ratings}/useRating.ts (95%)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 589150d82..3ac5abd03 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -17,7 +17,7 @@ const ActionButton = require('./ActionButton');
 const MetaLinks = require('./MetaLinks');
 const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
 const styles = require('./styles');
-const { default: useRating } = require('./useRating');
+const { Ratings } = require('./Ratings');
 
 const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.search.regexp,
@@ -27,7 +27,6 @@ const ALLOWED_LINK_REDIRECTS = [
 
 const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, metaId, like }, ref) => {
     const { t } = useTranslation();
-    const { onLiked, onLoved, liked, loved } = useRating(metaId, like);
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
         return Array.isArray(links) ?
@@ -262,30 +261,10 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 }
                 {
                     !compact ?
-                        <ActionButton
-                            className={classnames(styles['action-button'], styles['rating-button'], {
-                                [styles['active']]: liked
-                            })}
-                            icon={'thumbs-up'}
-                            label={t('LIKE')}
-                            tooltip={true}
-                            tabIndex={compact ? -1 : 0}
-                            onClick={onLiked}
-                        />
-                        :
-                        null
-                }
-                {
-                    !compact ?
-                        <ActionButton
-                            className={classnames(styles['action-button'], styles['rating-button'], {
-                                [styles['active']]: loved
-                            })}
-                            icon={'heart'}
-                            label={t('LOVE')}
-                            tooltip={true}
-                            tabIndex={compact ? -1 : 0}
-                            onClick={onLoved}
+                        <Ratings
+                            metaId={metaId}
+                            like={like}
+                            className={styles['ratings']}
                         />
                         :
                         null
diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
new file mode 100644
index 000000000..096cd1957
--- /dev/null
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -0,0 +1,42 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+@height: 4rem;
+@width: 4rem;
+
+.ratings-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--overlay-color);
+    border-radius: 2rem;
+    height: @height;
+    width: fit-content;
+
+    .icon-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: @height;
+        width: @width;
+        padding: 0 1rem;
+        cursor: pointer;
+
+        .icon {
+            width: calc(@width / 2);
+            height: calc(@height / 2);
+            color: var(--primary-foreground-color);
+            opacity: 0.7;
+            transition: 0.3s all ease-in-out;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            &.active {
+                opacity: 0.9;
+                fill: var(--primary-foreground-color);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
new file mode 100644
index 000000000..95a4c26c1
--- /dev/null
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -0,0 +1,35 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React from 'react';
+import useRating from './useRating';
+import styles from './Ratings.less';
+import Icon from '@stremio/stremio-icons/react';
+import classNames from 'classnames';
+
+type Like = {
+    content: 'liked' | 'loved';
+    type: 'Ready' | 'Loading' | 'Error';
+};
+
+type Props = {
+    metaId?: string;
+    like?: Like;
+    className?: string;
+};
+
+const Ratings = ({ metaId, like, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(metaId, like);
+
+    return (
+        <div className={classNames(styles['ratings-container'], className)}>
+            <div className={styles['icon-container']} onClick={onLiked}>
+                <Icon name={'thumbs-up'} className={classNames(styles['icon'], { [styles['active']]: liked })} />
+            </div>
+            <div className={styles['icon-container']} onClick={onLoved}>
+                <Icon name={'heart'} className={classNames(styles['icon'], { [styles['active']]: loved })} />
+            </div>
+        </div>
+    );
+};
+
+export default Ratings;
diff --git a/src/components/MetaPreview/Ratings/index.ts b/src/components/MetaPreview/Ratings/index.ts
new file mode 100644
index 000000000..0a00e9c2f
--- /dev/null
+++ b/src/components/MetaPreview/Ratings/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import Ratings from './Ratings';
+
+export { Ratings };
diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
similarity index 95%
rename from src/components/MetaPreview/useRating.ts
rename to src/components/MetaPreview/Ratings/useRating.ts
index 726b5e334..c15f6605e 100644
--- a/src/components/MetaPreview/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -1,3 +1,5 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
index 1e9442087..4c04cce79 100644
--- a/src/components/MetaPreview/styles.less
+++ b/src/components/MetaPreview/styles.less
@@ -207,18 +207,13 @@
                     outline: none;
                 }
             }
-
-            &.rating-button {
-                &.active {
-                    background-color: var(--primary-accent-color);
-                    
-                    .icon {
-                        color: var(--primary-foreground-color);
-                    }
-                }
-            }
         }
     }
+
+    .ratings {
+        margin-bottom: 1rem;
+        margin-right: 1rem;
+    }
 }
 
 .share-prompt {