Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-25 01:02:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improvements on metadetails

Browse source 
Co-Authored-By: botsy <botzy@goodmorning.dev>
This commit is contained in:
Timothy Z. 2026-05-24 15:17:25 +03:00
parent 1ac3a8c69a
commit e8faf2d65a
4 changed files with 26 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/common/useNavigateWithOrigin.ts
View file

@ -1,6 +1,9 @@
import { useLocation, useNavigate, To, Location } from 'react-router-dom';
import toPath from './toPath';
const ORIGIN_KEY = 'originPath';
const getLocationPath = (location: Location): string => location.pathname + (location.search || '');
const getOriginPath = (origin: Location | string): string => typeof origin === 'string' ? origin : getLocationPath(origin);
const normalizeTarget = (target: To): To => typeof target === 'string' ? toPath(target) : target;
export function useNavigateWithOrigin() {
const navigate = useNavigate();
@ -8,32 +11,20 @@ export function useNavigateWithOrigin() {
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, {
navigate(normalizeTarget(target), {
state: { from: origin },
});
}
function setOriginPath(path?: string) {
const finalPath = path ?? location.pathname + location.search;
sessionStorage.setItem(ORIGIN_KEY, finalPath);
}
function getStoredOrigin(fallback?: string): string | undefined {
if (location.state?.from) {
const from = location.state.from as Location;
return from.pathname + (from.search || '');
return getOriginPath(location.state.from as Location | string);
}
return sessionStorage.getItem(ORIGIN_KEY) || fallback;
return fallback;
}
return {
navigateWithOrigin,
getStoredOrigin,
setOriginPath,
};
}

8
src/components/MetaItem/MetaItem.js
View file

@ -16,7 +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 { navigateWithOrigin } = useNavigateWithOrigin();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
return deepLinks ?
@ -34,13 +34,15 @@ 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 href === 'string') {
event.preventDefault();
navigateWithOrigin(href);
} else if (typeof props.onClick === 'function') {
props.onClick(event);
}
}, [props.onClick]);
}, [href, navigateWithOrigin, props.onClick]);
const menuOnClick = React.useCallback((event) => {
event.nativeEvent.selectPrevented = true;
}, []);

11
src/routes/Calendar/List/Item/Item.tsx
View file

@ -19,7 +19,7 @@ type Props = {
const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) => {
const ref = useRef<HTMLDivElement>(null);
const { setOriginPath } = useNavigateWithOrigin();
const { navigateWithOrigin } = useNavigateWithOrigin();
const { toDayMonth } = useCalendarDate(profile);
const [active, today] = useMemo(() => [
@ -28,10 +28,15 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
], [selected, monthInfo, date]);
const onItemClick = () => {
setOriginPath();
onClick && onClick(date);
};
const onVideoClick = (event: React.MouseEvent<HTMLDivElement>, target: string) => {
event.preventDefault();
event.stopPropagation();
navigateWithOrigin(target);
};
useEffect(() => {
active && ref.current?.scrollIntoView({
block: 'start',
@ -52,7 +57,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
<div className={styles['body']}>
{
items.map(({ id, name, season, episode, deepLinks }) => (
<Button className={styles['video']} key={id} href={deepLinks.metaDetailsStreams}>
<Button className={styles['video']} key={id} href={deepLinks.metaDetailsStreams} onClick={(event) => onVideoClick(event, deepLinks.metaDetailsStreams)}>
<div className={styles['name']}>
{name}
</div>

11
src/routes/Calendar/Table/Cell/Cell.tsx
View file

@ -16,7 +16,7 @@ type Props = {
};
const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
const { setOriginPath } = useNavigateWithOrigin();
const { navigateWithOrigin } = useNavigateWithOrigin();
const [active, today] = useMemo(() => [
date.day === selected?.day,
date.day === monthInfo.today,
@ -26,10 +26,11 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
onClick && onClick(date);
};
const onPosterClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
setOriginPath();
const onPosterClick = useCallback((event: MouseEvent<HTMLDivElement>, target: string) => {
event.preventDefault();
event.stopPropagation();
}, []);
navigateWithOrigin(target);
}, [navigateWithOrigin]);
return (
<Button
@ -44,7 +45,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
<HorizontalScroll className={styles['items']}>
{
items.map(({ id, name, poster, deepLinks }) => (
<Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams} tabIndex={-1} onClick={onPosterClick}>
<Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams} tabIndex={-1} onClick={(event) => onPosterClick(event, deepLinks.metaDetailsStreams)}>
<Icon className={styles['icon']} name={'play'} />
<Image
className={styles['poster']}