ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.6.6/release- chat fix- hbo click fix- hbo resize

Browse Source
This commit is contained in:
ayushya
2020-09-01 22:12:20 -04:00
parent 0d75218c0c
commit 72acbf56f0
14 changed files with 307 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.js
+45 -87
View File
@@ -9,40 +9,34 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
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 firebase from "firebase/app";
import "firebase/firestore";
import Inactive from "./Inactive";
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 firebase from 'firebase/app';
import 'firebase/firestore';
import Inactive from './Inactive';
import {
getUserUid,
getPlayerSource,
PLAYER_SOURCE,
getShowWPButton,
getTutorialStatus,
} from "./Api";
import Tutorial from "./Tutorial";
} from './Api';
import Tutorial from './Tutorial';
const APP_VERSION = "1.6.5";
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, "");
const APP_VERSION = '1.6.6';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const darkTheme = createMuiTheme({
palette: {
type: "dark",
type: 'dark',
primary: {
main: "#FF0000",
main: '#FF0000',
},
secondary: {
main: "#c0f300",
main: '#c0f300',
},
},
});
@@ -55,44 +49,37 @@ const Routes = (props) => (
const resetResize = () => {
const checkedX = 425;
document.documentElement.style.setProperty("--party-width", `${checkedX}px`);
document.documentElement.style.setProperty(
"--neg-party-width",
`-${checkedX}px`
);
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`
);
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);
document.documentElement.removeEventListener('mousemove', doResize, false);
document.documentElement.removeEventListener('mouseup', stopResize, false);
};
const startResize = (ev) => {
document.documentElement.addEventListener("mousemove", doResize, false);
document.documentElement.addEventListener("mouseup", stopResize, false);
ev.preventDefault();
ev.stopPropagation();
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
};
const App = () => {
const closedNotification = { open: false, message: "" };
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 [status, setStatus] = useState({ active: false, message: '' });
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const [notification, setNotification] = useState(closedNotification);
@@ -104,8 +91,8 @@ const App = () => {
getUserUid();
firebase
.firestore()
.collection("server")
.doc("status")
.collection('server')
.doc('status')
.onSnapshot((statusSnap) => {
setStatus(statusSnap.data());
setLoading(false);
@@ -113,9 +100,7 @@ const App = () => {
getShowWPButton().then((showWPButton) => {
setShowFab(showWPButton);
if (showWPButton === true) {
document
.querySelector(".watch-party-fab")
.classList.remove("watch-party-fab-hidden");
document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
}
});
}, []);
@@ -123,45 +108,23 @@ const App = () => {
getTutorialStatus().then((v) => setTutorialComplete(v));
// HANDLE VISIBILITY STYLING
const PartyRoutesWrapper = document.getElementById("party-routes-wrapper");
const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
if (visible) {
document.body.classList.add("visible");
PartyRoutesWrapper && PartyRoutesWrapper.classList.add("visible");
if (
getPlayerSource() === PLAYER_SOURCE.HBOMAX ||
(getPlayerSource() === PLAYER_SOURCE.HBONOW && !hasAttached)
) {
document.addEventListener(
"mousedown",
function (ev) {
if (document.body.querySelector("body.visible")) {
ev.preventDefault();
ev.stopPropagation();
ev.stopImmediatePropagation();
}
},
{ capture: true }
);
hasAttached = true;
}
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)";
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";
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");
document.body.classList.remove('visible');
PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
}
// HANDLE FULLSCREEN EVENT
@@ -178,7 +141,7 @@ const App = () => {
<ThemeProvider theme={darkTheme}>
<Snackbar
className="party-notification-container"
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={notification.open}
onClose={() => setNotification(closedNotification)}
message={notification.message}
@@ -198,17 +161,12 @@ const App = () => {
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 onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">
||
</div>
</Tooltip>
{loading && <Loading />}
{status[APP_VERSION_STRING] &&
status[APP_VERSION_STRING].active === true ? (
{status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
<Routes
showFab={showFab}
resetTutorial={resetTutorial}