feat(MetaPreview): impl user item ratings

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;

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;

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

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