React and Typescript code issues (page refresh + phone compatibility)

Pierre — Mon, 29 Jul 2024 21:52:45 +0000

Good evening,

I am coding my first website in React and Typescript. My site aims to host and display videos (like YouTube for example).

I have 2 problems that I can't solve:

Some of my pages are homepages and others are page display templates. I use router and useLocation() for communication between the two. The problem is that when a user refreshes the page on my page template, useLocation(); is empty and the user then lands on the 404 error: not found page. I would like at least the refresh to redirect to the associated homepage. Here is the code of my Template page:

import React, { useState, useEffect } from 'react';
import './Grille_video_style.css';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';

//Adaptable web/phone style
const ContainerStyle = styled.div`
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  justify-content: center;
  background-color: black;

  //Adaptation for phone
  @media (max-width: 85em) {
    width: 70%;
  }
`;


const Grille_video: React.FC = () => {
  const location = useLocation();
  const { paths } = location.state as { paths: string[] };
  const [videos, setVideos] = useState(paths);
  const [isMobile, setIsMobile] = useState<boolean>(window.matchMedia('(max-width: 85em)').matches);
  const navigate = useNavigate();

  // Back button press function
  const handleBackClick = () => {
    document.body.style.overflow = 'auto';
    document.exitFullscreen().catch(err => console.log(err));
    navigate('/Grille');
  };

  // Detection of whether or not the website is used by phone
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.matchMedia('(max-width: 85em)').matches);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // Disable scrolling
  document.body.style.overflow = 'hidden';

  return (
    <ContainerStyle>
      <button onClick={handleBackClick} style={styles.backButton}>
        Retour
      </button>
      {videos.map((src, index) => (
        <video
          key={index}
          style={styles.videoMain}
          controls={isMobile ? selectedVideoIndex === index : true}
          autoPlay
          loop
          muted
          className="custom-video"
          preload="auto"
        >
          <source src={src} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      ))}
    </ContainerStyle>
  );
};

const styles: { [key: string]: React.CSSProperties | any } = {
  backButton: {
    position: 'absolute',
    top: '10px',
    left: '10px',
    padding: '10px 20px',
    backgroundColor: '#EA6666',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
    zIndex: 1100,
  },
  videoMain: {
    position: 'absolute',
    width: '100vw', 
    height: 'calc(100vh - 50px)',
    objectFit: 'cover',
    opacity: 1,
    zIndex: 1000,
  },
};

export default Grille_video;

More complex problem, my website works correctly on Samsung but not on IPhone (same browser), some of my features and displays are blocked… How can I make my website compatible with all types of devices? Are there any resources on the internet that help to know what to integrate to be compatible with X phone model?

Thanks in advance for your help!

DEV Community: Pierre

React and Typescript code issues (page refresh + phone compatibility)