v1.6.4/version bump
- hide/show button - popup redesign - start of tutorial
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "watch-party-crx",
|
||||
"version": "1.6.3",
|
||||
"version": "1.6.4",
|
||||
"private": true,
|
||||
"dependencies": {},
|
||||
"scripts": {
|
||||
|
||||
@@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
/* global chrome */
|
||||
/* global firebase */
|
||||
|
||||
const APP_VERSION = '1.6.3';
|
||||
const APP_VERSION = '1.6.4';
|
||||
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
|
||||
|
||||
const firebaseConfig = {
|
||||
@@ -127,6 +127,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
case 'EMPTY_PARTIES':
|
||||
window.localStorage.removeItem('parties');
|
||||
break;
|
||||
case 'IS_HIDDEN':
|
||||
sendResponse(
|
||||
window.localStorage.getItem('showWPButton')
|
||||
? JSON.parse(window.localStorage.getItem('showWPButton'))
|
||||
: true
|
||||
);
|
||||
break;
|
||||
case 'GET_TUTORIAL':
|
||||
sendResponse(
|
||||
window.localStorage.getItem('tutorialComplete')
|
||||
? JSON.parse(window.localStorage.getItem('tutorialComplete'))
|
||||
: false
|
||||
);
|
||||
break;
|
||||
case 'SET_TUTORIAL':
|
||||
window.localStorage.setItem('tutorialComplete', request.status);
|
||||
break;
|
||||
default:
|
||||
console.warn('Unknown message type: <', type, '>');
|
||||
break;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "Watch Party",
|
||||
"short_name": "WP",
|
||||
"version": "1.6.3",
|
||||
"version": "1.6.4",
|
||||
"description": "Watch streamed content together.",
|
||||
"background": {
|
||||
"page": "background.html"
|
||||
@@ -21,7 +21,7 @@
|
||||
"https://play.google.com/movies/*",
|
||||
"https://*.crunchyroll.com/*"
|
||||
],
|
||||
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
|
||||
"content_security_policy": "script-src 'self' https://unpkg.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": [
|
||||
|
||||
+111
-54
@@ -17,70 +17,127 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'"
|
||||
/>
|
||||
<style>
|
||||
a {
|
||||
display: table;
|
||||
min-width: max-content;
|
||||
text-align: center;
|
||||
width: calc(100%-20px);
|
||||
color: #c0f300;
|
||||
margin: 10px auto;
|
||||
padding: 5px 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
transition: all ease-out 0.3s;
|
||||
cursor: pointer;
|
||||
border-radius: 36px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
:root {
|
||||
--mdc-theme-primary: #c0f300 !important;
|
||||
--mdc-theme-secondary: #000000 !important;
|
||||
--mdc-theme-background: #c0f300 !important;
|
||||
--mdc-theme-surface: #000000 !important;
|
||||
--mdc-theme-on-primary: #000000 !important;
|
||||
--mdc-theme-on-secondary: #c0f300 !important;
|
||||
--mdc-theme-on-surface: #c0f300 !important;
|
||||
--mdc-theme-text-primary-on-light: #000000 !important;
|
||||
--mdc-theme-text-secondary-on-light: #2c2c2c !important;
|
||||
--mdc-theme-text-hint-on-light: #363636 !important;
|
||||
--mdc-theme-text-disabled-on-light: #555555 !important;
|
||||
--mdc-theme-text-icon-on-light: #000000 !important;
|
||||
--mdc-theme-text-primary-on-dark: #c0f300 !important;
|
||||
--mdc-theme-text-secondary-on-dark: #f7ff56 !important;
|
||||
--mdc-theme-text-hint-on-dark: #fbffb3 !important;
|
||||
--mdc-theme-text-disabled-on-dark: #8bc000 !important;
|
||||
--mdc-theme-text-icon-on-dark: #c0f300 !important;
|
||||
}
|
||||
p {
|
||||
word-break: break-word;
|
||||
max-width: fit-content;
|
||||
border-bottom: 1px solid #888888;
|
||||
padding-bottom: 20px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a:hover {
|
||||
background-color: #c0f300;
|
||||
color: black;
|
||||
.mdc-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2.5px 0px;
|
||||
}
|
||||
body {
|
||||
min-width: max-content;
|
||||
padding: 5px 10px;
|
||||
background: #424242;
|
||||
background: var(--mdc-theme-text-secondary-on-light);
|
||||
padding: 15px;
|
||||
}
|
||||
button {
|
||||
padding: 7.5px 3px;
|
||||
margin: 10px 0;
|
||||
border-radius: 13px;
|
||||
#clear-button {
|
||||
width: max-content;
|
||||
}
|
||||
.mdc-switch {
|
||||
--mdc-theme-secondary: #c0f300 !important;
|
||||
--mdc-theme-surface: #ffffff !important;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
label {
|
||||
color: var(--mdc-theme-text-primary-on-dark);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.switch-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.switch-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: #c0f300;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.7));
|
||||
transition: all ease-in 0.3s;
|
||||
align-items: center;
|
||||
}
|
||||
button:hover {
|
||||
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7)) !important;
|
||||
.switch-wrapper .label-container {
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
.switch-wrapper .label-container span {
|
||||
color: var(--mdc-theme-text-hint-on-dark);
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="popup.js"></script>
|
||||
<p>
|
||||
NOTHING TO DO HERE. GO TO A SUPPORTED WEBSITE, AND LOOK FOR WATCH PARTY IN THE BOTTOM RIGHT
|
||||
CORNER OF YOUR SCREEN
|
||||
</p>
|
||||
<a target="_blank" href="https://www.chromewatchparty.com/welcome">HOW TO GET STARTED</a>
|
||||
<a target="_blank" href="https://www.chromewatchparty.com/welcome/#tips">FAQ</a>
|
||||
<a target="_blank" href="mailto:admin@chromewatchparty.com?subject=User Feedback">Feedback</a>
|
||||
<a target="_blank" href="https://paypal.me/Ayushya">Donate</a>
|
||||
<p style="width: 100%; max-width: 100%;"></p>
|
||||
<button id="clear-button">Clear Party Names & Pins</button>
|
||||
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<i class="material-icons mdc-button__icon" aria-hidden="true">school</i>
|
||||
<span class="mdc-button__label">HOW TO GET STARTED</span>
|
||||
</a>
|
||||
|
||||
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome#tips">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<i class="material-icons mdc-button__icon" aria-hidden="true">support</i>
|
||||
<span class="mdc-button__label">FAQ</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="mdc-button"
|
||||
target="_blank"
|
||||
href="mailto:admin@chromewatchparty.com?subject=User Feedback"
|
||||
>
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<i class="material-icons mdc-button__icon" aria-hidden="true">question_answer</i>
|
||||
<span class="mdc-button__label">Feedback</span>
|
||||
</a>
|
||||
|
||||
<a class="mdc-button" target="_blank" href="https://paypal.me/Ayushya">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<i class="material-icons mdc-button__icon" aria-hidden="true">attach_money</i>
|
||||
<span class="mdc-button__label">Donate</span>
|
||||
</a>
|
||||
|
||||
<div class="switch-container">
|
||||
<div class="switch-wrapper">
|
||||
<div class="mdc-switch">
|
||||
<div class="mdc-switch__track"></div>
|
||||
<div class="mdc-switch__thumb-underlay">
|
||||
<div class="mdc-switch__thumb"></div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="another-basic-switch"
|
||||
class="mdc-switch__native-control"
|
||||
role="switch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-container">
|
||||
<label for="another-basic-switch">Show / hide Watch Party button</label>
|
||||
<span>Currently showing Watch Party button</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: block; color: var(--mdc-theme-text-hint-on-dark)">
|
||||
Refresh page after changing show/hide status.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="clear-button" class="mdc-button mdc-button--raised">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
<span class="mdc-button__label">Forget Party Names & Pins</span>
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+37
-4
@@ -9,10 +9,43 @@ 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.
|
||||
************************************************************************/
|
||||
function clearLocal() {
|
||||
window.localStorage.removeItem('parties');
|
||||
return 0;
|
||||
}
|
||||
window.onload = function () {
|
||||
const MDCSwitch = mdc.switchControl.MDCSwitch;
|
||||
const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
|
||||
|
||||
function clearLocal() {
|
||||
window.localStorage.removeItem('parties');
|
||||
return 0;
|
||||
}
|
||||
function setShowWPButton(v) {
|
||||
window.localStorage.setItem('showWPButton', v);
|
||||
}
|
||||
function getShowWPButton() {
|
||||
return window.localStorage.getItem('showWPButton')
|
||||
? JSON.parse(window.localStorage.getItem('showWPButton'))
|
||||
: true;
|
||||
}
|
||||
function toggleShowWPButton() {
|
||||
const currentStatus = getShowWPButton();
|
||||
setShowWPButton(!currentStatus);
|
||||
switchControl.checked = !currentStatus;
|
||||
changeShowWPButtonDescription();
|
||||
}
|
||||
function changeShowWPButtonDescription() {
|
||||
const currentStatus = getShowWPButton();
|
||||
if (currentStatus === true) {
|
||||
document.querySelector('.switch-wrapper span').innerText =
|
||||
'Currently showing Watch Party button';
|
||||
} else {
|
||||
document.querySelector('.switch-wrapper span').innerText =
|
||||
'Watch Party button is currently hidden';
|
||||
}
|
||||
}
|
||||
|
||||
switchControl.checked = getShowWPButton();
|
||||
changeShowWPButtonDescription();
|
||||
document.querySelector('.mdc-switch').onchange = toggleShowWPButton;
|
||||
|
||||
mdc.ripple.MDCRipple.attachTo(document.getElementById('clear-button'));
|
||||
document.getElementById('clear-button').onclick = clearLocal;
|
||||
};
|
||||
|
||||
@@ -48,6 +48,43 @@ export const getPlayerSource = () => {
|
||||
if (HREF.includes(PLAYER_SOURCE.LOCAL)) return PLAYER_SOURCE.LOCAL;
|
||||
};
|
||||
|
||||
export const getShowWPButton = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
type: 'IS_HIDDEN',
|
||||
},
|
||||
(response) => {
|
||||
resolve(response);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
export const getTutorialStatus = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
type: 'GET_TUTORIAL',
|
||||
},
|
||||
(response) => {
|
||||
resolve(response);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
export const setTutorialStatus = (status) =>
|
||||
new Promise((resolve, reject) => {
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
type: 'SET_TUTORIAL',
|
||||
status,
|
||||
},
|
||||
(response) => {
|
||||
resolve(response);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
export const LocalData = () => {
|
||||
return window.localStorage.getItem('WatchParty')
|
||||
? JSON.parse(window.localStorage.getItem('WatchParty'))
|
||||
|
||||
+26
-3
@@ -17,9 +17,16 @@ import Loading from './Loading';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/firestore';
|
||||
import Inactive from './Inactive';
|
||||
import { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
|
||||
import {
|
||||
getUserUid,
|
||||
getPlayerSource,
|
||||
PLAYER_SOURCE,
|
||||
getShowWPButton,
|
||||
getTutorialStatus,
|
||||
} from './Api';
|
||||
import Tutorial from './Tutorial';
|
||||
|
||||
const APP_VERSION = '1.6.3';
|
||||
const APP_VERSION = '1.6.4';
|
||||
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
|
||||
|
||||
const darkTheme = createMuiTheme({
|
||||
@@ -67,6 +74,7 @@ const startResize = (ev) => {
|
||||
const App = () => {
|
||||
const closedNotification = { open: false, message: '' };
|
||||
|
||||
const [tutorialComplete, setTutorialComplete] = useState(false);
|
||||
const [status, setStatus] = useState({ active: false, message: '' });
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -85,8 +93,15 @@ const App = () => {
|
||||
setStatus(statusSnap.data());
|
||||
setLoading(false);
|
||||
});
|
||||
getShowWPButton().then((showWPButton) => {
|
||||
if (showWPButton === true) {
|
||||
document.querySelector('.watch-party-fab').classList.remove('watch-party-fab-hidden');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
getTutorialStatus().then((v) => setTutorialComplete(v));
|
||||
|
||||
// HANDLE VISIBILITY STYLING
|
||||
const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
|
||||
if (visible) {
|
||||
@@ -129,6 +144,10 @@ const App = () => {
|
||||
message={notification.message}
|
||||
autoHideDuration={6000}
|
||||
/>
|
||||
<Tutorial
|
||||
setTutorialCompleteState={setTutorialComplete}
|
||||
tutorialComplete={tutorialComplete}
|
||||
/>
|
||||
<div className="party-content-wrapper">
|
||||
<div id="party-routes-wrapper">
|
||||
<Tooltip
|
||||
@@ -150,6 +169,7 @@ const App = () => {
|
||||
status={status[APP_VERSION_STRING]}
|
||||
selectors={status.selectors}
|
||||
nameSelectors={status.nameSelectors}
|
||||
setVisible={setVisible}
|
||||
/>
|
||||
) : (
|
||||
<Inactive
|
||||
@@ -161,7 +181,10 @@ const App = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
|
||||
<Fab
|
||||
onClick={() => setVisible(!visible)}
|
||||
className="watch-party-fab watch-party-fab-hidden"
|
||||
>
|
||||
<span />
|
||||
</Fab>
|
||||
</div>
|
||||
|
||||
@@ -93,6 +93,7 @@ export default class Create extends Component {
|
||||
if (allowAutoRejoin === true && lastActive && userName && partyName && partyPin) {
|
||||
if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
|
||||
this.props.updateLoading(true);
|
||||
this.props.setVisible(true);
|
||||
this.joinCall(userName, partyName, partyPin);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Popover } from '@material-ui/core';
|
||||
|
||||
export default class Tutorial extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
open: !props.tutorialComplete,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const { open } = this.state;
|
||||
return (
|
||||
<Popover
|
||||
className="watch-party-tutorial"
|
||||
anchorEl={document.querySelector('.watch-party-fab')}
|
||||
open={open}
|
||||
>
|
||||
TUTORIAL START
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -319,6 +319,9 @@ body.disney #party_wrapper * {
|
||||
animation-duration: 2s;
|
||||
transition: all ease-in-out 0.3s !important;
|
||||
}
|
||||
.watch-party-fab.watch-party-fab-hidden {
|
||||
display: none;
|
||||
}
|
||||
.watch-party-fab:hover {
|
||||
right: 0rem !important;
|
||||
background-size: 90%;
|
||||
@@ -904,3 +907,10 @@ button.giphy-list-item {
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.watch-party-tutorial {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
.watch-party-tutorial .MuiPaper-root.MuiPopover-paper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user