diff --git a/package-lock.json b/package-lock.json index 15a9be2f5..2ac27cb5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "stremio", - "version": "5.0.0-beta.13", + "version": "5.0.0-beta.14", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "stremio", - "version": "5.0.0-beta.13", + "version": "5.0.0-beta.14", "license": "gpl-2.0", "dependencies": { "@babel/runtime": "7.26.0", "@sentry/browser": "8.42.0", "@stremio/stremio-colors": "5.2.0", - "@stremio/stremio-core-web": "0.48.1", + "@stremio/stremio-core-web": "0.48.2", "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", @@ -3379,9 +3379,10 @@ "license": "MIT" }, "node_modules/@stremio/stremio-core-web": { - "version": "0.48.1", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.1.tgz", - "integrity": "sha512-bdWxBuuOOC0NdG1Mg60lEhpK7Bw/Ea6D89bRcvIvM3WnJrUpGA4jbx4xWj3KQRM08PM3WWCY9/FzctlWCxFMRg==", + "version": "0.48.2", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz", + "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==", + "license": "MIT", "dependencies": { "@babel/runtime": "7.24.1" } diff --git a/package.json b/package.json index f44b53702..bec340a54 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stremio", "displayName": "Stremio", - "version": "5.0.0-beta.13", + "version": "5.0.0-beta.14", "author": "Smart Code OOD", "private": true, "license": "gpl-2.0", @@ -16,7 +16,7 @@ "@babel/runtime": "7.26.0", "@sentry/browser": "8.42.0", "@stremio/stremio-colors": "5.2.0", - "@stremio/stremio-core-web": "0.48.1", + "@stremio/stremio-core-web": "0.48.2", "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", diff --git a/src/App/styles.less b/src/App/styles.less index 6210a8bdf..edff6e66d 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -38,7 +38,7 @@ --quaternary-accent-color: rgba(18, 69, 166, 1); --overlay-color: rgba(255, 255, 255, 0.05); --modal-background-color: rgba(15, 13, 32, 1); - --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37); + --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; } @@ -112,7 +112,7 @@ html { left: auto; z-index: 1; padding: 0 calc(0.5 * var(--horizontal-nav-bar-size)); - overflow-y: auto; + overflow: visible; scrollbar-width: none; pointer-events: none; diff --git a/src/common/BottomSheet/BottomSheet.less b/src/common/BottomSheet/BottomSheet.less index e0d756477..4ac68ead6 100644 --- a/src/common/BottomSheet/BottomSheet.less +++ b/src/common/BottomSheet/BottomSheet.less @@ -87,7 +87,13 @@ } } -@media only screen and (min-width: @xsmall) { +@media only screen and (min-width: @small) and (orientation: portait) { + .bottom-sheet { + display: none; + } +} + +@media only screen and (min-width: @xsmall) and (orientation: landscape) { .bottom-sheet { display: none; } diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index 6a26b3b7f..6baf8b7aa 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -6,6 +6,7 @@ outline-width: var(--focus-outline-size); outline-color: @color-surface-light5; outline-offset: calc(-1 * var(--focus-outline-size)); + -webkit-tap-highlight-color: transparent; cursor: pointer; &:focus { diff --git a/src/common/ColorInput/styles.less b/src/common/ColorInput/styles.less index 7ed494061..56bd1f601 100644 --- a/src/common/ColorInput/styles.less +++ b/src/common/ColorInput/styles.less @@ -17,7 +17,6 @@ align-items: center; justify-content: center; padding: 0 0.5rem; - border: thin solid @color-surface-light5-20; pointer-events: none; .transparent-label { diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less index 67cfabb34..24c1d053d 100644 --- a/src/common/EventModal/styles.less +++ b/src/common/EventModal/styles.less @@ -19,26 +19,30 @@ flex-direction: column; align-items: center; overflow: visible; + position: relative; - .modal-dialog-content { + .body-container { overflow-y: visible; } - + .image { - width: 100%; - height: 100%; - margin-top: -10rem; + position: absolute; + top: -10rem; + left: 50%; + transform: translateX(-50%); + object-fit: cover; + width: 30rem; + height: 30rem; } - + .info-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; - padding: 1rem 4rem; - margin-top: -7rem; - + padding: 10rem 4rem 0; + .title-container { display: flex; flex-direction: column; @@ -50,7 +54,7 @@ text-align: center; padding: 0 6rem; } - + .label { color: var(--primary-foreground-color); font-size: 1rem; @@ -58,7 +62,7 @@ opacity: 0.5; } } - + .addon-container { display: flex; align-items: center; @@ -76,19 +80,19 @@ color: var(--primary-foreground-color); } } - + .action-button { background-color: var(--primary-foreground-color); border: 2px solid var(--primary-foreground-color); padding: 0.8rem 2rem; border-radius: 2rem; - + .button-label { color: var(--primary-accent-color); font-size: 1rem; font-weight: 700; } - + &:hover { background-color: transparent; } @@ -96,15 +100,34 @@ } } } +} - @media only screen and (max-width: @minimum) { +@media (orientation: landscape) and (max-height: @xsmall) { + .event-modal { .modal-dialog-container { .modal-dialog-content { - .image { - height: 125%; - width: 125%; + overflow-y: auto; + + .body-container { + overflow-y: auto; } + .image { + display: none; + } + + .info-container { + padding: 1rem 4rem 0; + } + } + } + } +} + +@media only screen and (max-width: @minimum) { + .event-modal { + .modal-dialog-container { + .modal-dialog-content { .info-container { .title-container { .title { @@ -120,4 +143,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/common/MainNavBars/MainNavBars.js b/src/common/MainNavBars/MainNavBars.js index 3ccf200ec..6bcde9031 100644 --- a/src/common/MainNavBars/MainNavBars.js +++ b/src/common/MainNavBars/MainNavBars.js @@ -24,7 +24,6 @@ const MainNavBars = React.memo(({ className, route, query, children }) => { query={query} backButton={false} searchBar={true} - addonsButton={true} fullscreenButton={true} navMenu={true} /> diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less index bde17932d..ce03cfa84 100644 --- a/src/common/ModalDialog/styles.less +++ b/src/common/ModalDialog/styles.less @@ -82,7 +82,7 @@ .body-container { flex: 1; align-self: stretch; - overflow-y: auto; + overflow: visible; padding: 2rem 0; &:last-child { diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index b82fd06c5..cfb0c3234 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -7,6 +7,8 @@ popup-menu-container: menu-container; } +@parent-height: 10rem; + .label-container { display: flex; flex-direction: row; @@ -48,6 +50,8 @@ .modal-container, .popup-menu-container { .menu-container { + max-height: calc(3.2rem * 7); + .option-container { display: flex; flex-direction: row; @@ -101,4 +105,12 @@ } } } +} + +@media (orientation: landscape) and (max-width: @xsmall) { + .modal-container, .popup-menu-container { + .menu-container { + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); + } + } } \ No newline at end of file diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.less b/src/common/MultiselectMenu/Dropdown/Dropdown.less index 57840ca22..3bea17d22 100644 --- a/src/common/MultiselectMenu/Dropdown/Dropdown.less +++ b/src/common/MultiselectMenu/Dropdown/Dropdown.less @@ -2,6 +2,8 @@ @import (reference) '~stremio/common/screen-sizes.less'; +@parent-height: 10rem; + .dropdown { background: var(--modal-background-color); display: none; @@ -16,7 +18,7 @@ &.open { display: block; - max-height: calc(3.2rem * 10); + max-height: calc(3.3rem * 7); overflow: auto; } @@ -33,10 +35,10 @@ } } -@media only screen and (max-width: @minimum) { +@media (orientation: landscape) and (max-width: @xsmall) { .dropdown { &.open { - max-height: calc(3.2rem * 7); + max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height); } } } \ No newline at end of file diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index 7a992fb45..0df4e833f 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -13,7 +13,7 @@ const NavMenu = require('./NavMenu'); const styles = require('./styles'); const { t } = require('i18next'); -const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, addonsButton, fullscreenButton, navMenu, ...props }) => { +const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => { const backButtonOnClick = React.useCallback(() => { window.history.back(); }, []); @@ -54,14 +54,6 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto null }
- { - addonsButton ? - - : - null - } { !isIOSPWA && fullscreenButton ? {
: remoteAddons.catalog.content.type === 'Loading' ? -
- Loading! +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))}
:
@@ -179,8 +182,10 @@ const Addons = ({ urlParams, queryParams }) => { }
: -
- No select +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))}
}
@@ -205,7 +210,7 @@ const Addons = ({ urlParams, queryParams }) => { title={t('ADD_ADDON')} buttons={addAddonModalButtons} onCloseRequest={closeAddAddonModal}> -
{ t('ADD_ADDON_DESCRIPTION') }
+
{t('ADD_ADDON_DESCRIPTION')}
{ { items.map(({ id, name, poster, deepLinks }) => ( -