Merge 48851a62cb into d75c9b1d99

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",

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",

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 { Ratings } = require('./Ratings');
 
 const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.search.regexp,
@@ -24,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 }, 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 [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
     const linksGroups = React.useMemo(() => {
@@ -232,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>
@@ -287,7 +298,9 @@ MetaPreview.propTypes = {
     })),
     trailerStreams: PropTypes.array,
     inLibrary: PropTypes.bool,
-    toggleInLibrary: PropTypes.func
+    toggleInLibrary: PropTypes.func,
+    metaId: PropTypes.string,
+    like: PropTypes.object,
 };
 
 module.exports = MetaPreview;

src/components/MetaPreview/Ratings/Ratings.less

@@ -0,0 +1,62 @@
+// 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;
+    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;
+            }
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+        }
+    }
+}
+
+@media @phone-landscape {
+    .ratings-container {
+        height: @height-mobile;
+
+        .icon-container {
+            height: @height-mobile;
+            width: @width-mobile;
+
+            .icon {
+                width: 1.75rem;
+                height: 1.75rem;
+            }
+        }
+    }
+}

src/components/MetaPreview/Ratings/Ratings.tsx

@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import React, { useMemo } 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);
+    const disabled = useMemo(() => like?.type !== 'Ready', [like]);
+
+    return (
+        <div className={classNames(styles['ratings-container'], className)}>
+            <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={classNames(styles['icon-container'], { [styles['disabled']]: disabled })} onClick={onLoved}>
+                <Icon name={loved ? 'heart' : 'heart-outline'} className={styles['icon']} />
+            </div>
+        </div>
+    );
+};
+
+export default Ratings;

src/components/MetaPreview/Ratings/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import Ratings from './Ratings';
+
+export { Ratings };

src/components/MetaPreview/Ratings/useRating.ts

@@ -0,0 +1,51 @@
+// Copyright (C) 2017-2025 Smart code 203358507
+
+import { useMemo, useCallback } from 'react';
+import { useServices } from 'stremio/services';
+
+type Like = {
+    content: 'liked' | 'loved' | null;
+    type: 'Ready' | 'Loading' | 'Error';
+};
+
+const useRating = (metaId?: string, like?: Like) => {
+    const { core } = useServices();
+
+    const setRating = useCallback((status: 'liked' | 'loved' | null) => {
+        core.transport.dispatch({
+            action: 'MetaDetails',
+            args: {
+                action: 'Rate',
+                args: {
+                    id: metaId,
+                    status,
+                },
+            },
+        });
+    }, []);
+
+    const liked = useMemo(() => {
+        return like?.content === 'liked';
+    }, [like]);
+
+    const loved = useMemo(() => {
+        return like?.content === 'loved';
+    }, [like]);
+
+    const onLiked = useCallback(() => {
+        setRating(like?.content === 'liked' ? null : 'liked');
+    }, [like]);
+
+    const onLoved = useCallback(() => {
+        setRating(like?.content === 'loved' ? null : 'loved');
+    }, [like]);
+
+    return {
+        onLiked,
+        onLoved,
+        liked,
+        loved,
+    };
+};
+
+export default useRating;

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;
@@ -209,6 +208,11 @@
             }
         }
     }
+
+    .ratings {
+        margin-bottom: 1rem;
+        margin-right: 1rem;
+    }
 }
 
 .share-prompt {

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' ?

src/routes/MetaDetails/MetaDetails.js

@@ -166,6 +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}
+                                            metaId={metaDetails.metaItem.content.content.id}
+                                            like={metaDetails.like}
                                         />
                                     </React.Fragment>
                 }

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
 };