diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less index 2a445fff2..f8e041240 100644 --- a/src/common/MetaPreview/styles.less +++ b/src/common/MetaPreview/styles.less @@ -157,10 +157,10 @@ display: flex; flex-direction: row; align-items: flex-end; - max-height: 10rem; + max-height: 15rem; flex-wrap: wrap; - overflow-x: visible; padding-top: 3.5rem; + overflow: visible; .action-button-wrapper { display: flex; @@ -178,6 +178,7 @@ transition: opacity 0.3s ease; text-align: center; color: var(--primary-foreground-color); + overflow: visible; } &.action-button-wrapper:first-of-type > .label { diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js index 0736742ae..91de32099 100644 --- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js +++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js @@ -8,16 +8,12 @@ const { Button, Image, useProfile, platform, useStreamingServer, useToast } = re const { useServices } = require('stremio/services'); const StreamPlaceholder = require('./StreamPlaceholder'); const styles = require('./styles'); -const parseTorrentInfo = require('./parseTorrentInfo'); -const StreamInfo = require('./StreamInfo'); const Stream = ({ className, videoId, videoReleased, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => { const profile = useProfile(); const streamingServer = useStreamingServer(); const { core } = useServices(); const toast = useToast(); - const torrentInfo = parseTorrentInfo(description); - const {streamName, streamSeeders, streamSize, streamProvider, streamFlags } = torrentInfo; const href = React.useMemo(() => { const haveStreamingServer = streamingServer.settings !== null && streamingServer.settings.type === 'Ready'; return deepLinks ? @@ -98,13 +94,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio } { typeof description === 'string' && description.length > 0 ? - +
{description}
: null } diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js deleted file mode 100644 index 9ebd33275..000000000 --- a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js +++ /dev/null @@ -1,63 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const React = require('react'); -const PropTypes = require('prop-types'); -const { default: Icon } = require('@stremio/stremio-icons/react'); -const styles = require('./styles'); - -const StreamInfo = ({ streamSize, streamProvider, streamName, streamFlags, streamSeeders }) => { - return ( -
-
{streamName}
-
-
- { - typeof streamSeeders === 'number' && streamSeeders > 0 ? -
- -
{streamSeeders}
-
- : - null - } - { - typeof streamSize === 'string' && streamSize.length > 0 ? -
- -
{streamSize}
-
- : - null - } - { - typeof streamProvider === 'string' && streamProvider.length > 0 ? -
- -
{streamProvider}
-
- : - null - } - { - typeof streamFlags === 'string' && streamFlags.length > 0 ? -
-
{streamFlags}
-
- : - null - } -
-
-
- ); -}; - -StreamInfo.propTypes = { - streamFlags: PropTypes.string, - streamSize: PropTypes.string, - streamProvider: PropTypes.string, - streamSeeders: PropTypes.number, - streamName: PropTypes.string -}; -module.exports = StreamInfo; - diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/index.js b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/index.js deleted file mode 100644 index b047c7fca..000000000 --- a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const StreamInfo = require('./StreamInfo'); - -module.exports = StreamInfo; - diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/styles.less b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/styles.less deleted file mode 100644 index 059ab9e06..000000000 --- a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/styles.less +++ /dev/null @@ -1,47 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -.info-container { - flex: 1; - max-height: 3.6em; - padding: 0 0.5rem 0 1.5rem; - display: flex; - flex-direction: column; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - white-space: pre; - - .stream-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--primary-foreground-color); - } - .stream-properties { - display: flex; - flex-direction: row; - gap: 0 0.5em; - flex-wrap: wrap; - .property-container { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - color: var(--primary-foreground-color); - .icon { - width: 1em; - height: 1em; - padding: 0; - color: var(--primary-foreground-color); - background-color: transparent; - } - .property { - opacity: 0.9; - } - .overflow { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } -} \ No newline at end of file diff --git a/src/routes/MetaDetails/StreamsList/Stream/parseTorrentInfo.js b/src/routes/MetaDetails/StreamsList/Stream/parseTorrentInfo.js deleted file mode 100644 index 8380a851c..000000000 --- a/src/routes/MetaDetails/StreamsList/Stream/parseTorrentInfo.js +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const parseTorrent = (description) => { - const isEmoji = (str) => { - const emojiRegex = /[\uD83C][\uDDE6-\uDDFF][\uD83C][\uDDE6-\uDDFF]/g; - return [...str.matchAll(emojiRegex)]; - }; - const streamName = description.split(/\u{1F464}/u)[0].trim(); - - const seedersMatch = description.match(/\u{1F464}\s(\d+)/u); - const streamSeeders = seedersMatch ? parseInt(seedersMatch[1]) : null; - - const sizeMatch = description.match(/(?<=\uD83D\uDCBE).*?(?=\u2699\uFE0F?)/); - const streamSize = sizeMatch ? sizeMatch[0] : null; - - const providerMatch = description.match(/\u2699\uFE0F\s(\S+?)\s/); - - const streamProvider = providerMatch ? providerMatch[1].trim() : null; - - const flagMatches = isEmoji(description); - let streamFlags = ''; - for (const match of flagMatches) { - streamFlags += match[0]; - } - - const torrentInfo = { - streamName, - streamSeeders, - streamSize, - streamProvider, - streamFlags - }; - - return torrentInfo; -}; - -module.exports = parseTorrent; - diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less index 1f81ff77c..33af05191 100644 --- a/src/routes/MetaDetails/StreamsList/Stream/styles.less +++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less @@ -24,7 +24,7 @@ .thumbnail-container, .addon-name-container { flex: none; - + overflow: visible; .thumbnail { display: block; height: 5rem; @@ -46,13 +46,24 @@ .addon-name { width: 5rem; - max-height: 3.6em; - font-size: 1.1rem; + font-size: 0.9rem; text-align: center; color: var(--primary-foreground-color); } } - + .info-container { + flex: 1; + padding: 0 0.5rem 0 1.5rem; + display: flex; + flex-direction: column; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + white-space: pre; + overflow-y: visible; + text-overflow: ellipsis; + color: var(--primary-foreground-color); + } + .icon { flex: none; width: 3rem; @@ -74,7 +85,13 @@ } } } - +@media only screen and (max-width: @small) { + .stream-container { + .info-container { + font-size: 0.9rem; + } + } +} @media only screen and (max-width: @minimum) { .stream-container { .thumbnail-container, .addon-name-container {