feat: calendar

src/App/routerViewsConfig.js

@@ -23,6 +23,10 @@ const routerViewsConfig = [
             ...routesRegexp.library,
             component: routes.Library
         },
+        {
+            ...routesRegexp.calendar,
+            component: routes.Calendar
+        },
         {
             ...routesRegexp.continuewatching,
             component: routes.Library

src/common/Chips/Chip/Chip.less

@@ -20,14 +20,16 @@
     background-color: transparent;
     user-select: none;
     overflow: hidden;
+    opacity: 0.6;
 
     &:hover {
         background-color: var(--overlay-color);
         transition: background-color 0.1s ease-out;
+        opacity: 1;
     }
 
     &.active {
-        font-weight: 700;
+        opacity: 1;
         background-color: var(--quaternary-accent-color);
         transition: background-color 0.1s ease-in;
     }

src/common/Chips/Chips.less

@@ -1,25 +1,10 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-@mask-width: 10%;
-
 .chips {
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 1rem;
-    overflow-x: auto;
-
-    &.left {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
-    }
-
-    &.right {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width);
-    }
-
-    &.center {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
-    }
 }

src/common/Chips/Chips.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { memo, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
+import React, { memo } from 'react';
+import HorizontalScroll from '../HorizontalScroll';
 import Chip from './Chip';
 import styles from './Chips.less';
 
@@ -16,28 +16,9 @@ type Props = {
     onSelect: (value: string) => {},
 };
 
-const SCROLL_THRESHOLD = 1;
-
 const Chips = memo(({ options, selected, onSelect }: Props) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const [scrollPosition, setScrollPosition] = useState('left');
-
-    useEffect(() => {
-        const onScroll = ({ target }: Event) => {
-            const { scrollLeft, scrollWidth, offsetWidth} = target as HTMLDivElement;
-            const position =
-                (scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
-                    (scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
-                        'center';
-            setScrollPosition(position);
-        };
-
-        ref.current?.addEventListener('scroll', onScroll);
-        return () => ref.current?.removeEventListener('scroll', onScroll);
-    }, []);
-
     return (
-        <div ref={ref} className={classNames(styles['chips'], [styles[scrollPosition]])}>
+        <HorizontalScroll className={styles['chips']}>
             {
                 options.map(({ label, value }) => (
                     <Chip
@@ -49,7 +30,7 @@ const Chips = memo(({ options, selected, onSelect }: Props) => {
                     />
                 ))
             }
-        </div>
+        </HorizontalScroll>
     );
 });
 

src/common/HorizontalScroll/HorizontalScroll.less

@@ -0,0 +1,20 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@mask-width: 10%;
+
+.horizontal-scroll {
+    position: relative;
+    overflow-x: auto;
+
+    &.left {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
+    }
+
+    &.right {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width);
+    }
+
+    &.center {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
+    }
+}

src/common/HorizontalScroll/HorizontalScroll.tsx

@@ -0,0 +1,40 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './HorizontalScroll.less';
+
+const SCROLL_THRESHOLD = 1;
+
+type Props = {
+    className: string,
+    children: React.ReactNode,
+};
+
+const HorizontalScroll = ({ className, children }: Props) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [scrollPosition, setScrollPosition] = useState('left');
+
+    useEffect(() => {
+        const onScroll = ({ target }: Event) => {
+            const { scrollLeft, scrollWidth, offsetWidth } = target as HTMLDivElement;
+
+            setScrollPosition(() => (
+                (scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
+                    (scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
+                        'center'
+            ));
+        };
+
+        ref.current?.addEventListener('scroll', onScroll);
+        return () => ref.current?.removeEventListener('scroll', onScroll);
+    }, []);
+
+    return (
+        <div ref={ref} className={classNames(styles['horizontal-scroll'], className, [styles[scrollPosition]])}>
+            {children}
+        </div>
+    );
+};
+
+export default HorizontalScroll;

src/common/HorizontalScroll/index.ts

@@ -0,0 +1,4 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import HorizontalScroll from './HorizontalScroll';
+export default HorizontalScroll;

src/common/MainNavBars/MainNavBars.js

@@ -10,6 +10,7 @@ const TABS = [
     { id: 'board', label: 'Board', icon: 'home', href: '#/' },
     { id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
     { id: 'library', label: 'Library', icon: 'library', href: '#/library' },
+    { id: 'calendar', label: 'Calendar', icon: 'calendar', href: '#/calendar' },
     { id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
     { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
 ];

src/common/NavBar/VerticalNavBar/styles.less

@@ -9,6 +9,7 @@
     align-items: center;
     gap: 1rem;
     width: var(--vertical-nav-bar-size);
+    padding: 1rem 0;
     background-color: transparent;
     overflow-y: auto;
     scrollbar-width: none;
@@ -20,14 +21,6 @@
     .nav-tab-button {
         width: calc(var(--vertical-nav-bar-size) - 1.5rem);
         height: calc(var(--vertical-nav-bar-size) - 1.5rem);
-
-        &:first-child {
-            margin-top: 1rem;
-        }
-
-        &:last-child {
-            margin-bottom: 1rem;
-        }
     }
 }
 
@@ -45,12 +38,18 @@
         .nav-tab-button {
             flex: none;
 
-            &:first-child {
-                margin-top: 0;
+            &:last-child {
+                display: none;
             }
-
+        }
+    }
+}
+
+@media only screen and (max-height: @minimum) {
+    .vertical-nav-bar-container {
+        .nav-tab-button {
             &:last-child {
-                margin-bottom: 0;
+                display: none;
             }
         }
     }

src/common/PaginationInput/styles.less

@@ -17,6 +17,12 @@
         .icon {
             display: block;
             color: var(--primary-foreground-color);
+            opacity: 0.7;
+            transition: opacity 0.2s ease-in-out;
+
+            &:hover {
+                opacity: 1;
+            }
         }
     }
 

src/common/index.js

@@ -16,6 +16,7 @@ const MetaRow = require('./MetaRow');
 const ModalDialog = require('./ModalDialog');
 const Multiselect = require('./Multiselect');
 const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
+const { default: HorizontalScroll } = require('./HorizontalScroll');
 const PaginationInput = require('./PaginationInput');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
@@ -64,6 +65,7 @@ module.exports = {
     ModalDialog,
     Multiselect,
     HorizontalNavBar,
+    HorizontalScroll,
     VerticalNavBar,
     PaginationInput,
     PlayIconCircleCentered,

src/common/routesRegexp.js

@@ -17,6 +17,10 @@ const routesRegexp = {
         regexp: /^\/library(?:\/([^/]*))?$/,
         urlParamsNames: ['type']
     },
+    calendar: {
+        regexp: /^\/calendar(?:\/([^/]*)\/([^/]*))?$/,
+        urlParamsNames: ['year', 'month']
+    },
     continuewatching: {
         regexp: /^\/continuewatching(?:\/([^/]*))?$/,
         urlParamsNames: ['type']

src/modules.d.ts

@@ -1,3 +1,4 @@
 declare module '*.less';
+declare module 'stremio/services';
 declare module 'stremio/common';
 declare module 'stremio/common/*';

src/routes/Calendar/Calendar.less

@@ -0,0 +1,78 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/PaginationInput/styles.less') {
+    pagination-prev-button-container: prev-button-container;
+    pagination-next-button-container: next-button-container;
+    pagination-button-icon: icon;
+    pagination-label: label;
+}
+
+.calendar {
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+
+    .content {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        width: 100%;
+        height: 100%;
+        padding: 0 0 2rem 2rem;
+
+        .main {
+            flex: auto;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            .inputs {
+                flex: none;
+                align-self: stretch;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                .pagination-input {
+                    flex: none;
+                    height: 3rem;
+
+                    .pagination-prev-button-container, .pagination-next-button-container {
+                        width: 3rem;
+                        height: 3rem;
+
+                        .pagination-button-icon {
+                            width: 1rem;
+                            height: 1rem;
+                        }
+                    }
+
+                    .pagination-label {
+                        width: 9rem;
+                        max-width: initial;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .calendar {
+        .content {
+            padding: 0;
+        }
+    }
+}
+
+@media only screen and (max-width: @small) and (orientation: landscape) {
+    .calendar {
+        .content {
+            padding: 0 0 0 1rem;
+        }
+    }
+}