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",
diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
index c0e9fb165..184eeb5cf 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 { 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 ?
+
+ :
+ null
+ }
{
linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) && !compact ?
@@ -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;
diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/MetaPreview/Ratings/Ratings.less
new file mode 100644
index 000000000..bc0ea05c8
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ 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..861776f32
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+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/Ratings/useRating.ts b/src/components/MetaPreview/Ratings/useRating.ts
new file mode 100644
index 000000000..c15f6605e
--- /dev/null
+++ b/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;
diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
index 0725a384e..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;
@@ -209,6 +208,11 @@
}
}
}
+
+ .ratings {
+ margin-bottom: 1rem;
+ margin-right: 1rem;
+ }
}
.share-prompt {
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 8a50b59c1..dbc81505e 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/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}
/>
}
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
}[],
title: string | null,
+ like: Loadable | null,
+ sentLike: Loadable | null
};