Web:Common:Components:MediaViewer:Sub-Components:Added PlayerMessageError component
This commit is contained in:
parent
bda53a5279
commit
8c08108b7a
@ -0,0 +1,8 @@
|
||||
import { ContextMenuModel } from "./../../types/index";
|
||||
interface PlayerMessageErrorProps {
|
||||
errorTitle: string;
|
||||
model: ContextMenuModel[];
|
||||
onMaskClick: VoidFunction;
|
||||
}
|
||||
|
||||
export default PlayerMessageErrorProps;
|
@ -0,0 +1,65 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const StyledMediaError = styled.div`
|
||||
position: fixed;
|
||||
z-index: 1006;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 267px;
|
||||
height: 56px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
`;
|
||||
|
||||
export const StyledErrorToolbar = styled.div`
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
z-index: 1006;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding: 10px 24px;
|
||||
border-radius: 18px;
|
||||
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
rect: {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import PlayerMessageErrorProps from "./PlayerMessageError.props";
|
||||
import {
|
||||
StyledErrorToolbar,
|
||||
StyledMediaError,
|
||||
} from "./PlayerMessageError.styled";
|
||||
import { isSeparator } from "../../helpers";
|
||||
|
||||
function PlayerMessageError({
|
||||
errorTitle,
|
||||
model,
|
||||
onMaskClick,
|
||||
}: PlayerMessageErrorProps) {
|
||||
const items = !isMobile
|
||||
? model.filter((el) => el.key !== "rename")
|
||||
: model.filter((el) => el.key === "delete" || el.key === "download");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StyledMediaError>
|
||||
{/*@ts-ignore*/}
|
||||
<Text
|
||||
fontSize="15px"
|
||||
color={"#fff"}
|
||||
textAlign="center"
|
||||
className="title"
|
||||
>
|
||||
{errorTitle}
|
||||
</Text>
|
||||
</StyledMediaError>
|
||||
<StyledErrorToolbar>
|
||||
{items.map((item) => {
|
||||
if (item.disabled || isSeparator(item)) return;
|
||||
|
||||
const onClick = () => {
|
||||
onMaskClick();
|
||||
item.onClick();
|
||||
};
|
||||
return (
|
||||
<div className="toolbar-item" key={item.key} onClick={onClick}>
|
||||
<ReactSVG src={item.icon} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StyledErrorToolbar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayerMessageError;
|
Loading…
Reference in New Issue
Block a user