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

v1.6.4/version bump

Browse Source 
- hide/show button
- popup redesign
- start of tutorial
This commit is contained in:
ayushya
2020-08-26 18:19:01 -04:00
parent 51f191b794
commit 60758dc35a
13 changed files with 269 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/background.js
+18 -1
View File
@@ -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;
app/public/manifest.json
+2 -2
View File
@@ -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": [
app/public/popup.html
+111 -54
View File
@@ -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>
app/public/popup.js
+37 -4
View File
@@ -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;
};