Web:Common:Components:MediaViewer:Sub-Components:Added PlayerMessageError component

packages/common/components/MediaViewer/sub-components/PlayerMessageError/PlayerMessageError.props.ts

@@ -0,0 +1,8 @@
+import { ContextMenuModel } from "./../../types/index";
+interface PlayerMessageErrorProps {
+  errorTitle: string;
+  model: ContextMenuModel[];
+  onMaskClick: VoidFunction;
+}
+
+export default PlayerMessageErrorProps;

packages/common/components/MediaViewer/sub-components/PlayerMessageError/PlayerMessageError.styled.ts

@@ -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;
+    }
+  }
+`;

packages/common/components/MediaViewer/sub-components/PlayerMessageError/index.tsx

@@ -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;