+ {
+ typeof description === 'string' && description.length > 0 ?
+
{
progress !== null && !isNaN(progress) && progress > 0 ?
diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js
new file mode 100644
index 000000000..0abf1584d
--- /dev/null
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js
@@ -0,0 +1,61 @@
+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 ?
+
+ :
+ null
+ }
+ {
+ typeof streamSize === 'string' && streamSize.length > 0 ?
+
+ :
+ null
+ }
+ {
+ typeof streamProvider === 'string' && streamProvider.length > 0 ?
+
+ :
+ null
+ }
+ {
+ typeof streamFlags === 'string' && streamFlags.length > 0 ?
+
+ :
+ 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
new file mode 100644
index 000000000..b047c7fca
--- /dev/null
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/index.js
@@ -0,0 +1,6 @@
+// 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
new file mode 100644
index 000000000..912b023e0
--- /dev/null
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamInfo/styles.less
@@ -0,0 +1,45 @@
+.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;
+ color: var(--primary-foreground-color);
+ white-space: pre;
+
+ .stream-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .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
new file mode 100644
index 000000000..4299cf267
--- /dev/null
+++ b/src/routes/MetaDetails/StreamsList/Stream/parseTorrentInfo.js
@@ -0,0 +1,36 @@
+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 c37c56cbe..bcc2bb5e3 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -70,26 +70,39 @@
flex: 1;
max-height: 3.6em;
padding: 0 0.5rem 0 1.5rem;
- display: -webkit-box;
+ display: flex;
+ flex-direction: column;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: var(--primary-foreground-color);
white-space: pre;
+
+ .stream-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .stream-properties {
+ display: flex;
+ flex-direction: row;
+ .icon {
+ width: 1em;
+ height: 1em;
+ padding: 0;
+ color: var(--primary-foreground-color);
+ background-color: transparent;
+ }
+ }
}
- .play-icon {
+ .icon {
flex: none;
- width: 3.5rem;
- height: 5rem;
- opacity: 0;
-
- .play-icon-circle-centered-background {
- fill: none;
- }
-
- .play-icon-circle-centered-icon {
- fill: var(--primary-foreground-color);
- }
+ width: 3rem;
+ height: 3rem;
+ padding: 0.7rem;
+ border-radius: 50%;
+ color: var(--primary-foreground-color);
+ background-color: var(--secondary-accent-color);
}
.progress-bar-container {
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 9aac1501f..13489c2be 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -123,6 +123,7 @@
padding: 1.5rem 1rem;
border-radius: var(--border-radius);
background-color: var(--secondary-accent-color);
+ border-radius: 3rem;
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);