v1.7.5/version bump

- fix popup styling
- add changelog toggle

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-admin",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.2.2",

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "private": true,
   "dependencies": {},
   "scripts": {

app/public/background.js

@@ -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({
+          if (window.localStorage.getItem('showChangelog') === true) {
-            url: `http://www.${BASE_URL}.com/changes/v${APP_VERSION}`,
+            CHROME_OR_BROWSER.tabs.create({
-            active: true,
+              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/manifest.json

@@ -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

@@ -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-face {
-        font-family: Roboto, sans-serif;
+        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;
+        font-family: 'Glacial';
-        width: 100%;
+        margin: 0;
-        margin: 2.5px 0px;
+        padding: 0;
       }
-      body {
+      html {
-        background: var(--mdc-theme-text-secondary-on-light);
+        font-size: 10px;
-        padding: 15px;
+        background-color: #424242;
+        height: max-content;
+        width: max-content;
+        height: -moz-fit-content;
         width: -moz-fit-content;
       }
-      #clear-button {
+      body {
-        font-size: 10px;
+        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-button {
-        --mdc-theme-secondary: #beff94 !important;
+        font-size: 1.2rem !important;
-        --mdc-theme-surface: #ffffff !important;
-        margin: 10px 5px;
       }
-      .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;
+        background: #424242;
-        padding-right: 10px;
+        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
+    <h5 data-font="sans-bold">WATCH PARTY</h5>
-      style="
+    <p>To use Watch Party, head on over to any supported website.</p>
-        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>
     <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
+    </div>
-        style="
+
-          width: 100%;
+    <div class="switch-container">
-          display: block;
+      <div class="switch-wrapper">
-          color: var(--mdc-theme-text-hint-on-dark);
+        <div class="mdc-switch" id="changelog-toggle">
-          font-size: 12.5px;
+          <div class="mdc-switch__track"></div>
-          text-align: center;
+          <div class="mdc-switch__thumb-underlay">
-        "
+            <div class="mdc-switch__thumb"></div>
-      >
+            <input
-        Refresh page after changing show/hide status.
+              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

@@ -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;

app/src/App.js

@@ -27,7 +27,7 @@ import {
 } from './Api';
 import Tutorial from './Tutorial';
 
-const APP_VERSION = '1.7.4';
+const APP_VERSION = '1.7.5';
 const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const darkTheme = createMuiTheme({

functions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party-api",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "Cloud Functions for Watch Party",
   "scripts": {
     "lint": "eslint .",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-party",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "Watch Party",
   "scripts": {
     "start": "firebase emulators:start",