diff --git a/packages/plasma-temple/src/components/Grid/Grid.tsx b/packages/plasma-temple/src/components/Grid/Grid.tsx index 4c896bcec..4444afce7 100644 --- a/packages/plasma-temple/src/components/Grid/Grid.tsx +++ b/packages/plasma-temple/src/components/Grid/Grid.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import styled from 'styled-components'; -import { detectDevice } from '@sberdevices/plasma-ui'; +import styled, { css } from 'styled-components'; +import { mediaQuery } from '@sberdevices/plasma-ui'; import { FullScreenBackground } from '../FullScreenBackground/FullScreenBackground'; @@ -9,35 +9,40 @@ interface BackgroundProps { src: string; } -export interface GridProps { +interface GridColumns { /** Количество колонок при разрешении XL */ columnXL?: number; /** Количество колонок при разрешении M */ columnM?: number; /** Количество колонок при разрешении S */ columnS?: number; +} +export interface GridProps extends GridColumns { /** Фоновое изображение */ background?: BackgroundProps; className?: string; } -const StyledContainer = styled.div<{ columns: number }>` +const StyledContainer = styled.div>` display: grid; grid-gap: 1rem; - grid-template-columns: repeat(${({ columns }) => columns}, 1fr); grid-auto-rows: 1fr; -`; + grid-template-columns: repeat(2, 1fr); -const getColumnCount = ({ columnXL, columnM, columnS }: { columnXL: number; columnM: number; columnS: number }) => { - switch (detectDevice()) { - case 'sberBox': - return columnXL; - case 'sberPortal': - return columnM; - default: - return columnS; - } -}; + ${({ columnXL, columnM, columnS }) => { + return [ + mediaQuery('XL')(css` + grid-template-columns: repeat(${columnXL}, 1fr); + `), + mediaQuery('M')(css` + grid-template-columns: repeat(${columnM}, 1fr); + `), + mediaQuery('S')(css` + grid-template-columns: repeat(${columnS}, 1fr); + `), + ]; + }}; +`; /** Компонент для отображения однотипного контента (обычно карточки) в виде сетки с заданным количеством колонок */ export function Grid({ @@ -49,7 +54,7 @@ export function Grid({ background, }: React.PropsWithChildren) { return ( - + {background && } {children} diff --git a/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx b/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx index 256e325b8..f639e631d 100644 --- a/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx +++ b/packages/plasma-temple/src/components/VideoPlayer/VideoPlayer.tsx @@ -30,6 +30,7 @@ export interface VideoPlayerProps extends React.VideoHTMLAttributes) => React.ReactElement; src: string; + insets?: Insets; } const opacityMixin = css<{ hidden: boolean }>` @@ -117,9 +118,11 @@ export const VideoPlayer = React.memo( videoFit = 'contain', posterClassName = '', className, + insets, ...restProps }: VideoPlayerProps) => { - const insets = useInsets(); + // TODO: удалить не работает без PlasmaApp, использовать проп insets + const plasmaAppInsets = useInsets(); const playerRef = React.useRef(null); const { actions, state } = useMediaPlayer(playerRef, { start: startTime, @@ -193,11 +196,11 @@ export const VideoPlayer = React.memo( actions: customControlsActions, })} {isControlVisible(ControlType.HEADER, visibleControlList) && ( -