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

v1.7.5/version bump

Browse Source 
- fix popup styling
- add changelog toggle
This commit is contained in:
ayushya
2020-09-11 12:47:08 -04:00
parent f6664d6b30
commit 5f8ec18c74
15 changed files with 233 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/background.js
+17 -11
View File
@@ -26,7 +26,7 @@ try {
console.info('CHROME ENV');
}
const APP_VERSION = '1.7.4';
const APP_VERSION = '1.7.5';
const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
const firebaseConfig = {
@@ -96,10 +96,12 @@ CHROME_OR_BROWSER.runtime.onInstalled.addListener((details) => {
if (details.reason === 'install') {
if (window.localStorage.getItem('watchPartyVersion')) {
if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
CHROME_OR_BROWSER.tabs.create({
url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
active: true,
});
if (window.localStorage.getItem('showChangelog') === true) {
CHROME_OR_BROWSER.tabs.create({
url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
active: true,
});
}
window.localStorage.setItem('watchPartyVersion', APP_VERSION);
}
} else {
@@ -112,17 +114,21 @@ CHROME_OR_BROWSER.runtime.onInstalled.addListener((details) => {
} else if (details.reason === 'update') {
if (window.localStorage.getItem('watchPartyVersion')) {
if (window.localStorage.getItem('watchPartyVersion') !== APP_VERSION) {
if (window.localStorage.getItem('showChangelog') === true) {
CHROME_OR_BROWSER.tabs.create({
url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
active: true,
});
}
window.localStorage.setItem('watchPartyVersion', APP_VERSION);
}
} else {
if (window.localStorage.getItem('showChangelog') === true) {
CHROME_OR_BROWSER.tabs.create({
url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
active: true,
});
window.localStorage.setItem('watchPartyVersion', APP_VERSION);
}
} else {
CHROME_OR_BROWSER.tabs.create({
url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
active: true,
});
window.localStorage.setItem('watchPartyVersion', APP_VERSION);
}
}
app/public/fonts/glacialindifference-bold-webfont.woff
BIN
View File
Binary file not shown.
app/public/fonts/glacialindifference-bold-webfont.woff2
BIN
View File
Binary file not shown.
app/public/fonts/glacialindifference-italic-webfont.woff
BIN
View File
Binary file not shown.
app/public/fonts/glacialindifference-italic-webfont.woff2
BIN
View File
Binary file not shown.
app/public/fonts/glacialindifference-regular-webfont.woff
BIN
View File
Binary file not shown.
app/public/fonts/glacialindifference-regular-webfont.woff2
BIN
View File
Binary file not shown.
app/public/manifest.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "Watch Party",
"short_name": "WP",
"version": "1.7.4",
"version": "1.7.5",
"description": "Watch streamed content together.",
"background": {
"page": "background.html"
app/public/popup.html
+169 -86
View File
@@ -13,9 +13,74 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<html>
<head>
<meta charset="utf-8" />
<link rel="preload" as="font" href="/fonts/glacialindifference-bold-webfont.woff" crossorigin />
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-bold-webfont.woff2"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-italic-webfont.woff"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-italic-webfont.woff2"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-regular-webfont.woff"
crossorigin
/>
<link
rel="preload"
as="font"
href="/fonts/glacialindifference-regular-webfont.woff2"
crossorigin
/>
<style>
* {
font-family: Roboto, sans-serif;
@font-face {
font-family: 'GlacialBold';
src: url('/fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
url('/fonts/glacialindifference-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'GlacialItalic';
src: url('/fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
url('/fonts/glacialindifference-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Glacial';
src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[data-font='sans'] {
font-family: 'Glacial', sans-serif;
font-display: swap;
}
[data-font='sans-bold'] {
font-family: 'GlacialBold', sans-serif;
font-display: swap;
}
[data-font='sans-italic'] {
font-family: 'GlacialItalic', sans-serif;
font-style: italic;
font-display: swap;
}
:root {
--mdc-theme-primary: #beff94 !important;
@@ -36,72 +101,99 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
--mdc-theme-text-disabled-on-dark: #8bc000 !important;
--mdc-theme-text-icon-on-dark: #beff94 !important;
}
.mdc-button {
display: block;
width: 100%;
margin: 2.5px 0px;
* {
font-family: 'Glacial';
margin: 0;
padding: 0;
}
body {
background: var(--mdc-theme-text-secondary-on-light);
padding: 15px;
html {
font-size: 10px;
background-color: #424242;
height: max-content;
width: max-content;
height: -moz-fit-content;
width: -moz-fit-content;
}
#clear-button {
font-size: 10px;
body {
padding: 2.5rem;
background-color: #424242;
height: max-content;
width: max-content;
height: -moz-fit-content;
width: -moz-fit-content;
max-width: 300px;
}
h5 {
color: var(--mdc-theme-primary);
font-size: 2rem;
letter-spacing: 0.5rem;
font-weight: 300;
}
p {
color: white;
font-size: 1.4rem;
max-width: 300px;
margin: 1.5rem 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.mdc-switch {
--mdc-theme-secondary: #beff94 !important;
--mdc-theme-surface: #ffffff !important;
margin: 10px 5px;
.mdc-button {
font-size: 1.2rem !important;
}
.label-container > * {
#clear-button {
width: 100%;
text-align: center;
display: block;
}
label {
color: var(--mdc-theme-text-primary-on-dark);
text-transform: uppercase;
}
.switch-container {
margin: 20px 0;
min-width: max-content;
min-width: -moz-max-content;
}
.switch-wrapper {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
}
.switch-wrapper .label-container {
margin-left: 5px;
flex: 1;
}
.switch-wrapper .label-container span {
color: var(--mdc-theme-text-hint-on-dark);
}
a.mdc-button {
font-size: 10px;
display: inline-flex;
flex: 1;
width: auto;
}
#divider {
height: 1px;
background: #555555;
position: relative;
margin: 15px 0;
margin: 2rem 0;
}
#divider::before {
content: attr(data-title);
color: white;
top: -8px;
position: absolute;
background-color: #2c2c2c;
padding-right: 10px;
background: #424242;
padding-right: 2rem;
top: -0.5rem;
letter-spacing: 4px;
font-size: 1.2rem;
}
.switch-container {
width: 100%;
margin-bottom: 2.5rem;
}
.switch-wrapper {
display: flex;
align-items: center;
}
.mdc-switch__track {
background-color: var(--mdc-theme-primary) !important;
border-color: var(--mdc-theme-primary) !important;
}
.mdc-switch__thumb {
background-color: var(--mdc-theme-primary) !important;
border-color: var(--mdc-theme-primary) !important;
}
.label-container {
margin-left: 1rem;
display: flex;
flex-direction: column;
}
.label-container label {
font-size: 1.5rem;
color: var(--mdc-theme-primary);
text-transform: uppercase;
}
.label-container span {
font-size: 1.2rem;
margin: 0.25rem 0;
color: var(--mdc-theme-text-hint-on-dark);
}
.label-container div {
font-size: 1.2rem;
margin: 0.25rem 0;
color: var(--mdc-theme-text-hint-on-dark);
}
</style>
<link href="mdc.css" rel="stylesheet" />
@@ -111,28 +203,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<body>
<script src="popup.js"></script>
<h5
style="
margin: 0;
color: var(--mdc-theme-text-primary-on-dark);
letter-spacing: 3px;
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
"
>
WATCH PARTY
</h5>
<p
style="
margin-top: 0;
margin-bottom: 25px !important;
display: block;
color: var(--mdc-theme-on-error);
"
>
To use Watch Party, head on over to any supported website.
</p>
<h5 data-font="sans-bold">WATCH PARTY</h5>
<p>To use Watch Party, head on over to any supported website.</p>
<div data-title="LINKS" id="divider"></div>
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
<div class="mdc-button__ripple"></div>
@@ -165,33 +237,44 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
<div class="switch-container">
<div class="switch-wrapper">
<div class="mdc-switch">
<div class="mdc-switch" id="show-toggle">
<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"
id="show-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>
<label for="show-switch">Show / hide Watch Party button</label>
<span>Currently showing Watch Party button</span>
<div>Refresh page after changing show/hide status.</div>
</div>
</div>
<div
style="
width: 100%;
display: block;
color: var(--mdc-theme-text-hint-on-dark);
font-size: 12.5px;
text-align: center;
"
>
Refresh page after changing show/hide status.
</div>
<div class="switch-container">
<div class="switch-wrapper">
<div class="mdc-switch" id="changelog-toggle">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="changelog-switch"
class="mdc-switch__native-control"
role="switch"
/>
</div>
</div>
<div class="label-container">
<label for="changelog-switch">Open changelog on update</label>
<span>Will open changelog on Watch Party update</span>
</div>
</div>
</div>
app/public/popup.js
+41 -6
View File
@@ -11,40 +11,75 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
************************************************************************/
window.onload = function () {
const MDCSwitch = mdc.switchControl.MDCSwitch;
const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
const showToggleControl = new MDCSwitch(document.querySelector('.mdc-switch#show-toggle'));
const changelogToggleControl = new MDCSwitch(
document.querySelector('.mdc-switch#changelog-toggle')
);
function clearLocal() {
window.localStorage.removeItem('parties');
return 0;
}
function setShowWPButton(v) {
window.localStorage.setItem('showWPButton', v);
}
function setShowChangelog(v) {
window.localStorage.setItem('showChangelog', v);
}
function getShowWPButton() {
return window.localStorage.getItem('showWPButton')
? JSON.parse(window.localStorage.getItem('showWPButton'))
: true;
}
function getShowChangelog() {
return window.localStorage.getItem('showChangelog')
? JSON.parse(window.localStorage.getItem('showChangelog'))
: false;
}
function toggleShowWPButton() {
const currentStatus = getShowWPButton();
setShowWPButton(!currentStatus);
switchControl.checked = !currentStatus;
showToggleControl.checked = !currentStatus;
changeShowWPButtonDescription();
}
function toggleShowChangelog() {
const currentStatus = getShowChangelog();
setShowChangelog(!currentStatus);
changelogToggleControl.checked = !currentStatus;
changeShowChangelogDescription();
}
function changeShowWPButtonDescription() {
const currentStatus = getShowWPButton();
if (currentStatus === true) {
document.querySelector('.switch-wrapper span').innerText =
document.querySelector('#show-toggle + .label-container span').innerText =
'Currently showing Watch Party button';
} else {
document.querySelector('.switch-wrapper span').innerText =
document.querySelector('#show-toggle + .label-container span').innerText =
'Watch Party button is currently hidden';
}
}
function changeShowChangelogDescription() {
const currentStatus = getShowChangelog();
if (currentStatus === true) {
document.querySelector('#changelog-toggle + .label-container span').innerText =
'Will open changelog on Watch Party update';
} else {
document.querySelector('#changelog-toggle + .label-container span').innerText =
'Will not open changelog on Watch Party update';
}
}
switchControl.checked = getShowWPButton();
showToggleControl.checked = getShowWPButton();
changeShowWPButtonDescription();
document.querySelector('.mdc-switch').onchange = toggleShowWPButton;
document.querySelector('.mdc-switch#show-toggle').onchange = toggleShowWPButton;
changelogToggleControl.checked = getShowChangelog();
changeShowChangelogDescription();
document.querySelector('.mdc-switch#changelog-toggle').onchange = toggleShowChangelog;
mdc.ripple.MDCRipple.attachTo(document.getElementById('clear-button'));
document.getElementById('clear-button').onclick = clearLocal;