From ff4a3cef1b519611c480ca5d04fe0d6626f342f0 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 6 Jan 2025 20:30:53 +0200
Subject: [PATCH 01/10] refactor(Cell): Make posters visible on more ss

---
 src/routes/Calendar/Table/Cell/Cell.less | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index a5c79e178..154015798 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -134,7 +134,7 @@
     }
 }
 
-@media only screen and (orientation: portrait) {
+@media only screen and (max-height: @xxsmall) 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;
         }

From 0148024d835ac26820a8b3509fb94d044994b5f0 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 6 Jan 2025 20:49:16 +0200
Subject: [PATCH 02/10] fix(Cell): stopPropagation when clicking on poster

---
 src/routes/Calendar/Table/Cell/Cell.less | 10 ++++++++++
 src/routes/Calendar/Table/Cell/Cell.tsx  |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 154015798..ea2e42391 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -164,3 +164,13 @@
         }
     }
 }
+
+@media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
+    .cell {
+        .items {
+            .item {
+                pointer-events: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
index 715ee46f7..2db1b0992 100644
--- a/src/routes/Calendar/Table/Cell/Cell.tsx
+++ b/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']}

From 85407cfd3e8c3b586b5bcda01ddebb70d508b015 Mon Sep 17 00:00:00 2001
From: IEduStu <125146135+IEduStu@users.noreply.github.com>
Date: Sat, 20 Apr 2024 01:40:22 +0000
Subject: [PATCH 03/10] fix: make screen switching animation feel smoother

---
 src/common/animations.less            | 38 +++++++++++++++++++++++++--
 src/routes/MetaDetails/MetaDetails.js |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/common/animations.less b/src/common/animations.less
index 6ca879343..c7a30d2fb 100644
--- a/src/common/animations.less
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 24c904cfd..ded61d5dc 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -143,7 +143,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                     :
                                     <React.Fragment>
                                         <MetaPreview
-                                            className={classnames(styles['meta-preview'], 'animation-fade-in')}
+                                            className={classnames(styles['meta-preview'])}
                                             name={metaDetails.metaItem.content.content.name}
                                             logo={metaDetails.metaItem.content.content.logo}
                                             runtime={metaDetails.metaItem.content.content.runtime}

From 575e31e902cda20cdc7037129be19207a8b0bff4 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 6 Jan 2025 21:52:58 +0200
Subject: [PATCH 04/10] revert(MetaDetails): removal of animation

---
 src/routes/MetaDetails/MetaDetails.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index ded61d5dc..24c904cfd 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -143,7 +143,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                     :
                                     <React.Fragment>
                                         <MetaPreview
-                                            className={classnames(styles['meta-preview'])}
+                                            className={classnames(styles['meta-preview'], 'animation-fade-in')}
                                             name={metaDetails.metaItem.content.content.name}
                                             logo={metaDetails.metaItem.content.content.logo}
                                             runtime={metaDetails.metaItem.content.content.runtime}

From 383795e5382d09f62a59817522e4d830fd39bd12 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 7 Jan 2025 17:02:44 +0200
Subject: [PATCH 05/10] refactor(Cell): make the padding smaller on mobile

---
 src/routes/Calendar/Table/Cell/Cell.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index ea2e42391..9e6be5b62 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -168,6 +168,8 @@
 @media only screen and (max-height: @xsmall) and (max-width: @xsmall) {
     .cell {
         .items {
+            padding: 0.25rem;
+
             .item {
                 pointer-events: none;
             }

From 2f9bf38fd67ff59ccd0751ced0a8bfd37923be65 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 7 Jan 2025 17:26:45 +0200
Subject: [PATCH 06/10] refactor(Calenadar): add safe inset areas

---
 src/routes/Calendar/Calendar.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Calendar/Calendar.less b/src/routes/Calendar/Calendar.less
index 7f7925bf5..b606fa2aa 100644
--- a/src/routes/Calendar/Calendar.less
+++ b/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;
         }
     }
 }

From 0bdf28724fb4e7cf9cdda21c71ce43560b412742 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 7 Jan 2025 17:35:52 +0200
Subject: [PATCH 07/10] refactor(Cell): make posters bigger on mobile

---
 src/routes/Calendar/Table/Cell/Cell.less | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 9e6be5b62..9e6228490 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/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 (max-height: @xxsmall) and (orientation: portrait) {
+@media only screen and (max-height: @minimum) and (orientation: portrait) {
     .cell {
         .heading {
             justify-content: center;
@@ -167,11 +167,22 @@
 
 @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);
             }
         }
     }

From 71b5d35af8ec6290825aecf2631e30a3959cce35 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Fri, 10 Jan 2025 20:41:39 +0200
Subject: [PATCH 08/10] fix(SearchBar): components imports

---
 src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js b/src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
index b87c555e5..0bc95cd73 100644
--- a/src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
+++ b/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');

From 809d98427765c4fe178d76e153b143e1520a4044 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 13 Jan 2025 22:17:40 +0200
Subject: [PATCH 09/10] fix(App): PWA resizing issues

when resizing the PWA on iPad there were visible pixel wide lines on the edges
---
 src/App/styles.less | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/App/styles.less b/src/App/styles.less
index 1a1f50dcc..11b52de8b 100644
--- a/src/App/styles.less
+++ b/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%;

From 7f068a2fcc2b57d086680882c768a8021684a7bb Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 15 Jan 2025 11:16:26 +0200
Subject: [PATCH 10/10] fix(Calendar): add missing route animation

---
 src/routes/Calendar/Calendar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/Calendar/Calendar.tsx b/src/routes/Calendar/Calendar.tsx
index 6d9fbe90e..93f1bbe77 100644
--- a/src/routes/Calendar/Calendar.tsx
+++ b/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}