@material-ui/core/colors#blueGrey TypeScript Examples

The following examples show how to use @material-ui/core/colors#blueGrey. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: one-dark.ts    From vscode-crossnote with GNU Affero General Public License v3.0 6 votes vote down vote up 
OneDarkTheme: CrossnoteTheme = new CrossnoteTheme({
  name: "one-dark",
  muiThemeOptions: {
    palette: {
      common: { black: "#000", white: "#fff" },
      background: {
        paper: lighten("#282c34", 0.05),
        default: "#282c34",
      },
      primary: cyan,
      secondary: blueGrey,
      error: {
        light: "#e57373",
        main: "#f44336",
        dark: "#d32f2f",
        contrastText: "rgba(197, 197, 197, 1)",
      },
      divider: "#222",
      text: {
        primary: "#ccc",
        secondary: "rgba(180, 180, 180, 1)",
        disabled: "rgba(121, 7, 7, 0.38)",
        hint: "rgba(0, 0, 0, 0.38)",
      },
      action: {
        active: "rgba(180, 180, 180, 1)",
        disabled: "#353535",
      },
    },
  },
})
Example #2
Source File: styles.ts    From DamnVulnerableCryptoApp with MIT License 6 votes vote down vote up 
useStyles = makeStyles({
  buttonContainer: {
    'padding-top': '20px',
    'padding-bottom': '50px',
    'text-align': 'right'
  },
  lockIcon: {
    'font-size': '100px',
    color: blueGrey[500]
  }
})
Example #3
Source File: CustomSelect.tsx    From flect-chime-sdk-demo with Apache License 2.0 6 votes vote down vote up 
useCustomSelectStyles = makeStyles<Theme, UseCustomSelectStylesProps>(() => ({
    input: {
        color: "black",
        height: ({ height }) => height,
        fontSize: ({ fontsize }) => fontsize,
        border: "none",
        borderBottom: "inset 1px " + blueGrey[500],
        "&:hover,&:active": {
            // color: "red",
            borderBottom: "inset 1px " + blueGrey[500],
        },
    },
    inputLabel: {
        color: blueGrey[400],
        height: ({ height }) => height,
        fontSize: ({ labelFontsize }) => labelFontsize,
        "&:hover,&:active": {
            color: blueGrey[400],
            height: ({ height }) => height,
            fontSize: ({ labelFontsize }) => labelFontsize,
        },
    },
    inputLabelFocused: {
        color: blueGrey[400],
        height: ({ height }) => height,
        fontSize: ({ labelFontsize }) => labelFontsize,
    },
}))
Example #4
Source File: CustomTextField.tsx    From flect-chime-sdk-demo with Apache License 2.0 6 votes vote down vote up 
useCustomTextFieldStyles = makeStyles<Theme, UseCustomTextFieldStylesProps>(() => ({
    input: {
        color: "black",
        height: ({ height }) => height,
        fontSize: ({ fontsize }) => fontsize,
        border: "none",
        borderBottom: "inset 1px " + blueGrey[500],
        "&:hover,&:active": {
            // color: "red",
            borderBottom: "inset 1px " + blueGrey[500],
        },
    },

    inputFocused: {
        color: "black",
        height: ({ height }) => height,
        fontSize: ({ fontsize }) => fontsize,
        border: "none",
        borderBottom: "inset 1px " + blueGrey[500],
    },
    inputLabel: {
        color: blueGrey[400],
        height: ({ height }) => height,
        fontSize: ({ fontsize }) => fontsize,
        "&:hover,&:active": {
            color: blueGrey[400],
            height: ({ height }) => height,
            fontSize: ({ fontsize }) => fontsize,
        },
    },
    inputLabelFocused: {
        color: blueGrey[400],
        height: ({ height }) => height,
        fontSize: ({ fontsize }) => fontsize,
    },
}))
Example #5
Source File: useVideoComposeCanvas.tsx    From flect-chime-sdk-demo with Apache License 2.0 4 votes vote down vote up 
useVideoComposeCanvas = (props: RecorderCanvasProps) => {
    const recorederCanvasId = useMemo(() => {
        return v4();
    }, []);
    const [enable, setEnable] = useState(props.autoplay);
    const toggleEnable = () => {
        setEnable(!enable);
    };
    const [updateCount, setUpdateCount] = useState(0);

    const getTargetTiles = () => {
        if (props.mode === "ALL") {
            // All
            return Object.values(props.chimeClient.getTilesWithFilter(false, false, false));
        } else if (props.mode === "ACTIVE") {
            // Contents
            const contentsTiles = props.chimeClient!.getContentTiles();
            if (contentsTiles.length > 0) {
                return contentsTiles;
            }

            // ActiveSpeaker
            const activeSpekerTile = props.chimeClient!.getActiveSpeakerTile();
            // console.log("[useVideoComposeCanvas] active speaker", activeSpekerTile)
            // console.log("[useVideoComposeCanvas] attendees", props.chimeClient!.attendees)
            if (activeSpekerTile) {
                return [activeSpekerTile];
            }
        } else if (props.mode === "EXCLUDE_ME") {
            return props.chimeClient.getContentTilesExcludeMe();
        }
        return [];
    };

    const targetTiles = getTargetTiles();
    // rendering flag
    const targetIds = targetTiles.reduce<string>((ids, cur) => {
        return `${ids}_${cur.boundAttendeeId}`;
    }, "");

    const videoElements = useMemo(() => {
        const elems = targetTiles.map((v, index) => {
            return <video id={`recorder-canvas-video-${recorederCanvasId}-${index}`} style={{ width: "6px", height: "4px" }}></video>;
        });
        return elems;
    }, [targetIds]); // eslint-disable-line

    const view = useMemo(() => {
        return (
            <div style={{ width: `${props.displayWidth}px`, height: `${props.displayHeight}px` }}>
                <canvas id={`recorder-canvas-canvas-${recorederCanvasId}`} width={props.canvasWidth} height={props.canvasHeight} style={{ objectFit: "contain", position: "absolute", height: props.displayHeight - 2, width: props.displayWidth }} />
            </div>
        );
    }, [props.displayWidth, props.displayHeight, props.canvasWidth, props.canvasHeight]); // eslint-disable-line

    // Bind
    useEffect(() => {
        const elems = targetTiles.forEach((v, index) => {
            const videoId = `recorder-canvas-video-${recorederCanvasId}-${index}`;
            const videoElem = document.getElementById(videoId) as HTMLVideoElement;
            if (videoElem) {
                props.chimeClient.meetingSession?.audioVideo.bindVideoElement(v.tileId!, videoElem);
            }
        });
        return elems;
    }, [targetIds]); // eslint-disable-line

    const renderRef = useRef(0);

    const render = (canvasElem: HTMLCanvasElement, cols: number, rows: number, maxWidth: number, maxHeight: number) => {
        const ctx = canvasElem.getContext("2d")!;
        ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
        const promises = targetTiles.map((v, index) => {
            const p = new Promise<void>((resolve, reject) => {
                const videoId = `recorder-canvas-video-${recorederCanvasId}-${index}`;
                const videoElem = document.getElementById(videoId) as HTMLVideoElement;
                if (!videoElem) {
                    resolve();
                    return;
                }

                let rate;
                if (videoElem.videoWidth / maxWidth > videoElem.videoHeight / maxHeight) {
                    rate = maxWidth / videoElem.videoWidth;
                } else {
                    rate = maxHeight / videoElem.videoHeight;
                }

                const w = videoElem.videoWidth * rate;
                const h = videoElem.videoHeight * rate;
                const offset_x_per_area = (maxWidth - w) / 2;
                const offset_y_per_area = (maxHeight - h) / 2;

                const global_offset_x = (index % cols) * maxWidth + offset_x_per_area;
                const global_offset_y = Math.floor(index / cols) * maxHeight + offset_y_per_area;
                const position = [Math.ceil(global_offset_x), Math.ceil(global_offset_y), Math.ceil(w), Math.ceil(h)];

                ctx.drawImage(videoElem, position[0], position[1], position[2], position[3]);

                if (props.drawTitle) {
                    const attendeeId = v.boundAttendeeId!;
                    let title = props.chimeClient.getUserNameByAttendeeIdFromList(attendeeId);

                    ctx.textAlign = "left";
                    ctx.textBaseline = "top";

                    const fontsize = Math.ceil(Math.floor(h / 10));
                    ctx.font = `${fontsize}px Arial`;
                    if (title.length > 10) {
                        title = title.substring(0, 10);
                    }
                    const textWidth = ctx.measureText(title).width;
                    ctx.fillStyle = "#ffffff99";
                    const textAreaposition = [position[0] + 5, position[1] + position[3] - fontsize - 5, textWidth, fontsize];

                    ctx.fillRect(textAreaposition[0], textAreaposition[1], textAreaposition[2], textAreaposition[3]);

                    ctx.fillStyle = blueGrey[900];
                    ctx.fillText(title, position[0] + 5, position[1] + position[3] - fontsize - 5);
                }
                resolve();
            });
            return p;
        });
        Promise.all(promises).then(() => {
            if (enable) {
                renderRef.current = requestAnimationFrame(() => {
                    render(canvasElem, cols, rows, maxWidth, maxHeight);
                });
            }
        });
    };

    // Render
    useEffect(() => {
        const targetNum = targetTiles.length;
        const cols = Math.ceil(Math.sqrt(targetNum));
        const rows = Math.ceil(targetNum / cols);
        const maxWidth = props.canvasWidth / cols;
        const maxHeight = props.canvasHeight / rows;

        const canvasElem = document.getElementById(`recorder-canvas-canvas-${recorederCanvasId}`) as HTMLCanvasElement;
        renderRef.current = requestAnimationFrame(() => {
            render(canvasElem, cols, rows, maxWidth, maxHeight);
        });
        return () => {
            console.log(`[useVideoComposeCanvas] CANCEL ${renderRef.current}`);
            cancelAnimationFrame(renderRef.current);
        };
    }, [targetIds, enable]); // eslint-disable-line

    // Notify the mediastream
    useEffect(() => {
        const canvasElem = document.getElementById(`recorder-canvas-canvas-${recorederCanvasId}`) as HTMLCanvasElement;

        // @ts-ignore
        const videoStream = canvasElem.captureStream(props.framerate) as MediaStream;
        props.notifyVideoStream(videoStream);
    }, []); // eslint-disable-line

    const videoComposeCanvas = useMemo(() => {
        return (
            <div style={{ display: "flex", flexDirection: "column" }}>
                <div>{view}</div>
                <div>{videoElements}</div>
            </div>
        );
    }, [targetIds]); // eslint-disable-line

    return {
        videoComposeCanvas,
        enable,
        toggleEnable,
        update: () => {
            console.log(`[useVideoComposeCanvas] update! ${updateCount + 1}`);
            setUpdateCount(updateCount + 1);
        },
        captureStream: () => {
            const canvasElem = document.getElementById(`recorder-canvas-canvas-${recorederCanvasId}`) as HTMLCanvasElement;
            // @ts-ignore
            const ms = canvasElem.captureStream();
            return ms;
        },
    };
}