MetaDetails: Highlight Last Used Stream

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.48.4",
+        "@stremio/stremio-core-web": "https://stremio.github.io/stremio-core/stremio-core-web/feat/stremio-core-web-metadetails-suggested-stream/dev/stremio-stremio-core-web-0.48.4.tgz",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -12,7 +12,7 @@ const { useRouteFocused } = require('stremio-router');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 
-const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
+const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, lastUsed, ...props }) => {
     const profile = useProfile();
     const toast = useToast();
     const platform = usePlatform();
@@ -144,7 +144,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
 
     const renderLabel = React.useMemo(() => function renderLabel({ className, children, ...props }) {
         return (
-            <Button className={classnames(className, styles['stream-container'])} title={addonName} href={href} target={target} download={download} onClick={onClick} {...props}>
+            <Button className={classnames(className, styles['stream-container'], lastUsed===true ? styles['last-used-stream'] : '')} title={addonName} href={href} target={target} download={download} onClick={onClick} {...props}>
                 <div className={styles['info-container']}>
                     {
                         typeof thumbnail === 'string' && thumbnail.length > 0 ?
@@ -242,7 +242,8 @@ Stream.propTypes = {
             })
         })
     }),
-    onClick: PropTypes.func
+    lastUsed: PropTypes.bool,
+    onClick: PropTypes.func,
 };
 
 module.exports = Stream;

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -25,6 +25,16 @@
         background-color: var(--overlay-color);
     }
 
+    &.last-used-stream {
+        background-color: var(--tertiary-accent-color);
+        opacity: 0.8;
+
+        &:hover, &:focus {
+            background-color: var(--tertiary-accent-color);
+            opacity: 0.4;
+        }
+    }
+
     &:hover, &:focus, &:global(.selected) {
         .icon {
             opacity: 1;

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -159,6 +159,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                             progress={stream.progress}
                                             deepLinks={stream.deepLinks}
                                             onClick={stream.onClick}
+                                            lastUsed={stream.lastUsed ?? false}
                                         />
                                     ))}
                                 </div>
@@ -175,7 +176,7 @@ const StreamsList = ({ className, video, ...props }) => {
 StreamsList.propTypes = {
     className: PropTypes.string,
     streams: PropTypes.arrayOf(PropTypes.object).isRequired,
-    video: PropTypes.object
+    video: PropTypes.object,
 };
 
 module.exports = StreamsList;

src/types/models/MetaDetails.d.ts

@@ -4,6 +4,10 @@ type MetaItemMetaDetails = MetaItem & {
     deepLinks: MetaItemDeepLinks,
 };
 
+type MetaItemStream = Stream & {
+    lastUsed: boolean,
+};
+
 type MetaDetails = {
     metaExtensions: {
         url: string,
@@ -21,7 +25,7 @@ type MetaDetails = {
     } | null,
     streams: {
         addon: Addon,
-        content: Loadable<Stream[]>
+        content: Loadable<MetaItemStream[]>
     }[],
     title: string | null,
 };