feat: Side Drawer component implementation inside the Player

package.json

@@ -17,7 +17,7 @@
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.3",
-        "@stremio/stremio-icons": "5.4.0",
+        "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.48",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",

src/common/Transition/Transition.tsx

@@ -0,0 +1,60 @@
+import { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    children: JSX.Element,
+    when: boolean,
+    name: string,
+};
+
+const Transition = ({ children, when, name }: Props) => {
+    const [element, setElement] = useState<HTMLElement | null>(null);
+    const [mounted, setMounted] = useState(false);
+
+    const [state, setState] = useState('enter');
+    const [active, setActive] = useState(false);
+
+    const callbackRef = useCallback((element: HTMLElement | null) => {
+        setElement(element);
+    }, []);
+
+    const className = useMemo(() => {
+        const animationClass = `${name}-${state}`;
+        const activeClass = active ? `${name}-active` : null;
+
+        return children && classNames(
+            children.props.className,
+            animationClass,
+            activeClass,
+        );
+    }, [name, state, active, children]);
+
+    const onTransitionEnd = useCallback(() => {
+        state === 'exit' && setMounted(false);
+    }, [state]);
+
+    useEffect(() => {
+        setState(when ? 'enter' : 'exit');
+        when && setMounted(true);
+    }, [when]);
+
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            setActive(!!element);
+        });
+    }, [element]);
+
+    useEffect(() => {
+        element?.addEventListener('transitionend', onTransitionEnd);
+        return () => element?.removeEventListener('transitionend', onTransitionEnd);
+    }, [element, onTransitionEnd]);
+
+    return (
+        mounted && cloneElement(children, {
+            ref: callbackRef,
+            className,
+        })
+    );
+};
+
+export default Transition;

src/common/Transition/index.ts

@@ -0,0 +1,2 @@
+import Transition from './Transition';
+export default Transition;

src/common/animations.less

@@ -38,4 +38,17 @@
     100% {
         transform: translateY(0%);
     }
+}
+
+.slide-left-enter {
+    transform: translateX(100%);
+}
+
+.slide-left-active {
+    transform: translateX(0%);
+    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
+}
+
+.slide-left-exit {
+    transform: translateX(100%);
 }

src/common/index.js

@@ -29,6 +29,7 @@ const Slider = require('./Slider');
 const { default: TextInput } = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
+const { default: Transition } = require('./Transition');
 const Video = require('./Video');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
@@ -84,6 +85,7 @@ module.exports = {
     useToast,
     TooltipProvider,
     Tooltip,
+    Transition,
     Video,
     comparatorWithPriorities,
     CONSTANTS,

src/routes/MetaDetails/VideosList/SeasonsBar/styles.less

@@ -36,10 +36,6 @@
             background-color: var(--overlay-color);
         }
 
-        &:focus {
-            background-color: var(--primary-foreground-color);
-        }
-
         &>:first-child {
             margin-right: 0.5rem;
         }

src/routes/Player/ControlBar/ControlBar.js

@@ -35,9 +35,8 @@ const ControlBar = ({
     onVolumeChangeRequested,
     onSeekRequested,
     onToggleSubtitlesMenu,
-    onToggleInfoMenu,
     onToggleSpeedMenu,
-    onToggleVideosMenu,
+    onToggleSideDrawer,
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
     ...props
@@ -48,9 +47,6 @@ const ControlBar = ({
     const onSubtitlesButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.subtitlesMenuClosePrevented = true;
     }, []);
-    const onInfoButtonMouseDown = React.useCallback((event) => {
-        event.nativeEvent.infoMenuClosePrevented = true;
-    }, []);
     const onSpeedButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.speedMenuClosePrevented = true;
     }, []);
@@ -151,9 +147,6 @@ const ControlBar = ({
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onToggleSpeedMenu}>
                         <Icon className={styles['icon']} name={'speed'} />
                     </Button>
-                    <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onToggleInfoMenu}>
-                        <Icon className={styles['icon']} name={'about'} />
-                    </Button>
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
                         <Icon className={styles['icon']} name={'cast'} />
                     </Button>
@@ -162,7 +155,7 @@ const ControlBar = ({
                     </Button>
                     {
                         metaItem?.content?.videos?.length > 0 ?
-                            <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onToggleVideosMenu}>
+                            <Button className={styles['control-bar-button']} tabIndex={-1} onMouseDown={onVideosButtonMouseDown} onClick={onToggleSideDrawer}>
                                 <Icon className={styles['icon']} name={'episodes'} />
                             </Button>
                             :
@@ -200,9 +193,8 @@ ControlBar.propTypes = {
     onVolumeChangeRequested: PropTypes.func,
     onSeekRequested: PropTypes.func,
     onToggleSubtitlesMenu: PropTypes.func,
-    onToggleInfoMenu: PropTypes.func,
     onToggleSpeedMenu: PropTypes.func,
-    onToggleVideosMenu: PropTypes.func,
+    onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
 };

src/routes/Player/ControlBar/styles.less

@@ -100,14 +100,16 @@
 
             .control-bar-buttons-menu-container {
                 position: absolute;
-                right: 0.15rem;
+                right: 0rem;
                 bottom: 4.5rem;
-                flex-direction: column;
                 padding: 0.5rem;
+                margin: 0.5rem;
+                max-width: calc(100dvw - 1rem);
                 border-radius: var(--border-radius);
                 background-color: var(--modal-background-color);
                 box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
                     0 1.1rem 0.85rem @color-background-dark5-20;
+                overflow-x: auto;
 
                 &:not(:global(.open)) {
                     display: none;