Merge branch 'development' into fix/maskable-icons-build-override

src/App/styles.less

@@ -17,6 +17,8 @@
 @calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))";
 @html-width: ~"calc(max(100svw, 100dvw))";
 @html-height: ~"calc(max(100svh, 100dvh))";
+@html-standalone-width: ~"calc(max(100%, 100lvw))";
+@html-standalone-height: ~"calc(max(100%, 100lvh))";
 @safe-area-inset-top: env(safe-area-inset-top, 0rem);
 @safe-area-inset-right: env(safe-area-inset-right, 0rem);
 @safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem);
@@ -119,6 +121,12 @@ html {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
 
+
+    @media (display-mode: standalone) {
+        width: @html-standalone-width;
+        height: @html-standalone-height;
+    }
+
     body {
         width: 100%;
         height: 100%;

src/common/animations.less

@@ -6,13 +6,29 @@
     }
 
     animation-timing-function: ease-in-out;
-    animation-duration: 100ms;
+    animation-duration: 350ms;
+
+    @media (prefers-reduced-motion) {
+        :local {
+            animation-name: fade-in-no-motion;
+        }
+    }
 }
 
 @keyframes fade-in {
     0% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    40% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    70% {
         opacity: 0.6;
-        transform: translateY(0.2vh);
+        transform: translateY(2px);
     }
 
     100% {
@@ -51,4 +67,22 @@
 
 .slide-left-exit {
     transform: translateX(100%);
+}
+
+@keyframes fade-in-no-motion {
+    0% {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    70% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }

src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -7,7 +7,8 @@ const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
-const { Button, TextInput } = require('stremio/components');
+const Button = require('stremio/components/Button').default;
+const TextInput = require('stremio/components/TextInput').default;
 const useTorrent = require('stremio/common/useTorrent');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const useSearchHistory = require('./useSearchHistory');

src/routes/Calendar/Calendar.less

@@ -14,7 +14,7 @@
         gap: 0.5rem;
         width: 100%;
         height: 100%;
-        padding: 0 0 2rem 2rem;
+        padding: 0 0 calc(1.5rem + var(--safe-area-inset-bottom)) 2rem;
 
         .main {
             flex: auto;
@@ -37,7 +37,7 @@
 @media only screen and (max-width: @small) and (orientation: landscape) {
     .calendar {
         .content {
-            padding: 0 0 0 1rem;
+            padding: 0 0 calc(1.5rem + var(--safe-area-inset-bottom)) 1rem;
         }
     }
 }

src/routes/Calendar/Calendar.tsx

@@ -11,6 +11,7 @@ import Placeholder from './Placeholder';
 import useCalendar from './useCalendar';
 import useCalendarDate from './useCalendarDate';
 import styles from './Calendar.less';
+import classNames from 'classnames';
 
 type Props = {
     urlParams: UrlParams,
@@ -34,7 +35,7 @@ const Calendar = ({ urlParams }: Props) => {
         <MainNavBars className={styles['calendar']} route={'calendar'}>
             {
                 profile.auth !== null ?
-                    <div className={styles['content']}>
+                    <div className={classNames(styles['content'], 'animation-fade-in')}>
                         <div className={styles['main']}>
                             <Selector
                                 selected={calendar.selected}

src/routes/Calendar/Table/Cell/Cell.less

@@ -55,7 +55,7 @@
         display: flex;
         flex-direction: row;
         gap: 1rem;
-        padding: 0 1rem 1rem 1rem;
+        padding: 0 0.5rem 0.5rem 0.5rem;
 
         .item {
             flex: none;
@@ -134,7 +134,7 @@
     }
 }
 
-@media only screen and (orientation: portrait) {
+@media only screen and (max-height: @minimum) and (orientation: portrait) {
     .cell {
         .heading {
             justify-content: center;
@@ -150,23 +150,11 @@
     }
 }
 
-@media only screen and (max-width: @small) and (orientation: landscape) {
+@media only screen and (max-height: @xxsmall) and (orientation: landscape) {
     .cell {
         flex-direction: row;
         align-items: center;
 
-        .items {
-           display: none;
-        }
-
-        .more {
-            display: flex;
-        }
-    }
-}
-
-@media only screen and (max-height: @xxsmall) and (orientation: landscape) {
-    .cell {
         .items {
             display: none;
         }
@@ -176,3 +164,26 @@
         }
     }
 }
+
+@media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
+    .cell {
+        gap: 0;
+
+        .heading {
+            height: 2rem;
+
+            .day {
+                font-size: 0.875rem;
+            }
+        }
+
+        .items {
+            padding: 0.25rem;
+
+            .item {
+                pointer-events: none;
+                border-radius: calc(var(--border-radius) / 2);
+            }
+        }
+    }
+}

src/routes/Calendar/Table/Cell/Cell.tsx

@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, MouseEvent } from 'react';
 import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
 import { Button, HorizontalScroll, Image } from 'stremio/components';
@@ -24,6 +24,10 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
         onClick && onClick(date);
     };
 
+    const onPosterClick = useCallback((event: MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+    }, []);
+
     return (
         <Button
             className={classNames(styles['cell'], { [styles['active']]: active, [styles['today']]: today })}
@@ -37,7 +41,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
             <HorizontalScroll className={styles['items']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
-                        <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams} tabIndex={-1}>
+                        <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams} tabIndex={-1} onClick={onPosterClick}>
                             <Icon className={styles['icon']} name={'play'} />
                             <Image
                                 className={styles['poster']}