episode streams panel title missing resolved

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -19,6 +19,9 @@ const StreamsList = ({ className, video, ...props }) => {
     const onAddonSelected = React.useCallback((event) => {
         setSelectedAddon(event.value);
     }, []);
+    const backButtonOnClick = React.useCallback(() => {
+        window.history.back();
+    }, []);
     const streamsByAddon = React.useMemo(() => {
         return props.streams
             .filter((streams) => streams.content.type === 'Ready')
@@ -92,15 +95,32 @@ const StreamsList = ({ className, video, ...props }) => {
                             </div>
                             :
                             <React.Fragment>
-                                {
+                                <div className={styles['select-choices-wrapper']}>
-                                    Object.keys(streamsByAddon).length > 1 ?
+                                    { video ? (
-                                        <Multiselect
+                                        <React.Fragment>
-                                            {...selectableOptions}
+                                            <Button className={classnames(styles['button-container'], styles['back-button-container'])} tabIndex={-1} onClick={backButtonOnClick}>
-                                            className={styles['select-input-container']}
+                                                <Icon className={styles['icon']} name={'chevron-back'} />
-                                        />
+                                            </Button>
+                                            <div className={styles['episode-title']}>
+                                                {`S${video?.season}E${video?.episode} ${(video?.title)?.toLowerCase()?.replace(/\b\w/g, (char) => char.toUpperCase())}
+`}
+                                            </div>
+                                        </React.Fragment>
+                                    )
                                         :
                                         null
-                                }
+                                    }
+                                    {
+                                        Object.keys(streamsByAddon).length > 1 ? (
+                                            <Multiselect
+                                                {...selectableOptions}
+                                                className={styles['select-input-container']}
+                                            />
+                                        )
+                                            :
+                                            null
+                                    }
+                                </div>
                                 <div className={styles['streams-container']}>
                                     {filteredStreams.map((stream, index) => (
                                         <Stream

src/routes/MetaDetails/StreamsList/styles.less

@@ -40,27 +40,67 @@
             color: var(--primary-foreground-color);
         }
     }
-
+    .select-choices-wrapper {
-    .select-input-container {
+        display: flex;
-        flex: 0 0 auto;
+        align-items: center;
+        z-index: 1;
         margin: 1em 1em 0 1em;
-        background: none;
+        gap: 0 0.5em;
+        overflow: visible;
 
-        &:hover, &:focus, &:global(.active) {
+        .back-button-container {
-            background-color: var(--overlay-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 0.5em;
+            padding: 1em;
+            max-height: 3em;
+            .icon {
+                width: 1.5em;
+                height: 1.5em;
+                color: var(--primary-foreground-color);
+                opacity: 0.6;
+            }
+            &:hover, &:global(.active) {
+                background-color: var(--overlay-color);
+                opacity: 1;
+    
+                .icon {
+                    color: var(--primary-foreground-color);
+                    opacity: 0.8;
+                }
+            }
         }
 
-        & >.multiselect-label {
+        .episode-title {
+            min-width: 45%;
             color: var(--primary-foreground-color);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
-        & >.multiselect-icon {
+        .select-input-container {
-            color: var(--primary-foreground-color);
+            min-width: 40%;
-        }
+            flex: 0 0 auto;
+            flex-grow: 1;
+            background: none;
+            &:hover, &:focus, &:global(.active) {
+                background-color: var(--overlay-color);
+            }
     
-        .multiselect-menu-container {
+            & >.multiselect-label {
-            max-height: calc(3.2rem * 7);
+                color: var(--primary-foreground-color);
-            overflow: auto;
+            }
+    
+            & >.multiselect-icon {
+                color: var(--primary-foreground-color);
+            }
+    
+            .multiselect-menu-container {
+                max-height: calc(3.2rem * 7);
+                overflow: auto;
+            }
         }
     }
 

src/routes/MetaDetails/VideosList/Video/Video.js

@@ -92,7 +92,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                 <div className={styles['info-container']}>
                     <div className={styles['title-container']}>
                         {episode !== null && !isNaN(episode) ? `${episode}. ` : null}
-                        {typeof title === 'string' && title.length > 0 ? title : id}
+                        {typeof title === 'string' && title.length > 0 ? title.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase()) : id}
                     </div>
                     <div className={styles['flex-row-container']}>
                         {