diff --git a/admin/package.json b/admin/package.json index fff6359..43dfba2 100644 --- a/admin/package.json +++ b/admin/package.json @@ -1,6 +1,6 @@ { "name": "watch-party-admin", - "version": "1.6.3", + "version": "1.6.4", "private": true, "dependencies": { "@ant-design/icons": "^4.2.2", diff --git a/app/package.json b/app/package.json index 82c31d1..25b1bfd 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "watch-party-crx", - "version": "1.6.3", + "version": "1.6.4", "private": true, "dependencies": {}, "scripts": { diff --git a/app/public/background.js b/app/public/background.js index 80611e8..61f43e4 100644 --- a/app/public/background.js +++ b/app/public/background.js @@ -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; diff --git a/app/public/manifest.json b/app/public/manifest.json index ee1ea1e..0850bcb 100644 --- a/app/public/manifest.json +++ b/app/public/manifest.json @@ -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": [ diff --git a/app/public/popup.html b/app/public/popup.html index 27ad6e4..029d77b 100644 --- a/app/public/popup.html +++ b/app/public/popup.html @@ -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'" /> + + + -

- NOTHING TO DO HERE. GO TO A SUPPORTED WEBSITE, AND LOOK FOR WATCH PARTY IN THE BOTTOM RIGHT - CORNER OF YOUR SCREEN -

- HOW TO GET STARTED - FAQ - Feedback - Donate -

- + +
+ + HOW TO GET STARTED + + + +
+ + FAQ + + + +
+ + Feedback + + + +
+ + Donate + + +
+
+
+
+
+
+ +
+
+
+ + Currently showing Watch Party button +
+
+
+ Refresh page after changing show/hide status. +
+
+ + diff --git a/app/public/popup.js b/app/public/popup.js index e2aaab6..e0e8114 100644 --- a/app/public/popup.js +++ b/app/public/popup.js @@ -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; }; diff --git a/app/src/Api.js b/app/src/Api.js index 5ca2720..d8efc89 100644 --- a/app/src/Api.js +++ b/app/src/Api.js @@ -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')) diff --git a/app/src/App.js b/app/src/App.js index cc3f0cf..12dc36e 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -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} /> +
{ status={status[APP_VERSION_STRING]} selectors={status.selectors} nameSelectors={status.nameSelectors} + setVisible={setVisible} /> ) : ( { /> )}
- setVisible(!visible)} className="watch-party-fab"> + setVisible(!visible)} + className="watch-party-fab watch-party-fab-hidden" + >
diff --git a/app/src/Create.js b/app/src/Create.js index a4242cc..bbb9f7b 100644 --- a/app/src/Create.js +++ b/app/src/Create.js @@ -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); } } diff --git a/app/src/Tutorial.js b/app/src/Tutorial.js new file mode 100644 index 0000000..8b358b0 --- /dev/null +++ b/app/src/Tutorial.js @@ -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 ( + + TUTORIAL START + + ); + } +} diff --git a/app/src/index.css b/app/src/index.css index 0d34b6c..99687e0 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -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; +} diff --git a/functions/package.json b/functions/package.json index 8551949..4c52842 100644 --- a/functions/package.json +++ b/functions/package.json @@ -1,6 +1,6 @@ { "name": "watch-party-api", - "version": "1.6.3", + "version": "1.6.4", "description": "Cloud Functions for Watch Party", "scripts": { "lint": "eslint .", diff --git a/package.json b/package.json index 83e208b..641539c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "watch-party", - "version": "1.6.3", + "version": "1.6.4", "description": "Watch Party", "scripts": { "start": "firebase emulators:start",