Merge pull request #269 from Stremio/mobile

Adapt layout to mobile

package.json

@@ -19,6 +19,7 @@
         "@stremio/stremio-icons": "3.0.5",
         "@stremio/stremio-video": "0.0.20-rc.4",
         "a-color-picker": "1.2.1",
+        "bowser": "2.11.0",
         "buffer": "6.0.3",
         "classnames": "2.3.1",
         "eventemitter3": "4.0.7",

src/App/styles.less

@@ -135,4 +135,11 @@ html {
     html {
         font-size: 14px;
     }
+}
+
+@media only screen and (max-width: @xsmall) {
+    html {
+        min-width: inherit;
+        min-height: inherit;
+    }
 }

src/common/ColorInput/ColorPicker/styles.less

@@ -2,6 +2,7 @@
 
 .color-picker-container {
     overflow: visible;
+    text-align: center;
 
     * {
         overflow: visible;

src/common/MainNavBars/styles.less

@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .main-nav-bars-container {
     position: relative;
     z-index: 0;
@@ -28,4 +30,17 @@
         left: var(--vertical-nav-bar-size);
         z-index: 0;
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .main-nav-bars-container {
+        .nav-content-container {
+            left: 0;
+            bottom: var(--vertical-nav-bar-size);
+        }
+
+        .vertical-nav-bar {
+            top: initial;
+        }
+    }
 }

src/common/MetaItem/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
@@ -175,4 +176,14 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-item-container {
+        padding: 0.5rem;
+
+        .title-bar-container {
+            margin-top: 0.5rem;
+        }
+    }
 }

src/common/MetaPreview/ActionButton/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .action-button-container {
     display: flex;
@@ -45,4 +46,29 @@
             color: @color-surface-light5-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .action-button-container {
+        flex-direction: row;
+        padding: 0 1rem;
+
+        .icon-container {
+            flex: none;
+            align-self: center;
+            height: 2rem;
+            width: 2rem;
+            padding-top: 0;
+            margin-right: 0.5rem;
+
+            &:only-child {
+                padding: 0;
+                margin-right: 0;
+            }
+        }
+
+        .label-container {
+            flex: 1;
+        }
+    }
 }

src/common/MetaPreview/MetaPreview.js

@@ -116,7 +116,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                             renderFallback={renderLogoFallback}
                         />
                         :
-                        null
+                        renderLogoFallback()
                 }
                 {
                     (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?

src/common/MetaPreview/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .meta-preview-container {
     position: relative;
@@ -196,4 +197,42 @@
 
 .share-prompt {
     width: 24rem;
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-preview-container {
+        .meta-info-container {
+            padding: 0 1.5rem;
+
+            .logo {
+                margin: 1em 0;
+            }
+        }
+
+        .action-buttons-container {
+            flex-wrap: nowrap;
+            padding: 0 1.5rem;
+            overflow-x: visible;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .action-button {
+                width: auto;
+                height: 4rem;
+                max-width: 60%;
+                margin: 1rem 0;
+
+                &:not(:last-child) {
+                    margin-right: 1rem;
+                }
+            }
+        }
+    }
+
+    .share-prompt {
+        width: 100%;
+    }
 }

src/common/MetaRow/MetaRowPlaceholder/styles.less

@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .meta-row-placeholder-container {
     .header-container {
         display: flex;
@@ -85,4 +87,22 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-row-placeholder-container {
+        .meta-items-container {
+            .meta-item {
+                margin: 0.5rem;
+
+                &:not(:first-child) {
+                    margin-left: 0.5rem;
+                }
+
+                .title-bar-container {
+                    margin-top: 0.5rem;
+                }
+            }
+        }
+    }
 }

src/common/MetaRow/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .meta-row-container {
     overflow: visible;
@@ -75,8 +76,6 @@
         overflow: visible;
 
         .meta-item {
-            padding: 1rem;
-
             &:not(:first-child) {
                 margin-left: 0.5rem;
             }
@@ -94,4 +93,26 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .meta-row-container {
+        .header-container {
+            padding: 0 0.5rem;
+
+            .title-container {
+                margin-right: 0.5rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .meta-items-container {
+            .meta-item {
+                &:not(:first-child) {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
 }

src/common/ModalDialog/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .modal-container {
     display: flex;
@@ -117,4 +118,45 @@
         text-align: center;
         color: @color-surface-light5-90;
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .modal-container {
+        .modal-dialog-container {
+            position: relative;
+            width: 90%;
+            max-width: initial;
+            z-index: 0;
+
+            .close-button-container {
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin: 0.75rem 0.75rem 0 0;
+                padding: 0.25rem;
+            }
+
+            .title-container {
+                max-height: 4.8em;
+                margin: 1rem 3rem 1rem 1.5rem;
+            }
+
+            .modal-dialog-content {
+                margin: 0 0.5rem;
+                padding: 0 0.5rem;
+
+                &:last-child {
+                    margin-bottom: 1rem;
+                }
+            }
+
+            .buttons-container {
+                margin: 1rem 1rem 0;
+
+                &:last-child {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+    }
 }

src/common/Multiselect/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;

src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -17,7 +17,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
     }, []);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
-        <Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
+        <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
             <Icon className={styles['icon']} icon={'ic_more'} />
             {children}
         </Button>

src/common/NavBar/HorizontalNavBar/NavMenu/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .nav-menu-container {
     width: 20rem;
@@ -100,4 +101,10 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .nav-menu-container {
+        max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem);
+    }
 }

src/common/NavBar/HorizontalNavBar/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .horizontal-nav-bar-container {
     display: flex;
@@ -90,4 +91,27 @@
             fill: @color-secondaryvariant2-light1-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .horizontal-nav-bar-container {
+        justify-content: space-between;
+        padding-right: 0;
+
+        .logo-container {
+            width: var(--horizontal-nav-bar-size);
+        }
+
+        .search-bar {
+            margin: 0 0.5rem;
+        }
+
+        .spacing {
+            display: none;
+        }
+
+        .button-container:not(.back-button-container):not(.menu-button-container) {
+            display: none;
+        }
+    }
 }

src/common/NavBar/VerticalNavBar/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .vertical-nav-bar-container {
     width: var(--vertical-nav-bar-size);
@@ -24,4 +25,28 @@
             margin-bottom: 1rem;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .vertical-nav-bar-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        height: var(--vertical-nav-bar-size);
+        width: 100%;
+        overflow-y: hidden;
+        overflow-x: auto;
+
+        .nav-tab-button {
+            flex: none;
+
+            &:first-child {
+                margin-top: 0;
+            }
+    
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
 }

src/common/Popup/Popup.js

@@ -104,7 +104,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
         ref: labelRef,
         className: classnames(styles['label-container'], props.className, { 'active': open }),
         children: open ?
-            <FocusLock ref={menuRef} className={classnames(styles['menu-container'], styles[`menu-direction-${autoDirection}`], styles[`menu-direction-${direction}`])} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown }}>
+            <FocusLock ref={menuRef} className={classnames(styles['menu-container'], { [styles[`menu-direction-${autoDirection}`]]: !direction }, { [styles[`menu-direction-${direction}`]]: direction })} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown }}>
                 {renderMenu()}
             </FocusLock>
             :

src/index.js

@@ -5,6 +5,12 @@ if (typeof process.env.SENTRY_DSN === 'string') {
     Sentry.init({ dsn: process.env.SENTRY_DSN });
 }
 
+const Bowser = require('bowser');
+const browser = Bowser.parse(window.navigator?.userAgent || '');
+if (browser?.platform?.type === 'desktop') {
+    document.querySelector('meta[name="viewport"]')?.setAttribute('content', '');
+}
+
 const React = require('react');
 const ReactDOM = require('react-dom');
 const App = require('./App');

src/routes/Addons/Addon/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .addon-container {
     display: flex;
@@ -166,4 +167,46 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .addon-container {
+        flex-wrap: wrap;
+
+        .info-container {
+            margin-left: 0.5rem;
+            padding: 0;
+        }
+
+        .buttons-container {
+            flex: 0 1 100%;
+            width: auto;
+            margin-top: 1rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            .install-button-container, .uninstall-button-container, .share-button-container {
+                &:not(:first-child) {
+                    margin-top: 0;
+                }
+            }
+
+            .share-button-container {
+                .icon {
+                    margin-right: 0;
+                }
+
+                .label {
+                    display: none;
+                }
+            }
+
+            .install-button-container, .uninstall-button-container {
+                flex-basis: 100%;
+                margin-right: 1rem;
+            }
+        }
+    }
 }

src/routes/Addons/Addons.js

@@ -16,6 +16,7 @@ const Addons = ({ urlParams, queryParams }) => {
     const remoteAddons = useRemoteAddons(urlParams);
     const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams);
     const selectInputs = useSelectableInputs(installedAddons, remoteAddons);
+    const [filtersModalOpen, openFiltersModal, closeFiltersModal] = useBinaryState(false);
     const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
     const addAddonUrlInputRef = React.useRef(null);
     const addAddonOnSubmit = React.useCallback(() => {
@@ -94,6 +95,9 @@ const Addons = ({ urlParams, queryParams }) => {
                         value={search}
                         onChange={searchInputOnChange}
                     />
+                    <Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}>
+                        <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                    </Button>
                 </div>
                 {
                     installedAddons.selected !== null ?
@@ -169,6 +173,20 @@ const Addons = ({ urlParams, queryParams }) => {
                             </div>
                 }
             </div>
+            {
+                filtersModalOpen ?
+                    <ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
+                        {selectInputs.map((selectInput, index) => (
+                            <Multiselect
+                                {...selectInput}
+                                key={index}
+                                className={styles['select-input-container']}
+                            />
+                        ))}
+                    </ModalDialog>
+                    :
+                    null
+            }
             {
                 addAddonModalOpen ?
                     <ModalDialog

src/routes/Addons/styles.less

@@ -1,16 +1,26 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    share-modal-content: modal-dialog-content;
+}
+
 :import('~stremio/common/ModalDialog/styles.less') {
     addon-modal-content: modal-dialog-content;
     cancel-button-label: label;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    filters-modal-container: modal-dialog-container;
+    filters-modal-content: modal-dialog-content;
+}
+
 .addons-container {
     width: 100%;
     height: 100%;
@@ -92,6 +102,23 @@
                 flex-shrink: 1;
                 flex-basis: 18rem;
             }
+
+            .filter-button {
+                flex: none;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                width: 3.5rem;
+                height: 3.5rem;
+                background-color: @color-background;
+
+                .filter-icon {
+                    flex: none;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    fill: @color-secondaryvariant1-90;
+                }
+            }
         }
 
         .message-container {
@@ -115,6 +142,26 @@
     }
 }
 
+.filters-modal {
+    .filters-modal-container {
+        overflow: visible;
+
+        .filters-modal-content {
+            display: flex;
+            flex-direction: column;
+            overflow: visible;
+
+            .select-input-container {
+                height: 3.5rem;
+
+                &:not(:last-child) {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+    }
+}
+
 .add-addon-modal-container {
     .addon-modal-content {
         width: 30rem;
@@ -160,7 +207,7 @@
 }
 
 .share-modal-container {
-    .addon-modal-content {
+    .share-modal-content {
         width: 30rem;
 
         .title-container {
@@ -217,4 +264,53 @@
             margin-top: 1rem;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .addons-container {
+        .addons-content {
+            .selectable-inputs-container {
+                .add-button-container {
+                    position: fixed;
+                    right: 0;
+                    bottom: calc(3rem + var(--horizontal-nav-bar-size));
+                    box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
+                        0 1.1rem 0.85rem @color-background-dark5-20;
+                }
+
+                .select-input-container {
+                    display: none;
+                }
+
+                .spacing {
+                    display: none;
+                }
+
+                .search-bar {
+                    flex-basis: 100%;
+                    margin-right: 1rem;
+                }
+
+                .filter-button {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    .share-modal-container {
+        .share-modal-content {
+            width: auto;
+        }
+    }
+
+    .add-addon-modal-container {
+        .addon-modal-content {
+            width: auto;
+
+            .notice {
+                margin-bottom: 1rem;
+            }
+        }
+    }
 }

src/routes/Board/styles.less

@@ -181,4 +181,51 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .board-container {
+        position: relative;
+        z-index: 0;
+
+        .board-content-container {
+            &:only-child {
+                .board-content {
+                    height: 100%;
+                }
+            }
+            
+            .board-content {
+                height: calc(100% - 4rem);
+
+                .board-row {
+                    margin: 2rem 1rem;
+                }
+
+                .board-row-poster, .board-row-square, .continue-watching-row {
+                    .meta-item, .meta-item-placeholder {
+                        &:nth-child(n+4) {
+                            display: none;
+                        }
+                    }
+                }
+
+                .board-row-landscape {
+                    .meta-item, .meta-item-placeholder {
+                        &:nth-child(n+3) {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+        
+        .board-warning-container {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: var(--vertical-nav-bar-size);
+            height: 4rem;
+        }
+    }
 }

src/routes/Discover/Discover.js

@@ -185,23 +185,17 @@ const Discover = ({ urlParams, queryParams }) => {
             </div>
             {
                 inputsModalOpen && discover.defaultRequest ?
-                    <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
+                    <ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
-                        {selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
+                        {selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
-                            <div key={index} className={styles['selectable-input-container']}>
+                            <Multiselect
-                                <div className={styles['select-input-label']} title={title}>
+                                key={index}
-                                    {title}
+                                className={styles['select-input']}
-                                    {isRequired ? '*' : null}
+                                title={title}
-                                </div>
+                                options={options}
-                                <Multiselect
+                                selected={selected}
-                                    className={styles['select-input']}
+                                renderLabelText={renderLabelText}
-                                    mode={'modal'}
+                                onSelect={onSelect}
-                                    title={title}
+                            />
-                                    options={options}
-                                    selected={selected}
-                                    renderLabelText={renderLabelText}
-                                    onSelect={onSelect}
-                                />
-                            </div>
                         ))}
                     </ModalDialog>
                     :

src/routes/Discover/styles.less

@@ -18,6 +18,11 @@
     pagination-label: label;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    selectable-inputs-modal-container: modal-dialog-container;
+    selectable-inputs-modal-content: modal-dialog-content;
+}
+
 .discover-container {
     width: 100%;
     height: 100%;
@@ -235,46 +240,24 @@
     }
 }
 
-.selectable-inputs-modal-container {
+.selectable-inputs-modal {
-    .selectable-input-container {
+    .selectable-inputs-modal-container {
-        display: flex;
+        overflow: visible;
-        flex-direction: row;
-        align-items: center;
 
-        &:not(:last-child) {
+        .selectable-inputs-modal-content {
-            margin-bottom: 1rem;
+            overflow: visible;
-        }
 
-        .select-input-label {
+            .select-input {
-            flex: none;
+                height: 3.5rem;
-            width: 10rem;
-            max-height: 2.4em;
-            margin-right: 1.5rem;
-            font-size: 1.1rem;
-            color: @color-background-dark2-90;
-        }
 
-        .select-input {
+                &:not(:last-child) {
-            flex: none;
+                    margin-bottom: 1rem;
-            width: 15rem;
+                }
-            height: 3.5rem;
-            background-color: @color-surface-light2;
 
-            &:hover, &:focus {
+                .multiselect-menu-container {
-                background-color: @color-surface-light3;
+                    max-height: calc(3.2rem * 4);
-            }
+                    overflow: auto;
-
+                }
-            &:focus {
-                outline-color: @color-background-dark2;
-            }
-
-            .multiselect-label {
-                font-weight: normal;
-                color: @color-background-dark2-90;
-            }
-
-            .multiselect-icon {
-                fill: @color-background-dark2-90;
             }
         }
     }
@@ -437,4 +420,37 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .discover-container {
+        .discover-content {
+            .catalog-container {
+                .selectable-inputs-container {
+                    flex-direction: row-reverse;
+                    justify-content: space-between;
+
+                    .select-input {
+                        display: none;
+                    }
+
+                    .filter-container {
+                        display: flex;
+                    }
+
+                    .spacing {
+                        display: none;
+                    }
+
+                    .pagination-input {
+                        margin-left: 0;
+                    }
+                }
+
+                .meta-items-container {
+                    grid-template-columns: repeat(3, 1fr);
+                }
+            }
+        }
+    }
 }

src/routes/Intro/PasswordResetModal/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/ModalDialog/styles.less') {
     password-reset-modal-content: modal-dialog-content;
@@ -50,4 +51,12 @@
             color: @color-surface-dark4-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .password-reset-modal-container {
+        .password-reset-modal-content {
+            width: auto;
+        }
+    }
 }

src/routes/Intro/styles.less

@@ -1,10 +1,12 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .intro-container {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     width: 100%;
     height: 100%;
     background:
@@ -234,4 +236,14 @@
             animation: 1s linear infinite alternate flash;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .intro-container {
+        .form-container {
+            flex: 0 1 auto;
+            width: 100%;
+            padding: 2rem 1.5rem;
+        }
+    }
 }

src/routes/Library/Library.js

@@ -3,8 +3,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('@stremio/stremio-icons/dom');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, Multiselect, MainNavBars, LibItem, Image, PaginationInput, useProfile, routesRegexp } = require('stremio/common');
+const { Button, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -46,6 +47,7 @@ const Library = ({ model, urlParams, queryParams }) => {
     const profile = useProfile();
     const library = useLibrary(model, urlParams, queryParams);
     const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
+    const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
     return (
         <MainNavBars className={styles['library-container']} route={model}>
             <div className={styles['library-content']}>
@@ -61,6 +63,9 @@ const Library = ({ model, urlParams, queryParams }) => {
                                     :
                                     <PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
                             }
+                            <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
+                                <Icon className={styles['filter-icon']} icon={'ic_filter'} />
+                            </Button>
                         </div>
                         :
                         null
@@ -106,6 +111,15 @@ const Library = ({ model, urlParams, queryParams }) => {
                                 </div>
                 }
             </div>
+            {
+                inputsModalOpen ?
+                    <ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
+                        <Multiselect {...typeSelect} className={styles['select-input-container']} />
+                        <Multiselect {...sortSelect} className={styles['select-input-container']} />
+                    </ModalDialog>
+                    :
+                    null
+            }
         </MainNavBars>
     );
 };

src/routes/Library/styles.less

@@ -14,6 +14,11 @@
     pagination-label: label;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    selectable-inputs-modal-container: modal-dialog-container;
+    selectable-inputs-modal-content: modal-dialog-content;
+}
+
 .library-container {
     width: 100%;
     height: 100%;
@@ -49,6 +54,23 @@
                 }
             }
 
+            .filter-container {
+                flex: none;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                width: 3.5rem;
+                height: 3.5rem;
+                background-color: @color-background;
+
+                .filter-icon {
+                    flex: none;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    fill: @color-secondaryvariant1-90;
+                }
+            }
+
             .spacing {
                 flex: 1;
             }
@@ -162,6 +184,24 @@
     }
 }
 
+.selectable-inputs-modal {
+    .selectable-inputs-modal-container {
+        overflow: visible;
+
+        .selectable-inputs-modal-content {
+            overflow: visible;
+
+            .select-input-container {
+                height: 3.5rem;
+
+                &:not(:last-child) {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+    }
+}
+
 @media only screen and (min-width: @large) {
     .library-container {
         .library-content {
@@ -230,4 +270,34 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .library-container {
+        .library-content {
+            .selectable-inputs-container {
+                justify-content: space-between;
+
+                .select-input-container {
+                    display: none;
+                }
+
+                .spacing {
+                    display: none;
+                }
+
+                .pagination-input {
+                    margin-left: 0;
+                }
+
+                .filter-container {
+                    display: flex;
+                }
+            }
+
+            .meta-items-container {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+    }
 }

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

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/PlayIconCircleCentered/styles.less') {
     play-icon-circle-centered-background: background;
@@ -90,4 +91,24 @@
             background-color: @color-primaryvariant1;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .stream-container {
+        &:hover, &focus {
+            background-color: @color-surface-light5-20;
+        }
+
+        .thumbnail-container, .addon-name-container {
+            .addon-name {
+                font-weight: 500;
+            }
+        }
+
+        .play-icon {
+            .play-icon-circle-centered-icon {
+                fill: @color-surface-light5-90;
+            }
+        }
+    }
 }

src/routes/MetaDetails/StreamsList/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .streams-list-container {
     display: flex;
@@ -73,4 +74,23 @@
             color: @color-surface-light5-90;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .streams-list-container {
+        overflow: visible;
+
+        .streams-container {
+            margin-top: 0;
+            scrollbar-color: @color-surface-light5-20 transparent;
+
+            &::-webkit-scrollbar-thumb {
+                background-color: @color-surface-light5-20;
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+        }
+    }
 }

src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js

@@ -54,6 +54,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
             <Multiselect
                 className={styles['seasons-popup-label-container']}
                 title={season > 0 ? `Season ${season}` : 'Specials'}
+                direction={'bottom-left'}
                 options={options}
                 selected={selected}
                 onSelect={seasonOnSelect}

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

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
@@ -80,4 +81,16 @@
             overflow: auto;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .seasons-bar-container {
+        padding-top: 0;
+
+        .seasons-popup-label-container {
+            .multiselect-menu-container {
+                max-height: calc(3.2rem * 3);
+            }
+        }
+    }
 }

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

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Popup/styles.less') {
     context-menu-container: menu-container;
@@ -128,44 +129,52 @@
             background-color: @color-primaryvariant1;
         }
     }
+}
 
-    .context-menu-container {
+@media only screen and (max-width: @minimum) {
-        max-width: calc(90% - 1.5rem);
+    .video-container {
-
+        &:hover, &:focus, &:global(.active) {
-        &.menu-direction-top-left, &.menu-direction-bottom-left {
+            background-color: @color-surface-light5-20;
-            right: 1.5rem;
         }
 
-        &.menu-direction-top-right, &.menu-direction-bottom-right {
+        .context-menu-container {
-            left: 1.5rem;
+            max-width: calc(90% - 1.5rem);
-        }
 
-        &.menu-direction-top-left, &.menu-direction-top-right {
+            &.menu-direction-top-left, &.menu-direction-bottom-left {
-            bottom: 90%;
+                right: 1.5rem;
-        }
+            }
 
-        &.menu-direction-bottom-left, &.menu-direction-bottom-right {
+            &.menu-direction-top-right, &.menu-direction-bottom-right {
-            top: 90%;
+                left: 1.5rem;
-        }
+            }
 
-        .context-menu-content {
+            &.menu-direction-top-left, &.menu-direction-top-right {
-            --spatial-navigation-contain: contain;
+                bottom: 90%;
-            background-color: @color-background-dark1;
+            }
 
-            .context-menu-option-container {
+            &.menu-direction-bottom-left, &.menu-direction-bottom-right {
-                display: flex;
+                top: 90%;
-                flex-direction: row;
+            }
-                align-items: center;
-                padding: 0.5rem 1rem;
 
-                &:hover, &:focus {
+            .context-menu-content {
-                    background-color: @color-background;
+                --spatial-navigation-contain: contain;
-                }
+                background-color: @color-background-dark1;
 
-                .context-menu-option-label {
+                .context-menu-option-container {
-                    font-size: 1rem;
+                    display: flex;
-                    max-height: 2.4em;
+                    flex-direction: row;
-                    color: @color-surface-light5-90;
+                    align-items: center;
+                    padding: 0.5rem 1rem;
+
+                    &:hover, &:focus {
+                        background-color: @color-background;
+                    }
+
+                    .context-menu-option-label {
+                        font-size: 1rem;
+                        max-height: 2.4em;
+                        color: @color-surface-light5-90;
+                    }
                 }
             }
         }

src/routes/MetaDetails/VideosList/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .videos-list-container {
     display: flex;
@@ -54,4 +55,10 @@
         align-self: stretch;
         overflow-y: auto;
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .videos-list-container {
+        overflow: visible;
+    }
 }

src/routes/MetaDetails/styles.less

@@ -125,4 +125,30 @@
             height: 100%;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .metadetails-container {
+        position: relative;
+        z-index: 0;
+
+        .metadetails-content {
+            display: block;
+            position: static;
+            z-index: initial;
+            overflow-y: auto;
+
+            .spacing {
+                display: none;
+            }
+
+            .background-image-layer {
+                top: var(--horizontal-nav-bar-size);
+            }
+
+            .videos-list, .streams-list {
+                background-color: transparent;
+            }
+        }
+    }
 }

src/routes/Player/ControlBar/ControlBar.js

@@ -9,6 +9,7 @@ const { useServices } = require('stremio/services');
 const SeekBar = require('./SeekBar');
 const VolumeSlider = require('./VolumeSlider');
 const styles = require('./styles');
+const { useBinaryState } = require('stremio/common');
 
 const ControlBar = ({
     className,
@@ -32,6 +33,7 @@ const ControlBar = ({
 }) => {
     const { chromecast } = useServices();
     const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
+    const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
     const onSubtitlesButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.subtitlesMenuClosePrevented = true;
     }, []);
@@ -112,21 +114,26 @@ const ControlBar = ({
                     onVolumeChangeRequested={onVolumeChangeRequested}
                 />
                 <div className={styles['spacing']} />
-                <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
+                <Button className={styles['control-bar-buttons-menu-button']} onClick={toogleButtonsMenu}>
-                    <Icon className={styles['icon']} icon={'ic_network'} />
+                    <Icon className={styles['icon']} icon={'ic_more'} />
-                </Button>
-                <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
-                    <Icon className={styles['icon']} icon={'ic_info'} />
-                </Button>
-                <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
-                    <Icon className={styles['icon']} icon={'ic_cast'} />
-                </Button>
-                <Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
-                    <Icon className={styles['icon']} icon={'ic_sub'} />
-                </Button>
-                <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
-                    <Icon className={styles['icon']} icon={'ic_videos'} />
                 </Button>
+                <div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
+                    <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
+                        <Icon className={styles['icon']} icon={'ic_network'} />
+                    </Button>
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
+                        <Icon className={styles['icon']} icon={'ic_info'} />
+                    </Button>
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
+                        <Icon className={styles['icon']} icon={'ic_cast'} />
+                    </Button>
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
+                        <Icon className={styles['icon']} icon={'ic_sub'} />
+                    </Button>
+                    <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
+                        <Icon className={styles['icon']} icon={'ic_videos'} />
+                    </Button>
+                </div>
             </div>
         </div>
     );

src/routes/Player/ControlBar/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 .control-bar-container {
     padding: 0 1.5rem;
@@ -52,5 +53,62 @@
         .spacing {
             flex: 1;
         }
+
+        .control-bar-buttons-menu-button {
+            flex: none;
+            width: 4rem;
+            height: 4rem;
+            display: none;
+            justify-content: center;
+            align-items: center;
+
+            .icon {
+                flex: none;
+                width: 3rem;
+                height: 2rem;
+                fill: @color-surface-light5;
+            }
+        }
+
+        .control-bar-buttons-menu-container {
+            flex: none;
+            display: flex;
+            flex-direction: row;
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .control-bar-container {
+        padding: 0;
+
+        .seek-bar {
+            margin: 0 1.5rem;
+        }
+
+        .control-bar-buttons-container {
+            position: relative;
+            padding: 0 0.5rem;
+            overflow: visible;
+
+            .control-bar-buttons-menu-button {
+                display: flex;
+            }
+
+            .control-bar-buttons-menu-container {
+                position: absolute;
+                right: 0.15rem;
+                bottom: 4.5rem;
+                flex-direction: column;
+                padding: 0.5rem;
+                background-color: @color-background-dark1;
+                box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
+                    0 1.1rem 0.85rem @color-background-dark5-20;
+
+                &:not(:global(.open)) {
+                    display: none;
+                }
+            }
+        }
     }
 }

src/routes/Search/styles.less

@@ -218,4 +218,30 @@
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .search-container {
+        .search-content {
+            .search-row {
+                margin: 2rem 1rem;
+            }
+
+            .search-row-poster, .search-row-square {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+4) {
+                        display: none;
+                    }
+                }
+            }
+
+            .search-hints-container {
+                padding: 4rem 2rem;
+
+                .search-hint-container {
+                    padding: 0 1.5rem;
+                }
+            }
+        }
+    }
 }

src/routes/Settings/styles.less

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/Checkbox/styles.less') {
     checkbox-icon: icon;
@@ -357,4 +358,32 @@
             color: @color-surface-dark2;
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    .settings-container {
+        .settings-content {
+            flex-direction: column-reverse;
+
+            .side-menu-container {
+                width: 100%;
+                padding: 0 1rem;
+
+                .side-menu-button {
+                    display: none;
+                }
+
+                .version-info-label {
+                    width: 100%;
+                    text-align: end;
+                }
+            }
+        }
+    }
+
+    .configure-server-url-modal-container {
+        .configure-server-url-modal-content {
+            width: auto;
+        }
+    }
 }