@servosinformatica/resources/src/components/SplashScreen/SplashScreen.jsx

Resources to Servos Informatica's apps

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const SplashScreen = ({ videoSrc, onEnd, background }) => {
    const isMobile = useMediaQuery({ maxWidth: 480 });
    const isTablet = useMediaQuery({ minWidth: 481, maxWidth: 768 });

    const percentage = isMobile ? '80%' : isTablet ? '70%' : '50%';

    const styleOverlay = {
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        backgroundColor: background,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: '9999',
        overflow: 'hidden'
    };

    const styleVideo = {
        maxWidth: percentage,
        maxHeight: percentage
    };

    return (
        <div style={styleOverlay}>
            <video style={styleVideo}
                autoPlay
                muted
                playsInline
                onEnded={onEnd}
            >
                <source src={videoSrc} type="video/mp4" />
                Your browser does not support videos.
            </video>
        </div>
    );
};

export default SplashScreen;