- {
- options.map(({ label, value }) => (
-
- );
-});
-
-export default Chips;
\ No newline at end of file
diff --git a/src/common/CoreSuspender.js b/src/common/CoreSuspender.js
index a9e666b58..d225d5411 100644
--- a/src/common/CoreSuspender.js
+++ b/src/common/CoreSuspender.js
@@ -37,6 +37,7 @@ const useCoreSuspender = () => {
return React.useContext(CoreSuspenderContext);
};
+// eslint-disable-next-line @typescript-eslint/no-empty-function
const withCoreSuspender = (Component, Fallback = () => { }) => {
return function withCoreSuspender(props) {
const { core } = useServices();
diff --git a/src/common/Image/index.js b/src/common/Image/index.js
deleted file mode 100644
index e82663166..000000000
--- a/src/common/Image/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const Image = require('./Image');
-
-module.exports = Image;
diff --git a/src/common/MainNavBars/index.js b/src/common/MainNavBars/index.js
deleted file mode 100644
index 82ba41c22..000000000
--- a/src/common/MainNavBars/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const MainNavBars = require('./MainNavBars');
-
-module.exports = MainNavBars;
diff --git a/src/common/PaginationInput/PaginationInput.js b/src/common/PaginationInput/PaginationInput.js
deleted file mode 100644
index 41d740b3f..000000000
--- a/src/common/PaginationInput/PaginationInput.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const styles = require('./styles');
-
-const PaginationInput = ({ className, label, dataset, onSelect, ...props }) => {
- const prevNextButtonOnClick = React.useCallback((event) => {
- if (typeof onSelect === 'function') {
- onSelect({
- type: 'change-page',
- value: event.currentTarget.dataset.value,
- dataset: dataset,
- reactEvent: event,
- nativeEvent: event.nativeEvent
- });
- }
- }, [dataset, onSelect]);
- return (
-
-
-
- );
-};
-
-PaginationInput.propTypes = {
- className: PropTypes.string,
- label: PropTypes.string,
- dataset: PropTypes.object,
- onSelect: PropTypes.func
-};
-
-module.exports = PaginationInput;
diff --git a/src/common/PaginationInput/index.js b/src/common/PaginationInput/index.js
deleted file mode 100644
index da139e27d..000000000
--- a/src/common/PaginationInput/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const PaginationInput = require('./PaginationInput');
-
-module.exports = PaginationInput;
diff --git a/src/common/PaginationInput/styles.less b/src/common/PaginationInput/styles.less
deleted file mode 100644
index ecf6c56a4..000000000
--- a/src/common/PaginationInput/styles.less
+++ /dev/null
@@ -1,42 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
-
-.pagination-input-container {
- display: flex;
- flex-direction: row;
- border-radius: var(--border-radius);
-
- .prev-button-container, .next-button-container {
- flex: none;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--overlay-color);
-
- .icon {
- display: block;
- color: var(--primary-foreground-color);
- }
- }
-
- .label-container {
- flex: 1;
- align-self: stretch;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--overlay-color);
-
- .label {
- flex: none;
- min-width: 1.2rem;
- max-width: 3rem;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: center;
- font-weight: 500;
- color: var(--primary-foreground-color);
- }
- }
-}
\ No newline at end of file
diff --git a/src/common/Platform/Platform.tsx b/src/common/Platform/Platform.tsx
new file mode 100644
index 000000000..41e74b24f
--- /dev/null
+++ b/src/common/Platform/Platform.tsx
@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from 'react';
+import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS';
+import useShell from './useShell';
+import { name, isMobile } from './device';
+
+interface PlatformContext {
+ name: string;
+ isMobile: boolean;
+ openExternal: (url: string) => void;
+}
+
+const PlatformContext = createContext
-
-
- {label}
-
+ (null);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ callback();
+ }
+ };
+
+ document.addEventListener('mouseup', handleClickOutside);
+ document.addEventListener('touchend', handleClickOutside);
+
+ return () => {
+ document.removeEventListener('mouseup', handleClickOutside);
+ document.removeEventListener('touchend', handleClickOutside);
+ };
+ }, [callback]);
+
+ return ref;
+};
+
+export default useOutsideClick;
diff --git a/src/common/useProfile.d.ts b/src/common/useProfile.d.ts
index be5aed774..9cdea8a00 100644
--- a/src/common/useProfile.d.ts
+++ b/src/common/useProfile.d.ts
@@ -1,2 +1,2 @@
declare const useProfile: () => Profile;
-export = useProfile;
\ No newline at end of file
+export = useProfile;
diff --git a/src/common/useStreamingServer.d.ts b/src/common/useStreamingServer.d.ts
index 76d3167de..146c1500b 100644
--- a/src/common/useStreamingServer.d.ts
+++ b/src/common/useStreamingServer.d.ts
@@ -1,2 +1,2 @@
declare const useStreamingServer: () => StreamingServer;
-export = useStreamingServer;
\ No newline at end of file
+export = useStreamingServer;
diff --git a/src/common/useTranslate.js b/src/common/useTranslate.js
index 459025f46..7214a4a1e 100644
--- a/src/common/useTranslate.js
+++ b/src/common/useTranslate.js
@@ -19,7 +19,7 @@ const useTranslate = () => {
const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
if (addon && id && name) {
- const partialKey = `${addon.manifest.id.replaceAll('.', '_')}_${id}`;
+ const partialKey = `${addon.manifest.id.split('.').join('_')}_${id}`;
const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
if (type && withType) {
diff --git a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js b/src/components/AddonDetailsModal/AddonDetails/AddonDetails.js
similarity index 98%
rename from src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
rename to src/components/AddonDetailsModal/AddonDetails/AddonDetails.js
index cecd6ef3a..da5fde198 100644
--- a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
+++ b/src/components/AddonDetailsModal/AddonDetails/AddonDetails.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Image = require('stremio/common/Image');
+const { default: Image } = require('stremio/components/Image');
const styles = require('./styles');
const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {
diff --git a/src/common/AddonDetailsModal/AddonDetails/index.js b/src/components/AddonDetailsModal/AddonDetails/index.js
similarity index 100%
rename from src/common/AddonDetailsModal/AddonDetails/index.js
rename to src/components/AddonDetailsModal/AddonDetails/index.js
diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/components/AddonDetailsModal/AddonDetails/styles.less
similarity index 100%
rename from src/common/AddonDetailsModal/AddonDetails/styles.less
rename to src/components/AddonDetailsModal/AddonDetails/styles.less
diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/components/AddonDetailsModal/AddonDetailsModal.js
similarity index 91%
rename from src/common/AddonDetailsModal/AddonDetailsModal.js
rename to src/components/AddonDetailsModal/AddonDetailsModal.js
index 085925aac..332eab364 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/components/AddonDetailsModal/AddonDetailsModal.js
@@ -2,8 +2,9 @@
const React = require('react');
const PropTypes = require('prop-types');
-const ModalDialog = require('stremio/common/ModalDialog');
+const ModalDialog = require('stremio/components/ModalDialog');
const { withCoreSuspender } = require('stremio/common/CoreSuspender');
+const { usePlatform } = require('stremio/common/Platform');
const { useServices } = require('stremio/services');
const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
const useAddonDetails = require('./useAddonDetails');
@@ -43,6 +44,7 @@ function withRemoteAndLocalAddon(AddonDetails) {
const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
const { core } = useServices();
+ const platform = usePlatform();
const addonDetails = useAddonDetails(transportUrl);
const modalButtons = React.useMemo(() => {
const cancelButton = {
@@ -68,7 +70,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
label: 'Configure',
props: {
onClick: (event) => {
- window.open(transportUrl.replace('manifest.json', 'configure'));
+ platform.openExternal(transportUrl.replace('manifest.json', 'configure'));
if (typeof onCloseRequest === 'function') {
onCloseRequest({
type: 'configure',
@@ -105,7 +107,9 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
}
}
:
- addonDetails.remoteAddon !== null && addonDetails.remoteAddon.content.type === 'Ready' ?
+ addonDetails.remoteAddon !== null &&
+ addonDetails.remoteAddon.content.type === 'Ready' &&
+ !addonDetails.remoteAddon.content.content.manifest.behaviorHints.configurationRequired ?
{
className: styles['install-button'],
@@ -131,7 +135,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
}
:
null;
- return toggleButton !== null ? configureButton ? [cancelButton, configureButton, toggleButton] : [cancelButton, toggleButton] : [cancelButton];
+ return configureButton && toggleButton ? [cancelButton, configureButton, toggleButton] : configureButton ? [cancelButton, configureButton] : toggleButton ? [cancelButton, toggleButton] : [cancelButton];
}, [addonDetails, onCloseRequest]);
const modalBackground = React.useMemo(() => {
return addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background : null;
diff --git a/src/common/AddonDetailsModal/index.js b/src/components/AddonDetailsModal/index.js
similarity index 100%
rename from src/common/AddonDetailsModal/index.js
rename to src/components/AddonDetailsModal/index.js
diff --git a/src/common/AddonDetailsModal/styles.less b/src/components/AddonDetailsModal/styles.less
similarity index 93%
rename from src/common/AddonDetailsModal/styles.less
rename to src/components/AddonDetailsModal/styles.less
index 73164a677..7182d0528 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/components/AddonDetailsModal/styles.less
@@ -2,10 +2,6 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
-:import('~stremio/common/ModalDialog/styles.less') {
- label: label;
-}
-
.addon-details-modal-container {
.addon-details-container, .addon-details-message-container {
width: 40rem;
diff --git a/src/common/AddonDetailsModal/useAddonDetails.js b/src/components/AddonDetailsModal/useAddonDetails.js
similarity index 100%
rename from src/common/AddonDetailsModal/useAddonDetails.js
rename to src/components/AddonDetailsModal/useAddonDetails.js
diff --git a/src/components/BottomSheet/BottomSheet.less b/src/components/BottomSheet/BottomSheet.less
new file mode 100644
index 000000000..6428e5081
--- /dev/null
+++ b/src/components/BottomSheet/BottomSheet.less
@@ -0,0 +1,107 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.bottom-sheet {
+ z-index: 99;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+
+ .backdrop {
+ z-index: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--primary-background-color);
+ opacity: 0.8;
+ transition: opacity 0.1s ease-out;
+ cursor: pointer;
+ }
+
+ .container {
+ z-index: 1;
+ position: absolute;
+ bottom: 0;
+ max-height: calc(100% - var(--horizontal-nav-bar-size));
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ padding-bottom: 1rem;
+ border-radius: 2rem 2rem 0 0;
+ background-color: var(--modal-background-color);
+ box-shadow: var(--outer-glow);
+ overflow: hidden;
+
+ &:not(.dragging) {
+ transition: transform 0.1s ease-out;
+ }
+
+ .heading {
+ position: relative;
+
+ .handle {
+ position: relative;
+ height: 2.5rem;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &::after {
+ content: "";
+ height: 0.3rem;
+ width: 3rem;
+ border-radius: 1rem;
+ background-color: var(--primary-foreground-color);
+ opacity: 0.3;
+ }
+ }
+
+ .title {
+ position: relative;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 1rem;
+ padding-left: 1.5rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--primary-foreground-color);
+ }
+ }
+
+ .content {
+ position: relative;
+ overflow-y: auto;
+ }
+ }
+}
+
+@media only screen and (min-width: @small) and (orientation: portait) {
+ .bottom-sheet {
+ display: none;
+ }
+}
+
+@media only screen and (min-width: @xsmall) and (orientation: landscape) {
+ .bottom-sheet {
+ display: none;
+ }
+}
+
+@media only screen and (orientation: landscape) {
+ .bottom-sheet {
+ .container {
+ max-width: 90%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
new file mode 100644
index 000000000..7ebfb79d8
--- /dev/null
+++ b/src/components/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,87 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import useBinaryState from 'stremio/common/useBinaryState';
+import styles from './BottomSheet.less';
+
+const CLOSE_THRESHOLD = 100;
+
+type Props = {
+ children: JSX.Element,
+ title: string,
+ show: boolean,
+ onClose: () => void,
+};
+
+const BottomSheet = ({ children, title, show, onClose }: Props) => {
+ const containerRef = useRef(null);
+ const [startOffset, setStartOffset] = useState(0);
+ const [offset, setOffset] = useState(0);
+
+ const [opened, open, close] = useBinaryState();
+
+ const containerStyle = useMemo(() => ({
+ transform: `translateY(${offset}px)`
+ }), [offset]);
+
+ const containerHeight = () => containerRef.current?.offsetHeight ?? 0;
+
+ const onCloseRequest = () => setOffset(containerHeight());
+
+ const onTouchStart = ({ touches }: React.TouchEvent) => {
+ const { clientY } = touches[0];
+ setStartOffset(clientY);
+ };
+
+ const onTouchMove = useCallback(({ touches }: React.TouchEvent) => {
+ const { clientY } = touches[0];
+ setOffset(Math.max(0, clientY - startOffset));
+ }, [startOffset]);
+
+ const onTouchEnd = () => {
+ setOffset((offset) => offset > CLOSE_THRESHOLD ? containerHeight() : 0);
+ setStartOffset(0);
+ };
+
+ const onTransitionEnd = useCallback(() => {
+ (offset === containerHeight()) && close();
+ }, [offset]);
+
+ useEffect(() => {
+ setOffset(0);
+ show ? open() : close();
+ }, [show]);
+
+ useEffect(() => {
+ !opened && onClose();
+ }, [opened]);
+
+ return opened && createPortal((
+ ) => void,
+ onDoubleClick?: () => void,
+};
+
+const Button = forwardRef(({ className, href, disabled, children, onLongPress, onDoubleClick, ...props }: Props, ref) => {
+ const longPress = useLongPress(onLongPress!, { detect: LongPressEventType.Pointer });
+
+ const onKeyDown = useCallback((event: React.KeyboardEvent) => {
+ if (typeof props.onKeyDown === 'function') {
+ props.onKeyDown(event);
+ }
+
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ // @ts-expect-error: Property 'buttonClickPrevented' does not exist on type 'KeyboardEvent'.
+ if (!event.nativeEvent.buttonClickPrevented) {
+ event.currentTarget.click();
+ }
+ }
+ }, [props.onKeyDown]);
+
+ const onMouseDown = useCallback((event: React.MouseEvent) => {
+ if (typeof props.onMouseDown === 'function') {
+ props.onMouseDown(event);
+ }
+
+ // @ts-expect-error: Property 'buttonBlurPrevented' does not exist on type 'MouseEvent'.
+ if (!event.nativeEvent.buttonBlurPrevented) {
+ event.preventDefault();
+ if (document.activeElement instanceof HTMLElement) {
+ document.activeElement.blur();
+ }
+ }
+ }, [props.onMouseDown]);
+
+ return createElement(
+ typeof href === 'string' && href.length > 0 ? 'a' : 'div',
+ {
+ tabIndex: 0,
+ ...props,
+ ref,
+ className: classNames(className, styles['button-container'], { 'disabled': disabled }),
+ href,
+ onKeyDown,
+ onMouseDown,
+ onDoubleClick,
+ ...longPress()
+ },
+ children
+ );
+});
+
+export default Button;
+
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
new file mode 100644
index 000000000..c59819851
--- /dev/null
+++ b/src/components/Button/index.ts
@@ -0,0 +1,6 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import Button from './Button';
+
+export default Button;
+
diff --git a/src/common/Chips/Chip/Chip.less b/src/components/Chips/Chip/Chip.less
similarity index 91%
rename from src/common/Chips/Chip/Chip.less
rename to src/components/Chips/Chip/Chip.less
index 2adbcb727..4261f35e9 100644
--- a/src/common/Chips/Chip/Chip.less
+++ b/src/components/Chips/Chip/Chip.less
@@ -16,18 +16,19 @@
text-transform: capitalize;
padding: 0 1.75rem;
border-radius: @height;
- -webkit-tap-highlight-color: transparent;
background-color: transparent;
user-select: none;
overflow: hidden;
+ opacity: 0.6;
&:hover {
background-color: var(--overlay-color);
transition: background-color 0.1s ease-out;
+ opacity: 1;
}
&.active {
- font-weight: 700;
+ opacity: 1;
background-color: var(--quaternary-accent-color);
transition: background-color 0.1s ease-in;
}
diff --git a/src/common/Chips/Chip/Chip.tsx b/src/components/Chips/Chip/Chip.tsx
similarity index 94%
rename from src/common/Chips/Chip/Chip.tsx
rename to src/components/Chips/Chip/Chip.tsx
index 403d198af..cbb2487f7 100644
--- a/src/common/Chips/Chip/Chip.tsx
+++ b/src/components/Chips/Chip/Chip.tsx
@@ -2,7 +2,7 @@
import React, { MouseEvent, memo, useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
-import Button from 'stremio/common/Button';
+import { Button } from 'stremio/components';
import styles from './Chip.less';
type Props = {
@@ -42,4 +42,4 @@ const Chip = memo(({ label, value, active, onSelect }: Props) => {
);
});
-export default Chip;
\ No newline at end of file
+export default Chip;
diff --git a/src/common/Chips/Chip/index.ts b/src/components/Chips/Chip/index.ts
similarity index 78%
rename from src/common/Chips/Chip/index.ts
rename to src/components/Chips/Chip/index.ts
index 9713aecaa..f540cf064 100644
--- a/src/common/Chips/Chip/index.ts
+++ b/src/components/Chips/Chip/index.ts
@@ -1,4 +1,4 @@
// Copyright (C) 2017-2024 Smart code 203358507
import Chip from './Chip';
-export default Chip;
\ No newline at end of file
+export default Chip;
diff --git a/src/components/Chips/Chips.less b/src/components/Chips/Chips.less
new file mode 100644
index 000000000..7d7e15d18
--- /dev/null
+++ b/src/components/Chips/Chips.less
@@ -0,0 +1,10 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+.chips {
+ position: relative;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 1rem;
+}
\ No newline at end of file
diff --git a/src/components/Chips/Chips.tsx b/src/components/Chips/Chips.tsx
new file mode 100644
index 000000000..ebd50dca3
--- /dev/null
+++ b/src/components/Chips/Chips.tsx
@@ -0,0 +1,37 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { memo } from 'react';
+import { HorizontalScroll } from 'stremio/components';
+import Chip from './Chip';
+import styles from './Chips.less';
+
+type Option = {
+ label: string,
+ value: string,
+};
+
+type Props = {
+ options: Option[],
+ selected: string[],
+ onSelect: (value: string) => {},
+};
+
+const Chips = memo(({ options, selected, onSelect }: Props) => {
+ return (
+
+ {
+ options.map(({ label, value }) => (
+
+ );
+});
+
+export default Chips;
diff --git a/src/common/Chips/index.ts b/src/components/Chips/index.ts
similarity index 78%
rename from src/common/Chips/index.ts
rename to src/components/Chips/index.ts
index 883af30d1..b92e80c79 100644
--- a/src/common/Chips/index.ts
+++ b/src/components/Chips/index.ts
@@ -1,4 +1,4 @@
// Copyright (C) 2017-2024 Smart code 203358507
import Chips from './Chips';
-export default Chips;
\ No newline at end of file
+export default Chips;
diff --git a/src/common/ColorInput/ColorInput.js b/src/components/ColorInput/ColorInput.js
similarity index 97%
rename from src/common/ColorInput/ColorInput.js
rename to src/components/ColorInput/ColorInput.js
index 2127b959f..88e9189ef 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/components/ColorInput/ColorInput.js
@@ -5,8 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const AColorPicker = require('a-color-picker');
const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button, ModalDialog } = require('stremio/components');
const useBinaryState = require('stremio/common/useBinaryState');
const ColorPicker = require('./ColorPicker');
const styles = require('./styles');
diff --git a/src/common/ColorInput/ColorPicker/ColorPicker.js b/src/components/ColorInput/ColorPicker/ColorPicker.js
similarity index 100%
rename from src/common/ColorInput/ColorPicker/ColorPicker.js
rename to src/components/ColorInput/ColorPicker/ColorPicker.js
diff --git a/src/common/ColorInput/ColorPicker/index.js b/src/components/ColorInput/ColorPicker/index.js
similarity index 100%
rename from src/common/ColorInput/ColorPicker/index.js
rename to src/components/ColorInput/ColorPicker/index.js
diff --git a/src/common/ColorInput/ColorPicker/styles.less b/src/components/ColorInput/ColorPicker/styles.less
similarity index 100%
rename from src/common/ColorInput/ColorPicker/styles.less
rename to src/components/ColorInput/ColorPicker/styles.less
diff --git a/src/common/ColorInput/index.js b/src/components/ColorInput/index.js
similarity index 100%
rename from src/common/ColorInput/index.js
rename to src/components/ColorInput/index.js
diff --git a/src/common/ColorInput/styles.less b/src/components/ColorInput/styles.less
similarity index 93%
rename from src/common/ColorInput/styles.less
rename to src/components/ColorInput/styles.less
index 7ed494061..56bd1f601 100644
--- a/src/common/ColorInput/styles.less
+++ b/src/components/ColorInput/styles.less
@@ -17,7 +17,6 @@
align-items: center;
justify-content: center;
padding: 0 0.5rem;
- border: thin solid @color-surface-light5-20;
pointer-events: none;
.transparent-label {
diff --git a/src/common/ContinueWatchingItem/ContinueWatchingItem.js b/src/components/ContinueWatchingItem/ContinueWatchingItem.js
similarity index 97%
rename from src/common/ContinueWatchingItem/ContinueWatchingItem.js
rename to src/components/ContinueWatchingItem/ContinueWatchingItem.js
index 7d1ab824d..8a0143619 100644
--- a/src/common/ContinueWatchingItem/ContinueWatchingItem.js
+++ b/src/components/ContinueWatchingItem/ContinueWatchingItem.js
@@ -3,7 +3,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const { useServices } = require('stremio/services');
-const LibItem = require('stremio/common/LibItem');
+const LibItem = require('stremio/components/LibItem');
const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => {
const { core } = useServices();
diff --git a/src/common/ContinueWatchingItem/index.js b/src/components/ContinueWatchingItem/index.js
similarity index 100%
rename from src/common/ContinueWatchingItem/index.js
rename to src/components/ContinueWatchingItem/index.js
diff --git a/src/common/DelayedRenderer/DelayedRenderer.js b/src/components/DelayedRenderer/DelayedRenderer.js
similarity index 90%
rename from src/common/DelayedRenderer/DelayedRenderer.js
rename to src/components/DelayedRenderer/DelayedRenderer.js
index cbf976ddb..940bc96bd 100644
--- a/src/common/DelayedRenderer/DelayedRenderer.js
+++ b/src/components/DelayedRenderer/DelayedRenderer.js
@@ -17,7 +17,8 @@ const DelayedRenderer = ({ children, delay }) => {
};
DelayedRenderer.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
+ delay: PropTypes.number,
};
module.exports = DelayedRenderer;
diff --git a/src/common/DelayedRenderer/index.js b/src/components/DelayedRenderer/index.js
similarity index 100%
rename from src/common/DelayedRenderer/index.js
rename to src/components/DelayedRenderer/index.js
diff --git a/src/common/EventModal/EventModal.js b/src/components/EventModal/EventModal.js
similarity index 96%
rename from src/common/EventModal/EventModal.js
rename to src/components/EventModal/EventModal.js
index dcd9ca626..917190ba1 100644
--- a/src/common/EventModal/EventModal.js
+++ b/src/components/EventModal/EventModal.js
@@ -2,8 +2,7 @@
const React = require('react');
const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button, ModalDialog } = require('stremio/components');
const useEvents = require('./useEvents');
const styles = require('./styles');
const { default: Icon } = require('@stremio/stremio-icons/react');
diff --git a/src/common/EventModal/index.js b/src/components/EventModal/index.js
similarity index 100%
rename from src/common/EventModal/index.js
rename to src/components/EventModal/index.js
diff --git a/src/common/EventModal/styles.less b/src/components/EventModal/styles.less
similarity index 78%
rename from src/common/EventModal/styles.less
rename to src/components/EventModal/styles.less
index 67cfabb34..95279ae32 100644
--- a/src/common/EventModal/styles.less
+++ b/src/components/EventModal/styles.less
@@ -2,7 +2,7 @@
@import (reference) '~stremio/common/screen-sizes.less';
-:import('~stremio/common/ModalDialog/styles.less') {
+:import('~stremio/components/ModalDialog/styles.less') {
modal-dialog-content: modal-dialog-content;
modal-dialog-container: modal-dialog-container;
}
@@ -19,26 +19,30 @@
flex-direction: column;
align-items: center;
overflow: visible;
+ position: relative;
- .modal-dialog-content {
+ .body-container {
overflow-y: visible;
}
-
+
.image {
- width: 100%;
- height: 100%;
- margin-top: -10rem;
+ position: absolute;
+ top: -10rem;
+ left: 50%;
+ transform: translateX(-50%);
+ object-fit: cover;
+ width: 30rem;
+ height: 30rem;
}
-
+
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
- padding: 1rem 4rem;
- margin-top: -7rem;
-
+ padding: 10rem 4rem 0;
+
.title-container {
display: flex;
flex-direction: column;
@@ -50,7 +54,7 @@
text-align: center;
padding: 0 6rem;
}
-
+
.label {
color: var(--primary-foreground-color);
font-size: 1rem;
@@ -58,7 +62,7 @@
opacity: 0.5;
}
}
-
+
.addon-container {
display: flex;
align-items: center;
@@ -76,19 +80,19 @@
color: var(--primary-foreground-color);
}
}
-
+
.action-button {
background-color: var(--primary-foreground-color);
border: 2px solid var(--primary-foreground-color);
padding: 0.8rem 2rem;
border-radius: 2rem;
-
+
.button-label {
color: var(--primary-accent-color);
font-size: 1rem;
font-weight: 700;
}
-
+
&:hover {
background-color: transparent;
}
@@ -96,15 +100,34 @@
}
}
}
+}
- @media only screen and (max-width: @minimum) {
+@media (orientation: landscape) and (max-height: @minimum) {
+ .event-modal {
.modal-dialog-container {
.modal-dialog-content {
- .image {
- height: 125%;
- width: 125%;
+ overflow-y: auto;
+
+ .body-container {
+ overflow-y: auto;
}
+ .image {
+ display: none;
+ }
+
+ .info-container {
+ padding: 1rem 4rem 0;
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @minimum) {
+ .event-modal {
+ .modal-dialog-container {
+ .modal-dialog-content {
.info-container {
.title-container {
.title {
@@ -120,4 +143,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/common/EventModal/useEvents.js b/src/components/EventModal/useEvents.js
similarity index 100%
rename from src/common/EventModal/useEvents.js
rename to src/components/EventModal/useEvents.js
diff --git a/src/common/Chips/Chips.less b/src/components/HorizontalScroll/HorizontalScroll.less
similarity index 82%
rename from src/common/Chips/Chips.less
rename to src/components/HorizontalScroll/HorizontalScroll.less
index cf0e85917..cb4b9be7c 100644
--- a/src/common/Chips/Chips.less
+++ b/src/components/HorizontalScroll/HorizontalScroll.less
@@ -2,13 +2,8 @@
@mask-width: 10%;
-.chips {
+.horizontal-scroll {
position: relative;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- gap: 1rem;
overflow-x: auto;
&.left {
@@ -22,4 +17,4 @@
&.center {
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/HorizontalScroll/HorizontalScroll.tsx b/src/components/HorizontalScroll/HorizontalScroll.tsx
new file mode 100644
index 000000000..b4c23b19b
--- /dev/null
+++ b/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -0,0 +1,40 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './HorizontalScroll.less';
+
+const SCROLL_THRESHOLD = 1;
+
+type Props = {
+ className: string,
+ children: React.ReactNode,
+};
+
+const HorizontalScroll = ({ className, children }: Props) => {
+ const ref = useRef(null);
+ const [scrollPosition, setScrollPosition] = useState('left');
+
+ useEffect(() => {
+ const onScroll = ({ target }: Event) => {
+ const { scrollLeft, scrollWidth, offsetWidth } = target as HTMLDivElement;
+
+ setScrollPosition(() => (
+ (scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
+ (scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
+ 'center'
+ ));
+ };
+
+ ref.current?.addEventListener('scroll', onScroll);
+ return () => ref.current?.removeEventListener('scroll', onScroll);
+ }, []);
+
+ return (
+ ) => void,
+};
+
+const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }: Props) => {
+ const [broken, setBroken] = useState(false);
+ const onError = useCallback((event: React.SyntheticEvent) => {
if (typeof props.onError === 'function') {
props.onError(event);
}
setBroken(true);
}, [props.onError]);
- React.useLayoutEffect(() => {
+
+ useLayoutEffect(() => {
setBroken(false);
}, [src]);
+
return (broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
typeof renderFallback === 'function' ?
renderFallback()
:
- 
+
:
- 
;
+ ;
};
-Image.propTypes = {
- className: PropTypes.string,
- src: PropTypes.string,
- alt: PropTypes.string,
- fallbackSrc: PropTypes.string,
- renderFallback: PropTypes.func,
- onError: PropTypes.func
-};
-
-module.exports = Image;
+export default Image;
diff --git a/src/components/Image/index.ts b/src/components/Image/index.ts
new file mode 100644
index 000000000..1b250a051
--- /dev/null
+++ b/src/components/Image/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import Image from './Image';
+
+export default Image;
diff --git a/src/common/LibItem/LibItem.js b/src/components/LibItem/LibItem.js
similarity index 98%
rename from src/common/LibItem/LibItem.js
rename to src/components/LibItem/LibItem.js
index 141450a57..a42def27f 100644
--- a/src/common/LibItem/LibItem.js
+++ b/src/components/LibItem/LibItem.js
@@ -3,7 +3,7 @@
const React = require('react');
const { useServices } = require('stremio/services');
const PropTypes = require('prop-types');
-const MetaItem = require('stremio/common/MetaItem');
+const MetaItem = require('stremio/components/MetaItem');
const { t } = require('i18next');
const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
diff --git a/src/common/LibItem/index.js b/src/components/LibItem/index.js
similarity index 100%
rename from src/common/LibItem/index.js
rename to src/components/LibItem/index.js
diff --git a/src/common/MainNavBars/styles.less b/src/components/MainNavBars/MainNavBars.less
similarity index 60%
rename from src/common/MainNavBars/styles.less
rename to src/components/MainNavBars/MainNavBars.less
index e76192fbb..2ee57b505 100644
--- a/src/common/MainNavBars/styles.less
+++ b/src/components/MainNavBars/MainNavBars.less
@@ -1,10 +1,15 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.main-nav-bars-container {
position: relative;
z-index: 0;
+ overflow: clip;
+ margin-left: env(safe-area-inset-left, 0px);
+ margin-right: env(safe-area-inset-right, 0px);
+ width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
+ height: 100%;
.horizontal-nav-bar {
position: absolute;
@@ -17,18 +22,20 @@
.vertical-nav-bar {
position: absolute;
top: var(--horizontal-nav-bar-size);
- bottom: 0;
+ bottom: var(--calculated-bottom-safe-inset);
left: 0;
z-index: 1;
}
.nav-content-container {
position: absolute;
- top: var(--horizontal-nav-bar-size);
+ padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+ top: 0;
right: 0;
bottom: 0;
left: var(--vertical-nav-bar-size);
z-index: 0;
+ overflow: scroll;
}
}
@@ -36,7 +43,7 @@
.main-nav-bars-container {
.nav-content-container {
left: 0;
- bottom: var(--vertical-nav-bar-size);
+ padding-bottom: var(--vertical-nav-bar-size);
}
.vertical-nav-bar {
diff --git a/src/common/MainNavBars/MainNavBars.js b/src/components/MainNavBars/MainNavBars.tsx
similarity index 66%
rename from src/common/MainNavBars/MainNavBars.js
rename to src/components/MainNavBars/MainNavBars.tsx
index 542d68fe4..43d08f5c8 100644
--- a/src/common/MainNavBars/MainNavBars.js
+++ b/src/components/MainNavBars/MainNavBars.tsx
@@ -1,20 +1,27 @@
// Copyright (C) 2017-2023 Smart code 203358507
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
-const styles = require('./styles');
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import { VerticalNavBar, HorizontalNavBar } from 'stremio/components/NavBar';
+import styles from './MainNavBars.less';
const TABS = [
{ id: 'board', label: 'Board', icon: 'home', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'library', href: '#/library' },
+ { id: 'calendar', label: 'Calendar', icon: 'calendar', href: '#/calendar' },
{ id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
{ id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
];
-const MainNavBars = React.memo(({ className, route, query, children }) => {
+type Props = {
+ className: string,
+ route?: string,
+ query?: string,
+ children?: React.ReactNode,
+};
+
+const MainNavBars = memo(({ className, route, query, children }: Props) => {
return (
{
query={query}
backButton={false}
searchBar={true}
- addonsButton={true}
fullscreenButton={true}
navMenu={true}
/>
@@ -37,13 +43,5 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
);
});
-MainNavBars.displayName = 'MainNavBars';
+export default MainNavBars;
-MainNavBars.propTypes = {
- className: PropTypes.string,
- route: PropTypes.string,
- query: PropTypes.string,
- children: PropTypes.node
-};
-
-module.exports = MainNavBars;
diff --git a/src/components/MainNavBars/index.ts b/src/components/MainNavBars/index.ts
new file mode 100644
index 000000000..a934e67ca
--- /dev/null
+++ b/src/components/MainNavBars/index.ts
@@ -0,0 +1,6 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import MainNavBars from './MainNavBars';
+
+export default MainNavBars;
+
diff --git a/src/common/MetaItem/MetaItem.js b/src/components/MetaItem/MetaItem.js
similarity index 97%
rename from src/common/MetaItem/MetaItem.js
rename to src/components/MetaItem/MetaItem.js
index 5656ea6da..1e19054c1 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/components/MetaItem/MetaItem.js
@@ -6,9 +6,9 @@ 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 Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
-const Multiselect = require('stremio/common/Multiselect');
+const { default: Button } = require('stremio/components/Button');
+const { default: Image } = require('stremio/components/Image');
+const Multiselect = require('stremio/components/Multiselect');
const useBinaryState = require('stremio/common/useBinaryState');
const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
const styles = require('./styles');
diff --git a/src/common/MetaItem/index.js b/src/components/MetaItem/index.js
similarity index 100%
rename from src/common/MetaItem/index.js
rename to src/components/MetaItem/index.js
diff --git a/src/common/MetaItem/styles.less b/src/components/MetaItem/styles.less
similarity index 96%
rename from src/common/MetaItem/styles.less
rename to src/components/MetaItem/styles.less
index c2d094ac9..359525b28 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/components/MetaItem/styles.less
@@ -1,29 +1,23 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
-:import('~stremio/common/Popup/styles.less') {
+:import('~stremio/components/Popup/styles.less') {
popup-menu-container: menu-container;
}
-:import('~stremio/common/Multiselect/styles.less') {
+:import('~stremio/components/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
multiselect-option-container: option-container;
multiselect-option-label: label;
}
-:import('~stremio/common/PlayIconCircleCentered/styles.less') {
- play-icon-circle-centered-background: background;
- play-icon-circle-centered-icon: icon;
-}
-
@play-icon-size: 4rem;
.meta-item-container {
padding: 1rem;
overflow: visible;
- -webkit-tap-highlight-color: transparent;
&:hover, &:focus, &:global(.active), &:global(.selected) {
outline-style: none;
@@ -166,6 +160,7 @@
object-position: center;
object-fit: cover;
opacity: 0.9;
+ overflow-clip-margin: unset;
}
.placeholder-icon {
diff --git a/src/common/MetaPreview/ActionButton/ActionButton.js b/src/components/MetaPreview/ActionButton/ActionButton.js
similarity index 96%
rename from src/common/MetaPreview/ActionButton/ActionButton.js
rename to src/components/MetaPreview/ActionButton/ActionButton.js
index 8e2fcd11b..520c0483b 100644
--- a/src/common/MetaPreview/ActionButton/ActionButton.js
+++ b/src/components/MetaPreview/ActionButton/ActionButton.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
const styles = require('./styles');
const { Tooltip } = require('stremio/common/Tooltips');
diff --git a/src/common/MetaPreview/ActionButton/index.js b/src/components/MetaPreview/ActionButton/index.js
similarity index 100%
rename from src/common/MetaPreview/ActionButton/index.js
rename to src/components/MetaPreview/ActionButton/index.js
diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/components/MetaPreview/ActionButton/styles.less
similarity index 100%
rename from src/common/MetaPreview/ActionButton/styles.less
rename to src/components/MetaPreview/ActionButton/styles.less
diff --git a/src/common/MetaPreview/MetaLinks/MetaLinks.js b/src/components/MetaPreview/MetaLinks/MetaLinks.js
similarity index 96%
rename from src/common/MetaPreview/MetaLinks/MetaLinks.js
rename to src/components/MetaPreview/MetaLinks/MetaLinks.js
index 9bb6ee13d..ce2cf341a 100644
--- a/src/common/MetaPreview/MetaLinks/MetaLinks.js
+++ b/src/components/MetaPreview/MetaLinks/MetaLinks.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
const styles = require('./styles');
const MetaLinks = ({ className, label, links }) => {
diff --git a/src/common/MetaPreview/MetaLinks/index.js b/src/components/MetaPreview/MetaLinks/index.js
similarity index 100%
rename from src/common/MetaPreview/MetaLinks/index.js
rename to src/components/MetaPreview/MetaLinks/index.js
diff --git a/src/common/MetaPreview/MetaLinks/styles.less b/src/components/MetaPreview/MetaLinks/styles.less
similarity index 100%
rename from src/common/MetaPreview/MetaLinks/styles.less
rename to src/components/MetaPreview/MetaLinks/styles.less
diff --git a/src/common/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js
similarity index 98%
rename from src/common/MetaPreview/MetaPreview.js
rename to src/components/MetaPreview/MetaPreview.js
index d5fd92b1a..c4eb47c0a 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/components/MetaPreview/MetaPreview.js
@@ -6,10 +6,10 @@ const classnames = require('classnames');
const UrlUtils = require('url');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
-const ModalDialog = require('stremio/common/ModalDialog');
-const SharePrompt = require('stremio/common/SharePrompt');
+const { default: Button } = require('stremio/components/Button');
+const { default: Image } = require('stremio/components/Image');
+const ModalDialog = require('stremio/components/ModalDialog');
+const SharePrompt = require('stremio/components/SharePrompt');
const CONSTANTS = require('stremio/common/CONSTANTS');
const routesRegexp = require('stremio/common/routesRegexp');
const useBinaryState = require('stremio/common/useBinaryState');
diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js b/src/components/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
similarity index 100%
rename from src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
rename to src/components/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/index.js b/src/components/MetaPreview/MetaPreviewPlaceholder/index.js
similarity index 100%
rename from src/common/MetaPreview/MetaPreviewPlaceholder/index.js
rename to src/components/MetaPreview/MetaPreviewPlaceholder/index.js
diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less b/src/components/MetaPreview/MetaPreviewPlaceholder/styles.less
similarity index 100%
rename from src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
rename to src/components/MetaPreview/MetaPreviewPlaceholder/styles.less
diff --git a/src/common/MetaPreview/index.js b/src/components/MetaPreview/index.js
similarity index 100%
rename from src/common/MetaPreview/index.js
rename to src/components/MetaPreview/index.js
diff --git a/src/common/MetaPreview/styles.less b/src/components/MetaPreview/styles.less
similarity index 100%
rename from src/common/MetaPreview/styles.less
rename to src/components/MetaPreview/styles.less
diff --git a/src/common/MetaRow/MetaRow.js b/src/components/MetaRow/MetaRow.js
similarity index 98%
rename from src/common/MetaRow/MetaRow.js
rename to src/components/MetaRow/MetaRow.js
index 7d023202a..9f076c835 100644
--- a/src/common/MetaRow/MetaRow.js
+++ b/src/components/MetaRow/MetaRow.js
@@ -5,7 +5,7 @@ const ReactIs = require('react-is');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
const CONSTANTS = require('stremio/common/CONSTANTS');
const useTranslate = require('stremio/common/useTranslate');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/components/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
similarity index 97%
rename from src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
rename to src/components/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
index 05c0e7c2f..33a2eb33d 100644
--- a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
+++ b/src/components/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles');
diff --git a/src/common/MetaRow/MetaRowPlaceholder/index.js b/src/components/MetaRow/MetaRowPlaceholder/index.js
similarity index 100%
rename from src/common/MetaRow/MetaRowPlaceholder/index.js
rename to src/components/MetaRow/MetaRowPlaceholder/index.js
diff --git a/src/common/MetaRow/MetaRowPlaceholder/styles.less b/src/components/MetaRow/MetaRowPlaceholder/styles.less
similarity index 100%
rename from src/common/MetaRow/MetaRowPlaceholder/styles.less
rename to src/components/MetaRow/MetaRowPlaceholder/styles.less
diff --git a/src/common/MetaRow/index.js b/src/components/MetaRow/index.js
similarity index 100%
rename from src/common/MetaRow/index.js
rename to src/components/MetaRow/index.js
diff --git a/src/common/MetaRow/styles.less b/src/components/MetaRow/styles.less
similarity index 100%
rename from src/common/MetaRow/styles.less
rename to src/components/MetaRow/styles.less
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/components/ModalDialog/ModalDialog.js
similarity index 97%
rename from src/common/ModalDialog/ModalDialog.js
rename to src/components/ModalDialog/ModalDialog.js
index 52d0a2513..5e5907c5a 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/components/ModalDialog/ModalDialog.js
@@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { useRouteFocused, useModalsContainer } = require('stremio-router');
-const Button = require('stremio/common/Button');
+const { default: Button } = require('stremio/components/Button');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal } = require('stremio-router');
const styles = require('./styles');
@@ -70,7 +70,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
:
null
}
-
{ label }
);
diff --git a/src/common/animations.less b/src/common/animations.less
index 8a7fc2b9e..6ca879343 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -19,4 +19,36 @@
opacity: 1;
transform: translateY(0);
}
+}
+
+:global(.animation-slide-up) {
+ :local {
+ animation-name: slide-up;
+ }
+
+ animation-timing-function: ease-out;
+ animation-duration: 0.1s;
+}
+
+@keyframes slide-up {
+ 0% {
+ transform: translateY(100%);
+ }
+
+ 100% {
+ transform: translateY(0%);
+ }
+}
+
+.slide-left-enter {
+ transform: translateX(100%);
+}
+
+.slide-left-active {
+ transform: translateX(0%);
+ transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
+}
+
+.slide-left-exit {
+ transform: translateX(100%);
}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 8046dab15..4c514dfbe 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,29 +1,6 @@
// Copyright (C) 2017-2023 Smart code 203358507
-const AddonDetailsModal = require('./AddonDetailsModal');
-const Button = require('./Button');
-const Checkbox = require('./Checkbox');
-const { default: Chips } = require('./Chips');
-const ColorInput = require('./ColorInput');
-const ContinueWatchingItem = require('./ContinueWatchingItem');
-const DelayedRenderer = require('./DelayedRenderer');
-const Image = require('./Image');
-const LibItem = require('./LibItem');
-const MainNavBars = require('./MainNavBars');
-const MetaItem = require('./MetaItem');
-const MetaPreview = require('./MetaPreview');
-const MetaRow = require('./MetaRow');
-const ModalDialog = require('./ModalDialog');
-const Multiselect = require('./Multiselect');
-const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
-const PaginationInput = require('./PaginationInput');
-const PlayIconCircleCentered = require('./PlayIconCircleCentered');
-const Popup = require('./Popup');
-const SearchBar = require('./SearchBar');
-const StreamingServerWarning = require('./StreamingServerWarning');
-const SharePrompt = require('./SharePrompt');
-const Slider = require('./Slider');
-const TextInput = require('./TextInput');
+const { PlatformProvider, usePlatform } = require('./Platform');
const { ToastProvider, useToast } = require('./Toast');
const { TooltipProvider, Tooltip } = require('./Tooltips');
const comparatorWithPriorities = require('./comparatorWithPriorities');
@@ -32,6 +9,7 @@ const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
const getVisibleChildrenRange = require('./getVisibleChildrenRange');
const interfaceLanguages = require('./interfaceLanguages.json');
const languageNames = require('./languageNames.json');
+const languages = require('./languages');
const routesRegexp = require('./routesRegexp');
const useAnimationFrame = require('./useAnimationFrame');
const useBinaryState = require('./useBinaryState');
@@ -44,35 +22,10 @@ const useProfile = require('./useProfile');
const useStreamingServer = require('./useStreamingServer');
const useTorrent = require('./useTorrent');
const useTranslate = require('./useTranslate');
-const platform = require('./platform');
-const EventModal = require('./EventModal');
module.exports = {
- AddonDetailsModal,
- Button,
- Checkbox,
- Chips,
- ColorInput,
- ContinueWatchingItem,
- DelayedRenderer,
- Image,
- LibItem,
- MainNavBars,
- MetaItem,
- MetaPreview,
- MetaRow,
- ModalDialog,
- Multiselect,
- HorizontalNavBar,
- VerticalNavBar,
- PaginationInput,
- PlayIconCircleCentered,
- Popup,
- SearchBar,
- StreamingServerWarning,
- SharePrompt,
- Slider,
- TextInput,
+ PlatformProvider,
+ usePlatform,
ToastProvider,
useToast,
TooltipProvider,
@@ -84,6 +37,7 @@ module.exports = {
getVisibleChildrenRange,
interfaceLanguages,
languageNames,
+ languages,
routesRegexp,
useAnimationFrame,
useBinaryState,
@@ -96,6 +50,4 @@ module.exports = {
useStreamingServer,
useTorrent,
useTranslate,
- platform,
- EventModal,
};
diff --git a/src/common/interfaceLanguages.json b/src/common/interfaceLanguages.json
index 235193f0d..d4eaa7f60 100644
--- a/src/common/interfaceLanguages.json
+++ b/src/common/interfaceLanguages.json
@@ -7,6 +7,10 @@
"name": "български език",
"codes": ["bg-BG", "bul"]
},
+ {
+ "name": "বাংলা",
+ "codes": ["bn-Bd", "ben"]
+ },
{
"name": "català",
"codes": ["ca-CA", "cat"]
@@ -75,6 +79,14 @@
"name": "italiano",
"codes": ["it-IT", "ita"]
},
+ {
+ "name": "日本語 (にほんご)",
+ "codes": ["ja-JP", "jpn"]
+ },
+ {
+ "name": "한국어",
+ "codes": ["ko-KR", "kor"]
+ },
{
"name": "македонски јазик",
"codes": ["mk-MK", "mkd"]
@@ -135,6 +147,10 @@
"name": "українська мова",
"codes": ["uk-UA", "ukr"]
},
+ {
+ "name": "Tiếng Việt",
+ "codes": ["vi-VN", "vie"]
+ },
{
"name": "中文(中华人民共和国)",
"codes": ["zh-CN", "zho"]
@@ -147,4 +163,4 @@
"name": "中文(台灣)",
"codes": ["zh-TW", "zho"]
}
-]
\ No newline at end of file
+]
diff --git a/src/common/languages.ts b/src/common/languages.ts
new file mode 100644
index 000000000..eea073bc7
--- /dev/null
+++ b/src/common/languages.ts
@@ -0,0 +1,25 @@
+import langs from 'langs';
+
+const all = langs.all().map((lang) => ({
+ ...lang,
+ code: lang['2'],
+ label: lang.local,
+ alpha2: lang['1'],
+ alpha3: [lang['2'], lang['2B'], lang['2T'], lang['3']],
+ locale: lang['locale'],
+}));
+
+const find = (code: string) => {
+ return all.find(({ alpha2, alpha3, locale }) => [alpha2, ...alpha3, locale].includes(code));
+};
+
+const label = (code: string) => {
+ const language = find(code);
+ return language?.label ?? code;
+};
+
+export {
+ all,
+ find,
+ label,
+};
diff --git a/src/common/platform.js b/src/common/platform.js
deleted file mode 100644
index 1e112de6d..000000000
--- a/src/common/platform.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-// this detects ipad properly in safari
-// while bowser does not
-function iOS() {
- return [
- 'iPad Simulator',
- 'iPhone Simulator',
- 'iPod Simulator',
- 'iPad',
- 'iPhone',
- 'iPod'
- ].includes(navigator.platform)
- || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
-}
-
-const Bowser = require('bowser');
-
-const browser = Bowser.parse(window.navigator?.userAgent || '');
-
-const name = iOS() ? 'ios' : (browser?.os?.name || 'unknown').toLowerCase();
-
-module.exports = {
- name,
- isMobile: () => {
- return name === 'ios' || name === 'android';
- }
-};
diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js
index ca5efdb2c..3903da44b 100644
--- a/src/common/routesRegexp.js
+++ b/src/common/routesRegexp.js
@@ -17,6 +17,10 @@ const routesRegexp = {
regexp: /^\/library(?:\/([^/]*))?$/,
urlParamsNames: ['type']
},
+ calendar: {
+ regexp: /^\/calendar(?:\/([^/]*)\/([^/]*))?$/,
+ urlParamsNames: ['year', 'month']
+ },
continuewatching: {
regexp: /^\/continuewatching(?:\/([^/]*))?$/,
urlParamsNames: ['type']
diff --git a/src/common/useBinaryState.d.ts b/src/common/useBinaryState.d.ts
new file mode 100644
index 000000000..7a0185109
--- /dev/null
+++ b/src/common/useBinaryState.d.ts
@@ -0,0 +1,8 @@
+declare const useBinaryState: (initialValue?: boolean) => [
+ boolean,
+ () => void,
+ () => void,
+ () => void,
+];
+
+export = useBinaryState;
diff --git a/src/common/useNotifications.d.ts b/src/common/useNotifications.d.ts
index 7a6943654..e3cae5b81 100644
--- a/src/common/useNotifications.d.ts
+++ b/src/common/useNotifications.d.ts
@@ -1,2 +1,2 @@
declare const useNotifcations: () => Notifications;
-export = useNotifcations;
\ No newline at end of file
+export = useNotifcations;
diff --git a/src/common/useOutsideClick.ts b/src/common/useOutsideClick.ts
new file mode 100644
index 000000000..182cf8e37
--- /dev/null
+++ b/src/common/useOutsideClick.ts
@@ -0,0 +1,27 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import { useEffect, useRef } from 'react';
+
+const useOutsideClick = (callback: () => void) => {
+ const ref = useRef
+
+
+ ), document.body);
+};
+
+export default BottomSheet;
diff --git a/src/components/BottomSheet/index.ts b/src/components/BottomSheet/index.ts
new file mode 100644
index 000000000..55b1638f7
--- /dev/null
+++ b/src/components/BottomSheet/index.ts
@@ -0,0 +1,4 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import BottomSheet from './BottomSheet';
+export default BottomSheet;
diff --git a/src/common/Button/styles.less b/src/components/Button/Button.less
similarity index 89%
rename from src/common/Button/styles.less
rename to src/components/Button/Button.less
index 6a26b3b7f..f6a7bcb4b 100644
--- a/src/common/Button/styles.less
+++ b/src/components/Button/Button.less
@@ -1,4 +1,4 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 000000000..f4b059bd3
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,71 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import { createElement, forwardRef, useCallback } from 'react';
+import classNames from 'classnames';
+import { LongPressEventType, useLongPress } from 'use-long-press';
+import styles from './Button.less';
+
+type Props = {
+ className?: string,
+ href?: string,
+ title?: string,
+ disabled?: boolean,
+ tabIndex?: number,
+ children: React.ReactNode,
+ onKeyDown?: (event: React.KeyboardEvent) => void,
+ onMouseDown?: (event: React.MouseEvent) => void,
+ onLongPress?: () => void,
+ onClick?: (event: React.MouseEvent
+
+
+
+
+
+ {title}
+
+
+ {children}
+
+
+ {children}
+
+ );
+};
+
+export default HorizontalScroll;
diff --git a/src/components/HorizontalScroll/index.ts b/src/components/HorizontalScroll/index.ts
new file mode 100644
index 000000000..4fc875461
--- /dev/null
+++ b/src/components/HorizontalScroll/index.ts
@@ -0,0 +1,4 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import HorizontalScroll from './HorizontalScroll';
+export default HorizontalScroll;
diff --git a/src/common/Image/Image.js b/src/components/Image/Image.tsx
similarity index 55%
rename from src/common/Image/Image.js
rename to src/components/Image/Image.tsx
index c962a8a91..e64078fbc 100644
--- a/src/common/Image/Image.js
+++ b/src/components/Image/Image.tsx
@@ -1,36 +1,37 @@
// Copyright (C) 2017-2023 Smart code 203358507
-const React = require('react');
-const PropTypes = require('prop-types');
+import React, { useCallback, useLayoutEffect, useState } from 'react';
-const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) => {
- const [broken, setBroken] = React.useState(false);
- const onError = React.useCallback((event) => {
+type Props = {
+ className: string,
+ src: string,
+ alt: string,
+ fallbackSrc: string,
+ renderFallback: () => void,
+ onError: (event: React.SyntheticEvent
+ (({ option, selectedOption, onSelect }, ref) => {
+ // consider using option.id === selectedOption?.id instead
+ const selected = useMemo(() => option?.value === selectedOption?.value, [option, selectedOption]);
+
+ const handleClick = useCallback(() => {
+ onSelect(option.value);
+ }, [onSelect, option.value]);
+
+ return (
+
+ );
+});
+
+Option.displayName = 'Option';
+
+export default Option;
diff --git a/src/components/MultiselectMenu/Dropdown/Option/index.ts b/src/components/MultiselectMenu/Dropdown/Option/index.ts
new file mode 100644
index 000000000..fee9da7be
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/Option/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import Option from './Option';
+
+export default Option;
diff --git a/src/components/MultiselectMenu/Dropdown/index.ts b/src/components/MultiselectMenu/Dropdown/index.ts
new file mode 100644
index 000000000..52d853721
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import Dropdown from './Dropdown';
+
+export default Dropdown;
diff --git a/src/components/MultiselectMenu/MultiselectMenu.less b/src/components/MultiselectMenu/MultiselectMenu.less
new file mode 100644
index 000000000..3c7b81b59
--- /dev/null
+++ b/src/components/MultiselectMenu/MultiselectMenu.less
@@ -0,0 +1,39 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@border-radius: 2.75rem;
+
+.multiselect-menu {
+ position: relative;
+ min-width: 8.5rem;
+ overflow: visible;
+ border-radius: @border-radius;
+
+ &.disabled {
+ pointer-events: none;
+ opacity: 0.3;
+ }
+
+ .multiselect-button {
+ color: var(--primary-foreground-color);
+ padding: 0.75rem 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0 0.5rem;
+ border-radius: @border-radius;
+
+ .icon {
+ width: 1rem;
+ color: var(--primary-foreground-color);
+ opacity: 0.6;
+
+ &.open {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ &:hover {
+ background-color: var(--overlay-color);
+ }
+}
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/MultiselectMenu.tsx b/src/components/MultiselectMenu/MultiselectMenu.tsx
new file mode 100644
index 000000000..35be107c9
--- /dev/null
+++ b/src/components/MultiselectMenu/MultiselectMenu.tsx
@@ -0,0 +1,57 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React from 'react';
+import { Button } from 'stremio/components';
+import useBinaryState from 'stremio/common/useBinaryState';
+import Dropdown from './Dropdown';
+import classNames from 'classnames';
+import Icon from '@stremio/stremio-icons/react';
+import styles from './MultiselectMenu.less';
+import useOutsideClick from 'stremio/common/useOutsideClick';
+
+type Props = {
+ className?: string,
+ title?: string;
+ options: MultiselectMenuOption[];
+ selectedOption?: MultiselectMenuOption;
+ onSelect: (value: number) => void;
+};
+
+const MultiselectMenu = ({ className, title, options, selectedOption, onSelect }: Props) => {
+ const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false);
+ const multiselectMenuRef = useOutsideClick(() => closeMenu());
+ const [level, setLevel] = React.useState(0);
+
+ const onOptionSelect = (value: number) => {
+ level ? setLevel(level + 1) : onSelect(value), closeMenu();
+ };
+
+ return (
+
{children}
{
diff --git a/src/common/ModalDialog/index.js b/src/components/ModalDialog/index.js
similarity index 100%
rename from src/common/ModalDialog/index.js
rename to src/components/ModalDialog/index.js
diff --git a/src/common/ModalDialog/styles.less b/src/components/ModalDialog/styles.less
similarity index 94%
rename from src/common/ModalDialog/styles.less
rename to src/components/ModalDialog/styles.less
index 9aafca16a..ce03cfa84 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/components/ModalDialog/styles.less
@@ -67,6 +67,7 @@
.modal-dialog-content {
z-index: 1;
position: relative;
+ overflow-y: auto;
.title-container {
flex: 1 0 auto;
@@ -78,10 +79,10 @@
color: var(--primary-foreground-color);
}
- .modal-dialog-content {
+ .body-container {
flex: 1;
align-self: stretch;
- overflow-y: auto;
+ overflow: visible;
padding: 2rem 0;
&:last-child {
@@ -157,9 +158,11 @@
z-index: 0;
padding: 0 1.5rem;
- .buttons-container {
- flex-direction: column;
- gap: 1rem;
+ .modal-dialog-content {
+ .buttons-container {
+ flex-direction: column;
+ gap: 1rem;
+ }
}
}
diff --git a/src/common/Multiselect/Multiselect.js b/src/components/Multiselect/Multiselect.js
similarity index 97%
rename from src/common/Multiselect/Multiselect.js
rename to src/components/Multiselect/Multiselect.js
index 73638eaa0..c791c60d1 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/components/Multiselect/Multiselect.js
@@ -4,9 +4,9 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Popup = require('stremio/common/Popup');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button } = require('stremio/components');
+const Popup = require('stremio/components/Popup');
+const ModalDialog = require('stremio/components/ModalDialog');
const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
diff --git a/src/common/Multiselect/index.js b/src/components/Multiselect/index.js
similarity index 100%
rename from src/common/Multiselect/index.js
rename to src/components/Multiselect/index.js
diff --git a/src/common/Multiselect/styles.less b/src/components/Multiselect/styles.less
similarity index 84%
rename from src/common/Multiselect/styles.less
rename to src/components/Multiselect/styles.less
index 31b44182a..f87c86d9b 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/components/Multiselect/styles.less
@@ -3,10 +3,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
-:import('~stremio/common/Popup/styles.less') {
+:import('~stremio/components/Popup/styles.less') {
popup-menu-container: menu-container;
}
+@parent-height: 10rem;
+
.label-container {
display: flex;
flex-direction: row;
@@ -27,6 +29,9 @@
max-height: 2.4em;
font-weight: 500;
color: var(--primary-foreground-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.icon {
@@ -45,6 +50,8 @@
.modal-container, .popup-menu-container {
.menu-container {
+ max-height: calc(3.2rem * 7);
+
.option-container {
display: flex;
flex-direction: row;
@@ -98,4 +105,12 @@
}
}
}
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
+ .modal-container, .popup-menu-container {
+ .menu-container {
+ max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+ }
+ }
}
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.less b/src/components/MultiselectMenu/Dropdown/Dropdown.less
new file mode 100644
index 000000000..3bea17d22
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.less
@@ -0,0 +1,44 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+@parent-height: 10rem;
+
+.dropdown {
+ background: var(--modal-background-color);
+ display: none;
+ position: absolute;
+ width: 100%;
+ top: 100%;
+ left: 0;
+ z-index: 10;
+ box-shadow: var(--outer-glow);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+
+ &.open {
+ display: block;
+ max-height: calc(3.3rem * 7);
+ overflow: auto;
+ }
+
+ .back-button {
+ display: flex;
+ align-items: center;
+ gap: 0 0.5rem;
+ padding: 0.75rem;
+ color: var(--primary-foreground-color);
+
+ .back-button-icon {
+ width: 1.5rem;
+ }
+ }
+}
+
+@media (orientation: landscape) and (max-width: @xsmall) {
+ .dropdown {
+ &.open {
+ max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/Dropdown/Dropdown.tsx b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..3da75619b
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/Dropdown.tsx
@@ -0,0 +1,78 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useRef, useEffect, useCallback } from 'react';
+import { Button } from 'stremio/components';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import Option from './Option';
+import Icon from '@stremio/stremio-icons/react';
+import styles from './Dropdown.less';
+
+type Props = {
+ options: MultiselectMenuOption[];
+ selectedOption?: MultiselectMenuOption | null;
+ menuOpen: boolean | (() => void);
+ level: number;
+ setLevel: (level: number) => void;
+ onSelect: (value: number) => void;
+};
+
+const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => {
+ const { t } = useTranslation();
+ const optionsRef = useRef(new Map());
+ const containerRef = useRef(null);
+
+ const handleSetOptionRef = useCallback((value: number) => (node: HTMLButtonElement | null) => {
+ if (node) {
+ optionsRef.current.set(value, node);
+ } else {
+ optionsRef.current.delete(value);
+ }
+ }, []);
+
+ const handleBackClick = useCallback(() => {
+ setLevel(level - 1);
+ }, [setLevel, level]);
+
+ useEffect(() => {
+ if (menuOpen && selectedOption && containerRef.current) {
+ const selectedNode = optionsRef.current.get(selectedOption.value);
+ if (selectedNode) {
+ selectedNode.scrollIntoView({
+ behavior: 'smooth',
+ block: 'nearest'
+ });
+ }
+ }
+ }, [menuOpen, selectedOption]);
+
+ return (
+
+ {level > 0 ?
+
+ : null
+ }
+ {options
+ .filter((option: MultiselectMenuOption) => !option.hidden)
+ .map((option: MultiselectMenuOption) => (
+
+ ))
+ }
+
+ );
+};
+
+export default Dropdown;
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.less b/src/components/MultiselectMenu/Dropdown/Option/Option.less
new file mode 100644
index 000000000..a0ee1743f
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.less
@@ -0,0 +1,29 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+.option {
+ font-size: var(--font-size-normal);
+ color: var(--primary-foreground-color);
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ padding: 1rem;
+
+ .label {
+ flex: 1;
+ color: var(--primary-foreground-color);
+ }
+
+ .icon {
+ flex: none;
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 100%;
+ margin-left: 1rem;
+ background-color: var(--secondary-accent-color);
+ opacity: 1;
+ }
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.15);
+ }
+}
\ No newline at end of file
diff --git a/src/components/MultiselectMenu/Dropdown/Option/Option.tsx b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
new file mode 100644
index 000000000..91aa173f7
--- /dev/null
+++ b/src/components/MultiselectMenu/Dropdown/Option/Option.tsx
@@ -0,0 +1,48 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useCallback, useMemo, forwardRef } from 'react';
+import classNames from 'classnames';
+import { Button } from 'stremio/components';
+import styles from './Option.less';
+import Icon from '@stremio/stremio-icons/react';
+
+type Props = {
+ option: MultiselectMenuOption;
+ selectedOption?: MultiselectMenuOption | null;
+ onSelect: (value: number) => void;
+};
+
+const Option = forwardRef
+
+ {
+ menuOpen ?
+
+ );
+};
+
+export default MultiselectMenu;
diff --git a/src/components/MultiselectMenu/index.ts b/src/components/MultiselectMenu/index.ts
new file mode 100644
index 000000000..0d7c60413
--- /dev/null
+++ b/src/components/MultiselectMenu/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import MultiselectMenu from './MultiselectMenu';
+
+export default MultiselectMenu;
diff --git a/src/components/MultiselectMenu/types.d.ts b/src/components/MultiselectMenu/types.d.ts
new file mode 100644
index 000000000..b59d699b6
--- /dev/null
+++ b/src/components/MultiselectMenu/types.d.ts
@@ -0,0 +1,9 @@
+type MultiselectMenuOption = {
+ id?: number;
+ label: string;
+ value: number;
+ destination?: string;
+ default?: boolean;
+ hidden?: boolean;
+ level?: MultiselectMenuOption[];
+};
diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
similarity index 85%
rename from src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
rename to src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 7a992fb45..0cedd8638 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -4,8 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
+const { Button, Image } = require('stremio/components');
const useFullscreen = require('stremio/common/useFullscreen');
const usePWA = require('stremio/common/usePWA');
const SearchBar = require('./SearchBar');
@@ -13,7 +12,7 @@ const NavMenu = require('./NavMenu');
const styles = require('./styles');
const { t } = require('i18next');
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@@ -54,14 +53,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
null
}
- {
- addonsButton ?
-
- :
- null
- }
{
!isIOSPWA && fullscreenButton ?