watchparty/app/src/App.js

/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
https://www.chromewatchparty.com/copyright
=========================================================================
ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
CITED ARE THE SOLE INTELLECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
/*global chrome*/
/*global browser*/

import React, { useState, useEffect } from 'react';
import Router from 'route-lite';
import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } from '@material-ui/core';
import Create from './Create';
import Loading from './Loading';
import Inactive from './Inactive';
import {
  getUserUid,
  getPlayerSource,
  PLAYER_SOURCE,
  getShowWPButton,
  getTutorialStatus,
} from './Api';
import Tutorial from './Tutorial';

const APP_VERSION = '1.7.4';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      main: '#FF0000',
    },
    secondary: {
      main: '#beff94',
    },
  },
});

const Routes = (props) => (
  <Router>
    <Create {...props} />
  </Router>
);

const resetResize = () => {
  const checkedX = 425;
  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
};

const doResize = (ev) => {
  const checkedX =
    window.innerWidth -
    Math.min(window.innerWidth - 300, Math.max(window.innerWidth * 0.5, ev.clientX));
  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
};

const stopResize = (ev) => {
  document.documentElement.removeEventListener('mousemove', doResize, false);
  document.documentElement.removeEventListener('mouseup', stopResize, false);
};

const startResize = (ev) => {
  ev.preventDefault();
  ev.stopPropagation();
  document.documentElement.addEventListener('mousemove', doResize, false);
  document.documentElement.addEventListener('mouseup', stopResize, false);
};

let CHROME_OR_BROWSER = chrome || browser;
let port;

const App = () => {
  const closedNotification = { open: false, message: '' };

  const [tutorialComponent, setTutorialComponent] = useState(null);
  const [showFab, setShowFab] = useState(false);
  const [tutorialComplete, setTutorialComplete] = useState(false);
  const [status, setStatus] = useState({ active: false, message: '' });
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [notification, setNotification] = useState(closedNotification);

  useEffect(() => {
    setLoading(true);
    getUserUid();
    port = CHROME_OR_BROWSER.runtime.connect({ name: `WATCH_PARTY_STATUS` });
    port.postMessage({
      type: 'STATUS',
    });
    port.onMessage.addListener((response) => {
      setStatus(response.status);
      setLoading(false);
    });
    getShowWPButton().then((showWPButton) => {
      setShowFab(showWPButton);
      if (showWPButton === true) {
        document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
        document.querySelector(
          '.watch-party-fab'
        ).style.backgroundImage = `url("${CHROME_OR_BROWSER.extension.getURL('wp192.png')}")`;
      }
    });
  }, []);

  getTutorialStatus().then((v) => setTutorialComplete(v));

  // HANDLE VISIBILITY STYLING
  const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
  if (visible) {
    document.body.classList.add('visible');
    PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
    if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
      const appleTvPlayer = document.querySelector('apple-tv-plus-player');
      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
      if (takeoverContainer) takeoverContainer.style.maxWidth = 'var(--body-width)';
    }
  } else {
    if (getPlayerSource() === PLAYER_SOURCE.APPLE) {
      const appleTvPlayer = document.querySelector('apple-tv-plus-player');
      const takeoverContainer = appleTvPlayer.shadowRoot.querySelector('.takeover.container.show');
      if (takeoverContainer) takeoverContainer.style.maxWidth = 'none';
    }
    document.body.classList.remove('visible');
    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
  }

  // HANDLE FULLSCREEN EVENT
  document.onfullscreenchange = () => {
    if (document.fullscreenElement) setVisible(false);
  };

  const resetTutorial = (c = null) => {
    setTutorialComponent(c);
    setTutorialComplete(false);
  };

  return (
    <ThemeProvider theme={darkTheme}>
      <Snackbar
        className="party-notification-container"
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        open={notification.open}
        onClose={() => setNotification(closedNotification)}
        message={notification.message}
        autoHideDuration={notification.timeout}
      />
      <Tutorial
        resetTutorial={resetTutorial}
        tutorialComplete={tutorialComplete}
        showFab={showFab}
        visible={visible}
        tutorialComponent={tutorialComponent}
      />
      <div className="party-content-wrapper">
        <div id="party-routes-wrapper">
          <Tooltip
            placement="right-end"
            title="Resize Sidebar / Double Click To Reset"
            aria-label="Resize Sidebar / Double Click To Reset"
          >
            <div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">
              ||
            </div>
          </Tooltip>
          {loading && <Loading />}
          {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
            <Routes
              showFab={showFab}
              resetTutorial={resetTutorial}
              tutorialComplete={tutorialComplete}
              updateLoading={setLoading}
              notify={(message, timeout = 6000) =>
                setNotification({ open: true, message, timeout })
              }
              appVersion={APP_VERSION}
              appVersionString={APP_VERSION_STRING}
              status={status[APP_VERSION_STRING]}
              selectors={status.selectors}
              nameSelectors={status.nameSelectors}
              setVisible={setVisible}
            />
          ) : (
            <Inactive
              status={
                status[APP_VERSION_STRING]
                  ? status[APP_VERSION_STRING].message
                  : 'Connecting to server...'
              }
            />
          )}
        </div>
        <Fab
          onClick={() => setVisible(!visible)}
          className="watch-party-fab watch-party-fab-hidden"
        >
          <span />
        </Fab>
      </div>
    </ThemeProvider>
  );
};

export default App;