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

v1.7.8/release

Browse Source 
- Video Listener Optimizations
- Auto Leave Fix
- Edge support
- Admin Dashboard Update
- Vimeo & Dailymotion
This commit is contained in:
ayushya
2020-11-16 23:06:44 -05:00
parent cfe42bd4aa
commit 16a11f7163
66 changed files with 2559 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.js
+77 -43
View File
@@ -12,32 +12,39 @@ 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 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';
UpdateDailymotionVariables,
} from "./Api";
import Tutorial from "./Tutorial";
const APP_VERSION = '1.7.8';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const APP_VERSION = "1.7.8";
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, "");
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
type: "dark",
primary: {
main: '#FF0000',
main: "#FF0000",
},
secondary: {
main: '#beff94',
main: "#beff94",
},
},
});
@@ -50,40 +57,51 @@ 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`
);
UpdateDailymotionVariables();
};
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);
UpdateDailymotionVariables();
};
const startResize = (ev) => {
ev.preventDefault();
ev.stopPropagation();
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
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 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);
@@ -93,7 +111,7 @@ const App = () => {
getUserUid();
port = CHROME_OR_BROWSER.runtime.connect({ name: `WATCH_PARTY_STATUS` });
port.postMessage({
type: 'STATUS',
type: "STATUS",
});
port.onMessage.addListener((response) => {
setStatus(response.status);
@@ -102,10 +120,14 @@ 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");
document.querySelector(
'.watch-party-fab'
).style.backgroundImage = `url("${CHROME_OR_BROWSER.extension.getURL('wp192.png')}")`;
".watch-party-fab"
).style.backgroundImage = `url("${CHROME_OR_BROWSER.extension.getURL(
"wp192.png"
)}")`;
}
});
}, []);
@@ -113,23 +135,28 @@ 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');
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
@@ -142,11 +169,13 @@ const App = () => {
setTutorialComplete(false);
};
UpdateDailymotionVariables();
return (
<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}
@@ -166,12 +195,17 @@ 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}
@@ -192,7 +226,7 @@ const App = () => {
status={
status[APP_VERSION_STRING]
? status[APP_VERSION_STRING].message
: 'Connecting to server...'
: "Connecting to server..."
}
/>
)}