From faee4166c3dd8e5dd4a4874f64ab64749b6fd2f5 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 3 Jun 2025 14:58:19 +0300
Subject: [PATCH 01/29] feat(MetaPreview): impl user item ratings

---
 src/components/MetaPreview/MetaPreview.js | 31 ++++++++++++++--
 src/components/MetaPreview/useRating.ts   | 44 +++++++++++++++++++++++
 src/routes/MetaDetails/MetaDetails.js     |  1 +
 src/types/models/MetaDetails.d.ts         |  2 ++
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MetaPreview/useRating.ts

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index c0e9fb165..b1124e9ab 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -17,6 +17,7 @@ const ActionButton = require('./ActionButton');
 const MetaLinks = require('./MetaLinks');
 const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
 const styles = require('./styles');
+const { default: useRating } = require('./useRating');
 
 const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.search.regexp,
@@ -24,8 +25,9 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, metaDetails }, ref) => {
     const { t } = useTranslation();
+    const { onLiked, onLoved, like } = useRating(metaDetails);
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
         return Array.isArray(links) ?
@@ -220,6 +222,30 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
+                {
+                    !compact ?
+                        <ActionButton
+                            className={styles['action-button']}
+                            icon={'volume-medium'}
+                            tabIndex={compact ? -1 : 0}
+                            onClick={onLiked}
+                            tooltip={compact}
+                        />
+                        :
+                        null
+                }
+                {
+                    !compact ?
+                        <ActionButton
+                            className={styles['action-button']}
+                            icon={'volume-high'}
+                            tabIndex={compact ? -1 : 0}
+                            onClick={onLoved}
+                            tooltip={compact}
+                        />
+                        :
+                        null
+                }
                 {
                     typeof showHref === 'string' && compact ?
                         <ActionButton
@@ -287,7 +313,8 @@ MetaPreview.propTypes = {
     })),
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
-    toggleInLibrary: PropTypes.func
+    toggleInLibrary: PropTypes.func,
+    metaDetails: PropTypes.object
 };
 
 module.exports = MetaPreview;
diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts
new file mode 100644
index 000000000..d0ae46924
--- /dev/null
+++ b/src/components/MetaPreview/useRating.ts
@@ -0,0 +1,44 @@
+import { useMemo, useCallback } from 'react';
+import { useServices } from 'stremio/services';
+
+const useRating = (metaDetails: MetaDetails) => {
+    const { core } = useServices();
+
+    const like = useMemo(() => {
+        return metaDetails.like !== null && metaDetails.like.type === 'Ready' ? metaDetails.like.content : null;
+    }, [metaDetails.like]);
+    const setRating = useCallback(
+        (status: string) => {
+            if (!metaDetails.metaItem || !metaDetails.metaItem.content) {
+                return;
+            }
+            core.transport.dispatch({
+                action: 'MetaDetails',
+                args: {
+                    action: 'Rate',
+                    args: {
+                        id: metaDetails?.metaItem.content.content?.id,
+                        status: status,
+                    },
+                },
+            });
+        },
+        [metaDetails],
+    );
+
+    const onLiked = () => {
+        setRating(like === 'liked' ? null : 'liked');
+    };
+
+    const onLoved = () => {
+        setRating(like === 'loved' ? null : 'loved');
+    };
+
+    return {
+        onLiked,
+        onLoved,
+        like,
+    };
+};
+
+export default useRating;
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 8a50b59c1..bb8789be0 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -166,6 +166,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                             trailerStreams={metaDetails.metaItem.content.content.trailerStreams}
                                             inLibrary={metaDetails.metaItem.content.content.inLibrary}
                                             toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary}
+                                            metaDetails={metaDetails}
                                         />
                                     </React.Fragment>
                 }
diff --git a/src/types/models/MetaDetails.d.ts b/src/types/models/MetaDetails.d.ts
index c7eeafb1b..df615da3e 100644
--- a/src/types/models/MetaDetails.d.ts
+++ b/src/types/models/MetaDetails.d.ts
@@ -24,4 +24,6 @@ type MetaDetails = {
         content: Loadable<Stream[]>
     }[],
     title: string | null,
+    like: Loadable<string | null> | null,
+    sentLike: Loadable<string | null> | null
 };

From ad680ca2a57f9cc4c3233ca9f6df7b6695090a51 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 3 Jun 2025 15:05:43 +0300
Subject: [PATCH 02/29] refactor(useRating): simplify

---
 src/components/MetaPreview/useRating.ts | 40 ++++++++++++-------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts
index d0ae46924..117417815 100644
--- a/src/components/MetaPreview/useRating.ts
+++ b/src/components/MetaPreview/useRating.ts
@@ -5,34 +5,32 @@ const useRating = (metaDetails: MetaDetails) => {
     const { core } = useServices();
 
     const like = useMemo(() => {
-        return metaDetails.like !== null && metaDetails.like.type === 'Ready' ? metaDetails.like.content : null;
+        return metaDetails.like?.type === 'Ready' ? metaDetails.like.content : null;
     }, [metaDetails.like]);
-    const setRating = useCallback(
-        (status: string) => {
-            if (!metaDetails.metaItem || !metaDetails.metaItem.content) {
-                return;
-            }
-            core.transport.dispatch({
-                action: 'MetaDetails',
+
+    const setRating = useCallback((status: LoadableError | null) => {
+        const metaId = metaDetails.metaItem?.content?.content?.id;
+        if (!metaId) return;
+
+        core.transport.dispatch({
+            action: 'MetaDetails',
+            args: {
+                action: 'Rate',
                 args: {
-                    action: 'Rate',
-                    args: {
-                        id: metaDetails?.metaItem.content.content?.id,
-                        status: status,
-                    },
+                    id: metaId,
+                    status,
                 },
-            });
-        },
-        [metaDetails],
-    );
+            },
+        });
+    }, [metaDetails.metaItem?.content?.content?.id]);
 
-    const onLiked = () => {
+    const onLiked = useCallback(() => {
         setRating(like === 'liked' ? null : 'liked');
-    };
+    }, [like, setRating]);
 
-    const onLoved = () => {
+    const onLoved = useCallback(() => {
         setRating(like === 'loved' ? null : 'loved');
-    };
+    }, [like, setRating]);
 
     return {
         onLiked,

From beb873e34ed3fe45fec7d1ce559856b3fb858e55 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 4 Jun 2025 14:56:11 +0300
Subject: [PATCH 03/29] refactor(MetaPreview): discover fix

---
 src/components/MetaPreview/MetaPreview.js | 50 +++++++++++------------
 src/components/MetaPreview/useRating.ts   |  6 +++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index b1124e9ab..13b922736 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -27,7 +27,7 @@ const ALLOWED_LINK_REDIRECTS = [
 
 const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, metaDetails }, ref) => {
     const { t } = useTranslation();
-    const { onLiked, onLoved, like } = useRating(metaDetails);
+    const { onLiked, onLoved } = useRating(metaDetails);
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
         return Array.isArray(links) ?
@@ -222,30 +222,6 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
-                {
-                    !compact ?
-                        <ActionButton
-                            className={styles['action-button']}
-                            icon={'volume-medium'}
-                            tabIndex={compact ? -1 : 0}
-                            onClick={onLiked}
-                            tooltip={compact}
-                        />
-                        :
-                        null
-                }
-                {
-                    !compact ?
-                        <ActionButton
-                            className={styles['action-button']}
-                            icon={'volume-high'}
-                            tabIndex={compact ? -1 : 0}
-                            onClick={onLoved}
-                            tooltip={compact}
-                        />
-                        :
-                        null
-                }
                 {
                     typeof showHref === 'string' && compact ?
                         <ActionButton
@@ -284,6 +260,30 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
+                {
+                    !compact ?
+                        <ActionButton
+                            className={styles['action-button']}
+                            icon={'volume-medium'}
+                            tabIndex={compact ? -1 : 0}
+                            onClick={onLiked}
+                            tooltip={compact}
+                        />
+                        :
+                        null
+                }
+                {
+                    !compact ?
+                        <ActionButton
+                            className={styles['action-button']}
+                            icon={'volume-high'}
+                            tabIndex={compact ? -1 : 0}
+                            onClick={onLoved}
+                            tooltip={compact}
+                        />
+                        :
+                        null
+                }
             </div>
         </div>
     );
diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts
index 117417815..b954aabec 100644
--- a/src/components/MetaPreview/useRating.ts
+++ b/src/components/MetaPreview/useRating.ts
@@ -2,6 +2,12 @@ import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
 const useRating = (metaDetails: MetaDetails) => {
+    if (!metaDetails) {
+        return {
+            onLiked: () => {},
+            onLoved: () => {},
+        };
+    }
     const { core } = useServices();
 
     const like = useMemo(() => {

From 38d5290d91a8547b7a8124e10d20d857ec0ec5e4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 16:34:03 +0300
Subject: [PATCH 04/29] refactor(MetaPreview): usage of ratings

---
 .../MetaPreview/ActionButton/ActionButton.js  |  9 +++--
 .../MetaPreview/ActionButton/styles.less      | 34 ++++++++++++++++
 src/components/MetaPreview/MetaPreview.js     | 23 +++++++----
 src/components/MetaPreview/styles.less        | 20 ++++++++++
 src/components/MetaPreview/useRating.ts       | 39 ++++++++++---------
 src/routes/Discover/Discover.js               |  2 +
 src/routes/MetaDetails/MetaDetails.js         |  3 +-
 7 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/src/components/MetaPreview/ActionButton/ActionButton.js b/src/components/MetaPreview/ActionButton/ActionButton.js
index 520c0483b..0bda9a7f0 100644
--- a/src/components/MetaPreview/ActionButton/ActionButton.js
+++ b/src/components/MetaPreview/ActionButton/ActionButton.js
@@ -8,9 +8,9 @@ const { Button } = require('stremio/components');
 const styles = require('./styles');
 const { Tooltip } = require('stremio/common/Tooltips');
 
-const ActionButton = ({ className, icon, label, tooltip, ...props }) => {
+const ActionButton = ({ className, icon, label, tooltip, showLabel = true, ...props }) => {
     return (
-        <Button title={tooltip ? '' : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && !tooltip })}>
+        <Button title={tooltip ? '' : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && !tooltip && showLabel })}>
             {
                 tooltip === true ?
                     <Tooltip label={label} position={'top'} />
@@ -26,7 +26,7 @@ const ActionButton = ({ className, icon, label, tooltip, ...props }) => {
                     null
             }
             {
-                !tooltip && typeof label === 'string' && label.length > 0 ?
+                !tooltip && typeof label === 'string' && label.length > 0 && showLabel ?
                     <div className={styles['label-container']}>
                         <div className={styles['label']}>{label}</div>
                     </div>
@@ -41,7 +41,8 @@ ActionButton.propTypes = {
     className: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.string,
-    tooltip: PropTypes.bool
+    tooltip: PropTypes.bool,
+    showLabel: PropTypes.bool
 };
 
 module.exports = ActionButton;
diff --git a/src/components/MetaPreview/ActionButton/styles.less b/src/components/MetaPreview/ActionButton/styles.less
index d7a7c5f25..66821b615 100644
--- a/src/components/MetaPreview/ActionButton/styles.less
+++ b/src/components/MetaPreview/ActionButton/styles.less
@@ -49,6 +49,40 @@
             opacity: 0.9;
         }
     }
+
+    .active {
+        background-color: var(--primary-foreground-color);
+        opacity: 0.9;
+
+        .icon {
+            color: var(--primary-background-color);
+        }
+    }
+
+    &.rating-button {
+        &.active {
+            background-color: var(--primary-accent-color);
+            
+            .icon {
+                color: var(--primary-foreground-color);
+            }
+            
+            .label-container {
+                display: flex;
+                
+                .label {
+                    color: var(--primary-foreground-color);
+                    opacity: 1;
+                }
+            }
+        }
+        
+        &:not(.active) {
+            .label-container {
+                display: none;
+            }
+        }
+    }
 }
 
 @media @phone-landscape {
diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 13b922736..37adcc912 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -25,9 +25,9 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, metaDetails }, ref) => {
+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 } = useRating(metaDetails);
+    const { onLiked, onLoved, liked, loved } = useRating(metaId, like);
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
         return Array.isArray(links) ?
@@ -263,8 +263,12 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 {
                     !compact ?
                         <ActionButton
-                            className={styles['action-button']}
-                            icon={'volume-medium'}
+                            className={classnames(styles['action-button'], styles['rating-button'], {
+                                [styles['active']]: liked
+                            })}
+                            icon={'thumbs-up'}
+                            label={t('LIKE')}
+                            showLabel={liked}
                             tabIndex={compact ? -1 : 0}
                             onClick={onLiked}
                             tooltip={compact}
@@ -275,8 +279,12 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 {
                     !compact ?
                         <ActionButton
-                            className={styles['action-button']}
-                            icon={'volume-high'}
+                            className={classnames(styles['action-button'], styles['rating-button'], {
+                                [styles['active']]: loved
+                            })}
+                            icon={'heart'}
+                            label={t('LOVE')}
+                            showLabel={loved}
                             tabIndex={compact ? -1 : 0}
                             onClick={onLoved}
                             tooltip={compact}
@@ -314,7 +322,8 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    metaDetails: PropTypes.object
+    metaId: PropTypes.string,
+    like: PropTypes.object,
 };
 
 module.exports = MetaPreview;
diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
index 0725a384e..cddfbbed1 100644
--- a/src/components/MetaPreview/styles.less
+++ b/src/components/MetaPreview/styles.less
@@ -207,6 +207,26 @@
                     outline: none;
                 }
             }
+
+            &.rating-button {
+                &.active {
+                    width: auto;
+                    padding: 0 2rem;
+                    border-radius: 4rem;
+                    background-color: var(--primary-accent-color);
+
+                    &:hover, &:focus {
+                        background-color: var(--primary-accent-color);
+                        opacity: 0.8;
+                    }
+                }
+
+                &:not(.active) {
+                    &:hover, &:focus {
+                        background-color: var(--overlay-color);
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts
index b954aabec..d8600c931 100644
--- a/src/components/MetaPreview/useRating.ts
+++ b/src/components/MetaPreview/useRating.ts
@@ -1,23 +1,15 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-const useRating = (metaDetails: MetaDetails) => {
-    if (!metaDetails) {
-        return {
-            onLiked: () => {},
-            onLoved: () => {},
-        };
-    }
+type Like = {
+    content: 'liked' | 'loved' | null;
+    type: 'Ready' | 'Loading' | 'Error';
+};
+
+const useRating = (metaId?: string, like?: Like) => {
     const { core } = useServices();
 
-    const like = useMemo(() => {
-        return metaDetails.like?.type === 'Ready' ? metaDetails.like.content : null;
-    }, [metaDetails.like]);
-
-    const setRating = useCallback((status: LoadableError | null) => {
-        const metaId = metaDetails.metaItem?.content?.content?.id;
-        if (!metaId) return;
-
+    const setRating = useCallback((status: 'liked' | 'loved' | null) => {
         core.transport.dispatch({
             action: 'MetaDetails',
             args: {
@@ -28,20 +20,29 @@ const useRating = (metaDetails: MetaDetails) => {
                 },
             },
         });
-    }, [metaDetails.metaItem?.content?.content?.id]);
+    }, [core]);
+
+    const liked = useMemo(() => {
+        return like?.content === 'liked';
+    }, [like]);
+
+    const loved = useMemo(() => {
+        return like?.content === 'loved';
+    }, [like]);
 
     const onLiked = useCallback(() => {
-        setRating(like === 'liked' ? null : 'liked');
+        setRating(like?.content === 'liked' ? null : 'liked');
     }, [like, setRating]);
 
     const onLoved = useCallback(() => {
-        setRating(like === 'loved' ? null : 'loved');
+        setRating(like?.content === 'loved' ? null : 'loved');
     }, [like, setRating]);
 
     return {
         onLiked,
         onLoved,
-        like,
+        liked,
+        loved,
     };
 };
 
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 1c2b6f122..e2f976424 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -191,6 +191,8 @@ const Discover = ({ urlParams, queryParams }) => {
                             trailerStreams={selectedMetaItem.trailerStreams}
                             inLibrary={selectedMetaItem.inLibrary}
                             toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
+                            metaId={selectedMetaItem.id}
+                            like={selectedMetaItem.like}
                         />
                         :
                         discover.catalog !== null && discover.catalog.content.type === 'Loading' ?
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index bb8789be0..dbc81505e 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -166,7 +166,8 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                             trailerStreams={metaDetails.metaItem.content.content.trailerStreams}
                                             inLibrary={metaDetails.metaItem.content.content.inLibrary}
                                             toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary}
-                                            metaDetails={metaDetails}
+                                            metaId={metaDetails.metaItem.content.content.id}
+                                            like={metaDetails.like}
                                         />
                                     </React.Fragment>
                 }

From dc9cfb12f331d7b8b37f221230ea9978255172cb Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 17:54:57 +0300
Subject: [PATCH 05/29] refactor(ratings): remove dead code

---
 .../MetaPreview/ActionButton/styles.less      | 25 -------------------
 src/components/MetaPreview/MetaPreview.js     |  6 ++---
 src/components/MetaPreview/styles.less        | 16 +++---------
 src/components/MetaPreview/useRating.ts       |  6 ++---
 4 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/src/components/MetaPreview/ActionButton/styles.less b/src/components/MetaPreview/ActionButton/styles.less
index 66821b615..6f7421ffb 100644
--- a/src/components/MetaPreview/ActionButton/styles.less
+++ b/src/components/MetaPreview/ActionButton/styles.less
@@ -58,31 +58,6 @@
             color: var(--primary-background-color);
         }
     }
-
-    &.rating-button {
-        &.active {
-            background-color: var(--primary-accent-color);
-            
-            .icon {
-                color: var(--primary-foreground-color);
-            }
-            
-            .label-container {
-                display: flex;
-                
-                .label {
-                    color: var(--primary-foreground-color);
-                    opacity: 1;
-                }
-            }
-        }
-        
-        &:not(.active) {
-            .label-container {
-                display: none;
-            }
-        }
-    }
 }
 
 @media @phone-landscape {
diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 37adcc912..589150d82 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -268,10 +268,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                             })}
                             icon={'thumbs-up'}
                             label={t('LIKE')}
-                            showLabel={liked}
+                            tooltip={true}
                             tabIndex={compact ? -1 : 0}
                             onClick={onLiked}
-                            tooltip={compact}
                         />
                         :
                         null
@@ -284,10 +283,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                             })}
                             icon={'heart'}
                             label={t('LOVE')}
-                            showLabel={loved}
+                            tooltip={true}
                             tabIndex={compact ? -1 : 0}
                             onClick={onLoved}
-                            tooltip={compact}
                         />
                         :
                         null
diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
index cddfbbed1..1e9442087 100644
--- a/src/components/MetaPreview/styles.less
+++ b/src/components/MetaPreview/styles.less
@@ -210,20 +210,10 @@
 
             &.rating-button {
                 &.active {
-                    width: auto;
-                    padding: 0 2rem;
-                    border-radius: 4rem;
                     background-color: var(--primary-accent-color);
-
-                    &:hover, &:focus {
-                        background-color: var(--primary-accent-color);
-                        opacity: 0.8;
-                    }
-                }
-
-                &:not(.active) {
-                    &:hover, &:focus {
-                        background-color: var(--overlay-color);
+                    
+                    .icon {
+                        color: var(--primary-foreground-color);
                     }
                 }
             }
diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts
index d8600c931..726b5e334 100644
--- a/src/components/MetaPreview/useRating.ts
+++ b/src/components/MetaPreview/useRating.ts
@@ -20,7 +20,7 @@ const useRating = (metaId?: string, like?: Like) => {
                 },
             },
         });
-    }, [core]);
+    }, []);
 
     const liked = useMemo(() => {
         return like?.content === 'liked';
@@ -32,11 +32,11 @@ const useRating = (metaId?: string, like?: Like) => {
 
     const onLiked = useCallback(() => {
         setRating(like?.content === 'liked' ? null : 'liked');
-    }, [like, setRating]);
+    }, [like]);
 
     const onLoved = useCallback(() => {
         setRating(like?.content === 'loved' ? null : 'loved');
-    }, [like, setRating]);
+    }, [like]);
 
     return {
         onLiked,

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 06/29] 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 {

From ecfaa518a02dffb3855f178983cff01755817ceb Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:47:22 +0300
Subject: [PATCH 07/29] chore(Ratings): bump stremio-icons

---
 package-lock.json | 9 +++++----
 package.json      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 79e66d642..25de02b83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
                 "@stremio/stremio-core-web": "0.49.3",
-                "@stremio/stremio-icons": "5.4.1",
+                "@stremio/stremio-icons": "5.7.1",
                 "@stremio/stremio-video": "0.0.60",
                 "a-color-picker": "1.2.1",
                 "bowser": "2.11.0",
@@ -3398,9 +3398,10 @@
             "license": "MIT"
         },
         "node_modules/@stremio/stremio-icons": {
-            "version": "5.4.1",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.4.1.tgz",
-            "integrity": "sha512-7g4JP7tPRT1UDZxbuH/Urq7fc6te3joy8qyx/NGWIW7wO169TTISO7ZWdejzESvUVgZ/7i6rzkRmXZ3wefWcBg==",
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.7.1.tgz",
+            "integrity": "sha512-Z96p36LLX3G+ewMnFKmNZVsO/AtcHA33WQ3wGOYFubxiYADPRAkcLVU5rHIfiGSC9IUaUVhxQWTPVB9ScY4Q5Q==",
+            "license": "MIT",
             "workspaces": [
                 "react",
                 "react-native",
diff --git a/package.json b/package.json
index 5ed9368ab..bb4881f26 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.49.3",
-        "@stremio/stremio-icons": "5.4.1",
+        "@stremio/stremio-icons": "5.7.1",
         "@stremio/stremio-video": "0.0.60",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",

From 3dbcff6fb9408fb3ddeeb33e0b85b986edf548d9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:47:33 +0300
Subject: [PATCH 08/29] fix(Ratings): icons styles

---
 src/components/MetaPreview/MetaPreview.js       | 2 +-
 src/components/MetaPreview/Ratings/Ratings.less | 5 -----
 src/components/MetaPreview/Ratings/Ratings.tsx  | 4 ++--
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 3ac5abd03..c805b96fa 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -260,7 +260,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         null
                 }
                 {
-                    !compact ?
+                    !compact && like.type === 'Ready' ?
                         <Ratings
                             metaId={metaId}
                             like={like}
diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
index 096cd1957..0413fc8a2 100644
--- a/src/components/MetaPreview/Ratings/Ratings.less
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -32,11 +32,6 @@
             &: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
index 95a4c26c1..1669f3801 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -23,10 +23,10 @@ const Ratings = ({ metaId, like, className }: Props) => {
     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 })} />
+                <Icon name={liked ? 'thumbs-up' : 'thumbs-up-outline'} className={styles['icon']} />
             </div>
             <div className={styles['icon-container']} onClick={onLoved}>
-                <Icon name={'heart'} className={classNames(styles['icon'], { [styles['active']]: loved })} />
+                <Icon name={loved ? 'heart' : 'heart-outline'} className={styles['icon']} />
             </div>
         </div>
     );

From 4df2c4c9cac2d4ad754f9868d1459da5dc874b45 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:48:31 +0300
Subject: [PATCH 09/29] refactor(ActionButton): remove dead code

---
 src/components/MetaPreview/ActionButton/ActionButton.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/MetaPreview/ActionButton/ActionButton.js b/src/components/MetaPreview/ActionButton/ActionButton.js
index 0bda9a7f0..ce243cb4a 100644
--- a/src/components/MetaPreview/ActionButton/ActionButton.js
+++ b/src/components/MetaPreview/ActionButton/ActionButton.js
@@ -8,9 +8,9 @@ const { Button } = require('stremio/components');
 const styles = require('./styles');
 const { Tooltip } = require('stremio/common/Tooltips');
 
-const ActionButton = ({ className, icon, label, tooltip, showLabel = true, ...props }) => {
+const ActionButton = ({ className, icon, label, tooltip, ...props }) => {
     return (
-        <Button title={tooltip ? '' : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && !tooltip && showLabel })}>
+        <Button title={tooltip ? '' : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && !tooltip })}>
             {
                 tooltip === true ?
                     <Tooltip label={label} position={'top'} />
@@ -26,7 +26,7 @@ const ActionButton = ({ className, icon, label, tooltip, showLabel = true, ...pr
                     null
             }
             {
-                !tooltip && typeof label === 'string' && label.length > 0 && showLabel ?
+                !tooltip && typeof label === 'string' && label.length > 0 ?
                     <div className={styles['label-container']}>
                         <div className={styles['label']}>{label}</div>
                     </div>
@@ -42,7 +42,6 @@ ActionButton.propTypes = {
     icon: PropTypes.string,
     label: PropTypes.string,
     tooltip: PropTypes.bool,
-    showLabel: PropTypes.bool
 };
 
 module.exports = ActionButton;

From 6c7035db9ca49f127fa48f3b34cceae7f71f8e34 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:49:05 +0300
Subject: [PATCH 10/29] refactor(ActionButton): remove dead code (2)

---
 src/components/MetaPreview/ActionButton/styles.less | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/MetaPreview/ActionButton/styles.less b/src/components/MetaPreview/ActionButton/styles.less
index 6f7421ffb..d7a7c5f25 100644
--- a/src/components/MetaPreview/ActionButton/styles.less
+++ b/src/components/MetaPreview/ActionButton/styles.less
@@ -49,15 +49,6 @@
             opacity: 0.9;
         }
     }
-
-    .active {
-        background-color: var(--primary-foreground-color);
-        opacity: 0.9;
-
-        .icon {
-            color: var(--primary-background-color);
-        }
-    }
 }
 
 @media @phone-landscape {

From 40907e9448cc9e97346c4a82a63f92877d4a25cf Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 19:50:03 +0300
Subject: [PATCH 11/29] refactor(ActionButton): remove dead code (3)

---
 src/components/MetaPreview/ActionButton/ActionButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MetaPreview/ActionButton/ActionButton.js b/src/components/MetaPreview/ActionButton/ActionButton.js
index ce243cb4a..520c0483b 100644
--- a/src/components/MetaPreview/ActionButton/ActionButton.js
+++ b/src/components/MetaPreview/ActionButton/ActionButton.js
@@ -41,7 +41,7 @@ ActionButton.propTypes = {
     className: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.string,
-    tooltip: PropTypes.bool,
+    tooltip: PropTypes.bool
 };
 
 module.exports = ActionButton;

From 1297a2926bc27c93b61847cf5e5eac4497d701d4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 5 Jun 2025 20:06:21 +0300
Subject: [PATCH 12/29] fix(Ratings): mobile styles

---
 .../MetaPreview/Ratings/Ratings.less          | 21 +++++++++++++++++++
 src/components/MetaPreview/styles.less        |  1 -
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
index 0413fc8a2..199fb1b82 100644
--- a/src/components/MetaPreview/Ratings/Ratings.less
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -1,7 +1,12 @@
 // Copyright (C) 2017-2025 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 @height: 4rem;
 @width: 4rem;
+@height-mobile: 3rem;
+@width-mobile: 3rem;
+
 
 .ratings-container {
     display: flex;
@@ -34,4 +39,20 @@
             }
         }
     }
+}
+
+@media @phone-landscape {
+    .ratings-container {
+        height: @height-mobile;
+
+        .icon-container {
+            height: @height-mobile;
+            width: @width-mobile;
+
+            .icon {
+                width: 1.75rem;
+                height: 1.75rem;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
index 4c04cce79..a614acf25 100644
--- a/src/components/MetaPreview/styles.less
+++ b/src/components/MetaPreview/styles.less
@@ -159,7 +159,6 @@
         display: flex;
         flex-direction: row;
         align-items: flex-end;
-        max-height: 15rem;
         flex-wrap: wrap;
         padding-top: 3.5rem;
         overflow: visible;

From 64707dee21ac58a4cca11fd6225e29be1fff0e6e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Jun 2025 16:50:53 +0300
Subject: [PATCH 13/29] refactor(Ratings): disable actions when not ready

---
 src/components/MetaPreview/MetaPreview.js     | 20 +++++++++----------
 .../MetaPreview/Ratings/Ratings.less          |  8 ++++++++
 .../MetaPreview/Ratings/Ratings.tsx           |  7 ++++---
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index c805b96fa..184eeb5cf 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -233,6 +233,16 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
+                {
+                    !compact ?
+                        <Ratings
+                            metaId={metaId}
+                            like={like}
+                            className={styles['ratings']}
+                        />
+                        :
+                        null
+                }
                 {
                     linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) && !compact ?
                         <React.Fragment>
@@ -259,16 +269,6 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         :
                         null
                 }
-                {
-                    !compact && like.type === 'Ready' ?
-                        <Ratings
-                            metaId={metaId}
-                            like={like}
-                            className={styles['ratings']}
-                        />
-                        :
-                        null
-                }
             </div>
         </div>
     );
diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
index 199fb1b82..bc0a4e647 100644
--- a/src/components/MetaPreview/Ratings/Ratings.less
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -38,6 +38,14 @@
                 opacity: 1;
             }
         }
+
+        &.disabled {
+            cursor: not-allowed;
+
+            .icon {
+                opacity: 0.3;
+            }
+        }
     }
 }
 
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 1669f3801..861776f32 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2025 Smart code 203358507
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import useRating from './useRating';
 import styles from './Ratings.less';
 import Icon from '@stremio/stremio-icons/react';
@@ -19,13 +19,14 @@ type Props = {
 
 const Ratings = ({ metaId, like, className }: Props) => {
     const { onLiked, onLoved, liked, loved } = useRating(metaId, like);
+    const disabled = useMemo(() => like?.type !== 'Ready', [like]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>
-            <div className={styles['icon-container']} onClick={onLiked}>
+            <div className={classNames(styles['icon-container'], { [styles['disabled']]: disabled })} onClick={onLiked}>
                 <Icon name={liked ? 'thumbs-up' : 'thumbs-up-outline'} className={styles['icon']} />
             </div>
-            <div className={styles['icon-container']} onClick={onLoved}>
+            <div className={classNames(styles['icon-container'], { [styles['disabled']]: disabled })} onClick={onLoved}>
                 <Icon name={loved ? 'heart' : 'heart-outline'} className={styles['icon']} />
             </div>
         </div>

From 48851a62cb2ba995da6a299d7fc4f5586c7dfa96 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 6 Jun 2025 17:14:58 +0300
Subject: [PATCH 14/29] refactor(Ratings): disabled styles

---
 src/components/MetaPreview/Ratings/Ratings.less | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
index bc0a4e647..bc0ea05c8 100644
--- a/src/components/MetaPreview/Ratings/Ratings.less
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -41,10 +41,6 @@
 
         &.disabled {
             cursor: not-allowed;
-
-            .icon {
-                opacity: 0.3;
-            }
         }
     }
 }

From 945a6d16b17d2034683bf62c3a348a9cc129cd25 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 10 Jun 2025 18:27:40 +0300
Subject: [PATCH 15/29] chore(pkgs): use staging core-web

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 25de02b83..3ccc9e203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "0.49.3",
+                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
                 "@stremio/stremio-icons": "5.7.1",
                 "@stremio/stremio-video": "0.0.60",
                 "a-color-picker": "1.2.1",
@@ -3372,8 +3372,8 @@
         },
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
-            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-Ql/08LbwU99IUL6fOLy+v1Iv75boHXpunEPScKgXJALdq/OV5tZLG/IycN0O+5+50Nc/NHrI6HslnMNLTWA8JQ==",
+            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
+            "integrity": "sha512-JNOKpTiSTsfz/CaHMMlsrPd0hM+3MDnK+biT/gjG449xbFUiLROsCnb6ppE9R1gsNSn4Zko0lulg4ApePrLI9w==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
diff --git a/package.json b/package.json
index bb4881f26..59b1e84c3 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "0.49.3",
+        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
         "@stremio/stremio-icons": "5.7.1",
         "@stremio/stremio-video": "0.0.60",
         "a-color-picker": "1.2.1",

From a5ffa2677d185e9e8f0adfdd98d66c83f722fe3b Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 10 Jun 2025 18:09:11 +0200
Subject: [PATCH 16/29] refactor(MetaPreview): remove use of metaId for Rate
 action

---
 src/components/MetaPreview/MetaPreview.js       | 1 -
 src/components/MetaPreview/Ratings/Ratings.tsx  | 4 ++--
 src/components/MetaPreview/Ratings/useRating.ts | 7 ++-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 184eeb5cf..5de21dc78 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -236,7 +236,6 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 {
                     !compact ?
                         <Ratings
-                            metaId={metaId}
                             like={like}
                             className={styles['ratings']}
                         />
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 861776f32..5ede48dd9 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -17,8 +17,8 @@ type Props = {
     className?: string;
 };
 
-const Ratings = ({ metaId, like, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(metaId, like);
+const Ratings = ({ like, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(like);
     const disabled = useMemo(() => like?.type !== 'Ready', [like]);
 
     return (
diff --git a/src/components/MetaPreview/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
index c15f6605e..8d7b09cf5 100644
--- a/src/components/MetaPreview/Ratings/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -8,7 +8,7 @@ type Like = {
     type: 'Ready' | 'Loading' | 'Error';
 };
 
-const useRating = (metaId?: string, like?: Like) => {
+const useRating = (like?: Like) => {
     const { core } = useServices();
 
     const setRating = useCallback((status: 'liked' | 'loved' | null) => {
@@ -16,10 +16,7 @@ const useRating = (metaId?: string, like?: Like) => {
             action: 'MetaDetails',
             args: {
                 action: 'Rate',
-                args: {
-                    id: metaId,
-                    status,
-                },
+                args: status,
             },
         });
     }, []);

From 52e2b239123c5a822f4aa09430c193ea78e38d5f Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 10 Jun 2025 18:24:13 +0200
Subject: [PATCH 17/29] chore: update stremio-core-web

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 3ccc9e203..85cce88e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3373,7 +3373,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-JNOKpTiSTsfz/CaHMMlsrPd0hM+3MDnK+biT/gjG449xbFUiLROsCnb6ppE9R1gsNSn4Zko0lulg4ApePrLI9w==",
+            "integrity": "sha512-tbio9ChjY71jUi/iPdwmpUn/R1BLM/4WA5MDwgGVE0fLQMGkPCfG54FKp9js2Ae4gPM39jpAKYOy4FpHQovmNg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From bbe966bc88488abc2bf5e70c895ae278b2224f39 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 10 Jun 2025 18:27:34 +0200
Subject: [PATCH 18/29] chore(MetaPreview): fix format

---
 src/components/MetaPreview/MetaPreview.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 5de21dc78..91c0707df 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -25,7 +25,7 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, metaId, like }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, like }, ref) => {
     const { t } = useTranslation();
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -298,7 +298,6 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    metaId: PropTypes.string,
     like: PropTypes.object,
 };
 

From 69047471bd41b414627f6fba8b4df01143ea9e30 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Jun 2025 16:08:12 +0200
Subject: [PATCH 19/29] chore: update stremio-core-web

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 85cce88e8..37920315d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3373,7 +3373,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-tbio9ChjY71jUi/iPdwmpUn/R1BLM/4WA5MDwgGVE0fLQMGkPCfG54FKp9js2Ae4gPM39jpAKYOy4FpHQovmNg==",
+            "integrity": "sha512-996VNpwU8PTmWc4qNO92sO47+omp6P38DT7tv6pW/BUIpok1J62VGjAtXLB/BFDxZXPC6tAgg1E7lkVwMzRQMg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From 21ad21c82ea7658378cd5b858c6e6f99f87ebbed Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Jun 2025 16:08:30 +0200
Subject: [PATCH 20/29] refactor: rating logic

---
 src/components/MetaPreview/MetaPreview.js     |  6 ++---
 .../MetaPreview/Ratings/Ratings.tsx           | 13 ++++-------
 .../MetaPreview/Ratings/useRating.ts          | 23 ++++++++-----------
 src/routes/MetaDetails/MetaDetails.js         |  2 +-
 src/types/types.d.ts                          |  5 ++++
 5 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 91c0707df..2c5dc0516 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -25,7 +25,7 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, like }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, rating }, ref) => {
     const { t } = useTranslation();
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -236,7 +236,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                 {
                     !compact ?
                         <Ratings
-                            like={like}
+                            rating={rating}
                             className={styles['ratings']}
                         />
                         :
@@ -298,7 +298,7 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    like: PropTypes.object,
+    rating: PropTypes.object,
 };
 
 module.exports = MetaPreview;
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 5ede48dd9..9012735af 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -6,20 +6,15 @@ 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;
+    rating?: Rating;
     className?: string;
 };
 
-const Ratings = ({ like, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(like);
-    const disabled = useMemo(() => like?.type !== 'Ready', [like]);
+const Ratings = ({ rating, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(rating);
+    const disabled = useMemo(() => rating?.type !== 'Ready', [rating]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>
diff --git a/src/components/MetaPreview/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
index 8d7b09cf5..7df8bc925 100644
--- a/src/components/MetaPreview/Ratings/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -3,12 +3,7 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-type Like = {
-    content: 'liked' | 'loved' | null;
-    type: 'Ready' | 'Loading' | 'Error';
-};
-
-const useRating = (like?: Like) => {
+const useRating = (rating?: Rating) => {
     const { core } = useServices();
 
     const setRating = useCallback((status: 'liked' | 'loved' | null) => {
@@ -22,20 +17,20 @@ const useRating = (like?: Like) => {
     }, []);
 
     const liked = useMemo(() => {
-        return like?.content === 'liked';
-    }, [like]);
+        return rating?.content === 'liked';
+    }, [rating]);
 
     const loved = useMemo(() => {
-        return like?.content === 'loved';
-    }, [like]);
+        return rating?.content === 'loved';
+    }, [rating]);
 
     const onLiked = useCallback(() => {
-        setRating(like?.content === 'liked' ? null : 'liked');
-    }, [like]);
+        setRating(rating?.content === 'liked' ? null : 'liked');
+    }, [rating]);
 
     const onLoved = useCallback(() => {
-        setRating(like?.content === 'loved' ? null : 'loved');
-    }, [like]);
+        setRating(rating?.content === 'loved' ? null : 'loved');
+    }, [rating]);
 
     return {
         onLiked,
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index dbc81505e..1b84eacdb 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -167,7 +167,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                             inLibrary={metaDetails.metaItem.content.content.inLibrary}
                                             toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary}
                                             metaId={metaDetails.metaItem.content.content.id}
-                                            like={metaDetails.like}
+                                            rating={metaDetails.rating}
                                         />
                                     </React.Fragment>
                 }
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index 8f6d55730..ba921e306 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -68,3 +68,8 @@ type AudioTrack = {
     lang: string,
     origin: string,
 };
+
+type Rating = {
+    content: 'liked' | 'loved' | null,
+    type: 'Ready' | 'Loading' | 'Error',
+};

From b7f75d1bbe4dafc33b3cdddf870c69d64be6bbbd Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 11 Jun 2025 17:30:01 +0200
Subject: [PATCH 21/29] chore: update stremio-core-web

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 37920315d..6ddceac7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3373,7 +3373,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-996VNpwU8PTmWc4qNO92sO47+omp6P38DT7tv6pW/BUIpok1J62VGjAtXLB/BFDxZXPC6tAgg1E7lkVwMzRQMg==",
+            "integrity": "sha512-2wmHvyi4+ehgPTe1wH/4DxravZc9lQxf5bR3EFs2Uq0I5x80BpRCB2ssyVeJ3nf0MmclcPTJCvrU8oLlhHYfew==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From f4d02ac151e552549064e1e87938d6571b5d0fb3 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 12 Jun 2025 13:31:39 +0300
Subject: [PATCH 22/29] refactor(MetaPreview): ratings only on supp src

---
 src/components/MetaPreview/MetaPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 2c5dc0516..3b422dff7 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -234,7 +234,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         null
                 }
                 {
-                    !compact ?
+                    !compact && rating !== null ?
                         <Ratings
                             rating={rating}
                             className={styles['ratings']}

From df365a431d7c7e0b868952c4b902c6c690f48672 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 12 Jun 2025 15:19:59 +0200
Subject: [PATCH 23/29] chore: update stremio-core-web

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6ddceac7d..38ff7c828 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3373,7 +3373,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-2wmHvyi4+ehgPTe1wH/4DxravZc9lQxf5bR3EFs2Uq0I5x80BpRCB2ssyVeJ3nf0MmclcPTJCvrU8oLlhHYfew==",
+            "integrity": "sha512-bTD44xcmlHB/TywtudBT+G43gbNUYglSDY4BPWVzqOEoT6XcOEfm1WSa2fF8v6MAlD1rG2Z2f7RE9SxHaEaqBg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From cbd0e877299c8e0f1431df75711142bb6696eee9 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 12 Jun 2025 15:22:22 +0200
Subject: [PATCH 24/29] refactor: rating logic

---
 src/components/MetaPreview/MetaPreview.js     |  8 +++---
 .../MetaPreview/Ratings/Ratings.tsx           |  8 +++---
 .../MetaPreview/Ratings/useRating.ts          | 25 +++++++++++--------
 src/routes/MetaDetails/MetaDetails.js         |  2 +-
 src/types/models/MetaDetails.d.ts             |  3 +--
 src/types/types.d.ts                          |  8 +++---
 6 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index 3b422dff7..13717919a 100644
--- a/src/components/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -25,7 +25,7 @@ const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.metadetails.regexp
 ];
 
-const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, rating }, ref) => {
+const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, ratingInfo }, ref) => {
     const { t } = useTranslation();
     const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -234,9 +234,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         null
                 }
                 {
-                    !compact && rating !== null ?
+                    !compact && ratingInfo !== null ?
                         <Ratings
-                            rating={rating}
+                            ratingInfo={ratingInfo}
                             className={styles['ratings']}
                         />
                         :
@@ -298,7 +298,7 @@ MetaPreview.propTypes = {
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
     toggleInLibrary: PropTypes.func,
-    rating: PropTypes.object,
+    ratingInfo: PropTypes.object,
 };
 
 module.exports = MetaPreview;
diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx
index 9012735af..6bef0cc6d 100644
--- a/src/components/MetaPreview/Ratings/Ratings.tsx
+++ b/src/components/MetaPreview/Ratings/Ratings.tsx
@@ -8,13 +8,13 @@ import classNames from 'classnames';
 
 type Props = {
     metaId?: string;
-    rating?: Rating;
+    ratingInfo?: Loadable<RatingInfo>;
     className?: string;
 };
 
-const Ratings = ({ rating, className }: Props) => {
-    const { onLiked, onLoved, liked, loved } = useRating(rating);
-    const disabled = useMemo(() => rating?.type !== 'Ready', [rating]);
+const Ratings = ({ ratingInfo, className }: Props) => {
+    const { onLiked, onLoved, liked, loved } = useRating(ratingInfo);
+    const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]);
 
     return (
         <div className={classNames(styles['ratings-container'], className)}>
diff --git a/src/components/MetaPreview/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
index 7df8bc925..fdf53f551 100644
--- a/src/components/MetaPreview/Ratings/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -3,10 +3,10 @@
 import { useMemo, useCallback } from 'react';
 import { useServices } from 'stremio/services';
 
-const useRating = (rating?: Rating) => {
+const useRating = (ratingInfo?: Loadable<RatingInfo>) => {
     const { core } = useServices();
 
-    const setRating = useCallback((status: 'liked' | 'loved' | null) => {
+    const setRating = useCallback((status: RatingStatus) => {
         core.transport.dispatch({
             action: 'MetaDetails',
             args: {
@@ -16,21 +16,26 @@ const useRating = (rating?: Rating) => {
         });
     }, []);
 
+    const status = useMemo(() => {
+        const content = ratingInfo?.type === 'Ready' ? ratingInfo.content as RatingInfo : null;
+        return content?.status;
+    }, [ratingInfo]);
+
     const liked = useMemo(() => {
-        return rating?.content === 'liked';
-    }, [rating]);
+        return status === 'liked';
+    }, [status]);
 
     const loved = useMemo(() => {
-        return rating?.content === 'loved';
-    }, [rating]);
+        return status === 'loved';
+    }, [status]);
 
     const onLiked = useCallback(() => {
-        setRating(rating?.content === 'liked' ? null : 'liked');
-    }, [rating]);
+        setRating(status === 'liked' ? null : 'liked');
+    }, [status]);
 
     const onLoved = useCallback(() => {
-        setRating(rating?.content === 'loved' ? null : 'loved');
-    }, [rating]);
+        setRating(status === 'loved' ? null : 'loved');
+    }, [status]);
 
     return {
         onLiked,
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 1b84eacdb..0150734cf 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -167,7 +167,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                             inLibrary={metaDetails.metaItem.content.content.inLibrary}
                                             toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary}
                                             metaId={metaDetails.metaItem.content.content.id}
-                                            rating={metaDetails.rating}
+                                            ratingInfo={metaDetails.ratingInfo}
                                         />
                                     </React.Fragment>
                 }
diff --git a/src/types/models/MetaDetails.d.ts b/src/types/models/MetaDetails.d.ts
index df615da3e..570ca5e88 100644
--- a/src/types/models/MetaDetails.d.ts
+++ b/src/types/models/MetaDetails.d.ts
@@ -24,6 +24,5 @@ type MetaDetails = {
         content: Loadable<Stream[]>
     }[],
     title: string | null,
-    like: Loadable<string | null> | null,
-    sentLike: Loadable<string | null> | null
+    ratingInfo: Loadable<RatingInfo> | null,
 };
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index ba921e306..5a881f9e0 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -69,7 +69,9 @@ type AudioTrack = {
     origin: string,
 };
 
-type Rating = {
-    content: 'liked' | 'loved' | null,
-    type: 'Ready' | 'Loading' | 'Error',
+type RatingStatus = 'liked' | 'loved' | null;
+
+type RatingInfo = {
+    metaId: string,
+    status: RatingStatus,
 };

From 3aa421f768de495bf8d2537759d51de2715514ae Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 20 Jun 2025 20:26:13 +0300
Subject: [PATCH 25/29] chore(pkgs): fix integrity match

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 0e521a2e8..52e5190b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3376,7 +3376,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-bTD44xcmlHB/TywtudBT+G43gbNUYglSDY4BPWVzqOEoT6XcOEfm1WSa2fF8v6MAlD1rG2Z2f7RE9SxHaEaqBg==",
+            "integrity": "sha512-jDHMJ6+LX7+W+tnYbY6FL0H2BJYup7UK9icaH8W7Lr+qKZj0mZVXzlmYwv1phosdKWMS/2t/oJD6Snpb6Udnsw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From cbe3a5d35ecd90b4369db1bd37fa3cfc0b6f07e4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 24 Jun 2025 13:26:50 +0300
Subject: [PATCH 26/29] refactor(Ratings): use pointer-events to disable

---
 src/components/MetaPreview/Ratings/Ratings.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
index bc0ea05c8..f4c7d57c2 100644
--- a/src/components/MetaPreview/Ratings/Ratings.less
+++ b/src/components/MetaPreview/Ratings/Ratings.less
@@ -40,7 +40,7 @@
         }
 
         &.disabled {
-            cursor: not-allowed;
+            pointer-events: none;
         }
     }
 }

From 80fc8c755fcff437e2406cfbdd784af539616ec9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 26 Jun 2025 12:06:55 +0300
Subject: [PATCH 27/29] refactor(Ratings): rename RatingStatus to Rating

---
 src/components/MetaPreview/Ratings/useRating.ts | 2 +-
 src/types/types.d.ts                            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MetaPreview/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
index fdf53f551..286ad7284 100644
--- a/src/components/MetaPreview/Ratings/useRating.ts
+++ b/src/components/MetaPreview/Ratings/useRating.ts
@@ -6,7 +6,7 @@ import { useServices } from 'stremio/services';
 const useRating = (ratingInfo?: Loadable<RatingInfo>) => {
     const { core } = useServices();
 
-    const setRating = useCallback((status: RatingStatus) => {
+    const setRating = useCallback((status: Rating) => {
         core.transport.dispatch({
             action: 'MetaDetails',
             args: {
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index 5a881f9e0..06bbb0e19 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -69,9 +69,9 @@ type AudioTrack = {
     origin: string,
 };
 
-type RatingStatus = 'liked' | 'loved' | null;
+type Rating = 'liked' | 'loved' | null;
 
 type RatingInfo = {
     metaId: string,
-    status: RatingStatus,
+    status: Rating,
 };

From 5d88ff421216df5ff498da51f9a94dd56b3e8ee6 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 26 Jun 2025 12:11:27 +0300
Subject: [PATCH 28/29] chore: update core-web

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 52e5190b8..5be115e1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3376,7 +3376,7 @@
         "node_modules/@stremio/stremio-core-web": {
             "version": "0.49.3",
             "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-jDHMJ6+LX7+W+tnYbY6FL0H2BJYup7UK9icaH8W7Lr+qKZj0mZVXzlmYwv1phosdKWMS/2t/oJD6Snpb6Udnsw==",
+            "integrity": "sha512-lmOWr9KKTu3Ivxd/v8NpujON3J8P4AU0iu9RYPQ3UQ+nHVXckVaEzZfHpyqwBOkFsANVWKeMYMi+yMFJpkvVZg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "7.24.1"

From 64c05e92eb18fbe2bee428b3fde5589f5a346987 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Thu, 26 Jun 2025 12:53:39 +0300
Subject: [PATCH 29/29] chore(pkgs): bump core-web

---
 package-lock.json | 9 ++++-----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5be115e1c..c560b3166 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
                 "@babel/runtime": "7.26.0",
                 "@sentry/browser": "8.42.0",
                 "@stremio/stremio-colors": "5.2.0",
-                "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
+                "@stremio/stremio-core-web": "0.49.4",
                 "@stremio/stremio-icons": "5.7.1",
                 "@stremio/stremio-video": "0.0.60",
                 "a-color-picker": "1.2.1",
@@ -3374,10 +3374,9 @@
             "integrity": "sha512-dYlPgu9W/H7c9s1zmW5tiDnRenaUa4Hg1QCyOg1lhOcgSfM/bVTi5nnqX+IfvGTTUNA0zgzh8hI3o3miwnZxTg=="
         },
         "node_modules/@stremio/stremio-core-web": {
-            "version": "0.49.3",
-            "resolved": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
-            "integrity": "sha512-lmOWr9KKTu3Ivxd/v8NpujON3J8P4AU0iu9RYPQ3UQ+nHVXckVaEzZfHpyqwBOkFsANVWKeMYMi+yMFJpkvVZg==",
-            "license": "MIT",
+            "version": "0.49.4",
+            "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.49.4.tgz",
+            "integrity": "sha512-K9LJGKXs8juV3pZOHH6thWTwOShAhjFt9bLL6K1VlORAe6AiieZ2uRp9wdOwFmPX+UgzWLIOd0r2aFXJ4OsJCw==",
             "dependencies": {
                 "@babel/runtime": "7.24.1"
             }
diff --git a/package.json b/package.json
index 4490af99d..082111216 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "@babel/runtime": "7.26.0",
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
-        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/user-likes/dev/stremio-stremio-core-web-0.49.3.tgz",
+        "@stremio/stremio-core-web": "0.49.4",
         "@stremio/stremio-icons": "5.7.1",
         "@stremio/stremio-video": "0.0.60",
         "a-color-picker": "1.2.1",