panjareh/src/App.js

Panjareh using aparat and phoenix-video-player to play videos on desktops and tvs.

import React, { Suspense, useEffect, useState } from "react";
import { isSmartTV } from "react-device-detect";
import Spinner from "./components/spinner";
import useUserContext from "./hooks/useUserContext";
import { getPreInitData } from "./services/app-service";
import { getUser } from "./services/user-service";
import { checkLoginStatus } from "./utils/loginStatus";

const Desktop = React.lazy(() => import("./pages/desktop"));
const Tv = React.lazy(() => import("./pages/tv"));
const MessageInfo = React.lazy(() => import("./components/messageInfo"));

export default function App() {
  const [canAccessPlayer, setCanAccessPlayer] = useState(true);
  const { state, dispatch } = useUserContext();
  const { isLoading } = state;

  useEffect(() => {
    const { userInfo, token, uuid } = getUser();

    // check login status only when user has token
    if (token) {
      const [isValid, loginStatus] = checkLoginStatus(token);

      if (loginStatus === 3) {
        setCanAccessPlayer(isValid);
      }
    }

    dispatch({
      type: "set-user",
      payload: { userInfo, token, isLoading: false, uuid },
    });
  }, []);

  // Sentry.init();
  const data = getPreInitData();

  if (!data.alias) {
    return (
      <Suspense fallback={<div />}>
        <MessageInfo productStatus={"notFound"} />
      </Suspense>
    );
  }

  if (isLoading) {
    return <Spinner />;
  }

  if (!canAccessPlayer) {
    return (
      <Suspense fallback={<div />}>
        <MessageInfo
          productStatus={"chooseProfile"}
          url={`${process.env.NEXT_PUBLIC_SITE_URL}/profile/browse`}
        />
      </Suspense>
    );
  }

  return (
    <Suspense fallback={<div />}>
      {isSmartTV ? <Tv data={data} /> : <Desktop data={data} />}
    </Suspense>
  );
}