removed string parsing fixed action buttons

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 {

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 ?
-                    <StreamInfo
-                        streamName={streamName}
-                        streamProvider={streamProvider}
-                        streamSeeders={streamSeeders}
-                        streamSize={streamSize}
-                        streamFlags={streamFlags}
-                    />
+                    <div className={styles['info-container']}>{description}</div>
                     :
                     null
             }

src/routes/MetaDetails/StreamsList/Stream/StreamInfo/StreamInfo.js

@@ -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 (
-        <div className={styles['info-container']}>
-            <div className={styles['stream-name']}>{streamName}</div>
-            <div className={styles['description-container']}>
-                <div className={styles['stream-properties']}>
-                    {
-                        typeof streamSeeders === 'number' && streamSeeders > 0 ?
-                            <div className={styles['property-container']}>
-                                <Icon className={styles['icon']} name={'person'} />
-                                <div className={styles['property']}>{streamSeeders}</div>
-                            </div>
-                            :
-                            null
-                    }
-                    {
-                        typeof streamSize === 'string' && streamSize.length > 0 ?
-                            <div className={styles['property-container']}>
-                                <Icon className={styles['icon']} name={'memory'} />
-                                <div className={styles['property']}>{streamSize}</div>
-                            </div>
-                            :
-                            null
-                    }
-                    {
-                        typeof streamProvider === 'string' && streamProvider.length > 0 ?
-                            <div className={styles['property-container']}>
-                                <Icon className={styles['icon']} name={'settings-outline'} />
-                                <div className={styles['property overflow']}>{streamProvider}</div>
-                            </div>
-                            :
-                            null
-                    }
-                    {
-                        typeof streamFlags === 'string' && streamFlags.length > 0 ?
-                            <div className={styles['property-container']}>
-                                <div className={styles['property']}>{streamFlags}</div>
-                            </div>
-                            :
-                            null
-                    }
-                </div>
-            </div>
-        </div>
-    );
-};
-
-StreamInfo.propTypes = {
-    streamFlags: PropTypes.string,
-    streamSize: PropTypes.string,
-    streamProvider: PropTypes.string,
-    streamSeeders: PropTypes.number,
-    streamName: PropTypes.string
-};
-module.exports = StreamInfo;
-

src/routes/MetaDetails/StreamsList/Stream/StreamInfo/index.js

@@ -1,6 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const StreamInfo = require('./StreamInfo');
-
-module.exports = StreamInfo;
-

src/routes/MetaDetails/StreamsList/Stream/StreamInfo/styles.less

@@ -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;
-            }
-        }
-    }
-}

src/routes/MetaDetails/StreamsList/Stream/parseTorrentInfo.js

@@ -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;
-

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 {