feat(Calendar): add play icons on items

Stremio · Jul 4, 2024 · a561ee0 · a561ee0
1 parent e7ddbcf
commit a561ee0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less
@@ -49,10 +49,30 @@
 
             .info {
                 flex: none;
+                display: block;
+            }
+
+            .icon {
+                flex: none;
+                display: none;
+                width: 2rem;
+                height: 2rem;
+                padding: 0.5rem;
+                border-radius: 50%;
+                color: var(--primary-foreground-color);
+                background-color: var(--secondary-accent-color);
             }
 
             &:hover {
                 background-color: var(--overlay-color);
+
+                .info {
+                    display: none;
+                }
+
+                .icon {
+                    display: block;
+                }
             }
         }
     }

diff --git a/src/routes/Calendar/List/Item/Item.tsx b/src/routes/Calendar/List/Item/Item.tsx
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React, { useEffect, useMemo, useRef } from 'react';
+import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
 import { Button } from 'stremio/common';
 import useCalendarDate from '../../useCalendarDate';
@@ -58,6 +59,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
                             <div className={styles['info']}>
                                 S{season}E{episode}
                             </div>
+                            <Icon className={styles['icon']} name={'play'} />
                         </Button>
                     ))
                 }

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
@@ -48,14 +48,48 @@
 
         .item {
             flex: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             height: 100%;
             aspect-ratio: 2 / 3;
             border-radius: var(--border-radius);
 
+            .icon {
+                flex: none;
+                z-index: 1;
+                position: absolute;
+                width: 2rem;
+                height: 2rem;
+                padding: 0.5rem;
+                border-radius: 50%;
+                color: var(--primary-foreground-color);
+                background-color: var(--secondary-accent-color);
+                opacity: 0;
+            }
+
             .poster {
+                flex: auto;
+                z-index: 0;
+                position: relative;
                 height: 100%;
                 width: 100%;
                 object-fit: cover;
+                opacity: 1;
+            }
+
+            .icon, .poster {
+                transition: opacity 0.1s ease-out;
+            }
+
+            &:hover {
+                .icon {
+                    opacity: 1;
+                }
+
+                .poster {
+                    opacity: 0.5;
+                }
             }
         }
     }

diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React, { useMemo } from 'react';
+import Icon from '@stremio/stremio-icons/react';
 import classNames from 'classnames';
 import { Button, Image, HorizontalScroll } from 'stremio/common';
 import styles from './Cell.less';
@@ -41,6 +42,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
                         <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
+                            <Icon className={styles['icon']} name={'play'} />
                             <Image
                                 className={styles['poster']}
                                 src={poster}