fix(SideDrawer): add show more/less button for description

src/routes/Player/SideDrawer/SideDrawer.less

@@ -67,6 +67,24 @@
         }
     }
 
+    .show-more-btn {
+        background: none;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        font: inherit;
+        padding: 0.1rem 1.5rem 0.2rem 1.5rem;
+        margin: 0.1rem auto 0.2rem auto;
+        display: block;
+        text-align: center;
+        transition: text-decoration 0.2s;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
     .series-content {
         flex: 2;
         display: flex;

src/routes/Player/SideDrawer/SideDrawer.tsx

@@ -19,6 +19,8 @@ type Props = {
 const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
     const { core } = useServices();
     const [season, setSeason] = useState<number>(seriesInfo?.season);
+    const [showFullDescription, setShowFullDescription] = useState(false);
+    const toggleDescription = () => setShowFullDescription((prev) => !prev);
     const metaItem = useMemo(() => {
         return seriesInfo ?
             {
@@ -42,6 +44,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
             })
             .sort((a, b) => (a || Number.MAX_SAFE_INTEGER) - (b || Number.MAX_SAFE_INTEGER));
     }, [props.metaItem.videos]);
+    const description = useMemo(() => {
+        if (!metaItem.description) return '';
+        if (showFullDescription || metaItem.description.length <= 175) return metaItem.description;
+        const sliced = metaItem.description.slice(0, 175);
+        const lastSpace = sliced.lastIndexOf(' ');
+        return (lastSpace > 0 ? sliced.slice(0, lastSpace) : sliced) + '...';
+    }, [metaItem.description, showFullDescription])
 
     const seasonOnSelect = useCallback((event: { value: string }) => {
         setSeason(parseInt(event.value));
@@ -89,10 +98,18 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
                     runtime={metaItem.runtime}
                     releaseInfo={metaItem.releaseInfo}
                     released={metaItem.released}
-                    description={metaItem.description}
+                    description={description}
                     links={metaItem.links}
                 />
             </div>
+            {metaItem.description && metaItem.description.length > 175 && (
+                <button
+                    className={styles['show-more-btn']}
+                    onClick={toggleDescription}
+                >   
+                    {showFullDescription ? 'Show less' : 'Show more'}
+                </button>
+            )}
             {
                 seriesInfo ?
                     <div className={styles['series-content']}>