v1.6.0/resizeable sidebar

app/src/App.js

@@ -18,7 +18,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 ************************************************************************/
 import React, { useState, useEffect } from 'react';
 import Router from 'route-lite';
-import { Fab, createMuiTheme, ThemeProvider, Snackbar } from '@material-ui/core';
+import { Fab, createMuiTheme, ThemeProvider, Snackbar, Tooltip } from '@material-ui/core';
 import Create from './Create';
 import Loading from './Loading';
 import firebase from 'firebase/app';
@@ -47,6 +47,28 @@ const Routes = (props) => (
   </Router>
 );
 
+const resetResize = () => {
+  const checkedX = 400;
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
+}
+
+const doResize = (ev) => {
+  const checkedX = window.innerWidth - Math.min(window.innerWidth-300, Math.max((window.innerWidth*0.5), ev.clientX ));
+  document.documentElement.style.setProperty('--party-width', `${checkedX}px`);
+  document.documentElement.style.setProperty('--neg-party-width', `-${checkedX}px`);
+}
+
+const stopResize = (ev) => {
+  document.documentElement.removeEventListener('mousemove', doResize, false);
+  document.documentElement.removeEventListener('mouseup', stopResize, false);
+}
+
+const startResize = (ev) => {
+  document.documentElement.addEventListener('mousemove', doResize, false);
+  document.documentElement.addEventListener('mouseup', stopResize, false);
+}
+
 const App = () => {
   const closedNotification = { open: false, message: '' };
 
@@ -114,6 +136,13 @@ const App = () => {
       />
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
+          <Tooltip 
+            placement="right-end"
+            title="Resize Sidebar / Double Click To Reset"
+            aria-label="Resize Sidebar / Double Click To Reset"
+          >
+            <div onDoubleClick={resetResize} onMouseDown={startResize} id="party-width-dragger">||</div>
+          </Tooltip>
           {loading && <Loading />}
           {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
             <Routes

app/src/index.css

@@ -47,6 +47,27 @@ body.visible .party-notification-container {
   max-width: var(--party-width);
 }
 
+#party-width-dragger {
+  display: none;
+  position: absolute;
+  padding: 15px 3.5px;
+  right: var(--party-width);
+  top: 50%;
+  background: #2d2d2d;
+  cursor: ew-resize;
+  font-size: 16px;
+  width: fit-content;
+  user-select: none;
+}
+
+body.visible #party-width-dragger {
+  display: block;
+}
+
+body.hbo.visible #party-width-dragger {
+  display: none !important;
+}
+
 body.netflix.visible .AkiraPlayer, /* NETFLIX */
 body.hulu.visible .Player__container,/* HULU */
 body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
@@ -180,6 +201,7 @@ body.amazon .fyysciv.f1lobqlo.fk0j80b {
   bottom: 0;
   right: var(--neg-party-width);
   transition: all ease-in-out 0.3s;
+  transition: width ease 0s;
   width: var(--party-width);
   height: 100%;
   color: white;
@@ -229,6 +251,7 @@ body.amazon .fyysciv.f1lobqlo.fk0j80b {
   animation-iteration-count: 1;
   animation-duration: 2s;
   transition: all ease-in-out 0.3s !important;
+  transition: right ease 0s !important;
 }
 .watch-party-fab:hover {
   right: 0rem !important;

app/src/index.js

@@ -86,7 +86,7 @@ switch (getPlayerSource()) {
     break;
   case PLAYER_SOURCE.HBONOW:
   case PLAYER_SOURCE.HBOMAX:
-    const hboClickInject = `var hboInputFix=function(ev){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.stopImmediatePropagation();ev.stopPropagation();};document.addEventListener('keydown',hboInputFix,{capture:true});var hboClickFix=function(ev){if(document.querySelector('body.visible')){if(ev.clientX > window.innerWidth - 400){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.preventDefault();ev.stopPropagation();ev.stopImmediatePropagation();}}};document.addEventListener("mousedown",hboClickFix,{capture:true});`;
+    const hboClickInject = `var hboInputFix=function(ev){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.stopImmediatePropagation();ev.stopPropagation();};document.addEventListener('keydown',hboInputFix,{capture:true});var hboClickFix=function(ev){if(document.querySelector('body.visible')){if(ev.clientX > window.innerWidth - (parseInt(document.documentElement.style.getPropertyValue('--party-width').slice(0,-2)) + 50) ){if(ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA'){ev.target.focus();}ev.preventDefault();ev.stopPropagation();ev.stopImmediatePropagation();}}};document.addEventListener("mousedown",hboClickFix,{capture:true});`;
     const hboClickInjectScript = document.createElement('script');
     hboClickInjectScript.text = hboClickInject;
     document.head.appendChild(hboClickInjectScript);