fix(MetaItem): horizontal nav - go back to main origin instead using window history

src/common/useNavigateWithOrigin.ts

@@ -0,0 +1,35 @@
+import { useLocation, useNavigate, To, Location } from 'react-router-dom';
+
+const ORIGIN_KEY = 'originPath';
+
+export function useNavigateWithOrigin() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    function navigateWithOrigin(target: To) {
+        const origin: Location = location.state?.from || location;
+
+        // Save origin in sessionStorage
+        sessionStorage.setItem(ORIGIN_KEY, origin.pathname + origin.search);
+
+        // Navigate and propagate origin
+        navigate(target, {
+            state: { from: origin },
+        });
+    }
+
+    function setOriginPath(path?: string) {
+        const finalPath = path ?? location.pathname + location.search;
+        sessionStorage.setItem(ORIGIN_KEY, finalPath);
+    }
+
+    function getStoredOrigin(fallback = '/'): string {
+        return sessionStorage.getItem(ORIGIN_KEY) || fallback;
+    }
+
+    return {
+        navigateWithOrigin,
+        getStoredOrigin,
+        setOriginPath,
+    };
+}

src/components/MetaItem/MetaItem.js

@@ -6,6 +6,7 @@ const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
 const { default: Icon } = require('@stremio/stremio-icons/react');
+const { useNavigateWithOrigin } = require('stremio/common/useNavigateWithOrigin');
 const { default: Button } = require('stremio/components/Button');
 const { default: Image } = require('stremio/components/Image');
 const Multiselect = require('stremio/components/Multiselect');
@@ -15,6 +16,7 @@ const styles = require('./styles');
 
 const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
     const { t } = useTranslation();
+    const { setOriginPath } = useNavigateWithOrigin();
     const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
     const href = React.useMemo(() => {
         return deepLinks ?
@@ -32,6 +34,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
             null;
     }, [deepLinks]);
     const metaItemOnClick = React.useCallback((event) => {
+        setOriginPath();
         if (event.nativeEvent.selectPrevented) {
             event.preventDefault();
         } else if (typeof props.onClick === 'function') {

src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -13,10 +13,14 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, originPath, ...props }) => {
     const navigate = useNavigate();
     const backButtonOnClick = React.useCallback(() => {
-        navigate(-1);
+        if (originPath) {
+            navigate(originPath);
+        } else {
+            navigate(-1);
+        }
     }, []);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const [isIOSPWA] = usePWA();
@@ -84,7 +88,8 @@ HorizontalNavBar.propTypes = {
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
-    navMenu: PropTypes.bool
+    navMenu: PropTypes.bool,
+    originPath: PropTypes.string,
 };
 
 module.exports = HorizontalNavBar;

src/routes/Calendar/List/Item/Item.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
+import { useNavigateWithOrigin } from 'stremio/common/useNavigateWithOrigin';
 import { Button } from 'stremio/components';
 import useCalendarDate from '../../useCalendarDate';
 import styles from './Item.less';
@@ -18,6 +19,7 @@ type Props = {
 
 const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) => {
     const ref = useRef<HTMLDivElement>(null);
+    const { setOriginPath } = useNavigateWithOrigin();
     const { toDayMonth } = useCalendarDate(profile);
 
     const [active, today] = useMemo(() => [
@@ -26,6 +28,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
     ], [selected, monthInfo, date]);
 
     const onItemClick = () => {
+        setOriginPath();
         onClick && onClick(date);
     };
 

src/routes/Calendar/Table/Cell/Cell.tsx

@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo, MouseEvent } from 'react';
 import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
+import { useNavigateWithOrigin } from 'stremio/common/useNavigateWithOrigin';
 import { Button, HorizontalScroll, Image } from 'stremio/components';
 import styles from './Cell.less';
 
@@ -15,6 +16,7 @@ type Props = {
 };
 
 const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
+    const { setOriginPath } = useNavigateWithOrigin();
     const [active, today] = useMemo(() => [
         date.day === selected?.day,
         date.day === monthInfo.today,
@@ -25,6 +27,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
     };
 
     const onPosterClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
+        setOriginPath();
         event.stopPropagation();
     }, []);
 

src/routes/MetaDetails/MetaDetails.js

@@ -6,6 +6,7 @@ const { useTranslation } = require('react-i18next');
 const classnames = require('classnames');
 const { useServices } = require('stremio/services');
 const { withCoreSuspender } = require('stremio/common');
+const { useNavigateWithOrigin } = require('stremio/common/useNavigateWithOrigin');
 const { VerticalNavBar, HorizontalNavBar, DelayedRenderer, Image, MetaPreview, ModalDialog } = require('stremio/components');
 const StreamsList = require('./StreamsList');
 const VideosList = require('./VideosList');
@@ -18,6 +19,7 @@ const MetaDetails = () => {
     const { type, id, videoId } = useParams();
     const location = useLocation();
     const navigate = useNavigate();
+    const { getStoredOrigin } = useNavigateWithOrigin();
     const { t } = useTranslation();
     const { core } = useServices();
     const urlParams = React.useMemo(() => ({
@@ -101,7 +103,7 @@ const MetaDetails = () => {
         typeof metaDetails.metaItem.content.content?.background === 'string' &&
         metaDetails.metaItem.content.content.background.length > 0
     ), [metaPath, metaDetails]);
-
+    const originPath = React.useMemo(() => getStoredOrigin(), [getStoredOrigin]);
     return (
         <div className={styles['metadetails-container']}>
             {
@@ -122,6 +124,7 @@ const MetaDetails = () => {
                 backButton={true}
                 fullscreenButton={true}
                 navMenu={true}
+                originPath={originPath}
             />
             <div className={styles['metadetails-content']}>
                 {