diff --git a/README.md b/README.md index 06a5428ae..c729c2639 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Stremio - Freedom to Stream ![Build](https://github.com/stremio/stremio-web/workflows/Build/badge.svg?branch=development) -[![Github Page](https://img.shields.io/website?down_message=offline&label=Page&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI%2BPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjZmZmIi8%2BPC9zdmc%2B&up_message=online&url=https%3A%2F%2Fstremio.github.io%2Fstremio-web%2F)](https://stremio.github.io/stremio-web/development) +[![Github Page](https://img.shields.io/website?label=Page&logo=github&up_message=online&down_message=offline&url=https%3A%2F%2Fstremio.github.io%2Fstremio-web%2F)](https://stremio.github.io/stremio-web/development) Stremio is a modern media center that's a one-stop solution for your video entertainment. You discover, watch and organize video content from easy to install addons. diff --git a/package-lock.json b/package-lock.json index 6239cde6e..41c7b048f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,9 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.46.0", - "@stremio/stremio-icons": "5.0.0-beta.3", - "@stremio/stremio-video": "0.0.26", + "@stremio/stremio-core-web": "0.46.3", + "@stremio/stremio-icons": "5.2.0", + "@stremio/stremio-video": "0.0.33", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", @@ -36,7 +36,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6", + "stremio-translations": "github:Stremio/stremio-translations#38d283adf4bbe6d29657b5023778e30af7f6b05a", "url": "0.11.0", "use-long-press": "^3.1.5" }, @@ -2969,32 +2969,29 @@ "license": "MIT" }, "node_modules/@stremio/stremio-core-web": { - "version": "0.46.0", - "license": "MIT", + "version": "0.46.3", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.46.3.tgz", + "integrity": "sha512-5us8KQQ0EJ2xjLukcLu3yia7fa8BIjxjOwbMebpSLGEomq6MzVQMmRGp/7rId2ggfIej2Zwf/GBVepZ2/nLE4A==", "dependencies": { "@babel/runtime": "7.16.0" } }, "node_modules/@stremio/stremio-icons": { - "version": "5.0.0-beta.3", - "license": "MIT", - "workspaces": [ - "react", - "react-native", - "solid", - "angularjs" - ] + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-icons/-/stremio-icons-5.2.0.tgz", + "integrity": "sha512-rABlPBTFF17QcSm/4IizVoE/jh+REt+waqA0RvIxuGjQppXlvj7CalqVvTam0CC2wgY00zNG1v/9kVHUDVzo4Q==" }, "node_modules/@stremio/stremio-video": { - "version": "0.0.26", - "license": "MIT", + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/@stremio/stremio-video/-/stremio-video-0.0.33.tgz", + "integrity": "sha512-SaJgKmDrk8+reJprXYEz/hfp66E9GdhqURX20DiRx0OsDZFDYvWIe1fZLqj5B3LjVHtwEq3FIku+Z9qnH4jPDg==", "dependencies": { "buffer": "6.0.3", "color": "4.2.3", "deep-freeze": "0.0.1", "eventemitter3": "4.0.7", "hat": "0.0.3", - "hls.js": "https://github.com/Stremio/hls.js/releases/download/v1.2.3-patch1/hls.js-1.2.3-patch1.tgz", + "hls.js": "https://github.com/Stremio/hls.js/releases/download/v1.5.4-patch1/hls.js-1.5.4-patch1.tgz", "lodash.clonedeep": "4.5.0", "magnet-uri": "6.2.0", "url": "0.11.0", @@ -6883,9 +6880,9 @@ } }, "node_modules/hls.js": { - "version": "1.2.3-patch1.0.canary.8609", - "resolved": "https://github.com/Stremio/hls.js/releases/download/v1.2.3-patch1/hls.js-1.2.3-patch1.tgz", - "integrity": "sha512-b/WMwSXyV6QvoGYotzzrG0ldRW8mOzqxEhPDd+as4haAx78tmxoVkdYYtVKZ8MiJcMa6j00lfx7ti/2HlO5ByQ==", + "version": "1.5.5-0.canary.9892", + "resolved": "https://github.com/Stremio/hls.js/releases/download/v1.5.4-patch1/hls.js-1.5.4-patch1.tgz", + "integrity": "sha512-YDHKApXQtCM9DgwAN/3KTvvaxz6zbmjACQKFMbFE1nD21hE+jX4gv8UX3sMYE99A0slMht29wjK93NCseuG0fg==", "license": "Apache-2.0" }, "node_modules/hpack.js": { @@ -12456,8 +12453,8 @@ }, "node_modules/stremio-translations": { "version": "1.44.5", - "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#12b1307f95249496960d2a257b371db5700721e6", - "integrity": "sha512-929O9sIUph3ew4YlUfD/zoMUSAYmwrjRIS+opmft3Gi8qS36/gBrH8RYW8XvgkTon+xrgqr7hC2/QSck4tgrAA==", + "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#38d283adf4bbe6d29657b5023778e30af7f6b05a", + "integrity": "sha512-O/uFENWQ/pXEw4hQ1XQ8e4g6ZeX80wrhrxZfaGq2svK2I3bC/gCe5et0lbVzFBkVefSP3o1BMrlhgoSqfQssqA==", "license": "MIT" }, "node_modules/string_decoder": { diff --git a/package.json b/package.json index cbf5645c8..8e9edfd35 100755 --- a/package.json +++ b/package.json @@ -15,9 +15,9 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.46.0", - "@stremio/stremio-icons": "5.0.0-beta.3", - "@stremio/stremio-video": "0.0.26", + "@stremio/stremio-core-web": "0.46.3", + "@stremio/stremio-icons": "5.2.0", + "@stremio/stremio-video": "0.0.33", "a-color-picker": "1.2.1", "bowser": "2.11.0", "buffer": "6.0.3", @@ -39,7 +39,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6", + "stremio-translations": "github:Stremio/stremio-translations#38d283adf4bbe6d29657b5023778e30af7f6b05a", "url": "0.11.0", "use-long-press": "^3.1.5" }, diff --git a/src/App/App.js b/src/App/App.js index d6e92fbbb..b5f67a658 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -9,6 +9,7 @@ const { NotFound } = require('stremio/routes'); const { ToastProvider, TooltipProvider, CONSTANTS, withCoreSuspender } = require('stremio/common'); const ServicesToaster = require('./ServicesToaster'); const DeepLinkHandler = require('./DeepLinkHandler'); +const SearchParamsHandler = require('./SearchParamsHandler'); const ErrorDialog = require('./ErrorDialog'); const withProtectedRoutes = require('./withProtectedRoutes'); const routerViewsConfig = require('./routerViewsConfig'); @@ -164,6 +165,7 @@ const App = () => { + { + const { core } = useServices(); + const profile = useProfile(); + const toast = useToast(); + + const [searchParams, setSearchParams] = React.useState({}); + + const onLocationChange = () => { + const { origin, hash, search } = window.location; + const { searchParams } = new URL(`${origin}${hash.replace('#', '')}${search}`); + + setSearchParams((previousSearchParams) => { + const currentSearchParams = Object.fromEntries(searchParams.entries()); + return isEqual(previousSearchParams, currentSearchParams) ? previousSearchParams : currentSearchParams; + }); + }; + + React.useEffect(() => { + const { streamingServerUrl } = searchParams; + + if (streamingServerUrl) { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + streamingServerUrl, + }, + }, + }); + + toast.show({ + type: 'success', + title: `Using streaming server at ${streamingServerUrl}`, + timeout: 4000, + }); + } + }, [searchParams]); + + React.useEffect(() => { + onLocationChange(); + window.addEventListener('hashchange', onLocationChange); + return () => window.removeEventListener('hashchange', onLocationChange); + }, []); + + return null; +}; + +module.exports = withCoreSuspender(SearchParamsHandler); diff --git a/src/App/styles.less b/src/App/styles.less index 95566c9a8..d0bfc6bd5 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -21,7 +21,8 @@ --vertical-nav-bar-size: 6rem; --focus-outline-size: 2px; --color-facebook: #1877F1; - --color-twitter: #1DA1F2; + --color-x: #000000; + --color-reddit: #FF4500; --color-imdb: #f5c518; --color-trakt: #ED2224; --color-placeholder: #60606080; diff --git a/src/common/ContinueWatchingItem/ContinueWatchingItem.js b/src/common/ContinueWatchingItem/ContinueWatchingItem.js index 721a1b731..7d1ab824d 100644 --- a/src/common/ContinueWatchingItem/ContinueWatchingItem.js +++ b/src/common/ContinueWatchingItem/ContinueWatchingItem.js @@ -3,17 +3,10 @@ const React = require('react'); const PropTypes = require('prop-types'); const { useServices } = require('stremio/services'); -const useNotifications = require('stremio/common/useNotifications'); const LibItem = require('stremio/common/LibItem'); -const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => { +const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => { const { core } = useServices(); - const notifications = useNotifications(); - - const newVideos = React.useMemo(() => { - const count = notifications.items?.[_id]?.length ?? 0; - return Math.min(Math.max(count, 0), 99); - }, [_id, notifications.items]); const onClick = React.useCallback(() => { if (deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams) { @@ -51,8 +44,9 @@ const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => { return ( { ContinueWatchingItem.propTypes = { _id: PropTypes.string, + notifications: PropTypes.object, deepLinks: PropTypes.shape({ metaDetailsVideos: PropTypes.string, metaDetailsStreams: PropTypes.string, diff --git a/src/common/LibItem/LibItem.js b/src/common/LibItem/LibItem.js index a1c59200a..d2858790d 100644 --- a/src/common/LibItem/LibItem.js +++ b/src/common/LibItem/LibItem.js @@ -13,8 +13,12 @@ const OPTIONS = [ { label: 'LIBRARY_REMOVE', value: 'remove' }, ]; -const LibItem = ({ _id, removable, ...props }) => { +const LibItem = ({ _id, removable, notifications, ...props }) => { const { core } = useServices(); + const newVideos = React.useMemo(() => { + const count = notifications.items?.[_id]?.length ?? 0; + return Math.min(Math.max(count, 0), 99); + }, [_id, notifications]); const options = React.useMemo(() => { return OPTIONS .filter(({ value }) => { @@ -98,6 +102,7 @@ const LibItem = ({ _id, removable, ...props }) => { return ( @@ -108,6 +113,7 @@ LibItem.propTypes = { _id: PropTypes.string, removable: PropTypes.bool, progress: PropTypes.number, + notifications: PropTypes.object, deepLinks: PropTypes.shape({ metaDetailsVideos: PropTypes.string, metaDetailsStreams: PropTypes.string, diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js index a967fde9d..e9fc46dc8 100644 --- a/src/common/MetaItem/MetaItem.js +++ b/src/common/MetaItem/MetaItem.js @@ -76,7 +76,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste null } { - watched ? + !newVideos && watched ?
diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 5a99c585a..7d023202a 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -11,7 +11,7 @@ const useTranslate = require('stremio/common/useTranslate'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = ({ className, title, catalog, message, itemComponent }) => { +const MetaRow = ({ className, title, catalog, message, itemComponent, notifications }) => { const t = useTranslate(); const catalogTitle = React.useMemo(() => { @@ -56,7 +56,8 @@ const MetaRow = ({ className, title, catalog, message, itemComponent }) => { return React.createElement(itemComponent, { ...item, key: index, - className: classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`]) + className: classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`]), + notifications, }); }) : @@ -104,6 +105,7 @@ MetaRow.propTypes = { }), }), itemComponent: PropTypes.elementType, + notifications: PropTypes.object, }; module.exports = MetaRow; diff --git a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js index 4bd701ad5..5db06f1d0 100644 --- a/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js +++ b/src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js @@ -23,7 +23,7 @@ const SearchBar = React.memo(({ className, query, active }) => { const localSearch = useLocalSearch(); const { createTorrentFromMagnet } = useTorrent(); - const [historyOpen, openHistory, closeHistory, ] = useBinaryState(false); + const [historyOpen, openHistory, closeHistory, ] = useBinaryState(query === null ? true : false); const [currentQuery, setCurrentQuery] = React.useState(query || ''); const searchInputRef = React.useRef(null); @@ -153,7 +153,7 @@ const SearchBar = React.memo(({ className, query, active }) => { localSearch?.items?.length ?
-
{ t('Recommendations') }
+
{ t('SEARCH_SUGGESTIONS') }
{ localSearch.items.map(({ query, deepLinks }, index) => ( diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js index 685f19613..2d25682e4 100644 --- a/src/common/SharePrompt/SharePrompt.js +++ b/src/common/SharePrompt/SharePrompt.js @@ -7,6 +7,7 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { useRouteFocused } = require('stremio-router'); const { useServices } = require('stremio/services'); +const useToast = require('stremio/common/Toast/useToast'); const Button = require('stremio/common/Button'); const TextInput = require('stremio/common/TextInput'); const styles = require('./styles'); @@ -14,6 +15,7 @@ const styles = require('./styles'); const SharePrompt = ({ className, url }) => { const { t } = useTranslation(); const { core } = useServices(); + const toast = useToast(); const inputRef = React.useRef(null); const routeFocused = useRouteFocused(); const selectInputContent = React.useCallback(() => { @@ -25,6 +27,11 @@ const SharePrompt = ({ className, url }) => { if (inputRef.current !== null) { inputRef.current.select(); document.execCommand('copy'); + toast.show({ + type: 'success', + title: 'Copied to clipboard', + timeout: 3000, + }); } }, []); React.useEffect(() => { @@ -45,11 +52,12 @@ const SharePrompt = ({ className, url }) => {
- +
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less index c9953be50..0a95778f2 100644 --- a/src/common/SharePrompt/styles.less +++ b/src/common/SharePrompt/styles.less @@ -21,24 +21,12 @@ .icon { flex: none; - height: 1.2rem; - margin-right: 1rem; - color: var(--primary-foreground-color); - } - - .label { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - max-height: 2.4em; - font-size: 1.1rem; - font-weight: 500; - text-align: center; + height: 1.5rem; color: var(--primary-foreground-color); } } - .facebook-button, .twitter-button { + .facebook-button, .x-button, .reddit-button { border-radius: var(--border-radius); &:focus { @@ -50,8 +38,12 @@ background-color: var(--color-facebook); } - .twitter-button { - background-color: var(--color-twitter); + .x-button { + background-color: var(--color-x); + } + + .reddit-button { + background-color: var(--color-reddit); } } diff --git a/src/common/Toast/ToastItem/ToastItem.js b/src/common/Toast/ToastItem/ToastItem.js index 869aa224f..379d64ce0 100644 --- a/src/common/Toast/ToastItem/ToastItem.js +++ b/src/common/Toast/ToastItem/ToastItem.js @@ -9,7 +9,7 @@ const styles = require('./styles'); const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => { const type = React.useMemo(() => { - return ['success', 'alert', 'error'].includes(props.type) ? + return ['success', 'alert', 'info', 'error'].includes(props.type) ? props.type : 'success'; @@ -17,8 +17,9 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => const icon = React.useMemo(() => { return typeof props.icon === 'string' ? props.icon : type === 'success' ? 'checkmark' : - type === 'error' ? 'warning' : - null; + type === 'error' ? 'close' : + type === 'info' ? 'about' : + null; }, [type, props.icon]); const toastOnClick = React.useCallback((event) => { if (!event.nativeEvent.selectToastPrevented && typeof onSelect === 'function') { @@ -81,7 +82,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => }; ToastItem.propTypes = { - type: PropTypes.oneOf(['success', 'alert', 'error']), + type: PropTypes.oneOf(['success', 'alert', 'info', 'error']), title: PropTypes.string, message: PropTypes.string, icon: PropTypes.string, diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less index 05bf68ec8..56f535695 100644 --- a/src/common/Toast/ToastItem/styles.less +++ b/src/common/Toast/ToastItem/styles.less @@ -5,27 +5,36 @@ .toast-item-container { display: flex; flex-direction: row; + align-items: flex-start; width: 25rem; margin-bottom: 1rem; - background-color: @color-surface-light4; overflow: visible; - box-shadow: 0 0.3rem 0.5rem @color-background-dark5-40, - 0 0.6rem 1rem @color-background-dark5-20; + box-shadow: var(--outer-glow); + background-color: var(--modal-background-color); pointer-events: auto; - + border-radius: var(--border-radius); + border: 0.4px solid var(--primary-accent-color); + backdrop-filter: blur(10px); + padding: 1rem; &.success { .icon-container { - background-color: @color-accent3; - .icon { - color: @color-surface-light5-90; + color: @color-accent3; } } } &.error { .icon-container { - background-color: @color-accent2; + .icon { + color: var(--color-trakt); + } + } + } + + &.info { + .icon-container { + background-color: @color-primary-light2; .icon { color: @color-surface-light5-90; @@ -34,26 +43,25 @@ } .icon-container { - flex: none; - align-self: stretch; - width: 2.5rem; - padding: 0.5rem; + border-radius: 3px; + background-color: var(--overlay-color); .icon { display: block; width: 100%; height: 100%; - color: @color-background-dark5-90; + max-width: 2rem; } } .info-container { flex: 1; align-self: stretch; - padding: 1rem; + padding: 0.2rem 1rem; .title-container { font-size: 1.2rem; + color: var(--primary-foreground-color); &:not(:last-child) { margin-bottom: 0.2rem; @@ -62,25 +70,28 @@ .message-container { font-size: 1.1rem; + color: var(--primary-foreground-color); + opacity: 0.8; } } .close-button-container { - flex: none; - align-self: flex-start; width: 2rem; height: 2rem; - margin: 0.2rem; - padding: 0.5rem; - - &:hover { - background-color: @color-surface-light2; - } - + border-radius: 3px; + .icon { display: block; width: 100%; height: 100%; + color: var(--primary-foreground-color); + opacity: 0.4; + } + + &:hover { + .icon { + opacity: 1; + } } } } \ No newline at end of file diff --git a/src/common/useTranslate.js b/src/common/useTranslate.js index 753daaa80..459025f46 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}/${id}`; + const partialKey = `${addon.manifest.id.replaceAll('.', '_')}_${id}`; const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name); if (type && withType) { diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 510406381..a494a02ee 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -4,7 +4,7 @@ const React = require('react'); const classnames = require('classnames'); const debounce = require('lodash.debounce'); const { useTranslation } = require('react-i18next'); -const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common'); +const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common'); const useBoard = require('./useBoard'); const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); @@ -16,6 +16,7 @@ const Board = () => { const streamingServer = useStreamingServer(); const continueWatchingPreview = useContinueWatchingPreview(); const [board, loadBoardRows] = useBoard(); + const notifications = useNotifications(); const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0; const scrollContainerRef = React.useRef(); const onVisibleRangeChange = React.useCallback(() => { @@ -48,6 +49,7 @@ const Board = () => { title={t('BOARD_CONTINUE_WATCHING')} catalog={continueWatchingPreview} itemComponent={ContinueWatchingItem} + notifications={notifications} /> : null diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index d27c976cf..2e2e90beb 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -150,6 +150,7 @@ const Discover = ({ urlParams, queryParams }) => { posterShape={metaItem.posterShape} playname={selectedMetaItemIndex === index} deepLinks={metaItem.deepLinks} + watched={metaItem.watched} data-index={index} onClick={metaItemOnClick} /> diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 1479c9c5d..e45dd585a 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -5,7 +5,7 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const { default: Icon } = require('@stremio/stremio-icons/react'); const NotFound = require('stremio/routes/NotFound'); -const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common'); +const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, useNotifications, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common'); const useLibrary = require('./useLibrary'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); @@ -45,6 +45,7 @@ function withModel(Library) { const Library = ({ model, urlParams, queryParams }) => { const profile = useProfile(); + const notifications = useNotifications(); const library = useLibrary(model, urlParams, queryParams); const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library); const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false); @@ -108,7 +109,7 @@ const Library = ({ model, urlParams, queryParams }) => { :
{library.catalog.map((libItem, index) => ( - + ))}
} diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index ef956814b..f98307479 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -23,7 +23,7 @@ const mapSelectableInputs = (library, t) => { options: library.selectable.sorts .map(({ sort, deepLinks }) => ({ value: deepLinks.library, - label: t.stringWithPrefix(sort, 'SORT_') + label: t.stringWithPrefix(sort.toUpperCase(), 'SORT_') })), selected: library.selectable.sorts .filter(({ selected }) => selected) diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index 55be6310b..295478f2f 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -67,7 +67,7 @@ .select-choices-wrapper { display: flex; align-items: center; - z-index: 1; + z-index: 2; margin: 1em 1em 0 1em; gap: 0 0.5em; overflow: visible;